:root{
  --bg:#080806;--bg2:#15110c;--ink:#f0eadc;--muted:#9e9686;--accent:#c7a86b;
  --line:rgba(240,234,220,.16);--panel:rgba(255,255,255,.025);--danger:#a03623;
  --radius:3px;--drift:0px;--intensity:.35;
}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--ink)}
body{margin:0;min-height:100vh;background:var(--bg);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.01em;transition:background 1.1s ease,color .8s ease;overflow-x:hidden}
.atmosphere{position:fixed;width:68vw;height:68vw;border-radius:50%;filter:blur(70px);opacity:calc(var(--intensity)*.28);pointer-events:none;z-index:0;transition:background 1.2s ease,opacity .8s ease,transform 2s ease}
.atmosphere-a{left:-25vw;top:-20vw;background:var(--accent)}
.atmosphere-b{right:-32vw;top:34vh;background:var(--bg2)}
.texture-layer{position:fixed;inset:0;z-index:30;pointer-events:none;opacity:.18}
body[data-texture="film_grain"] .texture-layer{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.10'/%3E%3C/svg%3E")}
body[data-texture="paper"] .texture-layer{background:repeating-linear-gradient(0deg,rgba(255,255,255,.018),rgba(255,255,255,.018) 1px,transparent 1px,transparent 4px)}
body[data-texture="glass"] .texture-layer{background:linear-gradient(115deg,rgba(255,255,255,.035),transparent 30%,rgba(255,255,255,.02))}
body[data-motion="slow_drift"] .atmosphere-a{animation:driftA 13s ease-in-out infinite alternate}
body[data-motion="slow_drift"] .atmosphere-b{animation:driftB 16s ease-in-out infinite alternate}
body[data-motion="pulse"] .atmosphere{animation:pulseGlow 5s ease-in-out infinite}
body[data-motion="kinetic"] .atmosphere-a{animation:driftA 4s ease-in-out infinite alternate}
body[data-motion="kinetic"] .atmosphere-b{animation:driftB 5s ease-in-out infinite alternate}

body[data-theme="continental"]{--bg:#120806;--bg2:#4c170f;--ink:#f1dfc5;--muted:#b48d74;--accent:#d09b4b;--line:rgba(240,205,160,.18);--panel:rgba(126,42,20,.08)}
body[data-theme="midnight"]{--bg:#06070c;--bg2:#171b32;--ink:#e5e6ef;--muted:#898da4;--accent:#b9a6db;--line:rgba(214,213,240,.14);--panel:rgba(119,109,164,.06)}
body[data-theme="rain"]{--bg:#071015;--bg2:#11313e;--ink:#e4eef0;--muted:#819da5;--accent:#8cb7c4;--line:rgba(190,225,232,.14);--panel:rgba(75,143,159,.06)}
body[data-theme="botanical"]{--bg:#071009;--bg2:#1d3826;--ink:#e4eadc;--muted:#8da28d;--accent:#a8bd76;--line:rgba(206,224,184,.14);--panel:rgba(78,123,82,.06)}
body[data-theme="electric"]{--bg:#090711;--bg2:#35145a;--ink:#f4efff;--muted:#aa96c9;--accent:#cf8cff;--line:rgba(223,193,255,.18);--panel:rgba(148,67,210,.09)}
body[data-theme="oracle"]{--bg:#0b0507;--bg2:#3b0e18;--ink:#f0d9c7;--muted:#a4776f;--accent:#dc9a69;--line:rgba(226,169,138,.18);--panel:rgba(126,38,49,.08)}
body[data-theme="bureaucracy"]{--bg:#ece8dc;--bg2:#c8c1af;--ink:#171815;--muted:#5e625b;--accent:#315343;--line:rgba(20,30,23,.22);--panel:rgba(30,45,36,.035)}
body[data-theme="bureaucracy"] .masthead,body[data-theme="bureaucracy"] footer{color:#171815}

body[data-typography="editorial"] h1,body[data-typography="editorial"] h2,body[data-typography="editorial"] strong,body[data-typography="editorial"] textarea{font-family:Georgia,"Times New Roman",serif}
body[data-typography="modern"] h1,body[data-typography="modern"] h2,body[data-typography="modern"] strong,body[data-typography="modern"] textarea{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:300}
body[data-typography="archival"] h1,body[data-typography="archival"] h2,body[data-typography="archival"] strong{font-family:"Times New Roman",Georgia,serif}
body[data-typography="terminal"] h1,body[data-typography="terminal"] h2,body[data-typography="terminal"] strong,body[data-typography="terminal"] textarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:-.04em}

main{position:relative;z-index:2;width:min(100%,760px);margin:0 auto;padding:22px 20px 70px}
.masthead{display:flex;align-items:center;justify-content:space-between;padding:10px 0 36px;border-bottom:1px solid var(--line)}
.brand{color:var(--ink);text-decoration:none;font-size:12px;letter-spacing:.31em;font-weight:700}
.system-status{color:var(--muted);font-size:8px;letter-spacing:.16em;text-transform:uppercase}
.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent);margin-right:7px}
.hidden{display:none!important}
.hero{padding:54px 0 30px}
.eyebrow{color:var(--accent);font-size:10px;letter-spacing:.27em;font-weight:700;margin:0 0 18px}
h1,h2,strong{font-weight:400}
h1{font-size:clamp(48px,14vw,78px);line-height:.88;letter-spacing:-.055em;margin:0}
h1 em{color:var(--accent);font-weight:400}
.lede{color:var(--muted);font-size:17px;line-height:1.55;margin:24px 0 0;max-width:35rem}
.statusline{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:36px;padding:14px 0;display:flex;flex-wrap:wrap;gap:10px 22px;color:var(--muted);font-size:9px;letter-spacing:.16em}
.statusline i{display:inline-block;width:6px;height:6px;border-radius:99px;background:var(--accent);margin-right:7px;box-shadow:0 0 12px var(--accent)}
.panel{padding:34px 0 38px;border-bottom:1px solid var(--line)}
.section-head{display:flex;align-items:baseline;gap:15px;margin-bottom:20px}
.section-head span{color:var(--accent);font:10px monospace}
.section-head h2{margin:0;font-size:30px;letter-spacing:-.03em}
.hint{color:var(--muted);margin:-8px 0 20px 31px;line-height:1.5;font-size:13px}
.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
button{color:inherit;font:inherit;cursor:pointer}
.tile{min-height:118px;padding:17px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);text-align:left;display:flex;flex-direction:column;justify-content:space-between;transition:.25s ease}
.tile:active,.tile:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);transform:translateY(-1px)}
.tile small,.kicker,.danger small{color:var(--muted);font-size:8px;letter-spacing:.17em}
.tile strong{font-size:23px}
.make-form{border:1px solid var(--line);background:var(--panel)}
textarea{display:block;width:100%;border:0;outline:0;resize:none;background:transparent;color:var(--ink);font-size:24px;line-height:1.15;padding:20px;min-height:112px}
textarea::placeholder{color:var(--muted);opacity:.55}
.primary{width:100%;display:flex;justify-content:space-between;border:0;border-top:1px solid var(--line);background:transparent;padding:15px 18px;color:var(--accent);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.chips{display:flex;gap:7px;overflow:auto;padding-top:10px}
.chips button{white-space:nowrap;border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:99px;padding:9px 11px;font-size:10px}
.wide{width:100%;min-height:102px;margin-top:8px;border:1px solid var(--line);background:var(--panel);padding:16px 18px;display:grid;grid-template-columns:1fr auto;text-align:left;align-items:center}
.wide .kicker{grid-column:1;align-self:end}.wide strong{grid-column:1;font-size:31px;align-self:start}.wide .arrow{grid-column:2;grid-row:1/3;color:var(--accent);font-size:24px}
.dramatic{background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 10%,transparent),var(--panel))}
.quiet strong{color:var(--muted)}
.context-actions{display:grid;gap:9px}
.context-action{border:1px solid var(--line);background:var(--panel);padding:16px;text-align:left}
.context-action strong{display:block;font-size:21px}.context-action small{color:var(--muted);font-size:9px;letter-spacing:.12em}
.restricted{padding-top:44px}
.danger{width:100%;min-height:145px;border:1px solid color-mix(in srgb,var(--danger) 55%,transparent);background:radial-gradient(circle at 85% 20%,rgba(155,38,20,.13),transparent 40%),var(--panel);padding:22px;text-align:left;position:relative;overflow:hidden}
.danger:after{content:"";position:absolute;inset:7px;border:1px solid rgba(160,54,35,.17);pointer-events:none}
.danger small{color:#b06f62;display:block;margin-bottom:28px}.danger strong{font-size:34px;letter-spacing:-.035em}
footer{padding-top:30px;display:flex;justify-content:space-between;gap:12px;color:var(--muted);opacity:.55;font-size:7px;letter-spacing:.12em}
.state-card{min-height:72vh;display:flex;flex-direction:column;justify-content:center;padding-bottom:15vh}.state-card h1{max-width:650px}
.sleep-orbit{color:var(--accent);font-size:72px;opacity:.35;margin-top:46px;animation:orbit 5s ease-in-out infinite}
.pulse{width:10px;height:10px;background:var(--accent);border-radius:50%;margin-top:35px;animation:pulse 1.5s infinite}
.toast{position:fixed;left:18px;right:18px;bottom:18px;z-index:50;max-width:720px;margin:auto;background:var(--ink);color:var(--bg);padding:16px 18px;border-radius:3px;box-shadow:0 18px 60px #000;font:17px/1.25 Georgia,serif}
.modal{position:fixed;inset:0;z-index:90;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(18px);padding:80px 28px 32px;overflow:auto}
.modal h2{font-size:clamp(42px,12vw,72px);line-height:.9;letter-spacing:-.05em;margin:10px 0 30px}.modal-body{color:var(--ink);font-size:18px;line-height:1.55;max-width:620px}.modal-body p{color:var(--muted)}
.modal-close,#ceremony-close{position:absolute;top:20px;right:20px;border:0;background:none;color:var(--muted);font-size:30px}
.network-box{border:1px solid var(--line);padding:18px;margin:18px 0}.network-box code{display:block;color:var(--accent);font-size:16px;word-break:break-all;margin:8px 0 18px}.network-actions{display:flex;gap:8px;flex-wrap:wrap}.network-actions button{border:1px solid var(--line);background:var(--panel);padding:10px 13px}.wifi-qr{background:#fff;padding:12px;width:min(240px,80vw);margin-top:18px}
.ceremony{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:28px;background:radial-gradient(circle at 50% 35%,rgba(160,50,27,.27),transparent 33rem),#090503;animation:ceremonyIn .75s ease both}
.ceremony>p:first-of-type{color:#c99175;font-size:9px;letter-spacing:.25em}.ceremony h2{font-size:clamp(44px,13vw,78px);line-height:.88;letter-spacing:-.05em;margin:20px 0;color:#dfcfb9}.countdown{font:80px/1 Georgia,serif;color:#d09b69;margin:16px 0}.ceremony-prompt{max-width:550px;font:23px/1.35 Georgia,serif;color:#f0eadc;text-shadow:0 2px 18px rgba(0,0,0,.65)}.ceremony small{color:#b8aa96;margin-top:22px}
@keyframes pulse{50%{transform:scale(2);opacity:.35}}@keyframes orbit{50%{transform:translateX(14px);opacity:.65}}@keyframes ceremonyIn{from{opacity:0;filter:blur(10px)}to{opacity:1;filter:blur(0)}}@keyframes driftA{to{transform:translate(10vw,8vh) scale(1.15)}}@keyframes driftB{to{transform:translate(-8vw,-7vh) scale(.92)}}@keyframes pulseGlow{50%{opacity:calc(var(--intensity)*.48);transform:scale(1.12)}}
@media(max-width:390px){main{padding-left:16px;padding-right:16px}.preset-grid{grid-template-columns:1fr}.tile{min-height:96px}}