:root{--panel:#0b0b0b;--panel-deep:#000;--ink:#f4f1ec;--muted:#b9b3aa;--faint:#7f7970;--line:#ffffff1c;--line-strong:#ffffff38;--surface:#ffffff0a;--surface-hover:#ffffff14;--accent:#f08a4b;--accent-soft:#f08a4b24;--accent-ink:#120c08;--glass:#0b0b0bdb;--glass-ink:#f4f1ec;--radius:8px;--display:"Bricolage Grotesque", "Avenir Next Condensed", "Helvetica Neue", sans-serif;--ui:"IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;font-family:var(--ui);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;background:#dfe6ea;font-size:15px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,input:focus-visible+.switch,.range input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.app{height:100dvh;position:relative;overflow:hidden}.viewport{position:absolute;inset:0}.brand,.spec-chip,.toolbar{z-index:2;color:var(--glass-ink);background:var(--glass);border:1px solid #ffffff1a;border-radius:10px;position:absolute}.brand{align-items:center;gap:12px;padding:9px 18px 9px 12px;display:flex;top:20px;left:20px}.brand div{flex-direction:column;gap:2px;line-height:1.1;display:flex}.brand strong{font-family:var(--display);letter-spacing:-.01em;font-variation-settings:"opsz" 24;font-size:18px;font-weight:600}.brand span{color:var(--muted);font-size:12px;font-weight:500}.spec-chip{font-variant-numeric:tabular-nums;align-items:center;gap:10px;padding:7px 14px;font-size:13px;font-weight:500;display:flex;top:78px;left:20px}.spec-chip .dot{background:var(--accent);border-radius:50%;width:4px;height:4px}.toolbar{gap:2px;padding:4px;display:flex;bottom:20px;left:20px}.toolbar button{background:0 0;border:0;border-radius:6px;align-items:center;gap:8px;padding:8px 14px 8px 11px;font-size:13.5px;font-weight:500;transition:background .15s,color .15s;display:flex}.toolbar button:hover{background:var(--surface-hover)}.toolbar button.on{background:var(--ink);color:#000}.panel{z-index:3;background:var(--panel);border:1px solid #ffffff14;border-radius:16px;flex-direction:column;width:424px;display:flex;position:absolute;top:16px;bottom:16px;right:16px;overflow:hidden}.steps{border-bottom:1px solid var(--line);grid-template-columns:repeat(6,minmax(0,1fr));padding:20px 18px 16px;display:grid;position:relative}.step{color:var(--faint);background:0 0;border:0;flex-direction:column;align-items:center;gap:8px;padding:0;display:flex;position:relative}.step:not(:last-child):after{content:"";background:var(--line);height:1px;position:absolute;top:14px;left:calc(50% + 18px);right:calc(18px - 50%)}.step.done:not(:last-child):after{background:var(--accent)}.step-num{border:1px solid var(--line-strong);font-variant-numeric:tabular-nums;border-radius:50%;place-items:center;width:28px;height:28px;font-size:13px;font-weight:600;transition:border-color .2s,background .2s,color .2s;display:grid}.step-num svg{width:14px;height:14px}.step-name{letter-spacing:.01em;font-size:12.5px;font-weight:500}.step:hover,.step.done{color:var(--muted)}.step.done .step-num{border-color:var(--accent);color:var(--accent)}.step.on{color:var(--ink)}.step.on .step-num{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}.panel-body{scrollbar-width:thin;scrollbar-color:#ffffff2e transparent;flex:1;padding:24px 24px 28px;animation:.35s cubic-bezier(.2,.7,.2,1) step-in;overflow-y:auto}@keyframes step-in{0%{opacity:0;transform:translateY(8px)}}.eyebrow{color:var(--accent);margin:0;font-size:12.5px;font-weight:500}.step-header{margin-bottom:22px}.step-header h2{font-family:var(--display);letter-spacing:-.015em;font-variation-settings:"opsz" 96, "wdth" 96;margin:6px 0 8px;font-size:30px;font-weight:500;line-height:1.08}.lead{color:var(--muted);margin:0;font-size:15px;line-height:1.5}.group{margin-top:26px}.group-head,.dimension-head{justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px;display:flex}.group-label{letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-size:12.5px;font-weight:500}.group-value{font-size:13.5px;font-weight:500}.cards{grid-template-columns:repeat(var(--cols), minmax(0, 1fr));gap:8px;display:grid}.card{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);text-align:left;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;padding:14px 12px 12px;transition:border-color .15s,background .15s;display:flex;position:relative}.card:hover{border-color:var(--line-strong);background:var(--surface-hover)}.card.on{border-color:var(--accent);background:var(--accent-soft)}.card.on:after{content:"";background:var(--accent);border-radius:50%;width:8px;height:8px;position:absolute;top:10px;right:10px}.card-icon{width:48px;height:32px;color:var(--muted);margin-bottom:8px;transition:color .15s;display:block}.card.on .card-icon,.toggle-card.on .card-icon{color:var(--ink)}.card-label{font-size:15px;font-weight:500;line-height:1.3}.card-hint{color:var(--muted);font-size:13px;line-height:1.4}.delta{font-variant-numeric:tabular-nums;color:var(--faint);margin-top:4px;font-size:12.5px;font-weight:500}.delta.up{color:var(--accent)}.delta.down{color:#9ccf95}.swatches{grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:12px 6px;display:grid}.swatch{text-align:center;background:0 0;border:0;flex-direction:column;align-items:center;gap:8px;padding:0;display:flex}.swatch-disc{outline-offset:4px;background-position:50%;background-size:240%;border:1px solid #ffffff2e;border-radius:50%;outline:1.5px solid #0000;width:56px;height:56px;transition:outline-color .15s,transform .2s}.swatch:hover .swatch-disc{transform:translateY(-2px)}.swatch.on .swatch-disc{outline-color:var(--accent)}.swatch-label{color:var(--muted);font-size:13px;font-weight:500;line-height:1.25}.swatch.on .swatch-label{color:var(--ink)}.swatch .delta{margin-top:-3px}.dimension+.dimension{margin-top:26px}.dimension-value{font-family:var(--display);letter-spacing:-.01em;font-variant-numeric:tabular-nums;font-variation-settings:"opsz" 60;font-size:32px;font-weight:500;line-height:1}.dimension-value small{font-family:var(--ui);color:var(--muted);margin-left:4px;font-size:13.5px;font-weight:500}.range{height:28px;position:relative}.range:before{content:"";background:repeating-linear-gradient(to right, #ffffff38 0 1px, transparent 1px calc((100% - 1px) / var(--ticks)));height:10px;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);-webkit-mask:linear-gradient(#0000 0 30%,#000 30% 70%,#0000 70%);mask:linear-gradient(#0000 0 30%,#000 30% 70%,#0000 70%)}.range:after{content:"";width:var(--pct);background:var(--accent);height:2px;position:absolute;top:50%;left:0;transform:translateY(-50%)}.range input{z-index:1;appearance:none;cursor:pointer;background:0 0;width:100%;height:100%;margin:0;position:relative}.range input::-webkit-slider-runnable-track{background:#ffffff24;height:2px}.range input::-moz-range-track{background:#ffffff24;height:2px}.range input::-webkit-slider-thumb{appearance:none;background:var(--panel);border:2px solid var(--accent);border-radius:50%;width:22px;height:22px;margin-top:-10px;transition:transform .15s,background .15s}.range input:active::-webkit-slider-thumb{background:var(--accent);transform:scale(1.12)}.range input::-moz-range-thumb{background:var(--panel);border:2px solid var(--accent);border-radius:50%;width:18px;height:18px}.range-scale{color:var(--faint);font-variant-numeric:tabular-nums;justify-content:space-between;margin-top:4px;font-size:12px;font-weight:500;display:flex}.stats{grid-template-columns:1fr 1fr;gap:8px;margin-top:28px;display:grid}.stats div{border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);flex-direction:column;gap:4px;padding:14px;display:flex}.stats strong{font-family:var(--display);font-variation-settings:"opsz" 60;font-size:28px;font-weight:500;line-height:1}.stats small{font-family:var(--ui);color:var(--muted);font-size:13.5px;font-weight:500}.stats span{color:var(--muted);font-size:13px}.toggles{gap:8px;display:grid}.toggle-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);cursor:pointer;grid-template-columns:48px 1fr auto auto;align-items:center;gap:12px;padding:12px 14px;transition:border-color .15s,background .15s;display:grid}.toggle-card:hover{border-color:var(--line-strong);background:var(--surface-hover)}.toggle-card.on{border-color:var(--accent)}.toggle-card .card-icon{margin:0}.toggle-text{flex-direction:column;gap:2px;min-width:0;display:flex}.toggle-card .delta{margin:0}.toggle-card input{opacity:0;pointer-events:none;position:absolute}.switch{background:#ffffff29;border-radius:999px;width:38px;height:22px;transition:background .2s;position:relative}.switch:after{content:"";background:var(--ink);border-radius:50%;width:16px;height:16px;transition:transform .2s;position:absolute;top:3px;left:3px}.toggle-card input:checked+.switch{background:var(--accent)}.toggle-card input:checked+.switch:after{background:var(--accent-ink);transform:translate(16px)}.spec{border-top:1px solid var(--line);margin:0}.spec div{border-bottom:1px solid var(--line);grid-template-columns:108px 1fr auto;align-items:baseline;gap:12px;padding:11px 0;display:grid}.spec dt{letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-size:12.5px;font-weight:500}.spec dd{margin:0;font-size:14.5px;font-weight:500}.spec button{color:var(--accent);background:0 0;border:0;padding:0;font-size:13px;font-weight:500}.spec button:hover{text-decoration:underline}.breakdown{margin-top:18px}.breakdown summary{color:var(--muted);cursor:pointer;font-size:13.5px;font-weight:500}.breakdown ul{margin:10px 0 0;padding:0;font-size:13.5px;list-style:none}.breakdown li{color:var(--muted);justify-content:space-between;gap:12px;padding:6px 0;display:flex}.breakdown li span:last-child{color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}.note{color:var(--muted);margin:12px 0 0;font-size:13.5px;line-height:1.5}.contact{border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);color:var(--muted);flex-direction:column;gap:3px;margin-top:18px;padding:14px;font-size:13.5px;font-style:normal;display:flex}.contact strong{font-family:var(--display);color:var(--ink);font-size:18px;font-weight:600}.contact a{color:var(--accent);text-decoration:none}.contact a:hover{text-decoration:underline}.panel-footer{border-top:1px solid var(--line);background:var(--panel-deep);grid-template-columns:1fr auto;align-items:end;gap:14px;padding:18px 24px 22px;display:grid}.total{flex-direction:column;gap:2px;min-width:0;display:flex}.total strong{font-family:var(--display);letter-spacing:-.015em;font-variant-numeric:tabular-nums;font-variation-settings:"opsz" 60;white-space:nowrap;font-size:30px;font-weight:600;line-height:1.05}.total-meta{color:var(--muted);font-size:13px}.final-actions{grid-area:2/1/auto/-1;grid-template-columns:1fr 1fr;gap:8px;display:grid}.final-actions .btn.primary{grid-column:1/-1;text-decoration:none}.nav-buttons{gap:8px;display:flex}.btn{border-radius:var(--radius);white-space:nowrap;border:1px solid #0000;justify-content:center;align-items:center;gap:8px;height:46px;padding:0 18px;font-size:14.5px;font-weight:500;transition:background .15s,border-color .15s,transform .1s;display:inline-flex}.btn:active{transform:scale(.98)}.btn.primary{background:var(--accent);color:var(--accent-ink);font-weight:600}.btn.primary:hover{background:#f79a60}.btn.ghost{border-color:var(--line-strong);background:0 0}.btn.ghost:hover{background:var(--surface-hover)}.btn.icon-only{width:46px;padding:0}.btn:disabled{opacity:.6;cursor:progress}@media (width<=900px){.app{flex-direction:column;display:flex}.viewport{flex:none;height:44dvh;position:relative}.brand{padding:6px 14px 6px 8px;top:12px;left:12px}.spec-chip{display:none}.toolbar{inset:12px 12px auto auto}.toolbar button span{display:none}.toolbar button{padding:8px}.panel{border-bottom:0;border-radius:16px 16px 0 0;flex:1;width:auto;min-height:0;margin-top:-16px;position:relative;inset:auto}.steps{padding:16px 10px 12px}.panel-body{padding:20px 16px 24px}.step-header h2{font-size:26px}.panel-footer{padding:14px 16px 16px}.total strong{font-size:26px}}.facts{color:var(--muted);gap:10px;margin:20px 0 0;padding:0;font-size:14px;line-height:1.45;list-style:none;display:grid}.facts li{grid-template-columns:14px 1fr;gap:10px;display:grid}.facts li:before{content:"";border:1.5px solid var(--accent);border-radius:50%;width:6px;height:6px;margin-top:7px}@media (width<=520px){.brand span{display:none}.step-name{visibility:hidden}.step.on .step-name{visibility:visible}}.app:fullscreen{background:#dfe6ea}.perf{z-index:4;background:var(--glass);min-width:220px;color:var(--glass-ink);font-variant-numeric:tabular-nums;pointer-events:none;border:1px solid #ffffff1a;border-radius:10px;gap:3px;padding:10px 12px;font-size:12px;display:grid;position:absolute;top:20px;right:456px}.perf div{justify-content:space-between;gap:16px;display:flex}.perf span{color:var(--muted)}.perf strong{font-weight:600}.perf strong[data-level=ok]{color:#9ccf95}.perf strong[data-level=warn]{color:#f0c24b}.perf strong[data-level=bad]{color:#f07a5b}@media (width<=900px){.perf{top:64px;left:12px;right:auto}}.render-status{z-index:2;background:var(--glass);min-width:300px;color:var(--glass-ink);border:1px solid #ffffff1a;border-radius:10px;align-items:center;gap:14px;padding:10px 10px 12px 14px;display:flex;position:absolute;bottom:76px;left:20px;overflow:hidden}.render-text{flex-direction:column;flex:1;gap:2px;font-size:13px;display:flex}.render-text strong{font-weight:600}.render-text span{color:var(--muted);font-variant-numeric:tabular-nums}.render-status button{border:1px solid var(--line-strong);background:0 0;border-radius:6px;align-items:center;gap:6px;padding:7px 12px 7px 10px;font-size:13px;font-weight:500;display:flex}.render-status button:hover{background:var(--surface-hover)}.render-status button:disabled{opacity:.5;cursor:default}.render-bar{background:var(--accent);transform-origin:0;height:2px;transition:transform .25s linear;position:absolute;bottom:0;left:0;right:0}@media (width<=900px){.render-status{min-width:0;inset:64px 12px auto}}.panel{transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s}.panel.hidden{opacity:0;pointer-events:none;transform:translate(calc(100% + 32px))}.panel-restore{z-index:3;background:var(--panel);border:1px solid #ffffff1a;border-radius:10px;align-items:center;gap:8px;padding:10px 16px 10px 12px;font-size:13.5px;font-weight:500;transition:background .15s;display:flex;position:absolute;top:20px;right:20px}.panel-restore:hover{background:var(--surface-hover)}@media (width<=900px){.panel.hidden{display:none}.app.panel-hidden .viewport{flex:1;height:auto}.panel-restore{top:auto;bottom:16px;right:12px}}