:root{color-scheme:dark;--bg:#121c21;--panel:#1c2b31;--border:#3d5257;--text:#eceeea;--muted:#aebebe;--gold:#d6b986;font:14px/1.5 Inter,system-ui,Arial,sans-serif}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text)}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.mast{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:15px 28px;background:#16262c;border-bottom:1px solid var(--border)}.brand{display:flex;align-items:center;gap:12px;font:23px Georgia,serif}.brand em{color:var(--gold);font-style:normal}.brand small{display:block;font:700 9px/2 system-ui;letter-spacing:1.8px;color:#abbbbb}.monogram{font:bold italic 32px Georgia,serif;background:var(--gold);color:#18282c;padding:4px 12px;border-radius:4px}.mast nav{display:flex;gap:19px;color:#e0cb9f;font-size:12px}.mast nav a:hover{text-decoration:underline}
.page{max-width:1660px;margin:auto;padding:29px 24px}.intro{max-width:790px;padding-bottom:24px}.eyebrow{font-size:10px;color:var(--gold);font-weight:800;letter-spacing:1.6px}.intro h1{font:normal clamp(35px,4vw,56px)/1.14 Georgia,serif;margin:12px 0}.intro h1 i{color:var(--gold);font-weight:normal}.intro p{font-size:13px;color:var(--muted);line-height:1.75}
.studio{display:grid;grid-template-columns:minmax(230px,268px) minmax(0,1fr) minmax(215px,257px);gap:12px;min-height:660px}.controls,.inventory,.visual{min-width:0;border:1px solid var(--border);background:var(--panel);border-radius:8px}.panel{padding:18px;border-bottom:1px solid var(--border)}.panel:last-child{border:0}.panel h2,.inventory h2,.preview-bar h2{font:24px Georgia,serif;margin:9px 0 16px}.hint{font-size:11px;color:#a4b6b6;line-height:1.65}.file-drop{background:#263940;border:1px dashed #8d9c9e;border-radius:7px;padding:20px 10px;text-align:center;cursor:pointer;display:flex;flex-direction:column;gap:8px}.file-drop:hover{border-color:var(--gold)}.file-drop strong{color:#f2dfb7}.file-drop span{font-size:10px;color:var(--muted)}#svg-file{position:absolute;width:1px;height:1px;clip-path:inset(50%)}.sub-button{width:100%;background:#344343;border:1px solid #6f7665;color:#f0dcba;border-radius:5px;margin-top:10px;padding:10px;font-size:12px}.filename{font-size:11px;color:var(--gold);margin-top:10px;overflow-wrap:anywhere}.field{display:block;margin:17px 0;color:#bdcfc8;font-size:11px;font-weight:700}.field output{float:right;color:var(--gold)}.field input[type=range]{width:100%;display:block;accent-color:var(--gold);margin-top:11px}.field select{display:block;width:100%;margin-top:10px;background:#111e22;color:var(--text);padding:10px;border:1px solid var(--border);border-radius:5px}
.selected-details{font-size:12px;line-height:1.55;background:#17272c;border:1px solid var(--border);padding:12px;border-radius:5px;overflow-wrap:anywhere}.colour-row{display:flex;align-items:center;justify-content:space-between;margin-top:12px;font-size:12px;color:#bbcbcb}.colour-row input{width:55px;height:40px;background:none;border:none}
.visual{display:flex;flex-direction:column;overflow:hidden}.preview-bar{padding:16px 19px;display:flex;align-items:center;justify-content:space-between;gap:12px}.preview-bar h2{margin:6px 0 0}.toggle{background:#15242a;border-radius:6px;padding:3px;display:flex;gap:4px}.toggle button{background:none;border:none;border-radius:5px;color:#a9babc;padding:9px;font-size:11px}.toggle button.active{background:#3e5255;color:#ffe8b9}
.preview-scene{position:relative;flex:1;min-height:460px;background:radial-gradient(ellipse at 50% 25%,#335666 0%,#1e323b 64%,#13242d 100%);display:flex;align-items:center;justify-content:center;overflow:hidden}#glass-preview{height:100%;width:100%;min-height:410px;max-height:700px}#glass-3d{position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:none}#glass-preview[hidden],#glass-3d[hidden]{display:none}.preview-watermark{position:absolute;bottom:15px;left:15px;background:#14262ac9;border:1px solid #506b6d;color:#b4cbca;padding:8px;font-size:9px;letter-spacing:1px;pointer-events:none;border-radius:4px}
.glass-piece{cursor:pointer;stroke:#41494a;stroke-linejoin:round}.glass-piece:hover,.glass-piece.selected{stroke:#ffe8b6;filter:brightness(1.3)}.stone-frame{fill:#a59b88;stroke:#777363;stroke-width:.014}.lead-seam{stroke:#464148;stroke-linecap:round;pointer-events:none}.solder-node{fill:#aea19b;pointer-events:none}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--border)}.metrics>div{padding:15px 6px;text-align:center;border-right:1px solid var(--border)}.metrics>div:last-child{border:0}.metrics strong{font:27px Georgia,serif;color:#efce96;display:block}.metrics span{font-size:10px;color:#aabdbb}.diagnostics{border-top:1px solid var(--border);padding:14px 17px;color:#b8ceca;font-size:11px;line-height:1.6}.diagnostics.error{background:#42292a;color:#ffe0dc}.diagnostics.warning{color:#eed3a2}
.inventory{padding:20px 15px;display:flex;flex-direction:column}.truth{align-self:flex-start;font-size:10px;border:1px solid #84815c;color:#e3d5aa;border-radius:3px;padding:7px 10px;letter-spacing:.7px}.piece-inventory{flex:1;max-height:450px;overflow:auto;min-height:80px;margin:15px 0}.piece-row{display:flex;align-items:center;gap:8px;padding:9px 7px;margin-bottom:5px;width:100%;background:#182a2f;border:1px solid #3d5051;border-radius:5px;color:var(--text);text-align:left}.piece-row:hover,.piece-row.selected{border-color:#d5b67a}.piece-row .swatch{display:block;flex:none;width:19px;height:19px;border:1px solid #eee9d9;border-radius:3px}.piece-row strong{display:block;font-size:11px}.piece-row small{display:block;font-size:9px;color:#9cafad}.piece-row .piece-size{margin-left:auto;font-size:10px;color:var(--gold);white-space:nowrap}.export-actions{display:grid;gap:7px;border-top:1px solid var(--border);padding-top:13px}.export-actions button{background:#473b2c;color:#f1d6a7;border:1px solid #857052;border-radius:5px;padding:10px;font-size:11px}.export-actions button:hover{background:#5b4934}.export-actions button:disabled{opacity:.4;cursor:not-allowed}footer{padding:25px 0;color:#9daeb0;font-size:10px}
@media(max-width:1120px){.studio{grid-template-columns:240px minmax(0,1fr)}.inventory{grid-column:1/-1}.piece-inventory{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;max-height:260px}.piece-row{margin:0}.export-actions{grid-template-columns:repeat(3,1fr)}}@media(max-width:700px){.mast{padding:10px}.mast nav{font-size:10px}.mast nav a:last-child{display:none}.brand{font-size:18px}.page{padding:20px 9px}.studio{display:flex;flex-direction:column}.controls{display:grid;grid-template-columns:1fr 1fr}.panel{padding:13px}.panel:last-child{grid-column:1/-1;border-top:1px solid var(--border)}.preview-bar{padding:13px}.preview-bar h2{font-size:19px}.piece-inventory{grid-template-columns:repeat(2,1fr)}.metrics strong{font-size:20px}.metrics span{font-size:9px}}@media(max-width:420px){.controls{display:flex}.metrics{grid-template-columns:1fr 1fr}.export-actions{display:grid;grid-template-columns:1fr}.piece-inventory{grid-template-columns:1fr 1fr}}