/*
 * Cosmic Aquarium: the scene's stylesheet, vendored for workraft.ai/aquarium/ (where it came from is recorded in the
 * site's repository, not here). The script is /aquarium/aquarium.js; the animation clips are /aquarium/clips/.
 *
 * Edits for the site (everything else is the artifact as published):
 * - Every selector is scoped to the page root .aq (the artifact's :root variables live on .aq), so nothing reaches
 *   the site's skip link or accessibility widget; the body rules became html:has(.aq) body.
 * - No Google Fonts: Plus Jakarta Sans and Rubik come from the site's own font files.
 * - The artifact's header bar, ghost link and CTA link styles are gone: the site renders them with its own
 *   primitives (Wordmark, Button), with the site's focus ring, hover and press tokens.
 * - Focus: the artifact's own outlines are removed so the site ring applies (2 px Workraft blue, 2 px gap).
 * - Contrast: the payoff button's label is navy on Workraft blue (white was 2.8:1).
 * - Targets: the phone control buttons are 44 x 44 (were 42).
 * - Lights off is a class on .aq (was body); reduced motion also follows html[data-motion="reduced"] (the widget).
 * - The light button's lit look is .is-on (was [aria-pressed]): its name names the next action, so it is not pressed.
 * - Phones: the accessibility button rides above the sticky control bar (the page's script sets --sticky-bar-height).
 * - The title sits 28 px over the tank's lid (18 px on phones): the empty band at the top of the stage is pulled up
 *   under it (D67, Tammy 2026-10-20); only the tank, Cosmo, the caption and the control bar take a press, so the
 *   title's words stay selectable. Cosmo on the lid shows in front of the title, his ears over the words.
 */
/* Brand Book v0.3 core palette only (no accent colours) */
.aq{
  --navy:#071A33; --ocean:#0D5D96; --sky500:#0EA5E9; --sky950:#082F49; --sky900:#0C4A6E; --sky700:#0369A1;
  --slate50:#F8FAFC; --pale:#E4EFF9; --grey:#E9EDF2; --sky300:#7DD3FC; --sky200:#BAE6FD;
  --kraft:#D9B68C;
  --ink:var(--slate50); --ink-soft:rgba(228,239,249,.78); --muted:rgba(228,239,249,.56);
  --card:rgba(7,26,51,.72); --line:rgba(255,255,255,.10);
  --display:"Rubik","Plus Jakarta Sans",system-ui,sans-serif;
  --body:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
.aq *,.aq *::before,.aq *::after{box-sizing:border-box}
html:has(.aq) body{background:#071A33;background-image:linear-gradient(180deg,#071A33 0%,#08264A 45%,#0B4377 78%,#0D5D96 100%);background-attachment:fixed;overflow-x:hidden}
.aq{position:relative;min-height:100vh;color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased}
.aq .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* deep space: haze + twinkling stars */
.aq .space{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.aq .space::before{content:"";position:absolute;inset:-10%;
  background:radial-gradient(ellipse 50% 38% at 50% 46%,rgba(14,165,233,.16),transparent 70%),
             radial-gradient(ellipse 40% 30% at 85% 15%,rgba(125,211,252,.06),transparent 70%)}
.aq .space::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 75% at 50% 45%,rgba(2,8,22,0) 50%,rgba(2,8,22,.45) 100%)}
.aq .space i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;opacity:var(--o,.5);animation:twinkle var(--d,5s) ease-in-out infinite;animation-delay:var(--dl,0s)}
.aq .space i.b{width:3px;height:3px;box-shadow:0 0 6px rgba(186,230,253,.8)}
@keyframes twinkle{0%,100%{opacity:var(--o,.5)}50%{opacity:calc(var(--o,.5)*.3)}}
.aq .space .stars{position:absolute;inset:0;transition:filter .8s ease,opacity .8s ease;opacity:.85}
.aq .space .dark{position:absolute;inset:0;background:#01040C;opacity:0;transition:opacity .8s ease}
.aq.lights-off .space .dark{opacity:.55}
.aq.lights-off .space .stars{opacity:1;filter:brightness(2.2) drop-shadow(0 0 3px rgba(186,230,253,.95))}

/* top bar, like the site nav (the site's EggHeader: logo and Back to work) */
.aq .egg-top{position:relative;z-index:2}

.aq .aq-main{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;padding:0 clamp(0px,3vw,32px) 0}

/* headline with the brand highlight chip */
.aq .intro{text-align:center;padding:clamp(0px,1vh,12px) 16px 0;max-width:760px}
.aq .eyebrow{margin:0 0 12px;font:600 13px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--sky300)}
.aq h1{margin:0;font:500 clamp(32px,4.2vw,48px)/1.08 var(--display);letter-spacing:-.01em;color:var(--slate50);text-wrap:balance}
.aq h2{margin:0;font:500 clamp(26px,3.2vw,36px)/1.17 var(--display);letter-spacing:-.005em;color:var(--slate50);text-wrap:balance}
.aq .chip{display:inline-block;background:var(--slate50);color:var(--sky950);padding:0 .16em;line-height:1.06;margin:0 .04em}
.aq .lead{margin:12px auto 0;max-width:600px;text-wrap:balance;font:400 clamp(16px,1.4vw,18px)/1.6 var(--body);color:var(--ink-soft)}

/* scene */
.aq .scene{width:min(1268px,100%);display:flex;flex-direction:column;align-items:center;margin-top:calc(var(--lid-gap,28px) - min(1268px,100%)*112/1360)}
/* workraft.ai edit (D67): the stage's top band above the lid (112 of the wide layout's 716 units, 97.6 of the narrow
   812, aquarium.js LAYOUTS) is pulled up under the title, so the lid sits --lid-gap under it (28 px; 18 px on phones).
   The band held Cosmo when he climbs onto the lid ("Leave cat unattended"): he now rises in front of the title for
   those seconds, his ears and head over the words (Tammy: "make sure his ears go over title"; the stage's front svg
   is z-index 2 over the static title, and the paw clip's above-the-water clip in aquarium.js reaches above the
   stage). The scene and its stage overlap the title block, so only the tank, Cosmo's hit area, the caption and the
   control bar take a press (the words stay selectable). */
.aq .scene,.aq .stage{pointer-events:none}
.aq .tank,.aq .cat-hit,.aq .caption,.aq .controls{pointer-events:auto}
.aq .stage{position:relative;width:100%;aspect-ratio:1360/716;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.aq .stage svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.aq svg.back{z-index:0} .aq svg.front{z-index:2}
.aq #fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.aq .tank{position:absolute;z-index:1;border-radius:3px;cursor:pointer;
  box-shadow:0 0 0 1px rgba(186,230,253,.22),0 0 80px rgba(14,165,233,.30),0 40px 70px rgba(2,8,20,.35);transition:box-shadow .8s ease}
.aq.lights-off .tank{box-shadow:0 0 0 1px rgba(125,211,252,.14),0 0 70px rgba(14,165,233,.18),0 40px 70px rgba(2,8,20,.5)}
.aq .tank canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;display:block}
/* glass: thickness on the edges, a long reflection, a soft corner sheen */
.aq .tank .glass{position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 14%,rgba(255,255,255,0) 26%,rgba(255,255,255,0) 64%,rgba(255,255,255,.05) 74%,rgba(255,255,255,0) 82%);
  box-shadow:inset 0 0 0 1.5px rgba(224,242,254,.34),inset 5px 0 0 0 rgba(186,230,253,.07),inset -5px 0 0 0 rgba(186,230,253,.07),inset 0 0 60px rgba(125,211,252,.10),inset 0 -30px 50px rgba(2,8,23,.28)}
.aq .tank .glass::before{content:"";position:absolute;left:2.4%;top:7%;width:.9%;height:52%;border-radius:99px;background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,0));filter:blur(.4px)}
.aq .tank .glass::after{content:"";position:absolute;left:4.4%;top:9%;width:.4%;height:24%;border-radius:99px;background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,0))}
.aq .tank.wobble{animation:wobble .55s cubic-bezier(.3,.7,.4,1)}
@keyframes wobble{0%{transform:none}18%{transform:translateX(-5px) skewX(-.8deg) scale(1.006)}38%{transform:translateX(4px) skewX(.6deg)}58%{transform:translateX(-2px) skewX(-.3deg)}78%{transform:translateX(1px)}100%{transform:none}}
.aq .tank.flicker canvas{animation:flicker .42s steps(1,end)}
@keyframes flicker{0%{opacity:1}20%{opacity:.45}35%{opacity:1}55%{opacity:.7}70%{opacity:1}}

/* the cat-tree furniture and Cosmo dim with the room */
.aq svg .furn{transition:filter .8s ease}
.aq.lights-off svg .furn{filter:brightness(.42) saturate(.8)}
.aq #lamp{transition:opacity .8s ease}
.aq.lights-off #lamp{opacity:.12}
.aq .catlayer image{transition:filter .8s ease}
.aq.lights-off .catlayer image{filter:brightness(.34) saturate(.6) drop-shadow(-2px 0 3px rgba(56,189,248,.35))}
.aq .cat-hit{position:absolute;z-index:3;appearance:none;background:transparent;border:0;padding:0;border-radius:40%;cursor:pointer}
.aq .prrr{position:absolute;z-index:4;font:600 13px/1 var(--body);color:var(--sky200);letter-spacing:.06em;pointer-events:none;transform:translate(-50%,0);animation:prrr 1.6s ease-out forwards;white-space:nowrap}
@keyframes prrr{0%{opacity:0;transform:translate(-50%,6px)}20%{opacity:.95}100%{opacity:0;transform:translate(-50%,-26px)}}

.aq .caption{min-height:1.5em;margin:6px 0 0;font:500 16px/1.4 var(--body);color:var(--slate50);text-align:center;opacity:0;transition:opacity .7s ease}
.aq .caption.show{opacity:1}

/* control bar: a navy card like the site's floating cards */
.aq .controls{position:relative;z-index:5;display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:14px;padding:8px;border-radius:16px;
  background:var(--card);border:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 18px 40px rgba(2,8,20,.35);transition:opacity .6s ease}
.aq .controls.dimmed{opacity:.45}
.aq .controls button{position:relative;appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;height:44px;padding:0 14px;
  font:600 14px/1 var(--body);color:var(--slate50);background:transparent;border:1px solid transparent;border-radius:10px;cursor:pointer;
  transition:background .2s,border-color .2s,transform .1s}
.aq .controls button:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12)}
.aq .controls button:active{transform:translateY(1px)}
.aq .controls button.is-on{background:rgba(14,165,233,.18);border-color:rgba(125,211,252,.45)}
.aq .controls svg{width:20px;height:20px;flex:none;color:var(--sky300)}
.aq .controls .sep{width:1px;height:26px;background:var(--line);margin:0 4px}
.aq .controls button.payoff{background:var(--sky500);color:var(--navy);padding:0 18px;border-color:var(--sky500)}
.aq .controls button.payoff:hover{background:#38BDF8;border-color:#38BDF8}
.aq .controls .eyes{font-size:16px;line-height:1}

/* outro */
.aq .outro{margin-top:clamp(80px,13vh,150px);text-align:center;padding:0 16px}
.aq .outro p{margin:12px 0 26px;font:400 18px/1.6 var(--body);color:var(--ink-soft)}
.aq .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* the horizon: the brand's 1px sky line with a glow under it */
.aq .horizon{position:relative;z-index:1;margin-top:clamp(70px,11vh,120px);width:100%;border-top:1px solid var(--sky500)}
.aq .horizon::before{content:"";position:absolute;left:0;right:0;top:0;height:24px;background:linear-gradient(180deg,rgba(14,165,233,.35),rgba(14,165,233,0));pointer-events:none}
.aq .foot{background:var(--navy);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;max-width:1280px;margin:0 auto;padding:26px clamp(16px,5vw,80px) max(28px,env(safe-area-inset-bottom))}
.aq .foot .tag{font:500 18px/1.3 var(--display);color:var(--slate50)}
.aq .foot .req{font-size:13px;color:var(--muted)}
.aq .footwrap{background:var(--navy);position:relative;z-index:1}

@media (max-width:640px){
  .aq .stage{aspect-ratio:720/812}
  .aq .scene{margin-top:calc(var(--lid-gap,18px) - min(1268px,100%)*97.6/720)}
  .aq .controls{position:sticky;bottom:max(12px,env(safe-area-inset-bottom));margin:10px 12px 0;gap:4px}
  .aq .controls button{min-width:44px;height:44px;padding:0 10px}
  .aq .controls button .lbl{display:none}
  .aq .controls .sep{display:none}
  .aq .cta{flex-direction:column;align-items:stretch}
}
@media (prefers-reduced-motion: reduce){
  .aq .space i{animation:none}
  .aq .tank.wobble,.aq .tank.flicker canvas{animation:none}
  .aq .prrr{animation:none;opacity:.95}
  .aq .controls button:active{transform:none}
}
/* the same still state when the accessibility widget asks for reduced motion */
html[data-motion="reduced"] .aq .space i{animation:none}
html[data-motion="reduced"] .aq .tank.wobble,html[data-motion="reduced"] .aq .tank.flicker canvas{animation:none}
html[data-motion="reduced"] .aq .prrr{animation:none;opacity:.95}
html[data-motion="reduced"] .aq .controls button:active{transform:none}