/* Shared mechanical explanation; no article names or generated content in CSS. */
.code-sequence{scroll-margin-top:112px}.code-sequence-panel{background:#e9e8e0;padding:32px;color:var(--ink)}
.code-sequence h3{font-family:var(--serif);font-size:clamp(1.8rem,3vw,2.4rem);line-height:1.15;letter-spacing:-.03em;margin:12px 0 22px}
.code-legend{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:.8rem;line-height:1.5;margin:0 0 22px;color:var(--muted)}
.code-legend span{display:inline-flex;gap:8px;align-items:center}.code-legend i{width:14px;height:14px;border-radius:50%;border:1px solid var(--ink);display:inline-block}.legend-hole{background:var(--paper)}.legend-solid{background:var(--ink)}
.code-controls{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;border-block:1px solid #b4bfba;padding:12px 0;margin-bottom:24px}.code-controls[hidden]{display:none}
.code-controls>div{display:flex;gap:6px}.code-controls button{min-width:44px;min-height:44px;background:transparent;border:1px solid transparent;font-size:.9rem;padding:6px 12px}.code-controls button[aria-pressed=true]{border-color:var(--ink);background:var(--ink);color:var(--paper)}.code-controls button:hover{border-color:var(--orange)}.code-controls .code-next{border-bottom-color:var(--orange);padding-inline:4px;white-space:nowrap}
.code-steps{list-style:none;padding:0;margin:0}.code-step{padding:26px 0;border-top:1px solid #b4bfba;scroll-margin-top:115px}.code-step:first-child,.code-enhanced .code-step{border:0;padding:0}.code-step[hidden]{display:none}
.code-step-number{font-size:.75rem;color:var(--orange);font-variant-numeric:tabular-nums}.code-step h4{font-family:var(--serif);font-weight:400;letter-spacing:-.025em;font-size:1.6rem;line-height:1.2;margin:8px 0 12px}.code-step-copy>p{font-size:.9rem;line-height:1.65;margin:0 0 24px;max-width:510px}
.code-comparison{display:grid;gap:14px;max-width:510px}.code-card-row>p{font-size:.82rem;font-weight:600;line-height:1.4;margin:0 0 6px}.code-card-row>svg{display:block;width:100%;height:auto}.code-card-outline{fill:none;stroke:#879d9a;stroke-width:1}.code-position{stroke:var(--ink);stroke-width:1.5}.code-position.is-hole{fill:var(--paper)}.code-position.is-solid{fill:var(--ink)}.code-position.is-mismatch{stroke:var(--orange);stroke-width:3}.code-mismatch{fill:none;stroke:var(--orange);stroke-width:2}.code-card-absent>div{aspect-ratio:364/76;display:grid;place-items:center;color:var(--muted);border:1px dashed #879d9a;border-radius:5px}
.code-result{display:flex;align-items:center;gap:12px;border-top:1px solid #b4bfba;padding-top:18px;margin:22px 0 0;font-size:.95rem;line-height:1.5}.code-result svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:2;flex-shrink:0}.code-step[data-result=blocked] .code-result{color:var(--orange)}.code-step[data-result=open] .code-shackle{transform:translateY(-5px) rotate(-20deg);transform-origin:13px 18px}
.code-enhanced .code-step:not([hidden]) .code-comparison{animation:code-arrive .25s ease-out}.code-announcement{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@keyframes code-arrive{from{opacity:.45;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){.code-sequence-panel{padding:24px 18px}.code-controls{gap:8px}.code-controls>div{gap:0}.code-controls button{padding:6px 9px}.code-step-copy>p{font-size:.9375rem}.code-legend{gap:8px 16px}}
@media(prefers-reduced-motion:reduce){.code-enhanced .code-step:not([hidden]) .code-comparison{animation:none}}
@media print{.code-controls{display:none}.code-step[hidden]{display:list-item}.code-enhanced .code-step{padding:24px 0;border-top:1px solid var(--line);break-inside:avoid}.code-comparison{animation:none!important}}