@font-face{font-family:Manrope;src:url('./assets/manrope-latin.woff2') format('woff2');font-style:normal;font-weight:200 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Manrope;src:url('./assets/manrope-cyrillic.woff2') format('woff2');font-style:normal;font-weight:200 800;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
:root{color-scheme:dark;--bg:#0c1018;--ink:#f3f6ff;--muted:#b4bfd3;--panel:rgba(19,27,43,.86);--solid:#182235;--edge:#536078;--accent:#a8ff62;--accent-ink:#112009;--cyan:#63edff;--pink:#ffa2ea;--shadow:0 24px 70px #0004;--radius:26px;--blur:20px;--ease:cubic-bezier(.22,1,.36,1);--dur:240ms;--glow:#26d6f4;--wash:#193b4c;--ring:#b5ff77}
:root[data-theme=light]{color-scheme:light;--bg:#eef1f4;--ink:#17233c;--muted:#455572;--panel:rgba(255,255,255,.88);--solid:#fff;--edge:#8491a8;--accent:#c0ff83;--accent-ink:#172b0b;--cyan:#075e76;--pink:#952474;--shadow:0 24px 70px #36506b20;--glow:#24b8cb;--wash:#c5dde4;--ring:#295600}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--ink);font-family:Manrope,'Segoe UI',sans-serif;font-size:1rem;line-height:1.6}button,input,select,textarea{font:inherit}button,a,input,select,summary{touch-action:manipulation}button,a{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-underline-offset:4px}button:disabled{cursor:default;opacity:.65}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--ring);outline-offset:5px}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.13;letter-spacing:-.045em;text-wrap:balance}h1{font-size:clamp(3.2rem,7.4vw,7rem);font-weight:600}h2{font-size:clamp(2.1rem,4vw,3.7rem);font-weight:550}h3{font-size:1.35rem;letter-spacing:-.025em}p{max-width:66ch}small,.small{font-size:.85rem}img,svg{max-width:100%}.muted{color:var(--muted)}.wrap{width:min(1320px,calc(100% - 72px));margin-inline:auto}.skip{position:fixed;left:20px;top:-90px;z-index:99;background:var(--solid);padding:14px}.skip:focus{top:12px}.eyebrow{display:flex;align-items:center;gap:10px;font-size:.85rem;font-weight:650;letter-spacing:.02em;margin-bottom:22px}.eyebrow:before{content:'';width:8px;height:8px;border-radius:50%;background:var(--cyan)}.glass{background:var(--panel);border:1px solid var(--edge);border-top-color:color-mix(in srgb,var(--edge),white 35%);border-radius:var(--radius);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur))}.topbar{position:sticky;top:16px;z-index:20;margin-top:16px;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:12px 18px;border-radius:20px}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:1.3rem;font-weight:800;letter-spacing:-.06em}.brand-mark{display:inline-block;width:27px;height:27px;border:6px solid var(--cyan);border-radius:50% 50% 50% 8px;transform:rotate(-25deg)}nav{display:flex;gap:26px;align-items:center}nav a{text-decoration:none;font-size:.9rem;font-weight:600}nav a[aria-current=page]{text-decoration:underline;text-decoration-thickness:2px}.actions{display:flex;gap:8px;align-items:center}.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:46px;padding:11px 22px;border-radius:100px;background:var(--solid);border:1px solid var(--edge);color:var(--ink);text-decoration:none;font-size:.9rem;font-weight:650;transition:transform 180ms var(--ease),background-color 180ms,border-color 180ms}.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:transparent}.btn.square{border-radius:13px;padding:10px 13px}.btn:active{transform:scale(.97)}.menu-button{display:none}.hero{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;min-height:720px;padding-block:74px 86px}.hero-copy{position:relative;z-index:1}.hero-copy>p{font-size:1.1rem;max-width:37ch;margin-top:30px;color:var(--muted)}.hero-copy .actions{margin-top:32px;flex-wrap:wrap}.hero-note{margin-top:25px;font-size:.82rem;color:var(--muted)}.hero-art{min-height:540px;position:relative;isolation:isolate;display:grid;place-items:center;border-radius:40px;background:radial-gradient(ellipse at 70% 23%,#cd79e744,transparent 48%),radial-gradient(ellipse at 30% 72%,#38cbd75c,transparent 55%);overflow:hidden}.optical-ring{position:absolute;width:390px;height:390px;border-radius:50%;border:52px solid #95f3ff36;box-shadow:inset 0 0 20px #d9ffff9e,0 0 12px #67dfff55,inset 12px 8px 35px #fff6,18px 15px 45px #10152566;transform:rotate(-25deg);top:53px;right:25px}.optical-ring:after{content:'';position:absolute;inset:-42px;border:1px solid #fff7;border-radius:50%}.spectral-line{position:absolute;width:530px;height:55px;background:linear-gradient(90deg,#70efff55,#a8ff6299,#ff88dd55);transform:rotate(-35deg);top:285px;left:-30px;border-radius:50%;filter:blur(14px)}.instrument{width:78%;position:relative;margin-top:110px;padding:28px;transform:rotate(-6deg);--panel:rgba(16,28,42,.80);color:#f3f6ff;border-color:#6e8796}.instrument .muted{color:#c4d2dc}.instrument .eyebrow:before{background:#a8ff62}.instrument h3{font-size:2rem;max-width:10ch;margin-bottom:25px}.spectrum{height:65px;display:flex;align-items:end;gap:6px;margin:24px 0}.spectrum i{height:var(--h);flex:1;background:linear-gradient(#c7ff8a,#70dbdf);border-radius:5px;transform-origin:bottom}.instrument-footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #718a9a;padding-top:17px;font-size:.82rem}.orb-label{position:absolute;right:18px;top:33px;padding:10px 17px;border-radius:99px;background:var(--solid);font-size:.8rem}.float-chip{position:absolute;bottom:35px;left:8px;display:flex;gap:12px;align-items:center;padding:18px 24px;max-width:90%;transform:rotate(4deg)}.color-dot{width:30px;height:30px;border-radius:50%;background:#bcff8b;box-shadow:inset -5px -5px 10px #277b4877}.section{padding-block:90px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:35px;margin-bottom:42px}.section-head p{max-width:41ch;color:var(--muted)}.rail{display:flex;justify-content:space-between;gap:25px;padding:22px 0;border-block:1px solid var(--edge);color:var(--muted);font-size:.85rem}.rail span strong{color:var(--ink);font-weight:650}.material-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:20px}.material-card{min-height:320px;padding:28px;position:relative;display:flex;flex-direction:column;justify-content:end;overflow:hidden;background-color:var(--wash)}.material-card p{color:var(--muted);margin-top:12px;font-size:.93rem}.material-card .material-object{height:150px;position:relative;margin-bottom:32px}.material-object:before{content:'';position:absolute;inset:10px 20%;border-radius:20px;background:linear-gradient(130deg,#a8ff6266,#44d3ee44,#fd97f477);transform:rotate(-15deg);border:1px solid #a6d5e4}.material-object:after{content:'';position:absolute;inset:30px 12%;border-radius:18px;background:var(--panel);backdrop-filter:blur(15px);border:1px solid var(--edge);transform:rotate(8deg)}.material-card.smoke{--wash:#182438;--panel:#222d42bf;color:#f3f6ff}.material-card.smoke p{color:#c1ccdc}.material-card.prism .material-object:after{border-radius:50%;inset:0 22%;background:linear-gradient(145deg,#b3f3ff66,#ffd7ef22);box-shadow:inset 7px 8px 10px #fff8}.lab{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center}.lab-copy p{margin-block:22px;color:var(--muted)}.settings{padding:32px;display:grid;gap:24px;position:relative;background:radial-gradient(circle at 90% 10%,#68e7ef2b,transparent 60%),var(--panel)}.field{display:grid;gap:9px}.field label{font-weight:600;font-size:.9rem}.field input:not([type=checkbox]),.field select,.field textarea{width:100%;padding:13px 16px;border:1px solid var(--edge);border-radius:12px;background:var(--solid);color:var(--ink);min-height:48px}.field input[type=range]{padding:0;accent-color:var(--cyan)}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}.check{display:flex;gap:12px;align-items:center;font-size:.9rem}.check input{width:22px;height:22px;accent-color:var(--cyan)}.swatches{display:flex;gap:10px}.swatch{width:46px;height:46px;border:2px solid var(--edge);border-radius:50%;background:var(--swatch);color:#142535}.swatch[aria-pressed=true]{outline:3px solid var(--ring);outline-offset:4px}.swatch span{visibility:hidden}.swatch[aria-pressed=true] span{visibility:visible}.motion-stage{height:260px;position:relative;display:grid;place-items:center;border-radius:24px;background:radial-gradient(ellipse at 20% 80%,#4be6e64d,transparent 60%),radial-gradient(ellipse at 90% 20%,#e36cdf3d,transparent 60%),var(--wash);overflow:hidden}.motion-tile{width:180px;padding:22px;border-radius:22px;text-align:left;position:relative;background:var(--panel);border:1px solid var(--edge);backdrop-filter:blur(16px);box-shadow:var(--shadow)}.motion-tile strong{display:block;font-size:1.1rem}.motion-tile small{color:var(--muted)}.motion-tile .mini-orb{width:48px;height:48px;border:10px solid var(--cyan);border-radius:50%;margin-bottom:20px;opacity:.85}.motion-controls{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}.motion-controls button[aria-pressed=true],.filter[aria-pressed=true]{background:var(--accent);color:var(--accent-ink);border-color:transparent}.recipe{margin-top:16px;padding:16px 0;color:var(--muted);font-size:.9rem;min-height:95px}.recipe strong{color:var(--ink)}.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;margin-top:40px}.timeline article{border-top:1px solid var(--edge);padding-top:25px}.timeline p{color:var(--muted);margin-top:12px}.faq{display:grid;grid-template-columns:1fr 1.3fr;gap:60px}.faq details{border-bottom:1px solid var(--edge);padding:21px 0}.faq summary{font-size:1.1rem;font-weight:600;cursor:pointer;min-height:40px}.faq details p{color:var(--muted);margin-top:15px}.closing{padding:56px;background:radial-gradient(ellipse at 90% 90%,#62d6ed40,transparent 70%),var(--panel);display:flex;justify-content:space-between;gap:30px;align-items:center}.closing h2{max-width:14ch}.footer{padding:55px 0 35px;display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}.footer p{color:var(--muted);font-size:.85rem}.footer nav{flex-wrap:wrap}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:80;padding:16px 22px;background:var(--solid);border:1px solid var(--edge);border-radius:16px;max-width:calc(100% - 32px);box-shadow:var(--shadow)}.toast:empty{display:none}dialog{color:var(--ink);background:var(--solid);border:1px solid var(--edge);border-radius:28px;padding:34px;width:min(620px,calc(100% - 32px));max-height:85vh;box-shadow:var(--shadow)}dialog::backdrop{background:#07101dbb;backdrop-filter:blur(6px)}dialog h2{font-size:2rem;margin-bottom:20px}dialog p{margin-block:16px;color:var(--muted)}dialog .actions{justify-content:end;margin-top:24px}.dialog-title{display:flex;justify-content:space-between;align-items:start;gap:20px}.dialog-title h2{margin-bottom:0}.board-hero{padding-block:90px 50px;display:grid;grid-template-columns:1.3fr .7fr;gap:50px;align-items:end}.board-hero h1{font-size:clamp(3.4rem,7vw,6.5rem)}.board-hero p{color:var(--muted);margin-top:24px}.theme-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px}.theme-study{border-radius:28px;padding:24px;background:#e9eef3;color:#17233c;min-height:280px;position:relative;overflow:hidden}.theme-study.dark{background:#101822;color:#f4f7ff}.study-orb{position:absolute;width:180px;height:180px;right:12%;top:70px;border-radius:50%;background:linear-gradient(125deg,#79e9ef,#c1fc8b,#d49bed);box-shadow:inset 20px 10px 24px #fff8}.study-pane{position:relative;margin:45px 20px 15px;padding:25px;border-radius:22px;border:1px solid #78899d;background:#ffffffbd;backdrop-filter:blur(18px);color:#17233c}.dark .study-pane{background:#142236cf;color:#f4f7ff}.study-pane h3{font-size:1.6rem;margin-bottom:10px}.color-strip{display:flex;gap:9px;margin-top:16px}.color-strip i{width:24px;height:24px;border-radius:50%;background:var(--c)}.board-toolbar{position:sticky;top:95px;z-index:10;padding:17px 20px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:30px;background:var(--solid)}.board-toolbar input{background:var(--bg);color:var(--ink);border:1px solid var(--edge);border-radius:12px;padding:12px;width:230px;min-height:46px}.filters{display:flex;flex-wrap:wrap;gap:7px}.filter{border:1px solid var(--edge);border-radius:99px;padding:8px 13px;color:var(--ink);background:var(--solid);font-size:.84rem;min-height:44px}.atlas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.pattern{border-radius:24px;border:1px solid var(--edge);overflow:hidden;background:var(--panel);display:flex;flex-direction:column}.pattern-body{padding:22px;display:flex;flex-direction:column;flex:1}.pattern h3{font-size:1.22rem;margin-block:7px 12px}.pattern p{font-size:.88rem;color:var(--muted);margin-bottom:18px}.pattern .actions{margin-top:auto;flex-wrap:wrap}.pattern .btn{font-size:.82rem;padding:8px 14px}.pattern-preview{height:190px;display:grid;place-items:center;position:relative;overflow:hidden;background:radial-gradient(ellipse at 15% 85%,#5fddda77,transparent 60%),radial-gradient(ellipse at 85% 15%,#cc83ec6b,transparent 60%),var(--wash)}.mini-ui{width:75%;padding:18px;background:var(--panel);border:1px solid var(--edge);border-radius:16px;backdrop-filter:blur(12px);box-shadow:0 14px 22px #0002;max-height:165px;display:grid;gap:10px;font-size:.8rem}.mini-ui b{font-weight:700}.mini-row{display:flex;gap:8px;align-items:center;justify-content:space-between}.mini-pill{padding:5px 10px;border-radius:20px;background:var(--accent);color:var(--accent-ink);font-size:.72rem}.mini-line{height:7px;border-radius:5px;background:var(--muted);opacity:.35;width:var(--w,100%)}.mini-input{border:1px solid var(--edge);border-radius:7px;padding:7px 9px;color:var(--muted);background:var(--solid)}.mini-bars{display:flex;align-items:end;gap:7px;height:64px}.mini-bars i{flex:1;height:var(--h);background:var(--cyan);opacity:.7;border-radius:4px}.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mini-block{height:35px;background:var(--wash);border:1px solid var(--edge);border-radius:8px}.mini-circle{height:42px;width:42px;border:9px solid var(--cyan);border-radius:50%}.source-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.source-card{padding:27px;border:1px solid var(--edge);border-radius:20px}.source-card h3{margin:10px 0}.source-card p{color:var(--muted);margin-bottom:16px;font-size:.9rem}.tag{font-size:.74rem;color:var(--muted);font-weight:650}.coverage-map{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:32px 0}.map-node{padding:19px;background:var(--solid);border:1px solid var(--edge);border-radius:16px;text-decoration:none}.map-node strong{display:block;font-size:1rem}.map-node small{color:var(--muted)}.empty{padding:50px;border:1px solid var(--edge);border-radius:20px;grid-column:1/-1}.spec-list{display:grid;grid-template-columns:110px 1fr;gap:12px;font-size:.9rem;margin:22px 0}.spec-list dt{color:var(--muted)}.spec-list dd{margin:0}.code{background:var(--bg);padding:18px;border-radius:12px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:.82rem;line-height:1.6}.no-js{margin:30px;padding:20px;background:var(--solid);border:1px solid var(--edge)}[hidden]{display:none!important}
@media(hover:hover) and (pointer:fine){.btn:hover{transform:translateY(-2px);border-color:var(--cyan)}nav a:hover{color:var(--cyan)}.map-node:hover{border-color:var(--cyan)}}
@media(max-width:1050px){.hero{min-height:620px;gap:10px}.hero-art{min-height:480px}.optical-ring{width:310px;height:310px}.instrument{width:88%}.atlas-grid{grid-template-columns:repeat(2,1fr)}.topbar nav{gap:16px}.coverage-map{grid-template-columns:repeat(2,1fr)}.material-grid{grid-template-columns:1fr 1fr}.material-card:first-child{grid-column:1/-1}.lab{gap:30px}.board-toolbar{position:relative;top:0}}
@media(max-width:760px){.wrap{width:calc(100% - 36px)}.topbar{top:8px;margin-top:8px;gap:8px;padding:10px 12px}.topbar nav{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;padding:22px;background:var(--solid);border:1px solid var(--edge);border-radius:20px;flex-direction:column;align-items:stretch}.topbar nav.open{display:flex}.topbar nav a{padding:8px}.menu-button{display:inline-flex}.topbar .btn{font-size:.8rem;padding:10px 12px}.brand{font-size:1.1rem}.hero{grid-template-columns:1fr;padding-block:55px 45px;gap:35px}.hero h1{max-width:10ch}.hero-art{min-height:450px;max-width:550px;width:100%;margin-inline:auto}.instrument{width:78%}.optical-ring{right:15px;top:45px}.hero-copy>p{font-size:1rem}.hero-note{max-width:34ch}.section{padding-block:58px}.section-head{display:block}.section-head p{margin-top:20px}.material-grid,.lab,.faq,.theme-pair,.board-hero{grid-template-columns:1fr}.material-card:first-child{grid-column:auto}.material-card{min-height:310px}.rail{flex-wrap:wrap;justify-content:start;gap:14px 25px}.lab{gap:35px}.timeline{grid-template-columns:1fr;gap:25px}.faq{gap:25px}.closing{padding:30px;display:block}.closing .btn{margin-top:28px}.footer{gap:22px}.footer nav{gap:18px}.board-hero{gap:24px;padding-block:55px 35px}.source-grid{grid-template-columns:1fr}.board-toolbar input{width:100%}.settings{padding:24px}.field-row{grid-template-columns:1fr}.atlas-grid{gap:15px}.pattern-body{padding:18px}.pattern-preview{height:175px}.mini-ui{width:85%;padding:14px}.study-pane{margin-inline:0}.spec-list{grid-template-columns:1fr;gap:5px}.spec-list dd{margin-bottom:10px}}
@media(max-width:520px){.atlas-grid{grid-template-columns:1fr}.hero-art{min-height:400px}.instrument{padding:22px;margin-top:85px}.instrument h3{font-size:1.65rem}.optical-ring{width:265px;height:265px;border-width:38px}.float-chip{padding:12px 17px;bottom:22px;font-size:.85rem}.orb-label{right:12px;top:22px}.coverage-map{gap:9px}.map-node{padding:15px}.theme-study{padding:20px}.brand-mark{width:22px;height:22px;border-width:5px}.hero .actions{gap:10px}.hero .btn{padding-inline:17px}dialog{padding:24px}.dialog-title{gap:10px}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass,.mini-ui,.motion-tile,.study-pane{background:var(--solid)}.instrument{background:#152237}.dark .study-pane{background:#18273b}}
:root[data-solid=true] .glass,:root[data-solid=true] .mini-ui,:root[data-solid=true] .motion-tile{background:var(--solid);backdrop-filter:none;-webkit-backdrop-filter:none}:root[data-solid=true] .instrument{background:#152237}
@media(prefers-reduced-transparency:reduce){.glass,.mini-ui,.motion-tile{background:var(--solid);backdrop-filter:none}.instrument{background:#152237}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
:root[data-reduce=true]{scroll-behavior:auto}:root[data-reduce=true] *{transition:none!important;animation:none!important}
@media(forced-colors:active){.glass,.mini-ui,.motion-tile,.pattern,.btn,.map-node{background:Canvas;border:1px solid CanvasText;box-shadow:none;backdrop-filter:none}.btn.primary,.swatch{border:2px solid ButtonText}.optical-ring,.spectral-line,.study-orb{display:none}.instrument,.instrument .muted,.material-card.smoke,.material-card.smoke p{color:CanvasText}.spectrum i,.mini-bars i{background:CanvasText}.color-dot,.brand-mark{border-color:CanvasText}a,button{forced-color-adjust:auto}}

/* Review corrections: per-material fallback and long user content. */
.material-card.smoke{--solid:#182438}
#custom-material{max-width:calc(100% - 32px);width:230px;max-height:240px;overflow:auto;backdrop-filter:blur(var(--blur))}
#custom-material strong{overflow-wrap:anywhere}
:root[data-solid=true] #custom-material{backdrop-filter:none}
@media(prefers-reduced-transparency:reduce){#custom-material{backdrop-filter:none}}
@media(prefers-reduced-motion:reduce){.btn:hover,.btn:active{transform:none}}
:root[data-reduce=true] .btn:hover,:root[data-reduce=true] .btn:active{transform:none}
.mini-large{font-size:1.9rem;line-height:1.1}.mini-swatches{display:flex;gap:10px}.mini-swatches i{width:27px;height:27px;border-radius:50%;background:#a8ff62}.mini-swatches i:nth-child(2){background:#63edff}.mini-swatches i:nth-child(3){background:#ffa2ea}.layer-demo{height:70px;position:relative}.layer-demo span{position:absolute;left:20%;top:0;width:100px;height:50px;border:1px solid var(--edge);border-radius:10px;background:#83e4df80;transform:rotate(-12deg)}.layer-demo span:nth-child(2){top:12px;left:28%;background:var(--panel)}.layer-demo span:nth-child(3){top:24px;left:36%;background:var(--panel)}.grid-three{grid-template-columns:repeat(3,1fr)}.grid-three .mini-block{height:25px}.mini-hero{display:flex;align-items:center;justify-content:space-between;gap:12px}.mini-hero b{display:block;font-size:1.6rem;line-height:1.05;margin-bottom:15px}.mini-bento{display:grid;grid-template-columns:1.3fr 1fr;gap:8px}.mini-bento div{padding:14px 8px;border-radius:8px;background:var(--wash)}.mini-bento div:first-child{grid-row:span 2;display:grid;align-items:center}.mini-steps{display:flex;flex-direction:column;gap:5px}.mini-steps i{width:1px;height:12px;margin-left:4px;background:var(--edge)}.mini-nav{display:flex;align-items:center;justify-content:space-between;gap:9px;font-size:.75rem;flex-wrap:wrap}.mini-menu{display:grid;gap:7px}.mini-menu span{padding-block:3px;border-bottom:1px solid var(--edge)}.mini-sidebar{display:grid;grid-template-columns:65px 1fr;gap:15px}.mini-sidebar>div{display:grid;gap:8px}.mini-sidebar>div:first-child{border-right:1px solid var(--edge)}.mini-sidebar strong{color:var(--cyan)}.mini-crumb{color:var(--muted);font-size:.7rem}.mini-code{font-family:monospace;background:var(--bg);padding:9px;border-radius:7px}.mini-content-card{display:grid;gap:9px;justify-items:center;padding:12px 0;border:1px solid var(--edge);border-radius:10px}.mini-content-card .mini-circle{width:30px;height:30px;border-width:6px}.mini-square{height:30px;width:30px;border-radius:7px;background:var(--cyan)}.mini-accordion{display:grid;gap:12px}.mini-accordion b{border-bottom:1px solid var(--edge);padding-bottom:6px}.mini-avatars{display:flex;padding:20px 0}.mini-avatars span{width:40px;height:40px;display:grid;place-items:center;background:var(--wash);border:2px solid var(--solid);border-radius:50%;margin-right:-6px}.mini-options{display:grid;gap:4px;background:var(--solid);padding:8px;border-radius:7px}.mini-options b{color:var(--cyan)}.mini-switch{width:36px;height:20px;border-radius:20px;background:var(--edge);position:relative}.mini-switch:after{content:'';position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:var(--solid)}.mini-switch.on{background:var(--accent)}.mini-switch.on:after{left:19px;background:var(--accent-ink)}.mini-range{height:5px;min-width:70px;background:var(--edge);border-radius:8px;position:relative;margin:10px 0}.mini-range:before{content:'';position:absolute;inset:0 35% 0 0;background:var(--cyan);border-radius:8px}.mini-range span{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--cyan);top:-4px;left:65%}.mini-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;align-items:center;text-align:center}.mini-calendar b{background:var(--accent);color:var(--accent-ink);padding:5px 1px;border-radius:6px}.mini-drop{border:1px dashed var(--edge);padding:15px 8px;border-radius:9px;display:grid;text-align:center;gap:8px}.mini-drop b{font-size:1.4rem}.mini-invalid{border-color:var(--pink)}.mini-error{color:var(--pink);font-size:.72rem}.mini-table{display:grid;grid-template-columns:1fr auto;gap:9px}.mini-table b{border-bottom:1px solid var(--edge);padding-bottom:7px}.mini-table.compare{grid-template-columns:1fr 25px 25px}.mini-feed{display:grid;gap:16px}.mini-feed span{font-size:.72rem}.mini-feed small{float:right;font-size:.65rem;color:var(--muted)}.mini-photo{height:78px;width:100%;background:linear-gradient(160deg,#72d9e066,#cda9ee55);position:relative;overflow:hidden;border-radius:9px}.mini-sun{width:28px;height:28px;position:absolute;right:20px;top:10px;border-radius:50%;background:var(--accent)}.mini-hill{position:absolute;left:15px;bottom:-35px;width:130px;height:90px;border-radius:45%;transform:rotate(-20deg);background:var(--wash);border:1px solid var(--edge)}.mini-carousel{display:flex;align-items:center;gap:10px}.mini-dots{text-align:center;color:var(--cyan)}.mini-video{height:70px;display:grid;place-items:center;border-radius:10px;background:var(--wash);font-size:1.5rem}.mini-map{height:85px;position:relative;border-radius:9px;background:linear-gradient(45deg,transparent 35%,var(--edge) 36%,var(--edge) 38%,transparent 39%),linear-gradient(-25deg,var(--wash) 45%,var(--edge) 46%,var(--edge) 48%,var(--wash) 49%)}.mini-pin{position:absolute;left:45%;top:30%;color:var(--cyan);font-size:1.4rem;text-shadow:0 0 3px var(--solid)}.mini-map-controls{position:absolute;right:7px;top:7px;background:var(--solid);padding:3px 7px;border-radius:5px}.mini-tooltip{background:var(--solid);border:1px solid var(--edge);padding:9px;border-radius:8px;position:relative}.mini-tooltip:after{content:'';position:absolute;bottom:-5px;right:15px;width:8px;height:8px;transform:rotate(45deg);background:var(--solid);border-right:1px solid var(--edge);border-bottom:1px solid var(--edge)}.mini-info{width:22px;height:22px;border:1px solid var(--edge);border-radius:50%;text-align:center}.mini-toast{display:flex;align-items:center;gap:12px}.mini-toast b{font-size:1.5rem;color:var(--cyan)}.mini-toast small{color:var(--muted)}.mini-progress{height:7px;border-radius:5px;background:var(--edge)}.mini-progress span{display:block;background:var(--cyan);width:60%;height:100%;border-radius:5px}.mini-empty{display:grid;justify-items:center;gap:10px;padding:9px}.mini-empty>span{font-size:1.7rem}.mini-reveal{display:grid;gap:9px}.mini-reveal div{padding:6px 12px;background:var(--wash);border-radius:7px}.mini-reveal div:nth-child(2){margin-left:16px}.mini-reveal div:nth-child(3){margin-left:32px}.mini-prism{height:70px;position:relative;overflow:hidden;border:1px solid var(--edge);border-radius:17px;background:linear-gradient(135deg,#91f2fb44,#f4c9ff55)}.specular{position:absolute;left:40%;top:-15%;height:130%;width:35%;background:linear-gradient(90deg,transparent,#fff9,transparent);transform:translateX(-120px);opacity:0}

/* V4 — the interface itself is glass. Shared material and atmosphere. */
:root {
  --bg: #111226;
  --ink: #f7f6ff;
  --muted: #c9cee4;
  --panel: rgba(26, 30, 58, .48);
  --solid: #1d223c;
  --edge: #8a93b4;
  --cyan: #81f3ff;
  --pink: #ffaceb;
  --glass-fill: rgba(22, 25, 50, .48);
  --glass-dense: rgba(17, 21, 41, .88);
  --glass-filter: blur(22px) saturate(150%);
  --glass-shadow: 0 22px 60px -22px #03041b8c;
  --glass-edge-shadow: inset 0 2px 1px -1px #e9faff9c,
    inset 2px 0 2px -2px #a5f5ffad,
    inset -2px -4px 6px -4px #bd90ed70,
    0 24px 60px -24px #03041ba6;
  --glass-reflection: linear-gradient(135deg, #ffffff13, #ffffff02 42%, #72e8ff07);
  --glass-control: rgba(210, 223, 255, .10);
  --glass-highlight: #ffffff24;
  --substrate-a: #16bddb8c;
  --substrate-b: #b843c875;
  --substrate-c: #6853d87a;
  --substrate-orb: #45b9dc4a;
  --shadow: var(--glass-shadow);
}
:root[data-theme=light] {
  --bg: #e9e8f6;
  --ink: #22213d;
  --muted: #4c4b68;
  --panel: rgba(255,255,255,.44);
  --solid: #f9f9ff;
  --edge: #737a9b;
  --cyan: #075c73;
  --pink: #8c267d;
  --glass-fill: rgba(255,255,255,.44);
  --glass-dense: rgba(250,250,255,.90);
  --glass-filter: blur(22px) saturate(135%);
  --glass-shadow: 0 22px 65px -28px #4b3b8260;
  --glass-edge-shadow: inset 0 2px 1px -1px #fff,
    inset 2px 0 2px -2px #fff,
    inset -2px -4px 6px -4px #8c81b06b,
    0 24px 65px -26px #4b3b8260;
  --glass-reflection: linear-gradient(135deg, #ffffffa6, #ffffff08 42%, #ecfcff18);
  --glass-control: rgba(255,255,255,.38);
  --glass-highlight: #ffffff75;
  --substrate-a: #3ac4dc83;
  --substrate-b: #d384d476;
  --substrate-c: #a69ee2a3;
  --substrate-orb: #a6dfff85;
}
body { background: var(--bg); isolation: isolate; }
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 46vw 60vh at -6% 34%, var(--substrate-a), transparent 76%),
    radial-gradient(ellipse 42vw 58vh at 103% 73%, var(--substrate-b), transparent 75%),
    radial-gradient(ellipse 80vw 50vh at 50% -12%, var(--substrate-c), transparent 75%),
    radial-gradient(ellipse 48vw 35vh at 48% 112%, var(--substrate-c), transparent 80%);
}
body::after {
  content: '';
  position: fixed;
  z-index: -1;
  pointer-events: none;
  width: min(65vw, 960px);
  aspect-ratio: 1;
  right: -38vw;
  top: 21vh;
  border-radius: 50%;
  background: radial-gradient(circle at 23% 28%, #ffffff26, var(--substrate-orb) 36%, #7868be19 60%, transparent 72%);
  box-shadow: inset 20px 12px 36px -26px #ffffff47;
}
.glass, .glass-film, .glass-edge {
  background: var(--glass-reflection), var(--glass-fill);
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
}
.glass-film { box-shadow: var(--glass-shadow); }
.glass-edge { box-shadow: var(--glass-edge-shadow); }
.topbar.glass {
  background: var(--glass-reflection), var(--glass-fill);
  border: 0;
  border-radius: 24px;
  padding: 14px 20px;
  box-shadow: var(--glass-shadow);
}
.topbar .brand-mark { filter: drop-shadow(0 2px 7px #52e3ef3a); }
.topbar nav a { padding: 8px 0; }
.topbar nav a[aria-current=page] { text-decoration-color: var(--cyan); }
.btn:not(.primary) {
  background: var(--glass-reflection), var(--glass-control);
  color: var(--ink);
  border: 0;
  box-shadow: inset 0 1px 1px #ffffff24, 0 6px 18px -10px #04082270;
}
.btn.primary { border: 0; box-shadow: inset 0 2px 1px #ffffff80, 0 8px 22px -10px #a8ff6259; }
.topbar .btn { backdrop-filter: none; -webkit-backdrop-filter: none; }
.field input:not([type=checkbox]):not([type=range]), .field select, .field textarea {
  border: 1px solid transparent;
  background: var(--glass-dense);
  box-shadow: inset 0 1px 4px #03081b25;
  color: var(--ink);
  font-size: max(1rem, 16px);
}
input[type=range], output { font-variant-numeric: tabular-nums; }
select option { background: var(--solid); color: var(--ink); }
dialog.glass { background: var(--glass-reflection), var(--glass-dense); }
@media (hover:hover) and (pointer:fine) {
  .btn:not(.primary):hover { background-color: var(--glass-highlight); }
  .topbar nav a:hover { color: var(--cyan); }
}
@media (max-width:760px) {
  :root, :root[data-theme=light] { --glass-filter: blur(16px) saturate(140%); }
  body::before {
    background:
      radial-gradient(ellipse 100vw 65vh at -30% 30%, var(--substrate-a), transparent 76%),
      radial-gradient(ellipse 90vw 80vh at 122% 79%, var(--substrate-b), transparent 75%),
      radial-gradient(ellipse 110vw 35vh at 60% -8%, var(--substrate-c), transparent 80%);
  }
  .topbar.glass { border-radius: 20px; padding: 10px 12px; }
  .topbar nav { border: 0; background: var(--glass-dense); box-shadow: var(--glass-shadow); }
}
/* Accessibility changes the material, not the hierarchy or focus indication. */
:root[data-solid=true] { --glass-fill: var(--solid); --glass-dense: var(--solid); --glass-filter: none; --glass-reflection: linear-gradient(transparent,transparent); --glass-control: var(--solid); }
:root[data-solid=true] body::before, :root[data-solid=true] body::after { display:none; }
:root[data-solid=true] .glass, :root[data-solid=true] .glass-film, :root[data-solid=true] .glass-edge, :root[data-solid=true] .topbar.glass { background:var(--solid); backdrop-filter:none; -webkit-backdrop-filter:none; }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  :root, :root[data-theme=light] { --glass-fill:var(--solid); --glass-dense:var(--solid); --glass-filter:none; --glass-reflection:linear-gradient(transparent,transparent); --glass-control:var(--solid); }
  body::before, body::after { display:none; }
}
@media (prefers-reduced-transparency:reduce) {
  :root, :root[data-theme=light] { --glass-fill:var(--solid); --glass-dense:var(--solid); --glass-filter:none; --glass-reflection:linear-gradient(transparent,transparent); --glass-control:var(--solid); }
  body::before, body::after { display:none; }
}
@media (forced-colors:active) {
  :root, :root[data-theme=light] { --glass-fill:Canvas; --glass-dense:Canvas; --glass-filter:none; --glass-reflection:linear-gradient(transparent,transparent); --glass-control:Canvas; --glass-shadow:none; --glass-edge-shadow:none; }
  body::before, body::after { display:none; }
  .glass, .glass-film, .glass-edge, .topbar.glass, .btn:not(.primary) { border:1px solid CanvasText; background:Canvas; color:CanvasText; box-shadow:none; }
  .field input:not([type=checkbox]):not([type=range]), .field select, .field textarea { background:Canvas; color:CanvasText; border:1px solid CanvasText; }
}