:root { --bg: #050805; --fg: #9fef9f; --dim: #4a7a4a; --hot: #ffb020; }
* { box-sizing: border-box; margin: 0; }
body { background: var(--bg); color: var(--fg); font: 15px/1.6 "SF Mono", ui-monospace, monospace;
       display: flex; justify-content: center; padding: 2rem 1rem; }
main { max-width: 720px; width: 100%; }
section { border: 1px solid var(--dim); padding: 1.2rem; margin-bottom: 1.2rem; }
h1 { letter-spacing: .3em; } h2 { color: var(--hot); margin-bottom: .6rem; font-size: 1rem; }
.portrait { color: var(--dim); } .essence { font-size: 1.15rem; }
.tagline { color: var(--hot); font-size: .95rem; letter-spacing: .02em; margin: .3rem 0 1rem; }
.monitor { color: var(--hot); margin: .8rem 0; }
.stakes { color: #e05555; } .ca, .fine, .ts { color: var(--dim); font-size: .85rem; }
.formula { color: var(--fg); background: #0a120a; padding: .8rem; overflow-x: auto; }
.log { margin-bottom: .6rem; } a { color: var(--hot); }
input, select, textarea, button { background: #0a120a; color: var(--fg);
  border: 1px solid var(--dim); padding: .5rem; width: 100%; margin-bottom: .5rem; font: inherit; }
button { cursor: pointer; border-color: var(--hot); color: var(--hot); }

/* decay theater — driven by body[data-tier] */
[data-tier="flicker"] main { animation: flick 7s infinite; }
[data-tier="failing"] main { animation: flick 2.5s infinite; }
[data-tier="critical"] main { animation: flick .9s infinite; }
[data-tier="critical"] .monitor { color: #e05555; }
.missing { visibility: hidden; }
.missing::before { visibility: visible; content: "[ SECTION MISSING — insufficient vitality ]";
  color: #e05555; display: block; }
@keyframes flick { 0%,93% { opacity: 1; } 94% { opacity: .4; } 96% { opacity: .85; } 98% { opacity: .3; } 100% { opacity: 1; } }