@font-face{font-family:Space;src:url(/fonts/space-400.woff2) format("woff2");font-weight:400;font-display:swap}@font-face{font-family:Space;src:url(/fonts/space-600.woff2) format("woff2");font-weight:600 900;font-display:swap}:root{color-scheme:dark;--lime:#daff00;--muted:#929c8c;--line:#30382a;--display-color:#daff00;font-family:Space,Arial,sans-serif;background:#0b0e0b;color:#f3f5ef}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:disabled{opacity:.3;cursor:default}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--lime);outline-offset:5px}[hidden]{display:none!important}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.demo-header{max-width:1200px;margin:auto;padding:28px 40px;display:flex;align-items:center;justify-content:space-between}.demo-brand{display:flex;gap:10px;align-items:center;text-decoration:none;font-size:15px;font-weight:600;letter-spacing:-.5px}.demo-brand svg,.demo-app-header>div>svg{fill:var(--lime);stroke:none;width:29px;height:29px}.demo-header nav{display:flex;gap:3px}.demo-header nav a{font-size:12px;padding:10px 12px;text-decoration:none;color:var(--muted);border-radius:6px}.demo-header nav a[aria-current]{background:#202619;color:var(--lime)}main{max-width:1120px;margin:auto;padding:0 40px}.demo-heading{text-align:center;margin:4px 0 24px}.demo-heading h1{margin:0 0 9px;font-size:clamp(32px,4vw,44px);font-weight:600;letter-spacing:-2px}.demo-heading p{margin:0;color:var(--muted);font-size:14px}.demo-workspace{display:grid;grid-template-columns:360px minmax(0,1fr);align-items:center;gap:70px;max-width:940px;margin:auto}.demo-phone{width:360px;height:740px;position:relative;background:#11170e;border:7px solid #252a23;border-radius:48px;box-shadow:0 0 0 1px #737a6b,inset 0 0 0 3px #070a07,0 32px 60px #0005;overflow:hidden}.demo-island{position:absolute;z-index:2;top:14px;left:50%;transform:translate(-50%);width:100px;height:25px;border-radius:20px;background:#030503}.demo-phone-content{height:100%;overflow:auto;overscroll-behavior:contain;scrollbar-width:none;padding:58px 20px 36px}.demo-phone-content::-webkit-scrollbar{display:none}.demo-home-indicator{position:absolute;bottom:10px;left:50%;transform:translate(-50%);height:4px;width:110px;background:#8c9485;border-radius:10px;pointer-events:none}.demo-app-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.demo-app-header>div{display:flex;align-items:center;gap:9px}.demo-app-header h2{font-size:20px;letter-spacing:-.6px;margin:0;font-weight:600}.demo-reset{border:0;background:none;width:40px;height:40px;display:grid;place-items:center;color:#aab39f;border-radius:50%}.demo-reset:hover{background:#252e1e;color:var(--lime)}.demo-phone-led{display:block;width:100%;height:170px;background:#080c07;border:1px solid var(--line);border-radius:12px;margin-bottom:16px}.demo-tabs{display:grid;grid-template-columns:repeat(5,1fr);padding:4px;border:1px solid var(--line);border-radius:12px;gap:2px}.demo-tabs button{min-width:0;border:0;background:none;border-radius:8px;min-height:62px;display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;color:#aab39f;font-size:11px}.demo-tabs svg{width:21px;height:21px}.demo-tabs button[aria-selected=true]{background:var(--lime);color:#101600}.demo-panels{margin-top:24px;min-height:161px}.demo-label{display:block;color:#b9c2b1;font-size:12px;margin:0 0 12px}.demo-speed-line{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px}.demo-speed-line>div{display:flex;align-items:baseline;gap:8px}.demo-speed-line output{font-size:54px;line-height:1;letter-spacing:-3px;font-weight:600;font-variant-numeric:tabular-nums}.demo-speed-line span{color:var(--muted);font-size:12px}.demo-round{width:42px;height:42px;border:1px solid #445137;background:none;border-radius:50%;font-size:23px;line-height:1}.demo-round:hover{background:#222d1b;border-color:var(--lime)}input[type=range]{width:100%;height:24px;margin:0;accent-color:var(--lime);cursor:pointer;touch-action:pan-y}.demo-range-labels{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:2px}.demo-message-wrap{position:relative}.demo-message-wrap input{width:100%;height:54px;background:#0b1109;border:1px solid #445137;border-radius:9px;padding:0 65px 0 14px;color:#f3f5ef;font-size:19px;text-transform:uppercase}.demo-message-wrap>span{position:absolute;right:13px;top:20px;font-size:11px;color:var(--muted)}.demo-switch-row{display:flex;align-items:center;gap:12px;font-size:13px;min-height:58px;position:relative;cursor:pointer}.demo-switch-row>span:first-child{margin-right:auto}.demo-switch-row input{position:absolute;right:0;width:44px;height:26px;opacity:0;cursor:pointer}.demo-switch{width:42px;height:25px;border-radius:20px;background:#333d2b;pointer-events:none}.demo-switch:after{content:"";display:block;width:19px;height:19px;border-radius:50%;background:#e6eddf;margin:3px;transition:transform .15s}.demo-switch-row input:checked+.demo-switch{background:var(--lime)}.demo-switch-row input:checked+.demo-switch:after{transform:translate(17px);background:#162000}.demo-switch-row input:focus-visible+.demo-switch{outline:2px solid var(--lime);outline-offset:5px}.demo-icons{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.demo-icons button{height:70px;border:1px solid var(--line);border-radius:10px;background:#0c1209;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;font-size:10px;color:#aab39f}.demo-icons svg{width:25px;height:25px;fill:currentColor;stroke:none}.demo-icons button[aria-pressed=true]{border-color:var(--lime);color:var(--lime);background:#1c260c}.demo-colors{border:0;padding:0;margin:22px 0 0}.demo-colors legend{font-size:12px;margin-bottom:12px;color:#b9c2b1}.demo-colors>div{display:flex;justify-content:space-between;gap:7px}.demo-colors button{height:44px;width:44px;border:1px solid transparent;border-radius:50%;background:none;display:grid;place-items:center}.demo-colors button>span{height:30px;width:30px;background:var(--swatch);border-radius:50%}.demo-colors button[aria-pressed=true]{border-color:var(--swatch)}.demo-draw-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}.demo-draw-heading p{font-size:11px;color:var(--muted);margin:0}.demo-text-button{border:0;background:none;padding:8px 0 8px 8px;font-size:12px;color:var(--lime)}.demo-grid{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:3px;padding:8px;background:#080c07;border:1px solid var(--line);border-radius:9px;touch-action:none;-webkit-user-select:none;user-select:none}.demo-grid>[role=row]{display:contents}.demo-pixel{aspect-ratio:1;padding:0;min-width:0;border:0;background:#293021;border-radius:2px}.demo-pixel[aria-pressed=true]{background:var(--display-color)}.demo-pixel:focus-visible{outline:1px solid #fff;outline-offset:1px;z-index:1}.demo-clock{font-size:52px;font-weight:600;letter-spacing:-3px;font-variant-numeric:tabular-nums;display:block;text-align:center;padding:20px 0 30px}.demo-backpack{position:relative;width:100%;height:720px;isolation:isolate}.demo-backpack img{position:absolute;width:100%;height:100%;inset:0;object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none}.demo-backpack canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.demo-bag-glow{position:absolute;inset:15% -8%;z-index:-1;background:radial-gradient(ellipse,#b5f72b0b,transparent 65%)}.demo-footer{display:flex;align-items:center;justify-content:center;gap:20px;margin:28px 0 24px;font-size:11px;color:#89937e}.demo-footer p{margin:0}.demo-footer a{text-underline-offset:3px}@media(min-width:761px)and (max-height:980px){.demo-header{padding-top:19px;padding-bottom:18px}.demo-heading{margin-bottom:20px}.demo-workspace{transform-origin:top center}.demo-footer{margin-top:24px}}@media(max-width:1000px)and (min-width:761px){.demo-workspace{gap:24px}.demo-backpack{height:650px}main{padding:0 24px}}@media(max-width:760px){.demo-header{padding:17px 20px}.demo-brand{font-size:13px}.demo-brand svg{width:24px;height:24px}.demo-heading{margin:7px 0 10px}.demo-heading h1{font-size:30px;letter-spacing:-1.5px;margin-bottom:5px}.demo-heading p{font-size:12px}main{padding:0 16px;max-width:500px}.demo-workspace{display:flex;flex-direction:column;gap:0}.demo-backpack{order:-1;height:245px;position:sticky;top:0;z-index:3;background:linear-gradient(#0b0e0b 90%,#0b0e0b00);width:100%;margin-bottom:6px}.demo-phone{height:auto;width:100%;border:0;box-shadow:none;border-radius:20px;background:#11170e;overflow:visible}.demo-island,.demo-home-indicator,.demo-phone-led{display:none}.demo-phone-content{padding:16px 18px 24px;height:auto;overflow:visible}.demo-app-header{margin-bottom:12px}.demo-app-header h2{font-size:18px}.demo-panels{min-height:156px;margin-top:20px}.demo-colors{margin-top:20px}.demo-tabs button{min-height:58px;font-size:11px}.demo-footer{flex-direction:column;gap:8px;margin:22px 0;font-size:10px}.demo-bag-glow{inset:0}.demo-grid{gap:4px}}@media(max-width:380px){.demo-backpack{height:215px}.demo-phone-content{padding-left:14px;padding-right:14px}.demo-heading h1{font-size:28px}}.demo-tabs{position:sticky;top:0;z-index:2;background:#11170e}@media(max-width:760px){.demo-workspace:has(#demo-tab-message[aria-selected=true]) .demo-backpack{position:relative}}@media(max-width:760px)and (max-height:680px){.demo-backpack{height:160px;position:relative}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}