*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#050508;--panel-bg:#0c0e16f2;--panel-border:#4de3c81f;--teal:#4de3c8;--teal-dim:#4de3c88c;--teal-faint:#4de3c814;--violet:#82a0ff;--rose:#ff8fa0;--gold:#ffd97d;--text:#e8eaf6;--text-dim:#e8eaf673;--mono:"DM Mono", "Courier New", monospace;--serif:"Playfair Display", Georgia, serif;--panel-w:320px;--radius:6px}html,body{background:var(--bg);height:100%;color:var(--text);font-family:var(--mono);overflow:hidden}#app{width:100vw;height:100vh;display:flex}#canvas-area{background:var(--bg);flex-direction:column;flex:1;min-width:0;display:flex;position:relative}#canvas-header{border-bottom:1px solid var(--panel-border);flex-shrink:0;align-items:center;gap:20px;padding:14px 20px 10px;display:flex}.app-title{font-family:var(--serif);letter-spacing:.04em;color:var(--teal);font-size:1.25rem;font-style:italic;font-weight:500}.app-subtitle{font-family:var(--mono);color:var(--text-dim);letter-spacing:.12em;text-transform:uppercase;font-size:.65rem}#tabs{gap:2px;margin-left:auto;display:flex}.tab-btn{color:var(--text-dim);font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;border-radius:var(--radius);background:0 0;border:1px solid #0000;padding:5px 12px;font-size:.68rem;transition:all .18s}.tab-btn:hover{color:var(--text);border-color:var(--panel-border)}.tab-btn.active{color:var(--teal);border-color:var(--teal-dim);background:var(--teal-faint)}#canvas-wrapper{flex:1;justify-content:center;align-items:center;min-height:0;padding:12px;display:flex;position:relative}canvas{border-radius:4px;display:block;box-shadow:0 0 0 1px #4de3c814,0 4px 40px #000c}#canvas-toolbar{border-top:1px solid var(--panel-border);flex-wrap:wrap;flex-shrink:0;align-items:center;gap:10px;padding:8px 16px;display:flex}.toolbar-group{align-items:center;gap:6px;display:flex}.toolbar-label{color:var(--text-dim);letter-spacing:.08em;white-space:nowrap;font-size:.58rem}#panel{width:var(--panel-w);background:var(--panel-bg);border-left:1px solid var(--panel-border);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);flex-direction:column;flex-shrink:0;display:flex;overflow:hidden}#panel-scroll{scrollbar-width:thin;scrollbar-color:var(--panel-border) transparent;flex:1;padding:16px 14px 24px;overflow-y:auto}.section{margin-bottom:20px}.section-title{font-family:var(--serif);letter-spacing:.18em;text-transform:uppercase;color:var(--teal);border-bottom:1px solid var(--panel-border);margin-bottom:10px;padding-bottom:5px;font-size:.72rem}.ctrl-row{justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;display:flex}.ctrl-label{letter-spacing:.06em;color:var(--text-dim);white-space:nowrap;flex:1;font-size:.62rem}.ctrl-value{color:var(--teal);text-align:right;font-variant-numeric:tabular-nums;min-width:38px;font-size:.65rem}input[type=range]{appearance:none;cursor:pointer;background:#4de3c833;border-radius:1px;outline:none;flex:1;min-width:80px;height:2px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--teal);border:2px solid var(--bg);cursor:pointer;border-radius:50%;width:12px;height:12px;transition:transform .1s;box-shadow:0 0 6px #4de3c880}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.3)}select{border:1px solid var(--panel-border);color:var(--text);font-family:var(--mono);border-radius:var(--radius);cursor:pointer;background:#4de3c80f;outline:none;flex:1;padding:4px 8px;font-size:.62rem}select:focus{border-color:var(--teal-dim)}button{font-family:var(--mono);letter-spacing:.08em;cursor:pointer;border-radius:var(--radius);padding:5px 11px;font-size:.62rem;transition:all .15s}.btn-primary{background:var(--teal-faint);border:1px solid var(--teal-dim);color:var(--teal)}.btn-primary:hover{background:#4de3c826;box-shadow:0 0 12px #4de3c833}.btn-primary.active{background:var(--teal);color:var(--bg);border-color:var(--teal)}.btn-ghost{border:1px solid var(--panel-border);color:var(--text-dim);background:0 0}.btn-ghost:hover{color:var(--text);border-color:#e8eaf640}.btn-small{padding:4px 9px;font-size:.6rem}input[type=color]{-webkit-appearance:none;border:1px solid var(--panel-border);cursor:pointer;background:0 0;border-radius:3px;width:28px;height:20px;padding:1px}input[type=checkbox]{accent-color:var(--teal);cursor:pointer;width:13px;height:13px}#gear-info{border:1px solid var(--panel-border);border-radius:var(--radius);background:#4de3c80a;flex-direction:column;gap:6px;margin-bottom:10px;padding:8px 10px;display:flex}.ratio-display{font-size:1.4rem;font-family:var(--serif);color:var(--teal);text-align:center;letter-spacing:.05em}.ratio-label{color:var(--text-dim);text-align:center;letter-spacing:.1em;font-size:.58rem}#liss-grid{grid-template-columns:repeat(5,1fr);gap:4px;margin-top:8px;display:grid}.liss-thumb{aspect-ratio:1;border:1px solid var(--panel-border);cursor:pointer;background:#07090f;border-radius:3px;transition:border-color .15s;overflow:hidden}.liss-thumb:hover{border-color:var(--teal-dim)}.liss-thumb.active-thumb{border-color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal)}.liss-thumb canvas{width:100%;height:100%;box-shadow:none;border-radius:0;display:block}#rose-gallery{grid-template-columns:repeat(4,1fr);gap:4px;margin-top:8px;display:grid}.rose-thumb{aspect-ratio:1;border:1px solid var(--panel-border);cursor:pointer;background:#07090f;border-radius:3px;transition:border-color .15s;overflow:hidden}.rose-thumb:hover{border-color:var(--teal-dim)}.rose-thumb.active-thumb{border-color:var(--teal)}.rose-thumb canvas{width:100%;height:100%;box-shadow:none;border-radius:0;display:block}.ratio-pills{flex-wrap:wrap;gap:4px;margin-top:6px;display:flex}.ratio-pill{border:1px solid var(--panel-border);color:var(--text-dim);cursor:pointer;background:#ffffff05;border-radius:20px;padding:3px 8px;font-size:.58rem;transition:all .15s}.ratio-pill:hover{border-color:var(--violet);color:var(--violet)}.ratio-pill.active-pill{border-color:var(--violet);color:var(--violet);background:#82a0ff1f}#layer-list{flex-direction:column;gap:4px;display:flex}.layer-item{border-radius:var(--radius);color:var(--text-dim);cursor:pointer;border:1px solid #0000;align-items:center;gap:6px;padding:4px 6px;font-size:.6rem;transition:border-color .15s;display:flex}.layer-item:hover{border-color:var(--panel-border)}.layer-item.active-layer{border-color:var(--teal-dim);background:var(--teal-faint);color:var(--text)}.layer-swatch{border-radius:2px;flex-shrink:0;width:10px;height:10px}#progress-bar-wrap{background:#4de3c81a;flex-shrink:0;height:2px;position:relative}#progress-bar{background:linear-gradient(90deg, var(--teal), var(--violet));height:100%;box-shadow:0 0 8px var(--teal);transition:width 50ms linear}.divider{background:var(--panel-border);height:1px;margin:10px 0}#panel-scroll::-webkit-scrollbar{width:4px}#panel-scroll::-webkit-scrollbar-track{background:0 0}#panel-scroll::-webkit-scrollbar-thumb{background:var(--panel-border);border-radius:2px}