*{margin:0;padding:0;box-sizing:border-box}body{background:#0a0a1a;color:#c8d0e0;font-family:SF Mono,Fira Code,monospace;font-size:12px;overflow:hidden}#canvas-container{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0}#preset-bar{position:fixed;top:0;left:50%;transform:translate(-50%);z-index:25;display:flex;gap:2px;padding:6px 12px;background:#0a0a1eb3;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:0 0 8px 8px;border:1px solid rgba(100,120,200,.15);border-top:none}.preset-btn{background:#28285080;border:1px solid rgba(100,120,200,.2);color:#8890a8;padding:4px 10px;border-radius:3px;cursor:pointer;font-family:inherit;font-size:11px;transition:all .15s}.preset-btn:hover{background:#3c3c7899;color:#b0b8d0}.preset-btn.active{background:#503ca080;color:#d0d8f0;border-color:#8c78dc66}#panel-toggle,#debug-panel-toggle{position:fixed;z-index:30;background:#0a0a1eb3;border:1px solid rgba(100,120,200,.2);color:#8890a8;width:24px;height:32px;cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;transition:all .2s;padding:0}#panel-toggle:hover,#debug-panel-toggle:hover{color:#d0d8f0;background:#1e1e3ccc}#panel-toggle{top:50%;right:0;border-radius:4px 0 0 4px;border-right:none}#panel-toggle.open{right:340px}#debug-panel-toggle{top:50%;left:0;border-radius:0 4px 4px 0;border-left:none}#cuttlefish-link{position:fixed;right:12px;bottom:10px;z-index:25;color:#9bd;background:#0000007a;border:1px solid rgba(130,170,210,.35);padding:6px 9px;border-radius:4px;text-decoration:none;font:12px/1.1 ui-monospace,monospace}#cuttlefish-link:hover{color:#dff;border-color:#aadcffa6}#ui-root{position:fixed;top:0;right:0;width:340px;height:100vh;z-index:10;display:flex;flex-direction:column;background:#0a0a1ed9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-left:1px solid rgba(100,120,200,.2);transition:transform .3s ease}#ui-root.collapsed{transform:translate(100%)}#designer-nav{display:flex;flex-wrap:wrap;gap:2px;padding:8px;border-bottom:1px solid rgba(100,120,200,.15)}.nav-btn{background:#28285099;border:1px solid rgba(100,120,200,.2);color:#8890a8;padding:4px 8px;border-radius:3px;cursor:pointer;font-family:inherit;font-size:11px;transition:all .15s}.nav-btn:hover{background:#3c3c7899;color:#b0b8d0}.nav-btn.active{background:#503ca080;color:#d0d8f0;border-color:#8c78dc66}#debug-toggle{margin-left:auto;color:#505870;cursor:pointer;font-size:10px;align-self:center;padding:4px}#debug-toggle:hover{color:#8890a8}#debug-toggle.active{color:#f0a050}#designer-panel{flex:1;overflow-y:auto;padding:12px}#designer-panel::-webkit-scrollbar{width:4px}#designer-panel::-webkit-scrollbar-thumb{background:#6478c84d;border-radius:2px}.designer-section{margin-bottom:16px}.designer-section h3{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#6070a0;margin-bottom:8px}.control-row{display:flex;align-items:center;margin-bottom:6px;gap:8px}.control-row label{width:80px;flex-shrink:0;color:#7880a0;font-size:11px}.control-row input[type=range]{flex:1;accent-color:#7060c0;height:3px}.control-row .value{width:36px;text-align:right;color:#9098b0;font-size:10px}.control-row input[type=color]{width:28px;height:20px;border:1px solid rgba(100,120,200,.3);background:none;cursor:pointer;border-radius:2px}.control-row select{flex:1;background:#1e1e3ccc;border:1px solid rgba(100,120,200,.25);color:#b0b8d0;padding:3px 6px;border-radius:3px;font-family:inherit;font-size:11px}.btn{background:#3c327880;border:1px solid rgba(120,100,200,.3);color:#b0b8d0;padding:6px 12px;border-radius:3px;cursor:pointer;font-family:inherit;font-size:11px;transition:all .15s}.btn:hover{background:#503ca080;color:#d0d8f0}.btn.primary{background:#503ca099;border-color:#8c78dc66}#variant-grid{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;background:#05050ff7;display:flex;flex-direction:column}#variant-grid.hidden{display:none!important}#variant-grid .grid-cells{flex:1;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:6px;padding:8px}.variant-cell{position:relative;background:#0f0f23cc;border:1px solid rgba(80,80,140,.2);border-radius:4px;cursor:pointer;overflow:hidden}.variant-cell:hover{border-color:#8c78dc80}.variant-cell.selected{border-color:#7060c0;border-width:2px}.variant-cell canvas{width:100%;height:100%;display:block;object-fit:contain}.variant-label{position:absolute;top:4px;left:6px;font-size:11px;color:#b4b4dcb3;font-weight:700}#variant-grid .grid-header{height:42px;flex-shrink:0;background:#0a0a1ef2;display:flex;align-items:center;padding:0 16px;gap:12px;border-bottom:1px solid rgba(100,120,200,.2)}#variant-grid .grid-header span{color:#8890a8;font-size:12px}#debug-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:15;pointer-events:none;padding:12px;font-size:10px;line-height:1.5;color:#b4dca0cc}#debug-overlay.hidden{display:none}.debug-section{background:#00000080;border:1px solid rgba(100,200,100,.2);border-radius:4px;padding:6px 8px;margin-bottom:6px;max-width:320px}.debug-section h4{color:#8cc878e6;font-size:10px;margin-bottom:2px}.tag-list{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.tag{background:#3c327866;border:1px solid rgba(120,100,200,.25);color:#9098b8;padding:2px 6px;border-radius:10px;font-size:10px;cursor:pointer}.tag.active{background:#6450b480;color:#d0d8f0;border-color:#a08cf066}