/* The making-of page (/making): the site's night (styles.css's tokens and faces), on a page of its own. Sections run one
   after another in a column; the stages (the footer's planes, the still frame, its layers, the timetable) take the full
   width up to 1520px, the copy a reading measure. */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Noto+Sans+JP:wght@400;500;600&display=swap');
:root{color-scheme:dark;--bg:#08080d;--surface:#0d0d17;--fg:#f0f0f4;--muted:#a7a5b6;--dim:#77758a;--line:#ffffff26;--line-2:#ffffff3d;--accent:#c5ff58;--blue:#4845ff;--purple:#a58aff;--sans:'DM Sans','Noto Sans JP',sans-serif;--display:'Barlow Condensed','Arial Narrow',sans-serif;--mono:'IBM Plex Mono',monospace;--gutter:max(20px,4%)}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.85 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
::selection{background:#7354ff;color:white}
h1,h2,h3,p,figure,dl,dd,ol,ul{margin:0}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:12px;top:-90px;z-index:100;background:var(--accent);color:black;padding:12px}
.skip:focus{top:12px}
/* English waits hidden until /i18n.js has put it in (2.5 s at most), as on the site */
.lang-wait .m-shell{opacity:0;animation:lang-wait 0s 2.5s forwards}
@keyframes lang-wait{to{opacity:1}}
html:not(.lang-ready) .lang-switch{visibility:hidden}

/* The cut. Between the site and this page (a view transition between documents, where the browser has them) and on the
   language switch (within the page), the page as it was holds still while the new one is uncovered from the left behind
   the hero's scan line, as the site's header links cut. The line moves by left, so it stays on the clip's edge. The opt-in for the cut between documents is in the head. */
.cut-line{position:fixed;top:0;bottom:0;left:0;z-index:90;width:2px;margin-left:-1px;background:var(--accent);box-shadow:0 0 5px color-mix(in srgb,var(--accent) 85%,transparent),0 0 24px 2px color-mix(in srgb,var(--accent) 28%,transparent);pointer-events:none;opacity:0;view-transition-name:cut-line}
html.is-cutting .cut-line{opacity:1;left:100vw}
::view-transition-group(root),::view-transition-old(root){animation:none}
::view-transition-new(root){animation:cut-wipe .62s cubic-bezier(.65,0,.35,1) both}
::view-transition-group(cut-line){animation:none}
::view-transition-old(cut-line){display:none}
::view-transition-new(cut-line){animation:cut-line .62s cubic-bezier(.65,0,.35,1) both}
@keyframes cut-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes cut-line{from{left:-100vw}to{left:0}}

/* header */
.m-header{display:flex;align-items:center;gap:22px;padding:22px var(--gutter)}
.brand>span{font:600 18px/1 var(--mono);letter-spacing:-.03em}
.brand b{color:var(--accent);font-weight:600}
.caret{animation:caret-blink 1.2s steps(1) infinite}
@keyframes caret-blink{50%{opacity:0}}
.m-crumb{font:500 12px/1 var(--mono);letter-spacing:.14em;color:var(--muted);padding-left:22px;border-left:1px solid var(--line)}
.lang-switch{display:flex;align-items:center;margin:0 -7px 0 auto;font:500 12px/1 var(--mono);letter-spacing:.06em}
.lang-switch button{position:relative;padding:9px 7px;border:0;background:none;color:var(--muted);font:inherit;letter-spacing:inherit;cursor:pointer;transition:color .25s}
.lang-switch button+button:before{content:'';position:absolute;left:0;top:50%;width:1px;height:11px;margin-top:-5.5px;background:var(--line)}
.lang-switch button[aria-pressed=true]{color:var(--fg)}
.lang-switch button:after{content:'';position:absolute;left:50%;bottom:0;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px color-mix(in srgb,var(--accent) 70%,transparent);opacity:0;transition:opacity .3s}
.lang-switch button[aria-pressed=true]:after{opacity:1}
@media(hover:hover) and (pointer:fine){.lang-switch button:hover,.m-foot a:hover,.m-back:hover{color:var(--accent)}}

main{display:grid;gap:clamp(96px,12vw,168px);padding-bottom:40px}
.m-open,.m-cut,.m-out{padding-inline:var(--gutter);display:grid;gap:28px;max-width:calc(1520px + 2 * var(--gutter));width:100%;margin-inline:auto;scroll-margin-top:24px}
.m-open{gap:22px}

/* the title and the destination board: 回送, out of service, as the last train runs to the depot (and 始発 at the end) */
.m-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 32px}
h1{font:800 clamp(52px,7.6vw,118px)/.84 var(--display);letter-spacing:-.01em;text-transform:uppercase}
h1 em{font-style:normal;color:transparent;-webkit-text-stroke:max(1px,.012em) var(--fg)}
.m-board{display:flex;align-items:stretch;gap:0;font:600 clamp(13px,1.15vw,16px)/1 var(--mono);letter-spacing:.06em;border:1px solid var(--line);background:#06060b;padding:6px}
.m-type{display:grid;place-items:center;padding:0 10px;background:var(--blue);color:#fff;font:500 .92em/1 var(--sans);letter-spacing:.12em}
.m-dest{display:flex;align-items:center;gap:2px;padding:0 4px 0 8px;color:var(--accent);white-space:nowrap;min-height:2.1em}
.m-dest .cell{display:inline-grid;place-items:center;width:.82em;height:1.6em;background:linear-gradient(#14141f 49%,#05050a 49%,#05050a 51%,#14141f 51%);border-radius:2px;color:var(--accent);text-shadow:0 0 8px color-mix(in srgb,var(--accent) 45%,transparent)}
.m-dest .cell.gap{background:none}
.m-dest .cell.is-turning{color:var(--fg)}

/* 0: the footer's last frame as the planes the page stacks. A plane d nearer the eye is drawn (P - d) / P as large (P =
   the stage's perspective), so from straight ahead every plane lands where it was; step aside and they part. --e is
   how far apart they are, --t how far round (the outlines, labels and the vanished I show as it turns). */
.fx{display:grid;gap:14px}
.fx-stage{--e:0;--t:0;position:relative;width:min(100%,calc((100svh - 200px) * 1512 / 820));min-width:min(100%,560px);aspect-ratio:1512/820;margin-inline:auto;perspective:1800px;perspective-origin:50% 50%;overflow:hidden;background:#05050a;border:1px solid var(--line);touch-action:pan-y;cursor:grab;user-select:none;container-type:inline-size}
.fx-stage.is-drag{cursor:grabbing}
.fx-stack{position:absolute;inset:0;transform-style:preserve-3d}
.fx-plane{position:absolute;inset:0;transform-style:preserve-3d;outline:1px solid rgba(197,255,88,calc(var(--t) * .45))}
.fx-plane>img{position:absolute;inset:0;width:100%;height:100%;display:block}
.fx-plane>.fx-ghost{opacity:calc(var(--t) * .5)}
.fx-slot{position:absolute;left:78.21%;top:65.91%;width:1.85%;height:20.85%;outline:1.5px dashed rgba(197,255,88,calc(var(--t) * .95));outline-offset:4px}
.fx-label{position:absolute;left:1.2%;top:1.6%;font:500 max(10px,1.3cqw)/1.25 var(--mono);letter-spacing:.06em;color:var(--accent);opacity:var(--t);white-space:nowrap;background:rgba(5,5,10,.6);padding:.3cqw .55cqw}
.fx-label i{font-style:normal;color:var(--fg)}
.fx-angle{position:absolute;right:14px;top:12px;z-index:5;font:500 11px/1.5 var(--mono);letter-spacing:.12em;color:rgba(240,240,244,.62);opacity:var(--t)}

/* controls under a stage */
.m-controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.m-btn,.m-chip{font:500 12px/1 var(--mono);letter-spacing:.08em;color:var(--accent);background:transparent;border:1px solid var(--accent);padding:11px 13px;border-radius:2px;transition:background .2s,color .2s,border-color .2s}
.m-chip{color:var(--muted);border-color:var(--line-2)}
.m-chip[aria-pressed=true]{color:var(--accent);border-color:var(--accent)}
@media(hover:hover) and (pointer:fine){.m-btn:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}.m-chip:hover{color:var(--fg)}}
.m-range{display:flex;align-items:center;gap:10px;flex:1 1 200px;max-width:320px;font:500 11px/1 var(--mono);letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.m-range span{white-space:nowrap}
input[type=range]{-webkit-appearance:none;appearance:none;flex:1;min-width:0;height:24px;background:transparent;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--line-2)}
input[type=range]::-moz-range-track{height:2px;background:var(--line-2)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:22px;margin-top:-10px;background:var(--accent);border:0;border-radius:1px}
input[type=range]::-moz-range-thumb{width:14px;height:22px;background:var(--accent);border:0;border-radius:1px}

/* the page's lede and its crew line */
.m-intro{display:grid;gap:10px;max-width:760px;padding-top:12px}
.m-lede{font-size:clamp(17px,1.5vw,20px);line-height:1.85}
.m-credit{color:var(--muted);font-size:15px}

/* a cut's heading, as the site's sections head theirs */
.m-head{display:grid;gap:14px;max-width:820px}
.eyebrow{font:13px var(--mono);color:var(--accent);letter-spacing:.06em}
h2{font:500 clamp(30px,3.4vw,52px)/1.12 var(--sans);letter-spacing:-.045em}
h2 em{font-style:normal;color:var(--purple)}
.m-head p,.m-sub p{color:var(--muted);font-size:16px;line-height:2;max-width:760px}
.m-sub{display:grid;gap:10px;margin-top:36px}
h3{font:500 22px/1.4 var(--sans);letter-spacing:-.02em}

/* the second layer of a cut's words: one line on the page, the working underneath */
.m-spec{border-top:1px solid var(--line);max-width:980px}
.m-spec summary{list-style:none;display:flex;align-items:center;gap:10px;padding:14px 0;font:500 12px/1 var(--mono);letter-spacing:.14em;color:var(--accent);cursor:pointer;text-transform:uppercase}
.m-spec summary::-webkit-details-marker{display:none}
.m-spec summary:before{content:'+';display:inline-grid;place-items:center;width:18px;height:18px;border:1px solid currentColor;border-radius:2px;font-size:13px}
.m-spec[open] summary:before{content:'−'}
.m-spec ul,.m-notes{list-style:none;padding:0 0 8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.m-spec li,.m-notes li{padding:12px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.85;color:var(--muted)}
.m-spec li b,.m-notes li b{display:block;color:var(--fg);font-weight:500;font-size:14.5px}
.m-notes{counter-reset:n;max-width:980px;padding:0}
.m-notes li{counter-increment:n;display:grid;grid-template-columns:2.4em minmax(0,1fr)}
.m-notes li:before{content:counter(n,decimal-leading-zero);font:500 12px/2.2 var(--mono);color:var(--accent);grid-row:1/span 2}

/* 1a: the frame read by the lens, then by its own making: the scan line sweeps the lens in from the left, and each note
   comes on as the line passes what it names */
.rv{display:grid;gap:14px}
.rv-stage{--x:1;position:relative;width:min(100%,calc((100svh - 140px) * 1512 / 820));min-width:min(100%,560px);aspect-ratio:1512/820;margin-inline:auto;overflow:hidden;background:#000;border:1px solid var(--line);container-type:inline-size}
.rv-stage img{position:absolute;inset:0;width:100%;height:100%;display:block}
.rv-stage .rv-lens{clip-path:inset(0 calc((1 - var(--x)) * 100%) 0 0)}
.rv-scan{position:absolute;top:0;bottom:0;left:calc(var(--x) * 100%);width:2px;margin-left:-1px;background:var(--accent);box-shadow:0 0 14px 2px rgba(197,255,88,.55);opacity:calc((1 - var(--x)) * 40);pointer-events:none}
.rv-stage svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.rv-stage svg g{opacity:0;transition:opacity .25s}
.rv-stage svg line{stroke:var(--accent);stroke-width:1.4;vector-effect:non-scaling-stroke}
.rv-stage svg circle{fill:none;stroke:var(--accent);stroke-width:1.6;vector-effect:non-scaling-stroke}
.rv-note{position:absolute;max-width:24%;display:grid;gap:3px;font:400 max(9px,1.02cqw)/1.5 var(--sans);color:var(--fg);background:rgba(8,8,13,.78);border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);padding:.55cqw .7cqw .6cqw;opacity:0;transition:opacity .25s}
.rv-note b{font:600 max(9px,.95cqw)/1.2 var(--mono);letter-spacing:.06em;color:#0b0b10;background:var(--accent);justify-self:start;padding:.18cqw .4cqw}
.rv-note .n{font:500 max(9px,.85cqw)/1 var(--mono);color:var(--accent)}
.rv-dot{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--accent);color:#0b0b10;font:600 11px/22px var(--mono);text-align:center;opacity:0;transition:opacity .25s;display:none}
.rv-stage .on{opacity:1}
@media(max-width:760px){.rv-note,.rv-stage svg line{display:none}.rv-dot{display:block}}

/* 1b: the same moment as its layers, parted along the camera's axis; the analysis layers (the match, the depth, the
   cover) are there only while it is apart */
.bd{display:grid;gap:14px}
.bd-stage{position:relative;width:100%;aspect-ratio:16/8.6;perspective:2200px;perspective-origin:50% 40%;overflow:hidden;border:1px solid var(--line);background:radial-gradient(120% 90% at 50% 40%,#12122a 0%,#07070c 70%);touch-action:pan-y;cursor:grab;user-select:none}
.bd-stage.is-drag{cursor:grabbing}
.bd-stage:before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(165,138,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(165,138,255,.07) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(80% 70% at 50% 50%,#000 30%,transparent 80%);mask-image:radial-gradient(80% 70% at 50% 50%,#000 30%,transparent 80%)}
.bd-stack{--e:1;--read:1;position:absolute;left:50%;top:52%;width:70%;aspect-ratio:1672/941;translate:-50% -50%;transform-style:preserve-3d;container-type:inline-size}
.bd-plane{position:absolute;inset:0;transform-style:preserve-3d;outline:1px solid rgba(197,255,88,calc(var(--e) * .4))}
.bd-plane>img,.bd-plane>svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.bd-plane.is-aux{opacity:var(--e)}
.bd-plane.is-read{opacity:var(--read);transition:opacity .3s}
.bd-label{position:absolute;left:0;bottom:100%;margin-bottom:6px;font:500 max(10px,1.7cqw)/1.25 var(--mono);letter-spacing:.06em;color:var(--accent);opacity:calc((var(--e) - .35) * 1.6);white-space:nowrap;text-shadow:0 1px 8px #000}
.bd-label i{font-style:normal;color:var(--fg)}
.bd-hour text{font-family:var(--display);font-weight:800;fill:none;stroke:#e7e7f0;stroke-width:5;opacity:.92}
.bd-hour .colon{stroke:var(--accent);stroke-width:6}
.bd-boxes g{fill:none;stroke:var(--accent);stroke-linejoin:round}
.bd-boxes rect{fill:var(--accent)}
.bd-boxes text{font:600 14px var(--mono);fill:#0b0b10}

/* 2: the takes of one moment in one frame: the scan line brings each take in over the last (--w, how far), and a slate
   names it (the kept one in the accent) */
.tk{display:grid;gap:14px}
.tk-stage{--w:1;position:relative;width:min(100%,calc((100svh - 140px) * 1512 / 820));min-width:min(100%,560px);aspect-ratio:1512/820;margin-inline:auto;overflow:hidden;background:#000;border:1px solid var(--line);container-type:inline-size}
.tk-stage img,.tk-film{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.tk-film{opacity:0}
.tk-film.on{opacity:1}
.tk-film.in{opacity:1;z-index:2;clip-path:inset(0 calc((1 - var(--w)) * 100%) 0 0)}
.tk-scan{position:absolute;top:0;bottom:0;left:calc(var(--w) * 100%);z-index:3;width:2px;margin-left:-1px;background:var(--accent);box-shadow:0 0 14px 2px rgba(197,255,88,.55);opacity:0;pointer-events:none}
.tk-stage.is-wiping .tk-scan{opacity:1}
.tk-slate{position:absolute;left:1.2%;top:2%;z-index:4;display:flex;font:600 max(10px,.8cqw)/1 var(--mono);letter-spacing:.08em;white-space:nowrap;background:rgba(8,8,13,.86);border:1px solid var(--line-2)}
.tk-slate b{background:var(--fg);color:#0b0b10;font-weight:600;padding:.5em .65em}
.tk-slate span{padding:.5em .65em;color:var(--muted)}
.tk-slate span+span{border-left:1px solid var(--line)}
.tk-stage.is-kept .tk-slate b{background:var(--accent)}
.tk-takes{display:flex;flex-wrap:wrap;gap:8px}
.tk-takes .m-chip span{font-family:var(--sans);letter-spacing:.02em;margin-left:4px}
.tk-takes .m-chip[aria-pressed=true]{background:color-mix(in srgb,var(--accent) 14%,transparent)}
.tk-time{font:500 11px/1 var(--mono);letter-spacing:.08em;color:var(--dim);font-variant-numeric:tabular-nums}
.tk-notes{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}
.tk-notes li{align-content:start}
.tk-notes .tk-k{display:block;margin-top:2px;font:500 11px/1.6 var(--mono);letter-spacing:.06em;color:var(--dim)}

/* 2b: the cuts left out: each a frame that plays once when pressed (the scan line bringing it in over its first frame),
   or a still where a film would flash or shows nothing a still does not, and why it went */
.cr{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 24px}
.cr-cut{display:grid;gap:12px;align-content:start;min-width:0}
.cr-frame{position:relative;display:block;width:100%;aspect-ratio:960/520;padding:0;border:1px solid var(--line);background:#05050a;overflow:hidden;color:inherit;transition:border-color .2s}
.cr-frame img,.cr-film{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.cr-film{opacity:0}
.cr-frame.is-on .cr-film{opacity:1}
.cr-scan{position:absolute;top:0;bottom:0;left:0;z-index:2;width:2px;margin-left:-1px;background:var(--accent);box-shadow:0 0 12px 2px rgba(197,255,88,.5);opacity:0;pointer-events:none}
.cr-tag{position:absolute;right:8px;bottom:8px;z-index:3;font:600 10.5px/1 var(--mono);letter-spacing:.1em;color:var(--accent);background:rgba(8,8,13,.82);border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);padding:5px 7px}
.cr-frame.is-still .cr-tag{color:var(--muted);border-color:var(--line-2)}
.cr-frame.is-loading .cr-tag{color:var(--fg)}
.cr-text{display:grid;gap:6px}
.cr-slate{font:500 11px/1.5 var(--mono);letter-spacing:.06em;color:var(--dim)}
.cr-text h4{margin:0;font:500 18px/1.4 var(--sans);letter-spacing:-.01em}
.cr-text p{font-size:14px;line-height:1.85;color:var(--muted)}
.cr-text p+p{margin-top:6px}
.cr-text .cr-why{color:var(--fg);padding-left:12px;border-left:1px solid color-mix(in srgb,var(--purple) 60%,transparent)}
@media(hover:hover) and (pointer:fine){.cr-frame[data-film]:hover{border-color:color-mix(in srgb,var(--accent) 60%,var(--line))}}

/* 3: the build as a train timetable (making-diagram.ts) */
.m-dia{--mkd-local:rgba(240,240,244,.5);display:grid;gap:12px;min-width:0}
.mkd-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px}
.mkd-sum{font:500 12px/1.4 var(--mono);letter-spacing:.12em;color:var(--muted)}
.mkd-sum b{font:700 22px/1 var(--display);letter-spacing:.01em;color:var(--fg);margin-right:2px}
.mkd-legend{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font:400 12px/1.5 var(--sans);color:var(--muted)}
.mkd-legend li{display:flex;align-items:center;gap:8px}
.mkd-legend i{display:inline-block;width:24px;height:0;border-top:2px solid var(--accent)}
.mkd-legend .k-rapid i{border-top:1.5px solid var(--purple)}
.mkd-legend .k-local i{border-top:1px solid var(--mkd-local)}
.mkd-legend .k-merge i{width:7px;height:7px;border:1.5px solid var(--muted);border-radius:50%;background:var(--bg)}
.mkd-legend .k-tick i{width:1.5px;height:10px;border:0;background:var(--muted)}
.mkd-scroll{container-type:inline-size;overflow-x:auto;overflow-y:hidden;border:1px solid var(--line);background:radial-gradient(120% 140% at 50% 0%,#10101e 0%,var(--bg) 70%);scrollbar-color:var(--line-2) transparent}
.mkd-fig{position:relative}
.mkd-fig svg{display:block;position:absolute;inset:0}
.mkd-rail{position:sticky;left:0;z-index:2;pointer-events:none}
.mkd-rail.is-stuck{background:linear-gradient(90deg,var(--bg) 0,var(--bg) calc(100% - 16px),transparent)}
.mkd-rail-st{position:absolute;left:12px;right:10px;height:18px;display:flex;justify-content:space-between;align-items:center;gap:6px;white-space:nowrap}
.mkd-rail-st .en{font:500 10.5px/1 var(--mono);letter-spacing:.08em;color:var(--muted)}
.mkd-rail-st.door .en{color:var(--dim)}
.mkd-rail-st .sub{font:400 10px/1 var(--sans);color:var(--dim)}
.mkd-rail.is-compact .mkd-rail-st{left:8px;right:6px}
.mkd-rail.is-compact .mkd-rail-st .en{font-size:9.5px;letter-spacing:.04em}
.mkd-rail.is-compact .mkd-rail-st .sub{display:none}
.mkd-note{font-size:12.5px;line-height:1.75;color:var(--muted)}
.mkd-axis{stroke:var(--line-2);stroke-width:1}
.mkd-hour{stroke:rgba(255,255,255,.045);stroke-width:1}
.mkd-day{stroke:var(--line-2);stroke-width:1}
.mkd-day-t{font:500 10.5px var(--mono);letter-spacing:.04em;fill:var(--muted)}
.mkd-brk line{stroke:var(--muted);stroke-width:1.2}
.mkd-st{stroke:var(--line);stroke-width:1}
.mkd-st.door{stroke-dasharray:2 4}
.mkd-st.depot{stroke:var(--line-2)}
.mkd-train .ln{fill:none;stroke-linecap:round;stroke-linejoin:round;transition:opacity .18s}
.mkd-train.k-limited .ln{stroke:var(--accent);stroke-width:2}
.mkd-train.k-rapid .ln{stroke:var(--purple);stroke-width:1.5}
.mkd-train.k-local .ln{stroke:var(--mkd-local);stroke-width:1}
.mkd-dot{fill:var(--bg);stroke-width:1.4;transition:opacity .18s}
.k-limited>.mkd-dot{stroke:var(--accent)}.k-rapid>.mkd-dot{stroke:var(--purple)}.k-local>.mkd-dot{stroke:var(--mkd-local)}
.mkd-tick{stroke-width:1.4;stroke-linecap:round;transition:opacity .18s}
.k-limited>.mkd-tick{stroke:var(--accent)}.k-rapid>.mkd-tick{stroke:var(--purple)}.k-local>.mkd-tick{stroke:var(--mkd-local)}
.mkd-no{font:500 9.5px var(--mono);letter-spacing:.02em;transition:opacity .18s}
.mkd-no.k-limited{fill:var(--accent)}.mkd-no.k-rapid{fill:var(--purple)}.mkd-no.k-local{fill:var(--dim)}
.mkd-0024 line{stroke:var(--fg);stroke-width:1}
.mkd-0024 circle{fill:none;stroke:var(--fg);stroke-width:1.2}
.mkd-0024 text{font:600 9.5px var(--mono);letter-spacing:.04em;fill:var(--fg)}
svg.is-dim .mkd-train:not(.is-on) .ln,svg.is-dim .mkd-train:not(.is-on) .mkd-dot,svg.is-dim .mkd-train:not(.is-on) .mkd-tick{opacity:.12}
svg.is-dim .mkd-no,svg.is-dim .mkd-0024{opacity:.25}
.mkd-hl{fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;stroke-width:3}
.mkd-hl.k-limited{stroke:var(--accent)}.mkd-hl.k-rapid{stroke:var(--purple);stroke-width:2.6}.mkd-hl.k-local{stroke:var(--fg);stroke-width:2.2}
.mkd-hl-dot{fill:var(--bg);stroke-width:2;pointer-events:none}
.mkd-hl-dot.k-limited{stroke:var(--accent)}.mkd-hl-dot.k-rapid{stroke:var(--purple)}.mkd-hl-dot.k-local{stroke:var(--fg)}
.mkd-hits .hit{fill:none;stroke:transparent;stroke-width:12;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;cursor:pointer;outline:none}
svg.is-drawn .mkd-hits .hit{pointer-events:stroke}
.mkd-scan{position:absolute;left:0;top:42px;bottom:12px;z-index:1;width:2px;margin-left:-1px;background:var(--accent);pointer-events:none;opacity:0;box-shadow:0 0 5px color-mix(in srgb,var(--accent) 85%,transparent),0 0 24px 2px color-mix(in srgb,var(--accent) 28%,transparent)}
.mkd-scan.is-on{opacity:1}
.mkd-card{position:absolute;left:0;top:0;z-index:3;width:min(340px,calc(100cqw - 16px));padding:12px 14px 13px;display:grid;gap:6px;pointer-events:none;background:color-mix(in srgb,var(--surface) 94%,transparent);border:1px solid var(--line-2);box-shadow:0 14px 36px rgba(0,0,0,.55);font-size:12.5px;line-height:1.6}
.mkd-card.k-limited{border-color:color-mix(in srgb,var(--accent) 55%,var(--line-2))}
.mkd-card.k-rapid{border-color:color-mix(in srgb,var(--purple) 55%,var(--line-2))}
.mkd-card[hidden]{display:none}
.mkd-card-k{display:flex;align-items:center;gap:8px;font:500 11px/1.4 var(--mono);letter-spacing:.06em;color:var(--muted)}
.mkd-badge{font:500 11px/1 var(--sans);letter-spacing:.06em;color:#fff;background:var(--blue);padding:3px 6px 4px}
.mkd-card h4{margin:0;font:500 14px/1.5 var(--sans);color:var(--fg);text-wrap:balance;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.mkd-card-meta{font:400 11px/1.5 var(--mono);color:var(--muted)}
.mkd-card-st{font:500 10.5px/1.5 var(--mono);letter-spacing:.04em;color:var(--fg)}
.mkd-card.k-limited .mkd-card-st{color:var(--accent)}.mkd-card.k-rapid .mkd-card-st{color:var(--purple)}
.mkd-card-log{margin:2px 0 0;list-style:none;display:grid;gap:3px;border-top:1px solid var(--line);padding:7px 0 0}
.mkd-card-log li{display:grid;grid-template-columns:3.2em minmax(0,1fr);gap:0 6px;font:400 11px/1.5 var(--mono);color:var(--muted)}
.mkd-card-log time{color:var(--dim)}
.mkd-card-log span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkd-card-log em{grid-column:2;font:500 11px/1.5 var(--sans);font-style:normal;color:var(--fg)}
.mkd-card-log .is-0024 time{color:var(--fg)}
.mkd-card-more{font:400 11px/1.4 var(--mono);color:var(--dim)}

/* the credits: a departure board's rows (who or what, against the part they played) */
.m-credits{display:grid;gap:16px;margin-top:28px;max-width:980px}
.m-credits h3{font:600 13px/1 var(--mono);letter-spacing:.16em;color:var(--accent)}
.m-credits dl{display:grid;border-top:1px solid var(--line)}
.m-credits dl>div{display:grid;grid-template-columns:minmax(0,14em) minmax(0,1fr);gap:4px 24px;padding:12px 0;border-bottom:1px solid var(--line)}
.m-credits dt{font:500 13px/1.6 var(--sans);color:var(--muted)}
.m-credits dd{font:500 15px/1.6 var(--sans);color:var(--fg)}

/* out: the board turns to 始発 04:38, and the way back to the site's own 04:38 */
.m-out{justify-items:start;gap:22px}
.m-back{font:600 clamp(26px,3vw,40px)/1.2 var(--display);letter-spacing:.02em;text-transform:uppercase;border-bottom:1px solid var(--line-2);padding-bottom:6px;transition:color .25s}
.m-foot{display:flex;justify-content:space-between;gap:16px;margin-top:64px;padding:18px var(--gutter) 22px;border-top:1px solid var(--line);font:12px var(--mono);color:var(--muted)}

@media(max-width:1100px){.cr{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.m-spec ul,.m-notes{grid-template-columns:minmax(0,1fr)}.bd-stage{aspect-ratio:4/3.3}.bd-stack{width:84%}}
/* (the cuts: one column, never wider than the card the kinetic type was measured at for flashes; the slate without its
   day, the same for every take, so it covers less of the frame) */
@media(max-width:760px){.cr{grid-template-columns:minmax(0,520px)}.tk-slate span:first-of-type{display:none}.m-header{gap:16px}.m-crumb{padding-left:16px}.m-credits dl>div{grid-template-columns:minmax(0,1fr)}.fx-label,.fx-angle,.bd-label{display:none}.m-range{max-width:none;flex-basis:100%}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}.caret{animation:none}}