/* Toolbar after apple-clone's navbar (MIT, Sanidhya Kumar Verma): logo left,
   links centred, search / bag / GitHub right, no bar behind it. */
:root,
[data-theme="light"] {
  --ink: #1d1d1f;
  --bg: #fff;
  --blue: #0071e3;
  --nav-ink: rgba(29, 29, 31, 0.7);
  --nav-ink-hover: #1d1d1f;
  --ink-faint: rgba(29, 29, 31, 0.28);
  /* apple-clone sets no font: Tailwind's default sans, which is the system UI font (SF Pro on a Mac) */
  --font: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
:root[data-theme="dark"],
[data-theme="dark"] {
  --ink: #fff;
  --bg: #000;
  --nav-ink: rgba(255, 255, 255, 0.7);
  --nav-ink-hover: #fff;
  --ink-faint: rgba(255, 255, 255, 0.3);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
#field { position: fixed; inset: 0; width: 100%; height: 100%; }

.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 10; }
.nav-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 20px 40px;
  display: flex;
  align-items: center;
}
.nav-logo { display: flex; color: var(--ink); }
.nav-links {
  flex: 1;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-links a {
  display: block;
  padding: 0 20px;
  color: var(--nav-ink);
  font-size: 14px;
  text-decoration: none;
  transition: color 0.2s ease;
}
.nav-links a:hover { color: var(--nav-ink-hover); }
.nav-icons { display: flex; align-items: center; gap: 28px; }
.nav-icons a, .nav-icons button {
  display: flex;
  color: var(--nav-ink);
  transition: color 0.2s ease;
}
.nav-icons a:hover, .theme-toggle:hover { color: var(--nav-ink-hover); }

/* the bulb: rays out when lit (light page), none when out (dark page) */
.theme-toggle {
  display: flex;
  padding: 0;
  border: 0;
  background: none;
  color: var(--nav-ink);
  cursor: pointer;
  transition: color 0.2s ease;
}
.theme-toggle svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.theme-toggle .rays { transform-origin: 12px 10px; transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.2, 0.64, 1); }
[data-theme="dark"] .theme-toggle .rays { opacity: 0; transform: scale(0.6); }

/* the incoming theme: a copy of the page in the new theme, revealed by a growing circle (theme.js) */
.theme-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  color: var(--ink);
  pointer-events: none;
}
.theme-overlay canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

@media (max-width: 640px) {
  .nav-inner { padding: 20px; }
  .nav-links { display: none; }
  .nav-icons { margin-left: auto; }
}

/* ---------- hero: a question typed, the device that answers it ---------- */

main {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 76px 20px clamp(24px, 5vh, 56px);
  pointer-events: none;
  /* the parts above the device; the device takes the rest of the height */
  --hl: clamp(44px, min(7vw, 9.5vh), 92px);
  --stage-gap: clamp(28px, 6vh, 64px);
  container-type: size;   /* the device is sized from the room the page has */
}

.headline {
  margin: 0;
  font-size: var(--hl);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.035em;
  height: 1.1em;
  white-space: nowrap;
}
/* the word stays centred; the caret hangs off its right edge */
.typed { position: relative; display: inline-block; height: 1.1em; vertical-align: top; }
.word .ch { display: inline-block; animation: ch-in 0.26s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.word .ch.settled { animation: none; }
.word .q { color: var(--ink-faint); }
@keyframes ch-in {
  from { opacity: 0; filter: blur(8px); transform: translateY(0.08em); }
}
.caret {
  position: absolute;
  left: 100%;
  top: 0.08em;
  width: 0.075em;
  height: 0.94em;
  margin-left: 0.07em;
  border-radius: 1em;
  background: linear-gradient(180deg, var(--blue) 0%, var(--blue) 38%, #8b5cf6 64%, #f5a524 86%, transparent 100%);
  animation: blink 1.05s ease-in-out infinite;
}
.typed.busy .caret { animation: none; }   /* solid while typing or erasing */
@keyframes blink {
  0%, 45% { opacity: 1; }
  55%, 92% { opacity: 0; }
  100% { opacity: 1; }
}

/* The stage is what the headline leaves of the page's height; every device
   fits inside it, so the whole thing is always in view, centred in it. */
.stage {
  --room: calc(100cqh - var(--hl) * 1.1 - var(--stage-gap) - 8px);
  position: relative;
  width: 100%;
  height: min(var(--room), calc(min(1000px, 92cqw) * 0.611));
  margin-top: var(--stage-gap);
  container-type: size;
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  animation: rise 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s forwards;
}
@keyframes rise { to { opacity: 1; transform: none; } }

.device {
  position: absolute;
  inset: 0;
  margin: auto;
  width: max-content;
  height: fit-content;
  visibility: hidden;
}
.device.on { visibility: visible; }

.screen {
  overflow: hidden;
  background: #000;
  container-type: inline-size;
  transition: filter 0.9s ease;
}
.stage.is-off .screen { filter: brightness(0); }
.slide { position: absolute; inset: 0; visibility: hidden; }
.slide.on { visibility: visible; }
.slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* MacBook Pro: Apple's render (from CodeEdit's site), silver on light, space
   grey on dark; the screen is cut to the notch by its mask */
.dev-macbook { width: min(100cqw, calc(100cqh * 1.636), 1000px); aspect-ratio: 1204 / 736; }
.dev-macbook .hw { position: absolute; inset: 0; width: 100%; height: 100%; }
.hw-dark, [data-theme="dark"] .hw-light { display: none; }
[data-theme="dark"] .hw-dark { display: block; }
.dev-macbook .screen {
  position: absolute;
  top: 2.3%;
  left: 9.14%;
  right: 9.14%;
  aspect-ratio: 984 / 636;
  -webkit-mask: url(assets/devices/macbook-screen-mask.png) 0 0 / 100% 100% no-repeat;
  mask: url(assets/devices/macbook-screen-mask.png) 0 0 / 100% 100% no-repeat;
}

/* The 2019 Mac Pro (Apple's model, rendered front-on) beside the Pro Display
   XDR (devices.css), laid out as Apple shows them but mirrored: the display left, the tower right, as tall as the
   display's stand and panel less a little, the XDR's stand lengthened to Apple's */
.dev-desk {
  --u: min(calc(100cqh / 530), calc(100cqw / 900));
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  gap: calc(62 * var(--u));
}
.xdr-css, .xdr-css *, .xdr-css *::before, .xdr-css *::after { box-sizing: border-box; display: block; }
.xdr-css { position: relative; height: calc(530 * var(--u)) !important; }
.xdr-css .device-power::before { height: calc(156 * var(--u)) !important; }
.xdr-css .device-screen { position: relative; }
.macpro { height: calc(477 * var(--u)); width: auto; }

/* iPhone X (devices.css) */
.dev-phone { --u: min(calc(100cqh / 864), calc(64cqw / 427)); }
.iphone-x { display: inline-block; position: relative; box-sizing: content-box; }
.iphone-x .screen { position: relative; z-index: 3; display: block; width: 100%; height: 100%; }
[data-theme="dark"] .iphone-x { background: #2c2c2e; }
[data-theme="dark"] .iphone-x .volume,
[data-theme="dark"] .iphone-x .volume::before,
[data-theme="dark"] .iphone-x .volume::after,
[data-theme="dark"] .iphone-x .sleep { background: #48484a; }

/* barebones phone app (there is no phone app yet) — sized in screen widths */
.phone-ui {
  display: flex;
  flex-direction: column;
  padding: 1.6cqw 6cqw 3cqw;
  background: #0a0a0b;
  color: #f5f5f7;
  font-size: 5cqw;
  line-height: 1.38;
}
.p-status { display: flex; justify-content: space-between; align-items: center; padding: 0 3.5cqw; height: 8cqw; font-size: 5.2cqw; font-weight: 600; }
.p-glyphs { display: flex; gap: 2cqw; align-items: center; }
.p-glyphs svg { height: 3.6cqw; fill: currentColor; }
.p-glyphs svg:last-child { height: 4.2cqw; }
.p-head { display: flex; align-items: center; gap: 2.5cqw; margin-top: 7cqw; padding-bottom: 4cqw; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-weight: 600; font-size: 5.2cqw; }
.p-head svg { width: 5.5cqw; height: 6cqw; color: #f5f5f7; flex: none; }
.p-thread { flex: 1; display: flex; flex-direction: column; gap: 4cqw; padding-top: 6cqw; }
.p-msg { max-width: 86%; }
.p-user { align-self: flex-end; padding: 3cqw 4.4cqw; border-radius: 5.5cqw 5.5cqw 1.5cqw 5.5cqw; background: #26262a; }
.p-agent { color: rgba(245, 245, 247, 0.86); }
.p-agent code { font: 0.92em ui-monospace, "SF Mono", Menlo, monospace; color: #fff; }
.p-tool { display: flex; align-items: center; gap: 2.4cqw; font-size: 4.3cqw; color: rgba(245, 245, 247, 0.5); }
.p-tick { width: 3.6cqw; height: 3.6cqw; border-radius: 50%; background: #30d158; flex: none; }
.p-composer { display: flex; align-items: center; justify-content: space-between; margin-top: 4cqw; padding: 3.2cqw 3.2cqw 3.2cqw 5cqw; border-radius: 99px; background: #1c1c1f; color: rgba(245, 245, 247, 0.4); font-size: 4.6cqw; }
.p-send { display: grid; place-items: center; width: 7.5cqw; height: 7.5cqw; border-radius: 50%; background: #f5f5f7; flex: none; }
.p-send svg { width: 50%; fill: none; stroke: #0a0a0b; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.p-file { display: flex; justify-content: space-between; padding: 2.8cqw 4cqw; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 3.5cqw; font: 4.2cqw ui-monospace, "SF Mono", Menlo, monospace; color: rgba(245, 245, 247, 0.8); }
.p-file b { font-weight: 500; }
.p-add { color: #30d158; }
.p-del { color: #ff6961; }
.p-home { width: 36%; height: 1.5cqw; margin: 5cqw auto 0; border-radius: 99px; background: rgba(255, 255, 255, 0.85); }

@media (max-width: 640px) {
  .stage { height: var(--room); }
}

@media (prefers-reduced-motion: reduce) {
  .stage { animation: none; opacity: 1; transform: none; }
  .word .ch { animation: none; }
  .caret { display: none; }
}