:root{color-scheme:dark;--ink:#071218;--panel:#0b1921;--text:#e5eceb;--muted:#8ba1a9;--line:rgba(175,204,210,.16);--cyan:#85c9c8;--gold:#d4be95;--serif:"Songti SC","Noto Serif SC","STSong",serif;--sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;--mono:"SFMono-Regular",Consolas,monospace;font-family:var(--sans)}
*{box-sizing:border-box}html{background:var(--ink);scroll-behavior:smooth}body{margin:0;color:var(--text);background:radial-gradient(ellipse at 70% 0,rgba(40,82,94,.14),transparent 52%),var(--ink);min-width:300px}a{color:inherit;text-decoration:none}button,input{font:inherit}button{color:inherit;border:0;cursor:pointer}button,a,input{-webkit-tap-highlight-color:transparent}button:disabled{cursor:wait;opacity:.45}button:focus-visible,a:focus-visible,input:focus-visible,.screen:focus-visible{outline:2px solid var(--cyan);outline-offset:5px}button:focus:not(:focus-visible),a:focus:not(:focus-visible){outline:none}svg{display:block;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}button svg{width:20px;height:20px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;z-index:100;left:20px;top:15px;padding:12px 18px;background:var(--gold);color:var(--ink);transform:translateY(-180%)}.skip-link:focus{transform:none}
.masthead{height:104px;padding:0 clamp(22px,4vw,76px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:30px}.brand{display:flex;gap:14px;align-items:center}.brand>svg{width:28px;height:35px;color:var(--cyan)}.brand>span{font-size:16px;letter-spacing:.2em;font-weight:500;white-space:nowrap}.brand small{display:block;font:8px var(--mono);letter-spacing:.18em;color:var(--muted);margin-top:7px}.edition{font:10px var(--mono);letter-spacing:.2em;color:var(--muted);display:flex;gap:15px;align-items:center}.edition>span:last-child{color:var(--gold);border-left:1px solid var(--line);padding-left:15px}.edition-dot,.live-dot{display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px #85c9c866}.masthead nav{display:flex;gap:28px;font-size:11px;color:var(--muted)}.masthead nav a{transition:color .2s;white-space:nowrap}.masthead nav a:hover{color:var(--text)}.masthead nav a>span{margin-left:6px;color:var(--gold)}.masthead nav .model-link{color:var(--text)}main{max-width:1600px;margin:auto;padding:0 clamp(20px,4vw,64px)}.film-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;padding:44px 0 30px}.eyebrow{font:9px var(--mono);letter-spacing:.25em;color:var(--cyan);margin:0 0 13px}h1{font:400 clamp(25px,2.5vw,36px)/1.3 var(--serif);letter-spacing:.12em;margin:0}h1>span{display:inline-block;margin-left:24px;font:9px var(--mono);letter-spacing:.15em;vertical-align:middle;color:var(--muted)}.film-facts{display:flex;align-items:center;gap:18px;margin:0 0 5px;color:var(--gold);font:15px var(--mono);white-space:nowrap}.film-facts small{font:9px var(--sans);margin-left:5px;color:var(--muted)}.film-facts i{height:14px;width:1px;background:var(--line)}.film-facts .audio-fact{font:10px var(--sans);letter-spacing:.1em;color:var(--muted)}
.cinema{position:relative}.screen{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:16/9;background:linear-gradient(135deg,#142934,#06131b);border:1px solid rgba(162,198,206,.2);box-shadow:0 24px 100px #0005;border-radius:3px}.screen:fullscreen{width:100%;height:100%;aspect-ratio:auto;border:0;border-radius:0;background:#02070a}.screen:-webkit-full-screen{width:100%;height:100%;aspect-ratio:auto;background:#02070a}video{display:block;width:100%;height:100%;object-fit:contain;background:#061119}.screen-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(2,11,17,.18),transparent 28%,transparent 58%,rgba(2,11,17,.65));transition:opacity .7s}.screen-meta{position:absolute;left:30px;top:25px;display:flex;gap:15px;align-items:center;pointer-events:none;font-size:10px;letter-spacing:.14em;transition:opacity .5s}.screen-meta span:first-child{font:9px var(--mono);color:var(--gold)}.screen-meta span:last-child{color:#b9cbcf}.opening{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;text-align:center;background:radial-gradient(ellipse at center,rgba(3,12,19,.45),rgba(3,12,19,.08) 65%);transition:opacity .6s,visibility .6s}.opening>p{font:400 clamp(16px,1.7vw,24px) var(--serif);letter-spacing:.15em;text-shadow:0 2px 14px #0009;margin:0 20px}.hero-play{display:flex;align-items:center;gap:18px;background:transparent;padding:12px 16px;text-align:left}.play-orbit{display:flex;align-items:center;justify-content:center;width:68px;height:68px;border:1px solid #d4be9590;border-radius:50%;background:#07121855;color:var(--gold);box-shadow:0 0 0 9px #d4be9505;transition:transform .35s,background .35s,box-shadow .35s}.play-orbit svg{width:22px;height:22px;fill:currentColor;stroke:none;transform:translateX(-2px)}.hero-play:hover .play-orbit{transform:scale(1.07);background:#d4be9520;box-shadow:0 0 0 12px #d4be9506}.hero-copy{font-size:14px;letter-spacing:.18em}.hero-copy small{display:block;font:8px var(--mono);letter-spacing:.15em;color:var(--muted);margin-top:9px}.headphone-note{font-size:9px;letter-spacing:.15em;color:#b0c2c7;opacity:.7}.screen.has-started .opening{opacity:0;visibility:hidden;pointer-events:none}.screen.is-ended .opening{opacity:1;visibility:visible;pointer-events:auto}.screen.is-ended .screen-shade{opacity:1}.screen[data-enhanced="true"] video{cursor:pointer}.screen:not([data-enhanced="true"]) .controls,.screen:not([data-enhanced="true"]) .opening,.screen:not([data-enhanced="true"]) .screen-meta{display:none}
.controls{position:absolute;left:27px;right:27px;bottom:21px;display:grid;grid-template-columns:auto auto 1fr auto auto;align-items:center;column-gap:17px;row-gap:14px;z-index:4;opacity:1;visibility:visible;transition:opacity .35s,visibility .35s}.seek-track{grid-column:1/-1;position:relative;height:18px;display:flex;align-items:center}.seek-markers{position:absolute;inset:0 4px;pointer-events:none;z-index:2}.seek-markers i{position:absolute;height:4px;width:2px;top:7px;background:#071218b3}.controls input[type="range"]{-webkit-appearance:none;appearance:none;display:block;height:18px;background:transparent;cursor:pointer;margin:0;position:relative}#seek{width:100%;--progress:0%}input[type="range"]::-webkit-slider-runnable-track{height:3px;border-radius:0;background:#e4eeee38}#seek::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--gold) var(--progress),#e4eeee38 var(--progress))}input[type="range"]::-moz-range-track{height:3px;background:#e4eeee38}input[type="range"]::-moz-range-progress{height:3px;background:var(--gold)}input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:10px;width:10px;background:var(--gold);border-radius:50%;margin-top:-3.5px;box-shadow:0 0 0 4px #07121840;transition:transform .15s}input[type="range"]::-moz-range-thumb{height:10px;width:10px;background:var(--gold);border:0;border-radius:50%}input[type="range"]:hover::-webkit-slider-thumb{transform:scale(1.25)}.icon-button{display:grid;place-items:center;min-width:34px;min-height:34px;padding:6px;background:transparent;color:#e1eaea;border-radius:4px;transition:background .2s,color .2s}.icon-button:hover,.chapter-toggle:hover{background:#e1eaea12;color:var(--gold)}#playToggle svg{fill:currentColor;stroke:none}.time{font:10px var(--mono);white-space:nowrap;letter-spacing:.03em;color:#d9e5e8}.time-divider{margin:0 9px;color:#7f959e}#duration{color:#9fb2ba}.chapter-toggle{justify-self:start;display:flex;gap:9px;align-items:center;background:transparent;border-radius:4px;padding:7px 10px;margin-left:5px;min-height:34px;font-size:10px;letter-spacing:.08em;color:#b9cbd1;transition:background .2s,color .2s}.chapter-toggle svg{width:15px;height:15px}.volume-group{display:flex;align-items:center;gap:8px}.volume-group input{width:65px}#soundOff{stroke:var(--gold)}.screen.is-playing.controls-hidden .controls,.screen.is-playing.controls-hidden .screen-meta{opacity:0;visibility:hidden;pointer-events:none}.screen.is-playing.controls-hidden .screen-shade{opacity:0}.using-keyboard .screen:focus-within .controls{opacity:1;visibility:visible;pointer-events:auto}.screen:focus-visible .controls{opacity:1;visibility:visible;pointer-events:auto}
.player-notice,.player-error{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);padding:25px 32px;background:rgba(7,18,24,.94);border:1px solid var(--line);box-shadow:0 20px 70px #0005;backdrop-filter:blur(16px);border-radius:3px;max-width:calc(100% - 40px);text-align:center}.player-notice{display:flex;align-items:center;gap:16px}.player-notice p{margin:0;white-space:nowrap;font-size:12px;color:#c4d3d6}.player-notice button{background:transparent;color:var(--gold);font-size:11px;padding:7px;border-left:1px solid var(--line);white-space:nowrap}.spinner{width:16px;height:16px;border:1.5px solid #85c9c833;border-top-color:var(--cyan);border-radius:50%;animation:spin 1s linear infinite;flex-shrink:0}.player-error{width:390px}.error-mark{font-size:30px;color:var(--gold)}.player-error h2{font:400 20px var(--serif);letter-spacing:.08em;margin:14px 0 12px}.player-error p{font-size:12px;color:var(--muted);line-height:1.8;margin:0 0 24px}.player-error>div{display:flex;justify-content:center;align-items:center;gap:22px}.player-error button{font-size:11px;padding:10px 18px;background:var(--gold);color:var(--ink);border-radius:2px}.player-error a{font-size:11px;color:var(--gold);border-bottom:1px solid #d4be9550;padding:7px 0}.cinema-bottom{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);min-height:58px;color:var(--muted);font-size:9px;letter-spacing:.12em}.cinema-bottom>span{display:flex;gap:10px;align-items:center}.download-link{display:flex;gap:20px;align-items:center;padding:12px 0;transition:color .2s}.download-link:hover{color:var(--gold)}.download-link>span{font:9px var(--mono);color:var(--gold);letter-spacing:.1em}
.chapter-panel{padding:29px 0 37px}.section-label{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:19px}.section-label h2{margin:0;font-size:12px;font-weight:400;letter-spacing:.1em;color:#c8d5d9}.section-label>span{font:8px var(--mono);letter-spacing:.2em;color:#58747e}.chapter-list{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}.chapter{position:relative;overflow:hidden;text-align:left;background:linear-gradient(160deg,#15252d70,#0d1b2350);border:1px solid #94b3be17;padding:15px 13px 14px;min-width:0;transition:background .25s,border-color .25s;isolation:isolate;border-radius:2px}.chapter:hover{background:#16303c;border-color:#85c9c855}.chapter-order{font:9px var(--mono);color:#587681;display:block;margin-bottom:13px;transition:color .25s}.chapter strong{font-size:10px;font-weight:400;letter-spacing:.03em;display:block;white-space:nowrap;color:#a6bdc5}.chapter time{display:block;font:8px var(--mono);color:#5c7782;margin-top:8px}.chapter-fill{position:absolute;left:0;bottom:0;height:2px;width:var(--chapter-progress,0%);background:var(--gold);transition:width .15s linear;z-index:-1}.chapter.is-current{border-color:#d4be9555;background:linear-gradient(145deg,#d4be9510,#0e1f2850)}.chapter.is-current .chapter-order{color:var(--gold)}.chapter.is-current strong{color:#e3e9e6}.chapter.is-current time{color:#a9b3b3}.film-story{border-top:1px solid var(--line);padding:43px 0 49px;display:grid;grid-template-columns:1fr 1.3fr auto;gap:35px;align-items:center}.film-story>p{font:400 clamp(21px,2.2vw,29px)/1.7 var(--serif);letter-spacing:.1em;color:#d1dcd9;margin:0}.film-story>div{font-size:11px;color:var(--muted);line-height:2.2;letter-spacing:.04em}.film-story a{display:block;width:fit-content;margin-top:15px;color:var(--cyan);border-bottom:1px solid #85c9c830;font-size:10px;transition:color .2s}.film-story a:hover{color:var(--gold)}.film-story a span{padding-left:20px}.story-index{font:30px var(--serif);letter-spacing:.06em;color:#21404d}body.is-playing .film-story{display:none}footer{border-top:1px solid var(--line);margin:0 clamp(22px,4vw,76px);padding:25px 0 30px;display:flex;justify-content:space-between;gap:25px;color:#5c7680;font-size:9px;line-height:1.8;letter-spacing:.04em}footer>span:last-child{font:8px/1.8 var(--mono);letter-spacing:.22em;white-space:nowrap}@keyframes spin{to{transform:rotate(360deg)}}
@media(min-width:1700px){main{max-width:1740px}.masthead{height:112px}.film-heading{padding-top:48px}.screen-meta{left:38px;top:30px}.controls{left:36px;right:36px;bottom:27px}}
@media(max-width:1100px){.edition{display:none}.film-heading{padding-top:33px}h1>span{display:block;margin:12px 0 0;font-size:8px}.chapter-list{grid-template-columns:repeat(4,minmax(0,1fr))}.chapter{padding:14px 17px}.chapter-order{margin-bottom:11px}.chapter strong{font-size:11px}.chapter time{position:absolute;right:15px;top:7px}.film-story{grid-template-columns:1fr 1.2fr}.story-index{display:none}}
@media(max-width:720px){.masthead{height:83px;padding:0 21px;gap:15px}.brand>svg{width:23px;height:30px}.brand{gap:10px}.brand>span{font-size:14px}.brand small{font-size:6px;letter-spacing:.14em}.masthead nav{font-size:10px;gap:18px}.masthead nav .model-link{display:none}main{padding:0 14px}.film-heading{padding:29px 7px 24px;gap:14px}h1{font-size:27px}h1>span{font-size:7px;letter-spacing:.08em;margin-top:10px}.eyebrow{font-size:7px;letter-spacing:.18em}.film-facts{gap:10px;font-size:12px;margin-bottom:2px}.film-facts i{height:11px}.film-facts .audio-fact{display:none}.film-facts i:last-of-type{display:none}.screen{border-radius:2px}.screen-meta{top:17px;left:18px;gap:11px;font-size:8px}.screen-meta span:first-child{font-size:7px}.opening{gap:12px}.opening>p{font-size:15px;letter-spacing:.1em}.hero-play{gap:13px;padding:7px 12px}.play-orbit{width:47px;height:47px}.play-orbit svg{width:17px;height:17px}.hero-copy{font-size:11px}.hero-copy small{font-size:6px;margin-top:6px}.headphone-note{font-size:7px}.controls{left:13px;right:13px;bottom:9px;row-gap:4px;column-gap:8px}.icon-button{min-width:29px;min-height:29px;padding:5px}.icon-button svg{width:17px;height:17px}.time{font-size:8px}.time-divider{margin:0 5px}.chapter-toggle{padding:5px 7px;min-height:29px;margin-left:0;gap:5px;font-size:8px}.chapter-toggle svg{width:13px;height:13px}.volume-group{gap:2px}.volume-group input{width:43px}.seek-track{height:17px}.screen.is-playing .opening{display:none}.cinema-bottom{min-height:52px;padding:0 5px;font-size:8px}.download-link{gap:10px}.download-link>span{font-size:8px}.chapter-panel{padding:25px 5px 28px}.section-label{margin-bottom:14px}.section-label h2{font-size:11px}.section-label>span{font-size:6px}.chapter-list{gap:7px}.chapter{padding:13px 10px 12px}.chapter strong{font-size:9px}.chapter-order{font-size:8px}.chapter time{font-size:7px;right:10px;top:6px}.film-story{padding:29px 7px 34px;gap:22px}.film-story>p{font-size:20px;line-height:1.8}.film-story>div{font-size:9px;line-height:2.2}.film-story a{font-size:9px}footer{margin:0 21px;padding:20px 0;font-size:8px;display:block}footer>span:last-child{display:block;margin-top:12px;font-size:7px}.player-notice{padding:15px 17px;gap:10px}.player-notice p{font-size:10px}.player-notice button{font-size:9px}.player-error{padding:20px}.player-error h2{font-size:17px;margin:8px 0}.player-error p{font-size:10px;margin-bottom:14px}.error-mark{font-size:23px}}
@media(max-width:430px){.volume-group input{width:35px}.chapter-toggle span{display:none}.chapter-toggle{justify-self:end;padding:5px}.controls{grid-template-columns:auto auto 1fr auto auto;column-gap:5px}.opening{gap:8px}.opening>p{font-size:13px}.headphone-note{display:none}.chapter-list{grid-template-columns:repeat(2,minmax(0,1fr))}.chapter{padding:14px}.chapter strong{font-size:11px}.chapter-order{margin-bottom:9px}.chapter time{top:7px;right:13px}.film-story{grid-template-columns:1fr;gap:20px}.film-story>p br{display:none}.film-story>p{font-size:19px}.film-story>div{font-size:10px}.film-facts{gap:8px}.masthead nav{gap:10px}.screen-meta span:last-child{display:none}.play-orbit{height:40px;width:40px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}.spinner{border-color:var(--cyan)}}

/* Keep the entire 16:9 picture and its controls visible on desktop. */
@media(min-width:721px){
  .masthead{height:78px}
  main{max-width:min(1600px,calc((100svh - 235px) * 16 / 9 + 128px))}
  .film-heading{padding:24px 0 20px}
  .film-heading .eyebrow{margin-bottom:9px}
}

/* FILM 07: the version and features stay outside the moving picture. */
.version-chip{display:inline-block;margin-left:13px;padding:3px 6px;border:1px solid #d4be9538;color:var(--gold);font-size:7px;letter-spacing:.12em;vertical-align:middle;white-space:nowrap}
.feature-line{flex-wrap:wrap;row-gap:5px;letter-spacing:.08em}.feature-line i{font:8px var(--mono);color:#405a65;font-style:normal}
@media(max-width:720px){.version-chip{margin-left:8px;padding:2px 4px;font-size:6px}.cinema-bottom .feature-line{column-gap:6px}.feature-line i{font-size:7px}}
@media(max-width:430px){.film-heading .eyebrow{letter-spacing:.09em}.version-chip{display:block;width:fit-content;margin:7px 0 0}.cinema-bottom{gap:12px}.cinema-bottom .feature-line{column-gap:5px;font-size:7px}.download-link{gap:6px;font-size:7px}.download-link>span{font-size:7px}}

/* FILM 07: from drawing details to the original solid section. */
h1>.film-subtitle{font:400 14px var(--sans);letter-spacing:.15em;color:#9eb7bd;margin-left:22px}
.chapter-list{grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}
.chapter{min-height:87px;padding:14px 16px 13px}.chapter-order{margin-bottom:10px}.chapter strong{font-size:11px;white-space:normal;line-height:1.5}.chapter time{font-size:9px}
.process-flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin:0 0 25px;border-top:1px solid #85c9c820;border-bottom:1px solid #85c9c820}
.process-step{position:relative;display:flex;gap:12px;align-items:center;text-align:left;background:transparent;padding:17px 12px;color:#6e8c96;min-width:0;transition:background .2s,color .2s}
.process-step:not(:last-child):after{content:'';position:absolute;right:0;top:calc(50% - 11px);height:22px;width:1px;background:#85c9c820}
.process-node{display:grid;place-items:center;flex:0 0 26px;height:26px;border:1px solid #577d8655;border-radius:50%;font:8px var(--mono);transition:color .25s,border-color .25s,box-shadow .25s}
.process-copy{display:block;min-width:0}.process-copy strong{font-size:10px;font-weight:400;letter-spacing:.09em;white-space:nowrap}.process-copy small{display:block;font:7px var(--mono);letter-spacing:.08em;margin-top:6px;color:#496b78}
.process-step:hover{background:#85c9c808;color:#c0d9d8}.process-step.is-active{color:#d5d9c7;background:linear-gradient(100deg,#d4be9509,transparent)}.process-step.is-active .process-node{border-color:#d4be9590;color:var(--gold);box-shadow:0 0 14px #d4be9512}.process-step.is-active .process-copy small{color:#a0aaa1}.process-step.is-past .process-node{border-color:#85c9c855;color:#7db1ad}
footer>span:first-child{max-width:900px;line-height:1.9}
@media(max-width:1100px){h1>.film-subtitle{display:inline-block;margin:0 0 0 16px;font-size:12px}.chapter-list{grid-template-columns:repeat(5,minmax(0,1fr))}.chapter{padding:13px 12px;min-height:85px}.chapter time{position:static;margin-top:7px}.chapter-order{margin-bottom:9px}.process-step{gap:8px;padding:15px 8px}.process-copy strong{font-size:9px}.process-copy small{font-size:6px}.process-node{flex-basis:23px;height:23px;font-size:7px}}
@media(max-width:720px){h1>.film-subtitle{display:block;margin:10px 0 0;font-size:11px;letter-spacing:.1em}.chapter-list{grid-template-columns:repeat(2,minmax(0,1fr))}.chapter{min-height:75px;padding:12px}.chapter strong{font-size:11px}.chapter time{position:absolute;right:12px;top:6px;font-size:8px}.process-flow{gap:0;overflow-x:auto;scroll-snap-type:x proximity;grid-template-columns:repeat(5,minmax(114px,1fr));margin-bottom:20px}.process-step{padding:13px 8px;scroll-snap-align:start;gap:8px}.process-copy strong{font-size:9px}.process-copy small{font-size:6px}.process-node{flex-basis:22px;height:22px}.section-label>span{font-size:6px;letter-spacing:.1em}.film-facts{align-self:flex-end}.film-story>div{line-height:2.1}}
@media(max-width:430px){.film-heading .eyebrow{font-size:6px}.version-chip{display:inline-block;margin:0 0 0 6px;font-size:5px;padding:2px 3px}.opening>p{font-size:12px;line-height:1.8}.chapter strong{font-size:11px}.process-flow{margin-bottom:18px}.film-story>p{font-size:19px}}

.story-source{display:flex;flex-wrap:wrap;gap:4px 18px;margin:12px 0 0;color:#6f9099;font-size:8px;letter-spacing:.04em;line-height:1.8}.story-source span{white-space:nowrap}
@media(max-width:720px){.story-source{font-size:7px;gap:3px 12px;margin-top:10px}}

/* FILM 07: three ways to see a component take shape. */
.chapter-list{grid-template-columns:repeat(6,minmax(0,1fr))}
.case-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 12px;color:#91aeb7;font-size:10px;letter-spacing:.09em}.case-heading small{font:7px var(--mono);letter-spacing:.16em;color:#496b78}
.case-shortcuts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:24px}
.case-jump{display:flex;align-items:center;gap:14px;min-width:0;padding:18px 16px;border:1px solid #85c9c825;background:linear-gradient(115deg,#10263090,#0c1a2200);text-align:left;transition:background .25s,border-color .25s,transform .25s;border-radius:2px}
.case-jump .case-icon{flex:0 0 38px;width:38px;height:38px;color:#82b6bb;stroke-width:1.15}.case-guide{stroke:#42656f;stroke-dasharray:2 3}.case-jump>span{display:block;min-width:0}.case-jump strong{display:block;font-size:12px;font-weight:400;letter-spacing:.08em;color:#c4d7d9;white-space:nowrap}.case-jump small{display:block;font-size:9px;margin-top:8px;color:#698c98;white-space:nowrap}.case-jump time{margin-left:auto;font:9px var(--mono);color:#66858e;white-space:nowrap}.case-jump>i{font-style:normal;color:#8caaad;font-size:15px}
.case-jump:hover{background:#16303b;border-color:#85c9c85c;transform:translateY(-2px)}.case-jump.is-active{border-color:#d4be9560;background:linear-gradient(115deg,#d4be9512,#10263030)}.case-jump.is-active .case-icon,.case-jump.is-active>i{color:var(--gold)}.case-jump.is-active strong{color:#eee5cb}.case-jump.is-active time{color:#c6b793}
@media(max-width:1100px){.chapter-list{grid-template-columns:repeat(4,minmax(0,1fr))}.case-jump{padding:15px 12px;gap:10px}.case-jump .case-icon{flex-basis:30px;width:30px;height:30px}.case-jump strong{font-size:11px}.case-jump small{font-size:8px}.case-jump>i{display:none}.case-jump time{font-size:8px}}
@media(max-width:720px){.chapter-list{grid-template-columns:repeat(3,minmax(0,1fr))}.case-shortcuts{gap:7px;margin-bottom:22px}.case-jump{position:relative;display:block;padding:13px 11px}.case-jump .case-icon{width:30px;height:30px;margin-bottom:10px}.case-jump strong{font-size:10px}.case-jump small{font-size:8px;white-space:normal;line-height:1.7;margin-top:6px}.case-jump time{position:absolute;top:16px;right:10px;font-size:7px}.case-heading{font-size:9px;gap:10px}.case-heading small{font-size:6px;letter-spacing:.07em}}
@media(max-width:430px){.chapter-list{grid-template-columns:repeat(2,minmax(0,1fr))}.case-jump{padding:12px 9px}.case-jump strong{font-size:10px;letter-spacing:.02em}.case-jump small{font-size:8px}.case-jump time{top:14px;right:8px;font-size:6px}.case-heading small{display:none}}

/* Four close looks: component generation and the assembled connection. */
.case-shortcuts{grid-template-columns:repeat(3,minmax(0,1fr))}
.case-connection{border-color:#d4be9540;background:linear-gradient(115deg,#d4be9509,#0c1a2200)}
.case-connection .case-icon{color:#bdaf8d}
@media(min-width:1101px){.case-jump{padding:17px 13px;gap:10px}.case-jump .case-icon{flex-basis:30px;width:30px;height:30px}.case-jump strong{font-size:11px}.case-jump small{font-size:8px}.case-jump time{font-size:8px}.case-jump>i{display:none}}
@media(max-width:1100px){.case-shortcuts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:430px){.feature-line{gap:5px;font-size:7px}}


/* The cover owns the composition; the play control sits clear of its title and tower. */
.brand>svg.brand-rings{width:34px;height:34px;color:var(--gold);stroke-width:1.2;flex-shrink:0}
.brand>span{font-size:15px;letter-spacing:.12em}
.brand i{font-style:normal;color:var(--gold);margin:0 5px;font-weight:300}
.brand small{font-size:7px;letter-spacing:.16em}
.screen:not(.has-started) .screen-meta{opacity:0;visibility:hidden}
.screen:not(.has-started) .screen-shade{opacity:0}
.opening{align-items:flex-end;justify-content:flex-end;gap:12px;padding:0 4.5% 13%;background:none;pointer-events:none}
.opening .hero-play{pointer-events:auto;background:rgba(5,15,23,.82);border:1px solid #d4be9566;border-radius:50px;padding:12px 22px 12px 12px;gap:15px;box-shadow:0 8px 36px #0006;backdrop-filter:blur(10px)}
.opening .play-orbit{width:45px;height:45px;border-color:#d4be9570;box-shadow:none;background:#d4be9510}
.opening .hero-copy{font-size:12px;letter-spacing:.12em}
.opening .hero-copy small{font-size:7px;margin-top:7px;color:#b0bdc0}
.opening .headphone-note{margin-right:16px;font-size:8px;color:#c7d4d5;text-shadow:0 1px 8px #000}
.screen.is-ended .opening{background:linear-gradient(0deg,#02090f66,transparent 55%)}
@media(max-width:720px){
 .brand>span{font-size:12px;letter-spacing:.06em}.brand i{margin:0 2px}.brand small{font-size:6px;letter-spacing:.08em}.brand>svg.brand-rings{width:27px;height:27px}
 .opening{padding:0 4% 19%;gap:8px}.opening .hero-play{padding:6px 13px 6px 6px;gap:9px}.opening .play-orbit{width:33px;height:33px}.opening .play-orbit svg{width:14px;height:14px}.opening .hero-copy{font-size:10px}.opening .hero-copy small{font-size:5px;margin-top:4px}.opening .headphone-note{display:none}
}
@media(max-width:430px){.masthead{padding:0 16px;gap:10px}.brand{gap:8px}.brand>span{font-size:11px}.brand>svg.brand-rings{width:24px;height:24px}.brand small{font-size:5px}.opening{padding-bottom:19%}.opening .hero-play{padding:5px 10px 5px 5px}.opening .play-orbit{width:29px;height:29px}.opening .hero-copy{font-size:9px}.opening .hero-copy small{display:none}}