@font-face {
  font-family:BankGothic;
  src:url('../files/fonts/BankGothic.ttf');
}

:root {
  color-scheme:dark;
  --bg:#101312;
  --ink:#e9e9df;
  --muted:#a2aaa4;
  --line:#323a34;
  --accent:#c2e58d;
  --mono:ui-monospace,'DejaVu Sans Mono',monospace;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:30px;
}

body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Arial,'Noto Sans JP',sans-serif;
  line-height:1.7;
}

button,a {
  -webkit-tap-highlight-color:transparent;
}

a {
  color:inherit;
  text-decoration:none;
}

button {
  font:inherit;
  color:inherit;
  cursor:pointer;
}

button:focus-visible,a:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:5px;
}

button {
  border:0;
  background:none;
}

button:disabled {
  opacity:.4;
  cursor:default;
}

[hidden] {
  display:none!important;
}

p,h1,h2,h3 {
  margin:0;
}

p {
  color:var(--muted);
}

.navigation,main,footer {
  max-width:1380px;
  margin:auto;
  padding-left:60px;
  padding-right:60px;
}

.navigation {
  height:94px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
}

.wordmark {
  font:600 19px var(--mono);
  letter-spacing:-1px;
}

.snowflake {
  color:var(--accent);
  font-size:28px;
  vertical-align:middle;
  margin-right:12px;
}

.small-mark {
  font-size:11px;
  letter-spacing:0;
  font-weight:400;
  color:var(--muted);
}

nav {
  display:flex;
  gap:28px;
  font:11px var(--mono);
}

nav a:hover,.text-link:hover {
  color:var(--accent);
}

.intro {
  padding:66px 0 52px;
}

.eyebrow {
  font:10px var(--mono);
  letter-spacing:1.8px;
  color:var(--accent);
}

.status-dot {
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
  margin-right:8px;
}

.intro h1 {
  font-size:clamp(42px,5.5vw,77px);
  font-weight:500;
  letter-spacing:-4px;
  line-height:1.3;
  margin:28px 0 30px;
}

.intro h1 em {
  font-style:normal;
  color:var(--accent);
}

.intro-bottom {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
}

.intro-bottom p {
  font-size:13px;
  line-height:2;
}

.text-link {
  font:11px var(--mono);
  border-bottom:1px solid var(--line);
  padding:8px 0;
}

.text-link span {
  margin-left:40px;
}

.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:28px;
}

.section-heading h2 {
  font-size:clamp(25px,3.1vw,40px);
  font-weight:400;
  letter-spacing:-1.5px;
  margin-top:12px;
}

.section-heading p {
  font-size:11px;
  line-height:1.9;
}

.sequence {
  padding:30px 0 80px;
}

.viewer {
  border:1px solid #41493e;
  background:#090b0b;
  box-shadow:0 35px 80px #0004;
}

.viewer-top,.viewer-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:13px 20px;
  font:9px var(--mono);
  color:#abb5ac;
}

.viewer-top {
  border-bottom:1px solid var(--line);
  letter-spacing:1px;
}

.preview-label {
  color:#89918c;
  letter-spacing:0;
}

.viewer-bottom {
  border-top:1px solid var(--line);
}

.viewer-bottom>span:first-child {
  color:var(--accent);
}

.viewer-bottom button {
  font:9px var(--mono);
}

.display {
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#000;
}

.scene {
  position:absolute;
  inset:0;
  overflow:hidden;
}

.scene>img {
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
}

.scene-corner {
  position:absolute;
  right:3%;
  bottom:4%;
  font:8px var(--mono);
  letter-spacing:2px;
  color:#d8e5e1a0;
}

.frame {
  opacity:0;
  transition:opacity 620ms linear;
  transform:scale(1.06);
  animation:pan 32s ease-in-out infinite alternate;
}

.frame.active {
  opacity:1;
}

.scene-shade {
  position:absolute;
  inset:0;
  background:linear-gradient(#050c163a,#01030620 40%,#010508b0);
}

.scanlines {
  position:absolute;
  inset:0;
  background:url('../files/sddm/Gently-Blur-SDDM-6/anim/scanlines.png');
  opacity:.14;
  pointer-events:none;
}

.login-radio {
  position:absolute;
  left:4%;
  top:5%;
  background:#070a0dc7;
  border:1px solid #475a6b;
  padding:13px 22px;
  border-radius:5px;
  border-left:3px solid #a9c9ef;
  min-width:26%;
  color:#a9c9ef;
}

.login-radio b,.radio-mini b {
  font:clamp(9px,1.6vw,22px) BankGothic,monospace;
  letter-spacing:2px;
}

.login-radio i {
  font-size:10px;
  color:#e06c75;
  margin-left:18px;
  font-style:normal;
}

.login-radio small,.login-radio>span,.radio-mini small,.radio-mini>span {
  display:block;
  font:clamp(6px,.7vw,10px) var(--mono);
  margin-top:5px;
}

.login-form {
  position:absolute;
  left:50%;
  top:37%;
  transform:translateX(-50%);
  width:27%;
  padding:22px 20px 18px;
  text-align:center;
  background:radial-gradient(ellipse at 50% 30%,#07101fd9 0%,#07101f88 56%,transparent 78%);
  border-radius:16px;
  text-shadow:0 1px 12px #000;
}

.avatar {
  width:62px;
  height:62px;
  border-radius:50%;
  border:2px solid #e5e9efaa;
  background:#13203477;
  margin:auto auto 12px;
  display:block;
  object-fit:cover;
}

.login-form strong {
  display:block;
  font-size:18px;
  color:#f7f9fc;
  font-weight:400;
}

.fake-input {
  margin-top:15px;
  background:#07111fb8;
  border:1px solid #dce8f8a0;
  color:#f7f9fc;
  padding:13px 15px;
  border-radius:5px;
  text-align:left;
  font-size:12px;
  backdrop-filter:blur(6px);
}

.fake-input span {
  float:right;
  color:#f0f3f7;
}

.login-form small {
  display:flex;
  justify-content:space-around;
  font-size:10px;
  margin-top:15px;
  color:#f0f4fa;
}

.intro-overlay {
  position:absolute;
  inset:0;
  background:#0009;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  animation:intro-fade 3.1s both;
}

.intro-overlay b {
  font:clamp(16px,3.3vw,45px) BankGothic;
  letter-spacing:3px;
  text-shadow:2px 0 #e06c7566,-2px 0 #56b6c266;
  color:#e6edf5;
}

.intro-overlay small {
  color:#8fb3d9;
  font:9px var(--mono);
  letter-spacing:2px;
}

.intro-overlay>span {
  position:absolute;
  bottom:15%;
  color:#a9c9ef;
  font:9px var(--mono);
  letter-spacing:2px;
}

.grub-menu {
  position:absolute;
  left:5%;
  top:44%;
  width:36%;
  font:clamp(8px,1.7vw,23px) BankGothic;
}

.grub-menu p {
  padding:8px 12px;
  color:#7b8fa2;
}

.grub-menu .grub-selected {
  color:#c9def8;
  background:#749ac12b;
  border:1px solid #7e9bb7;
}

.grub-selected span {
  float:right;
}

.plymouth-scene>img {
  object-fit:fill;
}

.radio-mini {
  position:absolute;
  left:6%;
  bottom:13%;
  width:40%;
  padding:14px 20px;
  background:#070a0de8;
  border:1px solid #475a6b;
  color:#a9c9ef;
}

.loading {
  position:absolute;
  bottom:5%;
  right:4%;
  width:36%;
  font:clamp(10px,2vw,28px) BankGothic;
  color:#a9c9ef;
}

.progress-track {
  display:block;
  width:100%;
  height:5px;
  background:#1e2e3a;
  margin-top:12px;
}

.progress-track i {
  display:block;
  height:100%;
  background:#a9c9ef;
  animation:progress 8s linear infinite;
}

.scene-controls {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-bottom:1px solid var(--line);
}

.scene-controls button {
  text-align:left;
  position:relative;
  padding:24px 20px;
  border-right:1px solid var(--line);
}

.scene-controls button:last-child {
  border-right:0;
}

.scene-controls button.selected:before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:var(--accent);
}

.scene-controls button.selected {
  background:#c2e58d08;
}

.scene-controls span {
  color:#899389;
  font:10px var(--mono);
  margin-right:20px;
}

.scene-controls b {
  font:17px var(--mono);
  font-weight:400;
}

.scene-controls small {
  display:block;
  color:var(--muted);
  font-size:10px;
  margin:9px 0 0 36px;
}

.selected b {
  color:var(--accent);
}

.stage-notes {
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:60px;
  padding:38px 0 0;
}

.stage-notes h3 {
  font-size:25px;
  font-weight:400;
  margin-top:10px;
}

.stage-notes p,.workspace-notes p {
  font-size:12px;
  line-height:2;
}

.source-links {
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin:16px 0;
}

.source-links button {
  color:#c7d0c4;
  font:10px var(--mono);
  padding:3px 0;
  border-bottom:1px solid #475043;
}

.source-links button:hover {
  color:var(--accent);
  border-color:var(--accent);
}

.workspace {
  padding:54px 0 70px;
  border-top:1px solid var(--line);
}

.workspace-preview {
  border:1px solid #46514b;
  box-shadow:0 24px 70px #0003;
}

.workspace-toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#171d19;
  border-bottom:1px solid #46514b;
  padding:0 22px;
  gap:20px;
}

.terminal-switch { display:flex; gap:28px; }
.terminal-switch button {
  display:flex;
  gap:10px;
  padding:18px 0;
  border-bottom:2px solid transparent;
  color:#8f9b91;
  font:10px var(--mono);
  white-space:nowrap;
}
.terminal-switch button span { color:#c9d0c8; }
.terminal-switch button[aria-selected=true] { color:var(--accent); border-color:var(--accent); }
.terminal-switch button[aria-selected=true] span { color:var(--accent); }
.workspace-label { font:9px var(--mono); letter-spacing:1px; color:#819084; }

.workspace-capture { margin:0 0 28px; border:1px solid var(--line); background:#111514; overflow:hidden; border-radius:8px; }
.workspace-capture img { display:block; width:100%; height:auto; }
.workspace-capture figcaption { padding:18px 22px; }
.workspace-capture figcaption>span { color:var(--accent); font:10px var(--mono); letter-spacing:1px; }
.workspace-capture figcaption p { margin:8px 0 0; font-size:12px; }

.terminal-demo {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:650px;
  padding:24px 30px 36px;
  color:#e0e2dd;
  font:12px/1.55 'JetBrainsMono Nerd Font Mono','JetBrains Mono',var(--mono);
  background:#646664;
}
.terminal-demo::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-2;
  background:radial-gradient(ellipse at 35% 60%,#63473c,transparent 65%),linear-gradient(125deg,#22271f,#161b18 55%,#403128);
}
.terminal-demo::after {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(#23262747,#23262733);
}
.terminal-demo p { color:inherit; }
.prompt-top { display:flex; align-items:center; justify-content:space-between; }
.prompt { display:flex; font-size:11px; line-height:1.7; }
.prompt>span {
  display:block;
  padding:0 16px 0 19px;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%,10px 50%);
  margin-left:-10px;
  color:#fff;
  background:#4f70ba;
}
.prompt>span:first-child { margin-left:0; padding-left:13px; }
.prompt>span:nth-child(2) { background:#7eb5e1; color:#102332; }
.prompt>span:nth-child(3) { background:#d53010; }
.prompt-status { color:#0ee282; font-size:11px; }
.prompt-status span { margin-left:8px; color:#eee; }
.terminal-demo .prompt-date { color:#b9e27a; font-size:10px; margin-top:4px; }
.prompt-date>span { color:#7fb6a6; }
.terminal-demo .prompt-identity { color:#a9b4da; font-size:10px; }
.prompt-identity>span { color:#91bae2; }
.terminal-demo .prompt-path { color:#8caaa9; font-size:10px; }
.prompt-path>span { color:#9ee66a; }
.prompt-command { color:#b3becb!important; font-size:11px; }
.prompt-command>span { color:#e9d9c3; }
.fetch-demo {
  display:grid;
  grid-template-columns:minmax(130px,230px) minmax(0,650px);
  gap:32px;
  align-items:center;
  margin:17px 0 24px;
}
.fetch-logo { display:block; width:100%; height:auto; }
.fetch-output { min-width:0; }
.fetch-table {
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font:11px/1.65 'JetBrainsMono Nerd Font Mono','JetBrains Mono',var(--mono);
  color:#e1e1d9;
}
.fetch-table th,.fetch-table td { text-align:left; font-weight:400; padding:0 10px; }
.fetch-table thead th {
  font-size:10px;
  color:#b6c4bf;
  border:1px solid #acbbb373;
  border-bottom:0;
  padding-top:3px;
  padding-bottom:4px;
}
.fetch-table thead th:first-child { border-radius:4px 4px 0 0; }
.fetch-table thead th+th { border-radius:4px 4px 0 0; }
.fetch-table tbody th { width:108px; border-left:1px solid #acbbb373; border-right:1px solid #acbbb373; }
.fetch-table td { border-left:1px solid #acbbb373; border-right:1px solid #acbbb373; white-space:nowrap; }
.fetch-table tr:last-child>* { border-bottom:1px solid #acbbb373; padding-bottom:6px; }
.fetch-table td span { color:#bcc2bc; }
.fetch-table td em { color:#b0f27d; font-style:normal; }
.fetch-user th { color:#47e3c4; }
.fetch-system th { color:#ffcd6c; }
.fetch-hardware th { color:#ff986f; }
.fetch-tools th { color:#f0eebb; }
.fetch-network th { color:#74cdf5; }
.palette { position:relative; border:1px solid #acbbb373; border-radius:3px; margin-top:23px; padding:12px 10px 8px; }
.palette>span { position:absolute; top:-9px; left:8px; background:#666a65; padding:0 5px; color:#bdc8c1; font-size:10px; }
.color-swatches { display:flex; width:208px; max-width:100%; }
.color-swatches i { flex:1; height:28px; background:#232627; box-shadow:inset 0 -14px #ffffff29; }
.color-swatches i:nth-child(2) { background:#f74f25; }
.color-swatches i:nth-child(3) { background:#11d116; }
.color-swatches i:nth-child(4) { background:#f67400; }
.color-swatches i:nth-child(5) { background:#1d99f3; }
.color-swatches i:nth-child(6) { background:#eae2c6; }
.color-swatches i:nth-child(7) { background:#1abc9c; }
.color-swatches i:nth-child(8) { background:#fcfcfc; }
.prompt-repeat { margin-top:12px; }
.terminal-cursor { display:inline-block; width:7px; height:13px; background:#cfbea5; vertical-align:-2px; }

.workspace-caption {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px 20px;
  padding:15px 22px;
  background:#171d19;
  border-top:1px solid #46514b;
  font:9px var(--mono);
}
.workspace-caption>span { color:#b6c6b0; letter-spacing:1px; }
.workspace-caption p { font:10px/1.7 Arial,'Noto Sans JP',sans-serif; }
.workspace-caption button { padding:4px 0; color:var(--accent); font:10px var(--mono); }
.workspace-notes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:38px; margin-top:35px; }
.workspace-notes article { padding-top:22px; border-top:1px solid var(--line); }
.workspace-notes h3 { font-size:21px; font-weight:400; line-height:1.5; margin:13px 0; }
.workspace-notes p { font-size:12px; line-height:2; }
.workspace-notes .source-links { margin-bottom:0; }

.editor-demo { margin-top:18px; background:#242322ed; border:1px solid #777a6b; min-height:460px; }
.editor-tabline { display:flex; align-items:center; justify-content:space-between; background:#191919d9; padding:10px 16px; font:11px var(--mono); }
.editor-tabline>span { color:#ffd866; }
.editor-tabline small { color:#9c9b91; }
.editor-code { padding:14px 0; line-height:1.85; font-size:12px; overflow-x:auto; }
.editor-code>div { display:flex; min-width:max-content; padding-right:16px; }
.editor-code>div>span { color:#87877c; width:45px; padding-right:16px; text-align:right; flex-shrink:0; user-select:none; }
.editor-code code { font:inherit; white-space:pre; }
.editor-current-line { background:#ffffff09; }
.editor-empty { display:block!important; color:#68685e; padding:0 18px; }
.pink { color:#ff6188; font-weight:400; }
.green { color:#a9dc76; font-weight:400; }
.cyan { color:#78dce8; font-weight:400; }
.editor-status { display:flex; justify-content:space-between; background:#363630; font:10px var(--mono); color:#d6d6cb; }
.editor-status>span { padding:8px 12px; }
.editor-status>span:first-child { background:#a9dc76; color:#22251b; font-weight:700; }
.editor-status>span:nth-child(2) { margin-right:auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }

.underneath {
  padding:34px 0 70px;
}

.detail-list article {
  display:flex;
  gap:35px;
  align-items:start;
  padding:26px 0;
  border-top:1px solid var(--line);
}

.detail-number {
  font:11px var(--mono);
  color:var(--accent);
  padding-top:5px;
}

.detail-list h3 {
  font-size:16px;
  font-weight:400;
  margin-bottom:8px;
}

.detail-list p {
  font-size:11px;
  max-width:85ch;
}

.detail-list button {
  margin-left:auto;
  color:var(--accent);
  font-size:22px;
}

.closing {
  border-top:1px solid var(--line);
  padding:60px 0 80px;
  position:relative;
}

.closing h2 {
  font-size:42px;
  line-height:1.4;
  font-weight:400;
  letter-spacing:-2px;
  margin:20px 0;
}

.closing p {
  font-size:12px;
}

.map-link {
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:390px;
  background:var(--accent);
  color:#172011;
  padding:17px 20px;
  font:12px var(--mono);
  margin-top:30px;
}

.map-link:hover {
  background:#d5efb0;
}

footer {
  display:flex;
  justify-content:space-between;
  padding-top:22px;
  padding-bottom:30px;
  border-top:1px solid var(--line);
  font:9px var(--mono);
  color:#90998f;
}

dialog {
  width:min(900px,95vw);
  max-height:85vh;
  border:1px solid #5b6b50;
  background:#151b17;
  color:var(--ink);
  padding:0;
}

dialog::backdrop {
  background:#000b;
  backdrop-filter:blur(6px);
}

.dialog-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px;
  border-bottom:1px solid var(--line);
  gap:20px;
}

.dialog-heading h2 {
  font:13px var(--mono);
  overflow-wrap:anywhere;
  margin-top:10px;
}

.dialog-heading button {
  font-size:30px;
}

.dialog-heading+pre {
  padding:25px;
  margin:0;
  overflow:auto;
  max-height:58vh;
  font:11px/1.8 var(--mono);
  tab-size:2;
  color:#bfd0b7;
}

.dialog-footer {
  display:flex;
  justify-content:space-between;
  padding:15px 22px;
  border-top:1px solid var(--line);
  font-size:10px;
}

.dialog-footer button {
  color:var(--accent);
}

.noscript {
  padding:20px;
}

body.motion-off *,body.motion-off *:before {
  animation-play-state:paused!important;
}

.motion-off .frame {
  transition:none;
}

@keyframes pan {
  from {
    transform:scale(1.04) translate(-.5%,-.3%);
  }
  to {
    transform:scale(1.095) translate(.5%,.3%);
  }
}

@keyframes progress {
  from {
    width:5%;
  }
  to {
    width:100%;
  }
}

@keyframes intro-fade {
  0%,75% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

@media(max-width:900px) {
  .navigation,main,footer {
    padding-left:28px;
    padding-right:28px;
  }
  .small-mark {
    display:none;
  }
  .stage-notes {
    gap:35px;
  }
  .login-radio {
    padding:9px 12px;
  }
  .avatar {
    width:40px;
    height:40px;
    font-size:18px;
    margin-bottom:5px;
  }
  .fake-input {
    padding:8px 10px;
    margin-top:8px;
  }
  .login-form small {
    margin-top:10px;
  }
  .viewer-bottom>span:nth-child(2) {
    display:none;
  }
}

@media(max-width:640px) {
  .navigation,main,footer {
    padding-left:20px;
    padding-right:20px;
  }
  .navigation {
    height:auto;
    min-height:90px;
    align-items:start;
    padding-top:20px;
    padding-bottom:17px;
    gap:12px;
    flex-direction:column;
  }
  .wordmark {
    font-size:15px;
  }
  nav {
    font-size:9px;
    gap:20px;
  }
  .intro {
    padding-top:40px;
  }
  .intro h1 {
    font-size:41px;
    letter-spacing:-2.5px;
  }
  .intro-bottom {
    display:block;
  }
  .intro-bottom .text-link {
    display:inline-block;
    margin-top:18px;
  }
  .intro-bottom p {
    font-size:11px;
  }
  .section-heading {
    align-items:start;
    gap:18px;
  }
  .section-heading p {
    max-width:120px;
    font-size:9px;
  }
  .section-heading h2 {
    font-size:25px;
    letter-spacing:-1px;
  }
  .eyebrow {
    font-size:8px;
    letter-spacing:1px;
  }
  .viewer-top,.viewer-bottom {
    padding:10px;
    font-size:7px;
  }
  .viewer-top .preview-label {
    font-size:6px;
    max-width:125px;
    text-align:right;
  }
  .viewer-bottom button {
    font-size:7px;
  }
  .scene-controls button {
    padding:18px 9px;
  }
  .scene-controls span {
    margin-right:8px;
    font-size:8px;
  }
  .scene-controls b {
    font-size:12px;
  }
  .scene-controls small {
    font-size:8px;
    margin:8px 0 0;
    line-height:1.6;
  }
  .login-form {
    top:30%;
    width:42%;
    padding:10px 8px 8px;
  }
  .avatar {
    width:30px;
    height:30px;
    font-size:12px;
    margin-bottom:3px;
  }
  .login-form strong {
    font-size:12px;
  }
  .fake-input {
    font-size:9px;
    padding:7px 8px;
    margin-top:6px;
  }
  .login-form small {
    font-size:7px;
    margin-top:7px;
  }
  .login-radio {
    padding:6px 8px;
    border-left-width:2px;
  }
  .login-radio b {
    font-size:8px;
    letter-spacing:1px;
  }
  .login-radio i {
    font-size:5px;
    margin-left:5px;
  }
  .login-radio small,.login-radio>span {
    font-size:5px;
    margin-top:2px;
  }
  .scene-corner {
    font-size:5px;
    letter-spacing:.7px;
  }
  .grub-menu p {
    padding:3px 5px;
  }
  .radio-mini {
    padding:5px 8px;
  }
  .radio-mini b {
    font-size:8px;
  }
  .radio-mini small,.radio-mini>span {
    font-size:5px;
  }
  .loading {
    font-size:10px;
  }
  .progress-track {
    height:3px;
    margin-top:5px;
  }
  .stage-notes {
    grid-template-columns:1fr;
    gap:20px;
    padding-top:27px;
  }
  .stage-notes h3 {
    font-size:23px;
  }
  .sequence {
    padding-bottom:45px;
  }
  .workspace {
    padding-top:35px;
  }
  .detail-list article {
    gap:16px;
  }
  .detail-list h3 {
    font-size:15px;
  }
  .closing h2 {
    font-size:35px;
  }
  .intro-overlay b {
    font-size:16px;
    letter-spacing:1px;
  }
  .intro-overlay small {
    font-size:5px;
    letter-spacing:.8px;
  }
  .intro-overlay>span {
    font-size:5px;
  }
  footer {
    gap:18px;
    flex-direction:column;
    font-size:8px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*:before {
    animation:none!important;
    transition:none!important;
  }
}

@media(max-width:1000px) {
  .terminal-demo { padding:20px; min-height:610px; }
  .fetch-demo { grid-template-columns:minmax(100px,180px) minmax(0,1fr); gap:20px; }
  .fetch-table { font-size:10px; }
  .fetch-table th,.fetch-table td { padding-left:7px; padding-right:7px; }
  .fetch-table td span { display:none; }
  .fetch-table tbody th { width:82px; }
  .workspace-notes { gap:24px; }
  .workspace-notes h3 { font-size:19px; }
}
@media(max-width:640px) {
  .workspace .section-heading { flex-direction:column; gap:12px; }
  .workspace .section-heading p { max-width:none; font-size:11px; }
  .workspace-toolbar { padding:0 14px; }
  .workspace-label { display:none; }
  .terminal-switch { gap:24px; }
  .terminal-switch button { padding:15px 0; font-size:10px; gap:7px; }
  .terminal-demo { padding:17px 12px 28px; min-height:640px; }
  .terminal-prompt .prompt-date { font-size:8px; }
  .prompt { font-size:9px; }
  .prompt-status { display:none; }
  .fetch-demo { grid-template-columns:1fr; gap:17px; margin:18px 0 23px; }
  .fetch-logo { width:90px; margin:0 auto; }
  .fetch-table { font-size:9px; line-height:1.7; }
  .fetch-table thead th { font-size:9px; }
  .fetch-table tbody th { width:72px; }
  .fetch-table td { white-space:normal; overflow-wrap:anywhere; }
  .fetch-table th,.fetch-table td { padding-left:6px; padding-right:6px; }
  .palette { margin-top:18px; }
  .color-swatches i { height:22px; box-shadow:inset 0 -11px #ffffff29; }
  .workspace-caption { padding:14px; align-items:flex-start; flex-direction:column; }
  .workspace-caption p { font-size:10px; }
  .workspace-notes { grid-template-columns:1fr; gap:25px; margin-top:27px; }
  .workspace-notes h3 { font-size:22px; }
  .editor-demo { min-height:440px; }
  .editor-code { font-size:10px; }
  .editor-code>div>span { width:31px; padding-right:10px; }
  .editor-tabline { padding:10px; font-size:10px; }
  .editor-tabline small { display:none; }
  .editor-status { font-size:8px; }
  .editor-status>span { padding:8px; }
}