:root{--bg: #f6f5f1;--panel: #ffffff;--ink: #1f2430;--muted: #6b7280;--line: #e4e2db;--accent: #2563eb;font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink)}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg)}body{display:grid;grid-template-columns:320px 1fr;height:100vh}#panel{background:var(--panel);border-right:1px solid var(--line);overflow-y:auto;padding:20px 18px 40px}#panel{display:flex;flex-direction:column}#controls{flex:1}#about{margin-top:28px;padding-top:12px;border-top:1px solid var(--line);font-size:11px;color:var(--muted);line-height:1.6}#about a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}#about a:hover{color:var(--accent);border-color:var(--accent)}#panel header h1{font-size:20px;margin:0 0 4px}#panel header p{margin:0 0 18px;font-size:12px;color:var(--muted);line-height:1.4}fieldset{border:none;border-top:1px solid var(--line);margin:0;padding:12px 0 8px}legend{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:0 0 6px}.control{display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:center;margin:6px 0;font-size:13px}.control label{grid-column:1}.control .value{grid-column:2;font-variant-numeric:tabular-nums;color:var(--muted);font-size:12px;min-width:60px;text-align:right}.control input[type=range]{grid-column:1 / span 2;width:100%;accent-color:var(--accent)}.control select,.control input[type=color],.control input[type=checkbox]{grid-column:2}.control select{font:inherit;font-size:12px;padding:2px 4px}.control input[type=color]{width:48px;height:24px;padding:0;border:1px solid var(--line);background:none}.control .hint{grid-column:1 / span 2;font-size:11px;color:var(--muted);margin-top:-2px}.presets{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}.presets button{font:inherit;font-size:12px;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:var(--bg);cursor:pointer}.presets button:hover{border-color:var(--accent);color:var(--accent)}#stage{display:grid;grid-template-rows:1fr auto;min-width:0;height:100vh}#viewport{position:relative;min-height:0;overflow:hidden}#viewport canvas{display:block;width:100%!important;height:100%!important}#specs{border-top:1px solid var(--line);background:var(--panel);padding:14px 20px 18px;max-height:38vh;overflow:auto;font-size:13px}#specs h2{font-size:12px;margin:0 0 10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.totals{display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:12px}.totals div{display:flex;flex-direction:column}.totals b{font-size:16px;font-variant-numeric:tabular-nums}.totals span{font-size:11px;color:var(--muted)}table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}th,td{text-align:right;padding:4px 8px;border-bottom:1px solid var(--line);white-space:nowrap}th:first-child,td:first-child{text-align:left}th{font-size:11px;color:var(--muted);font-weight:600}td .swatch{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:middle}@media(max-width:800px){body{grid-template-columns:1fr;grid-template-rows:auto 1fr;height:auto}#panel{border-right:none;border-bottom:1px solid var(--line);max-height:45vh}#stage{height:auto;min-height:100vh}#viewport{height:55vh}}