@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:light;--canvas:#f4f5f1;--ink:#172521;--muted:#4b5c54;--surface:#e7ece5;--solid:#f8faf6;--tint:rgb(247 252 244 / .28);--control:#dce4da;--selected:#183d31;--selected-ink:#f5fff7;--focus:#00634a;--grid:rgb(37 70 53 / .09);--edge:rgb(255 255 255 / .95);--shade:rgb(21 63 48 / .28)}
[data-theme="dark"]{color-scheme:dark;--canvas:#101916;--ink:#edf7f1;--muted:#b5c7bc;--surface:#1b2c25;--solid:#21382c;--tint:rgb(24 55 43 / .33);--control:#2c4135;--selected:#c8f599;--selected-ink:#163120;--focus:#d3ff9d;--grid:rgb(196 239 209 / .09);--edge:rgb(205 255 236 / .8);--shade:rgb(0 0 0 / .6)}
*{box-sizing:border-box}html{scroll-behavior:auto}body{margin:0;background:var(--canvas);color:var(--ink);font-family:Manrope,system-ui,sans-serif;font-size:16px;line-height:1.6}button,input{font:inherit}button,a,label{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit}p,h1,h2,figure{margin:0}p{overflow-wrap:anywhere}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:5px}.shell{max-width:1320px;margin:auto;padding:0 48px}.masthead{min-height:112px;display:flex;align-items:center;justify-content:space-between;gap:24px}.wordmark{font-size:25px;font-weight:800;text-decoration:none;letter-spacing:-.045em}.wordmark span{font-size:10px;letter-spacing:.13em;margin-left:14px;font-weight:600}.masthead button{border:0;border-radius:40px;padding:12px 20px;min-height:48px;background:var(--control);color:var(--ink);font-size:14px;font-weight:650;transition:background-color 140ms ease-out}.study{display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;gap:64px;padding:52px 0 70px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:.13em;color:var(--muted);margin-bottom:24px}h1{font-size:clamp(42px,4.8vw,68px);line-height:1.06;letter-spacing:-.055em;font-weight:600;text-wrap:balance}.lede{font-size:18px;line-height:1.65;color:var(--muted);max-width:38ch;margin-top:26px}.mode-control{border:0;padding:0;margin:34px 0 0;min-width:0}.mode-control legend{font-size:12px;font-weight:700;margin-bottom:10px}.segments{display:flex;gap:5px;padding:5px;background:var(--control);border-radius:17px;width:fit-content;max-width:100%}.segments label{position:relative;cursor:pointer;min-width:0}.segments input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.segments span{display:flex;align-items:center;justify-content:center;min-height:46px;padding:10px 16px;border-radius:12px;font-size:14px;font-weight:650;line-height:1.4}.segments input:checked+span{color:var(--selected-ink);background:var(--selected)}.segments input:focus-visible+span{outline:3px solid var(--focus);outline-offset:3px}.solid-control{display:flex;align-items:center;gap:11px;min-height:48px;font-size:13px;cursor:pointer;width:fit-content;margin-top:10px}.solid-control input{width:19px;height:19px;accent-color:var(--selected);flex:none}.material-copy{margin-top:28px;max-width:39ch;min-height:118px}.material-copy h2{font-size:17px;font-weight:750;margin-bottom:8px}.material-copy p{font-size:14px;line-height:1.7;color:var(--muted)}.specimen{min-width:0}.stage{height:510px;position:relative;isolation:isolate;border-radius:32px;background:var(--surface);overflow:hidden}.stage-grid{position:absolute;inset:0;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:48px 48px}.ribbon{position:absolute;z-index:1;border-radius:150px;transform:rotate(-36deg)}.ribbon-cyan{background:#35d9d1;width:122%;height:94px;left:-12%;top:32%;box-shadow:0 8px 0 rgb(0 116 109 / .08)}.ribbon-lime{background:#c9ee73;width:90%;height:104px;left:25%;top:65%;transform:rotate(-36deg)}.rear-plane{position:absolute;left:22%;top:13%;width:58%;height:60%;border-radius:26px;background:rgb(97 152 135 / .19);transform:rotate(13deg);z-index:2}.glass-panel{position:absolute;z-index:3;left:14%;top:22%;width:72%;height:57%;border-radius:28px;border:0;outline:0;background:var(--solid);box-shadow:none}.edge{display:none;position:absolute;pointer-events:none}.stage-mark,.stage-label{position:absolute;z-index:4;font-size:10px;letter-spacing:.12em;font-weight:750;background:var(--surface);padding:5px 8px;border-radius:4px}.stage-mark{left:20px;top:20px}.stage-label{right:20px;bottom:20px}figcaption{display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:11px;line-height:1.5;margin-top:16px}figcaption span:last-child{text-align:right}.shell>footer{display:flex;justify-content:space-between;gap:40px;border-top:1px solid var(--control);padding:24px 0 30px;font-size:11px;color:var(--muted)}footer p{max-width:46ch}.notice{padding:16px;background:var(--solid)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass-panel{background:var(--tint);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}}
[data-mode="3d"] .glass-panel{box-shadow:12px 18px 24px -16px var(--shade),inset -7px -8px 11px -9px var(--shade);background-image:linear-gradient(135deg,rgb(255 255 255 / .08),transparent 45%)}
[data-mode="3d"] .edge{display:block}.edge-top{left:6%;top:0;width:66%;height:3px;border-radius:100%;background:linear-gradient(90deg,transparent,var(--edge) 28%,rgb(139 255 231 / .65) 55%,transparent)}.edge-side{left:0;top:8%;width:3px;height:55%;border-radius:100%;background:linear-gradient(transparent,var(--edge) 30%,transparent)}.edge-bottom{right:6%;bottom:2px;width:49%;height:4px;border-radius:100%;background:linear-gradient(90deg,transparent,var(--shade),transparent)}
[data-solid="true"] .glass-panel{background:var(--solid);backdrop-filter:none;-webkit-backdrop-filter:none}
@media (prefers-reduced-transparency:reduce){.glass-panel{background:var(--solid);backdrop-filter:none;-webkit-backdrop-filter:none}}
@media (hover:hover){.masthead button:hover{background:var(--selected);color:var(--selected-ink)}}
@media (max-width:1000px){.shell{padding:0 28px}.study{gap:32px}.stage{height:470px}.wordmark span{display:none}}
@media (max-width:700px){.shell{padding:0 18px}.masthead{min-height:86px}.study{grid-template-columns:1fr;gap:28px;padding:24px 0 40px}.intro{max-width:560px}h1{font-size:50px}.lede{font-size:17px;max-width:42ch}.eyebrow{margin-bottom:16px}.mode-control{margin-top:24px}.material-copy{min-height:0;margin-top:20px;max-width:44ch}.stage{height:400px;border-radius:25px}.glass-panel{border-radius:22px}.shell>footer{display:block}.shell>footer p+p{margin-top:10px}}
@media (max-width:380px){h1{font-size:42px}.stage{height:340px}.segments span{padding:10px 12px}.masthead button{padding:12px 14px}}
@media (max-width:300px){.masthead{flex-wrap:wrap;gap:12px;padding:18px 0}.masthead button{max-width:100%}.segments{flex-direction:column;width:100%}.segments label{width:100%}h1{font-size:34px;overflow-wrap:anywhere}.eyebrow{overflow-wrap:anywhere}figcaption{flex-direction:column;gap:6px}figcaption span:last-child{text-align:left}.stage-mark{left:8px}.stage-label{left:8px;right:auto;max-width:calc(100% - 16px);overflow-wrap:anywhere}.shell>footer{overflow-wrap:anywhere}}
.masthead,.segments,figcaption{flex-wrap:wrap}.intro{min-width:0}h1{overflow-wrap:anywhere}.masthead button{max-width:100%}.segments label{flex:1 1 auto}.stage-label{max-width:calc(100% - 40px);overflow-wrap:anywhere}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media (forced-colors:active){.glass-panel{background:Canvas!important;border:1px solid CanvasText;box-shadow:none!important;backdrop-filter:none;-webkit-backdrop-filter:none}.edge,.ribbon,.rear-plane,.stage-grid{display:none!important}.stage{border:1px solid CanvasText}.segments input:checked+span{border:2px solid Highlight}.masthead button,.segments{border:1px solid ButtonText}.stage-mark,.stage-label{color:CanvasText;background:Canvas}}
