@import "https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Source+Sans+3:wght@400;500;600&family=Literata:ital,opsz,wght@0,7..72,400;1,7..72,400&display=swap";:root{--deep:#0f1c19;--loch:#1a3a36;--stone:#4a5c58;--mist:#8fa39c;--foam:#e4eee8;--reed:#6f9e82;--copper:#b08a5a;--ember:#c45c3a;--font-display:"Fraunces", Georgia, serif;--font-ui:"Source Sans 3", system-ui, sans-serif;--font-report:"Literata", Georgia, serif;font-family:var(--font-ui);color:var(--foam);background:var(--deep);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;font-weight:400;line-height:1.45}*,:before,:after{box-sizing:border-box}body{min-width:320px;margin:0}#root{min-height:100svh}button{font-family:inherit}.story-layout{grid-template-rows:minmax(42vh,52vh) 1fr;min-height:100svh;display:grid}.scene-plate{isolation:isolate;background:#0a1210;position:relative;overflow:hidden}.scene-img{object-fit:cover;object-position:center;width:100%;height:100%;display:block;position:absolute;inset:0}.scene-img.base.dim{filter:brightness(.85)}.scene-img.overlay{opacity:0;transition:opacity .45s}.scene-img.overlay.in{opacity:1}.scene-veil{background:linear-gradient(180deg, transparent 35%, color-mix(in oklab, var(--deep) 55%, transparent) 70%, var(--deep) 100%), linear-gradient(90deg, color-mix(in oklab, var(--deep) 35%, transparent), transparent 30%, transparent 70%, color-mix(in oklab, var(--deep) 25%, transparent));pointer-events:none;position:absolute;inset:0}.story{z-index:1;max-width:40rem;margin:-2.5rem auto 0;padding:0 1.25rem 3.5rem;position:relative}.story-brand{font-family:var(--font-display);letter-spacing:.18em;text-transform:uppercase;color:var(--copper);margin:0 0 1rem;font-size:.85rem}.story-banner{margin:0 0 1.25rem}.story-banner button{font:inherit;color:var(--copper);background:color-mix(in oklab, var(--deep) 70%, transparent);border:1px solid color-mix(in oklab, var(--copper) 45%, transparent);cursor:pointer;border-radius:2px;padding:.55rem .85rem;font-size:.9rem}.story-banner button:hover{color:var(--foam);border-color:var(--reed)}.story-thread{gap:1.1rem;transition:opacity .22s,transform .22s;display:grid}.story-thread.is-out{opacity:0;transform:translateY(.4rem)}.story-thread.is-in{animation:.35s bite-in}.story-choices{border-top:1px solid color-mix(in oklab, var(--foam) 14%, transparent);gap:.55rem;margin:2rem 0 0;padding:1.25rem 0 0;list-style:none;transition:opacity .22s;display:grid}.story-choices.is-out{opacity:0}.story-choices.is-in{animation:.35s 50ms both bite-in}.story-thread p{font-family:var(--font-report);color:color-mix(in oklab, var(--foam) 92%, var(--mist));margin:0;font-size:clamp(1.05rem,2.4vw,1.2rem);line-height:1.65}@keyframes bite-in{0%{opacity:0;transform:translateY(.45rem)}to{opacity:1;transform:none}}.story-choices button{text-align:left;width:100%;font:inherit;font-family:var(--font-ui);color:var(--reed);border:none;border-left:2px solid color-mix(in oklab, var(--reed) 45%, transparent);cursor:pointer;background:0 0;padding:.55rem .75rem;font-size:1rem;line-height:1.4;transition:color .15s,border-color .15s,background .15s}.story-choices button:hover{color:var(--foam);border-left-color:var(--copper);background:color-mix(in oklab, var(--loch) 35%, transparent)}.story-footer{justify-content:space-between;align-items:center;gap:1rem;margin-top:2.5rem;display:flex}.story-footer-actions{gap:1rem;display:flex}.story-footer button{font:inherit;letter-spacing:.06em;text-transform:uppercase;color:var(--mist);cursor:pointer;background:0 0;border:none;padding:0;font-size:.8rem}.story-footer button:hover{color:var(--foam)}.story-status{color:var(--mist);font-size:.8rem;font-family:var(--font-ui)}.chargen{border-top:1px solid color-mix(in oklab, var(--foam) 14%, transparent);gap:1.25rem;margin-top:2rem;padding-top:1.25rem;display:grid}.chargen-meta{font-family:var(--font-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--ember);margin:0;font-size:.78rem;font-weight:600}.chargen-row{grid-template-columns:2.5rem 1fr 2.5rem;align-items:center;gap:.5rem;display:grid}.chargen-cycle{font:inherit;color:var(--reed);border:1px solid color-mix(in oklab, var(--reed) 35%, transparent);cursor:pointer;background:0 0;border-radius:2px;width:2.5rem;height:2.5rem;padding:0;font-size:1.25rem;line-height:1}.chargen-cycle:hover{color:var(--foam);border-color:var(--copper)}.chargen-name{text-align:center;gap:.2rem;display:grid}.chargen-field-label{font-family:var(--font-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--mist);font-size:.68rem}.chargen-name-text{font-family:var(--font-display);color:var(--foam);font-size:clamp(1.6rem,4vw,2rem);font-weight:600}.chargen-pronouns{text-align:center;gap:.2rem;display:grid}.chargen-pronoun-text{font-family:var(--font-ui);letter-spacing:.04em;color:var(--foam);font-size:clamp(1.05rem,2.5vw,1.25rem);font-weight:600}.chargen-bg{text-align:center;gap:.35rem;min-height:5.5rem;display:grid}.chargen-bg-label{font-family:var(--font-ui);letter-spacing:.04em;color:var(--copper);font-size:.85rem;font-weight:600}.chargen-bg-text{font-family:var(--font-report);color:color-mix(in oklab, var(--foam) 88%, var(--mist));margin:0;font-size:.98rem;line-height:1.5}.chargen-confirm{text-align:left;width:100%;font:inherit;font-family:var(--font-ui);color:var(--reed);border:none;border-left:2px solid color-mix(in oklab, var(--reed) 45%, transparent);cursor:pointer;text-wrap:pretty;background:0 0;padding:.65rem .75rem;font-size:1rem;line-height:1.45;transition:color .15s,border-color .15s,background .15s}.chargen-confirm:hover{color:var(--foam);border-left-color:var(--copper);background:color-mix(in oklab, var(--loch) 35%, transparent)}@media (width>=960px){.story-layout{grid-template-rows:none;grid-template-columns:minmax(0,1.15fr) minmax(22rem,28rem);min-height:100svh}.scene-plate{height:100svh;position:sticky;top:0}.scene-veil{background:linear-gradient(90deg, transparent 40%, color-mix(in oklab, var(--deep) 55%, transparent) 78%, var(--deep) 100%), linear-gradient(180deg, color-mix(in oklab, var(--deep) 20%, transparent), transparent 30%, color-mix(in oklab, var(--deep) 35%, transparent))}.story{flex-direction:column;justify-content:center;min-height:100svh;margin:0;padding:2.5rem 1.75rem 3.5rem .5rem;display:flex}}@media (width<=959px){.story-layout{grid-template-rows:minmax(38vh,46vh) 1fr}}.mist{pointer-events:none;background:radial-gradient(ellipse 90% 55% at 15% -5%, color-mix(in oklab, var(--loch) 30%, transparent), transparent 58%), linear-gradient(180deg, #0b1412 0%, var(--deep) 100%);z-index:-1;opacity:.85;position:fixed;inset:0}.inkle-shell{min-height:100svh;position:relative}