:root{
  color-scheme:light;
  --surface:#f4efe6;
  --surface-raised:#fffaf2;
  --surface-inset:#e9e2d6;
  --ink:#1b1713;
  --muted:#655b50;
  --accent:#c4180f;
  --video-red:#e5251b;
  --rule:#887c6d;
  --on-ink:#f4efe6;
  --space-1:.5rem;
  --space-2:1rem;
  --space-3:1.5rem;
  --space-4:2rem;
  --space-5:3rem;
  --space-6:clamp(4rem, 7vw, 7rem);
  --type-small:.75rem;
  --type-body:1rem;
  --type-heading:clamp(2.4rem, 4.3vw, 4rem);
  --type-hero:clamp(3rem, 8.3vw, 7.5rem);
  --serif:"Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:ui-monospace, SFMono-Regular, Consolas, monospace;
  --radius:3px;
  --focus-ring:3px solid var(--accent);
}
*{box-sizing:border-box;}
html{scroll-behavior:auto;}
body{margin:0;background:var(--surface);color:var(--ink);font:var(--type-body)/1.6 var(--sans);}
button, input{font:inherit;}
button, a{-webkit-tap-highlight-color:transparent;}
button{cursor:pointer;}
button:disabled{cursor:default;}
button, a, input{touch-action:manipulation;}
a{color:inherit;text-underline-offset:.22em;}
a:hover{text-decoration-thickness:2px;}
button:focus-visible, a:focus-visible, input:focus-visible{outline:var(--focus-ring);outline-offset:4px;}
button{color:inherit;}
img{display:block;}
h1, h2, h3, p{margin:0;}
h1, h2{font-family:var(--serif);font-weight:400;}
h2{font-size:var(--type-heading);line-height:1.1;letter-spacing:-.035em;}
pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font:.8rem/1.8 var(--mono);}
code{font:inherit;}
[hidden]{display:none !important;}
.js-only{display:none;}
.js .js-only{display:flex;}
.wrap{width:min(1280px, calc(100% - 96px));margin-inline:auto;}
.skip-link{position:absolute;left:1rem;top:-6rem;padding:1rem;background:var(--ink);color:var(--surface);z-index:10;}
.skip-link:focus{top:1rem;}
.site-header{min-height:94px;display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);border-bottom:1px solid var(--rule);}
.brand{display:inline-flex;min-height:44px;align-items:center;gap:.65rem;text-decoration:none;font-size:1rem;font-weight:650;letter-spacing:-.035em;white-space:nowrap;}
.brand img{border-radius:var(--radius);}
nav{display:flex;align-items:center;gap:var(--space-4);font-size:.875rem;}
nav > a{min-width:44px;padding-block:.75rem;text-decoration:none;}
.cta{min-height:50px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--ink);border-radius:var(--radius);padding:.8rem 1.4rem;background:var(--ink);color:var(--surface);font-size:.875rem;font-weight:600;text-decoration:none;}
.cta[aria-disabled="true"]{cursor:default;}
.cta-small{min-height:44px;padding:.55rem 1rem;background:transparent;color:var(--ink);font-size:.8rem;}
.hero{padding-block:var(--space-6) var(--space-5);}
.eyebrow, .section-index, .note-number, .sample-label, .file-label{font:var(--type-small)/1.5 var(--mono);letter-spacing:.07em;}
.eyebrow{display:flex;align-items:center;gap:.65rem;text-transform:uppercase;}
.red-dot{width:7px;height:7px;border-radius:50%;background:var(--video-red);}
.hero-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);margin-top:var(--space-4);}
h1{font-size:var(--type-hero);line-height:.98;letter-spacing:-.055em;}
h1 em{color:var(--accent);font-weight:400;}
.margin-note{padding-bottom:.35rem;padding-left:var(--space-3);border-left:1px solid var(--rule);font-size:.875rem;line-height:1.7;color:var(--muted);}
.note-number{display:block;margin-bottom:var(--space-2);color:var(--accent);}
.hero-sub{margin-top:var(--space-4);font-size:clamp(1rem, 1.5vw, 1.2rem);}
.hero-actions{display:flex;align-items:center;gap:var(--space-4);margin-top:var(--space-4);}
.text-link{display:inline-flex;align-items:center;gap:1.5rem;min-height:44px;font-size:.875rem;}
.store-note{margin-top:.75rem;font-size:.75rem;color:var(--muted);}
section[id]{scroll-margin-top:2rem;}
.section-heading{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);margin-bottom:var(--space-3);}
.section-index{color:var(--muted);text-transform:uppercase;}
.section-heading h2{font-family:var(--sans);font-size:1rem;letter-spacing:-.02em;font-weight:500;}
.demo{padding-top:var(--space-4);}
.workspace{border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface-raised);}
.workspace-bar{display:flex;justify-content:space-between;gap:var(--space-2);padding:.9rem var(--space-3);border-bottom:1px solid var(--rule);}
.workspace-bar > :last-child{color:var(--muted);}
.demo-grid{display:grid;grid-template-columns:1.12fr 1fr;}
.demo-grid > *, .editorial-heading > *, .export-cards > *{min-width:0;}
.video-column{padding:var(--space-3);display:flex;flex-direction:column;}
.sample-player{border:1px solid var(--rule);background:var(--surface-inset);}
.player-art{min-height:294px;position:relative;padding:var(--space-3);text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:space-between;}
.art-label{font:.65rem/1.5 var(--mono);letter-spacing:.11em;}
.memory-cards{display:flex;align-items:center;justify-content:center;width:100%;padding-block:var(--space-3);}
.memory-cards span{width:100px;height:86px;display:grid;place-items:center;border:1px solid var(--rule);background:var(--surface-raised);font:italic 1.25rem var(--serif);transform:rotate(-9deg);}
.memory-cards span:nth-child(2){transform:rotate(5deg);margin-inline:-15px;z-index:1;background:var(--accent);color:var(--surface-raised);border-color:var(--accent);}
.memory-cards span:last-child{transform:rotate(-5deg);}
.player-art p{font:2rem/1.1 var(--serif);letter-spacing:-.03em;white-space:pre-line;}
.player-controls{display:flex;align-items:center;gap:.75rem;padding:.75rem;border-top:1px solid var(--rule);background:var(--surface);}
.play-button{background:var(--accent);border:1px solid var(--accent);color:var(--surface-raised);min-width:82px;min-height:44px;gap:.5rem;justify-content:center;align-items:center;font-size:.8rem;border-radius:var(--radius);}
#scrubber{min-width:44px;width:100%;flex:1;accent-color:var(--accent);height:44px;margin:0;}
.time-readout{white-space:nowrap;font:.7rem var(--mono);}
.video-info{padding-block:var(--space-3) var(--space-2);}
.video-info h3{font-size:1.1rem;line-height:1.4;letter-spacing:-.025em;font-weight:600;}
.video-info p{color:var(--muted);font-size:.8rem;margin-top:.5rem;}
.video-bottom{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-top:auto;padding-top:var(--space-2);}
.quiet-button{display:inline-flex;gap:.75rem;align-items:center;justify-content:center;background:transparent;border:1px solid var(--rule);border-radius:var(--radius);min-height:44px;padding:.5rem .8rem;font-size:.75rem;}
.quiet-button:hover{background:var(--surface-inset);}
.transcript-panel{border-left:1px solid var(--rule);padding:var(--space-3) 0 0;}
.panel-brand{display:flex;align-items:center;gap:.5rem;padding-inline:var(--space-3);font-size:.8rem;font-weight:600;}
.panel-label{margin-left:auto;font:.6rem var(--mono);color:var(--muted);letter-spacing:.06em;}
.transcript-panel h3{padding:var(--space-3) var(--space-3) var(--space-2);font-size:1rem;line-height:1.4;font-weight:550;}
.panel-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:0 var(--space-3) .5rem;}
.panel-toolbar > span{color:var(--muted);font-size:.65rem;}
.toggle{display:inline-flex;align-items:center;gap:.6rem;border:0;background:transparent;min-height:44px;padding:.5rem 0 .5rem .5rem;font-size:.75rem;}
.toggle-mark{border:1px solid var(--rule);border-radius:2px;width:18px;height:18px;display:grid;place-items:center;font-size:.7rem;}
.toggle[aria-pressed="true"] .toggle-mark{background:var(--ink);color:var(--surface);}
.toggle[aria-pressed="false"] .toggle-mark{color:transparent;}
.transcript{height:284px;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:var(--rule) var(--surface);padding:5px 8px;scroll-padding:8px;}
.transcript-line{width:100%;min-height:56px;display:flex;gap:1rem;text-align:left;padding:.9rem 1rem;background:transparent;border:0;border-left:3px solid transparent;font-size:.85rem;line-height:1.6;}
.transcript-line:hover{background:var(--surface);}
.transcript-line.is-current{background:var(--surface-inset);border-left-color:var(--accent);}
.transcript-line:focus-visible{outline-offset:-3px;}
.timestamp{font:.7rem/1.95 var(--mono);color:var(--accent);flex:0 0 2.4rem;}
.hide-timestamps .timestamp{display:none;}
.panel-hint{margin:var(--space-2) var(--space-3);color:var(--muted);font-size:.7rem;}
.export-demo{border-top:1px solid var(--rule);padding:var(--space-2) var(--space-3) var(--space-3);}
.export-toolbar, .export-caption, .export-actions{display:flex;gap:var(--space-2);align-items:center;}
.export-toolbar{justify-content:space-between;margin-bottom:var(--space-2);}
.export-caption > span{font-size:.65rem;color:var(--muted);}
.export-actions{gap:.5rem;}
.format-switch{border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;}
.format-switch button{border:0;background:transparent;min-height:44px;min-width:48px;font:.8rem var(--mono);}
.format-switch button + button{border-left:1px solid var(--rule);}
.format-switch button[aria-pressed="true"]{background:var(--ink);color:var(--surface);}
.format-switch button:focus-visible{outline-offset:-4px;}
.format-switch button[aria-pressed="true"]:focus-visible{outline-color:var(--surface);}
#export-preview{max-height:164px;overflow-y:auto;overscroll-behavior:contain;background:var(--surface);padding:var(--space-2);border:1px solid var(--rule);scrollbar-color:var(--rule) var(--surface);}
.demo-footnote{display:flex;justify-content:space-between;gap:var(--space-2);min-height:52px;padding-top:.75rem;color:var(--muted);font-size:.75rem;}
#demo-status{color:var(--accent);text-align:right;}
.no-script{padding:var(--space-2);border:1px solid var(--rule);}
.section-space{padding-top:var(--space-6);}
.editorial-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-5);margin-block:var(--space-3) var(--space-5);}
.editorial-heading > p{max-width:330px;color:var(--muted);font-size:.95rem;}
.export-cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);}
.file-card{border-top:1px solid var(--ink);padding-top:var(--space-3);}
.file-heading{display:flex;align-items:center;justify-content:space-between;}
.file-heading h3{font:1.7rem var(--serif);}
.file-label{color:var(--accent);}
.file-card > p{font-size:.85rem;color:var(--muted);margin-block:.75rem var(--space-3);}
.file-card pre{background:var(--surface-raised);border:1px solid var(--rule);padding:var(--space-3);min-height:252px;}
.file-card .card-footnote{font:.65rem var(--mono);margin-block:.75rem 0;}
.copy-note{display:flex;align-items:baseline;gap:var(--space-3);border-block:1px solid var(--rule);margin-top:var(--space-4);padding-block:var(--space-3);font-size:.875rem;}
.copy-note span{white-space:nowrap;}
.features{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--space-5);padding-bottom:var(--space-6);}
.features h2{margin-block:var(--space-3) var(--space-4);}
.feature-list{list-style:none;padding:0;margin:0;counter-reset:feature;}
.feature-list li{display:flex;gap:var(--space-3);border-top:1px solid var(--rule);padding-block:var(--space-3);counter-increment:feature;}
.feature-list li::before{content:"0" counter(feature);font:.75rem/1.9 var(--mono);color:var(--accent);}
.feature-list h3{font-size:1rem;font-weight:600;margin-bottom:.4rem;}
.feature-list p{color:var(--muted);font-size:.875rem;max-width:440px;}
.closing{background:var(--ink);color:var(--on-ink);padding-block:var(--space-6);}
.closing-inner{display:flex;justify-content:space-between;align-items:center;gap:var(--space-5);}
.closing h2{margin-top:var(--space-3);}
.closing-action{max-width:240px;}
.closing .cta{background:var(--surface);color:var(--ink);border-color:var(--surface);}
.closing .store-note{color:var(--on-ink);}
.closing .cta:focus-visible{outline-color:var(--surface);}
.site-footer{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);padding-block:var(--space-4);}
.footer-links{display:flex;gap:var(--space-3);font-size:.75rem;}
.footer-links a{display:inline-flex;align-items:center;min-width:44px;min-height:44px;}
.site-footer p{color:var(--muted);font-size:.7rem;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}
.clipboard-helper{position:fixed;left:0;top:0;width:1px;height:1px;opacity:0;}
html:not(.js) .js-only{display:none;}
@media (max-width: 1000px){
  .wrap{width:calc(100% - 64px);}
  .margin-note{display:none;}
  .demo-grid{grid-template-columns:1fr 1fr;}
  .player-controls{flex-wrap:wrap;}
  .time-readout{margin-left:auto;}
  .panel-label{display:none;}
  .video-bottom{flex-wrap:wrap;}
  .features{grid-template-columns:1fr 1.1fr;gap:var(--space-4);}
}
@media (max-width: 700px){
  .wrap{width:calc(100% - 40px);}
  .site-header{min-height:80px;flex-wrap:wrap;gap:.4rem;padding-block:1rem;}
  .brand{font-size:.9rem;}
  .site-header nav{width:100%;justify-content:space-between;gap:.75rem;}
  .cta-small{font-size:.7rem;padding-inline:.75rem;}
  .hero{padding-top:3.5rem;}
  .hero-heading{margin-top:var(--space-3);}
  h1{font-size:clamp(3rem, 9vw, 4.8rem);}
  .eyebrow{font-size:.65rem;letter-spacing:.035em;}
  .hero-actions{gap:var(--space-3);flex-wrap:wrap;}
  .hero-actions .cta{padding-inline:1rem;}
  .text-link{gap:.75rem;font-size:.8rem;}
  .section-heading{display:block;}
  .section-heading h2{margin-top:.5rem;}
  .workspace-bar{padding:var(--space-2);}
  .workspace-bar .sample-label{font-size:.62rem;letter-spacing:0;}
  .workspace-bar > :last-child{display:none;}
  .demo-grid, .export-cards, .features{grid-template-columns:1fr;}
  .video-column{padding:var(--space-2);}
  .player-art{min-height:270px;padding:var(--space-2);}
  .memory-cards span{width:85px;height:78px;}
  .transcript-panel{border-left:0;border-top:1px solid var(--rule);}
  .panel-label{display:block;}
  .export-demo{padding:var(--space-2);}
  .export-toolbar{flex-wrap:wrap;gap:.75rem;}
  .export-caption{flex:1;justify-content:space-between;}
  .export-actions{width:100%;}
  .export-actions button{flex:1;}
  .demo-footnote{flex-direction:column;gap:.25rem;}
  #demo-status{text-align:left;}
  .editorial-heading{display:block;margin-bottom:var(--space-4);}
  .editorial-heading > p{margin-top:var(--space-3);}
  .export-cards{gap:var(--space-4);}
  .file-card pre{min-height:0;padding:var(--space-2);}
  .copy-note{display:block;}
  .copy-note span{display:block;margin-bottom:.5rem;}
  .features{gap:var(--space-4);}
  .closing-inner{flex-direction:column;align-items:flex-start;gap:var(--space-4);}
  .closing h2{font-size:clamp(2.25rem, 7vw, 3rem);}
  .closing-action{max-width:280px;}
  .site-footer{flex-wrap:wrap;}
  .site-footer > .brand{width:100%;}
  .site-footer p{font-size:.65rem;}
}
@media (max-width: 360px){
  h1{font-size:2.65rem;}
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation:none !important;transition:none !important;scroll-behavior:auto !important;}
}
