.opt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--s-3);margin-bottom:var(--s-4)}.opt-grid .field{margin:0}.opt-grid label{font-size:var(--fs-sm);font-weight:600;color:var(--text);display:block;margin-bottom:.35rem}.opt-check{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-sm);color:var(--text-soft);cursor:pointer;padding:.45rem 0}.opt-check input{width:16px;height:16px;accent-color:var(--indigo);cursor:pointer;flex:none}.opt-inline{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}.code-editor{border:1px solid var(--border-strong);border-radius:var(--r-md);overflow:hidden;background:var(--bg-sunken);margin-top:var(--s-3)}.code-toolbar{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;padding:var(--s-2) var(--s-3);border-bottom:1px solid var(--border);background:var(--surface)}.code-toolbar .ct-label{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-mute);text-transform:uppercase;letter-spacing:.06em;margin-right:auto}.code-toolbar .ct-btn{display:inline-flex;align-items:center;gap:.3rem;font:inherit;font-size:var(--fs-xs);font-weight:600;padding:.35rem .6rem;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface);color:var(--text-soft);cursor:pointer;transition:all var(--t-fast) var(--ease)}.code-toolbar .ct-btn:hover{color:var(--signal-deep);border-color:var(--signal)}:root[data-theme="dark"] .code-toolbar .ct-btn:hover{color:var(--signal)}.code-toolbar .ct-btn svg{width:14px;height:14px}.code-body{display:flex;max-height:420px;overflow:auto;font-family:var(--font-mono);font-size:var(--fs-sm);line-height:1.6}.code-gutter{flex:none;padding:var(--s-3) .6rem var(--s-3) var(--s-3);text-align:right;color:var(--text-mute);background:var(--bg-sunken);border-right:1px solid var(--border);user-select:none;white-space:pre}.code-pre{margin:0;padding:var(--s-3);white-space:pre;overflow-x:auto;flex:1;color:var(--text);tab-size:2;background:transparent}.code-pre code{font-family:inherit}.code-input{width:100%;min-height:180px;resize:vertical;border:none;outline:none;background:transparent;font-family:var(--font-mono);font-size:var(--fs-sm);line-height:1.6;color:var(--text);padding:var(--s-3);tab-size:2}.tk-tag{color:#2f6df6}.tk-attr{color:#0b8a5b}.tk-str{color:#c2410c}.tk-punc{color:var(--text-mute)}.tk-key{color:#7c3aed}.tk-num{color:#b45309}.tk-cmt{color:var(--text-mute);font-style:italic}.tk-prop{color:#2f6df6}:root[data-theme="dark"] .tk-tag{color:#7aa2ff}:root[data-theme="dark"] .tk-attr{color:#5fd0a0}:root[data-theme="dark"] .tk-str{color:#ffab76}:root[data-theme="dark"] .tk-key{color:#c4a7ff}:root[data-theme="dark"] .tk-num{color:#ffcf8a}:root[data-theme="dark"] .tk-prop{color:#7aa2ff}.pg-preview{border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s-5);min-height:180px;display:grid;place-items:center;overflow:auto;background:repeating-conic-gradient(var(--bg-sunken) 0% 25%,var(--surface) 0% 50%) 50%/22px 22px}.pg-preview img,.pg-preview svg{max-width:100%;height:auto}.pg-preview.dark{background:#0b1020;color:#e8ecf6}.pg-toolbar{display:flex;gap:var(--s-2);align-items:center;margin-bottom:var(--s-3);flex-wrap:wrap}.calc-out{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--s-3);margin-top:var(--s-4)}.calc-card{border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s-3) var(--s-4);background:var(--surface)}.calc-card .cc-num{font-family:var(--font-mono);font-size:var(--fs-xl);font-weight:700;color:var(--signal-deep);line-height:1.1}:root[data-theme="dark"] .calc-card .cc-num{color:var(--signal)}.calc-card .cc-lbl{font-size:var(--fs-xs);color:var(--text-mute);text-transform:uppercase;letter-spacing:.05em;margin-top:.25rem}.speed-bar{height:8px;border-radius:var(--r-pill);background:var(--bg-sunken);overflow:hidden;margin-top:.4rem}.speed-bar span{display:block;height:100%;width:0;background:var(--grad);transition:width var(--t-med) var(--ease)}.chiplist{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3)}.chiplist .chip-link{display:inline-flex;align-items:center;gap:.35rem;font-size:var(--fs-xs);padding:.3rem .65rem;border-radius:var(--r-pill);border:1px solid var(--border);background:var(--surface);color:var(--text-soft);cursor:pointer;max-width:240px}.chiplist .chip-link span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chiplist .chip-link:hover{border-color:var(--signal);color:var(--signal-deep)}:root[data-theme="dark"] .chiplist .chip-link:hover{color:var(--signal)}@media (max-width:560px){.code-body{max-height:320px}.opt-grid{grid-template-columns:1fr 1fr}.code-toolbar .ct-label{width:100%;margin-bottom:.2rem}}@media (max-width:380px){.opt-grid{grid-template-columns:1fr}}