@font-face{font-family:Golos;src:url('assets/golos.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:Playfair;src:url('assets/playfair-semibold.ttf') format('truetype');font-weight:600;font-display:swap}
:root{color-scheme:dark;--ink:#e7dcc5;--quiet:#bdb7ae;--gold:#e2bd73;--line:#edd2a238;--panel:#0d1221ed;--feature:#d0cceb0e;--ease:cubic-bezier(.22,.61,.36,1)}
*{box-sizing:border-box}html{min-height:100%;background:#050813}body{margin:0;font:16px/1.55 Golos,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid #ffe3a5;outline-offset:6px}::selection{background:#cfa96155;color:#fff2d3}
.world{position:fixed;inset:0;overflow:hidden;pointer-events:none;background:#050813;z-index:0}.cosmos{position:absolute;inset:-4%;background:url('assets/cosmos.jpg') center 56%/cover no-repeat;animation:cosmic-drift 80s ease-in-out infinite alternate;will-change:transform}.veil{position:absolute;inset:0;background:linear-gradient(180deg,#02040c60,transparent 27%,#02040c18 67%,#02040cb8)}#sky{position:absolute;inset:0;width:100%;height:100%;opacity:.85}
.page{position:relative;z-index:1;min-height:100svh;display:flex;flex-direction:column;max-width:1800px;margin:auto;padding:0 clamp(22px,4.2vw,76px)}header{height:100px;display:flex;align-items:center;gap:30px;flex-shrink:0}.brand{display:flex;align-items:center;gap:13px}.brand img{object-fit:contain;filter:drop-shadow(0 0 12px #e1ab6b35)}.brand span{font-size:12px;font-weight:500;letter-spacing:.23em;color:#cfbd98}nav{margin-left:auto;display:flex;gap:30px;align-items:center}nav button,footer button{background:none;font-size:14px;color:var(--quiet);padding:10px 0;transition:color .2s}nav button:hover,footer button:hover{color:#fce1a9}nav button:last-child{color:var(--ink)}nav span{margin-left:10px;color:var(--gold)}.world-controls{display:flex;gap:8px}.theme{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#9cb0d210;box-shadow:inset 0 1px 1px #ffffff12;backdrop-filter:blur(10px);font-size:20px;color:#d8c9ac}.theme:hover{background:#c4cbe41a}
main{flex:1;display:flex;align-items:center;flex-direction:column;justify-content:center;text-align:center;padding:30px 0 40px;min-width:0;outline:0}.hero-emblem{position:relative;width:112px;height:112px;margin-bottom:18px;display:grid;place-items:center}.hero-emblem img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 24px #e8b56442)}
h1{font:600 clamp(34px,5.8vw,86px)/1.22 Playfair,Georgia,serif;letter-spacing:.18em;padding-left:.18em;margin:0;color:#e4c786;background:linear-gradient(112deg,#a98348,#f2d795 21%,#fff1c7 32%,#c5a66b 48%,#fff0bf 61%,#c4a361 80%,#eddbb5);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 20px #ba8c4625)}.slogan{margin:17px 0 0;font-size:clamp(12px,1.1vw,15px);letter-spacing:.34em;padding-left:.34em;color:#d8c6a3;font-weight:500}.constellation-rule{display:flex;align-items:center;gap:14px;margin:22px 0 17px;color:#e4c58a}.constellation-rule i{height:1px;width:78px;background:linear-gradient(90deg,transparent,#c5a56c70)}.constellation-rule i:last-child{transform:rotate(180deg)}.constellation-rule span{font-size:19px;line-height:1}.intro{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:11px 26px;color:#c8c4bf;font-size:14px}.intro span+span:before{content:'·';color:#c3a775;margin-right:26px}
.entry{width:min(100%,850px);margin-top:39px}.entry-label{font-size:14px;letter-spacing:.06em;color:#b7b5bf;margin:0 0 15px}.channels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;perspective:1000px}.channel{isolation:isolate;position:relative;overflow:hidden;min-height:105px;display:flex;align-items:center;gap:15px;padding:22px;border-radius:23px;text-align:left;border:1px solid #ece0c94a;background:linear-gradient(118deg,#eeebf929,#a4b3d60e 38%,#080d1a29 63%,#e7d0a61b);backdrop-filter:blur(18px) saturate(155%);-webkit-backdrop-filter:blur(18px) saturate(155%);box-shadow:inset 0 1px 0 #fff8df52,inset 1px 0 1px #e9f3ff20,inset 0 -1px 0 #b8cdf628,0 14px 35px #00000032;transition:transform 250ms var(--ease),border-color .2s,box-shadow .2s}.channel:before{content:'';position:absolute;z-index:-1;width:130%;height:120%;left:-48%;top:-85%;border-radius:50%;background:linear-gradient(120deg,#ffffff2b,#ffffff03);transform:rotate(-24deg)}.channel:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(128deg,transparent 36%,#fff1ce13 44%,transparent 53%);box-shadow:inset 0 0 18px #d5e8ff08;transition:transform 250ms var(--ease)}.channel:active{transform:scale(.975)}.platform-icon{display:grid;place-items:center;flex-shrink:0;width:35px;height:35px;color:#f4e8d1;filter:drop-shadow(0 1px 7px #c8b49030)}.platform-icon svg{width:30px;height:30px;fill:currentColor}.platform-icon.telegram{color:#c8dfec}.platform-icon.play svg{width:33px;height:33px}.channel small{display:block;color:#c5c1c8;font-size:12px;margin-bottom:1px;line-height:1.5}.channel strong{display:block;font-size:18px;font-weight:500;letter-spacing:-.02em;color:#f0e8da;white-space:nowrap}.arrow{align-self:flex-start;margin-left:auto;font-size:18px;line-height:1;color:#d5c5a6;opacity:.85}.continuity{font-size:12px;color:#b7b4bc;margin:20px 0 0}.discover{background:none;margin-top:24px;padding:10px 15px;color:#dcc79c;font-size:14px;letter-spacing:.015em}.discover span{margin-left:13px;color:#af9770}.discover:hover{color:#ffe7b2}
footer{display:flex;gap:24px;align-items:center;min-height:70px;flex-shrink:0;border-top:1px solid #d5c59816}.signature{font-size:12px;letter-spacing:.07em;color:#b2a895}.prototype{font-size:12px;color:#a5a4ad;margin-left:auto}footer button{font-size:12px}.skip{position:fixed;left:20px;top:-100px;z-index:10;background:#172338;padding:12px}.skip:focus{top:20px}
dialog{padding:0;border:1px solid #e4d5b748;border-radius:30px;width:min(730px,calc(100% - 32px));max-height:85svh;color:var(--ink);background:var(--panel);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);box-shadow:inset 0 1px 0 #fff2d635,0 35px 140px #000a}dialog[open]{animation:panel-in 260ms var(--ease)}dialog::backdrop{background:#01030bbd;backdrop-filter:blur(8px)}dialog[open]::backdrop{animation:veil-in 260ms var(--ease)}dialog.leaving{animation:panel-out 200ms var(--ease) forwards}dialog.leaving::backdrop{animation:veil-out 200ms var(--ease) forwards}.panel-shell{padding:clamp(26px,5vw,52px);position:relative}.close{position:absolute;right:17px;top:13px;border-radius:50%;width:44px;height:44px;background:#c9cadd12;color:var(--ink);font-size:28px;line-height:1}.panel-kicker{margin:0 36px 13px 0;font-size:12px;letter-spacing:.12em;color:var(--gold)}h2{font:600 clamp(28px,4vw,42px)/1.2 Playfair,Georgia,serif;color:#e4cfa6;margin:0 0 22px}h3{font:600 22px/1.3 Playfair,serif;margin:10px 0;color:var(--ink)}.panel-lead{font-size:16px;line-height:1.7;color:var(--quiet);margin:18px 0}.features{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0}.feature{border:1px solid var(--line);border-radius:18px;padding:20px;background:var(--feature);box-shadow:inset 0 1px #ffffff10}.feature>span{font-size:12px;letter-spacing:.09em;color:var(--gold)}.feature p{font-size:14px;line-height:1.6;color:var(--quiet);margin:8px 0 0}.notice{margin:24px 0;padding:18px 20px;border:1px solid var(--line);border-radius:16px;background:var(--feature);font-size:14px;line-height:1.65;color:var(--quiet)}.primary{padding:14px 23px;border-radius:14px;border:1px solid #d9bf8666;background:linear-gradient(120deg,#d2b16926,#d2b16910);color:#e9d3a7;font-size:14px;box-shadow:inset 0 1px #ffe9b326}.primary:hover{background:#d2b16930}.steps{padding-left:23px;line-height:1.75;color:var(--quiet)}.steps li{padding:5px}.status{display:inline-block;padding:6px 12px;border:1px solid var(--line);border-radius:30px;color:var(--gold);font-size:12px}.noscript{position:relative;z-index:2;text-align:center}
html[data-theme=day]{color-scheme:light;--ink:#3c332a;--quiet:#574f46;--gold:#735320;--line:#7d6a4333;--panel:#f2eddef2;--feature:#ffffff3d}[data-theme=day] .world{background:#ded7c3}[data-theme=day] .cosmos{filter:sepia(.3) brightness(1.65);opacity:.55;mix-blend-mode:luminosity}[data-theme=day] .veil{background:linear-gradient(#f8edcf73,#f6ead3bb 45%,#e6dbc89c)}[data-theme=day] h1{background-image:linear-gradient(110deg,#554025,#9a6f31,#4d391f,#a37b3a,#4e391f);filter:none}[data-theme=day] .slogan,[data-theme=day] .brand span,[data-theme=day] .discover{color:#674d2d}[data-theme=day] .intro,[data-theme=day] .entry-label,[data-theme=day] .continuity,[data-theme=day] .signature,[data-theme=day] .prototype{color:#5f594f}[data-theme=day] .channel{background:linear-gradient(120deg,#fffdf1a1,#fffdf32b 50%,#e7cf9a40);border-color:#ffffffb3;box-shadow:inset 0 1px #fff,0 10px 35px #443a2124}[data-theme=day] .channel strong,[data-theme=day] .platform-icon,[data-theme=day] .arrow{color:#463b2a}[data-theme=day] .channel small{color:#615d53}[data-theme=day] .theme{color:#60502f;background:#fff7e84a}[data-theme=day] h2{color:#6e522f}[data-theme=day] .primary{color:#674d2d}[data-theme=day] footer{border-color:#6c604320}
@keyframes cosmic-drift{from{transform:scale(1) rotate(-.6deg)}to{transform:scale(1.06) rotate(.6deg)}}@keyframes panel-in{from{opacity:0;transform:translateY(16px) scale(.975)}to{opacity:1;transform:none}}@keyframes panel-out{to{opacity:0;transform:translateY(10px) scale(.985)}}@keyframes veil-in{from{opacity:0}to{opacity:1}}@keyframes veil-out{to{opacity:0}}[data-paused=true] .cosmos{animation-play-state:paused}
@media(hover:hover) and (pointer:fine){.channel:hover{transform:translateY(-5px) rotateX(3deg);border-color:#f9e3b186;box-shadow:inset 0 1px 0 #fff1c588,inset 0 -1px 0 #c8d9fd40,0 17px 36px #03040c55,0 0 24px #dfb86913}.channel:hover:after{transform:translateX(12%)}.channel:active{transform:scale(.975)}}
@media(min-width:1500px){.entry{margin-top:48px}.hero-emblem{width:126px;height:126px;margin-bottom:22px}}
@media(max-width:760px){header{height:80px;gap:12px}.brand span{display:none}nav{gap:18px}nav button:first-child{display:none}.world-controls{gap:3px}.theme{width:40px;height:44px}.page{padding:0 22px}main{padding:24px 0 28px}.hero-emblem{width:100px;height:100px;margin-bottom:25px}h1{font-size:clamp(30px,6.8vw,52px);letter-spacing:.14em;padding-left:.14em}.slogan{font-size:12px;letter-spacing:.2em;max-width:100%;margin-top:20px}.intro{gap:7px 12px;font-size:12px}.intro span+span:before{margin-right:12px}.entry{margin-top:33px}.channels{gap:10px}.channel{min-height:142px;flex-direction:column;gap:10px;padding:19px 7px 17px;text-align:center;border-radius:21px}.channel strong{font-size:15px}.channel small{font-size:12px}.arrow{position:absolute;right:10px;top:12px;font-size:14px}.platform-icon{height:32px}.continuity{font-size:12px;margin-top:18px}.discover{margin-top:20px}footer{gap:14px;flex-wrap:wrap;justify-content:center;min-height:80px;padding:14px 0}.signature{display:none}.prototype{width:100%;margin:0;text-align:center;font-size:12px}footer button{padding:0}.cosmos{background-position:47% 50%;inset:-4% -65%}.features{grid-template-columns:1fr}}
@media(max-width:370px){.page{padding:0 14px}nav{gap:12px}.channel strong{font-size:14px}.intro{gap:6px}.intro span+span:before{margin-right:6px}h1{font-size:29px}.slogan{letter-spacing:.1em}.hero-emblem{width:88px;height:88px}}
@media(max-height:760px) and (min-width:761px){header{height:72px}main{padding:15px 0}.hero-emblem{width:82px;height:82px;margin-bottom:12px}h1{font-size:58px}.slogan{margin-top:11px}.constellation-rule{margin:17px 0 12px}.entry{margin-top:22px}.channel{min-height:88px}.discover{margin-top:13px}footer{min-height:55px}}
@media(prefers-reduced-motion:reduce){.cosmos,dialog[open],dialog.leaving,dialog[open]::backdrop,dialog.leaving::backdrop{animation:none}.channel,.channel:after,nav button,footer button{transition:none}.channel:hover,.channel:hover:after{transform:none}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.channel{background:#1a2032e8}[data-theme=day] .channel{background:#f4eddded}}

/* V3 — one emblem; familiar actions and a lighter, cohesive control layer. */
header{justify-content:space-between;height:88px}nav{margin-left:0;gap:4px;padding:5px;border-radius:100px;background:#b5c8ee0a;backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px #dbe6ff14,inset 0 1px #fff3d515}nav button{min-height:40px;padding:8px 19px;border-radius:100px;font-weight:500;color:#d5d0c7}nav button:last-child{background:#e6decb10;box-shadow:inset 0 1px #ffffff16}nav button:hover{background:#eef4ff12}.world-controls{gap:8px}.theme{border:0;background:#b5c8ee0a;box-shadow:inset 0 0 0 1px #dbe6ff20,inset 0 1px #fff3d520}
.hero-emblem{margin-bottom:20px}.hero-emblem img{filter:drop-shadow(0 0 16px #e8b56430)}.entry{max-width:790px}.entry-label{font-size:14px;letter-spacing:0;color:#ded5c4;margin-bottom:16px}.channel{min-height:88px;border:0;border-radius:23px;padding:19px 21px;gap:14px;background:linear-gradient(145deg,#dde9ff29,#c2d0ee12 45%,#faf0d21c);box-shadow:inset 0 0 0 1px #eaf0ff35,inset 0 1px 0 #fff9e675,inset 0 -1px 0 #c5dbff19,0 10px 25px #02050d3d}.channel:before{opacity:.7}.channel small{font-size:13px;color:#d1ced0;line-height:1.4}.channel strong{font-size:18px;font-weight:550;line-height:1.4}.platform-icon{width:33px;height:36px}.arrow{align-self:center;color:#e2d9c7}.channel:active{transform:scale(.975);transition:transform 90ms ease-out;background-color:#f4e5bb0d}.discover{min-height:44px;border-radius:100px;background:#e9dcba08;padding:10px 20px;box-shadow:inset 0 0 0 1px #e9dcba18;margin-top:21px}.continuity{font-size:13px;color:#c1bcc2}.close:active,.theme:active,nav button:active,.primary:active{transform:scale(.96)}
[data-theme=day] nav{background:#ffffff28;box-shadow:inset 0 0 0 1px #ffffff70}[data-theme=day] nav button{color:#594b36}[data-theme=day] nav button:last-child{background:#fff8e75e}[data-theme=day] .entry-label{color:#564530}[data-theme=day] .discover{background:#fff5d744;box-shadow:inset 0 0 0 1px #8777502b}
@media(hover:hover) and (pointer:fine){.channel:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px #f0e6d55e,inset 0 1px #fff9e6b3,0 14px 30px #02050d4a}.channel:active{transform:scale(.975)}}
@media(max-width:760px){header{height:76px;gap:10px}nav{gap:0;padding:4px}nav button{padding:8px 13px;font-size:14px}nav button:first-child{display:block}.world-controls{gap:4px}.theme{width:44px;height:44px}.entry{width:min(100%,400px);margin-top:26px}.channels{grid-template-columns:1fr;gap:10px}.channel{flex-direction:row;min-height:74px;padding:13px 21px;gap:17px;text-align:left;border-radius:21px}.channel strong{font-size:18px}.channel small{font-size:13px}.arrow{position:static;font-size:19px;align-self:center}.hero-emblem{width:90px;height:90px;margin-bottom:14px}.constellation-rule{margin:17px 0 12px}.slogan{margin-top:14px}.intro{gap:8px 12px}.continuity{font-size:12px;margin-top:16px}.discover{margin-top:17px}main{padding:15px 0 27px}dialog{width:100%;max-width:100%;max-height:87svh;margin:auto 0 0;border-radius:30px 30px 0 0;border-bottom:0;box-shadow:inset 0 1px #fff2d635,0 -20px 90px #0007}.panel-shell{padding:32px 26px calc(26px + env(safe-area-inset-bottom))}.close{top:22px;right:15px}.panel-kicker{margin-right:40px}.prototype{font-size:12px}footer{min-height:76px}}
@media(max-width:370px){nav button{padding:8px 10px}.world-controls{gap:2px}.hero-emblem{width:80px;height:80px}.channel{min-height:70px}.slogan{letter-spacing:.1em}.intro{font-size:12px;gap:5px}}
@media(prefers-reduced-motion:reduce){.channel:hover,.channel:active,.close:active,.theme:active,nav button:active,.primary:active{transform:none}.channel:active{transition:none}}

/* V4: the interface floats in the live 3D scene, rather than competing with it. */
[data-scene='3d'] #sky{opacity:1}[data-scene='3d'] .cosmos{opacity:.64;animation-duration:65s}.world{transition:opacity .5s ease}.page main{transition:transform .5s cubic-bezier(.22,.61,.36,1),opacity .35s ease;transform-origin:center 46%}[data-panel-open=true] .page main{transform:scale(.96) translateY(8px);opacity:.18}dialog::backdrop{background:#01030b91;backdrop-filter:blur(4px)}
.hero-emblem{animation:arrival .8s cubic-bezier(.22,.61,.36,1) both}h1{animation:arrival .8s .06s cubic-bezier(.22,.61,.36,1) both}.slogan{animation:arrival .8s .12s cubic-bezier(.22,.61,.36,1) both}.entry{animation:arrival .8s .18s cubic-bezier(.22,.61,.36,1) both}
@keyframes arrival{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}
@media(hover:hover) and (pointer:fine){.channel{transform-style:preserve-3d}.channel:hover{transform:translateY(-4px) rotateX(6deg)}.platform-icon{transition:transform .3s cubic-bezier(.22,.61,.36,1)}.channel:hover .platform-icon{transform:translateZ(12px) scale(1.07)}.channel:active{transform:scale(.975)}}
[data-paused=true] .hero-emblem,[data-paused=true] h1,[data-paused=true] .slogan,[data-paused=true] .entry{animation:none}
@media(prefers-reduced-motion:reduce){.hero-emblem,h1,.slogan,.entry{animation:none}.page main,.world,.platform-icon{transition:none}[data-panel-open=true] .page main,.channel:hover,.channel:hover .platform-icon{transform:none}}

/* V5 — one material shared by the three entry controls and every inner surface. */
:root{--glass:linear-gradient(145deg,#dde9ff29,#c2d0ee12 45%,#faf0d21c);--glass-shadow:inset 0 0 0 1px #eaf0ff35,inset 0 1px 0 #fff9e675,inset 0 -1px 0 #c5dbff19,0 10px 25px #02050d3d;--glass-filter:blur(18px) saturate(155%)}
html[data-theme=day]{--glass:linear-gradient(145deg,#fffdf19e,#fffdf345 45%,#e7cf9a40);--glass-shadow:inset 0 0 0 1px #ffffffb0,inset 0 1px #fff,0 10px 25px #443a2124}
.channel,dialog,.feature,.notice,.story-glass,.primary,.settings-popover,[data-theme=day] .channel{border:0;background:var(--glass);box-shadow:var(--glass-shadow);backdrop-filter:var(--glass-filter);-webkit-backdrop-filter:var(--glass-filter)}
dialog{isolation:isolate;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#dec89666 transparent;max-height:88svh}
dialog::backdrop,[data-theme=day] dialog::backdrop{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.panel-shell{padding-top:58px}.panel-shell:after{content:'';position:absolute;pointer-events:none;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#fce1a8,transparent);opacity:.75}
.panel-back{position:absolute;left:22px;top:14px;min-height:44px;padding:6px 10px;border-radius:16px;background:none;color:var(--quiet);font-size:14px}.panel-back[hidden]{display:none}.close{top:14px}
#panel-content,.panel-kicker,#panel-title{transition:opacity 100ms ease,transform 100ms ease}
dialog.changing #panel-content,dialog.changing .panel-kicker,dialog.changing #panel-title{opacity:0;transform:translateY(-5px)}
dialog.revealing #panel-content{animation:content-arrive 280ms var(--ease)}dialog[open] .panel-shell:after,dialog.revealing .panel-shell:after{animation:light-reveal 420ms ease-out}
.feature{position:relative;display:block;text-align:left;width:100%;padding:21px 24px;min-height:132px;transition:transform 180ms var(--ease),box-shadow 180ms ease;color:var(--ink)}.feature>span:first-child{font:400 11px/1.6 Golos,sans-serif;letter-spacing:.035em;display:block;padding-right:13px}.feature h3{font-size:23px;margin:14px 12px 0 0}.feature-arrow{position:absolute;right:18px;bottom:18px}.feature:active{transform:scale(.98)}
.story-glass{border-radius:23px;padding:22px 25px;margin:23px 0;font-size:16px;line-height:1.75;color:var(--ink)}.story-glass p{margin:0}.notice{border-radius:23px;color:var(--ink)}
.panel-intro{font-size:16px;line-height:1.75;color:var(--quiet);margin:18px 0 25px}.story-label{display:block;font-size:11px;line-height:1.6;letter-spacing:.09em;color:var(--gold);margin-bottom:12px}.story-glass h3{margin:0 0 12px}.outcome{margin:30px 0 24px;padding-left:20px;border-left:1px solid var(--line)}.outcome p{font:500 clamp(20px,3.5vw,25px)/1.55 Playfair,Georgia,serif;color:var(--ink);margin:0}.feature h3{padding-right:12px}
.panel-lead{color:var(--ink);font-size:17px}.fine-print{font-size:13px;color:var(--quiet);line-height:1.65;margin:20px 0}.primary{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:52px;font-weight:550;border-radius:18px;color:var(--ink);text-align:center;padding:15px 22px;transition:transform 120ms ease}.primary:hover{background:var(--glass);box-shadow:var(--glass-shadow),0 0 22px #ddbc6517}.primary:active{transform:scale(.98)}
.text-action{display:block;background:none;min-height:44px;padding:12px 0;margin-top:10px;font-size:14px;color:var(--quiet);text-align:left}.panel-actions{margin-top:25px}.route-options{display:grid;gap:12px;margin:22px 0}.route-options .feature{min-height:100px}.route-options h3{margin:0}.legal-links{display:grid;gap:12px}.legal-links .primary{justify-content:space-between}
.world-settings{position:relative}.world-settings summary{list-style:none;cursor:pointer;display:grid;place-items:center;width:44px;height:44px;font-size:24px;color:var(--ink);border-radius:50%;background:#b5c8ee0a;box-shadow:inset 0 0 0 1px #dbe6ff20}.world-settings summary::-webkit-details-marker{display:none}.world-settings summary:focus-visible{outline:2px solid var(--gold);outline-offset:4px}.settings-popover{position:absolute;z-index:5;right:0;top:55px;width:248px;padding:20px;border-radius:23px}.settings-popover p{margin:0 0 10px;font:600 20px Playfair,serif}.settings-popover button{min-height:44px;background:none;padding:0;font-size:14px;color:var(--ink);text-align:left}.settings-popover button span{margin-right:8px}.settings-popover small{display:block;font-size:12px;line-height:1.6;color:var(--quiet);margin-top:7px}header{position:relative;z-index:3}
.page{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
[data-panel-open=true] .page main{opacity:0;visibility:hidden;transition:none;transform:scale(.96)}
[data-panel-open=true] header,[data-panel-open=true] footer{opacity:0;pointer-events:none}
@keyframes content-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes light-reveal{from{opacity:0;transform:scaleX(.08)}45%{opacity:1}to{opacity:.75;transform:scaleX(1)}}
@media(hover:hover) and (pointer:fine){.feature:hover{transform:translateY(-2px);box-shadow:var(--glass-shadow),0 0 28px #edd9a112}.feature:active{transform:scale(.98)}}
@media(max-width:760px){dialog{width:calc(100% - 16px);max-height:90svh;margin:auto 8px 8px;border-radius:27px}.panel-shell{padding:62px 23px calc(23px + env(safe-area-inset-bottom))}.features{grid-template-columns:1fr;gap:11px}.feature{min-height:112px;padding:18px 21px}.feature h3{font-size:23px;margin-top:12px}.primary{width:100%;font-size:14px}.panel-lead{font-size:16px}h2{font-size:32px}.text-action{width:100%;text-align:center}.settings-popover{width:230px}.prototype{font-size:10px;letter-spacing:.09em}.continuity{max-width:290px;margin-left:auto;margin-right:auto}}
@media(prefers-reduced-motion:reduce){dialog.revealing #panel-content,dialog[open] .panel-shell:after,dialog.revealing .panel-shell:after{animation:none}#panel-content,.panel-kicker,#panel-title,.feature,.primary{transition:none}.feature:hover,.feature:active,.primary:active{transform:none}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){:root{--glass:#182236ed}html[data-theme=day]{--glass:#f3ecdcf5}}

/* V7: one glass layer per surface. The dialog is only a transparent layout;
   nesting frosted panes previously blurred the world twice and flattened it. */
dialog,[data-theme=day] dialog{background:transparent;box-shadow:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;isolation:auto;overflow:auto}
.panel-shell:after{display:none}
.panel-shell{padding:64px 12px 22px}
.panel-kicker,#panel-title,.panel-lead,.panel-intro,.outcome,.fine-print{ text-shadow:0 2px 12px #02040c,0 0 26px #02040c80 }
[data-theme=day] .panel-kicker,[data-theme=day] #panel-title,[data-theme=day] .panel-lead,[data-theme=day] .panel-intro,[data-theme=day] .outcome,[data-theme=day] .fine-print{text-shadow:none}
.feature,.notice,.story-glass,.primary{position:relative;isolation:isolate;overflow:hidden;border-radius:23px;background:var(--glass);box-shadow:var(--glass-shadow);backdrop-filter:var(--glass-filter);-webkit-backdrop-filter:var(--glass-filter)}
.feature:before,.notice:before,.story-glass:before,.primary:before{content:'';position:absolute;pointer-events:none;z-index:-1;width:130%;height:120%;left:-48%;top:-85%;border-radius:50%;background:linear-gradient(120deg,#ffffff2b,#ffffff03);transform:rotate(-24deg);opacity:.7}
.feature:after,.notice:after,.story-glass:after,.primary:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(128deg,transparent 36%,#fff1ce13 44%,transparent 53%);box-shadow:inset 0 0 18px #d5e8ff08}
.story-label{font-size:12px}
.close,.panel-back{background:var(--glass);box-shadow:var(--glass-shadow);backdrop-filter:var(--glass-filter);-webkit-backdrop-filter:var(--glass-filter)}
.panel-back{left:12px}.close{right:12px}
.story-glass .panel-lead{margin:0;text-shadow:none}.story-glass .panel-lead+p{margin-top:16px}
@media(max-width:760px){dialog{width:calc(100% - 28px);margin:auto 14px;max-height:92svh;border-radius:0}.panel-shell{padding:66px 8px calc(24px + env(safe-area-inset-bottom))}.close{right:8px}.panel-back{left:8px}}

/* V8: larger reading panes need optical compensation, not a second frosted
   sheet. Preserve the accepted home material; let the live sky read inside. */
#panel .feature,#panel .notice,#panel .story-glass,#panel .primary{background:linear-gradient(145deg,#dde9ff12,#c2d0ee06 45%,#faf0d20a);backdrop-filter:blur(2px) saturate(120%);-webkit-backdrop-filter:blur(2px) saturate(120%);text-shadow:0 1px 7px #02040cb3}
#panel .feature:before,#panel .notice:before,#panel .story-glass:before,#panel .primary:before{opacity:.35}
#panel .feature:after,#panel .notice:after,#panel .story-glass:after,#panel .primary:after{background:linear-gradient(128deg,transparent 36%,#fff1ce09 44%,transparent 53%)}
[data-theme=day] #panel .feature,[data-theme=day] #panel .notice,[data-theme=day] #panel .story-glass,[data-theme=day] #panel .primary{background:linear-gradient(145deg,#fffdf166,#fffdf326 45%,#e7cf9a20);text-shadow:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){#panel .feature,#panel .notice,#panel .story-glass,#panel .primary{background:var(--glass)}}

/* Mobile sections own the viewport, not a clipped 92svh scroll window. Safe
   areas belong to the content only; there are no opaque header/footer bands. */
@media(max-width:760px){
  #panel{position:fixed;inset:0;width:100%;max-width:none;height:100%;height:100dvh;max-height:none;margin:0;padding:0;border-radius:0}
  #panel .panel-shell{min-height:100%;padding:calc(78px + env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) calc(30px + env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left))}
  #panel .close,#panel .panel-back{top:calc(14px + env(safe-area-inset-top))}
  #panel .close{right:max(22px,env(safe-area-inset-right))}
  #panel .panel-back{left:max(22px,env(safe-area-inset-left));max-width:calc(100% - 110px)}
}

/* V10: reading preference is explicit; an accessible card is not a full-screen
   opaque world. HTML starts in glass; manual system/readable remains available. */
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){

html:not([data-material=glass]){--glass:#111a2b;--glass-filter:none}
html:not([data-material=glass])[data-theme=day]{--glass:#f3ecdc}
html:not([data-material=glass]) .channel,html:not([data-material=glass]) nav,html:not([data-material=glass]) .theme,html:not([data-material=glass]) #panel .feature,html:not([data-material=glass]) #panel .notice,html:not([data-material=glass]) #panel .story-glass,html:not([data-material=glass]) #panel .primary,html:not([data-material=glass]) .close,html:not([data-material=glass]) .panel-back,html:not([data-material=glass]) .settings-popover{background:var(--glass);backdrop-filter:none;-webkit-backdrop-filter:none;text-shadow:none}
html:not([data-material=glass]) #panel .panel-shell{background:transparent;border-radius:0}
html:not([data-material=glass]) .panel-shell>.panel-kicker,html:not([data-material=glass]) .panel-shell>#panel-title,html:not([data-material=glass]) #panel-content>.panel-lead,html:not([data-material=glass]) #panel-content>.panel-intro,html:not([data-material=glass]) #panel-content>.outcome,html:not([data-material=glass]) #panel-content>.fine-print{background:var(--glass);border-radius:16px;padding:14px 16px;text-shadow:none}
html:not([data-material=glass]) .fine-print,html:not([data-material=glass]) .text-action{color:var(--ink)}
}

html[data-material=readable]{--glass:#111a2b;--glass-filter:none}
html[data-material=readable][data-theme=day]{--glass:#f3ecdc}
html[data-material=readable] .channel,html[data-material=readable] nav,html[data-material=readable] .theme,html[data-material=readable] #panel .feature,html[data-material=readable] #panel .notice,html[data-material=readable] #panel .story-glass,html[data-material=readable] #panel .primary,html[data-material=readable] .close,html[data-material=readable] .panel-back,html[data-material=readable] .settings-popover{background:var(--glass);backdrop-filter:none;-webkit-backdrop-filter:none;text-shadow:none}
html[data-material=readable] #panel .panel-shell{background:transparent;border-radius:0}
html[data-material=readable] .panel-shell>.panel-kicker,html[data-material=readable] .panel-shell>#panel-title,html[data-material=readable] #panel-content>.panel-lead,html[data-material=readable] #panel-content>.panel-intro,html[data-material=readable] #panel-content>.outcome,html[data-material=readable] #panel-content>.fine-print{background:var(--glass);border-radius:16px;padding:14px 16px;text-shadow:none}
html[data-material=readable] .fine-print,html[data-material=readable] .text-action{color:var(--ink)}

#panel-title:focus{outline:none}
html[data-input=keyboard] #panel-title:focus{outline:2px solid var(--gold);outline-offset:5px}
.settings-popover{width:min(290px,calc(100vw - 44px));max-height:72svh;overflow:auto}
#material-settings{border:0;padding:0;margin:18px 0 0;min-width:0}
#material-settings legend{font-size:14px;font-weight:550;margin-bottom:7px}
#material-settings label{display:flex;align-items:center;gap:10px;min-height:44px;padding:7px 0;font-size:14px;line-height:1.4;cursor:pointer}
#material-settings input{flex:0 0 18px;width:18px;height:18px;margin:0;accent-color:var(--gold)}
#material-settings input:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
#material-status{margin-top:10px}
@media(max-width:760px){
  #panel-title{font-size:clamp(27px,7.2vw,32px);line-height:1.2;text-wrap:balance;margin-bottom:20px}
  #panel .panel-lead{font-size:16px;line-height:1.55;margin:14px 0}
  #panel .panel-intro{font-size:15px;line-height:1.6;margin:14px 0 18px}
  #panel .story-glass{font-size:16px;line-height:1.6;padding:18px 20px;margin:20px 0}
  #panel .story-glass p+p{margin-top:12px}
  #panel .outcome{margin:22px 0;padding-left:16px}
  #panel .outcome p{font:400 16px/1.6 Golos,sans-serif}
  #panel .story-label{font-size:12px;line-height:1.5;letter-spacing:.06em;margin-bottom:10px}
  #panel .fine-print{font-size:13px;line-height:1.6}
}

/* V12: mobile world and sections share the natural document scroll. Desktop
   retains its fixed world/native modal; no Safari toolbar-sized fake overlays. */
@media(max-width:760px){body{position:relative;min-height:100lvh}.world{position:absolute;inset:0}}
html[data-panel-presentation=document] .page,html[data-panel-presentation=document] .skip{display:none}
html[data-panel-presentation=document] #panel{position:relative;inset:auto;width:100%;max-width:none;height:auto;min-height:100lvh;max-height:none;margin:0;overflow:visible}
html[data-panel-presentation=document] #panel .panel-shell{min-height:100lvh}
.panel-bottom-controls{display:none}
html[data-panel-presentation=document] .panel-bottom-controls{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;margin-top:30px}
.panel-bottom-controls .text-action{min-height:44px;margin:0;padding:8px 16px;border-radius:16px}
.panel-bottom-controls [hidden]{display:none}

/* Explicit owner choice: more transparent, one material across all sections.
   Text opacity, readable mode and reduced-motion preference remain unchanged. */
html[data-material=glass]{--glass:linear-gradient(145deg,#dde9ff0a,#c2d0ee03 45%,#faf0d206);--glass-filter:blur(1px) saturate(115%)}
html[data-material=glass][data-theme=day]{--glass:linear-gradient(145deg,#fffdf133,#fffdf315 45%,#e7cf9a10)}
html[data-material=glass] .channel,html[data-material=glass] #panel .feature,html[data-material=glass] #panel .notice,html[data-material=glass] #panel .story-glass,html[data-material=glass] #panel .primary,html[data-material=glass] .panel-bottom-controls .text-action{background:var(--glass);backdrop-filter:var(--glass-filter);-webkit-backdrop-filter:var(--glass-filter)}
html[data-material=glass] .channel:before,html[data-material=glass] #panel .feature:before,html[data-material=glass] #panel .notice:before,html[data-material=glass] #panel .story-glass:before,html[data-material=glass] #panel .primary:before{opacity:.2}
html[data-material=readable] .panel-bottom-controls .text-action{background:var(--glass)}

/* V13: explicit owner request, emblem2.5x at each existing breakpoint. */
.hero-emblem{width:280px;height:280px;flex-shrink:0}
@media(min-width:1500px){.hero-emblem{width:315px;height:315px}}
@media(max-width:760px){.hero-emblem{width:225px;height:225px}}
@media(max-width:370px){.hero-emblem{width:200px;height:200px}}
@media(max-height:760px) and (min-width:761px){.hero-emblem{width:205px;height:205px}}

/* V14: owner-requested top-only30px; bottom and document scroll range stay put. */
@media(max-width:760px){
 .world{top:-30px;bottom:0}
 html[data-theme=night] .veil{background:linear-gradient(180deg,#02040c18,transparent 27%,#02040c18 67%,#02040cb8)}
}

/* V15: title and all following main content move10px up; equal bottom-padding
   compensation keeps the centered emblem and footer in place. */
.hero-emblem{margin-bottom:10px}
main{padding-bottom:50px}
@media(max-height:760px) and (min-width:761px){main{padding-bottom:25px}}
@media(max-width:760px){
 body{padding-top:80px;min-height:calc(100lvh + 80px)}
 header{height:auto;min-height:76px;align-items:flex-start;padding-top:30px}
 .hero-emblem{margin-bottom:4px}
 main{padding-bottom:37px}
}