:root{--bg: #05060d;--panel: rgba(14, 18, 30, .82);--border: #2a3350;--text: #e6e9f2;--muted: #8a93ac;--accent: #7aa2ff;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;color-scheme:dark;color:var(--text);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html,body,#root{margin:0;padding:0;width:100%;height:100%;background:var(--bg);overflow:hidden}button{border-radius:8px;border:1px solid var(--border);padding:.45em .9em;font-size:.9em;font-family:inherit;background-color:#141826;color:var(--text);cursor:pointer;transition:border-color .2s,background .2s}button:hover{border-color:var(--accent)}.panel{background:var(--panel);border:1px solid var(--border);border-radius:10px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}input[type=range]{width:100%;accent-color:var(--accent)}.app{position:fixed;inset:0}.nav{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;gap:18px;padding:12px 20px;background:linear-gradient(180deg,#05060de6,#05060d00);pointer-events:none}.nav .brand{font-weight:700;letter-spacing:.3px;pointer-events:auto}.nav .brand .sub{color:var(--muted);font-weight:400;font-size:.78rem}.nav .tabs{display:flex;gap:8px;pointer-events:auto}.nav .tab{background:transparent;border:1px solid transparent;color:var(--muted);padding:6px 14px;border-radius:999px;font-size:.9rem}.nav .tab.active{color:var(--text);border-color:var(--border);background:var(--panel)}.card{position:absolute;z-index:15;padding:14px 16px;max-width:320px}.card h3{margin:0 0 8px;font-size:.95rem}.card .row{display:flex;justify-content:space-between;gap:12px;font-size:.82rem}.card label{display:block;font-size:.78rem;color:var(--muted);margin:10px 0 2px}.controls{top:64px;left:20px;width:280px}.legend{bottom:20px;left:20px}.readout{top:64px;right:20px;text-align:right}.muted{color:var(--muted)}.loading{position:absolute;top:18px;left:50%;transform:translate(-50%);z-index:25;color:var(--muted);font-size:.85rem}.clist{bottom:20px;right:20px;max-height:46vh;overflow-y:auto;width:270px}.clist .item{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:.84rem}.clist .item:hover{background:#ffffff0d}.clist .swatch{width:11px;height:11px;border-radius:3px;flex:none}canvas.hr{display:block;border-radius:8px;max-width:100%;height:auto}