/* Bolt app. Tokens (white and blue, light and dark), layout, chat, tray, drawer, composer; Bolt's own paint and
   motion are appended at the end from design/bolt-mockup.html. Every color is a token here; nothing hard-coded below. */
@font-face{font-family:"Schibsted Grotesk";src:url(/fonts/schibsted-grotesk-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url(/fonts/schibsted-grotesk-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url(/fonts/schibsted-grotesk-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --ground:#F4F8FF; --raise:#FFFFFF; --line:#D9E4F5;
  --ink:#14213D; --ink-2:#3B4A6B; --ink-3:#5B6B8F;
  --accent:#2563EB; --accent-ink:#1D4ED8; --on-accent:#FFFFFF;
  --stage:#CFE4FF; --stage-hi:#F4F9FF;
  --err-ink:#B42318; --shadow:rgba(20,33,61,.18); --scrim:rgba(11,22,48,.35);
  /* Bolt's own paints: the same in both modes */
  --glow:#7FF0D8; --spark:#F5A623; --pink:#FFC9D7; --ok:#5BD69A; --err:#FF6B6B; --info:#6CB6FF; --c-line:#1A2140;
  --r-bubble:18px; --r-card:12px; --r-button:10px;
  --sans:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif; --display:var(--sans);
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --amp:1; --spd:1;   /* Bolt's motion knobs, "Lively" */
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#0B1630; --raise:#12203F; --line:#22355E;
    --ink:#F3F7FF; --ink-2:#BFCDEB; --ink-3:#8FA2CC;
    --accent:#3369F0; --accent-ink:#8DB2FF; --on-accent:#FFFFFF;
    --stage:#173061; --stage-hi:#2C5BB5;
    --err-ink:#FF9C9C; --shadow:rgba(0,0,0,.5); --scrim:rgba(0,0,0,.5);
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--ground);color:var(--ink);font:400 1rem/1.5 var(--sans);-webkit-text-size-adjust:100%}
button,input,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ib svg,.newchat svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* login */
.login{min-height:100dvh;display:grid;place-content:center;justify-items:center;gap:12px;padding:24px 16px}
.login-bolt{width:160px;border-radius:28px;background:radial-gradient(circle at 50% 30%,var(--stage-hi),var(--stage) 75%)}
.login h1{margin:0;font-size:1.6rem;font-weight:600;letter-spacing:-.01em}
.login form{display:grid;gap:10px;width:min(320px,calc(100vw - 32px))}
.login label{font-weight:600;font-size:.95rem}
.login input{min-height:48px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-button);background:var(--raise)}
.form-error{margin:0;color:var(--err-ink);font-size:.92rem}
.form-error:empty{display:none}

/* buttons */
.btn{min-height:44px;padding:0 18px;border-radius:var(--r-button);border:1px solid var(--line);background:var(--raise);font-weight:600;cursor:pointer}
.btn.primary{background:var(--accent);color:var(--on-accent);border-color:transparent}
.ib{flex:none;width:44px;height:44px;border:0;border-radius:var(--r-card);background:transparent;color:var(--ink-2);display:grid;place-items:center;padding:0;cursor:pointer}
.ib.on{color:var(--accent-ink);background:var(--ground)}

/* layout: phone first, drawer slides in; desktop is three columns */
.app{height:100dvh;display:grid;grid-template-columns:minmax(0,1fr);overflow:hidden}
.main{display:flex;flex-direction:column;min-height:0;min-width:0}
.topbar{position:relative;display:flex;align-items:center;gap:8px;padding:8px;padding-top:max(8px,env(safe-area-inset-top));background:var(--raise);border-bottom:1px solid var(--line)}
.avatar{width:72px;height:72px;flex:none;border-radius:20px;background:radial-gradient(circle at 50% 30%,var(--stage-hi),var(--stage) 75%);overflow:hidden}
.avatar svg,.stage svg,.login-bolt svg{display:block;width:100%;height:auto}
.who{display:grid;gap:2px;min-width:0;flex:1}
.who strong{font-size:1.05rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who span{color:var(--ink-2);font-size:.88rem}
.menu{position:absolute;right:8px;top:calc(100% - 4px);z-index:5;display:grid;min-width:230px;padding:6px;background:var(--raise);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:0 16px 40px -20px var(--shadow)}
.menu button{min-height:44px;text-align:left;padding:0 12px;border:0;border-radius:8px;background:transparent;cursor:pointer}
.menu button:hover{background:var(--ground)}
.banner{padding:8px 14px;background:color-mix(in srgb,var(--err) 16%,var(--raise));border-bottom:1px solid var(--line);font-size:.92rem}

/* chat */
.chat{flex:1;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:10px;padding:16px 14px 20px}
.b-me,.b-bot{max-width:min(86%,640px);padding:10px 14px;line-height:1.5;overflow-wrap:anywhere}
.b-me{align-self:flex-end;background:var(--accent);color:var(--on-accent);border-radius:var(--r-bubble) var(--r-bubble) 6px var(--r-bubble);white-space:pre-wrap}
.b-bot{align-self:flex-start;background:var(--raise);border:1px solid var(--line);border-radius:var(--r-bubble) var(--r-bubble) var(--r-bubble) 6px}
.b-bot.interim{color:var(--ink-2);font-size:.92rem}
.b-bot>:first-child{margin-top:0}.b-bot>:last-child{margin-bottom:0}
.b-bot pre{position:relative;background:var(--ground);border-radius:8px;padding:10px 12px;padding-right:64px;overflow-x:auto;font:500 .85rem/1.45 var(--mono)}
.b-bot code{font:500 .88em var(--mono)}
.b-bot a{color:var(--accent-ink)}
.b-bot img{max-width:100%}
.copy{position:absolute;top:4px;right:4px;min-height:32px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--raise);font:600 .78rem var(--sans);cursor:pointer}
.day{align-self:center;font:500 .75rem/1 var(--mono);color:var(--ink-3);margin:6px 0}
.note{align-self:flex-start;margin:-4px 0 0 6px;font-size:.8rem;color:var(--ink-3)}
.tool{align-self:flex-start;width:min(86%,640px);border:1px solid var(--line);background:var(--raise);border-radius:var(--r-card);font:500 .8rem/1.4 var(--mono);color:var(--ink-2)}
.tool.err{border-left:4px solid var(--err)}
.tool summary{display:flex;gap:8px;align-items:center;padding:10px 12px;min-height:44px;cursor:pointer;list-style:none}
.tool summary::-webkit-details-marker{display:none}
.tool .ti{color:var(--accent-ink)}
.tool .tt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.tool .td{color:var(--ink-3)}
.tool pre{margin:0;padding:10px 12px;border-top:1px solid var(--line);white-space:pre-wrap;word-break:break-word;font:inherit}
.errcard{align-self:flex-start;max-width:min(86%,640px);display:grid;gap:8px;justify-items:start;padding:12px;border:1px solid var(--err);border-radius:var(--r-card);background:color-mix(in srgb,var(--err) 8%,var(--raise))}
.errcard p{margin:0}

/* approval tray: pinned above the composer, outside the message list */
.tray{display:grid;gap:10px;padding:12px 14px;border-top:2px solid var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--raise))}
.tray .ah{display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:600}
.tray .src{min-height:44px;padding:0 4px;border:0;background:none;font:500 .8rem var(--mono);color:var(--accent-ink);text-decoration:underline;cursor:pointer}
.tray pre{margin:0;max-height:30vh;overflow:auto;padding:10px 12px;border-radius:10px;background:var(--ground);font:500 .82rem/1.45 var(--mono);white-space:pre-wrap;word-break:break-all}
.tray .desc{margin:0;color:var(--ink-2);font-size:.9rem}
.tray .more{margin-right:auto;color:var(--ink-3);font-size:.85rem}
.ab{display:flex;gap:8px;justify-content:flex-end;align-items:center}

/* composer */
.composer{display:grid;gap:6px;padding:8px;padding-bottom:max(8px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--raise)}
.composer .row{display:flex;align-items:flex-end;gap:4px}
.composer textarea{flex:1;min-height:44px;max-height:40vh;resize:none;padding:11px 14px;border:1px solid var(--line);border-radius:22px;background:var(--ground);line-height:1.35}
.send{flex:none;width:44px;height:44px;border:0;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;cursor:pointer}
.send svg{width:18px;height:18px;fill:currentColor}
.attachments{display:flex;flex-wrap:wrap;gap:6px}
.attachments:empty{display:none}
.chip{display:inline-flex;align-items:center;gap:2px;padding:0 0 0 12px;border:1px solid var(--line);border-radius:999px;background:var(--ground);font-size:.85rem}
.chip button{width:44px;height:36px;border:0;background:none;color:var(--ink-2);cursor:pointer}

/* drawer */
.drawer{display:flex;flex-direction:column;gap:4px;padding:8px 10px;padding-top:max(8px,env(safe-area-inset-top));overflow-y:auto;background:var(--raise);border-right:1px solid var(--line)}
.drawer-head{display:flex;align-items:center;gap:8px;min-height:44px;padding-left:4px;font-size:1.05rem}
.newchat{display:flex;align-items:center;gap:8px;min-height:44px;margin:4px 0 8px;padding:0 14px;border:1px dashed var(--line);border-radius:var(--r-card);background:transparent;font-weight:600;cursor:pointer}
.dl{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 10px;align-items:center;width:100%;min-height:44px;padding:10px 12px;border:1px solid transparent;border-radius:var(--r-card);background:none;text-align:left;cursor:pointer}
.dl[aria-current="true"]{background:var(--ground);border-color:var(--line)}
.dl .dot{grid-row:span 2;width:10px;height:10px;border-radius:50%;background:var(--line)}
.dl .dot.on{background:var(--accent)}
.dl strong{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl small{grid-column:2;color:var(--ink-3);font-size:.8rem}
.dl time{color:var(--ink-3);font:500 .75rem/1 var(--mono)}
.dh{margin:14px 12px 6px;color:var(--ink-3);font-size:.8rem;font-weight:600}
.scrim{display:none}
.stage{display:none}

@media (max-width:899px){
  .drawer{position:fixed;inset:0 auto 0 0;z-index:10;width:min(320px,86vw);transform:translateX(-100%);transition:transform .2s ease}
  .app.drawer-open .drawer{transform:none}
  .app.drawer-open .scrim{display:block;position:fixed;inset:0;z-index:9;background:var(--scrim)}
  .only-desktop{display:none!important}
}
@media (min-width:900px){
  .app{grid-template-columns:280px minmax(0,1fr) 320px}
  .only-phone{display:none!important}
  .stage{display:grid;place-items:center;padding:24px;border-left:1px solid var(--line);background:radial-gradient(90% 60% at 50% 35%,var(--stage-hi),var(--stage) 75%)}
}
@media (prefers-reduced-motion: reduce){.drawer{transition:none}}

/* ---- Bolt: lines 113-282 of design/bolt-mockup.html, appended unchanged below ---- */
/* paints: shell, limbs, screen and shadows are SVG gradients set on the shapes; CSS only colors the lights */
.g{fill:var(--glow)} .sg{stroke:var(--glow)} .nf{fill:none}
.st{stroke:rgba(14,20,52,.18);stroke-width:1}
.sg,.nf{stroke-linecap:round;stroke-linejoin:round}
.gs{stop-color:var(--glow)}
.ant{fill:var(--glow)}
.chest{fill:var(--glow);animation:pulse calc(2s*var(--spd)) ease-in-out infinite}
.earl{fill:var(--glow)}
.e1{animation:pulse calc(2.4s*var(--spd)) ease-in-out infinite}
.e2{animation:pulse calc(2.4s*var(--spd)) ease-in-out infinite;animation-delay:calc(1.2s*var(--spd))}
.thrust{transform-box:fill-box;transform-origin:center;animation:thrust calc(.5s*var(--spd)) ease-in-out infinite alternate}
.scanline{fill:var(--glow);opacity:.08;animation:scanl calc(3s*var(--spd)) linear infinite}
.beam{fill:var(--glow);opacity:.45;animation:beam calc(1.6s*var(--spd)) ease-in-out infinite alternate}
.tint{fill:var(--err);opacity:.15;animation:tint calc(.9s*var(--spd)) ease-in-out infinite}
.gl{fill:var(--err);opacity:.55}
.gl1{animation:glitch calc(.6s*var(--spd)) steps(3) infinite}
.gl2{animation:glitch calc(.45s*var(--spd)) steps(3) infinite reverse}
.keys{fill:none;stroke:var(--c-line);stroke-width:4;stroke-dasharray:5 3;opacity:.35}
.mag-lens{fill:rgba(108,182,255,.22);stroke-width:3.5}
.waves{fill:none;stroke:var(--ink-3);stroke-width:3;stroke-linecap:round}
.gear{transform-box:fill-box;transform-origin:center}
.rays{fill:none;stroke:var(--spark);stroke-width:3;stroke-linecap:round;animation:pulse calc(.5s*var(--spd)) steps(2) infinite}
.fizz{fill:none;stroke:var(--err);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;animation:pulse calc(.25s*var(--spd)) steps(2) infinite}
.c1{fill:var(--spark)} .c2{fill:var(--glow)} .c3{fill:var(--pink)} .c4{fill:var(--info)} .c5{fill:var(--ok)}

/* which parts show in which state */
[data-show]{display:none}
[data-state="idle"] [data-show~="idle"],
[data-state="listening"] [data-show~="listening"],
[data-state="thinking"] [data-show~="thinking"],
[data-state="searching"] [data-show~="searching"],
[data-state="running"] [data-show~="running"],
[data-state="done"] [data-show~="done"],
[data-state="error"] [data-show~="error"],
[data-state="asking"] [data-show~="asking"]{display:inline}

/* pivots, in Bolt's own 200x200 coordinates */
.popper,.bot{transform-box:view-box;transform-origin:100px 176px}
.head{transform-box:view-box;transform-origin:100px 130px}
.antenna{transform-box:view-box;transform-origin:100px 54px}
.armL{transform-box:view-box;transform-origin:58px 141px}
.armR{transform-box:view-box;transform-origin:142px 141px}
.blink,.spin,.conf,.smoke{transform-box:fill-box;transform-origin:center}

/* always on */
.float{animation:float calc(2.8s*var(--spd)) ease-in-out infinite}
.sh{transform-box:fill-box;transform-origin:center;animation:shadow calc(2.8s*var(--spd)) ease-in-out infinite}
.popper.pop{animation:popk .42s ease-out}

/* idle */
[data-state="idle"] .head{animation:idleHead calc(6s*var(--spd)) ease-in-out infinite}
[data-state="idle"] .antenna{animation:antSway calc(2.4s*var(--spd)) ease-in-out infinite}
[data-state="idle"] .armL{animation:swingL calc(2.8s*var(--spd)) ease-in-out infinite}
[data-state="idle"] .armR{animation:swingR calc(2.8s*var(--spd)) ease-in-out infinite}
.glance{animation:glance calc(7s*var(--spd)) ease-in-out infinite}
.blink{animation:blink calc(4.5s*var(--spd)) infinite}

/* listening */
[data-state="listening"] .head{animation:listenHead calc(1.6s*var(--spd)) ease-in-out infinite}
[data-state="listening"] .antenna{animation:antListen calc(1.2s*var(--spd)) ease-in-out infinite}
[data-state="listening"] .armL{transform:rotate(14deg)}
[data-state="listening"] .armR{transform:rotate(-14deg)}
[data-state="listening"] .earl{animation-duration:calc(.5s*var(--spd))}
.blush{fill:var(--pink);opacity:.55}
.w1,.w2{animation:wave calc(1.2s*var(--spd)) ease-in-out infinite}.w2{animation-delay:.3s}

/* thinking */
[data-state="thinking"] .head{animation:thinkHead calc(3s*var(--spd)) ease-in-out infinite}
[data-state="thinking"] .antenna{animation:antSway calc(3s*var(--spd)) ease-in-out infinite}
[data-state="thinking"] .armR{animation:chin calc(1s*var(--spd)) ease-in-out infinite}
[data-state="thinking"] .armL{transform:rotate(4deg)}
[data-state="thinking"] .ant{fill:var(--spark);animation:pulse calc(1s*var(--spd)) ease-in-out infinite}
.look{animation:look calc(2.4s*var(--spd)) ease-in-out infinite}
.spin{stroke-dasharray:22 16;animation:spin calc(1s*var(--spd)) linear infinite}
.g1{animation:spin calc(3s*var(--spd)) linear infinite}
.g2{animation:spin calc(2s*var(--spd)) linear infinite reverse}

/* searching */
[data-state="searching"] .head{animation:searchHead calc(1.6s*var(--spd)) ease-in-out infinite alternate}
[data-state="searching"] .antenna{animation:antSearch calc(1.6s*var(--spd)) ease-in-out infinite alternate}
[data-state="searching"] .armR{animation:sweepArm calc(1.6s*var(--spd)) ease-in-out infinite alternate}
[data-state="searching"] .armL{animation:swingL calc(1.6s*var(--spd)) ease-in-out infinite}
[data-state="searching"] .ant{fill:var(--info);animation:pulse calc(.6s*var(--spd)) steps(2) infinite}
.scan2{animation:scan2 calc(1.6s*var(--spd)) ease-in-out infinite alternate}

/* running */
[data-state="running"] .head{animation:runHead calc(.3s*var(--spd)) ease-in-out infinite alternate}
[data-state="running"] .antenna{animation:antBuzz calc(.12s*var(--spd)) linear infinite alternate}
[data-state="running"] .armL{animation:typeL calc(.22s*var(--spd)) ease-in-out infinite alternate}
[data-state="running"] .armR{animation:typeR calc(.22s*var(--spd)) ease-in-out infinite alternate;animation-delay:calc(.11s*var(--spd))}
[data-state="running"] .ant{fill:var(--ok);animation:pulse calc(.35s*var(--spd)) steps(2) infinite}
[data-state="running"] .earl{animation-duration:calc(.3s*var(--spd))}
.code{opacity:.75;animation:code calc(1.1s*var(--spd)) linear infinite}

/* asking: waiting for the user's OK */
[data-state="asking"] .head{animation:askHead calc(2.4s*var(--spd)) ease-in-out infinite}
[data-state="asking"] .antenna{animation:antSway calc(1.6s*var(--spd)) ease-in-out infinite}
[data-state="asking"] .armR{transform:rotate(-135deg);animation:raise calc(.8s*var(--spd)) ease-in-out infinite alternate}
[data-state="asking"] .armL{transform:rotate(6deg)}
[data-state="asking"] .ant{fill:var(--spark);animation:pulse calc(.8s*var(--spd)) steps(2) infinite}
.bubble{transform-box:fill-box;transform-origin:15% 100%;animation:bubble calc(1.6s*var(--spd)) ease-in-out infinite}
.qmark{font:700 22px var(--display);fill:#C98A12}

/* done */
[data-state="done"] .bot{animation:jump calc(1.2s*var(--spd)) ease-out infinite}
[data-state="done"] .head{animation:wiggle calc(.4s*var(--spd)) ease-in-out infinite alternate}
[data-state="done"] .antenna{animation:boing calc(1.2s*var(--spd)) ease-out infinite}
[data-state="done"] .armL{animation:cheerL calc(.4s*var(--spd)) ease-in-out infinite alternate}
[data-state="done"] .armR{animation:cheerR calc(.4s*var(--spd)) ease-in-out infinite alternate}
[data-state="done"] .ant{fill:var(--ok)}
.conf{animation:conf calc(1.2s*var(--spd)) ease-out infinite}

/* error */
[data-state="error"] .head{animation:glitchHead calc(1.8s*var(--spd)) steps(1) infinite}
[data-state="error"] .antenna{animation:droop calc(.25s*var(--spd)) linear infinite alternate}
[data-state="error"] .armL{transform:rotate(-3deg) translateY(2px)}
[data-state="error"] .armR{transform:rotate(3deg) translateY(2px)}
[data-state="error"] .bot{transform:translateY(3px)}
[data-state="error"] .ant{fill:var(--err);animation:pulse calc(.5s*var(--spd)) steps(2) infinite}
[data-state="error"] .g,[data-state="error"] .earl,[data-state="error"] .chest{fill:var(--err)}
[data-state="error"] .sg{stroke:var(--err)}
[data-state="error"] .gs{stop-color:var(--err)}
.smoke{animation:smoke calc(1.8s*var(--spd)) ease-out infinite}
.s2{animation-delay:calc(.6s*var(--spd))}.s3{animation-delay:calc(1.2s*var(--spd))}

@keyframes float{50%{transform:translateY(calc(-6px*var(--amp)))}}
@keyframes shadow{50%{transform:scale(.85);opacity:.7}}
@keyframes popk{0%{transform:scale(1)}35%{transform:scale(1.07,.93)}70%{transform:scale(.97,1.03)}100%{transform:scale(1)}}
@keyframes pulse{50%{opacity:.3}}
@keyframes thrust{from{opacity:.4;transform:scaleX(.85)}to{opacity:.9;transform:scaleX(1.05)}}
@keyframes scanl{from{transform:translateY(0)}to{transform:translateY(56px)}}
@keyframes blink{0%,90%,100%{transform:scaleY(1)}94%{transform:scaleY(.1)}}
@keyframes glance{0%,30%,100%{transform:translateX(0)}38%,48%{transform:translateX(-5px)}56%,66%{transform:translateX(5px)}74%{transform:translateX(0)}}
@keyframes idleHead{0%,55%,100%{transform:rotate(0)}65%,82%{transform:rotate(calc(7deg*var(--amp)))}}
@keyframes antSway{0%,100%{transform:rotate(calc(-7deg*var(--amp)))}50%{transform:rotate(calc(7deg*var(--amp)))}}
@keyframes swingL{0%,100%{transform:rotate(calc(3deg*var(--amp)))}50%{transform:rotate(calc(-9deg*var(--amp)))}}
@keyframes swingR{0%,100%{transform:rotate(calc(-3deg*var(--amp)))}50%{transform:rotate(calc(9deg*var(--amp)))}}
@keyframes listenHead{0%,100%{transform:rotate(calc(-8deg*var(--amp)))}50%{transform:rotate(calc(-4deg*var(--amp))) translateY(1px)}}
@keyframes antListen{0%,100%{transform:rotate(calc(-18deg*var(--amp)))}50%{transform:rotate(calc(-11deg*var(--amp)))}}
@keyframes wave{0%,100%{opacity:.15}50%{opacity:1}}
@keyframes thinkHead{0%,100%{transform:rotate(calc(4deg*var(--amp)))}50%{transform:rotate(calc(9deg*var(--amp)))}}
@keyframes chin{0%,100%{transform:rotate(146deg)}50%{transform:rotate(156deg)}}
@keyframes look{0%,100%{transform:translate(-3px,0)}25%{transform:translate(0,-2px)}50%{transform:translate(3px,0)}75%{transform:translate(0,2px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes searchHead{from{transform:rotate(calc(-5deg*var(--amp)))}to{transform:rotate(calc(5deg*var(--amp)))}}
@keyframes antSearch{from{transform:rotate(calc(-18deg*var(--amp)))}to{transform:rotate(calc(18deg*var(--amp)))}}
@keyframes sweepArm{from{transform:rotate(-50deg)}to{transform:rotate(-80deg)}}
@keyframes scan2{from{transform:translateX(-5px)}to{transform:translateX(5px)}}
@keyframes beam{to{transform:translateX(84px)}}
@keyframes runHead{from{transform:rotate(calc(2deg*var(--amp)))}to{transform:rotate(calc(-1deg*var(--amp))) translateY(1px)}}
@keyframes antBuzz{from{transform:rotate(calc(-3deg*var(--amp)))}to{transform:rotate(calc(3deg*var(--amp)))}}
@keyframes typeL{from{transform:rotate(-30deg)}to{transform:rotate(-20deg)}}
@keyframes typeR{from{transform:rotate(30deg)}to{transform:rotate(20deg)}}
@keyframes code{to{transform:translateY(-18px)}}
@keyframes jump{0%{transform:translateY(0) scale(1)}25%{transform:translateY(calc(-22px*var(--amp))) scale(.96,1.05)}50%{transform:translateY(0) scale(1.06,.93)}62%,100%{transform:translateY(0) scale(1)}}
@keyframes wiggle{from{transform:rotate(calc(-7deg*var(--amp)))}to{transform:rotate(calc(7deg*var(--amp)))}}
@keyframes boing{0%{transform:rotate(0)}15%{transform:rotate(calc(22deg*var(--amp)))}30%{transform:rotate(calc(-15deg*var(--amp)))}45%{transform:rotate(calc(9deg*var(--amp)))}60%{transform:rotate(calc(-5deg*var(--amp)))}75%,100%{transform:rotate(0)}}
@keyframes cheerL{from{transform:rotate(120deg)}to{transform:rotate(145deg)}}
@keyframes cheerR{from{transform:rotate(-120deg)}to{transform:rotate(-145deg)}}
@keyframes conf{0%{transform:translate(0,0) scale(.3) rotate(0);opacity:0}10%{opacity:1}55%{transform:translate(calc(var(--dx)*var(--amp)),calc(var(--dy)*var(--amp))) rotate(var(--r));opacity:1}100%{transform:translate(calc(var(--dx)*var(--amp)*1.2),calc(var(--dy)*var(--amp) + 46px)) rotate(calc(var(--r)*2));opacity:0}}
@keyframes glitchHead{0%{transform:translateX(0)}5%{transform:translateX(calc(-4px*var(--amp)))}10%{transform:translateX(calc(4px*var(--amp)))}15%{transform:translateX(calc(-2px*var(--amp)))}20%,100%{transform:translateX(0) rotate(calc(-3deg*var(--amp)))}}
@keyframes droop{from{transform:rotate(30deg)}to{transform:rotate(34deg)}}
@keyframes tint{0%,100%{opacity:.08}50%{opacity:.22}}
@keyframes glitch{0%{transform:translateX(-6px)}50%{transform:translateX(5px)}100%{transform:translateX(-2px)}}
@keyframes askHead{0%,100%{transform:rotate(calc(5deg*var(--amp)))}50%{transform:rotate(calc(9deg*var(--amp)))}}
@keyframes raise{from{transform:rotate(-125deg)}to{transform:rotate(-150deg)}}
@keyframes bubble{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(calc(-4px*var(--amp))) rotate(calc(-5deg*var(--amp)))}}
@keyframes smoke{0%{transform:translate(0,0) scale(.6);opacity:0}20%{opacity:.8}100%{transform:translate(8px,-26px) scale(2.4);opacity:0}}

@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important}}