/* Exhibition shell. The original stylesheet owns the boot/terminal simulations. */
:root {
  color-scheme:light;
  --bg:#e9ecf1;
  --ink:#1c263b;
  --muted:#566175;
  --line:#bbc3d1;
  --accent:#294fc5;
}
body { font-family:'Helvetica Neue',Arial,'Noto Sans JP',sans-serif; overflow-x:clip; }
::selection { background:#294fc5; color:#fff; }
.navigation,main,footer { max-width:1600px; padding-inline:clamp(22px,5vw,80px); }
.navigation { height:88px; border:0; }
.wordmark { font:700 22px/1 Arial,sans-serif; letter-spacing:-1px; }
.wordmark-slash { color:#6b7fbb; padding-inline:5px; }
nav { gap:30px; font:500 13px/1.5 Arial,sans-serif; }
nav a { padding-block:10px; }
nav a:hover { text-decoration:underline; text-underline-offset:5px; }
main { display:flex; flex-direction:column; }
.intro { order:0; position:relative; padding:54px 0 0; color:#fff; isolation:isolate; }
.intro::before { content:''; position:absolute; inset:0 calc(-1 * clamp(22px,5vw,80px)) 90px; background:#294fc5; z-index:-1; }
.hero-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; padding:0 0 48px; }
.intro h1 { font-family:BankGothic,Arial,sans-serif; font-size:clamp(58px,8.6vw,134px); line-height:.97; letter-spacing:-.055em; font-weight:400; margin:0; }
.hero-description { padding:0 10px 5px 0; min-width:230px; }
.hero-description p { color:#e0e7ff; font-size:13px; line-height:1.9; margin:0 0 15px; }
.hero-description a { display:inline-block; font-size:12px; margin-top:8px; border-bottom:1px solid #ffffff80; padding-bottom:3px; }
.hero-capture { margin:0; padding-left:clamp(0px,5vw,80px); }
.hero-capture>a { display:block; background:#111514; box-shadow:0 24px 50px #12234a30; }
.hero-capture img { width:100%; height:auto; display:block; }
.hero-capture figcaption { display:flex; justify-content:space-between; gap:12px; color:var(--muted); font-size:11px; padding:16px 0; }
.workspace { order:1; padding:90px 0 78px; }
.sequence { order:2; padding:65px 0 80px; border-top:1px solid var(--line); }
.underneath { order:3; padding:60px 0 85px; border-top:1px solid var(--line); }
.section-heading { align-items:flex-end; margin-bottom:38px; gap:30px; }
.eyebrow { font:500 12px/1.5 Arial,sans-serif; letter-spacing:0; color:var(--accent); }
.section-heading h2 { font-size:clamp(28px,3.2vw,44px); font-weight:600; letter-spacing:-.045em; margin-top:10px; }
.section-heading p { font-size:12px; line-height:1.9; }
.workspace-notes { display:grid; grid-template-columns:1fr 1.2fr 1fr; gap:clamp(24px,5vw,70px); margin-top:0; padding:0; border:0; }
.workspace-notes article { padding:0; border:0; background:none; }
.workspace-notes h3 { font-size:24px; font-weight:500; letter-spacing:-1px; margin:9px 0 17px; }
.workspace-notes p { font-size:13px; line-height:1.9; max-width:35ch; }
.source-links { gap:15px; margin-top:20px; }
.source-links button { font:12px/1.6 var(--mono); color:var(--accent); border:0; border-bottom:1px solid #aab9dd; border-radius:0; background:none; padding:4px 0; }
.source-links button:hover { color:var(--ink); background:none; border-color:var(--ink); }
.workspace-simulation { margin:0 0 35px; border-block:1px solid var(--line); }
.workspace-simulation summary { cursor:pointer; padding:16px 0; font-size:13px; display:flex; justify-content:space-between; align-items:center; list-style:none; }
.workspace-simulation summary::-webkit-details-marker { display:none; }
.workspace-simulation summary span { font-size:20px; }
.workspace-simulation[open] summary span { transform:rotate(45deg); }
.workspace-preview { margin:0 0 22px; border:0; border-radius:4px; color:#e0e2dd; --accent:#a9c9ef; --muted:#a2aaa4; --line:#414754; }
.workspace-toolbar,.workspace-caption { background:#1c2330; }
.workspace-caption { flex-wrap:wrap; }
.workspace-caption p { color:#b2bdce; }
.viewer { border:0; border-radius:5px; overflow:hidden; box-shadow:0 16px 36px #1a294b22; color:#e9e9df; --accent:#a9c9ef; --muted:#a2aaa4; --line:#414754; }
.viewer-top,.viewer-bottom { background:#1c2330; color:#c6cedb; }
.viewer-top { font-size:10px; }
.preview-label { color:#aab5c8; }
.viewer-bottom button { color:#e0e7f2; }
.scene-controls { display:flex; gap:0; margin:0; padding-top:18px; border-bottom:1px solid var(--line); }
.scene-controls button { flex:1; border:0; border-bottom:3px solid transparent; border-radius:0; background:none; padding:15px 15px 18px; color:var(--muted); text-align:left; }
.scene-controls button:first-child { padding-left:0; }
.scene-controls button.selected { border-color:var(--accent); background:none; color:var(--accent); }
.scene-controls button:hover { background:#dce2ee; }
.scene-controls button span { color:inherit; margin-right:10px; font:12px var(--mono); }
.scene-controls button b { display:inline; font-size:18px; font-weight:500; }
.scene-controls button small { display:none; }
.stage-notes { padding:30px 0 0; grid-template-columns:1fr 1.5fr; gap:50px; border:0; }
.stage-notes h3 { font-size:25px; letter-spacing:-1px; margin-top:9px; }
.stage-notes p { font-size:13px; max-width:65ch; }
.stage-notes .text-link { color:var(--accent); margin-top:16px; }
.detail-list article { display:flex; align-items:center; justify-content:space-between; padding:23px 0; gap:30px; border-color:var(--line); }
.detail-list article>div { display:grid; grid-template-columns:180px 1fr; gap:25px; align-items:baseline; flex:1; }
.detail-list h3 { font-size:18px; font-weight:500; margin:0; }
.detail-list p { font-size:12px; max-width:65ch; }
.detail-list button { color:var(--accent); width:44px; height:44px; border:1px solid #b6c1d8; border-radius:50%; flex-shrink:0; }
.detail-list button:hover { color:white; background:var(--accent); }
footer { display:flex; align-items:center; justify-content:space-between; gap:22px; padding-block:32px; border-top:1px solid var(--line); font:12px/1.6 Arial,sans-serif; color:var(--muted); }
footer .footer-name { color:var(--ink); font-size:18px; font-weight:700; letter-spacing:-.7px; }
footer a:last-child { color:var(--accent); }
#source-dialog { color:#e9edf5; background:#171e2a; --ink:#e9edf5; --muted:#adb7c9; --accent:#a9c9ef; --line:#39465b; border-radius:6px; }
#source-dialog::backdrop { background:#101c3a99; backdrop-filter:blur(8px); }
.dialog-heading h2 { overflow-wrap:anywhere; }
.sr-only { color:inherit; }
@media(min-width:1600px) { .intro::before { inset-inline:calc((1440px - 100vw) / 2); } }
@media(max-width:800px) {
  .navigation { height:auto; min-height:78px; gap:20px; }
  nav { gap:17px; font-size:11px; }
  .wordmark { font-size:19px; white-space:nowrap; }
  .hero-heading { align-items:flex-start; }
  .intro { padding-top:35px; }
  .intro h1 { font-size:clamp(54px,9vw,80px); }
  .hero-description { min-width:0; }
  .hero-description p { font-size:11px; }
  .hero-capture { padding-left:0; }
  .workspace { padding-top:60px; }
  .workspace-notes { gap:25px; grid-template-columns:1fr 1fr; }
  .workspace-notes article:last-child { grid-column:1/-1; }
  .workspace-notes p { max-width:48ch; }
  .stage-notes { grid-template-columns:1fr; gap:18px; }
  .detail-list article>div { grid-template-columns:140px 1fr; gap:15px; }
  footer { flex-wrap:wrap; }
}
@media(max-width:540px) {
  .navigation { align-items:flex-start; padding-block:20px; flex-direction:column; gap:12px; }
  nav { width:100%; justify-content:space-between; gap:12px; }
  .hero-heading { flex-direction:column; gap:25px; padding-bottom:28px; }
  .intro h1 { font-size:12.5vw; }
  .hero-description { display:grid; grid-template-columns:1fr 1fr; gap:12px; width:100%; }
  .hero-description p { margin:0; font-size:11px; }
  .hero-description a { grid-column:1/-1; justify-self:start; }
  .intro::before { bottom:65px; }
  .hero-capture figcaption { flex-direction:column; gap:3px; font-size:10px; }
  .section-heading { flex-direction:column; align-items:flex-start; gap:15px; }
  .workspace-notes { grid-template-columns:1fr; gap:30px; }
  .workspace-notes article { display:grid; grid-template-columns:80px 1fr; column-gap:12px; }
  .workspace-notes article>.eyebrow { grid-column:1; padding-top:4px; }
  .workspace-notes h3 { grid-column:2; font-size:22px; margin:0 0 10px; }
  .workspace-notes p,.workspace-notes .source-links { grid-column:2; }
  .source-links { flex-wrap:wrap; }
  .scene-controls button { padding:12px 8px; }
  .scene-controls button b { font-size:15px; }
  .scene-controls button span { margin-right:4px; font-size:10px; }
  .viewer-top { align-items:flex-start; gap:7px; flex-direction:column; }
  .preview-label { display:none; }
  .viewer-bottom { gap:10px; flex-wrap:wrap; }
  .viewer-bottom>span:nth-child(2) { display:none; }
  .detail-list article>div { display:block; }
  .detail-list h3 { margin-bottom:8px; }
  footer>span { display:none; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* A large, physical canvas rather than another row of feature cards. */
.title-line { display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.title-line>span { display:block; animation:title-arrive 1.1s cubic-bezier(.16,1,.3,1) both; }
.title-line:nth-child(2)>span { animation-delay:120ms; }
.hero-description { animation:description-arrive 1s 350ms both; }
.hero-capture { transform:perspective(1600px) translateY(calc(var(--scroll,0) * -48px)) rotateX(calc(var(--scroll,0) * 5deg)) scale(calc(1 - var(--scroll,0) * .045)); transform-origin:50% 0; }
.hero-capture>a { animation:photo-arrive 1.35s 180ms cubic-bezier(.16,1,.3,1) both; }
#page-motion-toggle { font:inherit; padding:4px 0; color:var(--muted); border-bottom:1px solid currentColor; }
.workspace { position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,2.4fr) minmax(230px,1fr); gap:0 55px; margin-top:65px; padding:80px 0 90px; color:#e5ebf6; --muted:#b3bfd3; --accent:#9fbcff; --line:#465573; }
.workspace::before { content:''; position:absolute; inset:0 calc(-1 * clamp(22px,5vw,80px)); z-index:-1; background:#1b2b49; }
.workspace .section-heading { grid-column:1/-1; margin-bottom:55px; }
.workspace .section-heading h2,.sequence .section-heading h2 { font:400 clamp(65px,9vw,136px)/.9 BankGothic,Arial,sans-serif; letter-spacing:-.055em; margin-top:22px; }
.workspace .section-heading p,.sequence .section-heading p { font-size:13px; line-height:1.9; }
.workspace-simulation { border:0; margin:0; min-width:0; align-self:start; }
.workspace-preview { margin:0; box-shadow:0 24px 50px #0003; border:1px solid #435474; }
.workspace-toolbar { padding:15px; }
.workspace-toolbar .workspace-label { display:none; }
.workspace .terminal-demo { padding:25px 20px; min-height:650px; font-size:10px; }
.workspace .fetch-demo { grid-template-columns:minmax(100px,.65fr) minmax(0,1.35fr); gap:20px; }
.workspace .fetch-logo { width:100%; min-width:0; }
.workspace .fetch-output { min-width:0; flex:1; }
.workspace .fetch-table { font-size:9px; }
.workspace .fetch-table td { white-space:normal; overflow-wrap:anywhere; }
.workspace-caption { padding:15px; gap:9px; }
.workspace-caption>span { font-size:9px; }
.workspace-caption p { width:100%; }
.workspace-notes { display:flex; flex-direction:column; justify-content:space-between; gap:30px; padding-block:15px; }
.workspace-notes article { border-bottom:1px solid #465573; padding-bottom:25px; }
.workspace-notes article:last-child { border:0; padding-bottom:0; }
.workspace-notes h3 { font-size:28px; margin:8px 0 12px; color:#fff; }
.workspace-notes p { font-size:12px; max-width:36ch; }
.workspace .source-links { margin-top:13px; }
.workspace .source-links button { color:#a9c6ff; border-color:#536a95; }
.workspace .source-links button:hover { color:white; border-color:white; }
.sequence { order:3; display:flex; flex-direction:column; border:0; padding-top:100px; }
.sequence .section-heading { order:0; margin-bottom:35px; }
.sequence .section-heading h2 { color:#294fc5; }
.sequence .viewer { order:2; border-radius:0; margin-inline:calc(-1 * clamp(22px,5vw,80px)); box-shadow:none; }
.sequence .display { aspect-ratio:16/9; max-height:900px; }
.sequence .scene-controls { order:1; padding:0; margin:0 0 25px; border:0; gap:24px; }
.scene-controls button { position:relative; padding:20px 0; border-bottom:2px solid #b6c1d8; }
.scene-controls button b { font:400 clamp(22px,3vw,44px)/1 BankGothic,Arial,sans-serif; letter-spacing:-1px; }
.scene-controls button span { vertical-align:top; display:inline; }
.scene-controls button.selected::before { display:none; }
.scene-controls button:hover { background:none; color:var(--accent); }
.scene-controls button::after { content:attr(data-time); display:block; margin-top:9px; font:9px var(--mono); letter-spacing:.5px; color:#8796ae; }
.scene-controls button.selected::after { color:var(--accent); }
.sequence .stage-notes { order:3; padding-top:35px; }
.sequence .viewer-top,.sequence .viewer-bottom { padding-inline:clamp(22px,5vw,80px); }
.underneath { order:4; padding-block:35px 60px; }
.system-details summary { display:flex; justify-content:space-between; align-items:baseline; gap:20px; cursor:pointer; padding-block:10px; font-size:22px; list-style:none; }
.system-details summary::-webkit-details-marker { display:none; }
.system-details summary span { font-size:12px; color:var(--muted); }
.system-details[open] summary { margin-bottom:20px; }
.underneath .section-heading h2 { font-size:26px; }
.underneath .section-heading { margin-bottom:16px; }
.underneath .detail-list h3 { font-size:16px; }
.section-in-view .section-heading h2 { animation:section-arrive 950ms cubic-bezier(.16,1,.3,1) both; }
.viewer.stage-changing .display { animation:stage-arrive 650ms cubic-bezier(.16,1,.3,1); }
@keyframes title-arrive { from { transform:translateY(120%) rotate(5deg); } to { transform:translateY(0) rotate(0); } }
@keyframes description-arrive { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes photo-arrive { from { opacity:0; transform:perspective(1500px) rotateX(12deg) translateY(110px) scale(.88); } to { opacity:1; transform:perspective(1500px) rotateX(0) translateY(0) scale(1); } }
@keyframes section-arrive { from { clip-path:inset(0 0 100% 0); transform:translateY(45px); } to { clip-path:inset(0); transform:translateY(0); } }
.motion-off .title-line>span,.motion-off .hero-description,.motion-off .hero-capture>a,.motion-off .section-heading h2 { animation:none; }
.motion-off .hero-capture { transform:none; }
@media(min-width:1600px) {
  .workspace::before { inset-inline:calc((1440px - 100vw) / 2); }
}
@media(max-width:1050px) {
  .workspace { grid-template-columns:minmax(0,1fr) 230px; column-gap:28px; }
  .workspace .fetch-demo { grid-template-columns:minmax(80px,.5fr) minmax(0,1.5fr); }
  .workspace .terminal-demo { padding-inline:14px; }
  .workspace .fetch-table { font-size:8px; }
}
@media(max-width:800px) {
  nav { flex-wrap:wrap; justify-content:flex-end; gap:8px 17px; }
  .workspace { grid-template-columns:minmax(0,1fr); padding-block:55px; margin-top:30px; }
  .workspace-notes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; padding-top:35px; }
  .workspace-notes article,.workspace-notes article:last-child { grid-column:auto; border:0; padding:0; }
  .workspace-notes h3 { font-size:22px; }
  .workspace .fetch-demo { grid-template-columns:minmax(100px,.65fr) minmax(0,1.35fr); }
  .workspace .fetch-table { font-size:10px; }
  .workspace .terminal-demo { min-height:590px; }
  .sequence { padding-top:65px; }
  .scene-controls button::after { display:none; }
}
@media(max-width:540px) {
  .system-details summary { align-items:flex-start; flex-direction:column; gap:8px; }
  nav { justify-content:space-between; gap:8px 14px; }
  #page-motion-toggle { font-size:10px; }
  .hero-description { grid-template-columns:1fr; }
  .hero-description p { font-size:12px; }
  .workspace .section-heading h2,.sequence .section-heading h2 { font-size:18vw; }
  .workspace .section-heading,.sequence .section-heading { gap:24px; }
  .workspace .section-heading p,.sequence .section-heading p { font-size:12px; }
  .workspace-notes { display:flex; gap:25px; }
  .workspace-notes article { display:block; }
  .workspace-notes h3 { margin:6px 0 10px; }
  .workspace-notes p { max-width:48ch; }
  .workspace .fetch-table { font-size:8px; }
  .workspace .fetch-demo { grid-template-columns:70px minmax(0,1fr); gap:12px; }
  .workspace .fetch-logo { width:100%; margin:0; }
  .workspace .terminal-demo { min-height:560px; }
  .sequence .scene-controls { gap:14px; }
  .scene-controls button b { font-size:19px; }
  .sequence .display { aspect-ratio:4/3; }
}
@media(prefers-reduced-motion:reduce) {
  .title-line>span,.hero-description,.hero-capture>a,.section-in-view .section-heading h2 { animation:none; }
  .hero-capture { transform:none; }
  .scene-controls button::after { transition:none; }
}

/* Playable boot sequence. The tabs are chapters; the timeline seeks across them. */
.sequence-player {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  padding:15px clamp(22px,5vw,80px) 12px;
  background:#151b26;
  border-bottom:1px solid #3a465b;
  color:#c6cedb;
}
.sequence-play {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid #6f87ac;
  border-radius:50%;
  background:#26354d;
  color:#f1f6ff;
  font:15px/1 var(--mono);
  transition:background 180ms,color 180ms,border-color 180ms;
}
.sequence-play span { transform:translateX(1px); }
.sequence-play:hover { background:#a9c9ef; border-color:#a9c9ef; color:#101a28; }
.sequence-play.playing span { transform:none; }
.sequence-timeline { position:relative; min-width:0; padding-bottom:19px; }
.sequence-track { position:relative; display:flex; gap:2px; height:5px; background:#0a1018; overflow:hidden; }
.sequence-track i { display:block; flex:1; min-width:0; background:#40506a; }
.sequence-track i:nth-child(1) { flex:2.2; background:#4c5f7c; }
.sequence-track i:nth-child(2) { flex:3.2; background:#586e8e; }
.sequence-track i:nth-child(3) { flex:3.6; background:#6f89ad; }
.sequence-track i:nth-child(4) { flex:4.5; background:#8aa8cd; }
.sequence-track i:nth-child(5) { flex:1.7; background:#536786; }
.sequence-fill {
  position:absolute;
  left:0;
  top:0;
  width:var(--sequence-progress,0%);
  height:5px;
  background:linear-gradient(90deg,#7fa4da,#e3efff);
  pointer-events:none;
}
.sequence-fill::after {
  content:'';
  position:absolute;
  right:-4px;
  top:50%;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#f2f8ff;
  box-shadow:0 0 0 3px #a9c9ef33;
  transform:translateY(-50%);
}
.sequence-range {
  position:absolute;
  left:-5px;
  right:-5px;
  top:-9px;
  width:calc(100% + 10px);
  height:23px;
  margin:0;
  opacity:0;
  cursor:ew-resize;
  -webkit-appearance:none;
  appearance:none;
  background:transparent;
}
.sequence-range::-webkit-slider-thumb { -webkit-appearance:none; width:20px; height:20px; }
.sequence-range::-moz-range-thumb { width:20px; height:20px; border:0; }
.sequence-timeline:focus-within .sequence-track { outline:2px solid #a9c9ef; outline-offset:7px; }
.sequence-marks { position:absolute; left:0; right:0; top:12px; height:12px; font:8px/1 var(--mono); letter-spacing:.3px; color:#8294ad; }
.sequence-marks span { position:absolute; top:0; white-space:nowrap; transform:translateX(-50%); }
.sequence-marks span:first-child { transform:none; }
.sequence-marks span:last-child { transform:translateX(-100%); }
.sequence-clock { font:9px/1.4 var(--mono); color:#9badc5; white-space:nowrap; font-variant-numeric:tabular-nums; }
.sequence-clock b { color:#e3edfb; font-weight:400; }

/* The lock and splash surfaces share the SDDM backdrop and only change the chrome. */
.login-scene.shared-mode .frame { filter:blur(16px) saturate(.85); }
.login-scene.shared-mode .scanlines { opacity:.08; }
.login-scene.shared-mode .scene-shade { background:linear-gradient(#07101f4d,#07101f66 48%,#07101fb8); }
.login-scene.entering .frame,
.login-scene.entering .shared-chrome {
  animation:none;
  transform:scale(2);
  opacity:0;
  transition:transform 850ms cubic-bezier(.5,0,.75,.2),opacity 850ms cubic-bezier(.5,0,.75,.2);
}
.login-scene.entering .scene-shade,
.login-scene.entering .scanlines { opacity:0; transition:opacity 850ms cubic-bezier(.5,0,.75,.2); }
.shared-chrome { position:absolute; inset:0; z-index:5; color:#f2f7ff; transform-origin:50% 50%; }
.shared-frame { position:absolute; inset:3.5%; border:1px solid #77a9c9ef; border-radius:24px; }
.shared-rule { position:absolute; top:8%; left:50%; width:min(420px,80%); height:2px; background:#a9c9ef; opacity:.7; transform:translateX(-50%); }
.shared-clock { position:absolute; top:14%; left:0; right:0; text-align:center; }
.shared-clock b { display:block; font:300 clamp(44px,7vw,110px)/.88 'Helvetica Neue',Arial,sans-serif; letter-spacing:-.05em; text-shadow:0 2px 26px #0006; }
.shared-clock span { display:block; margin-top:10px; font-size:clamp(8px,.9vw,16px); color:#d7e5f5; letter-spacing:.2px; }
.shared-modes { position:absolute; top:10%; right:5.5%; display:flex; border:1px solid #a9c9ef55; background:#0d1624b8; backdrop-filter:blur(10px); }
.shared-modes button { padding:8px 12px; font:8px/1 var(--mono); letter-spacing:1px; text-transform:uppercase; color:#c6d8ee; background:none; }
.shared-modes button+button { border-left:1px solid #a9c9ef33; }
.shared-modes button:hover { color:#fff; background:#ffffff12; }
.shared-modes button.selected { color:#101a28; background:#a9c9ef; }
.shared-lock,.shared-splash { position:absolute; top:57%; left:50%; width:min(430px,58%); text-align:center; transform:translateX(-50%); }
.shared-kicker { display:block; font:9px/1 var(--mono); letter-spacing:2.5px; text-transform:uppercase; color:#a9c9ef; }
.shared-unlock { width:100%; margin-top:16px; padding:13px 16px; display:flex; align-items:center; justify-content:space-between; border:1px solid #cfe3ff88; background:#0c1521c7; color:#f2f7ff; font:10px/1 var(--mono); text-align:left; transition:background 180ms,color 180ms,border-color 180ms; }
.shared-unlock span { font-size:16px; }
.shared-unlock:hover { background:#a9c9ef; border-color:#a9c9ef; color:#101a28; }
.shared-lock small,.shared-splash small { display:block; max-width:92%; margin:14px auto 0; font:9px/1.7 var(--mono); color:#d1deee; text-shadow:0 1px 10px #000; }
.shared-progress { display:block; width:100%; height:3px; margin-top:22px; background:#26364a; overflow:hidden; }
.shared-progress i { display:block; width:52%; height:100%; background:#a9c9ef; animation:shared-progress 2.1s ease-in-out infinite alternate; }
.sequence .desktop-scene { display:grid; place-items:center; background:#294fc5; color:#fff; }
.desktop-scene::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 38%,#4b74ea 0,transparent 58%),linear-gradient(135deg,#1d3ba3,#2c57d3 62%,#2146b8); }
.desktop-scene::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 50%,#0613348f 0%,#0613342e 48%,transparent 74%); pointer-events:none; }
.desktop-scene>.desktop-mark { position:absolute; right:6%; bottom:4%; width:38%; height:auto; object-fit:contain; opacity:.15; filter:brightness(0) invert(1); }
.desktop-copy { position:relative; z-index:1; text-align:center; padding:0 20px; }
.desktop-copy>span { font:9px/1 var(--mono); letter-spacing:3px; color:#e4edff; text-shadow:0 1px 14px #061334; }
.desktop-copy b { display:block; margin:18px 0 22px; font:400 clamp(54px,9.5vw,150px)/.84 BankGothic,Arial,sans-serif; letter-spacing:-.06em; text-shadow:0 2px 0 #ffffff1a,0 18px 50px #06133480; }
.desktop-copy small { font:10px/1.6 var(--mono); color:#e4edff; letter-spacing:.4px; text-shadow:0 1px 14px #061334; }
.desktop-scene .scene-corner { color:#ffffffa0; }
.sequence .desktop-scene:not([hidden]) .desktop-copy { animation:desktop-arrive 850ms cubic-bezier(.16,1,.3,1) both; }

/* Shared-scene values stay linked to the files that define them. */
.scene-specs { order:4; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); margin-top:32px; border-block:1px solid var(--line); }
.scene-specs button { padding:22px 20px 24px; text-align:left; border-right:1px solid var(--line); border-radius:0; background:none; }
.scene-specs button:last-child { border-right:0; }
.scene-specs b { display:block; font:400 clamp(32px,4.2vw,58px)/.9 BankGothic,Arial,sans-serif; letter-spacing:-.045em; color:var(--ink); transition:color 180ms; }
.scene-specs span { display:block; margin-top:11px; font-size:11px; color:var(--muted); line-height:1.5; }
.scene-specs small { display:block; margin-top:17px; font:9px var(--mono); color:var(--accent); }
.scene-specs button:hover b { color:var(--accent); }
.scene-specs button:focus-visible { outline:2px solid var(--accent); outline-offset:-4px; }

@keyframes shared-progress { from { width:18%; } to { width:88%; } }
@keyframes desktop-arrive { from { opacity:.18; transform:translateY(22px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }

@media(max-width:800px) {
  .sequence-player { gap:13px; }
  .sequence-clock { font-size:8px; }
  .shared-modes { top:9%; right:4.5%; }
  .shared-modes button { padding:7px 9px; font-size:7px; }
  .shared-lock,.shared-splash { width:64%; }
  .scene-specs { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .scene-specs button { border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
  .scene-specs button:nth-child(2n) { border-right:0; }
  .scene-specs button:last-child { grid-column:1/-1; border-right:0; border-bottom:0; }
  .desktop-scene>.desktop-mark { width:48%; opacity:.11; }
}
@media(max-width:640px) {
  .sequence .scene-controls { display:grid; grid-template-columns:1fr 1fr; gap:0 22px; }
  .sequence .scene-controls button { padding:14px 0 12px; }
  .stage-suffix { display:none; }
  .sequence-player { grid-template-columns:auto minmax(0,1fr); gap:12px; padding-top:12px; padding-bottom:9px; }
  .sequence-clock { grid-column:2; justify-self:end; margin-top:-7px; }
  .sequence-marks { display:none; }
  .sequence-timeline { padding-bottom:0; }
  .sequence-track { height:4px; }
  .sequence-fill { height:4px; }
  .sequence-range { top:-8px; height:20px; }
  .shared-clock { top:15%; }
  .shared-clock b { font-size:clamp(38px,11vw,64px); }
  .shared-clock span { margin-top:6px; font-size:8px; }
  .shared-modes { top:8%; right:4.5%; }
  .shared-modes button { font-size:8px; }
  .shared-lock,.shared-splash { top:54%; width:74%; }
  .shared-kicker { font-size:8px; }
  .shared-unlock { margin-top:10px; padding:10px; font-size:9px; }
  .shared-lock small,.shared-splash small { margin-top:9px; font-size:8px; }
  .shared-progress { margin-top:15px; }
  .desktop-copy b { font-size:17vw; }
  .scene-specs b { font-size:clamp(28px,8vw,40px); }
  .scene-specs button { padding:16px 12px 18px; }
  .scene-specs span { font-size:9px; margin-top:8px; }
  .scene-specs small { font-size:8px; margin-top:11px; }
}
.motion-off .login-scene.entering .frame,
.motion-off .login-scene.entering .shared-chrome,
.motion-off .login-scene.entering .scene-shade,
.motion-off .login-scene.entering .scanlines { transition:none; }

/* Tor shell: a small nocturnal exhibition within the workspace story. */
.tor-feature { order:2; position:relative; isolation:isolate; padding:clamp(70px,9vw,140px) 0 35px; color:#f3eafe; }
.tor-feature::before { content:''; position:absolute; inset:0 calc(-1 * clamp(22px,5vw,80px)); z-index:-1; background:radial-gradient(ellipse at 22% 46%,#51306b 0,transparent 42%),radial-gradient(ellipse at 90% 8%,#382448 0,transparent 34%),#100c17; }
.tor-intro { display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:clamp(45px,6vw,80px); }
.tor-eyebrow,.tor-index { font:10px/1.5 var(--mono); letter-spacing:2px; color:#c89df1; }
.tor-eyebrow span { color:#9bea9b; font-size:17px; vertical-align:middle; margin-right:7px; }
.tor-intro h2 { margin:20px 0 0; font:400 clamp(76px,11.5vw,172px)/.78 BankGothic,Arial,sans-serif; letter-spacing:-.065em; }
.tor-intro h2 em { color:#c382f1; font-style:normal; }
.tor-intro>p { max-width:310px; color:#c9b8d6; font-size:14px; line-height:1.85; }
.tor-showcase { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(260px,.75fr); gap:clamp(30px,5vw,80px); align-items:center; }
.tor-window { min-width:0; border:1px solid #9a6eae66; background:#0e0b12; box-shadow:0 36px 80px #0007,0 0 80px #b25bda17; }
.tor-window-bar { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid #634b7055; color:#a894b7; font:9px var(--mono); letter-spacing:1px; }
.tor-window-bar>span:first-child { display:flex; gap:5px; }
.tor-window-bar i { width:6px; height:6px; border-radius:50%; background:#a75fe0; }
.tor-window-bar i:nth-child(2) { background:#d0a0f0; }.tor-window-bar i:nth-child(3) { background:#9de3a4; }
.tor-screen { padding:clamp(20px,4vw,55px); background:radial-gradient(ellipse at 45% 52%,#9a3ec329,transparent 60%),linear-gradient(145deg,#18121e,#0b0a0f 70%); }
.tor-screen-meta,.tor-screen-bottom { display:flex; justify-content:space-between; gap:15px; color:#ad8dbf; font:9px/1.4 var(--mono); letter-spacing:1px; }
.tor-screen-meta span:last-child { color:#92bd9a; }
.tor-screen figure { margin:clamp(35px,6vw,80px) auto; max-width:640px; }
.tor-screen img { display:block; width:100%; height:auto; border:1px solid #aa7ec529; box-shadow:0 18px 55px #0009; }
.tor-screen figcaption { padding-top:13px; color:#bc9bcd; font:9px/1.4 var(--mono); letter-spacing:1px; }
.tor-screen figcaption span { color:#9683a0; }
.tor-screen-bottom span:last-child { font-size:24px; line-height:.6; color:#a7e9a8; }
.tor-side h3 { margin:16px 0 24px; font:400 clamp(34px,3.6vw,56px)/1.04 BankGothic,Arial,sans-serif; letter-spacing:-.045em; }
.tor-side>p { max-width:38ch; color:#c7b8d0; font-size:13px; line-height:1.9; }
.tor-commands { margin:30px 0; border-top:1px solid #8a679947; }
.tor-commands>div { display:grid; grid-template-columns:28px minmax(0,1fr); gap:3px 8px; padding:13px 0; border-bottom:1px solid #8a679947; }
.tor-commands span { color:#9bea9b; font:10px/1.6 var(--mono); }
.tor-commands code { color:#dfb8ff; font:12px/1.6 var(--mono); overflow-wrap:anywhere; }
.tor-commands small { grid-column:2; color:#b4a2c0; font:11px/1.5 Arial,sans-serif; }
.tor-side .tor-caveat { color:#bda8c9; font-size:11px; }
.tor-source-links { display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:25px; }
.tor-source-links button { padding:5px 0; border-bottom:1px solid #9865b5; color:#e2b7ff; font:11px var(--mono); }
.tor-source-links button:hover { color:#fff; border-color:#fff; }
.tor-source-links button:focus-visible { outline-color:#d9abff; }
.tor-footer { display:flex; justify-content:space-between; gap:18px; margin-top:clamp(50px,8vw,110px); padding-top:18px; border-top:1px solid #8a679947; color:#ac97b8; font:9px/1.6 var(--mono); letter-spacing:1px; }
@media(min-width:1600px) { .tor-feature::before { inset-inline:calc((1440px - 100vw) / 2); } }
@media(max-width:850px) { .tor-showcase { grid-template-columns:1fr; } .tor-side { max-width:600px; } .tor-intro h2 { font-size:clamp(75px,14vw,120px); } }
@media(max-width:540px) { .tor-intro { align-items:start; flex-direction:column; gap:25px; } .tor-intro h2 { font-size:20vw; } .tor-window-bar { font-size:8px; } .tor-screen { padding:20px 15px; } .tor-screen-meta,.tor-screen-bottom { font-size:8px; letter-spacing:0; } .tor-screen figure { margin:38px 0; } .tor-footer { flex-direction:column; } }

/* A quiet sign-off, with the repository one deliberate click away. */
.showcase-footer { display:grid; grid-template-columns:1fr minmax(280px,440px); align-items:start; gap:50px; padding-block:60px 75px; }
.footer-identity { display:flex; flex-direction:column; align-items:start; }
.footer-kicker { color:#62749a; font:9px/1.5 var(--mono); letter-spacing:1.5px; }
.showcase-footer .footer-name { display:block; margin-top:18px; color:#1c263b; font:400 clamp(30px,3.5vw,48px)/1 BankGothic,Arial,sans-serif; letter-spacing:-.05em; }
.showcase-footer .footer-name span { color:#6383d3; }
.footer-identity p { margin-top:14px; color:#69758a; font-size:12px; }
.footer-links { border-top:1px solid #bbc3d1; }
.footer-links a { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:17px 0; border-bottom:1px solid #bbc3d1; color:#1c263b; transition:color 180ms,border-color 180ms; }
.footer-links a>span:first-child { display:flex; flex-direction:column; gap:4px; }
.footer-links small { color:#7183a7; font:9px/1.4 var(--mono); letter-spacing:1px; }
.footer-links b { font-size:14px; font-weight:500; }
.footer-links a>span:last-child { display:grid; place-items:center; width:36px; height:36px; border:1px solid #b6c1d8; border-radius:50%; color:#294fc5; font-size:17px; transition:background 180ms,color 180ms,transform 180ms; }
.footer-links a:hover { color:#294fc5; border-color:#294fc5; }
.footer-links a:hover>span:last-child { color:#fff; background:#294fc5; transform:translate(3px,-3px); }
@media(max-width:700px) { .showcase-footer { grid-template-columns:1fr; gap:35px; padding-block:45px 55px; } }
@media(prefers-reduced-motion:reduce) { .footer-links a,.footer-links a>span:last-child { transition:none; } }