@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&display=swap');
:root{--bg:#18181c;--panel:#222228;--dark:#101012;--line:#303038;--line2:#42424d;--text:#f4f4f6;--muted:#9b9ba6;--dim:#656570;--orange:#d47028;--orange2:#ff9e3b}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:12px 'Roboto Mono',monospace}.topbar{height:68px;border-bottom:2px solid var(--line);padding:0 25px;display:flex;align-items:center;gap:28px;background:#1d1d22}.brand{display:flex;align-items:center;gap:8px;color:white;text-decoration:none;font-weight:700;letter-spacing:.4px}.brand em{font-style:normal;color:var(--muted);font-size:10px;border-left:1px solid var(--line2);padding-left:8px}.brand-mark{color:#17171b;background:var(--orange);height:27px;width:27px;display:grid;place-items:center;font-weight:700;font-size:16px;box-shadow:3px 3px 0 #09090b}.mode-switch{display:flex;align-self:stretch;margin-left:12px}.mode{border:0;border-bottom:3px solid transparent;background:transparent;color:var(--muted);font:700 11px inherit;padding:0 17px;cursor:pointer}.mode.active{border-color:var(--orange);color:white}.mode small{font-size:8px;color:var(--orange)}.local-note{margin-left:auto;color:var(--muted);font-size:10px}.local-note i,.status-dot{display:inline-block;width:7px;height:7px;background:#5ec78b;border-radius:50%;margin-right:7px}.app-shell{display:grid;grid-template-columns:294px minmax(0,1fr);gap:18px;padding:18px;min-height:calc(100vh - 68px)}.sidebar,.workspace{display:flex;flex-direction:column;gap:18px;min-height:0}.workspace{overflow:auto}.panel{background:var(--panel);border:2px solid var(--line);box-shadow:5px 5px 0 #0c0c0e;padding:16px}.eyebrow{margin:0 0 8px;font-size:10px;font-weight:700;letter-spacing:.8px;color:var(--orange)}.dropzone{display:flex;min-height:172px;border:2px dashed #4b4b57;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:7px;color:var(--muted);cursor:pointer;transition:.15s}.dropzone:hover,.dropzone.dragover{border-color:var(--orange2);background:#2a2521}.dropzone strong{color:white;font-size:11px}.dropzone small{color:#6f6f79;font-size:9px}.upload-icon{font-size:31px;color:var(--orange)}#font-input{display:none}.privacy-note{font-size:9px;color:var(--dim);line-height:1.5;margin:11px 0 0}.section-title{display:flex;align-items:start}.section-title .status-dot{margin-left:auto;background:#666}.empty-info{color:var(--dim);font-size:10px;padding:8px 0 2px;line-height:1.6}.metadata h1{font-size:17px;margin:2px 0 4px;overflow-wrap:anywhere}.metadata>p{color:var(--muted);margin:0 0 15px}.metadata dl{display:grid;grid-template-columns:1fr 1fr;gap:11px 15px;margin:0}.metadata dt{font-size:9px;color:var(--dim);margin-bottom:3px}.metadata dd{margin:0;color:#e6e6e9;font-size:10px}.text-button{border:0;background:none;padding:15px 0 0;color:var(--orange2);font:700 10px inherit;cursor:pointer}.text-button span{font-size:14px}.settings label,.tester-controls label{display:block;color:var(--muted);font-size:9px;margin-top:14px}.settings output,.tester-controls output{float:right;color:white}.settings input[type=range],.tester-controls input[type=range]{width:100%;accent-color:var(--orange);margin-top:8px}.settings input[type=color]{float:right;width:28px;height:18px;padding:0;border:1px solid var(--line2);background:none}.settings select,.glyph-actions select{width:100%;margin-top:7px;background:#18181c;color:#d7d7dc;border:1px solid var(--line2);height:31px;padding:0 8px;font:10px inherit}.glyph-panel{padding:0;display:flex;flex-direction:column;min-height:420px}.glyph-header,.playground-head{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:2px solid var(--line)}h2{font-size:15px;margin:0}.glyph-actions{display:flex;gap:8px}.glyph-actions select{width:130px;margin:0}.search{height:31px;border:1px solid var(--line2);display:flex;align-items:center;padding:0 8px;color:var(--dim);background:#18181c}.search input{border:0;outline:0;background:transparent;color:white;width:150px;font:10px inherit;margin-left:6px}.glyph-canvas{min-height:350px;flex:1;padding:16px;overflow:auto}.dark,.test-preview{background:#131315}.light{background:#eeeef1;color:#17171a}.grid{background-color:#16161a;background-image:linear-gradient(#23232a 1px,transparent 1px),linear-gradient(90deg,#23232a 1px,transparent 1px);background-size:12px 12px}.empty-state{text-align:center;color:var(--dim);padding:76px 20px}.empty-state span{font-size:52px;color:#464650}.empty-state h3{font-size:12px;color:#aaaab4;margin:14px 0 7px}.empty-state p{margin:0;font-size:10px}.glyph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}.glyph-card{height:128px;background:#1e1e23;border:1px solid #363640;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.glyph-card:hover{border-color:var(--orange2);background:#29251f}.glyph-render{line-height:1;color:var(--glyph-color,#fff);overflow:hidden;max-width:90%;text-align:center}.glyph-label,.glyph-code{position:absolute;font-size:9px;color:#aaaab4}.glyph-label{top:8px;left:8px;color:var(--orange2)}.glyph-code{bottom:8px;left:8px}.playground{padding:0}.playground-head{border-bottom:0}.playground-head span{font-size:9px;color:var(--muted);border:1px solid var(--line2);padding:5px 7px}.playground textarea{display:block;width:calc(100% - 32px);height:65px;margin:0 16px 12px;resize:vertical;background:#151519;border:1px solid var(--line2);padding:9px;color:#e9e9ed;outline:none;font:11px inherit;line-height:1.5}.test-preview{margin:0 16px;min-height:115px;border:1px solid var(--line);padding:18px;overflow:auto;white-space:pre-wrap;word-break:break-word;color:var(--glyph-color,#fff);line-height:1.25}.tester-controls{display:flex;gap:22px;padding:13px 16px}.tester-controls label{margin:0;flex:1}dialog{width:min(580px,calc(100% - 30px));background:#222228;color:white;border:2px solid #4c4c56;box-shadow:7px 7px 0 #09090b;padding:0}dialog::backdrop{background:#000a}.modal-head{display:flex;justify-content:space-between;border-bottom:2px solid var(--line);padding:18px}.modal-head button{background:transparent;border:0;color:#aaa;font-size:25px;cursor:pointer}#full-metadata{padding:18px;margin:0;display:grid;grid-template-columns:150px 1fr;gap:13px;font-size:11px}#full-metadata dt{color:var(--muted)}#full-metadata dd{margin:0;overflow-wrap:anywhere}@media(max-width:800px){.topbar{padding:0 14px}.brand em,.local-note{display:none}.mode-switch{margin-left:auto}.app-shell{grid-template-columns:1fr;padding:12px}.sidebar{display:grid;grid-template-columns:1fr 1fr}.settings{grid-column:span 2}.workspace{overflow:visible}.glyph-actions{margin-top:8px}.glyph-header{display:block}}@media(max-width:500px){.sidebar{display:block}.sidebar .panel{margin-bottom:12px}.mode{padding:0 7px;font-size:9px}.glyph-actions{flex-direction:column}.glyph-actions select,.search,.search input{width:100%}.glyph-grid{grid-template-columns:repeat(3,1fr)}.tester-controls{display:block}.tester-controls label+label{margin-top:15px}}