/* Kea v6: the page is your screen. It opens on a short film: Shift is double-tapped, one sentence asks for three
   things, and the screen splits into three columns while Kea does all three at once. Then it settles on one line and
   two buttons, and trying it is a journey where each thing you ask builds on the last. Every animation is the
   browser's own (CSS and Web Animations), on transform and opacity only, so the GPU runs it all. */
:root {
  --cream: #f4f1ea;
  --paper: #fffdf9;
  --line: #ddd8cf;
  --ink: #161514;
  --ink-2: #57534c;
  --ink-3: #8b867c;
  --kea: #2b7d5a;
  --forest: #1e4535;
  --on-forest: #f4ebdd;
  --mint: #1ee3a6;
  --glint: #8cffd2;
  --serif: "EB Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mac: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Figtree", sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cool-1: #6fe3ff; --cool-2: #8a7cff; --warm-1: #ff9a5c; --warm-2: #ff5fa2;
  /* Set by app.js: the Dock's height */
  --dock-h: 96px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--cream); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { overflow-x: clip; background: radial-gradient(120% 90% at 50% 0%, #fbf8f1 0%, var(--cream) 55%, #ebe5d8 100%); color: var(--ink); font: 400 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
body::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; background: url(grain.png); opacity: 0.5; }
::selection { background: var(--kea); color: var(--paper); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid #ff5b1f; outline-offset: 4px; border-radius: 8px; }
kbd { display: inline-grid; place-items: center; min-width: 1.7em; height: 1.6em; padding: 0 0.4em; border-radius: 0.38em; vertical-align: 0.06em;
      font: 600 0.78em/1 var(--sans); color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line), 0 1.5px 0 var(--line); }

/* ---------- The first screen is the Mac; the page scrolls on to more below ---------- */
.screen { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; }

/* ---------- The island: Kea's notch at the top, as on the main site ----------
   The site's navigation, hanging from the top of the screen with curved shoulders. While Kea listens or works, the
   links fade out and Kea's orb, what it's doing, and its sound bars fade in. */
.island { position: fixed; z-index: 60; top: 0; left: 50%; transform: translateX(-50%); height: 56px; border-radius: 0 0 28px 28px;
  background: #0b0b0a; color: var(--cream); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.6); will-change: transform; }
.island::before, .island::after { content: ""; position: absolute; top: 0; width: 14px; height: 14px; }
.island::before { left: -14px; background: radial-gradient(circle at 0 100%, transparent 13.5px, #0b0b0a 14px); }
.island::after { right: -14px; background: radial-gradient(circle at 100% 100%, transparent 13.5px, #0b0b0a 14px); }
.island-nav { height: 100%; display: flex; align-items: center; gap: 2px; padding: 0 9px 0 22px; white-space: nowrap; transition: opacity 240ms var(--ease) 160ms; }
.island-brand { display: flex; align-items: center; gap: 9px; margin-right: 10px; font: 800 19px/1 var(--sans); letter-spacing: -0.035em; }
.island-brand svg { width: 19px; height: 21px; fill: #e7d9c8; }
.island-links { display: flex; }
.island-links a, .island-links button { flex: none; height: 38px; display: inline-flex; align-items: center; padding: 0 13px; border-radius: 19px; color: rgba(244, 241, 234, 0.68); font: 500 14.5px/1 var(--sans); transition: background-color 160ms, color 160ms; }
.island-links a:hover, .island-links button:hover { background: rgba(244, 241, 234, 0.1); color: var(--cream); }
.island-get { position: relative; flex: none; height: 38px; display: inline-flex; align-items: center; margin-left: 6px; padding: 0 17px; border-radius: 19px; background: var(--kea); color: #fff; font: 600 14.5px/1 var(--sans); transition: background-color 220ms var(--ease); }
.island-get:hover { background: #ff5b1f; }
.island-get.call::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 5px rgba(43, 125, 90, 0.45); animation: call 1.4s var(--ease) infinite; pointer-events: none; will-change: transform, opacity; }
@keyframes call { from { transform: scale(1); opacity: 1; } to { transform: scale(1.2, 1.5); opacity: 0; } }
.island-voice { position: absolute; inset: 0; display: flex; align-items: center; gap: 12px; padding: 0 24px 0 22px; opacity: 0; pointer-events: none; transition: opacity 200ms var(--ease); }
.island.live .island-nav { opacity: 0; pointer-events: none; transition-delay: 0s; }
.island.live .island-voice { opacity: 1; transition-delay: 160ms; }
.island-say { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 15px/1 var(--sans); color: var(--cream); }
.orb { position: relative; flex: none; width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 0 10px 1px var(--o1); }
.orb i { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--o1), var(--o2), var(--o3), var(--o4), var(--o1)); animation: spin 2.4s linear infinite; will-change: transform; }
@keyframes spin { to { transform: rotate(360deg); } }
.island { --o1: #2fd4ff; --o2: #3b6cff; --o3: #8cf3ff; --o4: #5a4bff; --w1: var(--cool-1); --w2: var(--cool-2); }
.island.acting { --o1: #1ee3a6; --o2: #00a8ff; --o3: #8cffd2; --o4: #2b7bff; }
.island.speaking { --o1: #ff7a59; --o2: #ff4fa3; --o3: #ffc15a; --o4: #b55cff; --w1: var(--warm-1); --w2: var(--warm-2); }
.bars { flex: none; display: flex; align-items: center; gap: 3px; height: 20px; }
.bars i { flex: none; width: 3.5px; height: 18px; border-radius: 2px; background: linear-gradient(var(--w1), var(--w2)); transform: scaleY(0.22); will-change: transform; }
.island.acting .bars i { animation: ripple 0.9s ease-in-out infinite; }
.island.acting .bars i:nth-child(2) { animation-delay: 0.1s; } .island.acting .bars i:nth-child(3) { animation-delay: 0.2s; }
.island.acting .bars i:nth-child(4) { animation-delay: 0.3s; } .island.acting .bars i:nth-child(5) { animation-delay: 0.4s; }
@keyframes ripple { 0%, 100% { transform: scaleY(0.22); } 50% { transform: scaleY(1); } }
/* Kea asking before it does something it can't undo: the question, and Send or Stop */
.island-ask { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; padding: 0 9px 0 22px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 200ms var(--ease), visibility 0s 200ms; }
.island.asking .island-voice { opacity: 0; transition-delay: 0s; }
.island.asking .island-ask { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 140ms, 0s; }
.ask-q { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 15px/1 var(--sans); }
.island-ask button { position: relative; flex: none; height: 38px; padding: 0 17px; border-radius: 19px; font: 600 14.5px/1 var(--sans); }
#ask-yes { background: var(--kea); color: #fff; }
#ask-yes::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 5px rgba(43, 125, 90, 0.5); animation: call 1.4s var(--ease) infinite; pointer-events: none; will-change: transform, opacity; }
#ask-yes:hover { background: #ff5b1f; }
#ask-no { color: rgba(244, 241, 234, 0.78); box-shadow: inset 0 0 0 1px rgba(244, 241, 234, 0.3); }
#ask-no:hover { color: var(--cream); background: rgba(244, 241, 234, 0.1); }

/* ---------- The desktop, once the film is over ----------
   Kea green floods out of the notch and becomes the wallpaper, with the line set into it like a wallpaper's art.
   Kea.zip and two folders sit where a Mac keeps its desktop icons, and a sticky note says what to do. */
.wall { position: absolute; z-index: 10; inset: 0; color: var(--on-forest); pointer-events: none; transition: opacity 300ms var(--ease); }
body.playing .wall, body.started .wall { opacity: 0; visibility: hidden; transition: opacity 300ms var(--ease), visibility 0s 300ms; }
.wall-bg { position: absolute; left: 50%; top: 0; width: 300vmax; height: 300vmax; margin: -150vmax 0 0 -150vmax; border-radius: 50%; transform: scale(0); will-change: transform;
  background: radial-gradient(circle, #2f7857 0%, #255d46 12%, #1d4838 26%, #163a2d 37%); }
.wall-copy { position: absolute; left: clamp(28px, 6.5vw, 120px); top: clamp(104px, 17vh, 190px); }
.wall-h { font: 400 clamp(76px, 10.6vw, 186px)/0.86 var(--serif); letter-spacing: -0.05em; }
.wall-h span, .wall-h em { display: block; opacity: 0; will-change: transform, opacity; }
.wall-h em { color: #ead3fb; letter-spacing: -0.035em; }
.wall-sub { max-width: 30em; margin-top: 30px; font: 500 clamp(17px, 1.4vw, 21px)/1.45 var(--sans); color: rgba(244, 235, 221, 0.72); opacity: 0; will-change: transform, opacity; }
.wall-icons { position: absolute; right: 18px; top: 78px; display: flex; flex-direction: column; align-items: center; gap: 12px; pointer-events: auto; }
.dk { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 108px; padding: 6px 4px 4px; border-radius: 8px; opacity: 0; will-change: transform, opacity; }
.dk img { width: 60px; height: 60px; margin: 2px 0; border-radius: 14px; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.55); }
.dk svg { width: 64px; height: 50px; margin: 7px 0; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3)); }
.dk span { padding: 1px 6px; border-radius: 4px; font: 500 12.5px/1.25 var(--mac); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); }
.dk small { font: 500 11px/1.2 var(--mac); color: #9fd3ff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); }
.dk:hover span { background: rgba(255, 255, 255, 0.16); }
.dk:active img, .dk:active svg { filter: brightness(0.75); }
/* The sticky note, as if from Stickies, with an arrow drawn down to the Dock */
.sticky { position: absolute; right: clamp(40px, 15vw, 280px); bottom: calc(var(--dock-h) + 74px); width: 240px; padding: 16px 18px 18px; rotate: 2.5deg; opacity: 0; pointer-events: auto;
  background: linear-gradient(#fff6a3, #fdec7e); color: #3d3410; font: 500 22px/1.15 "Marker Felt", "Caveat", cursive;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 20px 34px -14px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.15); will-change: transform, opacity; }
.sticky::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: rgba(120, 100, 0, 0.06); }
.st-h { margin-bottom: 6px; font-size: 30px; font-weight: 600; }
.sticky p + p { margin-top: 8px; }
.sticky kbd { font-size: 0.66em; vertical-align: 0.18em; }
/* What you've had Kea do, ticked off as you go */
.st-done { list-style: none; }
.st-done:not(:empty) { margin-top: 10px; padding-top: 9px; border-top: 1.5px dashed rgba(61, 52, 16, 0.28); }
.st-done li { display: flex; align-items: center; gap: 7px; font-size: 0.86em; line-height: 1.25; color: #5b4d12; will-change: transform, opacity; }
.st-done li + li { margin-top: 3px; }
.st-done svg { flex: none; width: 19px; height: 19px; fill: none; stroke: var(--kea); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; will-change: transform; }
.st-arrow { position: absolute; left: -150px; bottom: -108px; width: 170px; height: 120px; fill: none; stroke: #fff6a3; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; rotate: -2.5deg; }
/* ---------- The film: Shift, one sentence, then three jobs at once in three columns ---------- */
.film { position: absolute; z-index: 28; top: 76px; bottom: calc(var(--dock-h) + 14px); left: max(24px, (100% - 1360px) / 2); right: max(24px, (100% - 1360px) / 2);
  display: flex; flex-direction: column; justify-content: center; pointer-events: none; }
.film[hidden] { display: none; }
.f-mid { position: absolute; inset: 0; display: grid; place-items: center; }
.f-keys, .f-say { grid-area: 1 / 1; }
.f-keys { display: flex; flex-direction: column; align-items: center; gap: 20px; opacity: 0; will-change: transform, opacity; }
.f-keys p { font: 500 16px/1 var(--sans); color: var(--ink-3); }
.f-keys .cap { width: 132px; height: 84px; }
.f-keys .cap-shade { background: rgba(60, 45, 20, 0.35); }
.f-keys .cap-side, .f-keys .cap-top { border-radius: 15px; }
.f-keys .cap-top { bottom: 7px; }
.f-keys .cap-ring { border-radius: 19px; box-shadow: 0 0 0 6px rgba(43, 125, 90, 0.28); }
.f-keys .cap i { right: 13px; top: 10px; font-size: 25px; }
.f-keys .cap b { left: 14px; bottom: 12px; font-size: 18px; }
.f-say { max-width: 15em; font: 400 clamp(30px, 4.3vw, 66px)/1.14 var(--serif); letter-spacing: -0.03em; text-align: center; color: var(--ink); }
.f-line { display: block; }
.f-c { display: inline-block; will-change: transform, opacity; }
.f-say .w { display: inline-block; opacity: 0; will-change: transform, opacity; }
/* The three columns, with a glowing line between each, as Kea draws them on your screen */
.f-cols { position: relative; flex: 0 1 640px; min-height: 0; display: grid; grid-template-columns: 1fr 2px 1fr 2px 1fr; column-gap: 16px; }
.f-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.f-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 44px; padding: 0 2px 0 4px; font: 400 clamp(17px, 1.5vw, 23px)/1.1 var(--serif); letter-spacing: -0.012em; color: var(--ink); }
.f-t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; }
.f-st { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; opacity: 0; }
.f-st.busy::before { content: ""; position: absolute; inset: 2px; border-radius: 50%; border: 2px solid rgba(30, 227, 166, 0.22); border-top-color: #12b886; animation: spin 0.8s linear infinite; will-change: transform; }
.f-st.ok { background: var(--kea); }
.f-st svg { display: block; width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.f-slot { position: relative; flex: 1; min-height: 0; margin-top: 6px; }
.f-slot .win { inset: 0; }
.f-div { border-radius: 1px; background: linear-gradient(180deg, rgba(30, 227, 166, 0), #1ee3a6 16%, #00a8ff 84%, rgba(0, 168, 255, 0)); box-shadow: 0 0 14px 1px rgba(30, 227, 166, 0.55); opacity: 0; will-change: transform, opacity; }
/* The apps, sized for a column */
.film .ch-tab { flex: 0 1 210px; width: auto; min-width: 0; }
.film .ch-tab .tt { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.film .omni { min-width: 0; font-size: 13.5px; }
.film .omni .q { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-load { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 2.5px; background: #0a84ff; transform: scaleX(0); transform-origin: 0 50%; opacity: 0; will-change: transform, opacity; }
.film .newtab .search { width: 84%; height: 42px; font-size: 13.5px; }
.film .site { padding: 18px 16px; }
.film .site .q { margin: 14px 0 10px; }
.film .fl { grid-template-columns: 1fr auto; gap: 10px; margin-top: 8px; padding: 12px 14px; }
.film .fl b { font-size: 14px; }
.film .fl .price { font-size: 16px; text-align: right; }
.film .fl .tag { display: block; width: max-content; margin: 4px 0 0 auto; }
.film .fl.pick { box-shadow: inset 0 0 0 2px var(--kea); background: #f1f8f3; }
.cal3 { --hd: 34px; --hl: 44px; position: relative; flex: 1; display: grid; grid-template-columns: var(--hl) repeat(3, 1fr); grid-template-rows: var(--hd) repeat(6, 1fr); font-size: 12px; background: #fff; }
.cal3 .hd { display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #e2ddd3; font-weight: 600; color: #4a4741; }
.cal3 .hr { padding: 3px 7px 0 0; text-align: right; font-size: 10.5px; color: #a8a398; border-right: 1px solid #e2ddd3; }
.cal3 .cell { border-bottom: 1px solid #efebe4; border-right: 1px solid #efebe4; }
.ev.trip { display: flex; flex-direction: column; justify-content: center; align-items: center; background: #fde7dc; color: #8f3a17; font-size: 15px; text-align: center; opacity: 0;
  box-shadow: inset 3px 0 0 #ff5b1f, 0 10px 22px -10px rgba(143, 58, 23, 0.55); }
.ev.trip b { min-height: 1.3em; }
.note-pad { flex: 1; padding: 18px 20px; background: #fffef6; font-size: 14px; line-height: 1.6; white-space: pre-wrap; color: #1d1d1f; }
.note-pad b { display: block; min-height: 1.3em; margin-bottom: 4px; font-size: 18px; }
/* Sound and Skip, beside the Dock (a click anywhere else skips too) */
.f-ctl { position: absolute; z-index: 36; right: 24px; bottom: 30px; display: none; gap: 8px; }
body.playing .f-ctl { display: flex; }
.f-skip, .f-sound { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; border-radius: 99px; font: 600 13px/1 var(--sans); color: var(--ink-2);
  background: rgba(255, 253, 249, 0.6); box-shadow: inset 0 0 0 1px var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background-color 160ms, color 160ms; }
.f-skip:hover, .f-sound:hover { background: var(--paper); color: var(--ink); }
.f-sound { padding-left: 10px; }
.f-sound svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.f-sound .spk { fill: currentColor; }
.f-sound[aria-pressed="true"] { color: var(--kea); }
.f-sound[aria-pressed="true"] .off, .f-sound[aria-pressed="false"] .on { display: none; }

/* Buttons, and quiet print */
.get { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 22px 0 18px; border-radius: 99px; background: var(--ink); color: var(--paper); font: 600 16px/1 var(--sans); transition: background 200ms; }
.get:hover { background: var(--kea); }
.get svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.quiet { font: 500 15px/1.4 var(--sans); color: var(--ink-3); }

/* Two Shift keys, side by side: a soft shadow, a darker side, and a top that slides down over it and springs back */
.caps { flex: none; display: flex; flex-wrap: nowrap; gap: 10px; }
.cap { position: relative; flex: none; width: 100px; height: 66px; }
.cap-shade { position: absolute; left: 5px; right: 5px; top: 18px; bottom: -2px; border-radius: 14px; background: rgba(0, 0, 0, 0.45); filter: blur(9px); will-change: opacity; }
.cap-side { position: absolute; inset: 0; border-radius: 12px; background: linear-gradient(180deg, #b9ad99, #8f8473); }
.cap-top { position: absolute; left: 0; right: 0; top: 0; bottom: 6px; border-radius: 12px; background: linear-gradient(180deg, #fffdf9, #e9e2d5); box-shadow: inset 0 0 0 1px rgba(201, 191, 174, 0.9); will-change: transform; }
.cap-ring { position: absolute; inset: -5px; border-radius: 16px; box-shadow: 0 0 0 5px rgba(140, 255, 210, 0.32); opacity: 0; will-change: opacity; }
.cap-glow { position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 5px rgba(140, 255, 210, 0.3), 0 0 28px 4px rgba(140, 255, 210, 0.45); opacity: 0; transition: opacity 300ms var(--ease); }
.caps.on .cap-glow { opacity: 1; }
.cap i { position: absolute; right: 10px; top: 8px; font: 500 19px/1 var(--sans); font-style: normal; color: #4a463f; letter-spacing: 0; }
.cap b { position: absolute; left: 11px; bottom: 9px; font: 600 14px/1 var(--sans); color: #4a463f; letter-spacing: 0; }
.caps.on .cap i, .caps.on .cap b { color: var(--kea); }

/* ---------- Windows, as the film and the apps draw them ---------- */
.win { position: absolute; display: flex; flex-direction: column; border-radius: 13px; background: #fbfaf7; overflow: hidden; transform-origin: 0 0;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.25), 0 30px 60px -18px rgba(30, 25, 15, 0.45), 0 8px 18px -8px rgba(30, 25, 15, 0.25); font-family: var(--mac); color: #1d1d1f; will-change: transform, opacity; }
.tb { position: relative; flex: none; display: flex; align-items: center; height: 40px; padding: 0 14px; background: #f1eee8; border-bottom: 1px solid #e2ddd3; }
.tb .t { position: absolute; left: 0; right: 0; text-align: center; font-size: 13px; font-weight: 600; color: #4a4741; pointer-events: none; }
.lights { display: flex; gap: 8px; }
.lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15); }
.lights i:nth-child(2) { background: #febc2e; }
.lights i:nth-child(3) { background: #28c840; }
.pressed { transform: scale(0.94); filter: brightness(0.92); }
.typing::after { content: ""; display: inline-block; width: 1.5px; height: 1.1em; margin-left: 1px; vertical-align: -0.2em; background: #0a84ff; animation: caret 0.8s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* Chrome: a tab, the toolbar, and the page */
.ch-tabs { flex: none; display: flex; align-items: flex-end; gap: 6px; height: 40px; padding: 0 12px; background: #dfe3e8; }
.ch-tabs .lights { margin: 0 10px 13px 2px; }
.ch-tab { display: flex; align-items: center; gap: 8px; width: 230px; height: 32px; padding: 0 12px; border-radius: 10px 10px 0 0; background: #fff; font-size: 12.5px; color: #3c4043; }
.ch-tab img { width: 16px; height: 16px; }
.ch-bar { flex: none; display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px; background: #fff; border-bottom: 1px solid #e3e5e8; color: #5f6368; }
.ch-bar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.omni { flex: 1; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 16px; background: #f1f3f4; font-size: 14px; color: #202124; }
.omni .ph { color: #80868b; }
.omni .q:not(:empty) + .ph { display: none; }
.ch-page { position: relative; flex: 1; overflow: hidden; background: #fff; }
.newtab { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.newtab .logo { display: flex; align-items: center; gap: 10px; font: 400 40px/1 var(--serif); color: #3c4043; letter-spacing: -0.02em; }
.newtab .logo img { width: 40px; height: 40px; border-radius: 10px; }
.newtab .search { width: min(480px, 80%); height: 46px; display: flex; align-items: center; padding: 0 20px; border-radius: 23px; box-shadow: 0 1px 6px rgba(32, 33, 36, 0.18); color: #80868b; font-size: 14.5px; }
.site { position: absolute; inset: 0; padding: 22px 26px; opacity: 0; overflow: hidden; }
.site .brand-s { display: flex; align-items: center; gap: 9px; font: 800 18px/1 var(--mac); color: #0b3d5c; }
.site .brand-s i { width: 24px; height: 24px; border-radius: 7px; background: linear-gradient(135deg, #0b6fa4, #29b6d8); }
.site .q { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.site .q span { padding: 8px 12px; border-radius: 8px; background: #f2f5f8; font-size: 13px; color: #33475b; }
.site .q b { color: #0b3d5c; }
.fl { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 18px; max-width: 760px; padding: 14px 16px; margin-top: 8px; border-radius: 11px; box-shadow: inset 0 0 0 1px #e5ebf0; font-size: 13px; transition: box-shadow 200ms, background 200ms; }
.fl b { font-size: 15px; }
.fl small { display: block; color: #6b7c8c; font-size: 12px; }
.fl .price { font-size: 18px; font-weight: 800; color: #0b3d5c; }
.fl .tag { margin-left: 6px; padding: 2px 7px; border-radius: 5px; background: #e3f3e8; color: var(--kea); font-size: 11px; font-weight: 700; }
.fl.pick { box-shadow: inset 0 0 0 2px #0a84ff; background: #f3f8ff; }
.fl.booked { box-shadow: inset 0 0 0 2px var(--kea); background: #f1f8f3; }

.ev { position: absolute; padding: 6px 9px; border-radius: 7px; font-size: 12.5px; font-weight: 600; line-height: 1.3; overflow: hidden; }
.ev small { display: block; font-weight: 400; opacity: 0.8; }
.ev.a { background: #dbeafd; color: #1f4f8f; box-shadow: inset 3px 0 0 #0a84ff; }
.ev.b { background: #e3f3e8; color: #1d5a40; box-shadow: inset 3px 0 0 var(--kea); }
.ev.d { background: #efe3fb; color: #5a2f8f; box-shadow: inset 3px 0 0 #8a5cf6; }

/* ---------- The Dock: magnifies under your mouse, like a Mac's ---------- */
.dock { position: absolute; z-index: 35; left: 50%; bottom: 10px; transform: translateX(-50%); height: 74px; }
.dock-bg { position: absolute; inset: 0; border-radius: 22px; background: rgba(255, 253, 249, 0.42); backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 14px 34px -14px rgba(30, 25, 15, 0.4); transform-origin: 50% 100%; will-change: transform; }
.dock-apps { position: relative; display: flex; align-items: flex-end; gap: 8px; height: 100%; padding: 0 10px 9px; }
.dock .app { position: relative; flex: none; width: 56px; height: 56px; transform-origin: 50% 100%; will-change: transform; }
.dock:not(.track) .app, .dock:not(.track) .dock-bg { transition: transform 260ms var(--ease); }
.dock .app img { display: block; width: 100%; height: 100%; will-change: transform; }
.dock .app.kea img { width: 46px; height: 46px; margin: 5px; border-radius: 12px; }
.dock .app::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #1d1d1f; opacity: 0; transition: opacity 300ms; }
.dock .app.run::after { opacity: 0.75; }
.dock .sep { flex: none; width: 1px; height: 48px; margin: 0 2px 4px; background: rgba(0, 0, 0, 0.15); }
.tip { position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%); padding: 5px 11px; border-radius: 8px; background: rgba(40, 38, 35, 0.9); color: #fff; font: 500 13px/1.2 var(--mac); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 150ms; }
.dock .app:hover .tip, .dock .app:focus-visible .tip { opacity: 1; }
.dock .app:focus-visible { outline: none; }
.dock .app:focus-visible img { outline: 2px solid #ff5b1f; outline-offset: 3px; border-radius: 14px; }

/* ---------- While Kea is working: the edge of your screen glows ---------- */
.glow { position: absolute; z-index: 70; inset: 0; pointer-events: none; opacity: 0; transition: opacity 400ms; will-change: opacity; }
.glow.on { opacity: 1; }
.glow::before, .glow::after { content: ""; position: absolute; inset: 0; }
.glow::before { box-shadow: inset 0 0 0 2px rgba(30, 227, 166, 0.85), inset 0 0 30px 4px rgba(30, 227, 166, 0.45), inset 0 0 80px 12px rgba(0, 168, 255, 0.22); }
.glow::after { box-shadow: inset 0 0 0 2px rgba(0, 168, 255, 0.85), inset 0 0 34px 6px rgba(0, 168, 255, 0.4), inset 0 0 90px 14px rgba(30, 227, 166, 0.22); opacity: 0; animation: breathe 2.4s ease-in-out infinite; will-change: opacity; }
@keyframes breathe { 50% { opacity: 1; } }

/* ---------- Kea's pointer ---------- */
.pointers { position: absolute; inset: 0; z-index: 65; pointer-events: none; }
.kp { position: absolute; left: 0; top: 0; width: 24px; height: 24px; will-change: transform, opacity; }
.kp::before { content: ""; position: absolute; left: -22px; top: -18px; width: 62px; height: 62px; border-radius: 50%; background: radial-gradient(circle, rgba(30, 227, 166, 0.55), rgba(0, 168, 255, 0.18) 45%, rgba(0, 168, 255, 0) 68%); }
.kp svg { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3)); transform-origin: 15% 10%; }
.kp .ring { position: absolute; left: 2px; top: 2px; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 2px solid var(--mint); opacity: 0; }

/* ---------- More, below the Mac ---------- */
.more { position: relative; z-index: 1; background: var(--cream); border-top: 1px solid var(--line); }
.m-sec { max-width: 1080px; margin: 0 auto; padding: 96px 24px 0; }
.m-h { font: 400 clamp(38px, 4.4vw, 60px)/1 var(--serif); letter-spacing: -0.035em; }
.m-steps { list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
.m-steps li { counter-increment: s; padding: 26px 24px; border-radius: 18px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.m-steps li::before { content: counter(s); display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 18px; border-radius: 50%; background: var(--forest); color: var(--on-forest); font: 600 15px/1 var(--sans); }
.m-steps b, .m-grid b { display: block; font: 600 18px/1.3 var(--sans); letter-spacing: -0.01em; }
.m-steps span, .m-grid span { display: block; margin-top: 8px; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.m-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 32px; }
.m-grid.three { grid-template-columns: repeat(3, 1fr); }
.m-grid > div { padding: 24px; border-radius: 18px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.m-faq { margin-top: 28px; border-top: 1px solid var(--line); }
.m-faq details { border-bottom: 1px solid var(--line); }
.m-faq summary { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; font: 600 18px/1.3 var(--sans); cursor: pointer; list-style: none; }
.m-faq summary::-webkit-details-marker { display: none; }
.m-faq summary::after { content: "+"; font: 400 26px/1 var(--sans); color: var(--ink-3); transition: transform 250ms var(--ease); }
.m-faq details[open] summary::after { transform: rotate(45deg); }
.m-faq p { max-width: 44em; padding: 0 0 22px; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.m-end { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 130px 24px 110px; text-align: center; }
.m-big { font: 400 clamp(56px, 7vw, 104px)/0.95 var(--serif); letter-spacing: -0.045em; }
.m-big em { color: var(--kea); }
.big-get { height: 54px; padding: 0 26px 0 22px; font-size: 17px; }
/* The foot, as on the main site: Kea green, and a giant Kea running off the bottom */
.foot { position: relative; overflow: hidden; padding: 76px max(20px, 5vw) 0; background: var(--kea); color: #e7d9c8; }
.foot-top { max-width: 1520px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px 48px; }
.foot-note { max-width: 20ch; font: italic 400 clamp(24px, 2.2vw, 34px)/1.2 var(--serif); color: var(--paper); }
.foot-small { max-width: 44ch; margin-top: 16px; font: 500 12.5px/1.45 var(--sans); color: rgba(231, 217, 200, 0.7); }
.foot-links { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 14px 30px; font: 500 15px/1 var(--sans); }
.foot-links a, .foot-links button { padding: 6px 0; color: inherit; font: inherit; transition: color 160ms; }
.foot-links a:hover, .foot-links button:hover { color: var(--paper); }
.foot-word { display: flex; align-items: flex-end; gap: 0.06em; max-width: 1520px; margin: clamp(48px, 7vw, 90px) auto 0; font: 800 clamp(140px, 29vw, 480px)/0.74 var(--sans);
  letter-spacing: -0.065em; color: #e7d9c8; user-select: none; transform: translateY(0.08em); }
.foot-word svg { width: 0.62em; height: 0.695em; margin-bottom: 0.08em; fill: #e7d9c8; }

/* ---------- Phones ---------- */
@media (max-width: 820px) {
  /* The island keeps Kea and Download, and is wide enough to say what Kea's doing */
  .island-links { display: none; }
  .island-nav { justify-content: space-between; padding-left: 18px; }
  .island { min-width: 300px; }
  .island-say, .ask-q { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; font-size: 13.5px; line-height: 1.15; }
  .island-ask { gap: 6px; padding-left: 18px; }
  .island-ask button { padding: 0 13px; }
  .m-steps, .m-grid, .m-grid.three { grid-template-columns: 1fr; }
  .m-sec { padding-top: 64px; }
  .foot-word svg { display: none; }
  .dock .app { width: 40px; height: 40px; }
  .dock .app.kea img { width: 34px; height: 34px; margin: 3px; border-radius: 9px; }
  .dock .sep { height: 34px; }
  .dock .app.extra { display: none; }
  .dock { height: 56px; }
  .dock-apps { gap: 6px; padding-bottom: 8px; }
  .film { top: 64px; left: 10px; right: 10px; bottom: calc(var(--dock-h) + 6px); }
  .f-say { font-size: 29px; }
  .f-keys .cap { width: 104px; height: 68px; }
  .f-cols { flex: 1 1 auto; grid-template-columns: 1fr; grid-template-rows: 1fr 2px 1fr 2px 1fr; row-gap: 8px; }
  .f-div { background: linear-gradient(90deg, rgba(30, 227, 166, 0), #1ee3a6 16%, #00a8ff 84%, rgba(0, 168, 255, 0)); }
  .f-h { height: 24px; font-size: 16px; }
  .f-st { width: 18px; height: 18px; }
  .f-slot { margin-top: 3px; }
  .f-skip { display: none; }
  /* On a phone, a tap anywhere skips, and Sound is a round button above the Dock */
  .f-ctl { right: 14px; bottom: calc(var(--dock-h) + 12px); }
  .f-sound { width: 36px; height: 36px; padding: 0; justify-content: center; }
  .f-sound span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .film .win { border-radius: 10px; }
  .film .tb, .film .ch-tabs { height: 26px; }
  .film .tb .t { font-size: 11px; }
  .film .lights { gap: 5px; }
  .film .lights i { width: 8px; height: 8px; }
  .film .ch-tabs .lights { margin-bottom: 9px; }
  .film .ch-tab { height: 21px; padding: 0 8px; font-size: 10.5px; }
  .film .ch-tab img { width: 12px; height: 12px; }
  .film .ch-bar { height: 30px; padding: 0 8px; }
  .film .omni { height: 22px; font-size: 11.5px; }
  .film .newtab .search { height: 30px; font-size: 11.5px; }
  .film .site { padding: 8px 10px; }
  .film .site .brand-s { font-size: 13px; }
  .film .site .brand-s i { width: 16px; height: 16px; border-radius: 5px; }
  .film .site .q, .film .fl small, .film .fl .tag { display: none; }
  .film .fl { margin-top: 5px; padding: 6px 10px; }
  .film .fl b { font-size: 12px; }
  .film .fl .price { font-size: 13px; }
  .cal3 { --hd: 20px; --hl: 34px; font-size: 10px; }
  .cal3 .hr { font-size: 9px; padding-right: 4px; }
  .cal3 .ev { padding: 2px 6px; font-size: 10px; }
  .cal3 .ev small { display: none; }
  .ev.trip { font-size: 12px; }
  .note-pad { padding: 8px 12px; font-size: 11.5px; line-height: 1.4; }
  .note-pad b { font-size: 13.5px; margin-bottom: 1px; }
  .wall-copy { left: 22px; top: 92px; }
  .wall-h { font-size: 17.5vw; }
  .wall-sub { margin-top: 18px; max-width: 18em; font-size: 16px; }
  .wall-icons, .st-arrow { display: none; }
  .sticky { right: 50%; translate: 50% 0; bottom: calc(var(--dock-h) + 36px); width: 230px; font-size: 19px; }
  .st-h { font-size: 25px; }
  /* Once you've tried one, the note has room for what you've done instead of how to start */
  .sticky:has(.st-done li) #st-try, .sticky:has(.st-done li) .st-or { display: none; }
  .sticky:has(.st-done li) #st-talk::first-letter { text-transform: uppercase; }
}