:root{--bg: #161311;--panel: #1f1b18;--panel-2: #26211d;--ink: #ece7df;--muted: #918a7d;--line: #37312b;--accent: #c9c2b6;--radius: 14px}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html{color-scheme:dark;background:var(--bg)}body{background:var(--bg);color:var(--ink);font-family:Space Grotesk,system-ui,sans-serif;padding:max(20px,env(safe-area-inset-top)) 18px calc(60px + env(safe-area-inset-bottom));max-width:640px;margin:0 auto;line-height:1.45}.mono{font-family:IBM Plex Mono,monospace}header{margin-bottom:26px}.wordmark{font-size:34px;font-weight:600;letter-spacing:-.02em}.wordmark span{color:var(--accent);transition:color .6s}.tagline{color:var(--muted);font-size:13px;margin-top:2px;letter-spacing:.04em}.drop{display:block;border:1.5px dashed var(--line);border-radius:var(--radius);background:var(--panel);padding:34px 20px;text-align:center;cursor:pointer;transition:border-color .3s}.drop:active,.drop.dragover{border-color:var(--accent)}.drop .big{font-size:17px;font-weight:500;margin-bottom:6px}.drop .small{color:var(--muted);font-size:13px}input[type=file]{display:none}.card{background:var(--panel);border-radius:var(--radius);margin-top:22px;overflow:hidden;border:1px solid var(--line);border-top:3px solid var(--accent)}.card img.photo{width:100%;display:block;max-height:340px;object-fit:cover}.card .body{padding:18px 16px 20px}.sec-label{font-family:IBM Plex Mono,monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:20px 0 10px}.sec-label:first-child{margin-top:0}.swatches{display:flex;border-radius:10px;overflow:hidden;height:64px}.swatches div{transition:flex .4s;cursor:pointer}.sw-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px}.sw-meta .chip{font-family:IBM Plex Mono,monospace;font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:6px;cursor:pointer}.chip .dot{width:10px;height:10px;border-radius:3px;display:inline-block}.merge-note{color:var(--muted);font-size:12px;margin-top:8px}.row2{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:start}@media (max-width: 420px){.row2{grid-template-columns:128px 1fr}}canvas.wheel{width:100%;height:auto;display:block}.stat{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}.stat:last-child{border-bottom:none}.stat b{font-family:IBM Plex Mono,monospace;font-weight:500;font-size:13px}.bar{height:10px;border-radius:5px;background:linear-gradient(90deg,#e0663f,#3f74e0);position:relative;margin:8px 0 4px}.bar .needle{position:absolute;top:-4px;width:2.5px;height:18px;background:var(--ink);border-radius:2px;transform:translate(-50%)}.bar-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);font-family:IBM Plex Mono,monospace}.harmony{font-size:20px;font-weight:600;letter-spacing:-.01em}.harmony-note{color:var(--muted);font-size:13px;margin-top:3px}.pairbox{margin-top:10px;display:flex;flex-direction:column;gap:4px}button.export{width:100%;margin-top:20px;padding:14px;border:none;border-radius:10px;background:var(--accent);color:#161311;font-family:Space Grotesk,sans-serif;font-size:15px;font-weight:600;cursor:pointer;transition:background .4s}button.export[disabled]{opacity:.55}.save-hint{color:var(--muted);font-size:12px;text-align:center;margin-top:10px}img.exported{width:100%;border-radius:10px;margin-top:14px;border:1px solid var(--line)}.card-actions{display:flex;gap:8px;margin-top:10px}.card-actions button{flex:1;height:36px;border-radius:8px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);font-family:IBM Plex Mono,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}.spin{color:var(--muted);font-size:13px;text-align:center;padding:30px 0}.err{color:var(--muted);font-size:13px;text-align:center;padding:24px 16px;line-height:1.6}.selector{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:12px}.sel{width:32px;height:32px;border-radius:9px;border:2px solid transparent;cursor:pointer;padding:0}.sel.on{border-color:var(--ink)}.comp-row{display:flex;align-items:flex-start;gap:8px;margin:8px 0;flex-wrap:wrap}.comp-row .lbl{width:96px;font-family:IBM Plex Mono,monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:12px}.comp-sq-wrap{display:flex;flex-direction:column;align-items:center;gap:3px;font-family:IBM Plex Mono,monospace;font-size:8.5px;color:var(--muted)}.comp-sq{width:36px;height:36px;border-radius:8px;display:block;border:1px solid rgba(255,255,255,.06)}.psize{display:flex;align-items:center;gap:8px;margin:14px 0 0;font-size:12px;color:var(--muted);font-family:IBM Plex Mono,monospace}.psize button{width:38px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--muted);font-family:IBM Plex Mono,monospace;font-size:12px;cursor:pointer}.psize button.on{border-color:var(--accent);color:var(--ink)}.reread{float:right;border:1px solid var(--line);background:none;color:var(--muted);border-radius:7px;padding:3px 9px;font-family:IBM Plex Mono,monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}.reread:active{border-color:var(--accent);color:var(--ink)}.reread[disabled]{opacity:.5}.chips{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);font-family:IBM Plex Mono,monospace;flex-wrap:wrap;text-transform:uppercase;letter-spacing:.06em}.chips button{height:30px;padding:0 10px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--muted);font-family:IBM Plex Mono,monospace;font-size:11px;cursor:pointer}.chips button.on{border-color:var(--accent);color:var(--ink)}.chips button[disabled]{opacity:.45;cursor:default}.gallery{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 8px;-webkit-overflow-scrolling:touch}.g-item{position:relative;flex:0 0 auto}.g-open{display:block;width:84px;height:84px;padding:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel);color:var(--muted);font-family:Space Grotesk,sans-serif;font-size:24px;cursor:pointer}.g-open img{width:100%;height:100%;object-fit:cover;display:block}.g-del{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);background:var(--panel-2);color:var(--muted);font-size:13px;line-height:1;cursor:pointer}.chip-body{display:flex;align-items:center;gap:6px}.chip-del{border:none;background:none;color:var(--muted);font-size:13px;line-height:1;padding:0 0 0 2px;cursor:pointer}.chip-del:active{color:var(--ink)}.copyable{cursor:pointer}.copyable.copied{color:var(--accent)}.gl-gm-ctl{display:flex;align-items:center;gap:10px;font-family:IBM Plex Mono,monospace;font-size:11px;color:var(--muted);margin:10px 0 2px;text-transform:uppercase;letter-spacing:.08em}.gl-gm-ctl input[type=range]{flex:1;accent-color:var(--accent);min-width:0}.gl-gm-lab{min-width:86px;text-align:right;color:var(--ink)}.gl-gm-strip{display:flex;height:46px;border-radius:9px;overflow:hidden;margin-top:4px}.gl-gm-strip div{flex:1}.gl-gm-hexes{display:flex;justify-content:space-between;font-family:IBM Plex Mono,monospace;font-size:8.5px;color:var(--muted);margin-top:4px;gap:2px}.gl-gm-note{color:var(--muted);font-size:12px;margin-top:6px}.gl-br-strip{display:flex;height:46px;border-radius:9px;overflow:hidden;margin-top:4px}.gl-br-strip div{flex:1;position:relative}.gl-br-strip div.synthetic:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,#16131147 0 3px,#16131100 3px 7px)}.gl-br-hexes{display:flex;justify-content:space-between;font-family:IBM Plex Mono,monospace;font-size:8.5px;color:var(--muted);margin-top:4px;gap:2px}.gl-br-note{color:var(--muted);font-size:12px;margin-top:6px}.gl-arr-strip{display:flex;height:46px;border-radius:9px;overflow:hidden;margin-top:4px}.gl-arr-labels{display:flex;justify-content:space-between;font-family:IBM Plex Mono,monospace;font-size:8.5px;color:var(--muted);margin-top:4px;gap:2px}.gl-arr-labels span{text-align:center}.gl-arr-note{color:var(--muted);font-size:12px;margin-top:6px}.settings{margin-top:26px;padding-top:14px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;font-family:IBM Plex Mono,monospace;font-size:11px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}.settings label{display:flex;align-items:center;gap:7px;cursor:pointer}.settings input{accent-color:var(--accent)}