:root{--gl-chassis: #ffffff;--gl-panel: #f4f1ec;--gl-line: #ddd9d3;--gl-frame: #ccc9c3;--gl-rule: #000000;--gl-card: #161311;--gl-bone: #e8e2d6;--gl-ink: #000000;--gl-ink-muted: #5c5853;--gl-ink-dim: #8a857d;--gl-disabled-bg: #e6e3dd;--gl-disabled-ink: #9a958e;--gl-scrim: rgba(0, 0, 0, .4);--gl-accent: #d76545;--gl-font-ui: "Space Grotesk", system-ui, sans-serif;--gl-font-mono: "IBM Plex Mono", ui-monospace, monospace;--gl-s1: 4px;--gl-s2: 8px;--gl-s3: 12px;--gl-s4: 16px;--gl-s5: 20px;--gl-s6: 24px;--gl-s8: 32px;--gl-s12: 48px;--gl-gutter: 20px;--gl-header-h: 52px;--gl-rail-h: 56px;--gl-r-chip: 0;--gl-r-control: 2px;--gl-r-window: 4px;--gl-r-sheet: 12px;--gl-ease: cubic-bezier(.2, .8, .2, 1);--gl-t-state: .16s;--gl-t-halo: .12s;--gl-t-rail: .24s;--gl-t-sheet-in: .28s;--gl-t-sheet-out: .2s}.gl-display{font:500 28px/32px var(--gl-font-ui);letter-spacing:-.01em;text-transform:lowercase}.gl-title{font:500 20px/24px var(--gl-font-ui);text-transform:lowercase}.gl-body{font:400 15px/22px var(--gl-font-ui)}.gl-body-sm{font:400 13px/19px var(--gl-font-ui)}.gl-button{font:500 17px/24px var(--gl-font-ui)}.gl-button-sm{font:500 14px/20px var(--gl-font-ui)}.gl-data{font:400 13px/18px var(--gl-font-mono);font-variant-numeric:tabular-nums}.gl-label{font:400 11px/14px var(--gl-font-mono);letter-spacing:.06em}.gl-rail{font:400 10px/12px var(--gl-font-mono);letter-spacing:.04em}.gl-micro{font:400 9px/12px var(--gl-font-mono)}.gl-endorse{font:400 11px/14px var(--gl-font-mono);letter-spacing:.08em}:root{--accent: var(--gl-accent)}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html{color-scheme:light;background:var(--gl-chassis)}body{background:var(--gl-chassis);color:var(--gl-ink);font-family:var(--gl-font-ui);padding:max(20px,env(safe-area-inset-top)) var(--gl-gutter) calc(60px + env(safe-area-inset-bottom));max-width:640px;margin:0 auto;line-height:1.45}.mono{font-family:var(--gl-font-mono)}header{margin-bottom:24px;padding-bottom:12px;border-bottom:1px solid var(--gl-line)}.wordmark{height:26px;display:block;color:var(--gl-ink)}.drop{display:flex;flex-direction:column;align-items:center;gap:16px;border:1px solid var(--gl-frame);border-radius:var(--gl-r-window);background:var(--gl-chassis);padding:32px 20px 24px;text-align:center;cursor:pointer}.drop.dragover{border-color:var(--gl-ink)}.drop-mark{width:84px;height:84px;color:var(--gl-ink)}.drop .promise{font:400 15px/22px var(--gl-font-ui);color:var(--gl-ink-muted);max-width:280px}.load-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:320px;height:52px;background:var(--gl-ink);color:var(--gl-chassis);border-radius:var(--gl-r-control);font:500 17px/24px var(--gl-font-ui);text-transform:lowercase}.load-glyph{width:11px;height:11px;background:var(--gl-chassis)}input[type=file]{display:none}.endorse{margin-top:20px;text-align:center;font:400 11px/14px var(--gl-font-mono);letter-spacing:.08em;color:var(--gl-ink-dim)}.endorse .tick{display:inline-block;width:5px;height:7px;background:currentColor;margin:0 3px}.card{background:var(--gl-chassis);border-radius:var(--gl-r-window);margin-top:20px;overflow:hidden;border:1px solid var(--gl-frame)}.photo-wrap{position:relative}.card img.photo{width:100%;display:block;max-height:340px;object-fit:cover}.photo-wrap.picking img.photo{cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none}.card .body{padding:16px 16px 20px}.sec-label{font:400 11px/14px var(--gl-font-mono);letter-spacing:.06em;text-transform:lowercase;color:var(--gl-ink);margin:22px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--gl-rule)}.sec-label:first-child{margin-top:0}.swatches{display:flex;overflow:hidden;height:64px;border:1px solid var(--gl-frame)}.swatches div{transition:flex .16s ease-out;cursor:pointer}.sw-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px}.sw-meta .chip{font:400 11px/14px var(--gl-font-mono);color:var(--gl-ink-muted);display:flex;align-items:center;gap:6px;cursor:pointer}.chip .dot{width:10px;height:10px;display:inline-block;border:1px solid var(--gl-frame)}.chip-body{display:flex;align-items:center;gap:6px}.chip-del{border:none;background:none;color:var(--gl-ink-dim);font-size:13px;line-height:1;padding:0 0 0 2px;cursor:pointer}.chip-del:active{color:var(--gl-ink)}.merge-note{color:var(--gl-ink-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}.harmony{font:500 20px/24px var(--gl-font-ui);text-transform:lowercase}.harmony-note{color:var(--gl-ink-muted);font-size:13px;margin-top:3px}.pairbox{margin-top:10px;display:flex;flex-direction:column;gap:4px}.stat{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--gl-line);font-size:14px}.stat:last-child{border-bottom:none}.stat b{font:500 13px var(--gl-font-mono)}.bar{height:10px;border-radius:0;background:linear-gradient(90deg,#e0663f,#3f74e0);position:relative;margin:8px 0 4px}.bar .needle{position:absolute;top:-4px;width:3px;height:18px;background:var(--gl-ink);transform:translate(-50%)}.bar-labels{display:flex;justify-content:space-between;font:400 11px var(--gl-font-mono);color:var(--gl-ink-muted)}button.export{width:100%;margin-top:20px;padding:15px;border:none;border-radius:var(--gl-r-control);background:var(--gl-ink);color:var(--gl-chassis);font:500 17px/24px var(--gl-font-ui);text-transform:lowercase;cursor:pointer}button.export[disabled]{background:var(--gl-disabled-bg);color:var(--gl-disabled-ink)}.json-export{width:100%;margin-top:8px;padding:11px;border:1px solid var(--gl-frame);border-radius:var(--gl-r-control);background:none;color:var(--gl-ink-muted);font:400 12px var(--gl-font-mono);letter-spacing:.06em;text-transform:lowercase;cursor:pointer}.json-export:active{border-color:var(--gl-ink);color:var(--gl-ink)}.gen-err{margin-top:8px}.save-hint{color:var(--gl-ink-muted);font-size:12px;text-align:center;margin-top:10px}img.exported{width:100%;border-radius:var(--gl-r-control);margin-top:14px;border:1px solid var(--gl-frame)}.card-actions{display:flex;gap:8px;margin-top:10px}.card-actions button{flex:1;height:44px;border-radius:var(--gl-r-control);border:1px solid var(--gl-frame);background:var(--gl-chassis);color:var(--gl-ink);font:400 12px var(--gl-font-mono);letter-spacing:.06em;text-transform:lowercase;cursor:pointer}.spin{color:var(--gl-ink-muted);font-size:13px;text-align:center;padding:30px 0}.err{color:var(--gl-ink-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:0;border:1px solid var(--gl-frame);cursor:pointer;padding:0}.sel.on{border-color:transparent;outline:1px solid var(--gl-accent);outline-offset:3px}.comp-row{display:flex;align-items:flex-start;gap:8px;margin:8px 0;flex-wrap:wrap}.comp-row .lbl{width:96px;font:400 10px var(--gl-font-mono);letter-spacing:.08em;text-transform:lowercase;color:var(--gl-ink-muted);padding-top:12px}.comp-sq-wrap{display:flex;flex-direction:column;align-items:center;gap:3px;font:400 9px var(--gl-font-mono);color:var(--gl-ink-muted)}.comp-sq{width:36px;height:36px;border-radius:0;display:block;border:1px solid var(--gl-frame);padding:0;cursor:pointer}.psize{display:flex;align-items:center;gap:8px;margin:14px 0 0;font:400 12px var(--gl-font-mono);color:var(--gl-ink-muted);text-transform:lowercase}.psize button{width:38px;height:32px;border-radius:var(--gl-r-control);border:1px solid var(--gl-frame);background:var(--gl-chassis);color:var(--gl-ink-muted);font:400 12px var(--gl-font-mono);cursor:pointer;transition:all .16s ease-out}.psize button.on{background:var(--gl-ink);border-color:var(--gl-ink);color:var(--gl-chassis)}.reread{float:right;border:1px solid var(--gl-frame);background:none;color:var(--gl-ink-muted);border-radius:var(--gl-r-control);padding:3px 9px;font:400 10px var(--gl-font-mono);letter-spacing:.1em;text-transform:lowercase;cursor:pointer}.reread:active{border-color:var(--gl-ink);color:var(--gl-ink)}.reread[disabled]{opacity:.5}.chips{display:flex;align-items:center;gap:8px;font:400 11px var(--gl-font-mono);color:var(--gl-ink-muted);flex-wrap:wrap;text-transform:lowercase;letter-spacing:.06em}.chips button{height:32px;padding:0 10px;border-radius:var(--gl-r-control);border:1px solid var(--gl-frame);background:var(--gl-chassis);color:var(--gl-ink-muted);font:400 11px var(--gl-font-mono);text-transform:lowercase;cursor:pointer;transition:all .16s ease-out}.chips button.on{background:var(--gl-ink);border-color:var(--gl-ink);color:var(--gl-chassis)}.chips button[disabled]{background:var(--gl-disabled-bg);border-color:var(--gl-disabled-bg);color:var(--gl-disabled-ink);cursor:default}.gl-gm-ctl{display:flex;align-items:center;gap:10px;font:400 11px var(--gl-font-mono);color:var(--gl-ink-muted);margin:10px 0 2px;text-transform:lowercase;letter-spacing:.08em}.gl-gm-ctl input[type=range]{flex:1;accent-color:var(--gl-ink);min-width:0}.gl-gm-lab{min-width:86px;text-align:right;color:var(--gl-ink)}.gl-gm-strip{display:flex;height:46px;overflow:hidden;margin-top:4px;border:1px solid var(--gl-frame)}.gl-gm-strip div{flex:1}.gl-gm-hexes{display:flex;justify-content:space-between;font:400 8.5px var(--gl-font-mono);color:var(--gl-ink-muted);margin-top:4px;gap:2px}.gl-gm-note{color:var(--gl-ink-muted);font-size:12px;margin-top:6px}.gl-br-strip{display:flex;height:46px;overflow:hidden;margin-top:4px;border:1px solid var(--gl-frame)}.gl-br-strip div{flex:1;position:relative}.gl-br-strip div.synthetic:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,#ffffff59 0 3px,#fff0 3px 7px)}.gl-br-hexes{display:flex;justify-content:space-between;font:400 8.5px var(--gl-font-mono);color:var(--gl-ink-muted);margin-top:4px;gap:2px}.gl-br-note{color:var(--gl-ink-muted);font-size:12px;margin-top:6px}.gl-arr-strip{display:flex;height:46px;overflow:hidden;margin-top:4px;border:1px solid var(--gl-frame)}.gl-arr-labels{display:flex;justify-content:space-between;font:400 8.5px var(--gl-font-mono);color:var(--gl-ink-muted);margin-top:4px;gap:2px}.gl-arr-labels span{text-align:center}.gl-arr-note{color:var(--gl-ink-muted);font-size:12px;margin-top:6px}.gl-sub{margin-top:14px;border:1px solid var(--gl-frame);border-left:3px solid var(--gl-ink);border-radius:var(--gl-r-control);background:var(--gl-panel);padding:12px 14px 14px}.gl-sub-head{display:flex;align-items:center;gap:9px}.gl-sub-swatch{width:26px;height:26px;border:1px solid var(--gl-frame)}.gl-sub-title{font:400 13px var(--gl-font-mono);color:var(--gl-ink);letter-spacing:.04em}.gl-sub-close{margin-left:auto;border:1px solid var(--gl-frame);background:none;color:var(--gl-ink-muted);border-radius:var(--gl-r-control);width:26px;height:26px;font-size:14px;line-height:1;cursor:pointer}.gl-sub-meta{font:400 10.5px var(--gl-font-mono);color:var(--gl-ink-muted);margin-top:6px;letter-spacing:.04em}.gl-sub-label{font:400 10.5px var(--gl-font-mono);letter-spacing:.14em;text-transform:lowercase;color:var(--gl-ink);margin:14px 0 8px;padding-bottom:4px;border-bottom:1px solid var(--gl-rule)}.gl-sub-strip{display:flex;height:40px;overflow:hidden;border:1px solid var(--gl-frame)}.gl-sub-strip button{border:none;padding:0;cursor:pointer}.gl-sub-hexes{display:flex;justify-content:space-between;font-size:8.5px;color:var(--gl-ink-muted);margin-top:4px;gap:2px}.gl-sub-note{color:var(--gl-ink-muted);font-size:12px;margin-top:6px}.gl-sub-ladder{display:flex;gap:8px;flex-wrap:wrap}.gl-itten-row{display:flex;align-items:center;gap:10px;padding:6px 0}.gl-itten-label{width:118px;font:400 11px var(--gl-font-mono);color:var(--gl-ink-muted);letter-spacing:.04em;text-transform:lowercase}.gl-itten-track{flex:1;height:8px;background:var(--gl-chassis);border:1px solid var(--gl-frame);overflow:hidden}.gl-itten-fill{height:100%;background:var(--gl-ink);transition:width .4s}.gl-itten-value{width:28px;text-align:right;font:400 11px var(--gl-font-mono);color:var(--gl-ink)}.gl-itten-note{color:var(--gl-ink-muted);font-size:12px;margin-top:6px}.pick-btn{position:absolute;top:10px;right:10px;border:1px solid var(--gl-frame);background:#ffffffd9;color:var(--gl-ink);border-radius:var(--gl-r-control);padding:5px 10px;font-size:10px;letter-spacing:.1em;text-transform:lowercase;cursor:pointer;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}.pick-btn.on{border-color:var(--gl-ink);background:var(--gl-ink);color:var(--gl-chassis)}.loupe[hidden]{display:none}.loupe{position:absolute;pointer-events:none;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;z-index:5}.loupe canvas{width:88px;height:88px;border-radius:50%;border:3px solid var(--gl-ink);background:var(--gl-chassis);box-shadow:0 4px 16px #00000040}.loupe-hex{font-size:10px;background:var(--gl-ink);color:var(--gl-chassis);padding:2px 7px;border-radius:var(--gl-r-control);letter-spacing:.06em}.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(--gl-frame);border-radius:var(--gl-r-control);overflow:hidden;background:var(--gl-panel);color:var(--gl-ink-muted);font:500 24px var(--gl-font-ui);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(--gl-frame);background:var(--gl-chassis);color:var(--gl-ink-muted);font-size:13px;line-height:1;cursor:pointer}.copyable{cursor:pointer}.copyable.copied{color:var(--gl-ink);font-weight:500}.settings{margin-top:26px;padding-top:14px;border-top:1px solid var(--gl-line);display:flex;align-items:center;gap:10px;font:400 11px var(--gl-font-mono);color:var(--gl-ink-muted);letter-spacing:.06em;text-transform:lowercase}.settings label{display:flex;align-items:center;gap:7px;cursor:pointer}.settings input{accent-color:var(--gl-ink)}