:root{--paper:#f4f6f8;--surface:#fff;--ink:#1b1d21;--muted:#575d67;--line:#d5d9df;--line-strong:#8c939d;--tape:#f5c518;--tape-ink:#1b1d21;--danger:#b42318;--logo:#32127a;--shadow:0 1px 2px #1b1d2114, 0 10px 28px #1b1d211a;--ease:cubic-bezier(.2, .8, .2, 1);--tok-keyword:#9a2b72;--tok-string:#1d7a3a;--tok-number:#a65200;--tok-call:#1f5fbf;--tok-key:#4a4fbf;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root{--paper:#121418;--surface:#1b1e24;--ink:#eceef1;--muted:#a2a8b2;--line:#2e333b;--line-strong:#6b727d;--logo:#8a6cf2;--shadow:0 1px 2px #0006, 0 10px 28px #00000059;--tok-keyword:#f28fc6;--tok-string:#8fd9a0;--tok-number:#f5b26b;--tok-call:#82b8ff;--tok-key:#b4b6ff;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*,:before,:after{box-sizing:border-box}html,body{overflow-x:clip}body{background:var(--paper);color:var(--ink);-webkit-text-size-adjust:100%;margin:0;font:400 1.0625rem/1.55 Archivo,system-ui,sans-serif}a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}a:hover{text-decoration-thickness:2px}:focus-visible{outline:2px solid var(--ink);outline-offset:2px}code{font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:.875em}pre{background:var(--surface);border:1px solid var(--line);border-radius:10px;margin:20px 0 0;padding:16px 20px;font-size:.875rem;line-height:1.6;overflow:auto}pre code{font-size:inherit}.tok-comment{color:var(--muted);font-style:italic}.tok-keyword{color:var(--tok-keyword)}.tok-string{color:var(--tok-string)}.tok-number{color:var(--tok-number)}.tok-tag,.tok-call{color:var(--tok-call)}.tok-key{color:var(--tok-key)}.page{max-width:1040px;margin-inline:auto;padding-inline:16px}@media (width>=640px){.page{padding-inline:32px}}.muted{color:var(--muted)}.hero{padding-block:40px 0;overflow:hidden}.track{position:relative}.tape{width:calc(100% + 1600px);height:clamp(116px,20vw,184px);color:var(--tape-ink);background-color:var(--tape);background-image:linear-gradient(to right, var(--tape-ink) 0 1px, transparent 1px), linear-gradient(to right, var(--tape-ink) 0 1px, transparent 1px), linear-gradient(to right, var(--tape-ink) 0 2px, transparent 2px);cursor:grab;-webkit-user-select:none;user-select:none;transition:transform .32s var(--ease);background-repeat:repeat-x;background-size:10px 10px,50px 18px,100px 30px;place-items:center;margin-inline-start:-800px;display:grid;position:relative;box-shadow:inset 0 -1px #00000024}.tape[data-held]{cursor:grabbing;transition:none}.tape:after{content:"";border-top:11px solid var(--ink);border-inline:7px solid #0000;position:absolute;bottom:-11px;left:50%;translate:-50%}.tape-name{letter-spacing:-.03em;margin:0;padding-top:18px;font-size:clamp(1.75rem,7.6vw,6.5rem);font-weight:800;font-stretch:125%;line-height:1}.scale{background-image:linear-gradient(to right, var(--line-strong) 0 1px, transparent 1px), linear-gradient(to right, var(--line-strong) 0 1px, transparent 1px), linear-gradient(to right, var(--ink) 0 1px, transparent 1px);background-position:calc(50% + 5px) 0,calc(50% + 25px) 0,calc(50% + 50px) 0;background-repeat:repeat-x;background-size:10px 6px,50px 12px,100px 18px;height:44px;position:relative}.scale span{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.75rem;font-weight:600;font-stretch:62%;position:absolute;top:21px;translate:-50%}.readout{flex-wrap:wrap;gap:4px 28px;margin:8px 0 0;display:flex}.readout div{align-items:baseline;gap:8px;display:flex}.readout dt{color:var(--muted);font-size:.875rem}.readout dd{font-variant-numeric:tabular-nums;margin:0;font-weight:600;font-stretch:75%}.intro{max-width:64ch;padding-block:28px 40px}.lede{margin:0 0 20px;font-size:1.3125rem;line-height:1.45}.install{background:var(--surface);border:1px solid var(--line);border-radius:999px;align-items:center;gap:12px;max-width:28rem;padding:6px 6px 6px 16px;display:flex}.install code{flex:1}.facts{color:var(--muted);margin:16px 0 0;font-size:.9375rem}.key,.row-more,.segmented button{border:1px solid var(--line-strong);background:var(--surface);min-height:40px;color:var(--ink);font:inherit;cursor:pointer;border-radius:999px;padding:0 16px;font-size:.9375rem;font-weight:600}.key:hover,.row-more:hover{border-color:var(--ink)}.key:disabled{opacity:.55;cursor:default}.check{cursor:pointer;align-items:center;gap:8px;min-height:40px;display:inline-flex}input[type=checkbox],input[type=radio],input[type=range]{accent-color:var(--ink)}@media (pointer:coarse){.key,.row-more,.segmented button,.check{min-height:44px}}.feature{border-top:1px solid var(--line);padding-block:56px}.feature h2{letter-spacing:-.015em;max-width:26ch;margin:0 0 16px;font-size:clamp(1.5rem,3.4vw,2.125rem);font-weight:700;font-stretch:112%;line-height:1.15}.prose{max-width:64ch}.prose p{margin:0 0 12px}ul.prose{padding-inline-start:20px}ul.prose li{margin-bottom:8px}.demo{margin-top:24px}.status{min-height:1.55em;color:var(--muted);margin:12px 0 0;font-size:.9375rem}.demo-foot{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;display:flex}.demo-foot .status{margin:0}.frame{background:var(--surface);border:1px solid var(--line);border-radius:12px;margin:0;padding:0;position:relative;overflow:hidden}.frame:before{content:"";z-index:2;pointer-events:none;background-repeat:repeat-x;position:absolute}.frame.x{padding-top:12px}.frame.x:before{background-image:linear-gradient(to right, var(--line-strong) 0 1px, transparent 1px), linear-gradient(to right, var(--line-strong) 0 1px, transparent 1px);background-size:10px 4px,50px 9px;height:10px;inset:0 0 auto}.frame.y:before{background-image:linear-gradient(to bottom, var(--line-strong) 0 1px, transparent 1px), linear-gradient(to bottom, var(--line-strong) 0 1px, transparent 1px);background-repeat:repeat-y;background-size:4px 10px,9px 50px;width:10px;inset-block:0;inset-inline-start:0}[dir=rtl].frame.y:before{background-position:100% 0}.rows{list-style:none}.row{position:relative;overflow:hidden}.row+.row{border-top:1px solid var(--line)}.row-actions{width:152px;display:flex;position:absolute;inset-block:1px;inset-inline-end:0}.row-actions button{background:var(--ink);color:var(--paper);font:inherit;cursor:pointer;border:0;flex:1;font-size:.9375rem;font-weight:600}.row-actions .danger{background:var(--danger);color:#fff}.row-actions button:focus-visible{outline-offset:-5px;outline-color:currentColor}.row-face{background:var(--surface);-webkit-user-select:none;user-select:none;transition:transform .22s var(--ease);align-items:center;gap:8px;display:flex;position:relative}.row-face[data-dragging]{transition:none}.row-main{min-width:0;color:inherit;font:inherit;text-align:start;cursor:pointer;background:0 0;border:0;flex:1;gap:2px;padding-block:14px;padding-inline:16px 0;display:grid}.row-main:focus-visible{outline-offset:-3px}.row-title{font-weight:600}.row-detail{color:var(--muted);font-size:.9375rem}.row-more{flex:none;margin-inline-end:12px}.sheet-demo{flex-wrap:wrap;align-items:flex-end;gap:20px;display:flex}.phone{border-radius:28px;width:min(100%,360px);height:400px}.phone-map{background-color:var(--paper);background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(to right, var(--line) 1px, transparent 1px);background-size:24px 24px;position:absolute;inset:0}.phone-title{margin:20px 28px;font-weight:700;font-stretch:112%}.sheet{inset-inline:0;background:var(--surface);border-top:1px solid var(--line);height:360px;box-shadow:var(--shadow);cursor:grab;-webkit-user-select:none;user-select:none;transition:transform .32s var(--ease);border-radius:20px 20px 0 0;padding:10px 24px 24px 28px;position:absolute;top:40px}.sheet[data-dragging]{cursor:grabbing;transition:none}.sheet-handle{background:var(--line-strong);border-radius:3px;width:40px;height:5px;margin:0 auto 14px;display:block}.sheet{flex-direction:column;display:flex}.sheet-route{overscroll-behavior:contain;flex:1;min-height:0;margin-top:6px;overflow:hidden}.sheet-route[data-full]{overflow-y:auto}.sheet-route ol{margin:0;padding-inline-start:22px}.sheet-route li{border-bottom:1px solid var(--line);padding-block:10px}.sheet h3{margin:0 0 2px;font-size:1.3125rem;font-stretch:112%}.sheet p{margin:0 0 10px}.segmented{border:1px solid var(--line);background:var(--surface);border-radius:999px;gap:4px;padding:4px;display:inline-flex}.segmented button{border-color:#0000;min-height:36px}.segmented button[aria-pressed=true]{background:var(--ink);color:var(--paper)}.pull{height:340px}.pull-mark{inset-inline:0;place-items:center;height:64px;display:grid;position:absolute;top:0}.pull-scroll{overscroll-behavior:contain;position:absolute;inset:0;overflow:auto}.pull-list{background:var(--surface);min-height:100%;transition:transform .22s var(--ease);margin:0;padding:0;list-style:none;position:relative}.pull-list[data-dragging]{transition:none}.pull-list li{border-bottom:1px solid var(--line);padding-block:14px;padding-inline:28px 20px}.spinner{border:2.5px solid var(--line-strong);border-top-color:var(--ink);border-radius:50%;width:24px;height:24px;display:block}.spinner[data-busy]{animation:.8s linear infinite spin}@keyframes spin{to{rotate:360deg}}.spring-track{height:140px}.stop{background:var(--line);width:2px;height:96px;position:absolute;top:calc(50% + 6px);translate:-1px -50%}.spring-card{background:var(--tape);width:104px;height:72px;color:var(--tape-ink);box-shadow:var(--shadow);cursor:grab;-webkit-user-select:none;user-select:none;border-radius:12px;place-items:center;font-weight:700;font-stretch:112%;display:grid;position:absolute;top:calc(50% - 30px);left:calc(50% - 52px)}.spring-track+.segmented{margin-top:16px}.vlist{overscroll-behavior:contain;height:336px;overflow:auto}.vrow{border-bottom:1px solid var(--line);overflow:hidden}.vrow-action{background:var(--ink);width:96px;color:var(--paper);font:inherit;cursor:pointer;border:0;font-size:.9375rem;font-weight:600;position:absolute;inset-block:1px;inset-inline-end:0}.vrow-action:focus-visible{outline-offset:-5px;outline-color:currentColor}.vrow-face{background:var(--surface);font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none;height:100%;transition:transform .22s var(--ease);justify-content:space-between;align-items:center;gap:8px;padding-inline:16px 0;display:flex;position:relative}.vrow-face[data-dragging]{transition:none}.ideas{gap:40px 32px;margin-top:32px;display:grid}@media (width>=760px){.ideas{grid-template-columns:1fr 1fr}}.idea{grid-row:span 3;grid-template-rows:subgrid;row-gap:12px;display:grid}.idea-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 12px;display:flex}.idea h3{margin:0;font-size:1.125rem;font-stretch:112%;line-height:1.3}.idea-head .segmented button{min-height:32px;padding:0 12px;font-size:.875rem}.idea-body{display:grid}.idea-body>*{grid-area:1/1;min-width:0}.idea-body>[data-off]{visibility:hidden}.idea-code{contain:size;border-radius:12px;margin:0;padding:12px 16px;font-size:.8125rem;line-height:1.5}.idea-note{max-width:52ch;margin:0;font-size:.9375rem}.idea-stage{align-content:center;place-items:center;gap:16px;height:288px;display:grid}.scrub-box{background:var(--tape);height:64px;box-shadow:var(--shadow)}.scrub-fields{flex-wrap:wrap;justify-content:center;gap:8px 20px;display:flex}.scrub{align-items:center;gap:8px;font-size:.9375rem;display:inline-flex}.scrub-name{-webkit-text-decoration:underline dotted var(--line-strong);text-decoration:underline dotted var(--line-strong);text-underline-offset:4px;cursor:ew-resize;-webkit-user-select:none;user-select:none;padding-block:8px;font-weight:600}.scrub input{border:1px solid var(--line-strong);background:var(--paper);width:4.5em;min-height:36px;color:inherit;font:inherit;font-variant-numeric:tabular-nums;border-radius:8px;padding:0 8px}.knob-ring{background:conic-gradient(from -135deg, var(--tape) 0 var(--turn), var(--line) var(--turn) 270deg, transparent 270deg);border-radius:50%;place-items:center;width:128px;height:128px;display:grid}.knob{border:1px solid var(--line-strong);background:var(--surface);width:100px;height:100px;box-shadow:var(--shadow);cursor:ns-resize;border-radius:50%;position:relative}.knob:after{content:"";background:var(--ink);border-radius:2px;width:4px;height:22px;position:absolute;top:10px;left:calc(50% - 2px)}.knob-value{margin:0;font-weight:600}.spin-stage{perspective:600px;cursor:grab;-webkit-user-select:none;user-select:none}.cube{width:96px;height:96px;transform-style:preserve-3d;transition:transform .7s var(--ease);position:relative}.cube[data-dragging]{transition:none}.cube span{background:var(--tape);color:var(--tape-ink);border:1px solid #0003;place-items:center;font-weight:700;font-stretch:112%;display:grid;position:absolute;inset:0}.cube span:nth-child(2n){background:color-mix(in srgb, var(--tape) 82%, black)}.cube span:first-child{transform:translateZ(48px)}.cube span:nth-child(2){transform:rotateY(90deg)translateZ(48px)}.cube span:nth-child(3){transform:rotateY(180deg)translateZ(48px)}.cube span:nth-child(4){transform:rotateY(270deg)translateZ(48px)}.slide{border:1px solid var(--line);background:var(--paper);-webkit-user-select:none;user-select:none;border-radius:999px;width:min(100% - 32px,360px);height:56px;position:relative}.slide-label{color:var(--muted);transition:opacity .26s var(--ease);place-items:center;padding-inline-start:48px;font-size:.9375rem;font-weight:600;display:grid;position:absolute;inset:0}.slide-thumb{background:var(--danger);color:#fff;cursor:grab;width:48px;height:48px;transition:left .26s var(--ease);border-radius:50%;place-items:center;font-size:1.25rem;display:grid;position:absolute;top:calc(50% - 24px)}.slide[data-dragging] .slide-thumb{cursor:grabbing}.slide[data-dragging]>*{transition:none}.playground{gap:24px;display:grid}@media (width>=900px){.playground{grid-template-columns:260px 1fr}.playground-out{grid-column:2}}.controls{align-content:start;gap:14px;display:grid}fieldset{border:0;flex-wrap:wrap;gap:0 16px;margin:0;padding:0;display:flex}fieldset:disabled{opacity:.5}legend{margin-bottom:2px;padding:0;font-size:.9375rem;font-weight:600}.range{gap:6px;display:grid}.range span{justify-content:space-between;font-size:.9375rem;font-weight:600;display:flex}output{color:var(--muted);font-variant-numeric:tabular-nums;font-weight:400}input[type=range]{width:100%}.pad{background-image:radial-gradient(var(--line) 1px, transparent 1.5px);cursor:grab;-webkit-user-select:none;user-select:none;background-size:20px 20px;place-items:center;height:300px;display:grid}.puck{background:var(--tape);width:72px;height:72px;color:var(--tape-ink);box-shadow:var(--shadow);transition:transform .32s var(--ease);border-radius:12px;grid-area:1/1;place-items:center;font-weight:700;font-stretch:112%;display:grid}.puck[data-dragging]{transition:none}.bound{border:0 dashed var(--line-strong);display:none;position:absolute}.pad[data-bounded] .bound{display:block}.pad[data-axis=x] .bound{inset-block:20px;border-left-width:1px;left:calc(50% - 120px)}.pad[data-axis=x] .bound+.bound{left:calc(50% + 120px)}.pad[data-axis=y] .bound{inset-inline:24px;border-top-width:1px;top:calc(50% - 120px)}.pad[data-axis=y] .bound+.bound{top:calc(50% + 120px)}.playground-out{gap:12px;display:grid}.playground-out pre{margin:0}.log{font-variant-numeric:tabular-nums;min-height:6.2em;margin:0;padding-inline-start:20px;font-size:.9375rem}.log .muted{margin-inline-start:-20px;list-style:none}.table{background:var(--surface);border:1px solid var(--line);border-radius:12px;margin:8px 0 16px;overflow-x:auto}table{border-collapse:collapse;width:100%;min-width:560px;font-size:.9375rem}th,td{border-bottom:1px solid var(--line);text-align:start;vertical-align:top;padding:12px 16px}tr:last-child>*{border-bottom:0}thead th{color:var(--muted);font-weight:600}tbody th{white-space:nowrap;font-weight:400}.footer{border-top:1px solid var(--line);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;padding-block:28px 48px;font-size:.9375rem;display:flex}.builtby{min-height:24px;color:var(--muted);white-space:nowrap;align-items:center;gap:8px;font:400 .8125rem/1.4 Sora,Vazirmatn,system-ui,sans-serif;text-decoration:none;display:inline-flex}.builtby-mark{fill:var(--logo);flex:none}.builtby-name{color:var(--ink);font-weight:600}.builtby:hover .builtby-name{text-underline-offset:3px;text-decoration:underline;text-decoration-thickness:1px}@media (pointer:coarse){.builtby{min-height:44px}}@media (forced-colors:active){.builtby-mark{fill:canvastext}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}