:root{--canvas:#eef1f6;--surface:#fff;--ink:#0d1826;--muted:#64748b;--accent:#1f4fd8;--accent-lift:#79a6ff;--edge:#d6dde8;--warn:#b4341f;--display:"Space Grotesk", ui-sans-serif, system-ui, sans-serif;--body:ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;--radius:14px;--gutter:20px}*{box-sizing:border-box}html,body{background:var(--canvas);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;overscroll-behavior-y:none;margin:0}button{font:inherit;cursor:pointer}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.shell{max-width:520px;padding:max(24px, env(safe-area-inset-top)) var(--gutter) calc(32px + env(safe-area-inset-bottom));margin:0 auto}.masthead{align-items:center;gap:12px;margin-bottom:40px;display:flex}.wordmark{font-family:var(--display);letter-spacing:.14em;text-transform:uppercase;font-size:15px;font-weight:700}.rule{background:var(--edge);flex:1;height:1px}.langs{gap:2px;display:flex}.lang{opacity:.38;background:0 0;border:1px solid #0000;border-radius:999px;place-items:center;min-width:34px;min-height:34px;padding:0;line-height:1;transition:opacity .16s,border-color .16s,background .16s;display:grid}.flag{border-radius:2px;width:21px;height:15px;display:block;box-shadow:0 0 0 1px #0d182624}.lang--on{opacity:1;background:var(--surface);border-color:var(--edge)}.brand{filter:invert();opacity:.55;width:auto;height:10px}.demo{margin:0 0 28px}.demo-strip{gap:3px;height:72px;display:flex}.demo-cell{opacity:0;transform-origin:0;flex:1;animation:.52s cubic-bezier(.2,.8,.2,1) forwards split;transform:scaleX(.82)}.demo-cell--tail{flex:0 0 18%}@keyframes split{to{opacity:1;transform:scaleX(1)}}.section-title{font-family:var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:44px 0 4px;font-size:12px;font-weight:600}.steps{margin:0;padding:0;list-style:none}.step{border-bottom:1px solid var(--edge);opacity:0;align-items:flex-start;gap:14px;padding:18px 0;animation:.46s ease-out forwards rise;display:flex;transform:translateY(6px)}@keyframes rise{to{opacity:1;transform:none}}.step-frame{background:var(--surface);border:1px solid var(--edge);height:44px;font-family:var(--display);color:var(--muted);font-variant-numeric:tabular-nums;border-radius:6px;flex:0 0 44px;place-items:center;font-size:13px;font-weight:700;display:grid;position:relative}.step-frame:before,.step-frame:after{content:"";background-image:repeating-linear-gradient(90deg, var(--edge) 0 3px, transparent 3px 8px);height:4px;position:absolute;left:4px;right:4px}.step-frame:before{top:4px}.step-frame:after{bottom:4px}.step-body{color:var(--muted);flex:1;font-size:14px;line-height:1.55}.step-body strong{font-family:var(--display);color:var(--ink);margin-bottom:3px;font-size:16px;font-weight:600;display:block}.facts{gap:10px;margin:24px 0 0;padding:0;list-style:none;display:grid}.facts li{border-radius:var(--radius);background:var(--surface);border:1px solid var(--edge);color:var(--muted);padding:14px 16px;font-size:13px;line-height:1.5}.facts strong{font-family:var(--display);color:var(--ink);margin-bottom:2px;font-size:14px;font-weight:600;display:block}.colophon{border-top:1px solid var(--edge);color:var(--muted);flex-direction:column;align-items:flex-start;gap:12px;max-width:40ch;margin-top:36px;padding-top:20px;font-size:12.5px;line-height:1.6;display:flex}.brand--foot{height:12px}.hero{background:var(--ink);color:#fff;border-radius:20px;margin-bottom:10px;padding:28px 30px 26px;position:relative;overflow:hidden}.hero:before,.hero:after{content:"";background-image:repeating-linear-gradient(#ffffff2e 0 9px,#0000 9px 20px);width:8px;position:absolute;top:0;bottom:0}.hero:before{left:9px}.hero:after{right:9px}.hero h1{font-family:var(--display);letter-spacing:-.02em;margin:0 0 16px;font-size:clamp(29px,8vw,38px);font-weight:500;line-height:1.12}.hero h1 em{color:var(--accent-lift);font-style:normal;font-weight:700}.hero .lede{color:#ffffff9e;margin-bottom:26px}.hero .primary{color:var(--ink);background:#fff}.hero .demo-cell{background:#ffffff0d;border-color:#ffffff2e}.hero .cell-num{color:#ffffff73}.hero .cell:before,.hero .cell:after{background-image:repeating-linear-gradient(90deg,#ffffff38 0 4px,#0000 4px 10px)}.lede{color:var(--muted);max-width:34ch;margin:0 0 32px;font-size:15px;line-height:1.55}.primary{border-radius:var(--radius);background:var(--ink);color:#fff;width:100%;font-family:var(--display);letter-spacing:.01em;border:0;padding:18px;font-size:17px;font-weight:600}.primary:active{transform:translateY(1px)}.error{border-radius:var(--radius);color:var(--warn);background:#fdeceb;margin:20px 0 0;padding:14px 16px;font-size:14px;line-height:1.5}.working{padding:8px 0}.stage{font-family:var(--display);margin:0 0 6px;font-size:20px;font-weight:600}.filename{color:var(--muted);word-break:break-all;margin:0 0 24px;font-size:13px}.meter{background:var(--edge);border-radius:999px;height:6px;overflow:hidden}.meter-fill{background:var(--accent);border-radius:999px;height:100%;transition:width .22s ease-out}.meter-fill--idle{background:linear-gradient(90deg, var(--edge), var(--accent), var(--edge));background-size:240% 100%;animation:1.4s linear infinite sweep;width:100%!important}@keyframes sweep{to{background-position:-240% 0}}.hint{color:var(--muted);margin:18px 0 0;font-size:13px;line-height:1.55}.hint--flow{margin:24px 0 28px}.hint strong{color:var(--ink);font-weight:600}.strip-block{margin-bottom:28px}.strip-head{justify-content:space-between;align-items:baseline;margin-bottom:10px;display:flex}.eyebrow{font-family:var(--display);letter-spacing:.16em;text-transform:uppercase;font-size:12px;font-weight:600}.eyebrow--muted{color:var(--muted);font-weight:500}.strip{gap:3px;height:62px;display:flex}.cell{background:var(--surface);border:1px solid var(--edge);border-radius:6px;flex-basis:0;place-items:center;min-width:22px;transition:background .2s,border-color .2s;display:grid;position:relative}.cell:before,.cell:after{content:"";background-image:repeating-linear-gradient(90deg, var(--edge) 0 4px, transparent 4px 10px);height:5px;position:absolute;left:5px;right:5px}.cell:before{top:6px}.cell:after{bottom:6px}.cell-num{font-family:var(--display);color:var(--muted);font-size:15px;font-weight:700}.cell--saved{background:var(--accent);border-color:var(--accent)}.cell--saved .cell-num{color:#fff}.pieces{border-top:1px solid var(--edge);margin:0;padding:0;list-style:none}.piece{border-bottom:1px solid var(--edge);align-items:center;gap:14px;padding:14px 0;display:flex}.piece-num{font-family:var(--display);color:var(--muted);font-variant-numeric:tabular-nums;font-size:13px;font-weight:700}.piece-meta{flex-direction:column;flex:1;gap:2px;display:flex}.piece-time{font-family:var(--display);font-variant-numeric:tabular-nums;letter-spacing:-.01em;font-size:19px;font-weight:600}.piece-time--over{color:var(--warn)}.piece-range{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px}.save{border:1px solid var(--ink);background:var(--ink);color:#fff;font-family:var(--display);border-radius:999px;padding:10px 18px;font-size:14px;font-weight:600}.save--done{color:var(--muted);border-color:var(--edge);background:0 0}.ghost{border-radius:var(--radius);border:1px solid var(--edge);width:100%;color:var(--muted);font-family:var(--display);background:0 0;padding:15px;font-size:15px;font-weight:500}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
