@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap";:root{font-family:DM Sans,Arial,sans-serif;color:#e9e9e9;background:#101112;font-synthesis:none}*{box-sizing:border-box}body{--cloth-color:#d0d0d0;--cloth-light-color:#fff;--cloth-light-intensity:1;margin:0;min-width:320px;overflow-x:hidden}button{font:inherit}.app{min-height:100vh;display:flex;flex-direction:column}.labbar{height:64px;padding:0 2.2%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff14}.brand{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:700;letter-spacing:.13em}.brand small{font-size:10px;font-weight:400;color:#7e8387;letter-spacing:.12em}.brand-mark{width:17px;height:17px;border:1.5px solid #e4e4e4;border-radius:5px;transform:rotate(15deg)}.lab-status,.control-label,.status-text,.kicker{font-family:Space Mono,monospace;font-size:10px;letter-spacing:.08em;color:#858a8e}.lab-status,.framework-label,.fps-meter{display:flex;align-items:center;gap:9px}.fps-meter{font-variant-numeric:tabular-nums;color:#b7d8c2}.fps-meter output{min-width:50px;text-align:right}.frame-graph{width:104px;height:28px;overflow:visible}.frame-graph line{stroke:#ffffff23;stroke-width:1;stroke-dasharray:2 3}.frame-graph polyline{fill:none;stroke:#91e4b3;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.lab-status i{width:6px;height:6px;background:#91e4b3;border-radius:50%;box-shadow:0 0 9px #91e4b3}.demo-shell{flex:1;min-height:490px;padding:20px 2% 10px;display:flex;overflow:clip}.surface{position:relative;isolation:isolate;overflow:hidden;flex:1;min-height:0;border-radius:46px;box-shadow:0 26px 50px #000a}.surface-bg{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle at 55% 30%,#353535,#202020 55%,#141414)}.surface-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(150deg,#ffffff0d,transparent 45%,#0005)}.perimeter{position:absolute;inset:4.1% 2%;z-index:2;border:1.5px solid #d9d9d9a6;border-radius:61px;box-shadow:0 0 3px #fff3,0 12px 25px #000b;pointer-events:none}.landing-copy{position:absolute;left:8.3%;top:28%;width:min(520px,48%);z-index:2}.kicker{color:#c8c8c8}h1{font-size:clamp(30px,5vw,84px);line-height:1.02;letter-spacing:-.06em;font-weight:500;margin:20px 0 23px;color:#ededed}.landing-copy p{font-size:clamp(11px,1.2vw,16px);line-height:1.55;color:#b4b7b7;max-width:350px;margin:0}.tile-group{position:absolute;top:9%;right:4.2%;display:flex;gap:clamp(12px,1.5vw,26px);z-index:3}.tile{position:relative;z-index:3;width:clamp(54px,4.8vw,90px);aspect-ratio:1;border-radius:21px;background:#242424;border:1.5px solid var(--cloth-glow);box-shadow:0 13px 18px #000b}.tile[aria-pressed=true]{border-width:2px}.cta{position:absolute;right:5%;bottom:10%;width:min(390px,31%);height:clamp(82px,10vw,150px);padding:0 8%;display:flex;justify-content:space-between;align-items:center;border:1.5px solid var(--cloth-glow);border-radius:22px;background:#1f1b1a;color:#f4e4e1;font-size:clamp(12px,1.5vw,20px);font-weight:500;text-align:left;box-shadow:0 16px 25px #000c;z-index:3}.cta[aria-pressed=true]{border-width:2px}.cta span{font-size:25px;color:#ff6653}.scroll-stage{position:relative;min-height:85vh;margin:18px 2% 28px;overflow:hidden;border:1px solid #ffffff20;border-radius:40px;background:radial-gradient(circle at 75% 25%,#2b2c31,#17191b 55%,#101213)}.scroll-stage-two{background:radial-gradient(circle at 20% 70%,#2b2429,#17191b 55%,#101213)}.story-heading{position:absolute;left:8%;top:17%;z-index:2;max-width:480px}.story-heading h2{font-size:clamp(36px,5vw,72px);font-weight:500;letter-spacing:-.055em;line-height:1.04;margin:20px 0}.story-heading p{max-width:350px;color:#aeb2b3;line-height:1.5}.story-card{position:absolute;z-index:3;min-width:260px;min-height:180px;padding:28px;border:1.5px solid var(--cloth-glow);border-radius:24px;background:#202124;box-shadow:0 18px 35px #0009;display:flex;flex-direction:column;justify-content:space-between}.story-card span{font-family:Space Mono,monospace;font-size:10px;letter-spacing:.1em;color:#a9aaaf}.story-card strong{font-size:clamp(22px,2.5vw,36px);font-weight:500;line-height:1.1;letter-spacing:-.04em}.story-card-one{right:9%;top:48%;width:min(400px,36%);height:230px}.story-card-two{right:8%;top:18%;width:min(340px,32%);height:210px}.story-card-three{left:12%;bottom:10%;width:min(300px,30%);height:190px}.debug-panel{position:fixed;top:76px;left:16px;z-index:9995;width:min(352px,calc(100vw - 24px));max-height:calc(100vh - 96px);overflow:auto;padding:12px 13px 13px;border:1px solid #ffffff1f;border-radius:15px;background:#131415ea;box-shadow:0 18px 40px #000b;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-family:Space Mono,monospace;font-size:10px;letter-spacing:.04em;color:#d8d8d8}.debug-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:9px;margin-bottom:10px;border-bottom:1px solid #ffffff14}.debug-title{font-weight:700;letter-spacing:.16em;color:#e5f0e7}.debug-toggle{width:22px;height:22px;display:grid;place-items:center;padding:0;border:1px solid #ffffff26;border-radius:6px;background:#1c1d1f;color:#d8d8d8;font:inherit;line-height:1;cursor:pointer}.debug-toggle:hover{border-color:#ffffff4d;color:#fff}.debug-panel.is-collapsed .debug-body{display:none}.debug-body{display:grid;gap:12px}.debug-group{display:grid;gap:8px}.debug-group+.debug-group{border-top:1px solid #ffffff12;padding-top:11px}.group-title{margin:0;font-size:9px;font-weight:700;letter-spacing:.2em;color:#7fb495}.debug-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px}.debug-field,.debug-slider{display:grid;gap:4px}.debug-slider+.debug-slider{margin-top:1px}.debug-toggle-row:hover span{color:#e5f0e7}.debug-field input:hover{border-color:#ffffff40}.field-name{color:#858a8e;letter-spacing:.08em}.field-row{display:flex;align-items:center;gap:6px}.debug-field input,.debug-slider input[type=range]{width:100%;min-width:0;margin:0}.debug-field input{padding:4px 6px;border:1px solid #ffffff26;border-radius:6px;background:#0d0e0f;color:#e5f0e7;font:inherit;font-variant-numeric:tabular-nums}.debug-field input:focus{outline:none;border-color:#91e4b3a6;box-shadow:0 0 0 2px #91e4b326}.field-unit{color:#71777b;flex:none}.debug-slider input[type=range]{accent-color:#bcf0d0;cursor:pointer}.debug-toggles{display:grid;grid-template-columns:1fr 1fr;gap:7px 12px}.debug-toggle-row{display:flex;align-items:center;gap:7px;cursor:pointer}.debug-toggle-row input{accent-color:#bcf0d0;cursor:pointer}.debug-stats,.debug-status{margin:0;line-height:1.5;color:#7f868a}.debug-stats{color:#a9c8b4;font-variant-numeric:tabular-nums}.debug-reset{padding:6px 9px;border:1px solid #ffffff26;border-radius:7px;background:#1c1d1f;color:#c9cecb;font:inherit;letter-spacing:.08em;cursor:pointer}.debug-reset:hover{border-color:#ff66538c;color:#ffb3a6}@media(max-width:850px){.surface{border-radius:25px}.perimeter{border-radius:32px}.tile{border-radius:15px}.cta{border-radius:16px}.landing-copy{top:29%}}@media(max-width:850px){.story-heading{top:10%}.story-card-one{top:auto;bottom:9%}.story-card-two{top:40%}.story-card-three{left:8%;bottom:7%}}@media(max-width:620px){.labbar{height:55px;padding:0 14px}.brand{font-size:10px}.brand small,.lab-status{font-size:8px}.framework-label{display:none}.frame-graph{width:70px}.demo-shell{min-height:450px;padding:10px}.surface{border-radius:19px}.perimeter{inset:3%;border-radius:24px}.landing-copy{left:9%;top:31%;width:65%}h1{font-size:clamp(30px,9vw,48px);margin:11px 0}.landing-copy p{max-width:220px}.tile-group{top:7%;right:6%;gap:7px}.tile{width:clamp(41px,10vw,59px);border-radius:13px}.cta{right:7%;bottom:9%;width:57%;height:70px;padding:0 13px;font-size:11px}.cta span{font-size:18px}}@media(max-width:620px){.scroll-stage{min-height:720px;margin:10px;border-radius:20px}.story-heading{left:8%;top:9%}.story-heading h2{font-size:36px}.story-card{min-width:0;padding:18px}.story-card-one{left:8%;right:8%;width:auto;height:190px;bottom:8%}.story-card-two{left:20%;right:8%;width:auto;height:170px;top:44%}.story-card-three{left:8%;right:20%;width:auto;height:150px;bottom:5%}}@media(max-width:620px){.debug-panel{inset:auto 10px 10px;width:auto;max-height:64vh}.debug-fields{grid-template-columns:1fr 1fr}}