/* Stage 9: a compact coding desk, built from the six product colors. */
:root {
  --ink: #061f31;
  --deep: #082b40;
  --surface: #0d3c53;
  --surface-raised: #124b65;
  --line: #5c8ca9;
  --blue: #04709e;
  --blue-deep: #04547e;
  --mist: #90b9d3;
  --muted: #86acc4;
  --slate: #244454;
  --white: #f0f9fd;
  --mint: #a6e8db;
  --ease: cubic-bezier(.23, 1, .32, 1);
  color-scheme: dark;
}

html { scroll-behavior: smooth; }
body {
  background: radial-gradient(ellipse 48rem 30rem at 50% -10rem, #04709e58, transparent 73%),
    radial-gradient(ellipse 28rem 25rem at 100% 38%, #5c8ca922, transparent 75%),
    linear-gradient(170deg, #082e43, var(--ink) 70%);
  color: var(--white);
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .19;
  background-image: linear-gradient(#90b9d31c 1px, transparent 1px), linear-gradient(90deg, #90b9d31c 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, #000, transparent 68%);
}
.shell { position: relative; width: min(100%, 600px); padding: max(23px, env(safe-area-inset-top)) 20px calc(170px + env(safe-area-inset-bottom)); }
.topbar { margin-bottom: 32px; padding-bottom: 14px; border-bottom: 1px solid #90b9d32a; }
.brand { font-size: 14px; letter-spacing: -.055em; }
.brand b { color: var(--mint); }
.brand-mark {
  position: relative; display: block; width: 82px; height: 36px; flex: none; overflow: hidden;
  border: 1px solid #90b9d35c; border-radius: 11px; background: #082b40;
  box-shadow: 0 5px 18px #4dc3e62a;
}
.brand-mark img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: auto; transform: translateY(-35%); image-rendering: pixelated; }
.launch-screen {
  position: fixed; z-index: 100; inset: 0; display: grid; place-items: center;
  padding: 24px; background: radial-gradient(ellipse 50% 35% at 50% 44%, #105b73, transparent 85%), #061f31;
  color: #e9fbfc; transition: opacity .45s ease, visibility .45s ease;
}
.launch-screen.is-finished { opacity: 0; visibility: hidden; pointer-events: none; }
.launch-content { width: min(100%, 480px); text-align: center; }
.launch-kicker { margin: 0 0 28px; color: #a6e8db; font: 700 11px 'DM Mono', monospace; letter-spacing: .22em; }
.launch-runway { position: relative; height: clamp(112px, 38vw, 176px); overflow: hidden; border-bottom: 2px solid #a6e8db6b; }
.launch-runway::after {
  content: ''; position: absolute; bottom: 7px; left: 0; width: 200%; height: 3px;
  background: repeating-linear-gradient(90deg, #a6e8db 0 18px, transparent 18px 47px);
  opacity: .7; animation: runway-move .38s linear infinite;
}
.launch-logo { position: absolute; width: min(100%, 430px); height: 100%; left: 50%; bottom: -2px; transform: translateX(-50%); animation: dino-run .24s steps(2, end) infinite; }
.launch-logo img { position: absolute; top: 0; left: 0; width: 100%; height: auto; transform: translateY(-35%); image-rendering: pixelated; }
.launch-title { margin: 26px 0 17px; font-size: 16px; font-weight: 800; letter-spacing: -.025em; }
.launch-ellipsis { display: inline-block; width: 19px; overflow: hidden; vertical-align: bottom; animation: ellipsis 1s steps(3, end) infinite; }
.launch-progress { height: 5px; width: min(75%, 260px); margin: auto; overflow: hidden; border-radius: 6px; background: #90b9d335; }
.launch-progress span { display: block; width: 100%; height: 100%; border-radius: inherit; background: #a6e8db; transform: scaleX(0); transform-origin: left; animation: launch-fill var(--launch-duration, 10s) linear forwards; }
@keyframes dino-run { 0% { translate: 0 0; } 50% { translate: 3px -5px; } }
@keyframes runway-move { to { transform: translateX(-47px); } }
@keyframes ellipsis { from { width: 0; } to { width: 19px; } }
@keyframes launch-fill { to { transform: scaleX(1); } }
.stage { border-color: #86acc470; color: #b2d8e8; font-size: 9px; }
.intro { position: relative; margin-bottom: 27px; }
.intro::after {
  content: '</>';
  position: absolute; right: 2px; top: 22px; z-index: -1;
  color: #90b9d31a; font: 700 clamp(90px, 24vw, 145px)/1 'DM Mono', monospace;
  letter-spacing: -.13em; transform: rotate(-13deg); user-select: none;
}
.intro .eyebrow, .screen-hero .eyebrow { color: #a7d5e7; font-size: 10px; letter-spacing: .14em; }
h1 { font-size: clamp(40px, 11vw, 59px); line-height: 1.02; letter-spacing: -.08em; }
h1 em { color: var(--mint); background: linear-gradient(100deg, #e9ffff, #95e4db 45%, #90b9d3); background-clip: text; -webkit-text-fill-color: transparent; }
.subtitle { max-width: 29rem; margin: 16px 0 0; color: #b8d4e2; line-height: 1.55; }

.balance-card {
  min-height: 172px; padding: 21px 23px 20px; border: 1px solid #a9dce9a1; border-radius: 26px;
  background: linear-gradient(118deg, #04709e 0%, #126888 54%, #04547e 100%);
  background-size: auto; animation: none; box-shadow: 0 22px 40px #001b2d5e, inset 0 1px #e5faff6b;
}
.balance-card::before {
  content: ''; position: absolute; inset: 0; transform: none; animation: none;
  background: repeating-linear-gradient(160deg, transparent 0 22px, #ffffff08 23px, transparent 24px 48px);
}
.balance-card::after { content: '</>'; top: 6px; right: 7px; color: #e7ffff16; font-size: 133px; transform: rotate(-13deg); }
.balance-number { font-size: clamp(40px, 11vw, 61px); margin: 9px 0 17px; }
.balance-foot { flex-wrap: wrap; color: #e0f3f9; font-size: 11px; }
.balance-unit { color: #ccecf2; }
.coin-icon { width: 30px; height: 30px; border-color: #d7f8f9b8; color: #fff; background: #ffffff20; }

.editor {
  position: relative; isolation: isolate; margin-top: 18px; border: 1px solid #9acadb8c;
  border-radius: 26px; background: #051f30;
  box-shadow: 0 18px 44px #00172580, inset 0 1px #ffffff18;
}
.editor::before { content: ''; position: absolute; z-index: -1; inset: 42px auto 57px 0; width: 3px; background: linear-gradient(#90b9d3, #64c6d4, transparent); }
.editor-bar { background: linear-gradient(90deg, #174e69, #103c55); color: #d1e8f1; }
.window-dots i { width: 8px; height: 8px; background: #699cb6; }
.window-dots i:first-child { background: #9ed9cf; }
.window-dots i:nth-child(2) { background: #90b9d3; }
.code-view {
  min-height: 161px; overflow-x: auto; overflow-y: hidden; padding: 20px 19px;
  background: linear-gradient(90deg, #0f364851 1px, transparent 1px) 52px 0 / 26px 100% no-repeat,
    repeating-linear-gradient(0deg, transparent 0 27px, #86acc40a 28px 29px), #061f30;
  color: #d1e6ef; scrollbar-width: thin; scrollbar-color: #5c8ca9 #061f30;
}
.code-empty { color: #90b9d3a6; }
.line-no { color: #779bb0; }
.code-line--new { animation-duration: .17s; animation-timing-function: var(--ease); }
.click-button {
  width: calc(100% - 26px); min-height: 59px; margin: 0 13px; border: 1px solid #d9fff0aa;
  border-radius: 16px; background: linear-gradient(102deg, #a8e8dd, #c4ebed 55%, #9bcbe5);
  background-size: auto; animation: none; box-shadow: inset 0 1px #fff, 0 10px 24px #29a9b64a;
  color: #06364b; transition: transform .14s var(--ease), box-shadow .18s ease, filter .18s ease;
}
.click-button:not(:disabled):hover { filter: brightness(1.06); box-shadow: inset 0 1px #fff, 0 12px 28px #29a9b66b; }
.click-button:active:not(:disabled) { transform: scale(.975); }
.click-button:disabled { filter: grayscale(.25); }
.button-plus { padding: 6px 10px; border-radius: 10px; background: #04547e; }
.editor-hint { color: #a4c9d8; }

.progress-card, .stage-card, .course-card, .neural-card, .token-pack, .top-row, .profile-stat {
  border-color: #86acc45c; background: linear-gradient(150deg, #16465d, #0b3248 78%);
  box-shadow: inset 0 1px #ffffff14, 0 10px 26px #00172430;
}
.progress-card, .stage-card { border-radius: 23px; }
.progress-card { padding: 18px 20px; }
.progress-track { height: 8px; background: #051f30; }
.progress-fill { background: linear-gradient(90deg, #04709e, #90b9d3 60%, #a6e8db); background-size: auto; animation: none; }
.stage-card { padding: 22px 20px; }
.section-heading { color: #acd2e2; }
.stage-card h2 { font-size: clamp(22px, 5vw, 27px); }
.section-description, .section-message { color: #b4d0dd; line-height: 1.6; }
.program-options { gap: 10px; }
.program-option { min-height: 96px; padding: 15px 14px; border-radius: 17px; background: #0e3a51; transition: border-color .18s ease, background .18s ease, transform .18s var(--ease); }
.program-option:not(:disabled):hover { transform: translateY(-2px); border-color: #b5e6eb; }
.program-option.is-selected { background: linear-gradient(130deg, #1b7892, #1c6281); }
.primary-action, .token-buy { min-height: 48px; border-radius: 15px; background: linear-gradient(102deg, #a6e8db, #b7ddeb); background-size: auto; animation: none; transition: transform .14s var(--ease), filter .18s ease; }
.primary-action:not(:disabled):hover, .token-buy:not(:disabled):hover { filter: brightness(1.06); }
.primary-action:not(:disabled):active, .token-buy:not(:disabled):active { transform: scale(.985); }
.expand-button { min-height: 53px; border-color: #86acc47b; background: linear-gradient(120deg, #194e68, #123d56); }
.expand-panel { transition: grid-template-rows .24s var(--ease), opacity .2s ease; }
.screen.is-active { animation: screen-in .22s var(--ease) both; }
.screen-hero { position: relative; margin-top: 18px; padding-top: 18px; border-top: 1px solid #90b9d338; }
.screen-hero h1 { font-size: clamp(36px, 9vw, 55px); }
.course-card { min-height: 122px; border-radius: 19px; }
.course-card.is-selected { background: linear-gradient(130deg, #04709e, #195c7a); }
.lesson-code, .check-code { border-color: #86acc470; background: #061f30; }
.neural-summary, .top-summary, .wallet-balance { background: linear-gradient(125deg, #116782, #145878 57%, #0d4668); background-size: auto; animation: none; border-color: #90b9d393; }
.neural-card-header { min-height: 76px; }
.check-banner, .check-card { background: linear-gradient(130deg, #6d4b61, #244454 73%); border-color: #e6afa58a; }
.top-row { min-height: 65px; }
.top-row.is-podium { background: linear-gradient(120deg, #1b6885, #194d68); }
.profile-hero { margin-top: 20px; }
.profile-stat { min-height: 88px; }
.wallet-balance h2 { font-variant-numeric: tabular-nums; }
.news-banner { background: linear-gradient(118deg, #176b8f, #285a83 56%, #17607f); background-size: auto; animation: none; }
.confirm-dialog { border-color: #90b9d399; background: linear-gradient(145deg, #16506c, #082e45); }
.confirm-dialog::backdrop { backdrop-filter: blur(5px); }
.history-row { align-items: flex-start; }
.history-row > span { text-align: right; }
footer { opacity: .8; }

:where(button, summary, input, textarea, select):focus-visible {
  outline: 3px solid #d7f8ef;
  outline-offset: 3px;
}
button { -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; }
.bottom-nav {
  width: min(calc(100% - 24px), 720px); padding: 8px; border-color: #90b9d38c;
  border-radius: 23px; background: #092f45f0; box-shadow: 0 15px 48px #001724bd, inset 0 1px #ffffff28;
}
.bottom-nav button { min-height: 50px; border-radius: 15px; color: #b4cfdd; }
.bottom-nav button.is-active { background: linear-gradient(125deg, #a6e8db, #9bc6dc); color: #06374e; }
.bottom-nav button:focus-visible { outline-offset: -2px; }

@media (max-width: 430px) {
  .shell { padding-inline: 16px; padding-bottom: calc(174px + env(safe-area-inset-bottom)); }
  .topbar { margin-bottom: 26px; }
  .stage { max-width: 134px; overflow: hidden; text-overflow: ellipsis; }
  .bottom-nav { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 47px; row-gap: 2px; bottom: max(7px, env(safe-area-inset-bottom)); padding: 6px; }
  .bottom-nav button { grid-column: span 3; min-height: 47px; gap: 1px; font-size: 10px; }
  .bottom-nav button:nth-child(n + 5) { grid-column: span 4; }
  .bottom-nav button span { font-size: 19px; }
  .balance-number { font-size: clamp(37px, 11vw, 53px); }
  .balance-foot { font-size: 10px; }
  .program-options { gap: 7px; }
  .program-option { padding: 12px 10px; }
  .top-row { grid-template-columns: 33px minmax(0, 1fr) auto; }
  .top-balance { font-size: 10px; }
  .history-row strong { overflow-wrap: anywhere; }
}
@media (max-width: 350px) {
  .brand { font-size: 12px; }
  .stage { max-width: 116px; font-size: 8px; }
  h1 { font-size: 37px; }
  .code-view { font-size: 11px; }
  .program-option span { font-size: 10px; }
}
@media (min-width: 800px) {
  .shell { width: min(calc(100% - 52px), 1020px); padding: 34px 0 142px; }
  .topbar { margin-bottom: 44px; }
  #screen-play { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); column-gap: 22px; row-gap: 18px;
    grid-template-areas: 'intro intro' 'check check' 'balance editor' 'progress editor' 'program program'; }
  #screen-play .intro { grid-area: intro; margin-bottom: 2px; }
  #screen-play .balance-card { grid-area: balance; align-self: stretch; }
  #screen-play .check-card { grid-area: check; margin: 0; }
  #screen-play .editor { grid-area: editor; margin: 0; display: flex; flex-direction: column; }
  #screen-play .code-view { flex: 1; min-height: 230px; }
  #screen-play .progress-card { grid-area: progress; margin: 0; }
  #screen-play > .stage-card:not(.check-card) { grid-area: program; margin: 0; }
  .intro::after { right: 12%; top: -10px; font-size: 180px; }
  .course-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .profile-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .neural-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .neural-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .token-packages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .screen-hero > p:last-child { max-width: 640px; }
  .bottom-nav { width: min(calc(100% - 52px), 1020px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}