/* we-fixed-anthropics-backspace-bug.css — extracted from inline <style> blocks. Generated by scripts/h1-extract.mjs */
body { min-height: 100vh; }

      .article-wrap { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; padding: 80px 24px 60px; }
      .article-meta { margin-bottom: 32px; }
      .article-meta .tag { display: inline-block; background: var(--green); color: #000; font-weight: 700; font-size: 11px; padding: 4px 14px; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 16px; }
      .article-meta time { display: block; font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }

      .article-wrap h1 { font-size: 26px; line-height: 1.3; color: var(--green); margin-bottom: 32px; }
      .article-wrap h2 { font-size: 18px; color: var(--green); margin-top: 40px; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
      .article-wrap h3 { font-size: 15px; color: var(--green-dim); margin-top: 28px; margin-bottom: 12px; }
      .article-wrap p { font-size: 14px; color: var(--white); line-height: 1.8; margin-bottom: 16px; }
      .article-wrap ul, .article-wrap ol { font-size: 14px; color: var(--white); line-height: 1.8; margin-bottom: 16px; padding-left: 24px; }
      .article-wrap li { margin-bottom: 8px; }
      .article-wrap code { background: var(--bg-terminal); border: 1px solid var(--border); padding: 2px 6px; font-size: 13px; color: var(--green); }
      .article-wrap pre { background: var(--bg-terminal); border: 1px solid var(--border); padding: 20px; overflow-x: auto; margin-bottom: 20px; font-size: 13px; line-height: 1.6; color: var(--green); }
      .article-wrap pre code { background: none; border: none; padding: 0; }
      .article-wrap strong { color: var(--green); font-weight: 600; }

      .tldr { border-left: 3px solid var(--green); background: var(--bg-terminal); padding: 16px 20px; margin-bottom: 32px; font-size: 13px; line-height: 1.6; color: var(--white); }
      .tldr .tldr-label { color: var(--green); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 2px; }

      .cta-box { border: 2px solid var(--green); background: var(--bg-card); padding: 32px 28px; margin: 40px 0; text-align: center; box-shadow: 0 0 40px var(--green-glow); }
      .cta-box h3 { color: var(--green); margin-top: 0; margin-bottom: 12px; }
      .cta-box p { color: var(--text-dim); font-size: 13px; margin-bottom: 20px; }
      .cta-btn { display: inline-block; background: var(--green); color: #000; font-weight: 700; font-size: 13px; padding: 12px 28px; text-decoration: none; text-transform: uppercase; letter-spacing: 2px; transition: background 0.2s; }
      .cta-btn:hover { background: #00cc33; }
      .cta-btn-secondary { display: inline-block; color: var(--green-dim); font-size: 12px; text-decoration: none; margin-left: 16px; text-transform: uppercase; letter-spacing: 1px; }
      .cta-btn-secondary:hover { color: var(--green); }

      .nav-links { margin-top: 48px; display: flex; justify-content: space-between; font-size: 12px; }
      .nav-links a { color: var(--green-dark); text-decoration: none; text-transform: uppercase; letter-spacing: 1px; }
      .nav-links a:hover { color: var(--green); }

      .concept-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
      .concept-card { border: 1px solid var(--border); background: var(--bg-card); padding: 20px; }
      .concept-card .icon { font-size: 24px; margin-bottom: 8px; }
      .concept-card h4 { color: var(--green); font-size: 14px; margin-bottom: 8px; }
      .concept-card p { font-size: 13px; color: var(--text-dim); margin: 0; line-height: 1.6; }
      .visual-flow { border: 1px solid var(--border); background: var(--bg-terminal); padding: 24px; margin: 24px 0; text-align: center; font-size: 14px; line-height: 2; }
      .visual-flow .arrow { color: var(--green); font-size: 18px; }
      .key-point { border-left: 3px solid var(--green); padding: 12px 20px; margin: 16px 0; background: rgba(0, 255, 65, 0.03); }
      .key-point p { margin: 0; font-size: 13px; }
      .do-dont { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0; }
      .do-dont .do, .do-dont .dont { border: 1px solid var(--border); padding: 16px; font-size: 13px; }
      .do-dont .do { border-color: var(--green-dark); }
      .do-dont .dont { border-color: #ff3333; }
      .do-dont h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px; }
      .do-dont .do h4 { color: var(--green); }
      .do-dont .dont h4 { color: #ff3333; }
      .section-icon { font-size: 20px; margin-right: 8px; vertical-align: middle; }
      .info-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 13px; }
      .info-table th, .info-table td { border: 1px solid var(--border); padding: 10px 14px; text-align: left; }
      .info-table th { background: var(--bg-terminal); color: var(--green); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: 1px; }
      .info-table td { color: var(--white); }

      /* === ANIMATED VISUALS === */

      /* Byte swap animation */
      .svg-scene { border: 1px solid var(--border); background: var(--bg-terminal); padding: 24px; margin: 32px 0; position: relative; overflow: clip; }
      .svg-scene::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(0,255,65,0.05), transparent 70%); pointer-events: none; }
      .svg-scene svg { width: 100%; height: auto; display: block; position: relative; z-index: 1; }
      .svg-scene .caption { text-align: center; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 2px; margin-top: 14px; }

      @keyframes swapTop {
        0%, 15% { transform: translate(0, 0); }
        40%, 60% { transform: translate(220px, 0); }
        85%, 100% { transform: translate(0, 0); }
      }
      @keyframes swapBottom {
        0%, 15% { transform: translate(0, 0); }
        40%, 60% { transform: translate(-220px, 0); }
        85%, 100% { transform: translate(0, 0); }
      }
      @keyframes swapArrowPulse {
        0%, 15% { opacity: 0; }
        25% { opacity: 1; }
        55% { opacity: 1; }
        65%, 100% { opacity: 0; }
      }
      @keyframes pulseGlow {
        0%, 100% { filter: drop-shadow(0 0 4px #00FF41); }
        50% { filter: drop-shadow(0 0 14px #00FF41); }
      }
      @keyframes pulseRed {
        0%, 100% { filter: drop-shadow(0 0 4px #ff3333); }
        50% { filter: drop-shadow(0 0 14px #ff3333); }
      }
      .byte-top { animation: swapTop 4s cubic-bezier(.4,0,.2,1) infinite; }
      .byte-bottom { animation: swapBottom 4s cubic-bezier(.4,0,.2,1) infinite; }
      .swap-arrows { animation: swapArrowPulse 4s ease-in-out infinite; }

      /* Terminal typing animation */
      .term-demo { border: 1px solid var(--border); background: #000; padding: 0; margin: 24px 0; overflow: hidden; font-family: 'JetBrains Mono', monospace; }
      .term-bar { background: var(--green); min-height: 30px; display: flex; align-items: center; padding: 4px 14px; gap: 8px; flex-wrap: wrap; }
      .term-dot { width: 10px; height: 10px; border-radius: 50%; }
      .term-dot.r { background: #ff3333; }
      .term-dot.y { background: #ffaa00; }
      .term-dot.g { background: #00cc33; }
      .term-bar-title { color: #000; font-size: 13px; font-weight: 700; margin-left: 10px; letter-spacing: 1px; }
      .term-body { padding: 20px 22px; min-height: 70px; }
      .term-line { font-size: 17px; line-height: 1.8; color: var(--green); white-space: nowrap; overflow: hidden; }
      .term-prompt { color: #00aa33; }

      /* Green terminal: types "explain this codee", pauses, deletes ONE letter → "explain this code" */
      @keyframes typeCorrect {
        0%  { width: 0ch; }
        3%  { width: 1ch; }
        6%  { width: 2ch; }
        9%  { width: 3ch; }
        12% { width: 4ch; }
        15% { width: 5ch; }
        18% { width: 6ch; }
        21% { width: 7ch; }
        24% { width: 8ch; }
        27% { width: 9ch; }
        30% { width: 10ch; }
        33% { width: 11ch; }
        36% { width: 12ch; }
        39% { width: 13ch; }
        42% { width: 14ch; }
        45% { width: 15ch; }
        48% { width: 16ch; }
        51% { width: 17ch; }
        65% { width: 17ch; }
        67% { width: 16ch; }
        100% { width: 16ch; }
      }
      /* Red terminal: types "explain this codee", pauses, deletes WHOLE WORD → "explain this " */
      @keyframes typeBug {
        0%  { width: 0ch; }
        3%  { width: 1ch; }
        6%  { width: 2ch; }
        9%  { width: 3ch; }
        12% { width: 4ch; }
        15% { width: 5ch; }
        18% { width: 6ch; }
        21% { width: 7ch; }
        24% { width: 8ch; }
        27% { width: 9ch; }
        30% { width: 10ch; }
        33% { width: 11ch; }
        36% { width: 12ch; }
        39% { width: 13ch; }
        42% { width: 14ch; }
        45% { width: 15ch; }
        48% { width: 16ch; }
        51% { width: 17ch; }
        65% { width: 17ch; }
        66% { width: 12ch; }
        100% { width: 12ch; }
      }
      @keyframes blink {
        0%, 100% { opacity: 1; }
        50% { opacity: 0; }
      }
      .type-correct { display: inline-block; overflow: hidden; white-space: nowrap; animation: typeCorrect 6s steps(1, end) infinite; border-right: 2px solid var(--green); vertical-align: bottom; }
      .type-bug { display: inline-block; overflow: hidden; white-space: nowrap; animation: typeBug 6s steps(1, end) infinite; border-right: 2px solid #ff3333; vertical-align: bottom; color: #ff3333; }

      /* Signal flow animation */
      @keyframes dashflow { to { stroke-dashoffset: -20; } }
      @keyframes signalPulse {
        0% { offset-distance: 0%; opacity: 0; }
        5% { opacity: 1; }
        95% { opacity: 1; }
        100% { offset-distance: 100%; opacity: 0; }
      }
      @keyframes crossFlash {
        0%, 40% { opacity: 0; }
        45%, 55% { opacity: 1; }
        60%, 100% { opacity: 0; }
      }
      .flow-line { stroke: #00FF41; stroke-width: 2; stroke-dasharray: 6 4; animation: dashflow 1.2s linear infinite; fill: none; }
      .flow-line-red { stroke: #ff3333; stroke-width: 2; stroke-dasharray: 6 4; animation: dashflow 0.8s linear infinite; fill: none; }
      .cross-flash { animation: crossFlash 3s ease-in-out infinite; }

      .credit-line { text-align: center; font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 2px; margin: 32px 0 0; opacity: 0.6; }

      @media (max-width: 600px) {
        .concept-grid, .do-dont { grid-template-columns: 1fr; }
        .article-wrap { padding: 70px 16px 40px; }
        .article-wrap h1 { font-size: 22px; }
        .article-wrap h2 { font-size: 16px; }
        .article-wrap pre { font-size: 12px; padding: 14px; }
        .svg-scene { padding: 16px; margin: 24px 0; overflow: auto; -webkit-overflow-scrolling: touch; }
        .svg-scene svg { width: 540px; min-width: 540px; }
        .svg-scene::before { display: none; }
        .term-bar-title { font-size: 11px; letter-spacing: 0.5px; }
        .term-line { font-size: 14px; }
        .term-body { padding: 16px; }
        .info-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
        .visual-flow { padding: 16px; font-size: 13px; word-break: break-word; }
        .visual-flow code { word-break: break-all; }
        .cta-box { padding: 24px 16px; }
        .cta-btn-secondary { display: block; margin: 12px auto 0; }
        .nav-links { flex-direction: column; gap: 12px; }
      }

      /* ============================================================
         bksp-* — 4 interactive animations (decoder / flow / fork / swap)
         Pure SVG + CSS + vanilla JS. No Three.js, no GSAP CDN required.
         ============================================================ */
      .bksp-anim { border: 1px solid var(--border); background: var(--bg-terminal); padding: 24px; margin: 32px 0; position: relative; overflow: clip; }
      .bksp-anim::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(0,255,65,0.05), transparent 70%); pointer-events: none; }
      .bksp-anim > * { position: relative; z-index: 1; }
      .bksp-caption { text-align: center; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 2px; margin-top: 14px; }
      .bksp-anim .bksp-btn { background: var(--bg-card); border: 1px solid var(--green-dim); color: var(--green); padding: 7px 14px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; min-height: 32px; }
      .bksp-anim .bksp-btn:hover { background: var(--green-glow); border-color: var(--green); }
      .bksp-anim .bksp-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
      .bksp-anim .bksp-btn[aria-pressed="true"] { background: var(--green); color: #000; border-color: var(--green); }
      .bksp-anim .bksp-btn.bksp-btn-bug[aria-pressed="true"] { background: #ff3333; color: #000; border-color: #ff3333; }

      /* ===== A: keystroke-decoder ===== */
      .bksp-decoder { font-family: 'JetBrains Mono', monospace; }
      .bksp-decoder-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 12px; flex-wrap: wrap; }
      .bksp-decoder-title { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 2px; font-weight: 700; }
      .bksp-mode-toggle { display: inline-flex; gap: 0; border: 1px solid var(--border); }
      .bksp-mode-toggle .bksp-btn { border: 0; border-radius: 0; min-width: 70px; padding: 7px 16px; }
      .bksp-mode-toggle .bksp-btn + .bksp-btn { border-left: 1px solid var(--border); }
      .bksp-screen { background: #000; border: 1px solid var(--border); padding: 16px 18px; min-height: 92px; position: relative; }
      .bksp-prompt { font-size: 17px; line-height: 1.6; color: var(--white); white-space: pre-wrap; word-break: break-word; min-height: 28px; }
      .bksp-prompt-prefix { color: var(--green-dim); margin-right: 4px; }
      .bksp-cursor { display: inline-block; width: 9px; height: 17px; background: var(--green); vertical-align: -3px; margin-left: 2px; animation: bksp-blink 1s steps(1) infinite; }
      .bksp-decoder.bksp-rm .bksp-cursor { animation: none; }
      @keyframes bksp-blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
      .bksp-feedrow { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin-top: 14px; align-items: baseline; font-size: 11px; }
      .bksp-feedrow dt { color: var(--text-muted); text-transform: uppercase; letter-spacing: 2px; font-weight: 700; }
      .bksp-feedrow dd { margin: 0; color: var(--green); font-size: 13px; letter-spacing: 1px; word-break: break-all; }
      .bksp-bytefeed .b7f { color: var(--green); font-weight: 700; }
      .bksp-bytefeed .b08 { color: #ffaa00; font-weight: 700; }
      .bksp-bytefeed .b-printable { color: var(--text-dim); }
      .bksp-action { display: inline-block; padding: 2px 12px; border: 1px solid var(--border); color: var(--green); font-weight: 700; letter-spacing: 2px; min-width: 80px; text-align: center; }
      .bksp-action[data-action="char"] { color: var(--green); border-color: var(--green-dim); }
      .bksp-action[data-action="word"] { color: #ff3333; border-color: #ff3333; }
      .bksp-action[data-action="type"] { color: var(--text-dim); border-color: var(--green-dim); }
      .bksp-action.bksp-flash { animation: bksp-actflash 0.45s ease-out; }
      .bksp-decoder.bksp-rm .bksp-action.bksp-flash { animation: none; }
      @keyframes bksp-actflash { 0% { background: var(--green-glow-strong); } 100% { background: transparent; } }
      .bksp-keyrow { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 16px; }
      .bksp-key { background: var(--bg-card); border: 1px solid var(--green-dim); color: var(--green); padding: 10px 6px; font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 1px; cursor: pointer; min-height: 48px; min-width: 48px; text-align: center; touch-action: manipulation; line-height: 1.3; transition: background .12s, border-color .12s, transform .08s; }
      .bksp-key:hover, .bksp-key:focus-visible { background: var(--green-glow); border-color: var(--green); outline: none; }
      .bksp-key:active { background: var(--green); color: #000; transform: scale(0.97); }
      .bksp-key small { display: block; font-size: 9px; color: var(--text-muted); letter-spacing: 1px; margin-top: 2px; font-weight: 400; }
      .bksp-hidden-input { position: absolute; opacity: 0; pointer-events: none; left: -9999px; width: 1px; height: 1px; }
      .bksp-hint { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.5px; text-align: center; margin-top: 14px; }
      .bksp-hint.is-mobile { display: none; }
      .bksp-decoder.bksp-mode-mobile .bksp-hint.is-desktop { display: none; }
      .bksp-decoder.bksp-mode-mobile .bksp-hint.is-mobile { display: block; }
      .bksp-decoder.bksp-mode-bug-on .bksp-screen { box-shadow: inset 0 0 0 1px rgba(255,51,51,0.18); }
      .bksp-decoder.bksp-mode-bug-on:not(.bksp-rm) .bksp-screen::after { content: 'BUG MODE'; position: absolute; top: 8px; right: 12px; font-size: 9px; color: #ff3333; letter-spacing: 2px; font-weight: 700; opacity: 0.7; }
      .bksp-decoder:not(.bksp-mode-bug-on):not(.bksp-rm) .bksp-screen::after { content: 'FIXED'; position: absolute; top: 8px; right: 12px; font-size: 9px; color: var(--green); letter-spacing: 2px; font-weight: 700; opacity: 0.5; }

      /* ===== B: signal-flow-trace ===== */
      .bksp-flow { font-family: 'JetBrains Mono', monospace; }
      .bksp-flow-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 10px; flex-wrap: wrap; }
      .bksp-flow-svg { width: 100%; height: auto; display: block; }
      .bksp-flow-box { fill: var(--bg-card); stroke: var(--green-dim); stroke-width: 1.5; transition: fill .25s, stroke .25s, filter .25s; }
      .bksp-flow-box.is-passed { fill: rgba(0,255,65,0.10); stroke: var(--green); }
      .bksp-flow-box.is-active { fill: rgba(0,255,65,0.25); stroke: #00ff41; filter: drop-shadow(0 0 8px #00ff41); }
      .bksp-flow-box.is-bad    { fill: rgba(255,51,51,0.18); stroke: #ff3333; filter: drop-shadow(0 0 10px #ff3333); }
      .bksp-flow-label { fill: var(--green); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
      .bksp-flow-box.is-bad ~ .bksp-flow-label, .bksp-flow-label.is-bad { fill: #ff3333; }
      .bksp-flow-byte { fill: var(--text-dim); font-size: 10px; letter-spacing: 1px; }
      .bksp-flow-line { stroke: var(--green-dim); stroke-width: 2; fill: none; opacity: 0.4; stroke-dasharray: 4 4; }
      .bksp-flow-pulse { fill: #00ff41; filter: drop-shadow(0 0 8px #00ff41); transition: fill .15s, filter .15s; }
      .bksp-flow-pulse.is-bad { fill: #ff3333; filter: drop-shadow(0 0 12px #ff3333); }
      .bksp-flow-pulse.is-hidden { opacity: 0; }
      .bksp-flow.bksp-rm .bksp-flow-box { transition: none; }
      .bksp-flow-result { font-size: 11px; color: var(--text-muted); text-align: center; text-transform: uppercase; letter-spacing: 2px; margin-top: 12px; min-height: 18px; line-height: 1.4; }
      .bksp-flow-result.is-bad { color: #ff3333; font-weight: 700; }
      .bksp-flow-result.is-good { color: var(--green); font-weight: 700; }
      .bksp-flow-result code { background: transparent; border: 0; padding: 0; color: inherit; font-weight: 700; }
      .bksp-flow-bunlabel { fill: #ff3333; font-weight: 700; font-size: 10px; letter-spacing: 1.5px; }

      /* ===== C: pty-fork-roads ===== */
      .bksp-fork { font-family: 'JetBrains Mono', monospace; }
      .bksp-fork-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
      .bksp-fork-svg { width: 100%; height: auto; display: block; }
      .bksp-fork-node { fill: var(--bg-card); stroke: var(--green-dim); stroke-width: 1.5; }
      .bksp-fork-node.is-mintty { stroke: var(--green); }
      .bksp-fork-node.is-conpty { stroke: #ff3333; }
      .bksp-fork-text { fill: var(--green); font-size: 12px; font-weight: 700; letter-spacing: 1px; }
      .bksp-fork-text.is-bad { fill: #ff3333; }
      .bksp-fork-sub { fill: var(--text-dim); font-size: 10px; letter-spacing: 1px; }
      .bksp-fork-path { fill: none; stroke: var(--green-dim); stroke-width: 2.5; stroke-dasharray: 8 6; opacity: 0.5; }
      .bksp-fork-path.is-mintty { stroke: var(--green); opacity: 1; animation: bksp-dash-flow 1.4s linear infinite; }
      .bksp-fork-path.is-conpty { stroke: #ff3333; opacity: 1; animation: bksp-dash-flow 1.4s linear infinite; }
      .bksp-fork.bksp-rm .bksp-fork-path { animation: none; opacity: 1; }
      .bksp-fork.bksp-rm .bksp-fork-path { stroke-dasharray: 0; }
      .bksp-fork.bksp-rm .bksp-fork-path.is-mintty { stroke: var(--green); }
      .bksp-fork.bksp-rm .bksp-fork-path.is-conpty { stroke: #ff3333; }
      @keyframes bksp-dash-flow { to { stroke-dashoffset: -28; } }
      .bksp-fork-tooltip { background: #000; border: 1px solid var(--green-dim); padding: 12px 16px; font-size: 12px; color: var(--white); line-height: 1.6; margin-top: 14px; min-height: 50px; }
      .bksp-fork-tooltip strong { display: block; margin-bottom: 4px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; }
      .bksp-fork-tooltip.is-good { border-color: var(--green); }
      .bksp-fork-tooltip.is-bad  { border-color: #ff3333; }
      .bksp-fork-tooltip.is-good strong { color: var(--green); }
      .bksp-fork-tooltip.is-bad  strong { color: #ff3333; }
      .bksp-fork-keypress { fill: var(--green); font-size: 11px; font-weight: 700; letter-spacing: 2px; }
      .bksp-fork-result { font-size: 13px; font-weight: 700; }

      /* ===== D: swap-applied ===== */
      .bksp-swap { font-family: 'JetBrains Mono', monospace; }
      .bksp-swap-controls { display: flex; gap: 10px; justify-content: center; margin-bottom: 16px; flex-wrap: wrap; }
      .bksp-swap-stage { background: #000; border: 1px solid var(--border); padding: 18px; margin-bottom: 14px; }
      .bksp-swap-svg { width: 100%; height: auto; display: block; max-height: 300px; }
      .bksp-swap-keybox { fill: none; stroke: var(--green-dim); stroke-width: 1.5; }
      .bksp-swap-keytitle { fill: var(--green); font-size: 13px; font-weight: 700; letter-spacing: 1px; }
      .bksp-swap-keysub { fill: var(--text-muted); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; }
      .bksp-swap-bytewrap { transition: transform .7s cubic-bezier(.7,0,.3,1); will-change: transform; }
      .bksp-swap.bksp-rm .bksp-swap-bytewrap { transition: none; }
      .bksp-swap-bytebox { fill: var(--bg-card); stroke: var(--green); stroke-width: 2; }
      .bksp-swap-bytebox.is-08 { stroke: #ffaa00; }
      .bksp-swap-bytetext { fill: var(--green); font-size: 24px; font-weight: 700; letter-spacing: 1px; text-anchor: middle; }
      .bksp-swap-bytetext.is-08 { fill: #ffaa00; }
      .bksp-swap-arrow { stroke: var(--green-dim); stroke-width: 1.5; fill: none; opacity: 0.5; stroke-dasharray: 3 3; }
      .bksp-swap-resultline { fill: var(--text-muted); font-size: 11px; letter-spacing: 1px; }
      .bksp-swap-resultline.is-bad  { fill: #ff3333; font-weight: 700; }
      .bksp-swap-resultline.is-good { fill: var(--green);  font-weight: 700; }
      .bksp-swap-claude { background: #000; border: 1px solid var(--border); padding: 14px 18px; text-align: center; transition: border-color .3s; }
      .bksp-swap-claude.is-good { border-color: var(--green); box-shadow: inset 0 0 30px var(--green-glow); }
      .bksp-swap-claude.is-bad  { border-color: #ff3333; box-shadow: inset 0 0 30px rgba(255,51,51,0.10); }
      .bksp-swap-claude-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 8px; }
      .bksp-swap-claude-text { font-size: 14px; color: var(--white); line-height: 1.5; }
      .bksp-swap-claude.is-good .bksp-swap-claude-text { color: var(--green); }
      .bksp-swap-claude.is-bad  .bksp-swap-claude-text { color: #ff3333; }
      .bksp-swap-claude-text strong { font-weight: 700; }

      @media (max-width: 600px) {
        .bksp-anim { padding: 16px; overflow: hidden; }
        .bksp-anim svg { width: 100%; min-width: 0; }
        .bksp-decoder-head { flex-direction: column; align-items: flex-start; gap: 8px; }
        .bksp-prompt { font-size: 15px; }
        .bksp-keyrow { grid-template-columns: 1fr 1fr; }
        .bksp-keyrow .bksp-key.bksp-tap-type { grid-column: 1 / -1; }
        .bksp-feedrow { grid-template-columns: 1fr; gap: 4px; }
        .bksp-feedrow dt { font-size: 10px; }
        .bksp-flow-head { flex-direction: column; align-items: stretch; gap: 8px; }
        .bksp-flow-head .bksp-flow-controls { display: flex; gap: 8px; flex-wrap: wrap; }
        .bksp-fork-tabs .bksp-btn { flex: 1; min-width: 0; }
        .bksp-swap-stage { padding: 10px; }
      }