:root{--vpm-ground: #f3ebe4;--vpm-ink: #24201c;--vpm-ink-2: #322c27;--vpm-muted: #dcd8d5;--vpm-red: #c62828;--vpm-sock: #b8261f;--font-grotesk: "radio-grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;--font-serif: "columbia-serial", "Times New Roman", Times, Georgia, serif;--pad: 18px;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px)}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden;overscroll-behavior:none;background:var(--vpm-ground);color:var(--vpm-ink);font-family:var(--font-grotesk);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}#app{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;touch-action:none;overflow:hidden}#gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}#ui{position:absolute;inset:0;pointer-events:none;font-family:var(--font-grotesk);text-transform:uppercase;letter-spacing:.05em;font-size:13px;line-height:1.2}#ui .interactive{pointer-events:auto;cursor:pointer}.layer{position:absolute;inset:0;padding:calc(var(--pad) + var(--safe-top)) calc(var(--pad) + var(--safe-right)) calc(var(--pad) + var(--safe-bottom)) calc(var(--pad) + var(--safe-left));transition:opacity .5s ease}.layer.hidden{opacity:0;pointer-events:none!important}.layer.hidden *{pointer-events:none!important}.veil{background:var(--vpm-ground);display:flex;flex-direction:column;justify-content:space-between;pointer-events:auto}.veil.translucent{background:#f3ebe4db}.wordmark{font-family:var(--font-serif);font-size:32px;line-height:1;letter-spacing:.02em}.wordmark small{font-family:var(--font-grotesk);font-size:11px;letter-spacing:.08em;vertical-align:top;margin-left:2px}.veil .middle{display:flex;flex-direction:column;gap:24px}.veil .headline{font-family:var(--font-serif);font-size:44px;line-height:.96;text-transform:uppercase;letter-spacing:0;max-width:10ch}.veil .lede{font-size:13px;max-width:28ch;color:var(--vpm-ink-2);text-transform:none;letter-spacing:.01em;line-height:1.5}.veil .row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}.veil .foot{font-size:11px;color:#3426218c}.cta{display:inline-block;padding:12px 0;border-top:1px solid var(--vpm-ink);border-bottom:1px solid var(--vpm-ink);text-transform:uppercase;letter-spacing:.06em;font-size:13px;width:100%}.cta.pulse{animation:cta-pulse 2.2s ease-in-out infinite}@keyframes cta-pulse{0%,to{opacity:1}50%{opacity:.45}}.hud{display:flex;flex-direction:column;justify-content:space-between}.hud .top{display:flex;justify-content:space-between;align-items:flex-start}.hud .bottom{display:flex;justify-content:space-between;align-items:flex-end}.hud .brand{font-family:var(--font-serif);font-size:15px;letter-spacing:.02em}.hud .brand small{font-family:var(--font-grotesk);font-size:9px;letter-spacing:.08em;vertical-align:top;margin-left:1px}.hud .score{text-align:right}.hud .score .trick{font-family:var(--font-serif);font-size:22px;line-height:1;letter-spacing:0;min-height:22px;transition:opacity .6s ease}.hud .score .trick.flash{animation:trick-in .35s ease-out}@keyframes trick-in{0%{transform:translateY(4px);opacity:0}to{transform:translateY(0);opacity:1}}.hud .score .points{margin-top:4px;font-size:12px;color:var(--vpm-ink-2);transition:opacity .6s ease}.hud .score .points.bad{color:var(--vpm-red)}.hud .score .combo{margin-top:2px;font-size:11px;color:#3426218c;min-height:12px;transition:opacity .6s ease}.hud .score .total{font-size:12px;letter-spacing:.08em;margin-bottom:6px;color:var(--vpm-ink);min-height:14px}.hud .controls{display:flex;gap:18px;font-size:11px}.hud .controls span{padding:8px 0;border-bottom:1px solid transparent}.hud .controls span:active{border-bottom-color:var(--vpm-ink)}.hud .prompt{position:absolute;left:0;right:0;bottom:calc(96px + var(--safe-bottom));text-align:center;font-size:12px;letter-spacing:.08em;color:var(--vpm-ink);transition:opacity .4s ease}.hud .prompt .step{font-size:10px;color:#3426218c;display:block;margin-bottom:6px}.hud .prompt .big{display:block;font-family:var(--font-serif);font-size:26px;letter-spacing:0;margin-top:8px}.hud .zones{position:absolute;inset:0;pointer-events:none}.hud .guide{position:absolute;inset:0;transition:opacity .5s ease}.hud .guide.quiet{opacity:.45}.hud .guide svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 .6px rgba(36,32,28,.8))}.hud .guide .deck{fill:none;stroke:var(--vpm-ground);stroke-width:.5;opacity:.85}.hud .guide .foot{fill:#f3ebe400;stroke:var(--vpm-ground);stroke-width:.5;stroke-dasharray:3 4;transition:fill .25s ease}.hud .guide .foot.on{fill:#f3ebe42e;stroke-dasharray:none}.hud .guide .foot-letter{fill:var(--vpm-ground);font-family:var(--font-grotesk);font-size:13px;letter-spacing:.1em;text-anchor:middle;dominant-baseline:central}.touch-marks{position:absolute;inset:0}.touch-mark{position:absolute;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;border:1px solid var(--vpm-ink);opacity:.55;animation:mark-breathe 1.8s ease-in-out infinite;transition:opacity .4s ease}.touch-mark:after{content:"";position:absolute;inset:26px;border-radius:50%;background:var(--vpm-ink)}.touch-mark.done,#ui.sheet-open .touch-marks,#ui.sheet-open .hud .prompt{opacity:0}@keyframes mark-breathe{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}.fade{background:var(--vpm-ground);opacity:0;transition:opacity .35s ease}.fade.on{opacity:1}.sheet .product{display:flex;flex-direction:column;gap:12px}.sheet .product .name{font-family:var(--font-serif);font-size:44px;line-height:.96}.sheet .product .spec{font-size:12px;color:var(--vpm-ink-2);line-height:1.7}.sheet .product .desc{font-size:13px;text-transform:none;letter-spacing:.01em;max-width:30ch;line-height:1.5;color:var(--vpm-ink-2);margin-top:12px}.sheet a{color:inherit;text-decoration:none}.sheet .close{font-size:11px}#debug{position:absolute;left:8px;top:calc(56px + var(--safe-top));font:10px/1.35 ui-monospace,Menlo,monospace;white-space:pre;color:#24201c;background:#f3ebe4cc;padding:6px 8px;text-transform:none;letter-spacing:0;pointer-events:none}@media(orientation:landscape)and (max-height:500px){.veil .headline{font-size:32px}.hud .prompt{bottom:calc(24px + var(--safe-bottom))}.title{flex-direction:row;flex-wrap:wrap}.title .title-top{width:54%}.title .hero-zone{width:54%;flex:none;order:3;height:calc(100% - 90px)}.title .panel{order:2;width:46%;height:100%;border-top:0;border-left:1px solid var(--vpm-ink);padding:calc(var(--pad) + var(--safe-top)) calc(var(--pad) + var(--safe-right)) calc(var(--pad) + var(--safe-bottom)) var(--pad);justify-content:center;position:absolute;right:0;top:0}.title.leaving .panel{transform:translate(110%)}.car-item .name{font-size:24px}}.title{padding:0;display:flex;flex-direction:column;transition:opacity .6s ease}.title.leaving{opacity:0;pointer-events:none!important}.title .title-top{display:flex;justify-content:space-between;align-items:flex-start;padding:calc(var(--pad) + var(--safe-top)) calc(var(--pad) + var(--safe-right)) 0 calc(var(--pad) + var(--safe-left))}.title .opt{font-size:11px;padding:6px 0}.title .hero-zone{flex:1;position:relative;touch-action:none;cursor:grab;display:flex;flex-direction:column;justify-content:flex-end;padding:0 calc(var(--pad) + var(--safe-right)) 14px calc(var(--pad) + var(--safe-left))}.title.dragging .hero-zone{cursor:grabbing}.title .tagline{font-family:var(--font-serif);font-size:18px;line-height:1;letter-spacing:0;text-transform:uppercase;margin-top:6px}.title .hero-hint{position:absolute;right:calc(var(--pad) + var(--safe-right));bottom:14px;font-size:10px;color:var(--vpm-ground);opacity:.85;text-shadow:0 0 6px rgba(36,32,28,.5);animation:cta-pulse 3s ease-in-out infinite}.title .panel{background:var(--vpm-ground);border-top:1px solid var(--vpm-ink);padding:4px calc(var(--pad) + var(--safe-right)) calc(var(--pad) + var(--safe-bottom)) calc(var(--pad) + var(--safe-left));display:flex;flex-direction:column;gap:2px;transform:translateY(0);transition:transform .6s cubic-bezier(.4,0,.2,1)}.title.leaving .panel{transform:translateY(110%)}.car{border-bottom:1px solid var(--vpm-muted);padding:10px 0 8px}.car-head{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.1em;color:#34262199}.car-row{display:flex;align-items:center;justify-content:space-between;touch-action:pan-y;min-height:52px;margin-top:2px}.car-row .arrow{font-size:26px;line-height:1;padding:6px 12px;margin:0 -8px}.car-item{text-align:center;flex:1}.car-item .name{font-family:var(--font-serif);font-size:30px;line-height:1;letter-spacing:0}.car-item .sub{font-size:11px;margin-top:4px;color:var(--vpm-ink-2)}.car-row.swatches{justify-content:flex-start;gap:14px;min-height:44px}.swatch{width:26px;height:26px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px #24201c2e;position:relative;flex:none;transition:transform .25s ease}.swatch.on{transform:scale(1.12)}.swatch.on:after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--vpm-ink)}.sock-name{margin-left:auto;font-size:11px;color:var(--vpm-ink-2)}.title .cta{margin-top:12px;text-align:center;font-size:14px;letter-spacing:.12em;padding:14px 0}.options .rows{display:flex;flex-direction:column}.row-opt{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--vpm-muted);font-size:12px;letter-spacing:.06em}.row-opt:first-child{border-top:1px solid var(--vpm-muted)}.row-opt .label{color:#34262199}.row-opt .val{display:flex;align-items:center;gap:14px}.row-opt .value{min-width:9ch;text-align:center}.row-opt .arrow{font-size:20px;line-height:1;padding:0 8px;margin:-6px 0}.howto .steps{list-style:none;display:flex;flex-direction:column;gap:12px;font-size:12px;letter-spacing:.04em;line-height:1.45;color:var(--vpm-ink-2)}.howto .steps b{font-weight:400;color:#3426218c;margin-right:10px}.hud .brand .clock{font-family:var(--font-grotesk);font-size:12px;letter-spacing:.08em;margin-left:14px;vertical-align:2px;color:var(--vpm-ink-2)}#ui.setup-open .hud,#ui.setup-open .touch-marks,#ui.setup-open .hint{opacity:0;pointer-events:none!important}.hint{position:absolute;left:0;top:0;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--vpm-ink);opacity:0;transition:opacity .3s ease;will-change:transform}.hint.on{opacity:.55}.hint:after{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px solid var(--vpm-ink);opacity:.5}.hud .goal{position:absolute;left:0;right:0;bottom:calc(60px + var(--safe-bottom));text-align:center;font-size:10px;letter-spacing:.1em;color:#34262199;transition:opacity .4s ease}.hud .goal.done{color:var(--vpm-ink)}.summary .stats{display:flex;flex-direction:column}.summary .stat{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--vpm-muted)}.summary .stat:first-child{border-top:1px solid var(--vpm-muted)}.summary .k{font-size:11px;color:#34262199;letter-spacing:.08em}.summary .v{font-size:13px}.summary .v.serif{font-family:var(--font-serif);font-size:24px;letter-spacing:0}.summary .save{display:flex;flex-direction:column;gap:8px;margin-top:24px}.summary .field{display:flex;gap:12px;border-bottom:1px solid var(--vpm-ink)}.summary input{flex:1;border:0;background:transparent;padding:10px 0;font:inherit;font-size:16px;letter-spacing:.02em;text-transform:none;color:var(--vpm-ink);outline:none;pointer-events:auto;border-radius:0;-webkit-appearance:none}.summary input::placeholder{color:#34262166}.summary button{border:0;background:transparent;font:inherit;text-transform:uppercase;letter-spacing:.06em;font-size:12px;color:var(--vpm-ink);padding:0 4px;pointer-events:auto}.summary button:disabled{opacity:.4}.summary .note{font-size:11px;color:#34262199;min-height:14px}.summary .board{margin-top:24px;display:flex;flex-direction:column;gap:6px;font-size:11px}.summary .board .line{display:flex;justify-content:space-between;gap:12px;color:var(--vpm-ink-2)}