:root{--paper: #ffffff;--panel: #f2f3ef;--ink: #000000;--muted: #6b6d67;--line: #000000;--live: #ffd21f;--bad: #c8301b;--font: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;--radius: 14px;--gutter: clamp(20px, 4vw, 56px)}*{box-sizing:border-box}html{color-scheme:light}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.45;font-variation-settings:"opsz" 14,"wdth" 100;-webkit-font-smoothing:antialiased}a{color:inherit}:focus-visible{outline:3px solid var(--live);outline-offset:2px}[hidden]{display:none!important}.top{display:flex;justify-content:space-between;align-items:baseline;padding:22px var(--gutter) 0}.wordmark{font-weight:800;font-size:26px;text-decoration:none;letter-spacing:-.02em}.top-links{display:flex;gap:22px;font-weight:600;flex-wrap:wrap;justify-content:flex-end}.top-links a{text-decoration:none}.top-links a:hover{text-decoration:underline}main{padding:0 var(--gutter) 60px;max-width:1240px;margin:0 auto}.lede{font-size:clamp(30px,4.6vw,58px);line-height:1.02;letter-spacing:-.025em;font-weight:600;font-variation-settings:"opsz" 96,"wdth" 92;margin:56px 0 36px;max-width:20ch}.panels{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media(max-width:860px){.panels{grid-template-columns:1fr}}.panel{min-width:0;border:2px solid var(--line);border-radius:var(--radius);padding:22px 24px 26px;background:var(--paper);min-height:380px;display:flex;flex-direction:column}.panel h2{margin:0 0 18px;font-size:15px;font-weight:600;padding-bottom:10px;border-bottom:2px solid var(--line)}.stage{display:flex;flex-direction:column;gap:14px;flex:1}.say{margin:0;font-size:20px;font-weight:600;letter-spacing:-.01em}.say-sub{margin:0;color:var(--muted)}.hint{margin:0;color:var(--muted);font-size:15px;max-width:46ch}.fine{color:var(--muted);font-size:15px;max-width:70ch}.error{margin:0;color:var(--bad);font-weight:600}.drop{flex:1;min-height:190px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;border:2px dashed var(--line);border-radius:10px;background:var(--panel);cursor:pointer;text-align:center}.drop.over{background:var(--live);border-style:solid}.drop-main{font-size:22px;font-weight:600;letter-spacing:-.01em}.drop-sub{color:var(--muted);text-decoration:underline}.code{display:block;font-size:clamp(64px,9vw,120px);font-weight:800;line-height:.95;letter-spacing:.06em;font-variation-settings:"opsz" 96,"wdth" 100;font-variant-numeric:tabular-nums slashed-zero;background:var(--live);padding:14px 18px 10px;border-radius:10px;user-select:all}.code-input{font:inherit;font-size:clamp(40px,5vw,56px);font-weight:800;letter-spacing:.08em;font-variant-numeric:tabular-nums slashed-zero;text-transform:uppercase;width:100%;min-width:0;padding:10px 16px;border:2px solid var(--line);border-radius:10px;background:var(--panel)}.code-input::placeholder{color:#b6b8b1;font-weight:600}#code-form{display:flex;flex-direction:column;gap:12px}.status{margin:0;font-weight:600}.status.live:before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--live);border:2px solid var(--ink);margin-right:8px;vertical-align:-1px}.drive{display:flex;align-items:center;justify-content:space-between;gap:12px;border:2px solid var(--line);border-top-width:10px;border-radius:10px;padding:14px 16px;background:var(--live)}.drive-name{font-weight:800;font-size:20px;letter-spacing:-.01em;overflow-wrap:anywhere}.files{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:260px;overflow:auto}.files li{display:grid;grid-template-columns:1fr auto;gap:10px;font-size:15px;align-items:baseline}.files .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.files .size{color:var(--muted);font-variant-numeric:tabular-nums}.files .bar{grid-column:1 / -1;height:4px;background:var(--panel);border-radius:2px;overflow:hidden}.files .bar i{display:block;height:100%;width:0;background:var(--ink);transition:width .25s linear}.files li.done .bar i{background:var(--live)}.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:8px}.btn{font:inherit;font-weight:600;font-size:16px;padding:10px 16px;border-radius:8px;border:2px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;text-decoration:none;display:inline-block}.btn:hover{background:var(--panel)}.btn.primary{background:var(--ink);color:var(--paper)}.btn.primary:hover{background:#222}.btn.quiet{border-color:transparent;color:var(--muted)}.btn.quiet:hover{color:var(--ink);background:transparent;text-decoration:underline}.linkish{font:inherit;background:none;border:0;padding:0;text-decoration:underline;cursor:pointer;color:inherit}.how{margin-top:72px;max-width:760px}.how h2{font-size:15px;font-weight:600;border-bottom:2px solid var(--line);padding-bottom:10px;margin:0 0 20px}.how ol{list-style:none;margin:0;padding:0;display:grid;gap:18px}.how li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start}.how li span{display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;border:2px solid var(--line);border-radius:50%;font-weight:800}.how li p{margin:4px 0 0;max-width:62ch}.foot{padding:28px var(--gutter) 40px;border-top:2px solid var(--line);color:var(--muted);font-size:15px}.foot p{margin:0}@media(prefers-reduced-motion:reduce){.files .bar i{transition:none}}
