/* QEC explorer and its entry point; existing portfolio styles stay intact. */
@font-face { font-family: "STIX Two Math"; src: url("assets/fonts/STIXTwoMath-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }
.hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 28px; }
.hero-action-links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.hero-action-links .hero-profile-link, .hero .hero-action-links .text-link { margin: 0; }
.hero-actions .hero-qec-link { margin: 0; width: 100%; max-width: 400px; }
@media (max-width: 899px) {
  .hero .hero-foot { flex-wrap: wrap; gap: 16px 20px; }
  .hero .hero-foot .edition { display: block; flex-basis: 100%; font-size: 9px; }
}
@media (min-width: 900px) and (min-height: 600px) {
  :root { --first-frame-header: clamp(76px, 10svh, 100px); --first-portrait-height: clamp(300px, 52svh, 480px); }
  .header { height: var(--first-frame-header); }
  .hero { height: calc(100vh - var(--first-frame-header)); height: calc(100svh - var(--first-frame-header)); min-height: 0; display: flex; flex-direction: column; overflow: visible; }
  .hero-meta, .hero-foot { flex-shrink: 0; }
  .hero .portrait-hero { flex: 1; min-height: 0; padding: 0; grid-template-columns: minmax(0, 1.2fr) minmax(0, .85fr); gap: 6%; }
  .hero .portrait-hero h1 { font-size: clamp(62px, min(7.4vw, 10svh), 112px); }
  .hero .portrait-hero .overline { margin-bottom: clamp(14px, 2svh, 24px); }
  .hero .portrait-hero .hero-copy p { max-width: 500px; margin-top: clamp(14px, 2svh, 24px); font-size: 14px; line-height: 1.75; }
  .hero .hero-actions { gap: clamp(14px, 2svh, 18px); margin-top: clamp(20px, calc(2svh + 6px), 26px); }
  .hero .hero-portrait { width: min(100%, calc(var(--first-portrait-height) * .75)); }
  .hero .hero-portrait img { height: var(--first-portrait-height); }
  .hero .hero-foot { padding: 12px 0 16px; }
}
@media (min-width: 900px) and (min-height: 600px) and (max-height: 690px) {
  .hero { padding-top: 16px; }
  .hero .portrait-hero h1 { font-size: clamp(54px, min(7.4vw, 9.4svh), 64px); }
  .hero .portrait-hero .overline { margin-bottom: 10px; }
  .hero .portrait-hero .hero-copy p { margin-top: 12px; line-height: 1.7; }
  .hero .hero-actions { gap: 12px; margin-top: 18px; }
  .hero .hero-qec-link { padding: 12px 15px; }
  .hero .hero-foot { padding: 8px 0 12px; }
}
.hero-qec-link { display: flex; align-items: center; gap: 17px; max-width: 400px; margin-top: 29px; padding: 17px 19px; border: 1px solid #9b3e4b38; background: #9b3e4b04; color: var(--orange); border-radius: 2px; transition: border-color .2s, background .2s; }
.hero-qec-link:hover { background: #9b3e4b09; border-color: #9b3e4b80; }
.hero-qec-link > svg { flex: 0 0 40px; transition: transform .3s; }
.hero-qec-link:hover > svg { transform: rotate(12deg); }
.hero-qec-copy { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.hero-qec-copy small { color: var(--muted); font: 9px/1.6 var(--mono); letter-spacing: .7px; text-transform: uppercase; }
.hero-qec-copy strong { font: 26px/1.1 var(--serif); font-weight: 400; letter-spacing: -.4px; }
.hero-qec-copy > span { color: var(--muted); font: 11px/1.6 var(--sans); }
.hero-qec-arrow { margin-left: auto; font: 25px/1 var(--sans); transition: transform .2s; }
.hero-qec-link:hover .hero-qec-arrow { transform: translate(3px, 3px); }
.header a[href="#playground"] .nav-dot { position: relative; width: 6px; height: 6px; color: var(--orange); box-shadow: 0 0 6px #9b3e4b30; }
.header a[href="#playground"] .nav-dot::after { content: ""; position: absolute; inset: -4px; border: 1px solid currentColor; border-radius: 50%; opacity: 0; animation: qec-nav-pulse 1.6s ease-out 3; }
.header a[href="#playground"]:is(:hover, :focus-visible) .nav-dot::after { animation: qec-nav-pulse-hover 1.5s ease-out 2; }
@keyframes qec-nav-pulse { 0% { transform: scale(.5); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes qec-nav-pulse-hover { 0% { transform: scale(.5); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }
.qec-section {
  --qec-line: #d5d0c4;
  --qec-muted: #68695f;
  --qec-dark: #22251f;
  --qec-rose: #e6a1a6;
  --qec-sage: #b0c3aa;
  padding: 85px 4.5% 55px;
  background: linear-gradient(var(--paper), #eeebe2 55%, var(--paper));
  border-top: 1px solid var(--line);
}
.qec-section [hidden] { display: none !important; }
.qec-section button { -webkit-tap-highlight-color: transparent; }
.qec-section button:disabled { opacity: .38; cursor: default; }
.qec-section :is(button, a, input, select, summary, [tabindex]):focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.qec-kicker { display: flex; justify-content: space-between; gap: 24px; color: var(--qec-muted); }
.qec-kicker > :last-child { font-size: 10px; }
.qec-heading-grid { display: grid; grid-template-columns: 1.7fr 1fr; align-items: end; gap: 70px; margin: 32px 0 48px; }
.qec-heading h2 { font-size: clamp(44px, 4.8vw, 78px); font-weight: 400; line-height: 1.03; letter-spacing: -2.6px; }
.qec-heading h2 em { color: var(--orange); font-size: 1.12em; }
.qec-intro { max-width: 350px; padding-bottom: 4px; justify-self: end; }
.qec-intro p { font-size: 13px; line-height: 1.85; color: var(--qec-muted); }
.qec-intro p + p { margin-top: 11px; }
.qec-shell { display: grid; grid-template-columns: 228px minmax(0, 1fr); border: 1px solid var(--qec-line); background: #f7f5eea6; }
.qec-library { border-right: 1px solid var(--qec-line); padding: 27px 15px 30px; display: flex; flex-direction: column; }
.qec-library-heading { display: flex; justify-content: space-between; align-items: center; padding: 0 11px 27px; }
.qec-library-heading > :last-child { font: 11px var(--mono); color: var(--qec-muted); }
.qec-code-group { padding-bottom: 24px; }
.qec-group-label { display: block; font: 9px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .7px; color: var(--qec-muted); margin: 0 11px 9px; }
.qec-choice { width: 100%; display: flex; align-items: center; gap: 10px; border: 1px solid transparent; padding: 14px 10px; background: none; text-align: left; font-size: 12px; transition: background .2s, border-color .2s; border-radius: 2px; }
.qec-choice + .qec-choice { margin-top: 3px; }
.qec-choice small { display: block; font-size: 10px; line-height: 1.5; margin-top: 5px; color: var(--qec-muted); font-weight: 400; }
.qec-choice-icon { width: 25px; flex: 0 0 25px; text-align: center; font: 25px/1 var(--serif); color: var(--qec-muted); }
.qec-choice-icon svg { width: 23px; height: 23px; display: block; }
.qec-choice[data-qec-code=repetition] .qec-choice-icon { font: 14px var(--mono); letter-spacing: -3px; }
.qec-choice-arrow { margin-left: auto; opacity: 0; color: var(--orange); }
.qec-choice[aria-pressed=true] { background: #9b3e4b0b; border-color: #9b3e4b40; color: var(--orange); }
.qec-choice[aria-pressed=true] .qec-choice-icon { color: var(--orange); }
.qec-choice[aria-pressed=true] .qec-choice-arrow { opacity: 1; }
.qec-choice:hover { background: #9b3e4b09; }
.qec-taxonomy { margin: 5px 10px 20px; border-top: 1px solid var(--qec-line); padding-top: 17px; color: var(--qec-muted); }
.qec-taxonomy summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10px; line-height: 1.6; cursor: pointer; list-style: none; }
.qec-taxonomy summary::-webkit-details-marker { display: none; }
.qec-taxonomy summary span { font-size: 17px; color: var(--orange); }
.qec-taxonomy[open] summary span { transform: rotate(45deg); }
.qec-taxonomy p { font-size: 11px; line-height: 1.8; padding-top: 11px; }
.qec-library-foot { margin: auto 10px 0; padding-top: 70px; color: var(--qec-muted); }
.qec-library-foot > span { font-size: 31px; color: var(--orange); }
.qec-library-foot p { font: italic 19px/1.35 var(--serif); margin-top: 13px; }
.qec-studio { padding: 29px 30px 27px; min-width: 0; }
.qec-code-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 25px; }
.qec-code-title > .eyebrow { font-size: 9px; color: var(--qec-muted); letter-spacing: .7px; }
.qec-code-title h3 { font: 40px/1.15 var(--serif); letter-spacing: -.6px; margin: 10px 0 7px; }
.qec-code-title p { font-size: 12px; line-height: 1.5; color: var(--qec-muted); }
.qec-experiment-kind { color: var(--qec-muted); font: 11px/1.7 var(--sans); margin: -7px 0 15px; }
.qec-experiment-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 18px; margin: -7px 0 15px; }
.qec-experiment-toolbar .qec-experiment-kind { flex: 1 1 250px; margin: 0; }
.qec-export-action { min-width: 128px; min-height: 44px; margin-left: auto; padding: 11px 13px; border: 1px solid var(--qec-line); border-radius: 2px; background: transparent; color: var(--ink); font: 12px var(--mono); }
.qec-export-action span { color: var(--orange); margin-left: 9px; }
.qec-export-action:hover { border-color: var(--orange); color: var(--orange); }
.qec-export-action:disabled { opacity: .65; }
.qec-stats { display: flex; gap: 24px; margin: 10px 0 0; flex-shrink: 0; }
.qec-stat { display: flex; flex-direction: column-reverse; gap: 7px; }
.qec-stat dt { color: var(--qec-muted); font: 9px/1.5 var(--mono); }
.qec-stat dd { margin: 0; font: 25px/1 var(--serif); color: var(--orange); }
.qec-figure { background: var(--qec-dark); color: var(--paper); border-radius: 2px; overflow: hidden; position: relative; }
.qec-figure-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 19px 23px 0; min-height: 39px; color: #c3c5b8; }
.qec-figure-top .eyebrow { font-size: 9px; letter-spacing: .8px; }
.qec-figure-index { font: 9px var(--mono); color: #b0b5a7; }
.qec-view-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 20px; padding: 14px 23px 10px; }
.qec-view-bar > span { color: #b8c0ae; font: 10px/1.6 var(--sans); }
.qec-camera-controls { display: flex; align-items: center; gap: 3px; }
.qec-camera-controls button { min-width: 29px; height: 29px; padding: 5px 7px; border: 1px solid transparent; border-radius: 2px; background: transparent; color: #ced1c2; font: 13px/1 var(--mono); }
.qec-camera-controls button:hover { background: #ffffff09; border-color: #b8c0ae44; }
.qec-camera-controls button[aria-pressed=true] { background: #ffffff08; border-color: #d1aa9455; color: #e9c8b5; }
.qec-camera-controls button:disabled { opacity: .35; }
.qec-camera-modes { display: flex; gap: 3px; margin-right: 7px; padding-right: 10px; border-right: 1px solid #b8c0ae33; }
.qec-camera-modes button { font: 10px/1 var(--mono); }
#qec-zoom { min-width: 34px; text-align: center; font: 10px var(--mono); color: #c3c5b8; }
.qec-view-toggle { display: flex; gap: 3px; margin-left: auto; }
.qec-view-toggle button { border: 1px solid transparent; background: none; color: #c3c5b8; font: 10px var(--mono); padding: 8px 10px; border-radius: 2px; }
.qec-view-toggle button[aria-pressed=true] { border-color: #adbd9e55; color: #f7f5ee; background: #ffffff08; }
.qec-figure :is(button, [tabindex]):focus-visible { outline-color: #ecc4bc; }
.qec-visual { position: relative; width: 100%; min-width: 0; aspect-ratio: 780 / 430; min-height: 280px; }
.qec-visual[data-view-mode=rotate] { cursor: grab; touch-action: pan-y; }
.qec-visual[data-view-mode=pan] { cursor: grab; touch-action: none; }
.qec-visual[data-view-mode=rotate] .qec-gkp-target { cursor: grab; touch-action: pan-y; }
.qec-visual[data-view-mode=pan] .qec-gkp-target { cursor: grab; touch-action: none; }
.qec-visual.is-dragging, .qec-visual.is-dragging * { cursor: grabbing !important; user-select: none; }
.qec-visual > svg { display: block; width: 100%; height: 100%; position: absolute; inset: 0; overflow: visible; font-size: 11px; }
.qec-figure figcaption { display: flex; justify-content: space-between; gap: 15px; align-items: center; padding: 16px 23px 18px; border-top: 1px solid #b9c2b019; font: 10px/1.65 var(--mono); color: #c0c5b6; }
.qec-figure figcaption > span { max-width: 65%; }
.qec-legend { display: flex; align-items: center; justify-content: flex-end; gap: 14px; flex-wrap: wrap; font-size: 9px; }
.qec-legend span { white-space: nowrap; }
.qec-legend i { display: inline-block; width: 6px; height: 6px; border: 1px solid currentColor; margin-right: 5px; }
.qec-legend .qec-legend-x { color: #e3c2a8; }
.qec-legend .qec-legend-z { color: var(--qec-sage); }
.qec-legend .qec-legend-error { color: var(--qec-rose); }
.qec-legend .qec-legend-error i { border-radius: 50%; background: currentColor; }
.qec-legend .qec-legend-positive { color: #f4a8b7; }
.qec-legend .qec-legend-negative { color: #5fd2c8; }
.qec-legend .qec-legend-gold { color: #d4b17e; }
.qec-legend .qec-legend-zero { color: #b8c0ae; }
.qec-legend .qec-legend-positive i, .qec-legend .qec-legend-negative i { background: currentColor; }
.qec-controls { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 0; flex-wrap: wrap; }
.qec-repetition-options { display: flex; align-items: center; justify-content: space-between; gap: 15px 24px; width: 100%; flex-wrap: wrap; padding-bottom: 17px; border-bottom: 1px solid var(--qec-line); }
.qec-control-block { display: flex; gap: 13px; align-items: center; }
.qec-control-label, .qec-control-block > label { font: 10px/1.7 var(--mono); color: var(--qec-muted); }
.qec-segmented { display: flex; gap: 3px; }
.qec-segmented button { padding: 9px 13px; min-width: 35px; min-height: 35px; border: 1px solid var(--qec-line); background: transparent; font: 11px var(--mono); border-radius: 2px; }
.qec-segmented button[aria-pressed=true] { color: var(--orange); background: #9b3e4b0a; border-color: #9b3e4b77; }
.qec-input-row { display: flex; align-items: center; gap: 10px; }
.qec-control-block input[type=number] { width: 63px; min-height: 35px; padding: 7px; background: transparent; border: 1px solid var(--qec-line); color: var(--ink); font: 12px var(--mono); border-radius: 2px; }
.qec-range-control { display: grid; grid-template-columns: 1fr auto; gap: 0 15px; min-width: 170px; flex: 1; max-width: 260px; }
.qec-range-control label { font: 10px/1.6 var(--mono); color: var(--qec-muted); }
.qec-range-control output { font: 11px/1.6 var(--mono); color: var(--orange); min-width: 50px; text-align: right; }
.qec-range-control input { grid-column: 1 / -1; width: 100%; margin: 8px 0 0; }
.qec-reset { background: none; border: 0; border-bottom: 1px solid var(--qec-line); padding: 9px 0; font: 11px var(--mono); color: var(--qec-muted); }
.qec-cycle { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--qec-line); }
.qec-cycle button { display: flex; align-items: center; gap: 11px; text-align: left; background: transparent; border: none; padding: 18px 10px; font-size: 12px; color: var(--qec-muted); position: relative; }
.qec-cycle button + button { border-left: 1px solid var(--qec-line); }
.qec-cycle button > :first-child { font: 10px var(--mono); color: var(--qec-muted); }
.qec-cycle button > :last-child { margin-left: auto; font-size: 15px; }
.qec-cycle button[aria-pressed=true] { color: var(--orange); background: #9b3e4b08; box-shadow: inset 0 -2px var(--orange); }
.qec-cycle button:not(:disabled):hover { color: var(--orange); background: #9b3e4b07; }
.qec-cycle button[aria-expanded=true] { color: var(--orange); background: #9b3e4b0c; }
.qec-cycle button.is-next { color: var(--orange); background: #9b3e4b0d; box-shadow: inset 0 -2px var(--orange); }
.qec-cycle button.is-complete[aria-pressed=true] { box-shadow: none; background: transparent; color: var(--qec-muted); }
.qec-applied-cue { display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; margin-top: 14px; padding: 18px 20px; border: 1px solid #9b3e4b40; background: #9b3e4b05; color: var(--qec-muted); font: 12px/1.8 var(--sans); }
.qec-applied-cue > :first-child { color: var(--orange); font: 16px var(--mono); }
.qec-guidance-copy { flex: 1; min-width: 180px; }
.qec-guidance-copy strong { display: block; color: var(--ink); font-size: 12px; font-weight: 500; }
.qec-guidance-copy p { margin-top: 3px; max-width: 460px; }
.qec-next-action { display: inline-flex; justify-content: center; align-items: center; gap: 22px; margin-left: auto; min-height: 44px; padding: 12px 17px; border: 1px solid var(--orange); border-radius: 2px; background: var(--orange); color: var(--paper); font: 12px/1.5 var(--sans); text-align: left; transition: background .18s, transform .18s; }
.qec-next-action:hover { background: #85313d; }
.qec-next-action > :last-child { font-size: 17px; }
.qec-next-action:active { transform: translateY(1px); }
.qec-next-action[aria-disabled=true] { cursor: default; opacity: .65; }
.qec-error-picker { margin-top: 16px; padding: 22px; border: 1px solid #9b3e4b40; background: #f1eae280; }
.qec-error-picker h4 { margin: 5px 0 11px; font: 29px/1.2 var(--serif); color: var(--ink); font-weight: 400; }
.qec-error-picker > .eyebrow { color: var(--orange); font-size: 9px; }
.qec-error-picker > p { font-size: 12px; line-height: 1.8; color: var(--qec-muted); }
.qec-noise-choices { display: flex; gap: 10px; margin: 17px 0; flex-wrap: wrap; }
.qec-noise-choice { flex: 1; min-width: 120px; padding: 14px; border: 1px solid var(--qec-line); background: #f7f5ee88; text-align: left; border-radius: 2px; }
.qec-noise-choice strong { display: block; font-size: 12px; font-weight: 500; }
.qec-noise-choice small { display: block; margin-top: 7px; color: var(--qec-muted); font: 11px/1.7 var(--sans); }
.qec-noise-choice[aria-pressed=true] { border-color: #9b3e4b80; background: #9b3e4b08; color: var(--orange); }
.qec-noise-inputs { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin: 18px 0; }
.qec-noise-inputs input:disabled { cursor: default; opacity: .4; }
.qec-noise-inputs .qec-range-control { min-width: 160px; }
.qec-noise-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--qec-line); }
.qec-noise-actions button { min-height: 44px; padding: 11px 17px; font-size: 12px; border: 1px solid var(--qec-line); border-radius: 2px; background: transparent; }
.qec-noise-actions [data-noise-apply] { background: var(--orange); border-color: var(--orange); color: var(--paper); }
#qec-noise-preview { font: 11px/1.7 var(--mono); color: var(--orange); overflow-wrap: anywhere; }
.qec-readout { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 23px 0; min-height: 110px; border-bottom: 1px solid var(--qec-line); }
.qec-result { display: flex; gap: 13px; align-items: flex-start; max-width: 530px; }
.qec-result-mark { color: var(--orange); font: 22px/1 var(--mono); }
.qec-result strong { font-size: 12px; font-weight: 500; }
.qec-result p { font-size: 12px; color: var(--qec-muted); line-height: 1.75; margin-top: 7px; }
.qec-syndrome { text-align: right; min-width: 120px; max-width: 230px; }
.qec-syndrome > span { display: block; font: 9px/1.6 var(--mono); color: var(--qec-muted); }
.qec-syndrome strong { display: block; font: 20px/1.5 var(--serif); color: var(--orange); margin-top: 5px; }
.qec-syndrome-bits { display: flex; justify-content: flex-end; gap: 5px; margin-top: 7px; }
.qec-syndrome-bits span { display: grid; place-items: center; width: 23px; height: 26px; border: 1px solid var(--qec-line); font: 11px var(--mono); }
.qec-syndrome-bits .is-one { color: var(--orange); border-color: #9b3e4b66; background: #9b3e4b0a; }
.qec-syndrome-bits { flex-wrap: wrap; }
.qec-syndrome-bits button { border: 0; padding: 3px 0; background: transparent; }
.qec-syndrome-bits button span { width: 25px; height: 29px; transition: background .15s, border-color .15s; }
.qec-syndrome-bits button:is(:hover, .is-traced, [aria-pressed=true]) span { border-color: var(--orange); background: #9b3e4b13; color: var(--orange); }
#qec-syndrome-check { width: 100%; margin-top: 10px; padding: 8px; color: var(--orange); border: 1px solid var(--qec-line); border-radius: 2px; background: transparent; font: 10px/1.6 var(--mono); }
.qec-inspector { padding: 20px; margin-top: 15px; border: 1px solid #9b3e4b35; background: #9b3e4b03; }
.qec-inspector-head { display: flex; justify-content: space-between; align-items: start; gap: 20px; }
.qec-inspector-head .eyebrow, .qec-story-heading .eyebrow { color: var(--orange); font-size: 9px; }
.qec-inspector h4 { margin: 6px 0 0; font: 25px/1.2 var(--serif); font-weight: 400; }
.qec-inspector-idle { display: flex; gap: 15px; align-items: center; }
.qec-inspector-idle > span { font: 28px var(--serif); color: var(--orange); }
.qec-inspector-idle h4 { font-size: 21px; margin: 0; }
.qec-inspector-idle p { margin-top: 5px; font: 11px/1.7 var(--sans); color: var(--qec-muted); }
.qec-inspector-body { display: flex; gap: 20px 35px; justify-content: space-between; margin-top: 20px; flex-wrap: wrap; }
.qec-inspector-label { font: 9px/1.7 var(--mono); color: var(--qec-muted); }
.qec-inspector-operator { margin: 8px 0 12px; font: 20px/1.4 var(--serif); color: var(--orange); }
.qec-support-bits { display: flex; gap: 5px; flex-wrap: wrap; }
.qec-support-bits > span { display: flex; align-items: baseline; gap: 2px; border: 1px solid var(--qec-line); padding: 6px 8px; font: 11px/1.6 var(--mono); color: var(--qec-muted); }
.qec-support-bits b { padding-left: 8px; font-weight: 500; color: var(--ink); }
.qec-support-bits .is-one { border-color: #9b3e4b55; background: #9b3e4b09; }
.qec-support-bits .is-one b { color: var(--orange); }
.qec-inspector-parity { margin-top: 10px; font: 12px/1.8 var(--mono); overflow-wrap: anywhere; }
.qec-inspector-parity strong { color: var(--orange); font-weight: 500; white-space: nowrap; }
.qec-inspector-parity > span { display: block; color: var(--qec-muted); font-size: 11px; margin-top: 4px; }
.qec-inspector-note { padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--qec-line); font: 11px/1.8 var(--sans); color: var(--qec-muted); }
.qec-check-mark[data-qec-trace], .qec-matrix-row[data-qec-trace] { cursor: pointer; }
.qec-matrix-row[data-qec-trace]:hover { fill: #e1b77b22; }
.qec-shor-story { margin-top: 25px; padding-bottom: 25px; border-bottom: 1px solid var(--qec-line); }
.qec-story-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.qec-story-heading h4 { font: 31px/1.15 var(--serif); font-weight: 400; margin: 8px 0 0; }
.qec-story-heading h4 em { color: var(--orange); }
.qec-story-syndrome { color: var(--orange); font: 16px/1.5 var(--mono); white-space: nowrap; padding-bottom: 2px; }
.qec-shor-story > p { color: var(--qec-muted); font: 12px/1.8 var(--sans); margin-top: 12px; max-width: 560px; }
.qec-story-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 20px; }
.qec-story-options button { display: flex; flex-direction: column; text-align: left; border: 1px solid var(--qec-line); border-radius: 2px; background: transparent; padding: 17px 13px; gap: 13px; }
.qec-story-options button > span { color: var(--qec-muted); font: 9px/1.6 var(--mono); }
.qec-story-options strong { font: 20px/1.2 var(--serif); font-weight: 400; }
.qec-story-options small { margin-top: auto; font: 13px/1.6 var(--mono); color: var(--orange); }
.qec-story-options button:is(:hover, [aria-pressed=true]) { background: #9b3e4b08; border-color: #9b3e4b77; }
.qec-story-options button[aria-pressed=true] > span { color: var(--orange); }
.qec-story-detail { margin-top: 17px; padding: 18px; background: #ece8df80; border-left: 2px solid #9b3e4b77; }
.qec-story-equation { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; font: 9px/1.8 var(--mono); color: var(--qec-muted); }
.qec-story-equation b { display: inline-block; margin-top: 5px; font: 23px/1.2 var(--serif); color: var(--orange); }
.qec-story-detail p { font-size: 12px; line-height: 1.8; margin-top: 14px; color: var(--qec-muted); }
.qec-story-key { display: flex; gap: 10px 20px; flex-wrap: wrap; font: 10px/1.7 var(--mono); }
.qec-notebook-tabs { display: flex; align-items: center; gap: 26px; padding-top: 7px; border-bottom: 1px solid var(--qec-line); }
.qec-notebook-tabs button { border: 0; background: none; font-size: 12px; padding: 16px 0; color: var(--qec-muted); }
.qec-notebook-tabs button[aria-selected=true] { color: var(--orange); box-shadow: inset 0 -1px var(--orange); }
.qec-notebook-tabs button span { margin-left: 5px; }
.qec-notebook-label { font: 9px var(--mono); letter-spacing: 1px; color: var(--qec-muted); margin-left: auto; }
.qec-panel { padding: 25px 0 5px; min-height: 190px; }
.qec-concept-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.qec-concept-grid p { font-size: 12px; line-height: 1.85; color: var(--qec-muted); }
.qec-concept-grid .qec-description { color: var(--ink); font-size: 13px; }
.qec-try { margin-top: 16px; border-left: 2px solid #9b3e4b66; padding: 3px 0 3px 13px; font-size: 12px; line-height: 1.8; color: var(--qec-muted); }
.qec-try strong { display: block; color: var(--orange); font: 9px/1.7 var(--mono); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 5px; }
.qec-lesson-links { display: flex; flex-wrap: wrap; gap: 12px 23px; margin-top: 20px; }
.qec-lesson-links button { background: none; border: 0; border-bottom: 1px solid var(--qec-line); padding: 6px 0; color: var(--orange); font: 11px/1.6 var(--sans); text-align: left; }
.qec-lesson-links button span { margin-left: 8px; }
.qec-equation + .qec-equation { border-top: 1px solid var(--qec-line); padding-top: 22px; margin-top: 22px; }
.qec-equation > span { font: 9px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .7px; color: var(--qec-muted); }
.qec-math-scroll { width: 100%; overflow-x: auto; padding: 2px 0; }
.qec-equation math { display: block math; width: max-content; color: var(--orange); font-family: "STIX Two Math", "DejaVu Math TeX Gyre", "Cambria Math", math; font-size: 20px; margin: 20px 0; text-align: left; }
.qec-equation p { font-size: 12px; line-height: 1.9; color: var(--qec-muted); max-width: 700px; }
.qec-code-tools { display: flex; justify-content: space-between; align-items: center; gap: 15px; color: var(--qec-muted); font: 10px var(--mono); margin: -4px 0 12px; }
.qec-code-tools button { border: 1px solid var(--qec-line); background: transparent; padding: 8px 12px; border-radius: 2px; font: inherit; }
.qec-code-tools button span { margin-left: 10px; }
.qec-source { padding: 19px; margin: 0; border: 1px solid var(--qec-line); background: #eeeae166; font: 12px/1.9 var(--mono); overflow-x: auto; tab-size: 2; }
.qec-code-note { font-size: 11px; line-height: 1.8; color: var(--qec-muted); margin-top: 12px; }
.qec-code-note a { color: var(--orange); border-bottom: 1px solid #9b3e4b55; }
.qec-scope { font-size: 11px; line-height: 1.8; color: var(--qec-muted); padding: 19px 0 0; margin-top: 16px; border-top: 1px solid var(--qec-line); }
.qec-scope::before { content: "MODEL SCOPE / "; font: 9px/1.8 var(--mono); letter-spacing: .5px; color: var(--orange); }
.qec-model-details { border-top: 1px solid var(--qec-line); margin-top: 23px; padding-top: 17px; }
.qec-model-details summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; list-style: none; color: var(--orange); font: 12px/1.6 var(--sans); padding: 8px 0; }
.qec-model-details summary::-webkit-details-marker { display: none; }
.qec-model-details summary span { font-size: 20px; font-weight: 400; }
.qec-model-details[open] summary span { transform: rotate(45deg); }
.qec-model-details dl { margin: 12px 0 20px; }
.qec-model-details dl > div { display: grid; grid-template-columns: 125px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--qec-line); }
.qec-model-details dt { font: 10px/1.9 var(--mono); color: var(--orange); }
.qec-model-details dd { margin: 0; color: var(--qec-muted); font: 12px/1.85 var(--sans); }
.qec-model-details > a { display: inline-block; font: 12px/1.7 var(--sans); color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) { .qec-model-details dl > div { grid-template-columns: 1fr; gap: 4px; } }
.qec-references { display: flex; gap: 25px; padding-top: 22px; align-items: baseline; }
.qec-references > .eyebrow { white-space: nowrap; font-size: 9px; color: var(--qec-muted); }
.qec-references > div { display: flex; gap: 9px 20px; flex-wrap: wrap; }
.qec-references a { font-size: 12px; line-height: 1.75; color: var(--qec-muted); border-bottom: 1px solid var(--qec-line); padding-bottom: 4px; }
.qec-references a small { display: block; color: var(--orange); font: 9px/1.8 var(--mono); margin-bottom: 3px; }
.qec-references a:hover { color: var(--orange); }
.qec-fallback { font-size: 13px; line-height: 1.9; padding: 25px; border: 1px solid var(--qec-line); }
.qec-fallback p + p { margin-top: 12px; }
.qec-fallback a { display: inline-block; color: var(--orange); margin-top: 15px; }

/* SVG marks are actual model outputs. Colors are always paired with labels. */
.qec-svg-text { font-family: var(--mono); fill: #bdc5b4; letter-spacing: .5px; }
.qec-svg-small { font-size: 9px; }
.qec-svg-serif { font: italic 23px var(--serif); fill: #e4c7b9; }
.qec-node { cursor: pointer; outline: none; }
.qec-node .qec-node-disc { transition: fill .18s, stroke .18s; }
.qec-node:hover .qec-node-disc, .qec-node:focus-visible .qec-node-disc { stroke: #f7f5ee; stroke-width: 2.5; }
.qec-node:focus-visible .qec-node-focus { opacity: 1; }
.qec-node-focus { opacity: 0; fill: none; stroke: #f7f5ee; stroke-width: 1.5; stroke-dasharray: 3 4; }
.qec-svg-error { fill: #e6a1a6; }
.qec-gkp-target { cursor: crosshair; touch-action: none; }
.qec-svg-axis { stroke: #b6c2a937; stroke-width: 1; }
.qec-svg-grid { stroke: #b6c2a916; stroke-width: 1; }
.qec-trace { animation: qec-trace-in .5s ease-out both; }
.chapter-dock.qec-obscured { display: none !important; }
@keyframes qec-trace-in { from { opacity: .2; } to { opacity: 1; } }

@media (min-width: 1600px) {
  .qec-shell { grid-template-columns: 260px minmax(0, 1fr); }
  .qec-studio { padding: 35px 40px; }
  .qec-visual { max-height: 490px; }
  .qec-library { padding-inline: 20px; }
}
@media (max-width: 1150px) {
  .qec-shell { grid-template-columns: 200px minmax(0, 1fr); }
  .qec-library { padding-inline: 10px; }
  .qec-choice { gap: 8px; padding-inline: 7px; font-size: 12px; }
  .qec-choice-icon { width: 22px; flex-basis: 22px; }
  .qec-choice small { font-size: 9px; }
  .qec-studio { padding: 25px 23px; }
  .qec-stats { gap: 17px; }
  .qec-code-title h3 { font-size: 34px; }
  .qec-code-header { align-items: flex-start; }
  .qec-stat dt { font-size: 9px; }
  .qec-heading-grid { gap: 40px; }
  .qec-figure figcaption { font-size: 9px; padding-inline: 17px; }
  .qec-legend { gap: 9px; }
}
@media (max-width: 900px) {
  .qec-section { padding: 70px 5% 45px; }
  .qec-shell { grid-template-columns: 1fr; }
  .qec-library { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 20px; padding: 22px; border-right: 0; border-bottom: 1px solid var(--qec-line); }
  .qec-library-heading { grid-column: 1 / -1; padding: 0 0 4px; }
  .qec-code-group { padding: 0; }
  .qec-group-label { margin-left: 7px; }
  .qec-code-group:nth-of-type(2) { grid-column: 1; grid-row: 2 / span 2; }
  .qec-code-group:nth-of-type(3) { grid-column: 2; grid-row: 2; }
  .qec-code-group:nth-of-type(4) { grid-column: 2; grid-row: 3; }
  .qec-code-group:nth-of-type(5) { grid-column: 1 / -1; grid-row: 4; display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .qec-code-group:nth-of-type(5) .qec-group-label { grid-column: 1 / -1; }
  .qec-code-group:nth-of-type(5) .qec-choice { margin-top: 0; }
  .qec-taxonomy { margin: 0; grid-column: 1 / -1; padding-top: 13px; }
  .qec-taxonomy summary { justify-content: flex-start; gap: 12px; font-size: 11px; }
  .qec-library-foot { display: none; }
  .qec-choice { font-size: 12px; padding: 12px 10px; }
  .qec-choice small { font-size: 10px; }
  .qec-heading h2 { font-size: 50px; }
  .qec-heading-grid { grid-template-columns: 1.35fr 1fr; gap: 28px; }
  .qec-intro p { font-size: 12px; }
  .qec-code-title h3 { font-size: 40px; }
  .qec-stat dt { font-size: 9px; }
  .qec-code-header { align-items: center; }
  .qec-stats { gap: 25px; }
  .qec-visual { min-height: 320px; }
}
@media (max-width: 600px) {
  .hero-qec-link { max-width: 100%; padding: 15px 13px; gap: 12px; margin-top: 25px; }
  .hero-qec-copy small { font-size: 9px; letter-spacing: .4px; }
  .hero-qec-copy strong { font-size: 25px; }
  .hero-qec-copy > span { font-size: 11px; }
  .hero-qec-link > svg { width: 32px; height: 32px; flex-basis: 32px; }
  .qec-section { padding: 50px 6% 35px; }
  .qec-kicker > :last-child { display: none; }
  .qec-kicker > :first-child { font-size: 9px; }
  .qec-heading-grid { display: block; margin: 25px 0 30px; }
  .qec-heading h2 { font-size: clamp(36px, 9vw, 52px); letter-spacing: -1.5px; }
  .qec-intro { margin: 22px 0 0; max-width: 315px; }
  .qec-intro p { font-size: 12px; }
  .qec-intro p + p { margin-top: 8px; }
  .qec-library { padding: 17px 12px; gap: 17px 6px; }
  .qec-library-heading { padding-inline: 6px; }
  .qec-group-label { font-size: 9px; letter-spacing: .4px; }
  .qec-choice { font-size: 12px; padding: 10px 7px; gap: 8px; min-height: 60px; }
  .qec-choice small { font-size: 11px; }
  .qec-choice-icon { width: 17px; flex-basis: 17px; font-size: 20px; }
  .qec-choice-arrow { display: none; }
  .qec-taxonomy { margin-inline: 6px; }
  .qec-taxonomy summary { font-size: 10px; }
  .qec-studio { padding: 22px 14px; }
  .qec-code-header { display: block; margin-bottom: 20px; }
  .qec-code-title h3 { font-size: 36px; margin-top: 9px; }
  .qec-code-title > .eyebrow { font-size: 9px; }
  .qec-code-title p { font-size: 11px; }
  .qec-stats { gap: 30px; margin-top: 19px; }
  .qec-stat { gap: 5px; }
  .qec-stat dd { font-size: 23px; }
  .qec-visual { min-height: 260px; }
  .qec-visual[data-model=cat] { min-height: 570px; }
  .qec-visual[data-model=gkp] { min-height: 390px; }
  .qec-visual[data-large-code=true] { min-height: 360px; }
  .qec-figure-top { padding: 16px 12px 0; flex-wrap: wrap; }
  .qec-figure-top .eyebrow { font-size: 9px; letter-spacing: .5px; }
  .qec-figure-index { font-size: 9px; }
  .qec-view-bar { padding: 13px 12px 6px; gap: 8px; }
  .qec-view-bar > span { font-size: 12px; width: 100%; }
  .qec-camera-controls { flex-wrap: wrap; gap: 2px; }
  .qec-camera-controls button { min-width: 29px; height: 33px; padding-inline: 6px; }
  .qec-camera-modes { margin-right: 2px; padding-right: 5px; gap: 2px; }
  .qec-camera-modes button { font-size: 11px; }
  .qec-view-toggle { order: 3; width: 100%; margin-top: 6px; }
  .qec-view-toggle button { padding: 8px 11px; }
  .qec-figure figcaption { flex-direction: column; align-items: flex-start; padding: 13px 12px; gap: 11px; }
  .qec-figure figcaption > span { max-width: none; font: 12px/1.7 var(--sans); }
  .qec-legend { justify-content: flex-start; gap: 13px; font-size: 11px; }
  .qec-controls { padding-block: 17px; gap: 17px; }
  .qec-control-label, .qec-control-block > label { font-size: 12px; }
  .qec-control-block > label { max-width: 64px; }
  .qec-range-control label, .qec-range-control output { font-size: 12px; }
  .qec-range-control { max-width: none; min-width: calc(50% - 18px); }
  .qec-control-block { gap: 8px; }
  .qec-cycle { grid-template-columns: 1fr 1fr; }
  .qec-cycle button { font-size: 12px; padding: 14px 10px; }
  .qec-cycle button:nth-child(3) { border-left: 0; }
  .qec-cycle button:nth-child(n+3) { border-top: 1px solid var(--qec-line); }
  .qec-error-picker { padding: 17px 13px; }
  .qec-error-picker > p { font-size: 12px; }
  .qec-noise-choice { min-width: 110px; padding: 12px; }
  .qec-noise-choice small { font-size: 12px; }
  .qec-noise-inputs .qec-range-control { min-width: 100%; }
  .qec-applied-cue { padding: 16px 13px; font-size: 12px; gap: 12px 10px; }
  .qec-guidance-copy { min-width: 0; flex-basis: calc(100% - 28px); }
  .qec-next-action { flex-basis: 100%; margin: 2px 0 0; justify-content: space-between; }
  .qec-readout { align-items: flex-start; gap: 15px; flex-direction: column; padding-block: 20px; }
  .qec-result p { font-size: 12px; }
  .qec-result strong { font-size: 12px; }
  .qec-syndrome { display: flex; gap: 12px; align-items: center; text-align: left; max-width: none; padding-left: 35px; flex-wrap: wrap; }
  .qec-syndrome strong, .qec-syndrome-bits { margin: 0; }
  .qec-syndrome > span { font-size: 11px; }
  .qec-syndrome-bits { gap: 5px; }
  .qec-syndrome-bits button span { width: 27px; height: 31px; }
  .qec-inspector { padding: 17px 13px; }
  .qec-inspector-idle p, .qec-inspector-note { font-size: 12px; }
  .qec-inspector-body { flex-direction: column; gap: 17px; }
  .qec-story-heading { flex-direction: column; align-items: flex-start; gap: 12px; }
  .qec-story-heading h4 { font-size: 29px; }
  .qec-story-options { grid-template-columns: 1fr; }
  .qec-story-options button { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 15px; }
  .qec-story-options button > span { grid-column: 1 / -1; }
  .qec-story-options strong { font-size: 19px; }
  .qec-story-options small { margin: 0; font-size: 12px; }
  .qec-story-equation { gap: 12px; }
  .qec-story-equation b { font-size: 20px; }
  .qec-notebook-tabs { gap: 23px; }
  .qec-notebook-tabs button { font-size: 12px; }
  .qec-notebook-label { display: none; }
  .qec-concept-grid { grid-template-columns: 1fr; gap: 15px; }
  .qec-concept-grid p { font-size: 12px; }
  .qec-concept-grid .qec-description { font-size: 12px; }
  .qec-panel { padding-top: 22px; }
  .qec-equation math { font-size: 16px; }
  .qec-equation p { font-size: 12px; }
  .qec-source { padding: 13px; font-size: 12px; }
  .qec-code-tools { font-size: 9px; }
  .qec-code-tools button { padding: 9px; }
  .qec-code-tools button span { margin-left: 5px; }
  .qec-scope { font-size: 12px; }
  .qec-references { flex-direction: column; gap: 10px; }
  .qec-references > div { gap: 8px; flex-direction: column; align-items: flex-start; }
  .qec-references a { font-size: 11px; min-height: 24px; }
}
.qec-toric-patterns {
  flex: 1 0 100%;
  min-width: 0;
  margin-top: 3px;
  padding-top: 19px;
  border-top: 1px solid var(--line);
}
.qec-toric-pattern-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 11px;
}
.qec-toric-pattern-heading > span:last-child {
  color: var(--muted);
  font: 11px var(--mono);
}
.qec-toric-pattern-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.qec-toric-pattern-grid button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 111px;
  gap: 7px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  transition: background .16s ease, border-color .16s ease;
}
.qec-toric-pattern-grid button:hover,
.qec-toric-pattern-grid button[aria-pressed="true"] {
  border-color: var(--orange);
  background: #a33a4b09;
}
.qec-toric-pattern-grid button strong { font: 500 14px/1.3 var(--sans); }
.qec-toric-pattern-grid button > span { font: 11px/1.45 var(--sans); color: var(--muted); }
.qec-toric-pattern-grid button .qec-toric-pattern-index { font: 10px var(--mono); color: var(--orange); }
#qec-toric-pattern-note { margin: 12px 0 0; color: var(--muted); font: 12px/1.65 var(--sans); }
@media (max-width: 600px) {
  .qec-toric-pattern-grid { gap: 6px; }
  .qec-toric-pattern-grid button { padding: 12px 9px; min-height: 128px; }
  .qec-toric-pattern-heading > span:last-child { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-qec-link, .hero-qec-link *, .header a[href="#playground"] .nav-dot::after { animation: none !important; transition: none !important; }
  .qec-section *, .qec-section *::before, .qec-section *::after { animation: none !important; transition: none !important; }
}