:root{--bg: #f7f7fa;--surface: #ffffff;--surface-2: #f0f0f4;--border: #d9d9e0;--text: #1a1a22;--text-dim: #5c5c6b;--accent: #6750a4;--accent-text: #ffffff;--danger: #ba1a1a;--radius: 10px;--radius-sm: 7px;--gap: 14px;--shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .08);--mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace}html[data-theme=dark]{--bg: #131318;--surface: #1d1d24;--surface-2: #26262f;--border: #3a3a45;--text: #e6e6ec;--text-dim: #a0a0b0;--accent: #cfbcff;--accent-text: #1a1a22;--danger: #ffb4ab;--shadow: 0 1px 3px rgba(0, 0, 0, .5)}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}#app{display:flex;flex-direction:column;min-height:100vh}.topbar{display:flex;align-items:center;gap:var(--gap);flex-wrap:wrap;padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top));background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}.topbar h1{font-size:16px;font-weight:700;margin:0;letter-spacing:.5px}.topbar .spacer{flex:1}.topbar-group{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.topbar label{font-size:12px;color:var(--text-dim)}.layout{display:grid;grid-template-columns:260px 1fr;gap:var(--gap);padding:var(--gap);flex:1;align-items:start}@media (max-width: 820px){.layout{grid-template-columns:1fr}}.sidebar{display:flex;flex-direction:column;gap:6px;position:sticky;top:64px}.main{min-width:0;display:flex;flex-direction:column;gap:var(--gap)}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}.card h2{font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--text-dim);margin:0 0 12px}.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.row.between{justify-content:space-between}button,.btn{font:inherit;min-height:40px;padding:0 14px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface-2);color:var(--text);cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:filter .12s ease}button:hover:not(:disabled),.btn:hover{filter:brightness(1.06)}button:disabled{opacity:.45;cursor:not-allowed}button.primary{background:var(--accent);color:var(--accent-text);border-color:transparent;font-weight:600}button.danger{color:var(--danger)}button.ghost{background:transparent;border-color:transparent}button.small{min-height:32px;padding:0 10px;font-size:13px}input[type=text],input[type=number]{font:inherit;min-height:40px;padding:0 10px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg);color:var(--text);width:100%}input.mono{font-family:var(--mono)}select{font:inherit;min-height:40px;padding:0 8px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface-2);color:var(--text)}.segmented{display:inline-flex;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}.segmented button{border:none;border-radius:0;background:var(--surface-2);min-height:36px}.segmented button.active{background:var(--accent);color:var(--accent-text);font-weight:600}.navitem{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:var(--radius-sm);border:1px solid transparent;background:var(--surface);cursor:pointer;text-align:left;min-height:44px;width:100%}.navitem:hover{background:var(--surface-2)}.navitem.active{border-color:var(--accent);background:var(--surface-2)}.navitem .name{font-weight:600}.navitem .meta{font-size:12px;color:var(--text-dim);font-family:var(--mono)}.tag{display:inline-block;font-size:11px;padding:1px 7px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);color:var(--text-dim)}.tag.readonly{color:var(--danger);border-color:var(--danger)}.swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}.swatch{border-radius:var(--radius-sm);border:1px solid var(--border);padding:10px;min-height:64px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;overflow:hidden}.swatch .role{font-size:12px;font-weight:600;word-break:break-word}.swatch .hex{font-family:var(--mono);font-size:11px;opacity:.85}.swatch.overridden{outline:2px dashed currentColor;outline-offset:-4px}.token-row{display:grid;grid-template-columns:1fr 130px 130px auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--border)}@media (max-width: 560px){.token-row{grid-template-columns:1fr 1fr}}.token-name{font-family:var(--mono);font-size:13px}.swatch-mini{height:36px;border-radius:var(--radius-sm);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px}.hint{font-size:12px;color:var(--text-dim)}.banner{padding:8px 12px;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--border);font-size:13px}.banner.warn{border-color:var(--danger);color:var(--danger)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000073;display:flex;align-items:center;justify-content:center;padding:16px;z-index:100}.modal{width:min(520px,100%);max-height:90vh;overflow:auto;display:flex;flex-direction:column;gap:10px}.field{display:flex;flex-direction:column;gap:4px}.shape-tile{display:flex;flex-direction:column;align-items:center;gap:6px}.shape-box{width:100%;height:56px;background:var(--accent);border:1px solid var(--border)}.typo-list{display:flex;flex-direction:column;gap:10px}.typo-row{display:flex;flex-direction:column;gap:2px;padding-bottom:8px;border-bottom:1px solid var(--border)}.ts-font-row{display:grid;grid-template-columns:140px 1fr auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--border)}.ts-style-row{display:grid;grid-template-columns:1.4fr 1fr 64px 72px 80px 64px auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--border)}.ts-row-head{font-weight:600;color:var(--text-dim);font-size:12px}.ts-style-name{display:flex;align-items:center;gap:6px;min-width:0}.ts-style-name .token-name{min-width:0}.ts-num{width:100%;font-family:var(--mono);font-size:13px}.ts-font-select{font-family:var(--mono);font-size:13px}@media (max-width: 720px){.ts-style-row{grid-template-columns:1fr 1fr}.ts-style-row.ts-row-head{display:none}}.ts-preview{display:flex;flex-direction:column;gap:12px}.ts-preview-row{display:flex;flex-direction:column;gap:2px;padding-bottom:10px;border-bottom:1px solid var(--border)}.shape-row{display:grid;grid-template-columns:1fr 96px auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--border)}@media (max-width: 720px){.shape-row.ts-row-head{display:none}}.shape-preview{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:16px}.sidebar>.segmented{width:100%}.sidebar>.segmented button{flex:1}