:root {
  --tutorial-paper: #f5f6f1;
  --tutorial-surface: #ffffff;
  --tutorial-surface-soft: #eef0e9;
  --tutorial-text: #202620;
  --tutorial-muted: #667068;
  --tutorial-line: #d7dcd2;
  --tutorial-line-strong: #bfc7bb;
  --tutorial-amber: #c35a08;
  --tutorial-amber-soft: #fff1e7;
  --tutorial-green: #18864b;
  --tutorial-green-soft: #e8f7ed;
  --tutorial-red: #c53c35;
  --tutorial-shadow: 0 22px 55px rgba(8, 18, 12, .26);
}

.tutorial-player { width: min(1360px, 100%); }
.admin-tutorial-stage {
  background:
    radial-gradient(circle at 12% 0, rgba(243, 163, 41, .13), transparent 32%),
    radial-gradient(circle at 90% 100%, rgba(42, 135, 80, .12), transparent 35%),
    linear-gradient(145deg, #111a16, #09100d 72%);
}
.admin-tutorial-stage:fullscreen,
.admin-tutorial-stage:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
}
.tutorial-ambient {
  position: absolute;
  z-index: -2;
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(85px);
  opacity: .1;
}
.tutorial-ambient-a { top: -20%; left: -10%; background: var(--amber); }
.tutorial-ambient-b { right: -12%; bottom: -25%; background: var(--green); }

.tutorial-brand { right: 4.2%; color: #fff; }
.company-lockup, .product-lockup { display: flex; align-items: center; gap: 8px; }
.company-mark {
  display: grid;
  place-items: center;
  width: clamp(22px, 2.4vw, 32px);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 6px;
  background: #fff;
}
.company-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand-divider { width: 1px; height: 24px; background: rgba(255,255,255,.2); }
.tutorial-label {
  margin-left: auto;
  padding: .45em .75em;
  color: #f6c877;
  border: 1px solid rgba(243, 163, 41, .28);
  border-radius: 999px;
  background: rgba(243, 163, 41, .08);
  font-size: clamp(7px, .72vw, 10px);
  letter-spacing: .05em;
}

.scene { padding: 8.5% 5% 6.7%; }
.scene h1, .scene h2, .scene h3, .scene h4 { text-wrap: balance; }
.scene em { font-style: normal; }
.scene-number {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: clamp(30px, 3.2vw, 43px);
  aspect-ratio: 1;
  color: #1a211c;
  border-radius: 10px;
  background: var(--amber);
  box-shadow: 0 7px 24px rgba(243, 163, 41, .2);
  font: 800 clamp(9px, .9vw, 13px)/1 var(--mono);
}
.scene-copy h2, .tutorial-heading h2 {
  margin: 0;
  font-size: clamp(24px, 3vw, 42px);
  line-height: 1.15;
  letter-spacing: -.045em;
}
.scene-copy > p:not(.eyebrow) {
  color: var(--muted);
  font-size: clamp(10px, 1.2vw, 16px);
  line-height: 1.75;
}
.scene-copy code { color: #f4c46e; font-family: var(--mono); }
.left-copy {
  position: absolute;
  top: 25%;
  left: 6.2%;
  width: 32%;
}
.left-copy .scene-number { margin-bottom: 10%; }
.tutorial-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4%;
  text-align: left;
}
.tutorial-heading .eyebrow { margin-bottom: .35em; }
.compact-title { justify-content: flex-start; }
.compact-title .heading-note {
  margin: 0 0 0 auto;
  padding: .55em .85em;
  color: #d7ded8;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  font-size: clamp(7px, .78vw, 11px);
}

/* Common browser and management UI mockups. */
.browser-window, .admin-window {
  position: absolute;
  overflow: hidden;
  color: var(--tutorial-text);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 14px;
  background: var(--tutorial-paper);
  box-shadow: var(--tutorial-shadow);
}
.browser-bar {
  display: flex;
  align-items: center;
  gap: 1.2%;
  height: 9%;
  min-height: 30px;
  padding: 0 2%;
  color: #667068;
  background: #e3e6df;
  border-bottom: 1px solid #cbd1c7;
  font-size: clamp(6px, .7vw, 10px);
}
.browser-dots { display: flex; gap: 5px; }
.browser-dots i { width: 7px; height: 7px; border-radius: 50%; background: #aeb6ac; }
.browser-bar code {
  flex: 1;
  padding: .55em 1em;
  border-radius: 5px;
  background: #fafbf8;
  font-family: var(--mono);
}
.browser-bar b { color: var(--tutorial-green); }
.admin-demo-topbar {
  display: flex;
  align-items: center;
  height: 13%;
  min-height: 35px;
  padding: 0 2.1%;
  color: #4e5951;
  background: #fff;
  border-bottom: 1px solid var(--tutorial-line);
  font-size: clamp(6px, .68vw, 10px);
}
.admin-demo-brand { display: flex; align-items: center; gap: 7px; margin-right: 2%; font-weight: 800; }
.admin-demo-brand b {
  display: grid;
  place-items: center;
  width: clamp(20px, 2vw, 28px);
  aspect-ratio: 1;
  color: #fff;
  border-radius: 6px;
  background: var(--tutorial-amber);
  font-size: clamp(6px, .62vw, 9px);
}
.admin-demo-topbar nav { display: flex; align-self: stretch; }
.admin-demo-topbar nav i {
  display: grid;
  place-items: center;
  padding: 0 1.1vw;
  color: #667068;
  border-bottom: 2px solid transparent;
  font-style: normal;
}
.admin-demo-topbar nav i.active { color: #994608; border-bottom-color: var(--tutorial-amber); font-weight: 800; }
.admin-demo-topbar > button {
  margin-left: auto;
  padding: .45em .7em;
  color: #4e5951;
  border: 1px solid var(--tutorial-line);
  border-radius: 5px;
  background: #fff;
  font-size: inherit;
}
.admin-demo-topbar > button + button { margin-left: .5%; }
.demo-input {
  display: block;
  height: clamp(18px, 2.2vw, 31px);
  margin-top: 4px;
  overflow: hidden;
  color: var(--tutorial-text);
  border: 1px solid var(--tutorial-line-strong);
  border-radius: 6px;
  background: #f8f9f5;
}
.demo-input i {
  display: block;
  padding: .5em .7em;
  overflow: hidden;
  font: normal clamp(6px, .67vw, 10px)/1.3 var(--mono);
  white-space: nowrap;
}
.demo-cursor {
  position: absolute;
  z-index: 12;
  width: clamp(12px, 1.4vw, 19px);
  height: clamp(16px, 1.8vw, 24px);
  opacity: 0;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.3));
}
.demo-cursor::before {
  content: "";
  position: absolute;
  width: 66%;
  height: 86%;
  background: #1b241e;
  clip-path: polygon(0 0, 100% 65%, 59% 68%, 42% 100%, 28% 90%, 44% 61%, 0 69%);
}
.dialog-demo {
  position: absolute;
  z-index: 4;
  color: var(--tutorial-text);
  border: 1px solid var(--tutorial-line-strong);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 20px 50px rgba(15, 25, 18, .25);
}
.dialog-demo h3 { margin: 0; font-size: clamp(9px, 1.15vw, 16px); }
.dialog-demo label { color: #2c342e; font-size: clamp(6px, .68vw, 9px); font-weight: 700; }
.dialog-actions-demo { display: flex; justify-content: flex-end; gap: 6px; }
.dialog-actions-demo button, .server-page-head button, .settings-form-demo button,
.secret-modal-head button, .port-editor-demo button, .ports-source-row button {
  padding: .55em .9em;
  color: #5c655e;
  border: 1px solid var(--tutorial-line);
  border-radius: 5px;
  background: #fff;
  font-size: clamp(6px, .65vw, 9px);
  font-weight: 700;
}
.dialog-actions-demo .primary, .server-page-head button, .settings-form-demo button, .secret-modal-head button {
  color: #fff;
  border-color: var(--tutorial-amber);
  background: var(--tutorial-amber);
}
.status {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: .35em .65em;
  border-radius: 999px;
  font-size: clamp(6px, .64vw, 9px);
  font-weight: 800;
}
.status.green { color: var(--tutorial-green); background: var(--tutorial-green-soft); }
.status.gray { color: #6a746c; background: #ecefe9; }

/* Welcome. */
.scene-welcome { display: flex; flex-direction: column; justify-content: center; }
.welcome-copy { margin-top: -3%; text-align: center; }
.welcome-copy h1 {
  margin: 0;
  font-size: clamp(32px, 4.6vw, 64px);
  line-height: 1.08;
  letter-spacing: -.055em;
}
.welcome-copy h1 em { color: var(--amber); }
.welcome-copy > p:last-child { color: var(--muted); font-size: clamp(10px, 1.2vw, 16px); }
.opening-map {
  display: grid;
  grid-template-columns: 1fr .35fr 1fr .35fr 1fr .35fr 1fr .35fr 1fr;
  align-items: center;
  width: 88%;
  margin: 3.8% auto 0;
}
.opening-map > i { height: 2px; background: linear-gradient(90deg, rgba(243,163,41,.25), var(--amber)); }
.opening-step { display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: .35; }
.opening-step span {
  display: grid;
  place-items: center;
  width: clamp(34px, 3.9vw, 54px);
  aspect-ratio: 1;
  color: #f6c36d;
  border: 1px solid rgba(243,163,41,.35);
  border-radius: 12px;
  background: rgba(243,163,41,.08);
  font: 800 clamp(8px, .9vw, 13px)/1 var(--mono);
}
.opening-step b { font-size: clamp(7px, .85vw, 12px); }
.opening-step.complete span { color: #88e0ac; border-color: rgba(73,209,125,.4); background: rgba(73,209,125,.1); }
.welcome-result {
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  margin: 3% auto 0;
  padding: .7em 1.2em;
  color: #b8c4bc;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  font-size: clamp(8px, .88vw, 12px);
}
.welcome-result i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }
.scene-welcome.active .welcome-copy { animation: tutorial-rise .7s .1s both; }
.scene-welcome.active .opening-step:nth-of-type(1) { animation: step-on .45s .5s both; }
.scene-welcome.active .opening-step:nth-of-type(2) { animation: step-on .45s .85s both; }
.scene-welcome.active .opening-step:nth-of-type(3) { animation: step-on .45s 1.2s both; }
.scene-welcome.active .opening-step:nth-of-type(4) { animation: step-on .45s 1.55s both; }
.scene-welcome.active .opening-step:nth-of-type(5) { animation: step-on .45s 1.9s both; }
.scene-welcome.active .welcome-result { animation: tutorial-rise .5s 2.25s both; }

/* Installation preflight. */
.preflight-grid {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 2.2%;
  width: 90%;
  margin: 4% auto 0;
}
.preflight-card {
  position: relative;
  min-height: 230px;
  padding: 7%;
  overflow: hidden;
  color: #dce4de;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  box-shadow: 0 18px 36px rgba(0,0,0,.16);
}
.preflight-card::after {
  content: "";
  position: absolute;
  right: -12%;
  bottom: -28%;
  width: 45%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(243,163,41,.09);
}
.preflight-icon {
  display: grid;
  place-items: center;
  width: clamp(34px, 3.7vw, 50px);
  aspect-ratio: 1;
  color: #ffc66c;
  border: 1px solid rgba(243,163,41,.28);
  border-radius: 10px;
  background: rgba(243,163,41,.08);
  font: 800 clamp(7px, .75vw, 10px)/1 var(--mono);
}
.preflight-card h3 { margin: 7% 0 6%; font-size: clamp(10px, 1.15vw, 16px); }
.preflight-card p { margin: 2.5% 0; color: #aeb9b1; font-size: clamp(6px, .7vw, 10px); }
.preflight-card > b { display: block; margin-top: 7%; color: #f2bd66; font-size: clamp(6px, .67vw, 9px); }
.network-card > div { display: grid; grid-template-columns: .72fr 1.28fr; align-items: center; gap: 4%; margin-top: 3%; padding: 3%; border-radius: 7px; background: rgba(255,255,255,.055); }
.network-card > div i { color: #f1bd69; font-size: clamp(6px, .68vw, 9px); font-style: normal; font-weight: 800; }
.network-card > div span { color: #cbd4cd; font-size: clamp(6px, .65vw, 9px); }
.network-card > div span b { color: #fff0d3; }
.scene-preflight.active .preflight-card:nth-child(1) { animation: state-card-in .5s .2s both; }
.scene-preflight.active .preflight-card:nth-child(2) { animation: state-card-in .5s .6s both; }

/* Login. */
.login-browser { top: 18%; right: 5.5%; width: 54%; height: 69%; }
.login-canvas {
  display: grid;
  place-items: center;
  height: 91%;
  background: radial-gradient(circle at 50% 0, rgba(195,90,8,.09), transparent 42%), #f1f3ed;
}
.login-card-demo {
  position: relative;
  width: 43%;
  padding: 8% 7% 5%;
  border: 1px solid var(--tutorial-line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(28, 38, 31, .13);
}
.dw-mark {
  display: grid;
  place-items: center;
  width: clamp(25px, 3vw, 40px);
  aspect-ratio: 1;
  margin: 0 auto 5%;
  color: #fff;
  border-radius: 8px;
  background: var(--tutorial-amber);
  font-size: clamp(7px, .8vw, 11px);
  font-weight: 900;
}
.login-card-demo h3 { margin: 0 0 7%; text-align: center; font-size: clamp(9px, 1vw, 14px); }
.login-card-demo h3 em { color: var(--tutorial-muted); font-weight: 500; }
.login-card-demo label { display: block; margin-top: 5%; font-size: clamp(6px, .65vw, 9px); font-weight: 700; }
.login-card-demo button { width: 100%; margin-top: 7%; padding: .7em; color: #fff; border: 0; border-radius: 6px; background: var(--tutorial-amber); font-size: clamp(6px, .68vw, 10px); font-weight: 800; }
.login-card-demo small { display: block; margin-top: 6%; color: #919991; text-align: center; font-size: clamp(5px, .55vw, 8px); }
.login-cursor { right: 15%; bottom: 13%; }
.tip-line { display: flex; align-items: center; gap: 8px; margin-top: 10%; color: #d9e1db; font-size: clamp(8px, .85vw, 12px); }
.tip-line i { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.scene-login.active .left-copy { animation: tutorial-rise .6s .1s both; }
.scene-login.active .login-browser { animation: browser-in .7s .15s both; }
.scene-login.active .login-user i::after { content: "admin"; animation: reveal-text .1s 1.1s both; }
.scene-login.active .login-password i::after { content: "••••••••••••"; letter-spacing: .16em; animation: reveal-text .1s 2.1s both; }
.scene-login.active .login-cursor { animation: login-click 2.1s 2.8s both; }
.scene-login.active .login-card-demo button { animation: button-confirm .45s 3.65s both; }

/* Settings. */
.settings-window { top: 22%; left: 7%; width: 86%; height: 57%; }
.admin-demo-main { position: relative; height: 87%; padding: 2.1% 3%; }
.settings-main > h3 { margin: 0; font-size: clamp(9px, 1vw, 14px); }
.settings-tabs-demo { display: flex; gap: 3%; margin-top: 1.5%; border-bottom: 1px solid var(--tutorial-line); font-size: clamp(6px, .65vw, 9px); }
.settings-tabs-demo > * { padding: .75em .9em; }
.settings-tabs-demo b { color: var(--tutorial-amber); border-bottom: 2px solid var(--tutorial-amber); }
.settings-tabs-demo span { color: var(--tutorial-muted); }
.settings-content-demo { display: block; padding: 3% 4%; }
.settings-copy-demo h4 { margin: 0 0 1%; font-size: clamp(8px, .88vw, 12px); }
.settings-copy-demo p, .settings-form-demo p { color: var(--tutorial-muted); font-size: clamp(5px, .58vw, 8px); line-height: 1.5; }
.settings-form-demo { margin-top: 2.5%; }
.settings-form-demo label { font-size: clamp(6px, .66vw, 9px); font-weight: 700; }
.settings-form-demo button { float: right; margin-top: 2%; }
.server-ip-input i { color: #283028; }
.settings-cursor { right: 7%; bottom: 24%; }
.ip-mode-guide {
  position: absolute;
  right: 8%;
  bottom: 10%;
  left: 8%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5%;
}
.ip-mode-guide > span { display: flex; flex-direction: column; padding: .7em 1em; color: #cdd6cf; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; background: rgba(255,255,255,.045); font-size: clamp(6px, .67vw, 10px); }
.ip-mode-guide b { color: #f1bd69; }
.ip-mode-guide i { margin-top: 2px; color: #b6c1b9; font-style: normal; }
.scene-settings.active .settings-window { animation: tutorial-rise .6s .1s both; }
.scene-settings.active .server-ip-input { animation: field-focus .7s .9s both; }
.scene-settings.active .settings-cursor { animation: settings-click 2.3s 2.5s both; }
.scene-settings.active .settings-form-demo button { animation: button-confirm .45s 3.45s both; }
.scene-settings.active .ip-mode-guide { animation: tutorial-rise .45s .35s both; }

/* Add server. */
.add-window { top: 19%; left: 5%; width: 90%; height: 66%; }
.server-page-demo { height: 87%; padding: 2.3% 3%; }
.server-page-head { display: flex; align-items: center; justify-content: space-between; }
.server-page-head h3 { margin: 0; font-size: clamp(8px, .9vw, 13px); }
.server-page-head > div { display: flex; gap: 5px; }
.server-page-head .ghost-action { color: #8b4e1b; border-color: #d8c1af; background: transparent; }
.empty-table-demo { display: grid; place-items: center; height: 48%; margin-top: 3%; color: var(--tutorial-muted); border: 1px solid var(--tutorial-line); border-radius: 8px; background: #fff; font-size: clamp(6px, .67vw, 10px); }
.server-stats-demo { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 1.5%; padding: 1.2% 0; border-bottom: 1px solid var(--tutorial-line); }
.server-stats-demo span { display: flex; flex-direction: column-reverse; padding-left: 8%; border-left: 1px solid var(--tutorial-line); }
.server-stats-demo span:first-child { padding-left: 0; border-left: 0; }
.server-stats-demo b { font: 700 clamp(9px, 1.3vw, 18px)/1 var(--mono); }
.server-stats-demo i { color: var(--tutorial-muted); font-size: clamp(4px, .5vw, 7px); font-style: normal; }
.actual-server-table { margin-top: 1.5%; overflow: hidden; border: 1px solid var(--tutorial-line); border-radius: 5px; background: #fff; }
.actual-server-row { display: grid; grid-template-columns: 1fr .68fr .8fr .78fr 1.25fr .72fr .88fr 2fr; align-items: center; min-height: clamp(26px, 3.1vw, 42px); border-top: 1px solid var(--tutorial-line); font-size: clamp(4px, .48vw, 7px); }
.actual-server-row:first-child { border-top: 0; }
.actual-server-row > * { min-width: 0; padding: 0 5%; }
.actual-server-row code { font-family: var(--mono); }
.actual-server-head { color: var(--tutorial-muted); background: #f7f8f4; font-weight: 700; }
.actual-server-table > p { margin: 0; padding: 5%; color: var(--tutorial-muted); text-align: center; font-size: clamp(5px, .56vw, 8px); }
.actual-server-row button { padding: .35em .48em; color: #865021; border: 1px solid var(--tutorial-line); border-radius: 4px; background: transparent; font-size: inherit; }
.actual-server-row button:disabled { color: #9aa29c; }
.actual-server-row .actual-actions { display: flex; flex-wrap: wrap; gap: 3px; padding-block: 4px; }
.source-count { display: inline-block; width: 2.2ch; color: var(--tutorial-green); font-style: normal; font-weight: 800; }
.real-state::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: #9aa29c; }
.real-state.on { color: var(--tutorial-green); font-weight: 800; }
.real-state.on::before { background: var(--tutorial-green); }
.help-dot { display: inline-grid; place-items: center; width: 13px; height: 13px; color: #727d74; border: 1px solid var(--tutorial-line-strong); border-radius: 50%; background: #fff; font: 800 clamp(4px, .45vw, 6px)/1 inherit; }
.server-dialog-demo { top: 16%; left: 28%; width: 48%; padding: 2.4%; }
.dialog-grid { display: grid; gap: 8px 10px; margin-top: 4%; }
.two-cols { grid-template-columns: 1fr 1fr; }
.wide-field { grid-column: 1 / -1; }
.empty-secret i { color: #98a099; font-family: inherit; }
.typed-name i::after,
.typed-code i::after,
.typed-redirect i::after,
.typed-ip i::after,
.typed-ssh i::after { content: ""; }
.dialog-actions-demo { margin-top: 4%; }
.add-cursor { right: 4%; bottom: 5%; }
.form-facts { position: absolute; right: 7%; bottom: 8%; left: 7%; display: flex; justify-content: center; gap: 1%; }
.form-facts span { padding: .6em .9em; color: #c7d0c9; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; font-size: clamp(6px, .66vw, 9px); }
.form-facts b { margin-right: .45em; color: #f1bc62; }
.scene-add-server.active .add-window { animation: tutorial-rise .6s .1s both; }
.scene-add-server.active .server-dialog-demo { animation: dialog-pop .55s .7s both; }
.scene-add-server.active .typed-name i::after { animation: type-name .8s 1.2s steps(6, end) forwards; }
.scene-add-server.active .typed-code i::after { animation: type-code-admin .7s 1.8s steps(4, end) forwards; }
.scene-add-server.active .typed-redirect i::after { animation: type-redirect 1.3s 2.4s steps(25, end) forwards; }
.scene-add-server.active .typed-ip i::after { animation: type-ip-admin .9s 3s steps(13, end) forwards; }
.scene-add-server.active .typed-ssh i::after { animation: type-ssh-admin .35s 3.5s steps(2, end) forwards; }
.scene-add-server.active .add-cursor { animation: add-click 2s 3.8s both; }
.scene-add-server.active .dialog-actions-demo .primary { animation: button-confirm .45s 4.65s both; }
.scene-add-server.active .form-facts { animation: tutorial-rise .45s 5.05s both; }

/* Secret. */
.secret-copy h2 em { color: #f1b552; }
.secret-modal-demo {
  position: absolute;
  top: 23%;
  right: 10%;
  width: 47%;
  padding: 2.8%;
  color: var(--tutorial-text);
  border: 1px solid var(--tutorial-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--tutorial-shadow);
}
.secret-modal-head { display: flex; align-items: center; justify-content: space-between; }
.secret-modal-head h3 { margin: 0; font-size: clamp(9px, 1.1vw, 15px); }
.secret-modal-head > span { display: flex; align-items: center; gap: 7px; }
.secret-modal-head > span i { display: grid; place-items: center; width: 22px; height: 22px; color: var(--tutorial-muted); border: 1px solid var(--tutorial-line-strong); border-radius: 5px; font-style: normal; }
.secret-modal-demo pre { margin: 4% 0 0; padding: 5%; color: #ffbe55; border-radius: 8px; background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px), #171106; font: clamp(7px, .83vw, 12px)/1.8 var(--mono); white-space: pre-wrap; }
.secret-cursor { top: 8%; right: 4%; }
.scene-secret.active .secret-copy { animation: tutorial-rise .6s .1s both; }
.scene-secret.active .secret-modal-demo { animation: dialog-pop .6s .2s both; }
.scene-secret.active .secret-cursor { animation: secret-click 1.4s 1.1s both; }
.scene-secret.active .secret-modal-head button { animation: button-confirm .4s 1.7s both; }

/* Install. */
.install-window { top: 21%; left: 5%; width: 90%; height: 64%; }
.server-table-demo { position: relative; height: 87%; padding: 2.3% 3%; }
.actual-server-page { color: var(--tutorial-text); }
.server-row-demo { display: grid; grid-template-columns: 1.25fr .65fr 1fr .75fr .8fr 1fr; align-items: center; min-height: 35px; padding: 0 1.5%; border-bottom: 1px solid var(--tutorial-line); background: #fff; font-size: clamp(5px, .58vw, 8px); }
.server-head-demo { color: var(--tutorial-muted); background: #f0f2ed; font-weight: 700; }
.server-row-demo code { font-family: var(--mono); }
.server-row-demo button { padding: .35em .55em; color: #865021; border: 1px solid var(--tutorial-line); border-radius: 4px; background: #fff; font-size: inherit; }
.row-menu-demo {
  position: absolute;
  z-index: 5;
  top: 29%;
  right: 2.6%;
  display: grid;
  width: 16%;
  padding: .7%;
  border: 1px solid var(--tutorial-line);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 10px 25px rgba(20,30,23,.18);
}
.row-menu-demo button { padding: .6em .7em; text-align: left; border: 0; background: transparent; font-size: clamp(5px, .55vw, 8px); }
.row-menu-demo .danger { color: var(--tutorial-red); }
.row-menu-demo i { height: 1px; background: var(--tutorial-line); }
.install-dialog-demo { z-index: 8; top: 14%; left: 32%; width: 38%; padding: 2.5%; opacity: 0; box-shadow: 0 0 0 100vmax rgba(16,20,17,.28), 0 20px 50px rgba(15,25,18,.25); }
.ssh-box-demo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4%; padding-top: 4%; border-top: 1px solid var(--tutorial-line-strong); }
.ssh-box-demo > b, .ssh-box-demo > div { grid-column: 1 / -1; }
.ssh-box-demo > b { font-size: clamp(6px, .67vw, 9px); }
.ssh-box-demo > div { display: flex; justify-content: space-between; padding-bottom: 3%; border-bottom: 1px solid var(--tutorial-line); color: var(--tutorial-muted); font-size: clamp(5px, .58vw, 8px); }
.ssh-box-demo code { color: var(--tutorial-text); font-family: var(--mono); }
.password-dots i { letter-spacing: .13em; }
.operation-demo {
  position: absolute;
  z-index: 7;
  top: 19%;
  left: 30%;
  width: 40%;
  padding: 3%;
  opacity: 0;
  border: 1px solid var(--tutorial-line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 20px 48px rgba(15,25,18,.26);
}
.operation-head { display: flex; align-items: center; gap: 8px; }
.operation-head h3 { margin: 0; font-size: clamp(8px, .9vw, 13px); }
.operation-spinner { width: 14px; height: 14px; border: 2px solid #d5dad3; border-top-color: var(--tutorial-amber); border-radius: 50%; }
.operation-demo > code { display: block; margin: 4% 0; color: var(--tutorial-muted); font: clamp(5px, .56vw, 8px)/1.4 var(--mono); }
.operation-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2%; }
.operation-steps span { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; color: #8b948d; text-align: center; font-size: clamp(5px, .55vw, 8px); }
.operation-steps span::after { content: ""; position: absolute; top: 7px; left: 58%; width: 86%; height: 1px; background: var(--tutorial-line); }
.operation-steps span:last-child::after { display: none; }
.operation-steps i { position: relative; z-index: 2; display: grid; place-items: center; width: 15px; height: 15px; border: 1px solid var(--tutorial-line); border-radius: 50%; background: #fff; font-style: normal; }
.operation-steps .done { color: var(--tutorial-green); }
.operation-steps .done i { color: #fff; border-color: var(--tutorial-green); background: var(--tutorial-green); }
.operation-steps .working { color: var(--tutorial-amber); }
.operation-steps .working i { border-color: var(--tutorial-amber); }
.operation-steps .working i::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--tutorial-amber); }
.operation-demo > p { margin: 5% 0 0; color: var(--tutorial-muted); text-align: center; font-size: clamp(5px, .55vw, 8px); }
.install-cursor { top: 31%; right: 11%; }
.scene-install.active .install-window { animation: tutorial-rise .6s .1s both; }
.scene-install.active .install-cursor { animation: install-click 2s .7s both; }
.scene-install.active .row-menu-demo { animation: menu-sequence 1.5s .8s both; }
.scene-install.active .install-dialog-demo { animation: dialog-pop .45s .35s both; }

/* Installed but unconfigured. */
.state-window { top: 24%; left: 5%; width: 90%; height: 52%; }
.state-server-page { height: 87%; padding: 2.3% 3%; }
.state-explainer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4%; width: 74%; margin: 5% auto 0; }
.state-card { padding: 6% 7%; text-align: center; border: 1px solid rgba(255,255,255,.14); border-radius: 15px; background: rgba(255,255,255,.055); box-shadow: 0 18px 35px rgba(0,0,0,.16); }
.state-icon { display: grid; place-items: center; width: clamp(36px, 4.2vw, 58px); aspect-ratio: 1; margin: 0 auto 5%; border-radius: 50%; }
.state-icon i { width: 12px; height: 12px; border-radius: 50%; background: var(--green); box-shadow: 0 0 18px var(--green); }
.online-card .state-icon { border: 1px solid rgba(73,209,125,.3); background: rgba(73,209,125,.1); }
.unconfigured-card .state-icon { color: #aeb8b0; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); }
.state-card small { display: block; color: var(--muted); font-size: clamp(7px, .75vw, 10px); }
.state-card strong { display: block; margin-top: 2%; font-size: clamp(17px, 2.1vw, 29px); }
.online-card strong { color: #71d89a; }
.unconfigured-card strong { color: #d6ddd8; }
.state-card p { margin: 5% 0 0; color: var(--muted); font-size: clamp(7px, .75vw, 10px); line-height: 1.55; }
.state-separator { color: #829087; font-size: clamp(18px, 2.5vw, 34px); }
.scene-unconfigured.active .online-card { animation: state-card-in .55s .2s both; }
.scene-unconfigured.active .state-separator { animation: state-card-in .35s .75s both; }
.scene-unconfigured.active .unconfigured-card { animation: state-card-in .55s .9s both; }
.scene-unconfigured.active .state-window { animation: tutorial-rise .55s .2s both; }

/* Port configuration. */
.ports-window { top: 21%; left: 5%; width: 90%; height: 64%; }
.ports-page-demo { height: 87%; padding: 2.3% 3%; }
.ports-source-row { grid-template-columns: 1.3fr .7fr .7fr 1.5fr .8fr .8fr; border: 1px solid var(--tutorial-line); border-radius: 6px; }
.ports-source-row button { color: #fff; background: var(--tutorial-amber); }
.ports-dialog-demo { z-index: 8; top: 7%; left: 29%; width: 42%; padding: 2.3%; box-shadow: 0 0 0 100vmax rgba(16,20,17,.28), 0 20px 50px rgba(15,25,18,.25); }
.port-editor-demo { margin-top: 3%; }
.port-editor-head { display: flex; align-items: center; justify-content: space-between; font-size: clamp(6px, .68vw, 9px); }
.port-row-demo { display: grid; grid-template-columns: .45fr 1fr .35fr; align-items: center; gap: 7px; margin-top: 5px; padding: 1.8%; border: 1px solid var(--tutorial-line); border-radius: 5px; background: #f5f6f2; font-size: clamp(5px, .6vw, 8px); }
.port-row-demo span { padding: .5em; border-right: 1px solid var(--tutorial-line); font-weight: 800; }
.port-row-demo code { font-family: var(--mono); }
.port-row-demo button { color: var(--tutorial-red); border: 0; background: transparent; }
.add-port-button { margin-top: 5px; }
.second-port { opacity: 0; }
.compact-ssh { margin-top: 3%; padding: 2.5%; }
.compact-ssh .demo-input { height: clamp(15px, 1.8vw, 25px); }
.port-verify-demo { position: absolute; z-index: 8; right: 18%; bottom: 6%; left: 18%; display: flex; align-items: center; justify-content: center; opacity: 0; }
.port-verify-demo > i { width: 8%; height: 1px; background: var(--tutorial-line); }
.verify-phase { display: flex; align-items: center; gap: 5px; padding: .55em .8em; color: #6b756d; border-radius: 999px; background: #fff; font-size: clamp(5px, .57vw, 8px); }
.verify-phase i { display: grid; place-items: center; width: 14px; height: 14px; color: #fff; border-radius: 50%; background: var(--tutorial-green); font-style: normal; }
.verify-phase.active { color: var(--tutorial-green); box-shadow: 0 0 0 3px rgba(24,134,75,.12); }
.ports-cursor { top: 28%; right: 11%; }
.scene-ports.active .ports-window { animation: tutorial-rise .6s .1s both; }
.scene-ports.active .ports-cursor { animation: ports-click 2.2s .6s both; }
.scene-ports.active .ports-dialog-demo { animation: dialog-pop .45s .35s both; }
.scene-ports.active .second-port { animation: row-add .5s 2.1s both; }
.scene-ports.active .dialog-actions-demo .primary { animation: button-confirm .45s 3.45s both; }

/* Meaning of a normal protection state. */
.protection-flow {
  display: grid;
  grid-template-columns: 1fr .34fr .75fr .34fr 1fr;
  align-items: center;
  gap: 1%;
  width: 79%;
  margin: 3.2% auto 0;
}
.allowed-flow { grid-template-columns: 1fr .26fr .7fr .26fr 1.1fr .26fr 1fr; margin-top: 1.8%; }
.traffic-source, .traffic-result, .origin-gate, .dynwall-gate {
  padding: 7%;
  text-align: center;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 11px;
  background: rgba(255,255,255,.05);
}
.traffic-source span, .traffic-result span { display: block; color: var(--muted); font-size: clamp(6px, .67vw, 9px); }
.traffic-source code { display: block; margin-top: 4%; color: #d8e0da; font: clamp(6px, .7vw, 10px)/1.2 var(--mono); }
.dynwall-gate { padding: 5%; border-color: rgba(243,163,41,.3); background: rgba(243,163,41,.09); }
.dynwall-gate b { display: grid; place-items: center; width: clamp(24px, 2.8vw, 38px); aspect-ratio: 1; margin: 0 auto 4%; color: #171d19; border-radius: 8px; background: var(--amber); font-size: clamp(7px, .72vw, 10px); }
.dynwall-gate span, .dynwall-gate small { display: block; }
.dynwall-gate span { font-size: clamp(7px, .77vw, 11px); font-weight: 800; }
.dynwall-gate small { margin-top: 3%; color: var(--muted); font-size: clamp(5px, .58vw, 8px); }
.traffic-line { height: 2px; background: linear-gradient(90deg, rgba(243,163,41,.16), var(--amber)); }
.blocked-result { border-color: rgba(197,60,53,.3); background: rgba(197,60,53,.09); }
.blocked-result b { display: block; margin-top: 5%; color: #ef8b85; font-size: clamp(10px, 1.2vw, 16px); }
.allowed-source, .passed { border-color: rgba(73,209,125,.3); background: rgba(73,209,125,.075); }
.origin-gate { display: flex; align-items: center; justify-content: center; gap: 6%; color: #dce4de; font-size: clamp(6px, .65vw, 9px); }
.origin-gate b { color: #8b988e; }
.service-result b { display: block; margin-top: 5%; color: #f0bd68; font-size: clamp(7px, .77vw, 11px); }
.meaning-note { width: max-content; max-width: 88%; margin: 2.5% auto 0; padding: .65em 1em; color: #cfd8d1; border: 1px solid rgba(255,255,255,.11); border-radius: 999px; font-size: clamp(6px, .68vw, 10px); }
.scene-protection-meaning.active .protection-flow:not(.allowed-flow) { animation: tutorial-rise .55s .2s both; }
.scene-protection-meaning.active .allowed-flow { animation: tutorial-rise .55s .75s both; }
.scene-protection-meaning.active .meaning-note { animation: tutorial-rise .45s 1.25s both; }

/* Unknown operation result and reconciliation. */
.reconcile-card {
  width: 58%;
  margin: 3% auto 0;
  padding: 3.4%;
  color: var(--tutorial-text);
  border: 1px solid var(--tutorial-line);
  border-radius: 13px;
  background: #fff;
  box-shadow: var(--tutorial-shadow);
}
.actual-result-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3%; }
.actual-result-head h3 { margin: 0; font-size: clamp(9px, 1.05vw, 15px); }
.actual-result-head button { display: grid; place-items: center; width: 24px; height: 24px; color: var(--tutorial-muted); border: 1px solid var(--tutorial-line-strong); border-radius: 5px; background: transparent; }
.reconcile-status { display: flex; align-items: center; gap: 3%; }
.actual-result-dialog .reconcile-status { padding: 3%; border: 1px solid #e5c179; border-radius: 8px; background: #fff5df; }
.reconcile-status > span { display: grid; place-items: center; width: clamp(30px, 3.5vw, 48px); aspect-ratio: 1; color: #5b3c0c; border-radius: 50%; background: #ffe7ae; font-size: clamp(12px, 1.5vw, 20px); font-weight: 900; }
.reconcile-status small, .reconcile-status strong { display: block; }
.reconcile-status small { color: var(--tutorial-muted); font-size: clamp(6px, .65vw, 9px); }
.reconcile-status strong { margin-top: 2px; color: #a96306; font-size: clamp(12px, 1.45vw, 20px); }
.reconcile-status p { margin: 2% 0 0; color: #525b54; font-size: clamp(5px, .56vw, 8px); line-height: 1.55; }
.actual-result-dialog > code { display: block; margin: 3% .5% 0; color: var(--tutorial-muted); font: clamp(5px, .56vw, 8px)/1.4 var(--mono); }
.actual-result-actions { display: flex; justify-content: flex-end; margin-top: 3%; }
.actual-result-actions button { padding: .65em 1em; color: #fff; border: 0; border-radius: 6px; background: var(--tutorial-amber); font-size: clamp(6px, .65vw, 9px); font-weight: 800; }
.reconcile-card > p { color: var(--tutorial-muted); font-size: clamp(6px, .7vw, 10px); line-height: 1.6; }
.reconcile-card > button { width: 100%; padding: .75em; color: #fff; border: 0; border-radius: 6px; background: var(--tutorial-amber); font-size: clamp(7px, .76vw, 11px); font-weight: 800; }
.reconcile-rule { width: max-content; max-width: 86%; margin: 2% auto 0; padding: .75em 1em; color: #f0aaa4; border: 1px solid rgba(197,60,53,.25); border-radius: 6px; background: rgba(197,60,53,.08); text-align: center; font-size: clamp(6px, .65vw, 9px); }
.reconcile-path { display: flex; align-items: center; justify-content: center; gap: 1.2%; margin: 2.4% auto 0; color: #c6d0c8; font-size: clamp(6px, .66vw, 9px); }
.reconcile-path span { padding: .55em .8em; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; }
.reconcile-path i { color: var(--amber); font-style: normal; }
.scene-reconcile.active .reconcile-card { animation: dialog-pop .55s .2s both; }
.scene-reconcile.active .actual-result-actions button { animation: button-confirm .45s 1.2s both; }
.scene-reconcile.active .reconcile-path { animation: tutorial-rise .45s 1.55s both; }

/* Ready to hand off. */
.ready-layout { display: grid; grid-template-columns: 1.25fr .75fr; gap: 3%; width: 88%; margin: 4% auto 0; }
.ready-table-card, .handoff-card { border-radius: 13px; box-shadow: 0 18px 38px rgba(0,0,0,.18); }
.ready-left-column { display: grid; gap: 8%; }
.ready-table-card { overflow: hidden; color: var(--tutorial-text); background: #fff; }
.ready-table-title { display: flex; justify-content: space-between; padding: 3% 4%; color: var(--tutorial-muted); border-bottom: 1px solid var(--tutorial-line); background: #f1f3ee; font-size: clamp(6px, .67vw, 10px); }
.ready-server-row { display: grid; grid-template-columns: .75fr 1.5fr .75fr; align-items: center; gap: 2%; padding: 5% 4%; }
.ready-server-row > div:first-child { display: flex; flex-direction: column; }
.ready-server-row b { font-size: clamp(7px, .78vw, 11px); }
.ready-server-row code { margin-top: 4px; color: var(--tutorial-muted); font: clamp(5px, .56vw, 8px)/1.2 var(--mono); }
.port-chips-demo { display: flex; flex-wrap: wrap; gap: 4px; }
.port-chips-demo i { padding: .4em .55em; color: #79502d; border: 1px solid #dbcbbf; border-radius: 4px; font: normal clamp(5px, .52vw, 7px)/1 var(--mono); }
.ready-checks { display: flex; justify-content: space-around; padding: 3% 4%; color: var(--tutorial-green); border-top: 1px solid var(--tutorial-line); background: #f6fff8; font-size: clamp(5px, .6vw, 9px); }
.deployment-result-card { padding: 3.5% 4%; color: #dce5de; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; background: rgba(255,255,255,.05); }
.deployment-result-card > span { display: block; margin-bottom: 2%; color: #9ba89e; font-size: clamp(5px, .58vw, 8px); }
.deployment-result-card code { display: block; margin-top: 1.4%; color: #cbd5cd; font: clamp(5px, .57vw, 8px)/1.45 var(--mono); overflow-wrap: anywhere; }
.deployment-result-card .customer-url-line { padding: .45em .6em; color: #fff2d7; border: 1px solid rgba(243,163,41,.25); border-radius: 5px; background: rgba(243,163,41,.08); }
.deployment-result-card b { display: block; margin-top: 2.5%; color: #efb65c; font-size: clamp(5px, .59vw, 8px); }
.handoff-card { position: relative; padding: 7%; color: #dfe6e1; border: 1px solid rgba(243,163,41,.26); background: linear-gradient(145deg, rgba(243,163,41,.11), rgba(255,255,255,.04)); }
.handoff-icon { position: absolute; top: 7%; right: 7%; color: #f1b356; font-size: clamp(15px, 1.7vw, 23px); }
.handoff-card h3 { margin: 0 0 7%; font-size: clamp(11px, 1.4vw, 19px); }
.handoff-card label { display: block; margin-top: 5%; color: #9eaaa2; font-size: clamp(5px, .57vw, 8px); }
.handoff-card code { display: block; margin-top: 3px; color: #f4f7f5; font: clamp(5px, .58vw, 8px)/1.4 var(--mono); overflow-wrap: anywhere; }
.handoff-card p { margin: 7% 0 0; padding-top: 5%; color: #f2b760; border-top: 1px solid rgba(255,255,255,.1); font-size: clamp(5px, .58vw, 8px); }
.scene-ready.active .ready-table-card { animation: tutorial-rise .55s .15s both; }
.scene-ready.active .deployment-result-card { animation: tutorial-rise .55s .45s both; }
.scene-ready.active .handoff-card { animation: slide-from-right .6s .55s both; }
.scene-ready.active .ready-checks span:nth-child(1) { animation: check-pop .4s 1.2s both; }
.scene-ready.active .ready-checks span:nth-child(2) { animation: check-pop .4s 1.45s both; }
.scene-ready.active .ready-checks span:nth-child(3) { animation: check-pop .4s 1.7s both; }

/* Final acceptance. */
.scene-acceptance { display: flex; flex-direction: column; justify-content: center; }
.acceptance-flow { display: grid; grid-template-columns: 1fr .2fr 1fr .2fr 1fr .2fr 1.15fr; align-items: center; width: 92%; margin: -3% auto 0; }
.acceptance-node { padding: 8%; text-align: center; border: 1px solid rgba(255,255,255,.13); border-radius: 12px; background: rgba(255,255,255,.045); }
.acceptance-node span { display: block; color: var(--muted); font-size: clamp(6px, .68vw, 10px); }
.acceptance-node b { display: block; margin-top: 5%; font-size: clamp(10px, 1.25vw, 17px); }
.acceptance-node code { display: block; margin-top: 5%; color: #cfd8d1; font: clamp(5px, .65vw, 9px)/1.3 var(--mono); }
.blocked-test { border-color: rgba(197,60,53,.3); background: rgba(197,60,53,.08); }
.blocked-test b { color: #ef918b; }
.customer-test { border-color: rgba(243,163,41,.3); background: rgba(243,163,41,.07); }
.service-test, .evidence-test { border-color: rgba(73,209,125,.32); background: rgba(73,209,125,.08); }
.service-test b, .evidence-test b { color: #76d89c; }
.acceptance-arrow { position: relative; height: 2px; background: linear-gradient(90deg, rgba(73,209,125,.2), var(--green)); }
.acceptance-arrow::after { content: ""; position: absolute; top: -3px; right: 0; width: 7px; height: 7px; border-top: 2px solid var(--green); border-right: 2px solid var(--green); transform: rotate(45deg); }
.final-lockup { margin-top: 4%; text-align: center; }
.final-check { display: grid; place-items: center; width: clamp(34px, 4vw, 54px); aspect-ratio: 1; margin: 0 auto 1.5%; color: #102018; border-radius: 50%; background: #66d793; box-shadow: 0 0 35px rgba(73,209,125,.25); font-size: clamp(15px, 2vw, 28px); font-weight: 900; }
.final-lockup .eyebrow { margin-bottom: .3em; color: #76d89c; }
.final-lockup h2 { margin: 0; font-size: clamp(24px, 3vw, 42px); letter-spacing: -.04em; }
.final-lockup small { display: block; margin-top: .6%; color: var(--muted); font-size: clamp(7px, .8vw, 11px); }
.final-site { display: block; margin-top: .9%; color: var(--amber); font-size: clamp(10px, 1vw, 15px); letter-spacing: .08em; }
.scene-acceptance.active .blocked-test { animation: state-card-in .4s .1s both; }
.scene-acceptance.active .customer-test { animation: state-card-in .4s .45s both; }
.scene-acceptance.active .service-test { animation: state-card-in .4s .8s both; }
.scene-acceptance.active .evidence-test { animation: state-card-in .4s 1.15s both; }
.scene-acceptance.active .acceptance-arrow { animation: line-reveal .4s .55s both; }
.scene-acceptance.active .acceptance-arrow:nth-of-type(2) { animation-delay: .9s; }
.scene-acceptance.active .acceptance-arrow:nth-of-type(3) { animation-delay: 1.25s; }
.scene-acceptance.active .final-lockup { animation: tutorial-rise .6s 1.6s both; }

/* Player chapters and controls. */
.chapter-strip { display: flex; gap: 6px; padding: 12px 5px 0; overflow-x: auto; scrollbar-width: thin; }
.chapter-strip button {
  flex: 1 0 auto;
  padding: 7px 11px;
  color: #8f9a92;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 7px;
  background: rgba(255,255,255,.035);
  font-size: 11px;
  cursor: pointer;
}
.chapter-strip button:hover { color: #d8e0da; border-color: rgba(243,163,41,.28); }
.chapter-strip button.active { color: #171d19; border-color: var(--amber); background: var(--amber); font-weight: 800; }
.volume-control { width: 84px; accent-color: var(--amber); }
.tutorial-player .control-button { font-size: 12px; font-weight: 800; }
.tutorial-player .subtitle { bottom: 2.7%; }
.tutorial-player .subtitle span { max-width: 94%; }

/* Keyframes. */
@keyframes tutorial-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes browser-in { from { opacity: 0; transform: translateX(35px) scale(.98); } to { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes dialog-pop { from { opacity: 0; transform: translateY(14px) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes slide-from-right { from { opacity: 0; transform: translateX(25px); } to { opacity: 1; transform: translateX(0); } }
@keyframes step-on { from { opacity: .2; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes reveal-text { from { opacity: 0; } to { opacity: 1; } }
@keyframes field-focus { 50% { border-color: var(--tutorial-amber); box-shadow: 0 0 0 3px rgba(195,90,8,.12); } }
@keyframes button-confirm { 50% { filter: brightness(1.2); transform: scale(.97); box-shadow: 0 0 0 4px rgba(195,90,8,.13); } }
@keyframes toast-show { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes menu-show { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes menu-sequence {
  0% { opacity: 0; transform: translateY(-5px); }
  18%, 72% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}
@keyframes operation-show { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@keyframes dialog-sequence { 0% { opacity: 0; transform: scale(.96); } 12%, 82% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.97); } }
@keyframes spin-admin { to { transform: rotate(360deg); } }
@keyframes state-pulse { 50% { box-shadow: 0 0 0 5px rgba(195,90,8,.13); } }
@keyframes state-card-in { from { opacity: 0; transform: scale(.93); } to { opacity: 1; transform: scale(1); } }
@keyframes row-add { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes verify-show { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes check-pop { 0% { opacity: 0; transform: scale(.7); } 70% { transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
@keyframes line-reveal { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
@keyframes login-click { 0% { opacity: 0; transform: translate(35px, 20px); } 35%, 70% { opacity: 1; transform: translate(0, 0); } 78% { transform: scale(.75); } 100% { opacity: 0; transform: scale(1); } }
@keyframes settings-click { 0% { opacity: 0; transform: translate(45px, 18px); } 45%, 74% { opacity: 1; transform: translate(0, 0); } 82% { transform: scale(.76); } 100% { opacity: 0; } }
@keyframes add-click { 0% { opacity: 0; transform: translate(30px, 20px); } 45%, 72% { opacity: 1; transform: translate(0, 0); } 82% { transform: scale(.72); } 100% { opacity: 0; } }
@keyframes secret-click { 0% { opacity: 0; transform: translate(25px, 15px); } 35%, 72% { opacity: 1; transform: translate(0, 0); } 84% { transform: scale(.72); } 100% { opacity: 0; } }
@keyframes install-click { 0% { opacity: 0; transform: translate(18px, -10px); } 18%, 42% { opacity: 1; transform: translate(0, 0); } 50% { transform: scale(.72); } 58% { transform: translate(-10px, 38px); } 72%, 86% { opacity: 1; transform: translate(-10px, 38px); } 93% { transform: translate(-10px, 38px) scale(.72); } 100% { opacity: 0; } }
@keyframes ports-click { 0% { opacity: 0; transform: translate(20px, -10px); } 28%, 55% { opacity: 1; transform: translate(0, 0); } 62% { transform: scale(.72); } 70% { transform: translate(-255px, 190px); } 84%, 92% { opacity: 1; transform: translate(-255px, 190px); } 100% { opacity: 0; } }
@keyframes callback-type {
  0% { content: ""; } 8% { content: "d"; } 16% { content: "dyn"; } 24% { content: "dynw"; }
  32% { content: "dynwall"; } 40% { content: "dynwall."; } 52% { content: "dynwall.ex"; }
  64% { content: "dynwall.examp"; } 76% { content: "dynwall.example"; } 88% { content: "dynwall.example.co"; }
  100% { content: "dynwall.example.com"; }
}
@keyframes type-name { 0% { content: ""; } 20% { content: "广"; } 40% { content: "广州"; } 60% { content: "广州 "; } 80% { content: "广州 VO"; } 100% { content: "广州 VOS"; } }
@keyframes type-code-admin { 0% { content: ""; } 25% { content: "S"; } 50% { content: "S1"; } 75% { content: "S10"; } 100% { content: "S101"; } }
@keyframes type-redirect { 0% { content: ""; } 20% { content: "https://"; } 48% { content: "https://service"; } 72% { content: "https://service.example"; } 100% { content: "https://service.example.com/"; } }
@keyframes type-ip-admin { 0% { content: ""; } 22% { content: "203."; } 45% { content: "203.0.113"; } 70% { content: "203.0.113."; } 100% { content: "203.0.113.5"; } }
@keyframes type-ssh-admin { 0% { content: ""; } 50% { content: "2"; } 100% { content: "22"; } }

@media (max-width: 760px) {
  .admin-tutorial-stage { aspect-ratio: auto; height: min(76vh, 680px); min-height: 520px; }
  .tutorial-brand { right: 3.2%; gap: 6px; }
  .tutorial-label { display: none; }
  .scene { padding: 75px 14px 64px; }
  .scene-copy h2, .tutorial-heading h2 { font-size: clamp(20px, 6vw, 30px); }
  .tutorial-heading { justify-content: flex-start; }
  .compact-title .heading-note { display: none; }
  .left-copy { top: 16%; left: 7%; width: 86%; text-align: center; }
  .left-copy .scene-number { margin: 0 auto 10px; }
  .preflight-grid { grid-template-columns: 1fr 1fr; width: 96%; margin-top: 4%; gap: 7px; }
  .target-card, .network-card { grid-column: 1 / -1; }
  .preflight-card { min-height: 0; padding: 5%; }
  .preflight-card h3 { margin: 4% 0; }
  .preflight-card p { margin: 1.5% 0; }
  .network-card > div { display: grid; width: auto; margin: 1% 0 0; padding: 2%; grid-template-columns: .9fr 1.1fr; }
  .login-browser { top: 43%; right: 5%; width: 90%; height: 47%; }
  .login-card-demo { width: 56%; padding: 5%; }
  .settings-window, .add-window, .install-window, .ports-window { top: 27%; left: 2.5%; width: 95%; height: 55%; }
  .settings-window { height: 47%; }
  .admin-demo-topbar nav i { padding: 0 1.2vw; }
  .admin-demo-topbar > button { display: none; }
  .settings-content-demo { grid-template-columns: 1fr; gap: 4%; }
  .settings-copy-demo { display: block; }
  .ip-mode-guide { right: 5%; bottom: 14%; left: 5%; gap: 6px; }
  .server-dialog-demo { top: 10%; left: 12%; width: 76%; }
  .form-facts { bottom: 7%; flex-wrap: wrap; }
  .secret-copy { top: 15%; }
  .secret-modal-demo { top: 48%; right: 6%; width: 88%; }
  .install-dialog-demo { top: 12%; left: 18%; width: 64%; }
  .operation-demo { top: 18%; left: 14%; width: 72%; }
  .state-window { top: 29%; left: 2.5%; width: 95%; height: 48%; }
  .state-explainer { width: 96%; gap: 2%; }
  .ports-dialog-demo { top: 9%; left: 15%; width: 70%; }
  .protection-flow { width: 96%; grid-template-columns: 1fr .72fr 1fr; gap: 5px; }
  .allowed-flow { grid-template-columns: repeat(4, 1fr); }
  .protection-flow .traffic-line { display: none; }
  .traffic-source, .traffic-result, .origin-gate, .dynwall-gate { padding: 5%; }
  .meaning-note { width: 94%; text-align: center; }
  .reconcile-card { width: 86%; margin-top: 5%; padding: 5%; }
  .reconcile-path { flex-wrap: wrap; width: 96%; }
  .ready-layout { grid-template-columns: 1fr; width: 96%; margin-top: 5%; }
  .ready-left-column { gap: 6px; }
  .ready-server-row { padding: 3% 4%; }
  .deployment-result-card { padding: 2.5% 4%; }
  .handoff-card { padding: 4%; }
  .handoff-card label { margin-top: 2%; }
  .acceptance-flow { grid-template-columns: 1fr 1fr; width: 96%; gap: 7px; }
  .acceptance-arrow { display: none; }
  .acceptance-node { padding: 5%; }
  .chapter-strip button { padding: 6px 9px; font-size: 10px; }
  .tutorial-player .controls { gap: 5px; }
  .tutorial-player .controls #timeline { min-width: 36px; }
  .tutorial-player #time-label { min-width: 72px; font-size: 9px; }
  .volume-control { display: none; }
  .tutorial-player .subtitle { bottom: 2%; width: 94%; }
  .tutorial-player .subtitle span { font-size: 11px; }
}

@media (max-width: 430px) {
  .tutorial-player #fullscreen { display: none; }
  .tutorial-player .control-button { width: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .scene *, .chapter-strip * { animation-duration: .001ms !important; animation-delay: 0ms !important; transition-duration: .001ms !important; }
}