:root {
  --desk: #E4E8EE;
  --paper: #FBFCFE;
  --ink: #0B1730;
  --ink-2: #4A566E;
  --line: #D3D9E3;
  --indigo: #17225A;
  --amber: #F5A524;
  --seed: #0FA3A0;

  --display: "Bricolage Grotesque", "Onest", system-ui, sans-serif;
  --body: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--desk);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--seed); outline-offset: 2px; }

/* ───────── Desk layout ───────── */
.desk {
  height: 100dvh;
  min-height: 680px;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(440px, 36vw);
  gap: 36px;
}
.left { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 22px; }

.intro h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.5rem, 4.4vw, 4.25rem);
  line-height: .95;
  letter-spacing: -.035em;
  margin: 0 0 14px;
}
.lede { margin: 0 0 12px; max-width: 58ch; font-size: 1.0625rem; color: var(--ink-2); }
.links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.links a {
  color: var(--ink); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 2px;
  text-decoration-color: var(--seed); text-underline-offset: 4px;
}
.links a:hover { text-decoration-color: var(--ink); }

/* ───────── Editor ───────── */
.ide {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 0 #fff inset, 0 18px 40px -24px rgba(11, 23, 48, .35);
}
.ide-bar {
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 8px 14px 0; background: #EEF1F6; border-bottom: 1px solid var(--line);
}
.tabs { display: flex; gap: 2px; }
.tab {
  font-family: var(--mono); font-size: 12.5px;
  padding: 8px 14px; border: 1px solid transparent; border-bottom: 0;
  border-radius: 8px 8px 0 0; background: none; color: var(--ink-2);
  margin-bottom: -1px;
}
.tab[aria-selected="true"] { background: var(--paper); border-color: var(--line); color: var(--ink); }
.ide-path { font-family: var(--mono); font-size: 12px; color: #8490A6; padding-bottom: 9px; }

.code {
  flex: 1; min-height: 0; margin: 0; overflow: auto;
  padding: 16px 20px;
  font-family: var(--mono); font-size: 13px; line-height: 1.7;
  color: var(--ink); tab-size: 2;
}
.code[hidden] { display: none; }
.code code { font: inherit; }
.code .c { color: #8A94A8; }
.code .k { color: #3B3FD0; }
.code .t { color: #0B6E8C; }
.code .f { color: #7A3FB8; }
.code .s { color: #B04A12; }
.code .n { color: #B04A12; }
.code .y { color: #3B3FD0; }

.knob {
  font-family: var(--mono); font-size: 13px; line-height: 1.3;
  padding: 1px 7px; margin: -2px 0;
  border: 1px dashed var(--amber); border-radius: 6px;
  background: #FFF4DC; color: #7A4A00;
  display: inline-flex; align-items: center; gap: 6px; vertical-align: baseline;
}
.knob:hover { background: #FFE7B0; border-style: solid; }
.swatch { width: 11px; height: 11px; border-radius: 3px; background: var(--seed); display: inline-block; }

/* ───────── Terminal ───────── */
.term { background: var(--ink); color: #C9D2E6; flex: none; }
.term-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 14px; font-size: 12.5px; color: #8E9BB8;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.term-keys { display: flex; gap: 6px; }
.term-keys button {
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
  color: #DCE3F2; border-radius: 6px; padding: 3px 9px; font-size: 12px;
}
.term-keys button:hover { background: rgba(255, 255, 255, .14); }
.term-keys kbd { font-family: var(--mono); color: var(--amber); margin-right: 3px; }
.term-log {
  height: 138px; overflow-y: auto; padding: 10px 16px 12px;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.6; white-space: pre-wrap;
}
.term-log .dim { color: #7785A3; }
.term-log .ok { color: #6FE0B5; }
.term-log .hot { color: var(--amber); }

/* ───────── Simulator ───────── */
.sim { min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sim-bar { font-size: 13px; color: var(--ink-2); display: flex; gap: 8px; }
.sim-bar strong { color: var(--ink); font-weight: 600; }
.device-wrap { position: relative; }
.device {
  position: absolute; top: 0; left: 0;
  width: 418px; height: 872px; padding: 14px;
  transform-origin: 0 0;
  border-radius: 68px;
  background: #05070C;
  box-shadow:
    0 0 0 2px #8D8F96,
    0 0 0 5px #3B3D44,
    0 0 0 6px #A9ABB2,
    0 50px 70px -30px rgba(11, 23, 48, .55),
    0 20px 30px -18px rgba(11, 23, 48, .4);
}
.hw { position: absolute; width: 4px; background: #4A4C54; border-radius: 2px; }
.hw-action { left: -9px; top: 150px; height: 34px; }
.hw-up { left: -9px; top: 214px; height: 62px; }
.hw-down { left: -9px; top: 290px; height: 62px; }
.hw-power { right: -9px; top: 250px; height: 100px; }

.screen {
  position: relative; width: 390px; height: 844px;
  border-radius: 54px; overflow: hidden;
  background: var(--indigo);
  font-size: 15px; line-height: 1.45;
  --app-bg: #F2F4F8; --card: #FFFFFF; --text: #0B1730; --text-2: #55617A; --hair: #E1E5EC;
}
.screen[data-brightness="dark"] {
  --app-bg: #0C111D; --card: #171E2E; --text: #EDF0F7; --text-2: #9AA6BF; --hair: #26304A;
}
.wall { position: absolute; inset: 0; }
.wall svg { width: 100%; height: 100%; display: block; }
.wall::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 16, 48, .55) 0%, rgba(10, 16, 48, 0) 30%, rgba(10, 16, 48, 0) 62%, rgba(10, 16, 48, .7) 100%);
}

.statusbar {
  position: absolute; z-index: 30; top: 0; left: 0; right: 0; height: 54px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 30px 0 38px;
  color: #fff; font-weight: 600; font-size: 16px;
  pointer-events: none; transition: color .25s;
}
.sb-icons { display: flex; gap: 7px; align-items: center; }
.sb-icons svg { fill: currentColor; }
.screen.in-app[data-brightness="light"] .statusbar { color: var(--text); }
.island {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%);
  width: 122px; height: 35px; border-radius: 20px; background: #000;
  display: flex; align-items: center; justify-content: center;
  color: var(--amber); font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden;
  transition: width .45s cubic-bezier(.3, 1.4, .5, 1);
}
.island span { opacity: 0; transition: opacity .2s; }
.island.show { width: 236px; }
.island.show span { opacity: 1; transition-delay: .15s; }

/* Home screen */
.home {
  position: absolute; inset: 0; z-index: 10;
  padding: 72px 22px 30px;
  display: flex; flex-direction: column; gap: 26px;
  color: #fff;
  transition: transform .38s cubic-bezier(.2, .8, .2, 1), opacity .3s;
}
.screen.in-app .home { transform: scale(.92); opacity: 0; pointer-events: none; }
.widget {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 18px 18px 16px; border-radius: 26px;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.w-name { margin: 0 0 6px; font-family: var(--display); font-weight: 700; font-size: 25px; line-height: 1.02; letter-spacing: -.02em; }
.w-role { margin: 0; font-size: 13.5px; line-height: 1.4; color: rgba(255, 255, 255, .82); }
.w-clock { flex: none; text-align: right; font-family: var(--display); font-weight: 600; font-size: 25px; line-height: 1; font-variant-numeric: tabular-nums; }
.w-clock small { display: block; margin-top: 6px; font-family: var(--body); font-weight: 500; font-size: 12px; color: rgba(255, 255, 255, .75); }

.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 8px; }
.dock {
  margin-top: auto;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px;
  padding: 14px 8px; border-radius: 32px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  margin-bottom: 14px;
}
.icon {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0; color: #fff; text-decoration: none;
  font-size: 12px; font-weight: 500; line-height: 1.15; text-align: center;
}
.icon:focus-visible { outline-color: #fff; outline-offset: 4px; border-radius: 12px; }
.tile {
  width: 62px; height: 62px; border-radius: 17px;
  display: grid; place-items: center;
  background: var(--c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -10px 16px rgba(0, 0, 0, .14), 0 6px 12px -6px rgba(0, 0, 0, .5);
  transition: transform .15s, filter .15s;
}
.tile svg { width: 32px; height: 32px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tile b { font-family: var(--display); font-size: 27px; font-weight: 800; letter-spacing: -.04em; color: #fff; }
.icon:hover .tile { filter: brightness(1.1); }
.icon:active .tile { transform: scale(.9); filter: brightness(.8); }
.dock .icon > span:last-child { display: none; }

/* App container */
.app {
  position: absolute; inset: 0; z-index: 20;
  background: var(--app-bg); color: var(--text);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 0 0 44px;
  scrollbar-width: none;
}
.app::-webkit-scrollbar { display: none; }
.app[hidden] { display: none; }

.app-nav {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center;
  padding: 54px 20px 4px;
  background: color-mix(in srgb, var(--app-bg) 82%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.app-nav span { position: absolute; left: 90px; right: 90px; bottom: 11px; text-align: center; font-weight: 600; font-size: 15px; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-head { padding: 12px 20px 20px; }
.back {
  background: none; border: 0; padding: 6px 8px 6px 0;
  color: var(--seed); font-weight: 600; font-size: 15px;
  display: inline-flex; align-items: center; gap: 4px;
}
.back svg { width: 10px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.app-id { display: flex; align-items: center; gap: 14px; }
.app-id .tile { flex: none; width: 58px; height: 58px; border-radius: 16px; }
.app-id h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1; letter-spacing: -.03em; }
.app-id p { margin: 5px 0 0; font-size: 14px; color: var(--text-2); }
.when { margin: 14px 0 0; font-size: 13.5px; color: var(--text-2); }

.sect { padding: 0 20px; margin-bottom: 24px; }
.sect h3 { margin: 0 0 10px; font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -.01em; }
.card { background: var(--card); border: 1px solid var(--hair); border-radius: 20px; }
.did { list-style: none; margin: 0; padding: 4px 16px; }
.did li { padding: 12px 0; border-bottom: 1px solid var(--hair); font-size: 14.5px; }
.did li:last-child { border-bottom: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip { padding: 6px 12px; border-radius: 99px; background: var(--card); border: 1px solid var(--hair); font-size: 13px; font-weight: 500; }
.note { margin: 9px 2px 0; font-size: 12px; color: var(--text-2); }
.prose p { margin: 0 0 12px; font-size: 15px; }
.rows { margin: 0; padding: 2px 16px; }
.rows div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--hair); font-size: 14.5px; }
.rows div:last-child { border-bottom: 0; }
.rows dt { color: var(--text-2); flex: none; }
.rows dd { margin: 0; text-align: right; font-weight: 500; }
.rows a { color: var(--seed); text-decoration: none; font-weight: 600; }
.avatar {
  width: 58px; height: 58px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--seed); color: #fff;
  font-family: var(--display); font-weight: 800; font-size: 23px; letter-spacing: -.03em;
}
.btn {
  border: 0; border-radius: 14px; padding: 12px 16px;
  background: var(--seed); color: #fff; font-weight: 600; font-size: 14.5px;
}
.btn:active { filter: brightness(.9); }
.btn[disabled] { opacity: .5; cursor: default; }

/* Education timeline: a real sequence, newest first */
.tl { list-style: none; margin: 0; padding: 6px 16px 6px 34px; position: relative; }
.tl::before { content: ""; position: absolute; left: 19px; top: 24px; bottom: 30px; width: 2px; background: var(--hair); }
.tl li { position: relative; padding: 10px 0; }
.tl li::before { content: ""; position: absolute; left: -20px; top: 17px; width: 10px; height: 10px; border-radius: 50%; background: var(--seed); box-shadow: 0 0 0 3px var(--card); }
.tl strong { display: block; font-size: 15px; }
.tl span { font-size: 13.5px; color: var(--text-2); }

/* Demo: wallet */
.wallet { padding: 18px; border-radius: 22px; color: #fff; background: linear-gradient(140deg, #0B8A57, #064E3B); }
.wallet small { font-size: 12.5px; opacity: .8; }
.wallet-bal { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 16px; }
.wallet-bal strong { font-family: var(--display); font-size: 31px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ghost { background: rgba(255, 255, 255, .16); border: 0; color: #fff; border-radius: 10px; padding: 6px 11px; font-size: 12.5px; font-weight: 600; }
.wallet .btn { background: #fff; color: #064E3B; width: 100%; }
.tx { list-style: none; margin: 10px 0 0; padding: 2px 16px; }
.tx li { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--hair); font-size: 14px; }
.tx li:last-child { border-bottom: 0; }
.tx .in { color: #0B8A57; font-weight: 600; }
.tx .out { font-weight: 600; }
.tx li.new { animation: slidein .35s ease-out; }
@keyframes slidein { from { opacity: 0; transform: translateY(-8px); } }

/* Demo: map */
.map { overflow: hidden; }
.map svg { display: block; width: 100%; height: auto; background: #E9EEF2; }
.screen[data-brightness="dark"] .map svg { background: #1B2436; }
.map .st { stroke: #fff; stroke-width: 9; fill: none; stroke-linecap: round; }
.screen[data-brightness="dark"] .map .st { stroke: #2A3550; }
.map .route { stroke: #E8650F; stroke-width: 4; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 9; }
.map .done { stroke: #E8650F; stroke-width: 4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.map-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; }
.map-foot p { margin: 0; font-size: 14px; }
.map-foot strong { display: block; font-size: 15px; }
.map-foot span { color: var(--text-2); font-size: 13px; }
.map-foot .btn { background: #E8650F; flex: none; padding: 10px 14px; }

.quick { display: flex; gap: 6px; margin-top: 8px; }
.quick .ghost { flex: 1; padding: 8px 4px; font-size: 12px; }
.lbl { display: block; margin: 0 0 8px; font-size: 13px; color: var(--text-2); }
.ride-pad { padding: 16px; }
.ride-route { margin: 0 0 14px; }
.ride-route strong { display: block; font-size: 16px; }
.ride-route span { font-size: 13.5px; color: var(--text-2); }
.stepper { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding: 6px; border: 1px solid var(--hair); border-radius: 16px; background: var(--app-bg); }
.stepper button { width: 44px; height: 44px; border-radius: 12px; border: 0; background: var(--card); color: var(--text); font-size: 22px; font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.stepper button[disabled] { opacity: .4; cursor: default; }
.stepper output { font-family: var(--display); font-size: 27px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ride-pad .btn { background: #E8650F; width: 100%; }
.bids { list-style: none; margin: 0 0 12px; padding: 0; min-height: 186px; }
.bids li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.bids li.new { animation: slidein .35s ease-out; }
.bids p { margin: 0; }
.bids strong { display: block; font-size: 14.5px; }
.bids span { font-size: 12.5px; color: var(--text-2); }
.bids .btn { width: auto; flex: none; padding: 9px 12px; font-size: 13px; }

/* Demo: match */
.matchbox { padding: 16px; }
.matchbox textarea { width: 100%; margin-bottom: 14px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--hair); background: var(--app-bg); color: var(--text); font: inherit; font-size: 14px; resize: none; }
.matchbox .btn { width: 100%; background: #BF2F78; }
.match-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.match-top .blob { width: 52px; height: 52px; flex: none; }
.match-top p { margin: 0; }
.match-top strong { display: block; font-size: 16px; }
.match-top span { font-size: 13px; color: var(--text-2); }
.quote { margin: 0 0 14px; font-size: 14px; color: var(--text-2); }

/* Demo: API console */
.api { overflow: hidden; }
.api-tabs { display: flex; gap: 6px; padding: 12px; flex-wrap: wrap; }
.api-tabs button {
  font-family: var(--mono); font-size: 12px; padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--hair); background: var(--app-bg); color: var(--text);
}
.api-tabs button[aria-pressed="true"] { background: #24406B; border-color: #24406B; color: #fff; }
.api-tabs em { font-style: normal; color: #1E9E6A; font-weight: 500; margin-right: 4px; }
.api-tabs button[aria-pressed="true"] em { color: #8FE8C0; }
.api-out { margin: 0; padding: 14px; background: #0B1730; color: #D5DDF0; font-family: var(--mono); font-size: 12px; line-height: 1.6; min-height: 150px; white-space: pre-wrap; }
.api-out .st { color: #6FE0B5; }
.api-out .key { color: #9DB7FF; }
.api-out .str { color: #FFC978; }

/* Demo: bills */
.bills { padding: 16px; }
.bills p { margin: 0 0 8px; font-size: 13px; color: var(--text-2); }
.opts { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.opts button { padding: 8px 13px; border-radius: 99px; border: 1px solid var(--hair); background: var(--app-bg); color: var(--text); font-size: 13.5px; font-weight: 500; }
.opts button[aria-pressed="true"] { background: var(--opt, #6B3FD4); border-color: var(--opt, #6B3FD4); color: #fff; opacity: 1; }
.bills .btn { width: 100%; background: #6B3FD4; }
.receipt { display: flex; align-items: center; gap: 12px; padding: 4px 0; }
.receipt svg { width: 40px; height: 40px; flex: none; }
.receipt circle { fill: #1E9E6A; }
.receipt path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw .4s .1s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.receipt strong { display: block; font-size: 15px; color: var(--text); }
.receipt span { font-size: 13px; color: var(--text-2); }
.receipt + .ghost-dark { margin-top: 12px; }
.ghost-dark { background: none; border: 1px solid var(--hair); border-radius: 12px; padding: 9px 14px; font-size: 13.5px; font-weight: 600; color: var(--text); width: 100%; }

/* Screen furniture */
.home-ind {
  position: absolute; z-index: 40; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 180px; height: 26px; background: none; border: 0; padding: 0;
}
.home-ind::after {
  content: ""; position: absolute; left: 20px; right: 20px; bottom: 8px; height: 5px; border-radius: 3px;
  background: #fff; opacity: .9; transition: background .25s;
}
.screen.in-app[data-brightness="light"] .home-ind::after { background: #0B1730; }
.debug-banner {
  position: absolute; z-index: 45; top: 21px; right: -40px; width: 140px;
  transform: rotate(45deg);
  background: #A80000; color: #fff; text-align: center;
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; line-height: 17px;
  pointer-events: none;
}
.debug-banner[hidden] { display: none; }
.flash { position: absolute; inset: 0; z-index: 50; background: var(--amber); opacity: 0; pointer-events: none; }
.flash.go { animation: flash .5s ease-out; }
@keyframes flash { 0% { opacity: .28; } 100% { opacity: 0; } }
.boot {
  position: absolute; inset: 0; z-index: 60; background: #000;
  display: grid; place-items: center;
  transition: opacity .6s .1s, visibility 0s .7s;
}
.boot span { font-family: var(--display); font-weight: 800; font-size: 54px; letter-spacing: -.05em; color: #fff; animation: pulse 1.3s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.boot.done { opacity: 0; visibility: hidden; }

/* Launch: the home screen assembles once, as the boot screen lifts */
.launch .wall { animation: wall-in 1.5s cubic-bezier(.2, .7, .2, 1) both; }
.launch .widget { animation: drop-in .7s .2s cubic-bezier(.2, .9, .3, 1) both; }
.launch .grid .icon { animation: pop-in .6s calc(.32s + var(--i) * 55ms) cubic-bezier(.2, 1.4, .4, 1) both; }
.launch .dock { animation: rise-in .7s .75s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes wall-in { from { transform: scale(1.25); filter: blur(6px); } }
@keyframes drop-in { from { opacity: 0; transform: translateY(-22px) scale(.95); } }
@keyframes pop-in { from { opacity: 0; transform: translateY(26px) scale(.35); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(46px); } }

/* ───────── Short windows: give the code room ───────── */
@media (max-height: 800px) and (min-width: 821px) {
  .desk { padding-top: 20px; padding-bottom: 20px; }
  .left { gap: 16px; }
  .intro h1 { font-size: clamp(2rem, 3.4vw, 3rem); margin-bottom: 8px; }
  .lede { font-size: 1rem; margin-bottom: 8px; }
  .term-log { height: 82px; }
  .code { padding-top: 10px; }
}

/* ───────── Narrow desktop ───────── */
@media (max-width: 1080px) and (min-width: 821px) {
  .desk { padding: 22px; gap: 24px; }
  .ide-path { display: none; }
  .term-keys button { padding: 3px 7px; }
}

/* ───────── Phones: the page becomes the app ───────── */
@media (max-width: 820px) {
  .desk { display: block; padding: 0; min-height: 0; height: 100dvh; }
  .left, .sim-bar, .hw, .statusbar, .debug-banner { display: none; }
  .sim, .device-wrap { display: block; width: 100%; height: 100%; }
  .device { position: static; width: 100%; height: 100%; padding: 0; border-radius: 0; box-shadow: none; transform: none !important; }
  .screen { width: 100%; height: 100%; border-radius: 0; }
  .home { padding: calc(24px + env(safe-area-inset-top)) 20px calc(26px + env(safe-area-inset-bottom)); }
  .app-nav { padding-top: calc(10px + env(safe-area-inset-top)); }
  .grid { gap: 20px 4px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}