:root{--bg: #0f0f11;--panel: #18181b;--text: #e4e4e7;--muted: #a1a1aa;--accent: #22d3ee;--grid-line: #27272a}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.5}header{padding:24px 32px;border-bottom:1px solid var(--grid-line);display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap}h1{margin:0 0 8px;font-size:1.25rem}.desc{color:var(--muted);font-size:.875rem}.header-right{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:12px}.mode-switch{display:flex;align-items:center;flex-wrap:wrap;gap:8px;background:var(--panel);padding:4px;border-radius:8px;border:1px solid var(--grid-line)}.notation-switch{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:8px 14px}.notation-switch .select-label{margin:0}.mode-choice{display:flex;align-items:center;gap:4px}.mode-select-button{background:transparent;border:none;color:var(--muted);font-family:inherit;font-size:.8rem;padding:6px 7px;border-radius:6px;cursor:pointer;transition:.15s;white-space:nowrap}.mode-samples{display:flex;min-height:28px;align-items:center;justify-content:center;gap:2px;padding:2px;background:#0f0f11;border:1px solid #27272a;border-radius:5px}.mode-sample{display:block;width:22px;height:22px;flex:0 0 auto;padding:1px;background:#18181b;border:1px solid transparent;border-radius:4px;cursor:pointer;transition:.12s ease}.mode-samples[data-sample-count="2"] .mode-sample{width:18px;height:18px}.mode-samples[data-sample-count="3"] .mode-sample{width:15px;height:15px}.mode-samples[data-sample-count="4"] .mode-sample{width:13px;height:13px}.mode-sample svg{display:block;width:100%;height:100%}.mode-select-button:hover{color:var(--text)}.mode-select-button.active{background:var(--accent);color:#0f0f11;font-weight:600}.mode-sample:hover{border-color:var(--accent);background:#27272a;transform:translateY(-1px)}.mode-sample:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.mode-switch .mode-separator{width:1px;background:var(--grid-line);margin:6px 4px;flex-shrink:0}.mode-group{display:flex;align-items:center;gap:4px;background:var(--bg);padding:3px;border-radius:6px;border:1px solid var(--grid-line)}main{display:grid;grid-template-columns:280px 1fr;gap:24px;padding:24px 32px}aside{background:var(--panel);border-radius:12px;padding:20px;height:fit-content;position:sticky;top:24px}aside h2{margin:0 0 16px;font-size:.875rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}.clock-demo{position:absolute;z-index:10;top:8px;right:10px;padding:4px;background:#18181be0;border:1px solid var(--grid-line);border-radius:7px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.clock-face{display:flex;gap:3px}.clock-item{width:22px;margin:0}.clock-glyph{width:22px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--bg);border:1px solid var(--grid-line);border-radius:4px}.clock-glyph svg{width:88%;height:88%}.clock-item figcaption{margin-top:1px;text-align:center}.clock-value{color:var(--text);font-size:.55rem;line-height:1.15;font-variant-numeric:tabular-nums}.preview-box{width:100%;aspect-ratio:1;background:var(--bg);border:1px solid var(--grid-line);border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;overflow:hidden}.preview-box svg{width:80%;height:80%}.info-row{display:flex;justify-content:space-between;font-size:.875rem;margin:6px 0}.info-row .label{color:var(--muted)}.options-area{margin:14px 0 6px}.path-options{display:none;flex-direction:column;gap:8px;padding:12px;background:var(--bg);border-radius:8px;border:1px solid var(--grid-line)}.path-options.visible{display:flex}.notation.glyph,#infoNote.glyph{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.18em}.toggle{display:flex;align-items:center;gap:10px;font-size:.8rem;color:var(--text);cursor:pointer}.toggle input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border:2px solid var(--muted);border-radius:4px;background:transparent;cursor:pointer;position:relative}.toggle input:checked{background:var(--accent);border-color:var(--accent)}.toggle input:checked:after{content:"";position:absolute;left:5px;top:1px;width:4px;height:9px;border:solid #0f0f11;border-width:0 2px 2px 0;transform:rotate(45deg)}.select-label{display:block;font-size:.75rem;color:var(--muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em}.radio-group{display:flex;flex-wrap:wrap;gap:6px}.radio-group input{position:absolute;opacity:0;pointer-events:none}.radio-group label{display:block;background:var(--bg);border:1px solid var(--grid-line);border-radius:6px;padding:6px 10px;font-size:.75rem;color:var(--text);cursor:pointer;transition:.15s;text-align:center}.radio-group label:hover{border-color:var(--accent)}.radio-group input:checked+label{background:var(--accent);color:#0f0f11;border-color:var(--accent);font-weight:600}.legend{margin-top:20px}.legend-item{display:flex;align-items:center;gap:10px;font-size:.8rem;margin:8px 0}.legend-item svg{width:40px;height:16px}.legend-symbol{font-size:1.1rem;width:24px;text-align:center;color:var(--text)}.grid{display:grid;grid-template-columns:auto auto repeat(16,1fr);grid-template-rows:auto auto repeat(16,1fr);gap:6px}.grid-sampling{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px}.grid-controls{display:flex;align-items:center;gap:8px;min-height:28px;margin-bottom:8px;flex-wrap:wrap}.bit-sampling{display:flex;align-items:center;gap:6px;padding:4px 5px 4px 7px;background:linear-gradient(180deg,#27272a,#18181b);border:1px solid var(--grid-line);border-radius:8px;box-shadow:inset 0 1px #ffffff0a}.grid-controls-label{color:var(--muted);font-size:.65rem;letter-spacing:.04em}.bit-section-switch{display:grid;grid-template-columns:repeat(8,22px);overflow:hidden;background:#09090b;border:1px solid #3f3f46;border-radius:6px}.bit-section{position:relative;height:32px;cursor:pointer}.bit-section+.bit-section{border-left:1px solid #27272a}.bit-section-input{position:absolute;width:1px;height:1px;margin:0;opacity:0}.bit-section-face{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#71717a;transition:.12s ease}.bit-section-number{font-size:.58rem;line-height:1}.bit-section-indicator{width:3px;height:10px;background:#3f3f46;border-radius:999px;transition:.12s ease}.bit-section:hover .bit-section-face{color:var(--text);background:#ffffff0a}.bit-section-input:focus-visible+.bit-section-face{outline:2px solid var(--accent);outline-offset:-2px}.bit-section-input:checked+.bit-section-face{color:#cffafe;background:linear-gradient(180deg,#22d3ee38,#22d3ee12);box-shadow:inset 0 1px #67e8f933}.bit-section-input:checked+.bit-section-face .bit-section-indicator{background:var(--accent);box-shadow:0 0 7px #22d3eeb3}.grid-pager{display:flex;align-items:center;gap:6px;font-size:.75rem}.grid-pager button{background:var(--panel);border:1px solid var(--grid-line);color:var(--text);border-radius:6px;padding:4px 7px;font-size:.7rem;font-family:inherit;cursor:pointer}.grid-pager button:hover{border-color:var(--accent)}.grid-header{font-size:.55rem;color:var(--muted);text-align:center;display:flex;align-items:center;justify-content:center;padding:2px;min-width:2.2em}.grid-header-group{font-size:.65rem;color:var(--text);font-weight:600;background:var(--panel);border-radius:4px}.cell{background:var(--panel);border:1px solid var(--grid-line);border-radius:6px;padding:6px 4px 4px;cursor:pointer;transition:transform .1s,border-color .1s;min-width:0}.cell:hover{transform:translateY(-2px);border-color:var(--accent)}.cell.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.cell.bit1{border-color:#facc15;box-shadow:0 0 0 1px #facc15}.cell.bit1.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}.cell .idx{font-size:.65rem;color:var(--muted);text-align:center;margin-bottom:2px}.cell svg{display:block;width:100%;height:auto}.notation{font-size:.6rem;color:var(--muted);text-align:center;margin-top:2px;font-family:inherit;overflow-wrap:anywhere}@media (max-width: 1100px){main{grid-template-columns:1fr}aside{position:static}}@media (max-width: 720px){main{padding:16px}.grid{gap:3px}.grid-header{font-size:.45rem;min-width:1.6em;padding:1px}.cell{padding:3px 2px 2px}.cell .idx{font-size:.5rem}.notation{font-size:.45rem}.mode-select-button{padding:6px;font-size:.75rem}}