:root{--bg: #1b1e23;--panel: #23272e;--panel-2: #2b3038;--text: #e6e8eb;--muted: #9aa3ad;--accent: #4c8bf5;--border: #363b44}*{box-sizing:border-box}html,body{margin:0;height:100%}body{font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:var(--text);background:var(--bg)}#app{display:flex;height:100vh}#controls{width:360px;flex:0 0 320px;background:var(--panel);border-right:1px solid var(--border);overflow-y:auto;padding:16px 18px 32px}.panel-header{display:flex;align-items:stretch;justify-content:space-between;gap:10px}.panel-title{min-width:0}.panel-header h1{margin:0;font-size:22px;letter-spacing:.5px}.panel-header p{margin:2px 0 8px;color:var(--muted);font-size:13px}.panel-title a{color:var(--accent);text-decoration:none}.panel-title a:hover{text-decoration:underline}.header-reset{flex:0 0 auto;align-self:stretch;white-space:nowrap}#controls h2{font-size:12px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin:20px 0 8px;border-bottom:1px solid var(--border);padding-bottom:4px}#controls h2.section-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.section-reset{background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px;line-height:1;padding:0 4px;border-radius:4px}.section-reset:hover{color:var(--text);background:var(--panel-2)}.field{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}.field.inline{flex-direction:row;align-items:center;gap:8px}.field[hidden]{display:none}.field-label{font-size:13px;color:var(--text)}.field-info{flex-direction:row;justify-content:space-between;align-items:baseline;margin:-2px 0 10px;padding:5px 9px;background:var(--panel-2);border-radius:6px}.field-info .field-label{font-size:12px;color:var(--muted)}.info-val{font-size:12px;font-variant-numeric:tabular-nums}.field-action{flex-direction:row;align-items:center;gap:8px;flex-wrap:wrap}.field-action .btn.small{flex:0 0 auto}.field-note{flex-basis:100%;font-size:11px;color:var(--muted)}.field-row{display:flex;gap:14px;align-items:stretch}.field-row>.field{flex:1 1 0;min-width:0}.field-row>.field-corners{flex:0 0 auto}.field-row>.field input,.field-row>.field select,.field-row>.field-corners .corner-grid{margin-top:auto}.corner-grid{display:grid;grid-template-columns:22px 22px;grid-template-rows:22px 22px;gap:3px;width:max-content}.corner-cell{width:22px;height:22px;padding:0;background:#2a2f37;border:1px solid var(--border);cursor:pointer}.corner-cell.active{background:var(--accent);border-color:var(--accent)}.corner-tl.active{border-top-left-radius:10px}.corner-tr.active{border-top-right-radius:10px}.corner-bl.active{border-bottom-left-radius:10px}.corner-br.active{border-bottom-right-radius:10px}.corner-cell:focus{outline:1px solid var(--accent)}.file-name{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.field input,.field select{background:var(--panel-2);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:7px 9px;font-size:13px}.field.inline input[type=checkbox]{width:16px;height:16px}.field input:focus,.field select:focus{outline:1px solid var(--accent)}.field input:disabled,.field select:disabled{opacity:.4;cursor:not-allowed}.readouts{margin-top:18px;background:var(--panel-2);border:1px solid var(--border);border-radius:8px;padding:10px 12px}.readout-row{display:flex;justify-content:space-between;font-size:13px;padding:3px 0}.readout-row span:first-child{color:var(--muted)}.readout-val{font-variant-numeric:tabular-nums}.readout-val.warn{color:#f0b24b}.downloads{display:flex;gap:8px;margin-top:16px}.btn{flex:1;padding:10px;border-radius:8px;border:1px solid var(--border);background:var(--panel-2);color:var(--text);font-size:13px;font-weight:600;cursor:pointer}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn.small{padding:7px;font-size:12px;font-weight:500;color:var(--muted)}.btn:hover{filter:brightness(1.1)}.settings-row{margin-top:8px}#viewport{position:relative;flex:1}#three-canvas{display:block;width:100%;height:100%}.hints{position:absolute;top:12px;left:50%;transform:translate(-50%);display:flex;gap:16px;padding:6px 14px;background:#14171cb3;border:1px solid var(--border);border-radius:20px;font-size:12px;color:var(--muted);z-index:9;pointer-events:none;white-space:nowrap}.hints b{color:var(--text);font-weight:600;margin-right:4px}.status{position:absolute;top:52px;left:50%;transform:translate(-50%);background:#0009;color:#fff;padding:6px 14px;border-radius:20px;font-size:13px;z-index:10}.status.error{background:#a4332a}.status.busy:after{content:" ⟳"}.buildsteps{position:absolute;top:16px;left:16px;width:240px;background:#14171ceb;border:1px solid var(--border);border-radius:10px;padding:12px 14px;z-index:11;box-shadow:0 6px 24px #00000059;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.buildsteps[hidden]{display:none}.buildsteps.error{border-color:#a4332a}.bs-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}.bs-title{font-size:13px;font-weight:600}.buildsteps.error .bs-title{color:#ff8a7e;font-weight:500}.bs-pct{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.bs-track{height:4px;background:#ffffff1a;border-radius:2px;overflow:hidden;margin-bottom:10px}.bs-bar{height:100%;width:0%;background:var(--accent);border-radius:2px;transition:width .12s linear}.buildsteps.indeterminate .bs-bar{width:35%;transition:none;animation:bs-sweep 1.1s ease-in-out infinite}@keyframes bs-sweep{0%{margin-left:-35%}to{margin-left:100%}}.bs-list{list-style:none;margin:0;padding:0}.bs-step{display:flex;align-items:center;gap:8px;font-size:12px;padding:3px 0;color:var(--muted)}.bs-icon{flex:0 0 14px;width:14px;height:14px;border-radius:50%;border:1.5px solid var(--border);position:relative;box-sizing:border-box}.bs-step.is-active{color:var(--text)}.bs-step.is-active .bs-icon{border-color:var(--accent);border-top-color:transparent;animation:bs-spin .7s linear infinite}.bs-step.is-done{color:var(--text)}.bs-step.is-done .bs-icon{border-color:#3ea36a;background:#3ea36a}.bs-step.is-done .bs-icon:after{content:"";position:absolute;left:4px;top:1px;width:3px;height:7px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}@keyframes bs-spin{to{transform:rotate(360deg)}}
