.csub{border-bottom:1px solid var(--border);background:var(--bg-alt);align-items:center;gap:12px;padding:8px 16px;display:flex}.cnav-toggle{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);height:2rem;color:var(--text-heading);font-family:var(--font-body);cursor:pointer;align-items:center;gap:8px;padding:0 .75rem;font-size:.875rem;font-weight:500;transition:color .12s,border-color .12s,background-color .12s;display:none}.cnav-toggle:hover{border-color:var(--accent);color:var(--accent)}.cnav-toggle:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent);outline:none}.cnav-toggle-bars{width:1.05em;height:1.05em;-webkit-mask:var(--icon-menu) center / contain no-repeat;mask:var(--icon-menu) center / contain no-repeat;background:currentColor}.clayout{grid-template-columns:280px minmax(0,1fr);align-items:start;display:grid}.clayout-nav{border-right:1px solid var(--border);background:var(--bg-alt);flex-direction:column;align-self:start;height:calc(100vh - 101px);display:flex;position:sticky;top:0;overflow:hidden}.clayout-main{min-width:0;padding:32px clamp(20px,4vw,56px) 80px}.cnav-scrim{border:0;padding:0;display:none}.clayout-nav>nav{flex:1;min-height:0}.cpage{max-width:880px}.cindex{max-width:1100px}.specimen{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg);box-shadow:var(--shadow-sm);perspective:2200px;margin:24px 0 32px;overflow:hidden}.specimen-bar{border-bottom:1px solid var(--border);background:var(--bg-alt);flex-wrap:wrap;align-items:center;gap:8px;padding:8px 16px;display:flex}.specimen-spacer{flex:1}.specimen-faces{border-radius:var(--radius-sm);background:color-mix(in srgb, var(--text-body) 8%, var(--bg));border:1px solid var(--border);gap:2px;padding:3px;display:inline-flex}.specimen-face-btn{border-radius:calc(var(--radius-sm) - 2px);height:1.6rem;color:var(--text-muted);font-family:var(--font-body);cursor:pointer;background:0 0;border:0;padding:0 .7rem;font-size:.8125rem;font-weight:500;transition:color .12s,background-color .12s}.specimen-face-btn:hover{color:var(--text-heading)}.specimen-face-btn.is-active{background:var(--bg);color:var(--text-heading);box-shadow:var(--shadow-sm);font-weight:600}.specimen-face-btn:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);outline:none}.specimen-status{color:var(--text-muted);font-size:12px;font-family:var(--font-mono)}.specimen-status.err{color:var(--fail,#c20000)}.specimen-reset{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);height:2rem;color:var(--text-heading);font-family:var(--font-body);cursor:pointer;align-items:center;padding:0 .75rem;font-size:.8125rem;font-weight:500;transition:color .12s,border-color .12s;display:inline-flex}.specimen-reset:hover{border-color:var(--accent);color:var(--accent)}.specimen-open{border-radius:var(--radius-sm);height:2rem;color:var(--accent);font-family:var(--font-body);white-space:nowrap;align-items:center;gap:.3rem;padding:0 .7rem;font-size:.8125rem;font-weight:600;text-decoration:none;transition:background-color .12s;display:inline-flex}.specimen-open:hover{background:color-mix(in srgb, var(--accent) 12%, transparent)}.specimen-reset:focus-visible,.specimen-open:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent);outline:none}.specimen-stage{transform-style:preserve-3d}.specimen-stage.flipping{animation:.35s ease-in-out ll-flip}@keyframes ll-flip{0%{transform:rotateY(0)}50%{transform:rotateY(90deg)}to{transform:rotateY(0)}}@media (prefers-reduced-motion:reduce){.specimen-stage.flipping{animation:none}}.specimen-face[hidden]{display:none}.specimen-preview-host{aspect-ratio:16/9;background:var(--bg-alt);width:100%;position:relative;overflow:hidden}.specimen-preview-host iframe.live{transform-origin:0 0;border:0;width:1280px;height:720px;position:absolute;top:0;left:0}.specimen-editor-host,.specimen-editor-host .cm-editor{background:var(--bg)}.specimen-editor-host .cm-editor.cm-focused{outline:none}.specimen-variants{border-bottom:1px solid var(--border);background:var(--bg-alt);flex-wrap:wrap;align-items:center;gap:6px;padding:8px 16px;display:flex}.specimen-variants-label{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin-right:4px;font-size:10px}.specimen-variants--grouped{gap:6px 14px}.specimen-variant-axis{flex-wrap:wrap;align-items:center;gap:6px;display:inline-flex}.specimen-variant-axis+.specimen-variant-axis{border-left:1px solid var(--border);padding-left:14px}.specimen-variant{border:1px solid var(--border);background:var(--bg);color:var(--text-body);font-family:var(--font-mono);cursor:pointer;border-radius:999px;padding:4px 11px;font-size:12px}.specimen-variant:hover{border-color:var(--accent);color:var(--accent)}.specimen-variant:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent);outline:none}.specimen-variant.is-active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.specimen-variant-caption{border-bottom:1px solid var(--border);background:var(--bg-alt);color:var(--text-muted);margin:0;padding:8px 16px;font-size:12.5px;line-height:1.45}@media (width<=880px){.cnav-toggle{display:inline-flex}.clayout{grid-template-columns:1fr}.clayout-nav{z-index:50;width:300px;max-width:84vw;height:100vh;box-shadow:var(--shadow-lg);transition:transform .2s;position:fixed;top:0;left:0;transform:translate(-100%)}body.cnav-open .clayout-nav{transform:translate(0)}body.cnav-open .cnav-scrim{z-index:40;background:#0006;display:block;position:fixed;inset:0}.clayout-main{padding:24px 18px 64px}}