:root {
  --navy: #13294b;
  --ink: #272727;
  --muted: #66645f;
  --blue: #8d4936;
  --teal: #28716f;
  --line: #ddd9d2;
  --paper: #fffdf9;
  --cached: #d8edf0;
  --new: #ffe4be;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); font-family: "IBM Plex Sans", Arial, sans-serif; }
a { color: var(--blue); }
a:hover { color: #18436e; }
button { font: inherit; }

.wvs-nav { background: var(--navy); padding: .3rem 1rem; }
.wvs-nav-inner { width: 100%; max-width: 1140px; padding: 0 15px; margin: auto; display: flex; align-items: center; justify-content: space-between; }
.wvs-brand { color: white !important; text-decoration: none; font-family: "Gentium Plus", Georgia, serif; font-size: 1.7rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.wvs-brand img { height: 1.28em; width: auto; margin-right: 8px; vertical-align: -7px; }
.wvs-link { color: #d4dce8; text-decoration: none; font-size: 1.05rem; }
.wvs-link:hover { color: white; }

.title-slide { min-height: 550px; display: flex; align-items: center; position: relative; overflow: hidden; padding: 68px 0 82px; background: #f1f0eb; color: #2c2b29; }
.hero-inner { width: 100%; max-width: 1050px; margin: 0 auto; padding: 0 28px; }
.title-content { position: relative; z-index: 1; max-width: 670px; }
.hero-eyebrow { margin: 0 0 1.5rem; color: #766a62; font: 600 .78rem/1.5 "IBM Plex Sans", Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.hero-eyebrow a { color: inherit; text-decoration: none; border-bottom: 1px solid #aea59e; }
.title-slide h1 { margin: 0; font: 600 clamp(2.7rem, 5vw, 3.6rem)/1.05 "IBM Plex Sans", Arial, sans-serif; letter-spacing: -.04em; }
.title-slide h1 span { display: block; max-width: 600px; margin: .9rem 0 1.65rem; font: 400 clamp(1.5rem, 2.5vw, 2rem)/1.3 "IBM Plex Sans", Arial, sans-serif; letter-spacing: -.02em; }
.hero-authors { max-width: 590px; margin: 0 0 .3rem; font: 400 1rem/1.65 "IBM Plex Sans", Arial, sans-serif; }
.hero-affiliation { margin: 0 0 1.85rem; color: #716e68; font: 400 .94rem/1.5 "IBM Plex Sans", Arial, sans-serif; }
.hero-summary { max-width: 580px; margin: -1rem 0 1.5rem; color: #504b44; font-size: 1.05rem; line-height: 1.6; }
.hero-links { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; max-width: 640px; border-top: 1px solid #c7c3bc; padding-top: 1.1rem; }
.hero-links a { display: inline-flex; align-items: center; gap: .4rem; color: #714738; text-decoration: none; border-bottom: 1px solid #bba79c; font: 500 .89rem/1.6 "IBM Plex Sans", Arial, sans-serif; white-space: nowrap; }
.hero-links a:hover { color: #442b22; border-color: currentColor; }
.hero-links svg { width: 1rem; height: 1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hero-links a:focus-visible, .citation-links a:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
.background-image-overlay { position: absolute; inset: 0 0 0 auto; width: 56%; background: linear-gradient(90deg, #f1f0eb 0%, rgba(241,240,235,0) 38%), url("https://github.com/Voivio/media-collection/blob/main/projects/blinkwise/blinkwise-intro.jpg?raw=true") center center / cover no-repeat; }
.scroll-indicator { position: absolute; bottom: 24px; left: max(28px, calc(50% - 497px)); color: #786e67; text-decoration: none; font: 500 .83rem/1.5 "IBM Plex Sans", Arial, sans-serif; }
.scroll-indicator:hover { color: #443b35; }

.paper-story { background: var(--paper); color: var(--ink); font-family: Georgia, "Times New Roman", serif; }
.story-shell { max-width: 1050px; margin: 0 auto; padding: 0 28px; }
.prose { max-width: 780px; }
.article-opening { padding: 82px 0 70px; }
.article-opening .story-shell { max-width: 1050px; padding-left: 98px; }
.article-opening .story-shell > * { max-width: 780px; }
.article-type { margin: 0 0 1.2rem; color: #806354; font: 600 .8rem/1.5 "IBM Plex Sans", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.article-deck { margin: 0 0 1.25rem; color: #2f2e2b; font-size: clamp(1.55rem, 3vw, 2.05rem); line-height: 1.47; }
.article-roadmap { margin: 0; color: #66645f; font: 400 .93rem/1.7 "IBM Plex Sans", Arial, sans-serif; }
.research-context { margin: 0 0 1.4rem; font-size: 1.13rem; line-height: 1.72; }
.paper-abstract { margin-top: 2rem; border: 1px solid var(--line); background: #f8f6f2; }
.paper-abstract summary { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.25rem; color: #50483f; cursor: pointer; list-style: none; font: 600 .95rem/1.5 "IBM Plex Sans", Arial, sans-serif; }
.paper-abstract summary::-webkit-details-marker { display: none; }
.paper-abstract summary svg { width: 1.1rem; height: 1.1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.paper-abstract summary::after { content: ""; width: .5rem; height: .5rem; margin-left: auto; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.paper-abstract[open] summary::after { transform: rotate(225deg); }
.paper-abstract summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.paper-abstract p { margin: 0; padding: 0 1.25rem 1.25rem; font-size: 1rem; line-height: 1.7; }
.paper-story a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.paper-story a:hover { color: #673729; }
.story-toc { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: .9rem; padding: .55rem 1.25rem; border-bottom: 1px solid var(--line); background: rgba(255,253,249,.97); font-family: "IBM Plex Sans", Arial, sans-serif; }
.story-toc-title { flex: none; margin: 0; color: #817b73; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.story-toc-links { display: flex; gap: .25rem; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.paper-story .story-toc-links a { flex: none; padding: .36rem .5rem; border-bottom: 2px solid transparent; color: #6e6962; font-size: .8rem; line-height: 1.45; text-decoration: none; white-space: nowrap; }
.paper-story .story-toc-links a:hover, .paper-story .story-toc-links a:focus-visible { color: #593d32; }
.paper-story .story-toc-links a[aria-current="location"] { border-color: #8d4936; color: #714738; font-weight: 600; }
.story-section, #overview, #abstract, #citation { scroll-margin-top: 76px; }
.story-section .story-shell { display: grid; grid-template-columns: 70px minmax(0, 1fr); border-top: 1px solid var(--line); padding-top: 66px; padding-bottom: 68px; }
.section-number { padding-top: .36rem; color: #9b8170; font: 600 .8rem/1.5 "IBM Plex Sans", Arial, sans-serif; letter-spacing: .08em; }
.section-content { max-width: 780px; }
.story-section h2 { margin: 0 0 1.4rem; font: 600 clamp(1.8rem, 3vw, 2.25rem)/1.26 "IBM Plex Sans", Arial, sans-serif; letter-spacing: -.025em; }
.section-content > h3 { margin: 1.8rem 0 .8rem; font: 600 1.15rem/1.4 "IBM Plex Sans", Arial, sans-serif; }
.pipeline-notes { grid-column: 2; margin-top: 1.25rem; }
.story-section p { margin: 0 0 1.25rem; font-size: 1.13rem; line-height: 1.72; }
.story-section p:last-child { margin-bottom: 0; }
.story-section strong { font-weight: 700; }
.story-section em { font-style: italic; }
.dynamics-video { margin: 1.8rem 0 2rem; }
.dynamics-video-frame { position: relative; width: 100%; aspect-ratio: 12 / 5; min-height: 200px; overflow: hidden; background: #171717; border: 1px solid var(--line); }
.dynamics-video-frame iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
.device-figure { margin: 2.2rem 0 0; max-width: 540px; }
.device-figure img { width: 100%; height: auto; display: block; }
.paper-story figcaption { margin-top: .72rem; max-width: 780px; color: #66645f; font: 400 .9rem/1.55 "IBM Plex Sans", Arial, sans-serif; }
.paper-story figcaption strong { color: #383633; }
.wide-figure { grid-column: 2; max-width: 780px; margin: 2.1rem 0 0; }
.result-figure { margin-top: 2.35rem; }
.result-figure img { display: block; width: min(100%, 640px); height: auto; }
.closing-thought { margin-top: 1.8rem !important; font-style: italic; color: #46443f; }
.application-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; margin: 1.8rem 0 1.4rem; font-family: "IBM Plex Sans", Arial, sans-serif; }
.application-card { overflow: hidden; border: 1px solid #e0dcd5; border-radius: 12px; background: #fff; box-shadow: 0 8px 22px rgba(50,45,39,.08); }
.application-card img { display: block; width: 100%; height: 150px; object-fit: cover; }
.application-card-body { padding: 1rem 1.05rem 1.2rem; }
.application-card h3 { margin: 0 0 .55rem; color: #34322e; font-size: 1.04rem; font-weight: 600; line-height: 1.3; }
.story-section .application-card p { margin: 0; color: #5d5a54; font: 400 .88rem/1.55 "IBM Plex Sans", Arial, sans-serif; }
.story-section .application-note { margin-top: 1.2rem; color: #5e5b55; font-size: .98rem; }

/* The explainer is presented as an inline research figure. */
.explainer { border: 1px solid #d4d1cb; background: #faf9f7; padding: 1.65rem; font-family: "IBM Plex Sans", Arial, sans-serif; }
.explainer-head h3 { margin: 0 0 .35rem; font-size: 1.16rem; font-weight: 600; line-height: 1.35; }
.explainer-head p { margin: 0; max-width: 620px; color: #66645f; font: 400 .9rem/1.5 "IBM Plex Sans", Arial, sans-serif; }
.explainer-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin: 1.5rem 0 1rem; }
.explainer-controls button { border: 1px solid #aaa69f; background: white; padding: .35rem .7rem; color: #343330; cursor: pointer; font-size: .88rem; }
.explainer-controls button:hover, .explainer-controls button:focus-visible { background: #eeeae3; }
.explainer-controls button:disabled { opacity: .45; cursor: default; }
.explainer-controls input[type=range] { flex: 1 1 220px; accent-color: #825342; }
.step-readout { min-width: 82px; font-size: .87rem; font-variant-numeric: tabular-nums; font-weight: 600; }
.execution-switch { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.1rem; border: 0; padding: 0; margin: 0 0 1.4rem; }
.execution-switch legend { float: left; width: auto; padding: 0; margin: 0 .5rem 0 0; color: #514d48; font-size: .86rem; font-weight: 600; }
.execution-switch label { color: #57534f; font-size: .86rem; cursor: pointer; }
.execution-switch input { accent-color: #825342; }
.sequence-scroll { overflow-x: auto; padding-bottom: .5rem; }
.sequence-diagram { min-width: 710px; }
.sequence-label { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; color: #706c66; font-size: .77rem; margin: .75rem 0 .38rem; }
.sequence-label strong { color: #393733; font-size: .85rem; }
.sequence-row { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 5px; }
.sequence-cell { min-height: 43px; display: flex; justify-content: center; align-items: center; border: 1px solid #dedbd5; background: #eeece8; color: #79746e; font-size: .85rem; font-variant-numeric: tabular-nums; transition: background .18s ease, border-color .18s ease, color .18s ease; }
.sequence-row button.sequence-cell { cursor: pointer; }
.sequence-row button.sequence-cell:hover, .sequence-row button.sequence-cell:focus-visible { outline: 2px solid #b38368; outline-offset: 1px; }
.sequence-cell.is-used { color: #3a3935; background: #e7e3dd; border-color: #aaa49c; }
.sequence-cell.is-cached { color: #175a59; background: #d8ece9; border-color: #69aaa2; }
.sequence-cell.is-new { color: #77451c; background: #fbe5c9; border-color: #d09a60; }
.sequence-cell.is-current { color: white; background: #3b3a38; border-color: #3b3a38; }
.sequence-row.layer-one { padding: 0 15.3846%; grid-template-columns: repeat(9, minmax(0, 1fr)); }
.sequence-row.layer-two { padding: 0 23.0769%; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.sequence-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.1rem 0 .2rem; color: #69645e; font-size: .78rem; }
.legend-key { display: inline-block; width: 12px; height: 12px; border: 1px solid; vertical-align: -2px; margin-right: 4px; }
.legend-key.used { background: #e7e3dd; border-color: #aaa49c; }
.legend-key.cached { background: #d8ece9; border-color: #69aaa2; }
.legend-key.fresh { background: #fbe5c9; border-color: #d09a60; }
.legend-key.current { background: #3b3a38; border-color: #3b3a38; }
.explainer-explanation { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(190px, 1fr); gap: 1.3rem; border-top: 1px solid #dedbd5; margin-top: 1.15rem; padding-top: 1.15rem; }
.explainer-explanation p { margin: 0; color: #45423e; font: 400 .88rem/1.6 "IBM Plex Sans", Arial, sans-serif; }
.explainer-count { border-left: 2px solid #9b7865; padding-left: .85rem; }
.explainer-count strong { display: block; color: #744735; font-size: 1.04rem; margin-bottom: .2rem; }

.article-end { border-top: 1px solid var(--line); padding: 50px 0 65px; }
.article-end h2 { margin: 0 0 .65rem; color: #46423d; font: 600 1.06rem/1.4 "IBM Plex Sans", Arial, sans-serif; }
.article-end p { margin: 0 0 .8rem; color: #66615b; font-size: .95rem; line-height: 1.6; }
.citation-links { display: flex; flex-wrap: wrap; gap: .6rem 1.25rem; margin: 1.1rem 0; font: 400 .9rem/1.6 "IBM Plex Sans", Arial, sans-serif; }
.citation-links a { display: inline-flex; align-items: center; gap: .4rem; }
.citation-links svg { width: 1rem; height: 1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.citation-details { color: #665f59; font: 400 .86rem/1.5 "IBM Plex Sans", Arial, sans-serif; }
.citation-details h3 { margin: 1.45rem 0 .45rem; color: #46423d; font: 600 .88rem/1.4 "IBM Plex Sans", Arial, sans-serif; }
.bibtex-container { max-width: 780px; margin: 1rem 0 0; padding: 1rem; border: 1px solid #ddd9d2; background: #f8f6f2; }
.bibtex-container button { float: right; padding: .3rem .55rem; margin: 0 0 .5rem .5rem; border: 1px solid #aaa49b; background: #fff; font-size: .8rem; cursor: pointer; }
.bibtex-code { clear: both; display: block; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: #45413d; font-size: .82rem; line-height: 1.48; }

.wvs-waveftr { display: block; width: 100%; height: 34px; background: var(--paper); }
.wvs-footer { background: var(--navy); color: #e8edf4; padding: 20px 15px 14px; font-size: 14px; }
.wvs-footer a { color: #9fdedf; text-decoration: none; }
.wvs-footer-inner { max-width: 1140px; margin: auto; display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.wvs-fcol { flex: 1 1 220px; }
.wvs-fcenter { text-align: center; }
.wvs-fright { display: flex; justify-content: flex-end; }
.wvs-footer img { max-width: 190px; height: auto; }

@media (min-width: 1280px) {
  .story-toc { position: fixed; top: clamp(90px, 18vh, 150px); left: 20px; display: block; width: 140px; max-height: calc(100vh - 110px); overflow-y: auto; padding: 0; border: 0; background: transparent; transition: opacity .2s ease, transform .2s ease; }
  .story-toc.is-hidden { opacity: 0; pointer-events: none; transform: translateY(8px); }
  .story-toc-title { margin: 0 0 .7rem .6rem; }
  .story-toc-links { display: flex; flex-direction: column; gap: 0; overflow: visible; border-left: 1px solid #d6d0c6; }
  .paper-story .story-toc-links a { margin-left: -1px; padding: .48rem .6rem; border-bottom: 0; border-left: 2px solid transparent; line-height: 1.35; white-space: normal; }
  .paper-story .story-toc-links a[aria-current="location"] { border-left-color: #8d4936; }
  .section-number { visibility: hidden; }
  .story-section, #overview, #abstract, #citation { scroll-margin-top: 24px; }
}
@media (max-width: 800px) {
  .title-slide { min-height: 0; }
  .title-content { max-width: 100%; }
  .background-image-overlay { width: 100%; background-image: linear-gradient(90deg, rgba(241,240,235,.9), rgba(241,240,235,.68)), url("https://github.com/Voivio/media-collection/blob/main/projects/blinkwise/blinkwise-intro.jpg?raw=true"); }
  .article-opening { padding: 65px 0 55px; }
  .article-opening .story-shell { padding-left: 76px; }
  .story-section .story-shell { grid-template-columns: 48px minmax(0, 1fr); padding-top: 53px; padding-bottom: 55px; }
  .wide-figure { margin-top: 1.6rem; }
}
@media (max-width: 560px) {
  .story-toc { gap: .4rem; padding: .42rem 12px; }
  .story-toc-title { display: none; }
  .paper-story .story-toc-links a { font-size: .76rem; }
  .wvs-link { font-size: .88rem; }
  .wvs-brand { font-size: 1.4rem; }
  .title-slide { padding: 52px 0 76px; }
  .hero-inner { padding: 0 19px; }
  .title-slide h1 { font-size: 2.6rem; }
  .title-slide h1 span { font-size: 1.45rem; }
  .hero-authors { font-size: .92rem; }
  .scroll-indicator { left: 19px; }
  .story-shell { padding: 0 19px; }
  .article-opening .story-shell { padding-left: 19px; }
  .story-section .story-shell { display: block; }
  .section-number { margin-bottom: 1.2rem; }
  .article-deck { font-size: 1.45rem; }
  .story-section p { font-size: 1.04rem; }
  .explainer { padding: .9rem; }
  .wide-figure { overflow-x: auto; }
  .result-figure img { min-width: 500px; }
  .explainer-explanation { grid-template-columns: 1fr; }
  .wvs-fcenter { text-align: left; }
  .wvs-fright { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sequence-cell { transition: none; }
  .story-toc { transition: none; }
}