.ht-guide { min-width:0; }
.ht-legend { margin:16px 0; }
.ht-legend svg { display:block; width:100%; max-width:320px; margin:auto; }
.ht-method { margin:0 0 28px; scroll-margin-top:20px; }
.ht-method h2,.ht-card h2 { margin-top:0; }
.ht-player { min-width:0; border:1px solid var(--line); border-radius:12px; padding:12px; }
.ht-steps { list-style:none; padding:0; margin:0; }
.ht-step figure { margin:0; }
.ht-step svg { width:100%; max-width:480px; height:auto; display:block; margin:auto; }
.ht-step figcaption { margin:12px 0; line-height:1.8; }
.ht-step { margin-bottom:24px; }
.ht-js .ht-step[hidden] { display:none; }
.ht-controls,.ht-dots { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:12px; }
.ht-controls .btn,.ht-dots .btn { min-height:44px; font-size:16px; }
.ht-dots .btn { min-width:44px; padding:4px; border-radius:50%; }
.ht-dots [aria-current="step"],.ht-controls [aria-pressed="true"] { color:#fff; background:var(--brand); }
.ht-player svg { touch-action:pan-y; }
.ht-live { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.ht-a,.ht-b { fill:none; stroke-width:11; stroke-linecap:round; stroke-linejoin:round; }
.ht-a { stroke:var(--brand); }
.ht-b { stroke:var(--warn); }
.ht-outline { fill:none; stroke:var(--fg); stroke-width:14; stroke-linecap:round; stroke-linejoin:round; }
.ht-under { stroke-dasharray:7 12; stroke-linecap:butt; }
.ht-guide-line { fill:none; stroke:var(--muted); stroke-width:2; }
.ht-hole { fill:#fff; stroke:var(--muted); stroke-width:2; }
.ht-gap { fill:none; stroke:#fff; stroke-width:22; stroke-linecap:round; stroke-linejoin:round; }
.ht-arrow { fill:none; stroke:var(--bad); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.ht-arrow-head { fill:var(--bad); }
.ht-label { fill:var(--fg); font-size:15px; }
.ht-paper { fill:#fff; stroke:var(--fg); stroke-width:2; }
.ht-paper-c { fill:#dbe6fb; stroke:var(--brand-dark); stroke-width:2; }
.ht-fold { fill:none; stroke:var(--fg); stroke-width:2; stroke-dasharray:8 5; }
.ht-mountain { fill:none; stroke:var(--fg); stroke-width:2; stroke-dasharray:8 4 2 4; }
.ht-crease { fill:none; stroke:var(--line); stroke-width:2; }
.ht-cards { display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.ht-card { min-width:0; }
.ht-card svg { display:block; width:100%; max-width:480px; height:auto; margin:auto; }
@media(max-width:540px) { .ht-cards { grid-template-columns:1fr; } .ht-player { padding:8px; } }
@media(prefers-reduced-motion:no-preference) { .ht-js .ht-step:not([hidden]) { animation:ht-appear .16s ease-out; } @keyframes ht-appear { from { opacity:.5; } to { opacity:1; } } }
@media print { .ht-controls,.ht-dots { display:none; } .ht-js .ht-step[hidden] { display:block; } .ht-step { break-inside:avoid; } }

/* B session, 2026-10-16: distinguish the tie's wide blue end. */
.ht-tie-wide .ht-a { stroke-width:20; }
.ht-tie-wide .ht-outline { stroke-width:23; }
.ht-tie-wide .ht-gap { stroke-width:29; }