/* Walkthrough chrome and the opt-in localhost tutorial projection. The normal
   product-page walkthrough is unchanged unless ?tutorial=first-chat is set. */

#demo-bar[hidden] { display: none; }

/* preview.css centres the stage in the viewport, which splits the letterbox
   between the top and the bottom and put this bar over the composer. Pinning
   the stage near the top moves the slack below it. Scaling from the top edge
   rather than the centre is what keeps it pinned once preview.js sets
   --gt-stage-scale. The 2.5vw is 40/1600 of the design width: room above the
   stage so the context meter and the dialogue card are not flush with the
   frame's edge. */
#stage:not([data-client-shell="launcher"]) {
  top: 2.5vw;
  transform: translateX(-50%) scale(var(--gt-stage-scale, 1));
  transform-origin: top center;
}

/* A tutorial represents the app itself, not the public-site walkthrough. It
   fills the window like GameTerm and leaves the legacy prompt/audio bar out. */
html[data-tutorial="first-chat"] #stage:not([data-client-shell="launcher"]) {
  top: 50%;
  transform: translate(-50%, -50%) scale(var(--gt-stage-scale, 1));
  transform-origin: center;
}

html[data-tutorial="first-chat"] #demo-bar { display: none; }
html[data-tutorial="first-chat"] #stage { transition: opacity .22s ease, filter .22s ease; }
html[data-tutorial-leaving="true"] #stage { opacity: 0; filter: blur(5px); }

/* The host sizes this frame 1600x1080 for a 1600x900 stage, so preview.js
   scales the stage by width; 40/1600 of the width sits above the stage and
   the remaining 140/1600 is letterbox below it. Sizing the bar in vw makes
   it exactly that band at any width instead of overlapping the app at narrow
   ones. */
#demo-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  display: flex;
  flex-wrap: nowrap;
  gap: .8vw;
  align-items: center;
  box-sizing: border-box;
  height: 8.75vw;
  padding: 0 1.2vw;
  overflow: hidden;
  color: #f5f7ff;
  background: rgba(10, 12, 24, .94);
  border-top: 1px solid rgba(126, 234, 255, .45);
  font: 700 clamp(8px, 1vw, 13px)/1.2 "Courier Prime", ui-monospace, monospace;
  text-transform: uppercase;
}

#demo-link {
  flex: 0 0 auto;
  color: #7eeaff;
  text-underline-offset: 3px;
  white-space: nowrap;
}

#demo-link:hover, #demo-link:focus-visible { color: #d33e7b; }

#demo-bar-label { flex: 0 0 auto; color: #7eeaff; letter-spacing: .06em; white-space: nowrap; }

/* The questions are the point of the bar, so they never shrink. */
#demo-chips { flex: 0 0 auto; display: flex; flex-wrap: nowrap; gap: .5vw; }

#demo-chips button {
  padding: .65vw .85vw;
  white-space: nowrap;
  color: #f5f7ff;
  background: rgba(126, 234, 255, .12);
  border: 1px solid rgba(126, 234, 255, .55);
  border-radius: 999px;
  font: inherit;
  text-transform: none;
  cursor: pointer;
}

#demo-chips button:hover,
#demo-chips button:focus-visible {
  color: #0a0c18;
  background: #7eeaff;
  outline: 2px solid #d33e7b;
  outline-offset: 2px;
}

/* If a wider font ever runs the bar out of room, this is what gives:
   it is the only hint the page gives. */
#demo-bar-note {
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  color: rgba(245, 247, 255, .62);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Required by the voice library's terms: audio generated with this voice may
   be used commercially only if the credit is shown. */
#demo-credit { flex: 0 0 auto; margin-left: auto; color: rgba(245, 247, 255, .62); white-space: nowrap; }
#demo-bar-note ~ #demo-credit { margin-left: 0; }

/* The page always sizes this frame 1600 wide inside and scales it, so the bar
   has one width to fit and no breakpoint would ever fire. The full wording
   "press F for full screen" is the hint in the bar; the page shows no caption
   the page; in full screen the frame is the whole screen, so the short form
   here is the badge. Five questions leave the note about 200px at 1600, which
   "F for full screen" fits and the longer wording did not. The credit is never shortened or hidden: the voice
   library's terms require it to be shown wherever the audio is used. */
#demo-bar-note { font-weight: 400; }

/* Three fixes to the app's scene for visitors, 2026-09-25. preview.js stays byte for byte, so they live here.
   1. The speaker's paragraphs are italic and also skewed; a skew of a tall block moves every line further
      left than the one above, past the panel's edge. The italic keeps the slant; the skew goes. */
.history-turn[data-author="speaker"] p, .history-turn[data-author="speaker"] ul { transform: none; }
/* 2. A long reply with its Japanese line scrolls inside the panel; the bar shows that it does. */
#scene-history { scrollbar-width: auto; scrollbar-color: rgba(126, 234, 255, .6) transparent; }
/* 3. A developer counter ("Scrollback test · N turns") is not for visitors. */
#scrollback-status { visibility: hidden; }
/* The Japanese line's tag says what it is. The audio is this walkthrough's own VOICEVOX recording,
   credited where preview.js names it, and GameTerm itself now speaks with Kokoro. */
.turn-translation span { font-size: 0; }
.turn-translation span::after { content: "Spoken · JA"; font-size: .55rem; }
/* In full screen on a 1280-wide screen the bar ran out of room and clipped the credit, which the voice library's
   terms require to be shown. 0.9vw is still 13px at 1440 and 11.5px at 1280, where it all fits. */
#demo-bar { font-size: clamp(8px, .9vw, 13px); }

#tutorial-guide {
  position: absolute;
  inset: 0;
  z-index: 80;
  width: 1600px;
  height: 900px;
  pointer-events: none;
  font-family: var(--gt-font-mono);
}

#tutorial-guide[hidden] { display: none; }
#tutorial-model-disclaimer { position: absolute; inset: 0; z-index: 100; display: grid; place-items: center; padding: 80px; color: #f5f7ff; background: rgba(7, 5, 14, .78); font-family: var(--gt-font-mono); }
#tutorial-model-disclaimer[hidden] { display: none; }
#tutorial-model-disclaimer article { display: grid; gap: 18px; width: 720px; padding: 34px 40px; background: color-mix(in srgb, var(--gt-scene-composer-surface) 97%, #090710); border: 3px solid var(--gt-scene-input-border); border-radius: 18px; box-shadow: 0 24px 70px rgba(0,0,0,.58); animation: tutorial-step-in .32s ease-out; }
#tutorial-model-disclaimer p, #tutorial-model-disclaimer h2 { margin: 0; }
#tutorial-model-disclaimer article > p:first-child { color: var(--gt-scene-input-border); font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
#tutorial-model-disclaimer h2 { color: var(--gt-scene-input-caret); font-size: 32px; }
#tutorial-model-disclaimer article > p:nth-of-type(2) { color: rgba(245,247,255,.86); font-size: 17px; line-height: 1.45; }
#tutorial-model-disclaimer label { display: flex; gap: 13px; align-items: center; padding: 14px 16px; border: 1px solid rgba(126,234,255,.42); border-radius: 9px; cursor: pointer; }
#tutorial-model-disclaimer input { width: 22px; height: 22px; accent-color: var(--gt-scene-input-caret); }
#tutorial-disclaimer-start { justify-self: start; padding: 10px 16px; color: #090710; background: var(--gt-scene-input-caret); border: 0; border-radius: 7px; font: 700 15px var(--gt-font-mono); cursor: pointer; }
#tutorial-disclaimer-start:disabled { cursor: not-allowed; filter: grayscale(1); opacity: .42; }
.tutorial-dim { position: absolute; z-index: 80; background: rgba(7, 5, 14, .58); transition: left .34s cubic-bezier(.2,.8,.2,1), top .34s cubic-bezier(.2,.8,.2,1), width .34s cubic-bezier(.2,.8,.2,1), height .34s cubic-bezier(.2,.8,.2,1); }

#tutorial-focus {
  position: absolute;
  z-index: 82;
  border: 4px solid var(--gt-scene-input-border);
  border-radius: 12px;
  transition: left .34s cubic-bezier(.2,.8,.2,1), top .34s cubic-bezier(.2,.8,.2,1), width .34s cubic-bezier(.2,.8,.2,1), height .34s cubic-bezier(.2,.8,.2,1);
}

#tutorial-pointer { position: absolute; inset: 0; z-index: 81; overflow: visible; }
#tutorial-pointer-shaft, #tutorial-pointer-head { fill: var(--gt-scene-input-border); }

#tutorial-card {
  position: absolute;
  z-index: 83;
  display: grid;
  align-content: center;
  width: 560px;
  height: 170px;
  margin: 0;
  padding: 22px 28px 18px;
  color: #f5f7ff;
  background: color-mix(in srgb, var(--gt-scene-composer-surface) 96%, #090710);
  border: 3px solid var(--gt-scene-input-border);
  border-radius: 18px;
  box-shadow: none;
  transition: left .34s cubic-bezier(.2,.8,.2,1), top .34s cubic-bezier(.2,.8,.2,1), height .2s ease;
}

#tutorial-card p, #tutorial-card h2 { margin: 0; }
#tutorial-card .tutorial-kicker { color: var(--gt-scene-input-border); font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
#tutorial-title { margin-top: 8px !important; color: var(--gt-scene-input-caret); font-size: 27px; line-height: 1.05; }
#tutorial-instruction { margin-top: 8px !important; color: rgba(245, 247, 255, .86); font-size: 16px; line-height: 1.3; }
#tutorial-progress { margin-top: 12px !important; color: var(--gt-scene-input-border); font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
#tutorial-continue { justify-self: start; margin-top: 12px; padding: 7px 12px; pointer-events: auto; color: #090710; background: var(--gt-scene-input-caret); border: 0; border-radius: 6px; font: 700 14px var(--gt-font-mono); cursor: pointer; }
#tutorial-continue { transition: transform .16s ease, filter .16s ease; }
#tutorial-continue:hover { filter: brightness(1.08); transform: translateY(-2px); }
#tutorial-continue:active { transform: translateY(0) scale(.98); }
#tutorial-guide[data-transitioning="true"] #tutorial-card { animation: tutorial-step-in .32s ease-out; }
#tutorial-guide[data-transitioning="true"] #tutorial-pointer { animation: tutorial-pointer-in .34s ease-out; }
@keyframes tutorial-step-in { from { opacity: .35; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tutorial-pointer-in { from { opacity: 0; } 45% { opacity: 0; } to { opacity: 1; } }

#tutorial-macos-settings { position: absolute; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(16, 16, 20, .34); font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif; }
#tutorial-macos-settings[hidden] { display: none; }
#tutorial-macos-settings:not([hidden]) { animation: tutorial-macos-backdrop-in .28s ease-out both; }
#tutorial-macos-settings:not([hidden]) .tutorial-macos-window { animation: tutorial-macos-window-in .36s cubic-bezier(.2,.8,.2,1) both; }
#tutorial-macos-settings[data-closing="true"] { animation: tutorial-macos-backdrop-out .18s ease-in both; }
.tutorial-macos-window { width: 1180px; height: 720px; overflow: hidden; color: #1f2024; background: #f4f4f5; border: 1px solid #b8b8bc; border-radius: 22px; box-shadow: 0 30px 90px rgba(0, 0, 0, .55); }
.tutorial-macos-window > header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; box-sizing: border-box; height: 54px; padding: 0 20px; color: #777; background: #e7e7e9; border-bottom: 1px solid #c9c9cd; }
.tutorial-macos-window > header span { color: #a9a9ad; letter-spacing: 5px; }
.tutorial-macos-window > header strong { color: #303136; font-size: 16px; }
.tutorial-macos-window > header small { justify-self: end; padding: 5px 9px; color: #5c4a16; background: #fff4c7; border: 1px solid #e2ca71; border-radius: 999px; font-size: 12px; font-weight: 650; letter-spacing: .01em; }
.tutorial-macos-body { display: grid; grid-template-columns: 300px 1fr; height: calc(100% - 54px); }
.tutorial-macos-body aside { padding: 30px 18px; background: #e9e9eb; border-right: 1px solid #d0d0d3; }
.tutorial-macos-body button { font: inherit; cursor: pointer; }
#tutorial-macos-privacy { width: 100%; padding: 12px 14px; text-align: left; color: #17181b; background: #d5d5d8; border: 0; border-radius: 9px; font-weight: 650; }
.tutorial-macos-body main { padding: 28px 42px; }
#tutorial-macos-return { padding: 5px 0; color: #1463b8; background: transparent; border: 0; font-size: 15px; }
#tutorial-macos-return { transition: color .16s ease, transform .16s ease; }
#tutorial-macos-return:hover { color: #0d4e91; transform: translateX(-2px); }
.tutorial-macos-body h2 { margin: 18px 0 6px; font-size: 30px; }
#tutorial-macos-help { margin: 0 0 28px; color: #66676b; font-size: 16px; }
#tutorial-macos-panes { display: grid; overflow: hidden; border: 1px solid #d1d1d4; border-radius: 12px; }
#tutorial-macos-panes[hidden], #tutorial-macos-apps[hidden] { display: none; }
#tutorial-macos-panes button { display: flex; justify-content: space-between; padding: 17px 18px; text-align: left; background: #fff; border: 0; border-bottom: 1px solid #dedee1; font-size: 17px; }
#tutorial-macos-panes button:last-child { border-bottom: 0; }
.tutorial-macos-app { display: flex; align-items: center; justify-content: space-between; padding: 18px; background: #fff; border: 1px solid #d1d1d4; border-radius: 12px; font-size: 17px; }
.tutorial-macos-app span { display: flex; align-items: center; gap: 12px; }
.tutorial-macos-app b { display: grid; place-items: center; width: 40px; height: 40px; color: white; background: #ed3979; border-radius: 9px; font-size: 13px; }
#tutorial-macos-toggle { display: flex; align-items: center; gap: 9px; padding: 0; background: transparent; border: 0; color: #6c6d72; }
#tutorial-macos-toggle i { position: relative; width: 48px; height: 27px; background: #b9bac0; border-radius: 20px; }
#tutorial-macos-toggle i { transition: background .22s ease, box-shadow .22s ease; }
#tutorial-macos-toggle i::after { position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; content: ""; background: white; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: left .22s cubic-bezier(.2,.8,.2,1); }
#tutorial-macos-toggle[aria-checked="true"] i { background: #34c759; }
#tutorial-macos-toggle:focus-visible i { box-shadow: 0 0 0 4px rgba(20, 99, 184, .24); }
#tutorial-macos-toggle[aria-checked="true"] i::after { left: 24px; }
@keyframes tutorial-macos-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tutorial-macos-window-in { from { opacity: 0; transform: translateY(24px) scale(.975); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes tutorial-macos-backdrop-out { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  html[data-tutorial="first-chat"] #stage, .tutorial-dim, #tutorial-focus, #tutorial-card { transition-duration: .01s !important; }
  #tutorial-guide[data-transitioning="true"] #tutorial-card, #tutorial-guide[data-transitioning="true"] #tutorial-pointer,
  #tutorial-model-disclaimer article, #tutorial-macos-settings, #tutorial-macos-settings .tutorial-macos-window { animation-duration: .01s !important; }
}