:root{--bg: #FAF7F0;
  --bg-2: #F3EEE3;
  --dot: #E7E0D2;
  --card: #FFFFFF;
  --card-2: #FFFDF9;
  --ink: #1D1B18;
  --ink-2: #45413A;
  --muted: #6B6458;
  --line: #EAE3D6;
  --line-2: #D8CFBF;
  --accent: #2A41E8;
  --accent-2: #1A2BB0;
  --accent-soft: #E7EAFF;
  --good: #116B32;
  --good-soft: #DCF5E5;
  --warn: #8A4108;   /* one step darker than before: the old value was 4.47:1 on its soft tint, just under AA */
  --warn-soft: #FFF0D6;
  --bad: #A3360A;
  --bad-soft: #FFE6DB;
  --hl: #FFE58A;
  --av-line: #1D1B18;
  --shadow-sm: 0 1px 2px rgba(29, 27, 24, .06);
  --shadow: 0 1px 2px rgba(29, 27, 24, .05), 0 10px 30px -14px rgba(29, 27, 24, .22);
  --shadow-lg: 0 2px 6px rgba(29, 27, 24, .06), 0 28px 60px -24px rgba(29, 27, 24, .35);
  /* The comic-ink offset must stay dark in both themes. It used to resolve var(--ink),
     which flips to cream in dark mode, so every hard shadow became a pale glow. */
  --ink-edge: #1D1B18;
  --ink-shadow: 3px 3px 0 var(--ink-edge);
  --r: 20px;
  --r-sm: 14px;
  --r-xs: 10px;
  --side: 264px;
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Bricolage Grotesque", "Inter", ui-sans-serif, system-ui, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: light;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg: #141311; --bg-2: #1B1A17; --dot: #26241F; --card: #1F1D1A; --card-2: #23211D;
    --ink: #F4F0E8; --ink-2: #D6CFC2; --muted: #A09887; --line: #2F2C27; --line-2: #3E3A33;
    --accent: #7D8BFF; --accent-2: #5A69F0; --accent-soft: #252A52;
    --good: #4ADE80; --good-soft: #173424; --warn: #FBBF24; --warn-soft: #3A2C10; --bad: #FB923C; --bad-soft: #3B2114;
    --hl: #6B5A12;
    --ink-edge: #0A0908;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -14px rgba(0, 0, 0, .7);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, .4), 0 28px 60px -24px rgba(0, 0, 0, .8);
    color-scheme: dark;}}
:root[data-theme="dark"]{--bg: #141311; --bg-2: #1B1A17; --dot: #26241F; --card: #1F1D1A; --card-2: #23211D;
  --ink: #F4F0E8; --ink-2: #D6CFC2; --muted: #A09887; --line: #2F2C27; --line-2: #3E3A33;
  --accent: #7D8BFF; --accent-2: #5A69F0; --accent-soft: #252A52;
  --good: #4ADE80; --good-soft: #173424; --warn: #FBBF24; --warn-soft: #3A2C10; --bad: #FB923C; --bad-soft: #3B2114;
  --hl: #6B5A12;
  --ink-edge: #0A0908;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -14px rgba(0, 0, 0, .7);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, .4), 0 28px 60px -24px rgba(0, 0, 0, .8);
  color-scheme: dark;}
*,*::before,*::after{box-sizing: border-box;}
html{-webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px;}
body{margin: 0; background: var(--bg); color: var(--ink);
  font: 400 15px/1.55 var(--font); letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;}
img,svg{display: block;}
a{color: inherit; text-decoration: none;}
button,input,select,textarea{font: inherit; color: inherit;}
button{cursor: pointer; background: none; border: 0; padding: 0;}
button:disabled{cursor: not-allowed;}
h1,h2,h3,h4{margin: 0; line-height: 1.2; letter-spacing: -.015em;}
h2{font: 700 19px/1.25 var(--display);}
h3{font: 650 15px/1.3 var(--font);}
p{margin: 0;}
b,strong{font-weight: 650;}
small{font-size: 12.5px;}
kbd{font: 600 11px var(--font); padding: 2px 6px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--card); color: var(--muted);}
:focus-visible{outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 8px;}
[hidden]{display: none !important;}
.skip{position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--bg); padding: 8px 12px; border-radius: 10px; z-index: 100;}
.skip:focus{left: 8px;}
.sr-only{position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;}
.muted{color: var(--muted);}
.small{font-size: 13px;}
.nowrap{white-space: nowrap;}
.grow{flex: 1; min-width: 0;}
.i{width: 18px; height: 18px; flex: none;}
.display{font: 800 clamp(28px, 3.4vw, 44px)/1.05 var(--display); letter-spacing: -.03em; text-wrap: balance;}
.eyebrow{font: 600 12px/1.4 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap;}
.lede{font-size: 16.5px; line-height: 1.55; color: var(--ink-2); max-width: 60ch;}
.hl{background: linear-gradient(transparent 58%, var(--hl) 58%, var(--hl) 92%, transparent 92%); padding: 0 .08em;}
.count{display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; margin-left: 6px; border-radius: 99px; background: var(--bg-2); color: var(--ink-2); font: 650 12px var(--font); vertical-align: 3px;}
.link{color: var(--accent); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 4px;}
.link .i{width: 15px; height: 15px; transition: transform .2s var(--ease);}
.link:hover .i{transform: translateX(3px);}
.hint{color: var(--ink-2); margin-bottom: 14px;}
.btn{--b: var(--card); --c: var(--ink); --edge: var(--line-2);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 16px; border-radius: 12px;
  background: var(--b); color: var(--c); border: 1.5px solid var(--edge);
  font-weight: 600; font-size: 14.5px; white-space: nowrap;
  box-shadow: 0 2px 0 var(--edge);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), background .2s;}
.btn:hover{transform: translateY(-1px); box-shadow: 0 3px 0 var(--edge);}
.btn:active{transform: translateY(2px); box-shadow: 0 0 0 var(--edge);}
.btn:disabled,.btn[aria-disabled="true"]{opacity: .55; transform: none; box-shadow: 0 2px 0 var(--edge);}
.btn .i{width: 17px; height: 17px;}
.btn-primary{--b: var(--accent); --c: #fff; --edge: var(--accent-2);}
.btn-soft{--b: var(--accent-soft); --c: var(--accent-2); --edge: color-mix(in srgb, var(--accent) 30%, transparent);}
:root[data-theme="dark"] .btn-soft{--c: #C9CFFF;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn-soft{--c: #C9CFFF;}}
.btn-ghost{--b: transparent; --edge: transparent; box-shadow: none;}
.btn-ghost:hover{background: var(--bg-2); box-shadow: none;}
.btn-sm{min-height: 32px; padding: 0 12px; font-size: 13.5px; border-radius: 10px;}
.btn-lg{min-height: 46px; padding: 0 20px; font-size: 15.5px; border-radius: 14px;}
.btn-xl{min-height: 56px; padding: 0 26px; font-size: 17px; border-radius: 16px;}
.icon-btn{display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--ink-2); position: relative; transition: background .2s; flex: none;}
.icon-btn:hover{background: var(--bg-2); color: var(--ink);}
.tag{display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; font: 650 11px var(--font); font-style: normal; letter-spacing: .02em; white-space: nowrap; background: var(--bg-2); color: var(--ink-2);}
.tag-rec{background: var(--accent-soft); color: var(--accent);}
.tag-soon{background: var(--bg-2); color: var(--muted);}
.pill{font-style: normal; margin-left: auto; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 99px; background: #C2410C; color: #fff; font: 700 11.5px/20px var(--font); text-align: center;}
.chips{display: flex; gap: 6px; flex-wrap: wrap;}
.chip{height: 34px; padding: 0 13px; border-radius: 99px; border: 1.5px solid var(--line-2); background: var(--card); font-weight: 600; font-size: 13.5px; color: var(--ink-2); transition: all .15s;}
.chip:hover{border-color: var(--ink-2);}
.chip.is-on{background: var(--ink); color: var(--bg); border-color: var(--ink);}
.seg{display: inline-flex; padding: 4px; gap: 2px; border-radius: 13px; background: var(--bg-2); border: 1px solid var(--line); flex-wrap: wrap;}
.seg button{display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 10px; font-weight: 600; font-size: 14px; color: var(--muted); transition: all .2s var(--ease);}
.seg button .i{width: 16px; height: 16px;}
.seg button.is-on{background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm), 0 0 0 1px var(--line);}
.state{display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted);}
.state i{width: 8px; height: 8px; border-radius: 50%; background: currentColor;}
.state-found{color: var(--good);}
.state-sleep{color: var(--muted);}
.state-sleep i{background: transparent; box-shadow: inset 0 0 0 2px currentColor;}
@keyframes live{ 0% { transform: scale(1); opacity: .5; } 70%, 100% { transform: scale(2.75); opacity: 0; } }
@keyframes ping{ 50% { opacity: .35; transform: scale(.8); } }
.av{width: 100%; height: auto; overflow: visible;}
.av .mo,.av .fx,.av .av-tool,.av .av-hat,.av .av-sweat,.av .av-talk{display: none;}
.av.av-fixed .av-tool,.av.av-fixed .av-hat,.av.av-fixed .av-sweat{display: inline;}
.av[data-mood="idle"] .mo[data-m~="idle"],.av[data-mood="work"] .mo[data-m~="work"],.av[data-mood="found"] .mo[data-m~="found"],.av[data-mood="need"] .mo[data-m~="need"],.av[data-mood="party"] .mo[data-m~="party"],.av[data-mood="sleep"] .mo[data-m~="sleep"],.av[data-mood="hello"] .mo[data-m~="hello"],.av[data-mood="wow"] .mo[data-m~="wow"],.av[data-mood="giggle"] .mo[data-m~="giggle"],.av[data-mood="grumpy"] .mo[data-m~="grumpy"],.av[data-mood="think"] .mo[data-m~="think"],.av[data-mood="proud"] .mo[data-m~="proud"],.av[data-mood="oops"] .mo[data-m~="oops"]{display: inline;}
.av[data-mood="found"] .fx-found,.av[data-mood="need"] .fx-need,.av[data-mood="sleep"] .fx-sleep,.av[data-mood="party"] .fx-party,.av[data-mood="work"] .av-tool,.av[data-mood="party"] .av-hat,.av[data-mood="need"] .av-sweat,.av[data-mood="oops"] .av-sweat{display: inline;}
.av.has-emote .fx-need{display: none;}
.av .fx path,.av .fx rect,.av .fx circle{fill: #FFD66B; stroke: #1D1B18; stroke-width: 14;}
.av .fx-need > circle:first-child{fill: #FF7A59;}
.av .fx-need .fx-ink{fill: none; stroke: #fff; stroke-width: 36; stroke-linecap: round;}
.av .fx-need .fx-dot{fill: #fff; stroke: none;}
.av .fx-sleep text{font: 800 200px var(--display); fill: #6A3F9E;}
.av .fx-party .c1{fill: #FF9EC4;}
.av .fx-party .c2{fill: #93B8FF;}
.av .fx-party .c3{fill: #FFD66B;}
.av .fx-party .c4{fill: #7FD9A9;}
.av .fx-party .c5{fill: #B9A0FF;}
.av .av-cheeks{opacity: .85; transition: opacity .3s;}
.av[data-mood="giggle"] .av-cheeks,.av[data-mood="party"] .av-cheeks,.av[data-mood="hello"] .av-cheeks{opacity: 1;}
.av[data-mood="grumpy"] .av-cheeks{opacity: 0;}
.av .av-shine circle{fill: #fff;}
.av .av-cheeks.is-soft{opacity: 0;}
.av[data-mood="hello"] .av-cheeks.is-soft,.av[data-mood="giggle"] .av-cheeks.is-soft,.av[data-mood="party"] .av-cheeks.is-soft,.av[data-mood="found"] .av-cheeks.is-soft{opacity: .6;}
.av .av-bob{transform-box: view-box; transform-origin: 872px 1500px;}
.av .av-look,.av .av-tilt{transform-box: view-box; transform-origin: 872px 1130px;}
.av .av-arms{transform-box: view-box; transform-origin: 1180px 1320px;}
.av .av-eyes{transform-box: fill-box; transform-origin: center;}
.av .av-look{transform: rotate(calc(var(--hr, 0) * 1deg)); transition: transform .45s var(--ease);}
.av .av-gaze{transform: translate(calc(var(--gx, 0) * 1px), calc(var(--gy, 0) * 1px)); transition: transform .22s var(--ease);}
.av .av-tool .tool-in{transform-box: fill-box; transform-origin: center;}
.av .av-emote{opacity: 0; pointer-events: none;}
.av .av-emote .em-in{transform-box: view-box; transform-origin: 1250px 540px;}
.av .em-text{font: 800 190px var(--display);}
.av.is-talking .av-mouth{display: none;}
.av.is-talking .av-talk{display: inline;}
.av.is-talking .tk-shut{animation: talkShut .3s steps(1) infinite;}
.av.is-talking .tk-open{animation: talkOpen .3s steps(1) infinite;}
@keyframes talkOpen{ 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes talkShut{ 0% { opacity: 0; } 50% { opacity: 1; } }
.av[data-mood="sleep"]{filter: saturate(.45);}
[data-poke]{cursor: pointer;}
[data-poke] .av{cursor: pointer;}
[data-poke]{-webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation;}
.cc-av,.ni-av,.quick-av,.sb-av{display: block; flex: none; border-radius: 50%; overflow: hidden; aspect-ratio: 1;
  background: var(--soft, #FFF4D1); border: 2px solid var(--av-line);}
:root[data-theme="dark"] .cc-av{--av-line: #0C0B0A;}
@media (prefers-reduced-motion: no-preference){.av:not(.is-live):not(.av-fixed) .av-eyes{animation: blink 5.6s infinite;}
.av[data-mood="idle"] .av-bob{animation: breathe 5s ease-in-out infinite; animation-delay: var(--ph, 0s);}
.av[data-mood="work"] .av-tilt{animation: think 2.8s ease-in-out infinite;}
.av[data-mood="found"] .fx-found path{transform-box: fill-box; transform-origin: center; animation: twinkle 1.8s ease-in-out infinite;}
.av[data-mood="found"] .fx-found path:nth-child(2){animation-delay: .4s;}
.av[data-mood="found"] .fx-found path:nth-child(3){animation-delay: .8s;}
.av[data-mood="found"] .av-bob{animation: perk 2.4s ease-in-out infinite;}
.av[data-mood="need"] .av-arms,.av[data-mood="hello"] .av-arms{animation: wave 1.2s ease-in-out infinite;}
.av[data-mood="need"] .av-sweat,.av[data-mood="oops"] .av-sweat{transform-box: fill-box; transform-origin: top; animation: drip 2.2s ease-in infinite;}
.av[data-mood="party"] .av-bob{animation: hop .9s ease-in-out infinite;}
.av[data-mood="party"] .av-hat{transform-box: fill-box; transform-origin: bottom; animation: hatWobble .9s ease-in-out infinite;}
.av[data-mood="party"] .fx-party > *{transform-box: fill-box; transform-origin: center; animation: confetti 1.8s ease-in-out infinite;}
.av[data-mood="party"] .fx-party > *:nth-child(2n){animation-delay: -.6s;}
.av[data-mood="party"] .fx-party > *:nth-child(3n){animation-delay: -1.2s;}
.av[data-mood="sleep"] .av-bob{animation: snooze 4s ease-in-out infinite;}
.av[data-mood="sleep"] .fx-sleep text{animation: zz 3.2s ease-in-out infinite;}
.av[data-mood="sleep"] .fx-sleep text:nth-child(2){animation-delay: .5s;}
.av[data-mood="sleep"] .fx-sleep text:nth-child(3){animation-delay: 1s;}
.av[data-mood="giggle"] .av-bob{animation: giggle .35s ease-in-out 3;}
.av[data-mood="wow"] .av-bob{animation: jolt .45s var(--spring);}
.av[data-mood="grumpy"] .av-tilt{animation: shake .5s ease-in-out 2;}
.av[data-mood="think"] .av-tilt{animation: thinkOnce 3.2s ease-in-out infinite;}
.av[data-mood="proud"] .av-bob{animation: perk 2.8s ease-in-out infinite;}
.av[data-mood="oops"] .av-tilt{animation: shake .45s ease-in-out 3;}
.av .av-brows{transition: transform .25s var(--ease);}
[data-poke]:hover .av-brows,[data-av-host]:hover .av-brows{transform: translateY(-6px);}
.av[data-mood="hello"] .av-bob{animation: perk 1.2s ease-in-out;}
.av[data-mood="work"] .av-tool[data-motion="bob"] .tool-in{animation: toolBob 1.6s ease-in-out infinite;}
.av[data-mood="work"] .av-tool[data-motion="sweep"] .tool-in{animation: toolSweep 2.2s ease-in-out infinite;}
.av[data-mood="work"] .av-tool[data-motion="scribble"] .tool-in{animation: toolScribble .5s ease-in-out infinite;}
.av[data-mood="work"] .av-tool[data-motion="fly"] .tool-in{animation: toolFly 2.4s ease-in-out infinite;}
.av[data-mood="work"] .av-tool[data-motion="spin"] .tool-in{animation: toolSpin 3s linear infinite;}
.av[data-mood="work"] .av-tool[data-motion="pulse"] .tool-in{animation: toolPulse 1.3s ease-in-out infinite;}
.av.h-blink .av-eyes{animation: blinkOnce .26s ease-in-out;}
.av.h-blink2 .av-eyes{animation: blinkTwice .62s ease-in-out;}
.av.h-nod .av-tilt{animation: nod .9s ease-in-out;}
.av.h-tilt .av-tilt{animation: tiltHead 1.6s ease-in-out;}
.av.h-sway .av-tilt{animation: sway 2.2s ease-in-out;}
.av.h-hop .av-bob{animation: hopOnce .7s var(--spring);}
.av.h-lookup .av-tilt{animation: lookUp 1.6s ease-in-out;}
.av.h-think .av-tilt{animation: thinkOnce 2s ease-in-out;}
.av.h-breathe .av-bob{animation: deepBreath 3.2s ease-in-out;}
.av.has-emote .av-emote{animation: emoteFade 1.9s ease forwards;}
.av.has-emote .av-emote .em-in{animation: emotePop 1.9s var(--spring) forwards;}
.av.is-changing .av-bob{animation: squash .48s var(--spring);}}
@keyframes blink{ 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
@keyframes blinkOnce{ 50% { transform: scaleY(.08); } }
@keyframes blinkTwice{ 20%, 70% { transform: scaleY(.08); } 45% { transform: scaleY(1); } }
@keyframes breathe{ 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(6px) scale(1.006, .994); } }
@keyframes deepBreath{ 0%, 100% { transform: scale(1); } 45% { transform: scale(1.025, 1.015) translateY(-6px); } }
@keyframes snooze{ 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(10px) rotate(-1.5deg); } }
@keyframes think{ 0%, 100% { transform: rotate(0); } 40% { transform: rotate(-3.5deg); } 70% { transform: rotate(1deg); } }
@keyframes thinkOnce{ 0%, 100% { transform: rotate(0); } 25%, 80% { transform: rotate(-5deg) translateY(-6px); } }
@keyframes perk{ 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-22px); } 45% { transform: translateY(0); } }
@keyframes wave{ 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(6deg); } }
@keyframes drip{ 0%, 60% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(60px) scale(.8); opacity: 0; } }
@keyframes hop{ 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-42px); } }
@keyframes hopOnce{ 0% { transform: translateY(0) scale(1, 1); } 20% { transform: translateY(0) scale(1.04, .95); } 50% { transform: translateY(-60px) scale(.98, 1.03); } 80% { transform: translateY(0) scale(1.03, .97); } 100% { transform: none; } }
@keyframes hatWobble{ 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(8deg); } }
@keyframes giggle{ 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-8px) rotate(-2deg); } 75% { transform: translateY(-4px) rotate(2deg); } }
@keyframes jolt{ 0% { transform: scale(1); } 30% { transform: scale(1.05, .94) translateY(10px); } 60% { transform: scale(.97, 1.05) translateY(-26px); } 100% { transform: none; } }
@keyframes shake{ 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
@keyframes nod{ 0%, 100% { transform: rotate(0) translateY(0); } 30% { transform: rotate(3deg) translateY(10px); } 60% { transform: rotate(-1deg) translateY(0); } }
@keyframes tiltHead{ 0%, 100% { transform: rotate(0); } 30%, 75% { transform: rotate(7deg); } }
@keyframes sway{ 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }
@keyframes lookUp{ 0%, 100% { transform: rotate(0); } 30%, 75% { transform: rotate(-4deg) translateY(-8px); } }
@keyframes squash{ 0% { transform: scale(1); } 35% { transform: scale(1.06, .92); } 70% { transform: scale(.97, 1.04); } 100% { transform: scale(1); } }
@keyframes emoteFade{ 0% { opacity: 0; } 8%, 82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes emotePop{ 0% { transform: scale(.2) rotate(-20deg); } 18% { transform: scale(1.1) rotate(4deg); } 30%, 82% { transform: scale(1) rotate(0); } 100% { transform: scale(.85) translateY(-30px); } }
@keyframes twinkle{ 0%, 100% { transform: scale(.6) rotate(0); opacity: .5; } 50% { transform: scale(1.15) rotate(20deg); opacity: 1; } }
@keyframes confetti{ 0% { transform: translateY(-30px) rotate(0); } 50% { transform: translateY(40px) rotate(160deg); } 100% { transform: translateY(-30px) rotate(360deg); } }
@keyframes zz{ 0% { opacity: 0; transform: translate(0, 30px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(40px, -60px); } }
@keyframes toolBob{ 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-30px) rotate(4deg); } }
@keyframes toolSweep{ 0%, 100% { transform: translate(-30px, 10px) rotate(-14deg); } 50% { transform: translate(40px, -20px) rotate(12deg); } }
@keyframes toolScribble{ 0%, 100% { transform: rotate(-8deg) translate(0, 0); } 50% { transform: rotate(6deg) translate(14px, 8px); } }
@keyframes toolFly{ 0% { transform: translate(-20px, 20px) rotate(-10deg); } 50% { transform: translate(30px, -40px) rotate(8deg); } 100% { transform: translate(-20px, 20px) rotate(-10deg); } }
@keyframes toolSpin{ to { transform: rotate(360deg); } }
@keyframes toolPulse{ 0%, 100% { transform: scale(.92); } 50% { transform: scale(1.08); } }
[data-say-host]{position: relative;}
.say-layer{position: absolute; top: 0; left: 0; width: 0; height: 0; z-index: 95; pointer-events: none;}
body.don-open .say-layer,body.menu-open .say-layer{display: none;}
.say{position: absolute; width: max-content; max-width: min(260px, calc(100vw - 24px));
  padding: 8px 12px; border-radius: 14px; background: var(--card); color: var(--ink); border: 1.5px solid var(--ink);
  box-shadow: var(--ink-shadow); font-size: 13px; font-weight: 600; line-height: 1.35; text-align: left;
  transform-origin: 50% 100%; transform: translateY(8px) scale(.92); opacity: 0; pointer-events: none;
  transition: opacity .2s var(--ease), transform .35s var(--spring);}
.say.is-on{opacity: 1; transform: none;}
.say.is-below{transform-origin: 50% 0; transform: translateY(-8px) scale(.92);}
.say.is-below.is-on{transform: none;}
.say::after{content: ""; position: absolute; left: clamp(14px, var(--ax, 50%), calc(100% - 14px)); bottom: -7px;
  width: 12px; height: 12px; background: var(--card); border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
  transform: translateX(-50%) rotate(45deg);}
.say.is-below::after{bottom: auto; top: -7px; border: 0; border-left: 1.5px solid var(--ink); border-top: 1.5px solid var(--ink);}
.say-name{display: block; font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .02em;}
.say-text{white-space: pre-wrap;}
.say.say-big{font-size: 15px; max-width: min(300px, calc(100vw - 24px)); padding: 12px 16px;}
.pop{position: absolute; z-index: 25; pointer-events: none; width: 16px; height: 16px; animation: popFly 1.2s var(--ease) forwards;}
@keyframes popFly{ 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 20% { opacity: 1; transform: translate(calc(var(--dx) * .2), calc(var(--dy) * .2)) scale(1.1); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.8) rotate(var(--rot)); } }
@keyframes plusUp{ 0% { opacity: 0; transform: translateY(10px); } 20% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-24px); } }
@keyframes kpiBump{ 40% { transform: scale(1.04); } }
.app{display: flex; min-height: 100vh;}
.side{position: sticky; top: 0; height: 100vh; width: var(--side); flex: none;
  display: flex; flex-direction: column; gap: 14px; padding: 16px 14px;
  background: var(--card); border-right: 1px solid var(--line);
  overflow-y: auto; overflow-x: hidden; z-index: 40;
  transition: width .25s var(--ease), transform .3s var(--ease);}
.brand{display: flex; align-items: center; gap: 9px; min-width: 0;}
.brand-mark{width: 34px; height: 34px; border-radius: 11px; background: var(--accent); color: #fff; display: grid; place-items: center; flex: none; box-shadow: 0 2px 0 var(--accent-2);}
.brand-mark svg{width: 24px; height: 24px;}
.brand-mark .brand-dot{fill: #FFD66B;}
.brand-mark.sm{width: 26px; height: 26px; border-radius: 8px;}
.brand-mark.sm svg{width: 18px; height: 18px;}
.brand-word{font: 800 19px var(--display); letter-spacing: -.03em;}
.site-dot{width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--c, #FFD66B); color: #1D1B18; font: 800 15px var(--display); border: 1.5px solid #1D1B18;}
.site-dot.big{width: 46px; height: 46px; border-radius: 14px; font-size: 20px;}
.site-dot .i{width: 15px;}
.menu{position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 6px; z-index: 50; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: all .18s var(--ease);}
.side-pool{padding: 10px 12px; border-radius: 14px; background: var(--bg-2); font-size: 13px; display: flex; flex-direction: column; gap: 7px;}
.side-pool > small{color: var(--muted); line-height: 1.35;}
.pool-for,.pool-note{overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.pool-row{display: flex; justify-content: space-between; align-items: baseline; gap: 8px; color: var(--ink-2);}
.pool-track{position: relative; padding-top: 20px;}
.pool-walker{position: absolute; top: -2px; left: clamp(0px, calc(var(--at) - 12px), calc(100% - 26px)); width: 26px; height: 26px; border-radius: 50%; overflow: hidden; background: #FFF4D1; border: 1.5px solid var(--av-line);}
.pool-walker .av{margin-top: 1px;}
@media (prefers-reduced-motion: no-preference){.pool-walker{animation: walkBob .7s ease-in-out infinite;}
.side-pool:hover .pool-walker{animation: walkBob .35s ease-in-out infinite;}}
@keyframes walkBob{ 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-3px) rotate(6deg); } }
.bar{height: 8px; border-radius: 99px; background: var(--line); overflow: hidden;}
.bar i{display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7FD9A9, var(--accent)); transition: width .8s var(--ease);}
.classic{display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; font-size: 13.5px; color: var(--muted); font-weight: 550;}
.classic:hover{background: var(--bg-2); color: var(--ink);}
.classic .i{width: 16px;}
.me{display: flex; flex-direction: column; gap: 6px; padding: 6px 8px; border-radius: 14px; border: 1px solid var(--line);}
.main{flex: 1; min-width: 0; display: flex; flex-direction: column;}
.top{position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px;
  height: 66px; padding: 0 28px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .2s;}
.top.is-scrolled{border-bottom-color: var(--line);}
.top-right{margin-left: auto; display: flex; align-items: center; gap: 8px;}
.sample-pill{display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 99px; background: var(--warn-soft); color: var(--warn); font-size: 12.5px; font-weight: 650; white-space: nowrap;}
.sample-pill .i{width: 15px;}
@media (max-width: 1000px){.sample-pill{padding: 0 8px;}
.sample-pill{padding: 0 8px;}}
@media (max-width: 800px){.top-start span{display: none;}
.top-start{padding: 0 11px;}}
.content{flex: 1; padding: 18px 28px 80px; max-width: 1440px; width: 100%; margin: 0 auto;}
.main{background-image: radial-gradient(var(--dot) 1px, transparent 1.2px); background-size: 24px 24px; background-attachment: fixed;}
.card{background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; box-shadow: var(--shadow-sm);}
.block{margin-top: 30px;}
.page-head{display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 18px 0 8px; flex-wrap: wrap;}
.page-head > div:first-child{display: flex; flex-direction: column; gap: 10px; max-width: 720px;}
.head-actions{display: flex; gap: 10px; flex-wrap: wrap;}
.back{display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 600; font-size: 14px; margin: 4px 0 10px;}
.back:hover{color: var(--ink);}
.back .i{width: 16px;}
.hero{position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 20px; align-items: stretch;
  padding: 30px 30px 0; border-radius: 28px; overflow: hidden;
  background: radial-gradient(120% 130% at 0% 0%, #FFF6DA 0%, transparent 55%), radial-gradient(120% 120% at 100% 0%, #E6ECFF 0%, transparent 60%), var(--card);
  border: 1px solid var(--line); box-shadow: var(--shadow);}
:root[data-theme="dark"] .hero{background: radial-gradient(120% 130% at 0% 0%, #2B2614 0%, transparent 55%), radial-gradient(120% 120% at 100% 0%, #1D2140 0%, transparent 60%), var(--card);}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .hero{background: radial-gradient(120% 130% at 0% 0%, #2B2614 0%, transparent 55%), radial-gradient(120% 120% at 100% 0%, #1D2140 0%, transparent 60%), var(--card);}}
.stage{position: relative; min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 14px;}
.stage-sky{position: absolute; inset: 0; pointer-events: none;}
.stage-sky svg{position: absolute; overflow: visible;}
.sky-sun{width: 44px; top: 58px; left: 6%;}
.sky-sun circle{fill: #FFD66B; stroke: var(--ink); stroke-width: 1.6;}
.sky-sun path{fill: none; stroke: #F2B53A; stroke-width: 2.4; stroke-linecap: round; transform-box: view-box; transform-origin: 20px 20px;}
.sky-cloud{width: 80px;}
.sky-cloud path{fill: var(--card); stroke: var(--line-2); stroke-width: 1.4; stroke-linejoin: round;}
.sky-cloud.c1{top: 92px; right: 16%; animation: drift 16s ease-in-out infinite;}
.sky-cloud.c2{width: 56px; top: 132px; left: 34%; opacity: .75; animation: drift 21s ease-in-out -7s infinite reverse;}
.sky-bunting{top: 0; left: 3%; width: 94%; height: auto;}
.sky-bunting .string{fill: none; stroke: var(--muted); stroke-width: 1.2; opacity: .6;}
.sky-bunting .flag{stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; transform-box: fill-box; transform-origin: 50% 0;}
@keyframes flagSway{ 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.sky-moon{width: 34px; top: 58px; left: 7%; display: none;}
.sky-moon path{fill: #FFE7A3; stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round;}
.sky-star{width: 12px; display: none;}
.sky-star path{fill: #FFD66B;}
.sky-star:nth-of-type(3){top: 64px; left: 24%;}
.sky-star:nth-of-type(4){top: 110px; left: 14%; width: 9px;}
.sky-star:nth-of-type(5){top: 84px; left: 56%; width: 10px;}
.stage[data-time="night"] .sky-sun{display: none;}
.stage[data-time="night"] .sky-moon,.stage[data-time="night"] .sky-star{display: block;}
.sky-plane{width: 40px; top: 104px; left: -70px; opacity: 0;}
.sky-plane .wing{fill: #fff; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round;}
.sky-plane .fold{fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round;}
.sky-plane .trail{fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-dasharray: 2 6; stroke-linecap: round; opacity: .7;}
.sky-plane.is-flying{animation: planeFly 7.5s ease-in-out forwards;}
@keyframes planeFly{
  0% { left: -70px; opacity: 0; transform: translateY(20px) rotate(-6deg); }
  8%, 90% { opacity: 1; }
  35% { transform: translateY(-20px) rotate(5deg); }
  65% { transform: translateY(12px) rotate(-5deg); }
  100% { left: calc(100% + 30px); opacity: 0; transform: translateY(-26px) rotate(4deg); }
}
@media (prefers-reduced-motion: no-preference){.sky-bunting .flag{animation: flagSway 3.2s ease-in-out infinite; animation-delay: calc(var(--d) * -1);}
.stage[data-time="night"] .sky-star{animation: twinkle 2.6s ease-in-out infinite;}
.stage[data-time="night"] .sky-star:nth-of-type(4){animation-delay: -.9s;}
.stage[data-time="night"] .sky-star:nth-of-type(5){animation-delay: -1.7s;}}
@keyframes drift{ 50% { transform: translateX(26px); } }
.stage-row{position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.85fr) repeat(var(--crew, 4), minmax(0, 1fr)); align-items: end; column-gap: 4px; width: 100%; max-width: 660px; margin: 0 auto; padding: 0 8px;}
.stage-floor{position: absolute; left: -30px; right: -30px; bottom: 0; height: 40px; background: color-mix(in srgb, var(--bg-2) 90%, transparent); border-top: 1.5px solid var(--line-2);}
.actor{position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center;}
.actor:nth-child(even){margin-bottom: 14px;}
.stage-row .actor:nth-child(even){margin-top: -9px;}
.actor:hover .actor-av,.actor.is-speaking .actor-av{z-index: 16;}
.actor.is-walking{z-index: 25;}
.actor-av{position: relative; z-index: calc(10 - var(--i)); display: block; width: 120%; margin: 0 -10%; aspect-ratio: 1; clip-path: inset(-40% -40% 0 -40%); transform-origin: 50% 100%; transition: transform .35s var(--spring);}
.actor.is-speaking .actor-av{transform: translateY(-5px) scale(1.05);}
.actor-av::before{content: ""; position: absolute; inset: 14% 9% 0; border-radius: 50% 50% 16px 16px; background: var(--soft); border: 2px solid var(--av-line); border-bottom: 0; transition: transform .3s var(--spring);}
.actor:hover .actor-av::before{transform: scale(1.04);}
.actor-av::after{content: ""; position: absolute; left: 24%; right: 24%; bottom: 1px; height: 9px; z-index: 0;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(29, 27, 24, .24), transparent 72%);
  transform: translateX(calc(var(--lean, 0) * .6px));
  transition: transform .8s var(--ease);}
.actor-av .av{position: relative; z-index: 1; transform: translateX(calc(var(--lean, 0) * 1px)) rotate(calc(var(--lean, 0) * .25deg)); transform-origin: 50% 100%; transition: transform .8s var(--ease);}
.actor-tag{position: absolute; left: 50%; bottom: -12px; z-index: 20; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; padding: 3px 9px; border-radius: 10px; background: var(--card); border: 1.5px solid var(--ink); line-height: 1.15; white-space: nowrap; max-width: calc(100% + 6px); box-shadow: 2px 2px 0 var(--ink-edge); transition: transform .2s var(--spring); width: max-content; max-width: 128px;}
.actor-tag b{font: 800 12.5px var(--display);}
.actor-tag b{display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis;}
.actor-tag span{font-size: 10.5px; line-height: 1.25; color: var(--muted); font-weight: 600; white-space: normal; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.actor-tag:hover{transform: translateX(-50%) translateY(-2px);}
.stage-hint{position: absolute; right: 12px; top: 50px; z-index: 3; margin: 0; font: 600 11.5px var(--font); color: var(--muted); transform: rotate(3deg); padding: 3px 8px; border-radius: 8px; border: 1px dashed var(--line-2); background: color-mix(in srgb, var(--card) 70%, transparent);}
.upnext{margin-top: 16px; padding: 14px 16px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm);}
.upnext-head{display: flex; align-items: center; gap: 8px; font-size: 13px;}
.upnext-head .i{width: 16px; height: 16px; color: var(--muted);}
.upnext-head b{font: 800 14px var(--display);}
.upnext-head span{color: var(--muted); font-size: 12.5px;}
.upnext-list{list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 8px; margin: 10px 0 0; padding: 0;}
.upnext-item{position: relative; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 14px; background: var(--bg-2); border: 1px solid transparent; transition: border-color .2s, transform .2s var(--ease);}
.upnext-item:hover{border-color: var(--line-2); transform: translateY(-2px);}
.upnext-item.is-soon{background: color-mix(in srgb, var(--soft) 55%, var(--card)); border-color: var(--line);}
.un-av{width: 34px; height: 34px; flex: none; border-radius: 50%; overflow: visible; clip-path: inset(-45% 0 0 0 round 0 0 50% 50%); background: var(--soft); border: 1.5px solid var(--av-line);}
.un-body{min-width: 0; flex: 1;}
.un-body b{display: block; font: 800 13px var(--display);}
.un-body small{display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--muted); font-size: 11.5px; line-height: 1.35; overflow: hidden;}
.un-when{font: 700 11px var(--font); color: var(--ink-2); background: var(--card); border: 1px solid var(--line); border-radius: 99px; padding: 3px 8px; white-space: nowrap;}
@media (max-width: 760px){.upnext{padding: 12px;}
.upnext-head span{display: none;}
.upnext-list{grid-template-columns: 1fr;}}
.kpi-ico{width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 35%, var(--card)); color: #1D1B18; border: 1.5px solid color-mix(in srgb, var(--c) 80%, #1D1B18); flex: none;}
.kpi-ico .i{width: 16px; height: 16px;}
:root[data-theme="dark"] .kpi-ico{color: var(--ink);}
@keyframes grow{ from { transform: scaleY(0); } }
.ring{position: relative; width: 58px; height: 58px; flex: none;}
.ring svg{width: 100%; height: 100%; transform: rotate(-90deg);}
.ring circle{fill: none; stroke-width: 6;}
.ring b{position: absolute; inset: 0; display: grid; place-items: center; font: 800 17px var(--display);}
.ring.big{width: 84px; height: 84px;}
.ring.big b{font-size: 24px;}
.quote{font-size: 13.5px; color: var(--ink-2); padding: 8px 11px; border-radius: 10px; background: var(--bg-2); border-left: 3px solid var(--line-2); overflow-wrap: anywhere;}
.agent-card{position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--r);
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
  animation: rise .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms);}
.agent-card::before{content: ""; position: absolute; left: 0; right: 0; top: 0; height: 64px; border-radius: var(--r) var(--r) 0 0; background: linear-gradient(180deg, color-mix(in srgb, var(--soft) 80%, transparent), transparent); pointer-events: none;}
.agent-card:hover{transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-2);}
.agent-card[data-mood="work"]::after{content: ""; position: absolute; left: 1px; right: 1px; top: 0; height: 2px;
  border-radius: var(--r) var(--r) 0 0; pointer-events: none;
  /* the static bar is the fallback: a reduced-motion user still sees which cards are busy */
  background: color-mix(in srgb, var(--col, var(--accent)) 55%, transparent);}
@media (prefers-reduced-motion: no-preference){.agent-card[data-mood="work"]::after{background: linear-gradient(90deg, transparent 0%, var(--col, var(--accent)) 50%, transparent 100%);
    background-size: 55% 100%; background-repeat: no-repeat;
    animation: cardSweep 2.4s linear infinite;}
@keyframes cardSweep{ 0% { background-position: -60% 0; } 100% { background-position: 170% 0; } }}
.agent-card[data-mood="need"]{border-color: color-mix(in srgb, #FFBC70 70%, var(--line));}
.agent-card.is-paused{opacity: .75;}
.agent-card.is-hidden{display: none;}
@keyframes rise{ from { opacity: 0; transform: translateY(10px); } }
.card-link{position: absolute; inset: 0; z-index: 1; border-radius: inherit;}
.feed{list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;}
@keyframes flash{ 0% { background: var(--hl); } 100% { background: transparent; } }
.cat-grid{display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px;}
.cat-card{position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--r);
  background: var(--card); border: 1.5px solid var(--line);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;}
.cat-card:hover{transform: translateY(-3px); border-color: var(--ink); box-shadow: var(--ink-shadow);}
.cat-card:hover .cc-av .av-eyes{animation: blink .6s 1;}
.cat-card.is-soon{background: var(--card-2);}
.cat-card.is-soon .cc-av{filter: saturate(.6);}
.cat-card.is-hidden{display: none;}
.cc-top{display: flex; gap: 12px; align-items: center;}
.cc-av{width: 62px; transition: transform .3s var(--spring);}
.cat-card:hover .cc-av{transform: rotate(-4deg) scale(1.05);}
.cc-name{min-width: 0; padding-right: 26px;}
.cc-tag{font-size: 14px; color: var(--ink-2); line-height: 1.45;}
.cc-receipt{font-size: 12.5px; color: var(--ink-2); padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--soft) 45%, var(--card)); line-height: 1.4;}
.cc-receipt span{display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cink); margin-bottom: 2px;}
:root[data-theme="dark"] .cc-receipt span{color: var(--c);}
.pick{position: absolute; top: 12px; right: 12px; z-index: 3;}
.pick input{position: absolute; opacity: 0; width: 26px; height: 26px; margin: 0; cursor: pointer;}
.pick span{width: 26px; height: 26px; border-radius: 8px; border: 1.5px solid var(--line-2); background: var(--card); display: grid; place-items: center; color: transparent; transition: all .2s var(--spring); pointer-events: none;}
.pick span .i{width: 15px;}
.pick input:checked + span{background: var(--accent); border-color: var(--accent); color: #fff; transform: scale(1.08);}
.pick input:focus-visible + span{outline: 3px solid var(--accent); outline-offset: 2px;}
.select-bar{position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 45;
  display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 14px; border-radius: 20px;
  background: var(--ink); color: var(--bg); box-shadow: var(--shadow-lg); animation: barIn .35s var(--spring);
  max-width: calc(100vw - 24px);}
.select-bar .btn-ghost{color: var(--bg);}
.select-bar .btn-ghost:hover{background: rgba(255, 255, 255, .12);}
@keyframes barIn{ from { transform: translate(-50%, 30px); opacity: 0; } }
.sb-avs{display: flex;}
.sb-av{width: 34px; margin-left: -10px; --av-line: var(--ink);}
.sb-av:first-child{margin-left: 0;}
.agent-hero{display: grid; grid-template-columns: 250px minmax(0, 1fr) 260px; gap: 28px; align-items: center;
  padding: 26px; border-radius: 28px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
  position: relative;}
.agent-hero::before{content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(60% 90% at 0% 50%, color-mix(in srgb, var(--soft) 90%, transparent), transparent 70%); pointer-events: none;}
.ah-art{position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px;}
.ah-blob{position: absolute; top: 4px; width: 230px; height: 230px; border-radius: 46% 54% 52% 48% / 54% 44% 56% 46%; background: var(--soft); border: 2px solid #1D1B18;}
@keyframes morph{ 50% { border-radius: 56% 44% 42% 58% / 44% 58% 42% 56%; transform: rotate(6deg); } }
.ah-av{position: relative; width: 236px; aspect-ratio: 1; clip-path: inset(-30% -30% 0 -30%);}
.ah-copy{position: relative; display: flex; flex-direction: column; gap: 12px;}
.crew-chip{display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 99px; background: color-mix(in srgb, var(--c) 35%, var(--card)); color: var(--ink); border: 1px solid color-mix(in srgb, var(--c) 80%, #1D1B18); letter-spacing: .02em; text-transform: none; font-size: 12px;}
.ah-state{display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--ink-2);}
.ah-state .state{padding: 4px 10px; border-radius: 99px; background: var(--bg-2);}
.ah-actions{display: flex; gap: 8px; flex-wrap: wrap;}
.ah-facts{position: relative; margin: 0; display: flex; flex-direction: column; gap: 10px;}
.ah-facts div{padding: 12px 14px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line);}
.ah-facts dt{display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .05em;}
.ah-facts dt .i{width: 14px;}
.ah-facts dd{margin: 3px 0 0; font-weight: 600; font-size: 14px;}
.tabs{display: flex; gap: 4px; margin: 22px 0 16px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none;}
.tabs button{position: relative; height: 44px; padding: 0 14px; font-weight: 600; color: var(--muted); white-space: nowrap;}
.tabs button::after{content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); transform: scaleX(0); transition: transform .25s var(--ease);}
.tabs button.is-on{color: var(--ink);}
.tabs button.is-on::after{transform: scaleX(1);}
.earn{font: 700 21px/1.35 var(--display); letter-spacing: -.015em; margin: 10px 0 16px;}
.r-label{display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--good); margin-bottom: 4px;}
.r-label .i{width: 14px;}
.how{list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 0; counter-reset: s;}
.how li{position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 0;}
.how li:not(:last-child)::after{content: ""; position: absolute; left: 15px; top: 42px; bottom: -10px; width: 2px; background: var(--line);}
.how li.is-done:not(:last-child)::after{background: var(--good);}
.dots{display: inline-flex; gap: 3px; margin-left: 4px;}
.dots i{width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: bounce 1s infinite;}
.dots i:nth-child(2){animation-delay: .15s;}
.dots i:nth-child(3){animation-delay: .3s;}
@keyframes bounce{ 0%, 100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-5px); opacity: 1; } }
.finding{display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line);}
.finding p{font-size: 13.5px; color: var(--muted);}
.finding small{color: var(--muted); white-space: nowrap;}
.timeline{list-style: none; margin: 14px 0 0; padding: 0;}
.timeline li{position: relative; display: flex; gap: 14px; padding: 0 0 18px;}
.timeline li:not(:last-child)::before{content: ""; position: absolute; left: 5px; top: 14px; bottom: 0; width: 2px; background: var(--line);}
.timeline small{color: var(--muted);}
.meter + .muted{margin-top: 10px;}
.src{font: 500 12px "IBM Plex Mono", ui-monospace, monospace; padding: 4px 8px; border-radius: 7px; background: var(--bg-2); color: var(--ink-2);}
.settings{display: flex; flex-direction: column; gap: 18px; margin-top: 14px;}
.field{display: flex; flex-direction: column; gap: 7px;}
.field > label,.field label:first-child{font-weight: 600; font-size: 14px;}
.field label small{color: var(--muted); font-weight: 500;}
.field.two{display: grid; grid-template-columns: 1fr 1fr; gap: 12px;}
.field.two > div{display: flex; flex-direction: column; gap: 7px;}
.field input[type="text"],.field select,.field textarea{width: 100%; height: 42px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--card); outline: 0; transition: border-color .2s, box-shadow .2s;}
.field input:focus,.field select:focus{border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft);}
.toggle{display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; cursor: pointer;}
.toggle input{position: absolute; opacity: 0; width: 1px; height: 1px;}
.toggle span{position: relative; width: 40px; height: 24px; border-radius: 99px; background: var(--line-2); transition: background .2s; flex: none;}
.toggle span::after{content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .25s var(--spring);}
.toggle input:checked + span{background: var(--good);}
.toggle input:checked + span::after{transform: translateX(16px);}
.toggle input:focus-visible + span{outline: 3px solid var(--accent); outline-offset: 2px;}
.needs-list{display: flex; flex-direction: column; gap: 14px; margin-top: 18px;}
.need-item{display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 18px; padding: 20px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: all .4s var(--ease); scroll-margin-top: 90px;}
.need-item:target{border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft);}
.need-item.is-urgent{border-left: 5px solid #FF7A59;}
.ni-av{width: 92px; height: 92px;}
.ni-body{display: flex; flex-direction: column; gap: 10px; min-width: 0;}
.ni-meta{font-size: 13px; color: var(--muted);}
.ni-meta a{font-weight: 650; color: var(--ink-2);}
.ni-meta a:hover{color: var(--accent);}
.urgent{color: #C2410C;}
.need-item h2{font-size: 20px;}
.draft{padding: 14px 16px; border-radius: 14px; background: var(--card-2); border: 1.5px dashed var(--line-2);}
.draft-text{display: flex; flex-direction: column; gap: 4px; outline: 0; border-radius: 8px;}
.draft-text[contenteditable="true"]{padding: 8px; background: var(--card); box-shadow: 0 0 0 2px var(--accent);}
.ni-actions{display: flex; gap: 8px; flex-wrap: wrap;}
@keyframes float{ 50% { translate: 0 -10px; } }
.shape{font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);}
.fit{font-size: 12.5px; color: var(--muted);}
.fit b{font: 800 18px var(--display); color: var(--good);}
.proof{padding: 10px 12px; border-radius: 12px; background: var(--good-soft); display: flex; flex-direction: column; gap: 4px;}
.demand{display: flex; gap: 6px; align-items: flex-start; font-size: 13px; color: var(--ink-2);}
.demand .i{width: 15px; color: var(--accent); margin-top: 2px;}
.tool{position: relative; display: flex; align-items: flex-start; gap: 11px; padding: 11px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); transition: all .2s var(--ease);}
.tool:hover{border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--shadow);}
.tool > span:nth-child(2){display: flex; flex-direction: column; min-width: 0; flex: 1;}
.tool small{color: var(--muted); line-height: 1.35;}
.tool .tag{position: absolute; top: 8px; right: 8px;}
.mail{border-radius: 24px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-lg); overflow: hidden; position: sticky; top: 84px;}
.tiers{list-style: none; margin: 12px 0; padding: 0; display: flex; flex-direction: column; gap: 6px;}
.tiers li{display: grid; grid-template-columns: 64px 54px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); font-size: 14px;}
.tiers li small{grid-column: 3 / 4; color: var(--muted); margin-top: -6px;}
.tiers li .tag{grid-row: 1; grid-column: 4;}
.tp{font: 800 16px var(--display);}
.modal,.palette{position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px;}
.modal-backdrop{position: absolute; inset: 0; background: rgba(20, 18, 15, .45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fade .25s var(--ease);}
@keyframes fade{ from { opacity: 0; } }
.modal-card{position: relative; width: min(860px, 100%); max-height: min(760px, calc(100dvh - 32px)); display: flex; flex-direction: column; border-radius: 28px; background: var(--card); border: 1.5px solid var(--ink); box-shadow: 6px 6px 0 var(--ink), var(--shadow-lg); animation: modalIn .4s var(--spring); overflow: hidden;}
@keyframes modalIn{ from { opacity: 0; transform: translateY(24px) scale(.97); } }
.sel-summary{display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-2); min-width: 0;}
.sel-summary b{color: var(--ink); white-space: nowrap;}
.sel-summary span{min-width: 0;}
.sel-summary .bar{width: 120px; flex: none;}
.sel-summary .bar.is-over i{background: var(--warn);}
.seg + [data-pane]{margin-top: 16px;}
.type-chips{display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px;}
.type-chip{display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--card); font-weight: 600; font-size: 14px; transition: all .2s var(--spring);}
.type-chip .i{width: 16px;}
.type-chip:hover{border-color: var(--ink-2);}
.type-chip.is-on{background: var(--ink); color: var(--bg); border-color: var(--ink); transform: translateY(-1px);}
.q-item{position: relative; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--card); cursor: pointer; transition: all .2s var(--ease); animation: rise .35s var(--ease) both;}
.q-item:hover{border-color: var(--line-2);}
.q-item.is-on{border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 60%, var(--card));}
.q-item.is-soon{opacity: .6; cursor: default;}
.q-item input{position: absolute; opacity: 0;}
.q-item .quick-av{width: 42px;}
.q-text{display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3;}
.q-text b{font-size: 14px;}
.q-text small{color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.q-check{width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--line-2); display: grid; place-items: center; color: transparent; flex: none; transition: all .2s var(--spring);}
.q-check .i{width: 13px;}
.q-item.is-on .q-check{background: var(--accent); border-color: var(--accent); color: #fff;}
.q-item input:focus-visible ~ .q-check{outline: 3px solid var(--accent); outline-offset: 2px;}
.launch{display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 10px 0; position: relative;}
.launch h3{font: 800 28px var(--display); letter-spacing: -.02em;}
.launch p{color: var(--ink-2); max-width: 52ch;}
.party-row{display: flex; justify-content: center; flex-wrap: wrap; max-width: 620px;}
.party-av{width: 84px; margin: 0 -8px; border-radius: 50%; overflow: hidden; background: var(--soft); border: 2px solid #1D1B18; animation: popIn .5s var(--spring) both; animation-delay: calc(var(--i) * 60ms);}
@keyframes hugSquish{ 0%, 100% { transform: none; } 30% { transform: scale(1.08, .9) translateY(8px); } 60% { transform: scale(.96, 1.05) translateY(-10px); } }
@keyframes popIn{ from { opacity: 0; transform: translateY(20px) scale(.6); } }
.confetti-burst{position: absolute; inset: 0; pointer-events: none; overflow: hidden;}
.confetti-burst i{position: absolute; top: -10px; width: 9px; height: 14px; border-radius: 3px; animation: fall 2.4s ease-in forwards;}
@keyframes fall{ to { transform: translateY(520px) rotate(540deg); opacity: 0; } }
.palette{place-items: start center; padding-top: 12vh;}
.toasts{position: fixed; z-index: 100; display: flex; flex-direction: column; gap: 8px;}
.toast{display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 14px; background: var(--ink); color: var(--bg); box-shadow: var(--shadow-lg); font-size: 14px; font-weight: 550; max-width: 360px; animation: toastIn .4s var(--spring);}
.toast.is-out{animation: toastOut .3s var(--ease) forwards;}
.toast-av{width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: var(--soft, #DFF6EA); flex: none; display: grid; place-items: center;}
@keyframes toastIn{ from { opacity: 0; transform: translateY(16px) scale(.95); } }
@keyframes toastOut{ to { opacity: 0; transform: translateY(10px); } }
.onb{min-height: 100vh; display: flex; flex-direction: column;}
.onb-steps{list-style: none; display: flex; gap: 8px; margin: 0; padding: 0;}
.onb-steps li{font-size: 13px; font-weight: 600; color: var(--muted); padding: 6px 12px; border-radius: 99px; background: var(--card); border: 1px solid var(--line);}
.onb-steps li.is-on{background: var(--ink); color: var(--bg); border-color: var(--ink);}
.onb-form{display: flex; gap: 10px; width: min(680px, 100%); flex-wrap: wrap; margin-top: 8px;}
.scan-stage{display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: 100%; margin-top: 10px;}
.scan-actor{display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); opacity: 0; transform: translateY(14px) scale(.95); transition: all .5s var(--spring);}
.scan-actor.is-in{opacity: 1; transform: none;}
.scan-actor.is-done{border-color: var(--good);}
.scan-av{width: 86px; border-radius: 50%; overflow: hidden; background: #FFF4D1; border: 2px solid #1D1B18;}
.scan-actor small{color: var(--muted); font-size: 12px; line-height: 1.35;}
.scan-bar{width: min(560px, 100%); height: 10px; border-radius: 99px; background: var(--line); overflow: hidden;}
.scan-bar i{display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #7FD9A9, var(--accent), #FF9EC4); transition: width .4s linear;}
.ff{display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 16px; background: var(--card); border: 1.5px solid var(--ink); box-shadow: var(--ink-shadow); text-align: left;}
.ff span:last-child{font-size: 13.5px; color: var(--ink-2);}
.onb-crew{display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; width: 100%; text-align: left;}
.onb-foot{position: sticky; bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 12px 12px 12px 18px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-lg); flex-wrap: wrap; margin-top: 10px;}
@media (max-width: 1280px){.agent-hero{grid-template-columns: 210px minmax(0, 1fr);}
.ah-facts{grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap;}
.ah-facts div{flex: 1 1 200px;}
.ah-blob{width: 196px; height: 196px;}
.ah-av{width: 200px;}}
@media (max-width: 1100px){.hero{grid-template-columns: minmax(0, 1fr); padding-bottom: 0;}
.mail{position: static;}
.scan-stage{grid-template-columns: repeat(2, minmax(0, 1fr));}}
@media (max-width: 760px){body{font-size: 14.5px;}
.side{visibility: hidden; transition: transform .3s var(--ease), visibility .3s; position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-104%); box-shadow: var(--shadow-lg); width: min(300px, 86vw);}
.menu-open .side{transform: none; visibility: visible;}
.top{padding: 0 12px; height: 60px; gap: 6px;}
.content{padding: 12px 16px 90px;}
.hero{padding: 22px 18px 0; border-radius: 22px;}
.stage{min-height: 0; margin: 0 -18px;}
.stage-sky > :not(.sky-bunting){display: none !important;}
.sky-bunting{left: 2%; width: 96%;}
.stage-row{grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)); padding: 92px 12px 0;}
.stage-row > .actor:nth-child(n+5){display: none;}
.actor-tag{padding: 2px 8px;}
.actor-tag span{display: none;}
.cat-grid{grid-template-columns: 1fr;}
.page-head{padding-top: 8px;}
.agent-hero{grid-template-columns: 1fr; padding: 20px; text-align: center;}
.ah-copy{align-items: center;}
.ah-copy .lede{margin: 0 auto;}
.ah-actions,.ah-state{justify-content: center;}
.need-item{grid-template-columns: 54px minmax(0, 1fr); column-gap: 12px; row-gap: 10px; align-items: start; padding: 16px;}
.need-item .ni-body{display: contents;}
.need-item .ni-av{width: 54px; height: 54px; grid-row: 1 / span 2;}
.need-item .ni-meta{grid-column: 2; align-self: end;}
.need-item h2{grid-column: 2; font-size: 17px;}
.need-item .quote,.need-item .draft,.need-item .ni-actions{grid-column: 1 / -1;}
.ni-actions{display: grid; grid-template-columns: 1fr 1fr;}
.ni-actions .btn-primary{grid-column: 1 / -1;}
.agent-hero .ah-art{margin-top: 46px;}
.field.two{grid-template-columns: 1fr;}
.modal{padding: 0; place-items: end center;}
.modal-card{border-radius: 24px 24px 0 0; max-height: 92dvh; box-shadow: var(--shadow-lg); border-width: 1px;}
.onb-crew{grid-template-columns: minmax(0, 1fr);}
.sel-summary{flex-wrap: wrap; gap: 2px 10px;}
.sel-summary .bar{display: none;}
.select-bar{left: 12px; right: 12px; transform: none; bottom: 12px;}
@keyframes barIn{ from { transform: translateY(30px); opacity: 0; } }
.sb-avs{display: none;}
.onb-steps{display: none;}
.scan-stage{grid-template-columns: repeat(2, minmax(0, 1fr));}
.tiers li{grid-template-columns: 56px 48px minmax(0, 1fr);}
.tiers li .tag{display: none;}
.toasts{left: 12px; right: 12px;}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important;}}
.nick{font: 700 11px var(--font); color: var(--muted); background: var(--bg-2); padding: 1px 6px; border-radius: 6px; margin-left: 4px; vertical-align: 2px;}
.cc-av,.ni-av{position: relative; z-index: 2;}
.cc-av:hover{transform: scale(1.06) rotate(-3deg);}
.cc-av,.ni-av,.fh-av{overflow: visible; clip-path: inset(-45% 0 0 0 round 0 0 50% 50%);}
.cc-av .av,.ni-av .av,.fh-av .av{transform-origin: 50% 100%; transition: transform .35s var(--spring);}
.cat-card:hover .cc-av .av,.family-head:hover .fh-av .av{transform: translateY(-7%) scale(1.06);}
.cc-nick{font-size: 12px; font-weight: 600; color: var(--muted); margin-top: 1px;}
.ah-nick{font-size: 15px; color: var(--ink-2);}
.ah-nick i{color: var(--muted);}
.pc-top{display: flex; align-items: center; gap: 12px;}
.pc-top h3{margin: 0; font: 800 20px var(--display);}
.pc-top small{color: var(--muted); display: block; line-height: 1.35;}
@media (max-width: 760px){.stage-hint{display: none;}}
:root[data-theme="dark"] .agent-hero::before,:root[data-theme="dark"] .agent-card::before{opacity: .22;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .agent-hero::before,:root:not([data-theme="light"]) .agent-card::before{opacity: .22;}}
.av-don .don-hat-in{transform-box: view-box; transform-origin: 880px 440px; transition: transform .7s var(--spring);}
.av-don[data-mood="sleep"] .don-hat-in{transform: translateY(150px) rotate(4deg);}
.av-don .cat-tail{transform-box: view-box; transform-origin: 760px 1500px;}
.av-don .cat-eyes{transform-box: fill-box; transform-origin: center;}
.av-don .cat-head{transform-box: view-box; transform-origin: 555px 1430px;}
.av-don .don-rose{transform-box: fill-box; transform-origin: center;}
.av-don .cup-steam path{opacity: 0;}
.av-don[data-mood="sleep"] .cat-eyes{transform: scaleY(.25);}
.av-don .fx-need{display: none;}
@media (prefers-reduced-motion: no-preference){.av-don .cat-tail{animation: tailSwish 3.4s ease-in-out infinite;}
.av-don .cat-eyes{animation: catBlink 6.5s infinite;}
.av-don .cat-head{animation: catTilt 8s ease-in-out infinite;}
.av-don .cup-steam path{animation: steam 2.2s ease-in-out infinite;}
.av-don .cup-steam path:nth-child(2){animation-delay: .7s;}
.av-don .don-rose{animation: roseGlow 5s ease-in-out infinite;}
.av-don[data-mood="idle"] .av-bob{animation: donBreathe 6.5s ease-in-out infinite;}
.av-don[data-mood="hello"] .don-hat-in,.av-don[data-mood="party"] .don-hat-in,.av-don.h-tiphat .don-hat-in{animation: tipHat 1.5s var(--spring);}
.av-don.h-purr .cat-head{animation: purr .11s linear 12;}
.av-don.h-purr .cat-tail{animation: tailSwish .8s ease-in-out 2;}
.av-don.h-cat .cat-head{animation: catPop .7s var(--spring);}
.av-don[data-mood="sleep"] .cat-tail{animation: tailSwish 7s ease-in-out infinite;}}
@keyframes tailSwish{ 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-12deg); } }
@keyframes catBlink{ 0%, 93%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes catTilt{ 0%, 40%, 100% { transform: rotate(0); } 50%, 72% { transform: rotate(-7deg); } }
@keyframes catPop{ 0% { transform: none; } 40% { transform: translateY(-40px) rotate(6deg); } 100% { transform: none; } }
@keyframes steam{ 0% { opacity: 0; transform: translateY(10px); } 40% { opacity: .9; } 100% { opacity: 0; transform: translateY(-34px); } }
@keyframes tipHat{ 0%, 100% { transform: none; } 28% { transform: translate(-24px, -80px) rotate(-16deg); } 60% { transform: translate(-12px, -60px) rotate(-12deg); } }
@keyframes purr{ 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(3px, -3px); } }
@keyframes roseGlow{ 0%, 80%, 100% { transform: scale(1) rotate(0); } 88% { transform: scale(1.12) rotate(-8deg); } }
@keyframes donBreathe{ 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.av .av-hair{transform-box: view-box; transform-origin: 872px 620px;}
.av-don .don-bowtie{transform-box: fill-box; transform-origin: center;}
.av-don .cat-ear{transform-box: fill-box; transform-origin: 50% 100%;}
@media (prefers-reduced-motion: no-preference){.av.h-pop .av-bob{animation: popBob .65s var(--spring);}
.av.h-hug .av-bob{animation: hugSquish .9s var(--spring);}
.av.h-stretch .av-bob{animation: stretchUp 1.5s ease-in-out;}
.av.h-wiggle .av-tilt{animation: wiggle .9s ease-in-out;}
.av.h-hop .av-hair,.av.h-pop .av-hair,.av.is-changing .av-hair{animation: hairBounce .75s ease-out;}
.av[data-mood="party"] .av-hair{animation: hairBounce .9s ease-out infinite;}
.av[data-mood="work"] .av-arms{animation: busyHands 1.1s ease-in-out infinite;}
.av[data-mood="found"] .av-arms{animation: pointPulse 1.6s ease-in-out infinite;}
.av:where([data-mood="idle"]) .av-tilt{animation: idleDrift 7s ease-in-out infinite; animation-delay: var(--ph, 0s);}
.av-don.h-tie .don-bowtie{animation: tieWiggle .9s ease-in-out;}
.av-don .cat-ear-r{animation: earTwitch 9s ease-in-out infinite;}
.av-don.h-ear .cat-ear-l,.av-don.h-ear .cat-ear-r{animation: earTwitch .5s ease-in-out 2;}
.av-don.h-brim .don-hat-in{animation: brimTouch 1.2s ease-in-out;}
.stage-row.is-entering .actor-av{animation: actorIn .75s var(--spring) backwards; animation-delay: calc(var(--i) * 120ms + 120ms);}
.stage-row.is-entering .actor-tag{animation: tagIn .5s var(--ease) backwards; animation-delay: calc(var(--i) * 120ms + 420ms);}}
@keyframes popBob{ 0% { transform: translateY(18px) scale(.9, .86); } 55% { transform: translateY(-10px) scale(.98, 1.04); } 100% { transform: none; } }
@keyframes stretchUp{ 0%, 100% { transform: none; } 35%, 60% { transform: translateY(-14px) scale(.98, 1.04); } }
@keyframes wiggle{ 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-4deg); } 40% { transform: rotate(3deg); } 60% { transform: rotate(-2deg); } 80% { transform: rotate(1deg); } }
@keyframes hairBounce{ 0%, 100% { transform: none; } 30% { transform: translateY(10px) scale(1.01, .98); } 60% { transform: translateY(-5px); } }
@keyframes busyHands{ 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-2.5deg) translateY(-6px); } }
@keyframes pointPulse{ 0%, 100% { transform: rotate(0); } 40% { transform: rotate(-4deg) translate(6px, -8px); } }
@keyframes idleDrift{ 0%, 100% { transform: rotate(0); } 30% { transform: rotate(1.2deg); } 70% { transform: rotate(-1deg); } }
@keyframes tieWiggle{ 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } }
@keyframes earTwitch{ 0%, 90%, 100% { transform: rotate(0); } 93% { transform: rotate(-16deg); } 96% { transform: rotate(6deg); } }
@keyframes brimTouch{ 0%, 100% { transform: none; } 35%, 65% { transform: translateY(-14px) rotate(-3deg); } }
@keyframes tagIn{ from { opacity: 0; } }
@keyframes actorIn{ 0% { opacity: 0; transform: translateY(40px) scale(.86); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes trophyShine{ 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-10deg) scale(1.08); } 86% { transform: rotate(8deg) scale(1.08); } }
.actor-don .actor-av{z-index: 12; width: 108%; margin: 0 -4%;}
.actor-don .actor-av::before{display: none;}
.actor-don .actor-tag{background: #2A2833; color: #F6E4C4; border-color: #1D1B18;}
.actor-don .actor-tag span{color: #F1DDB5;}
.actor-don .actor-tag b::before{content: "♛ "; color: #FFD66B;}
.don-dock{transition: opacity .2s, transform .3s var(--ease); position: fixed; right: 20px; bottom: 20px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; transition: opacity .2s;}
.don-fab{position: relative; display: flex; align-items: center; gap: 10px; height: 64px; padding: 0 18px 0 4px; border-radius: 40px; background: #2A2833; color: #F6E4C4; border: 2px solid #1D1B18; box-shadow: 4px 4px 0 #1D1B18, var(--shadow-lg); font: 700 15px var(--display); text-align: left; transition: transform .25s var(--spring);}
.don-fab:hover{transform: translateY(-3px) rotate(-1deg);}
.don-fab{transition: transform .25s var(--spring), padding .3s var(--ease);}
.don-fab-label{display: block; max-width: 190px; opacity: 1; overflow: hidden; white-space: nowrap; transition: max-width .3s var(--ease), opacity .22s .04s var(--ease);}
.don-dock.is-tucked .don-fab{padding-right: 4px;}
.don-dock.is-tucked .don-fab-label{max-width: 0; opacity: 0; transition: max-width .3s var(--ease), opacity .16s var(--ease);}
.don-dock:hover .don-fab-label,.don-dock:focus-within .don-fab-label{max-width: 190px; opacity: 1;}
.don-fab-av{width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: #F6E4C4; border: 2px solid #1D1B18; flex: none;}
.don-fab-av .av{margin-top: 2px;}
.don-fab-label small{display: block; font: 600 10.5px var(--font); color: #F1DDB5; opacity: .8;}
.don-fab .say{color: var(--ink); font-family: var(--font);}
.toasts{right: 18px; bottom: 100px;}
body.has-select-bar .don-dock{bottom: 92px;}
.don-panel{position: fixed; right: 20px; bottom: 20px; z-index: 70; width: min(420px, calc(100vw - 24px)); max-height: min(720px, calc(100dvh - 40px)); display: flex; flex-direction: column; border-radius: 28px; background: var(--card); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink-edge), var(--shadow-lg); overflow: hidden; animation: modalIn .4s var(--spring);}
.dp-head{position: relative; display: flex; gap: 12px; align-items: flex-end; padding: 16px 16px 14px; background: radial-gradient(120% 140% at 0% 0%, #4A3A2E, #2A2833 60%); color: #F6E4C4; overflow: visible;}
.dp-head h2{font: 800 24px var(--display); color: #fff;}
.dp-head .icon-btn{position: absolute; top: 10px; right: 10px; color: #F6E4C4;}
.dp-head .icon-btn:hover{background: rgba(255, 255, 255, .1);}
.dp-av{width: 108px; flex: none; margin-bottom: -14px;}
.dp-chat{flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-height: 120px;}
.msg{max-width: 90%; padding: 9px 12px; border-radius: 16px; font-size: 14px; line-height: 1.45; animation: rise .3s var(--ease);}
.msg-you{align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 6px;}
.msg-don{align-self: flex-start; background: #F6E4C4; color: #1D1B18; border: 1.5px solid #1D1B18; border-bottom-left-radius: 6px;}
.msg-don b{font-family: var(--display);}
.dp-agents{display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 2px;}
.dp-agent{position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); animation: rise .35s var(--ease) both;}
.dp-agent-av{width: 44px; flex: none; border-radius: 50%; overflow: hidden; background: var(--soft); border: 2px solid var(--av-line); aspect-ratio: 1;}
.dp-agent .grow b{font-size: 14px;}
.dp-agent .grow small{display: block; color: var(--muted); line-height: 1.3;}
.dp-agent .reply{position: absolute; right: 10px; top: -11px; font: 700 11px var(--font); padding: 2px 8px; border-radius: 8px; background: #FFD66B; color: #1D1B18; border: 1.5px solid #1D1B18; animation: popIn .4s var(--spring) both;}
.dp-chips{display: flex; gap: 6px; flex-wrap: wrap; padding: 0 16px 10px;}
.dp-chips button{height: 30px; padding: 0 11px; border-radius: 99px; border: 1.5px solid var(--line-2); background: var(--card); font-size: 12.5px; font-weight: 600; color: var(--ink-2);}
.dp-chips button:hover{border-color: var(--ink); color: var(--ink);}
.dp-form{display: flex; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--line);}
.dp-form input{flex: 1; min-width: 0; height: 42px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--card); outline: 0;}
.dp-form input:focus{border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft);}
body.don-open .don-dock{opacity: 0; pointer-events: none;}
.family{position: relative; margin-top: 18px; padding: 22px 20px 20px; border-radius: 28px; background: radial-gradient(90% 120% at 50% 0%, #FFF4D1, transparent 70%), var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);}
:root[data-theme="dark"] .family{background: radial-gradient(90% 120% at 50% 0%, #2B2614, transparent 70%), var(--card);}
.family-lines{position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible;}
.family-lines path{fill: none; stroke: var(--line-2); stroke-width: 2.5; stroke-dasharray: 6 8; transition: stroke .2s, stroke-width .2s;}
.family-lines path.is-hot{stroke: #B3262E; stroke-width: 3.5;}
@media (prefers-reduced-motion: no-preference){.family-lines path.is-hot{animation: orders 1.6s linear infinite;}}
@keyframes orders{ to { stroke-dashoffset: -28; } }
.family-top{position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;}
.family-don{width: 190px; position: relative;}
.family-don .av{clip-path: inset(-40% -40% 0 -40%);}
.family-title{font: 800 24px var(--display);}
.family-sub{font-size: 14px; color: var(--muted); max-width: 540px;}
.family-heads{position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px 10px; margin-top: 26px;}
.family-head{position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; border-radius: 16px; text-align: center; transition: transform .25s var(--spring), background .2s;}
.family-head:hover{transform: translateY(-4px); background: color-mix(in srgb, var(--c) 18%, transparent);}
.fh-av{width: 70px; border-radius: 50%; overflow: hidden; background: color-mix(in srgb, var(--c) 35%, var(--card)); border: 2px solid var(--av-line); aspect-ratio: 1;}
.family-head b{font-size: 13px;}
.family-head small{font-size: 11px; color: var(--muted);}
.don-word{background: linear-gradient(160deg, #F6E4C4, var(--card) 70%);}
:root[data-theme="dark"] .don-word{background: var(--card);}
.dw-top{display: flex; align-items: center; gap: 10px; margin-bottom: 8px;}
.dw-av{width: 52px; flex: none; border-radius: 50%; overflow: hidden; background: #F6E4C4; border: 2px solid var(--av-line); aspect-ratio: 1;}
.dw-top small{display: block; color: var(--muted);}
.don-word blockquote{margin: 0; font: 600 15px/1.45 var(--display);}
.don-word blockquote::before{content: "\201C"; font-size: 30px; line-height: 0; vertical-align: -10px; margin-right: 2px; color: #B3262E;}
.stamp{position: absolute; left: 50%; top: 50%; z-index: 20; padding: 8px 18px; border: 5px solid #B3262E; border-radius: 12px; color: #B3262E; font: 900 30px var(--display); letter-spacing: .08em; text-transform: uppercase; background: rgba(255, 255, 255, .88); transform: translate(-50%, -50%) rotate(-12deg); animation: stampIn .45s cubic-bezier(.2, 1.6, .4, 1) both; pointer-events: none; white-space: nowrap;}
.stamp small{display: block; font: 700 11px var(--font); letter-spacing: .04em; text-align: center;}
@keyframes stampIn{ 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-12deg) scale(2.4); } 100% { opacity: 1; transform: translate(-50%, -50%) rotate(-12deg) scale(1); } }
.need-item{position: relative;}
.don-sign{display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px dashed var(--line-2);}
.ds-av{width: 54px; flex: none; border-radius: 50%; overflow: hidden; background: #F6E4C4; border: 2px solid var(--av-line);}
.don-sign i{font-family: "Segoe Script", "Brush Script MT", cursive; font-size: 21px; font-style: normal; color: #2A2833;}
:root[data-theme="dark"] .don-sign i{color: #F6E4C4;}
.don-sign small{display: block; color: var(--muted);}
.seal{margin-left: auto; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #D1495B, #8E1C22); color: #F6E4C4; box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .15); transform: rotate(-8deg); flex: none;}
.seal .i{width: 24px; height: 24px;}
.don-rec{display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 8px 12px 8px 8px; border-radius: 16px; background: #F6E4C4; color: #1D1B18; border: 1.5px solid #1D1B18;}
.dr-av{width: 44px; flex: none; border-radius: 50%; overflow: hidden; background: #fff; border: 2px solid #1D1B18;}
.don-rec p{font-size: 13.5px; font-weight: 600;}
.onb-don{width: 260px; position: relative; margin-top: 70px;}
.onb-don .av{clip-path: inset(-40% -40% 0 -40%); position: relative; z-index: 1;}
.onb-don::after{content: ""; position: absolute; left: 6%; right: 6%; bottom: -6px; height: 18px; z-index: 0;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(29, 27, 24, .22), transparent 70%);}
.needs-don{width: 160px; position: relative;}
.needs-don .av{clip-path: inset(-40% -40% 0 -40%);}
@media (max-width: 760px){.family{padding: 18px 12px 14px;}
.family-lines{display: none;}
.family-heads{grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 2px; margin-top: 18px;}
.family-head{padding: 4px 0; gap: 4px;}
.family-head .fh-av{width: 48px;}
.family-head b{font-size: 10.5px; line-height: 1.2;}
.family-head small{display: none;}
.family-don{width: 150px;}
.onb-don{width: 220px; margin-top: 70px;}
.don-dock{right: 12px;}
.don-fab{height: 56px; padding: 0 4px;}
.don-fab-label{display: none;}
.don-fab-av{width: 48px; height: 48px;}
.don-panel{right: 12px; left: 12px; bottom: 72px; width: auto; max-height: calc(100dvh - 150px);}
.toasts{bottom: 80px;}
.needs-don{display: none;}}
.head-actions{align-items: center;}
.av-don .don-cup{display: none;}
.av-don[data-mood="work"] .don-cup,.av-don.av-fixed .don-cup{display: inline;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .family{background: radial-gradient(90% 120% at 50% 0%, #2B2614, transparent 70%), var(--card);}
:root:not([data-theme="light"]) .don-word{background: var(--card);}
:root:not([data-theme="light"]) .don-sign i{color: #F6E4C4;}}
:root[data-theme="dark"] .family-sub,.family-sub{position: relative; z-index: 1;}
@media (max-width: 760px){.stage-row{padding-bottom: 18px;}}
.week-strip{display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 6px; scrollbar-width: none;}
.week-strip::-webkit-scrollbar{display: none;}
.week-chip{display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 99px; background: var(--card); border: 1.5px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; transition: all .2s var(--ease);}
.week-chip:hover{border-color: var(--line-2);}
.week-chip.is-on{border-color: var(--ink); box-shadow: 2px 2px 0 var(--ink-edge); color: var(--ink);}
.ring.sm{width: 46px; height: 46px;}
.ring.sm b{font-size: 14px;}
.brief-hero{display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 26px; padding: 24px; border-radius: 28px; background: radial-gradient(90% 140% at 0% 0%, #FFF4D1, transparent 60%), radial-gradient(80% 120% at 100% 100%, #F6E4C4, transparent 60%), var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); margin-top: 6px;}
.up{color: var(--good);}
.down{color: var(--bad);}
.bh-don{position: relative; display: flex; align-items: center; gap: 14px;}
.bh-don-av{width: 110px; flex: none; border-radius: 50%; overflow: hidden; background: #F6E4C4; border: 2px solid #1D1B18; position: relative; z-index: 2;}
.bh-headline{font: 800 22px/1.25 var(--display); letter-spacing: -.015em;}
.bh-note{margin-top: 6px; color: var(--ink-2); font-size: 14.5px;}
.bh-note b{white-space: nowrap;}
.bh-parts{grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding-top: 16px; border-top: 1px dashed var(--line-2);}
.part{display: flex; align-items: flex-start; gap: 10px; min-width: 0;}
.part > div:last-child > b{display: block; font-size: 14px;}
.part small{display: block; color: var(--muted); font-size: 12px; line-height: 1.3;}
.part small.up{color: var(--good);}
.part small.down{color: var(--bad);}
.moves{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;}
.move{min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: var(--r); background: var(--card); border: 1.5px solid var(--ink); box-shadow: var(--ink-shadow);}
.move h3{font: 700 16px/1.3 var(--display);}
.move p{font-size: 13.5px; color: var(--ink-2);}
.who{display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); min-width: 0;}
.who span:last-child{overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.who-av{display: block; width: 28px; flex: none; border-radius: 50%; overflow: hidden; background: var(--soft, #FFF4D1); border: 1.5px solid var(--av-line); aspect-ratio: 1;}
.who-av img{width: 100%; height: 100%;}
.themes{display: grid; grid-template-columns: 1fr 1fr; gap: 12px;}
.theme{position: relative; font-size: 13px; padding: 5px 8px 9px; margin-bottom: 5px; border-radius: 8px; overflow: hidden;}
.theme span{position: absolute; left: 0; right: 0; top: auto; bottom: 0; height: 3px; border-radius: 99px; background: var(--line); z-index: 0;}
.theme span::after{content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: inherit; background: currentColor;}
.theme.good span{color: var(--good);}
.theme.bad span{color: var(--bad);}
.theme small{color: var(--muted); float: right; position: relative;}
.theme{z-index: 0;}
.theme > *{position: relative;}
.stars{flex: none; font: 800 13px var(--display); color: #96690B; min-width: 28px;}
.cov-list{list-style: none; margin: 12px 0; padding: 0; display: flex; flex-direction: column; gap: 8px;}
.cov-list li{display: grid; grid-template-columns: 120px 120px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; font-size: 13px;}
.cov-key{font-weight: 700; text-transform: capitalize;}
.cov-bar{height: 8px; border-radius: 99px; background: var(--line); overflow: hidden;}
.cov-bar i{display: block; height: 100%; min-width: 8px; background: var(--good); border-radius: inherit;}
.cov-list li:not(.full) .cov-bar i{background: var(--warn);}
.cov-list li.none .cov-bar{background: repeating-linear-gradient(135deg, var(--line-2) 0 3px, transparent 3px 7px);}
:root[data-theme="dark"] .cov-list li.none .cov-bar{background: repeating-linear-gradient(135deg, #6A6252 0 3px, #2C2A25 3px 7px);}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .cov-list li.none .cov-bar{background: repeating-linear-gradient(135deg, #6A6252 0 3px, #2C2A25 3px 7px);}}
.cov-list small{color: var(--muted);}
.cov-hire{display: inline-flex; justify-self: start; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 99px; border: 1.5px dashed var(--line-2); background: var(--card); font-size: 12px; font-weight: 700; color: var(--accent); white-space: nowrap;}
.cov-hire:hover{border-color: var(--accent);}
.cov-hire .who-av{width: 22px;}
@media (max-width: 1100px){.brief-hero{grid-template-columns: 1fr;}
.bh-parts{grid-template-columns: repeat(2, minmax(0, 1fr));}
.moves{grid-template-columns: 1fr;}
.cov-list li{grid-template-columns: 100px 80px minmax(0, 1fr);}
.cov-list li .cov-hire{grid-column: auto;}}
@media (max-width: 760px){.brief-hero{padding: 18px;}
.bh-don{flex-direction: column; align-items: flex-start;}
.bh-don-av{width: 84px;}
.bh-headline{font-size: 19px;}
.bh-parts{grid-template-columns: 1fr;}
.themes{grid-template-columns: 1fr;}
.cov-list li{grid-template-columns: 1fr;}}
:root[data-theme="dark"] .brief-hero{background: radial-gradient(90% 140% at 0% 0%, #2B2614, transparent 60%), var(--card);}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .brief-hero{background: radial-gradient(90% 140% at 0% 0%, #2B2614, transparent 60%), var(--card);}}
.link,.back,.ni-meta a,.act-meta a{padding-block: 6px; margin-block: -6px;}
.link,.back{display: inline-flex;}
.ni-meta a,.act-meta a{display: inline-block;}
.pick{width: 28px; height: 28px;}
@media (max-width: 760px){.btn-sm{min-height: 38px;}
.icon-btn{width: 40px; height: 40px;}
.seg button,.chip{min-height: 38px;}
.who-av{width: 36px; height: 36px;}
.who{min-height: 36px;}
.ni-meta a{display: inline-block; min-height: 36px;}
.cov-hire{min-height: 36px;}
.actor-tag{min-height: 36px; justify-content: center;}
.brand{min-height: 40px;}
.pick{width: 36px; height: 36px;}
.pick span{width: 28px; height: 28px;}
.link,.back,.ni-meta a{padding-block: 9px; margin-block: -9px;}
.actor-av{width: 112%; margin: 0 -6%;}}
body.is-scrolling .don-dock{transform: translateY(130%);}
.act-date{display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; font: 800 15px var(--display);}
.act-date small{font-family: var(--font); font-size: 12px; font-weight: 600; color: var(--muted);}
.act-list{list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px;}
.act-run{display: grid; grid-template-columns: 52px 36px minmax(0, 1fr) auto auto; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--line);
  transition: transform .18s var(--ease), border-color .18s, box-shadow .18s;}
.act-run:hover{transform: translateX(2px); border-color: var(--line-2); box-shadow: var(--shadow-sm);}
.act-run.is-hidden{display: none;}
.act-time{font: 600 12px var(--font); color: var(--muted); font-variant-numeric: tabular-nums;}
.act-av{width: 36px; height: 36px; flex: none; border-radius: 50%; overflow: visible; clip-path: inset(-45% 0 0 0 round 0 0 50% 50%); background: var(--soft); border: 1.5px solid var(--av-line);}
.act-text{font-size: 14px;}
.act-meta{font-size: 12px; color: var(--muted); margin-top: 1px;}
.act-meta a{color: var(--ink-2); font-weight: 650;}
.act-kind{display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 104px; font: 700 11.5px var(--font); padding: 4px 9px; border-radius: 99px; background: var(--bg-2); color: var(--ink-2); white-space: nowrap;}
.act-kind .i{width: 13px; height: 13px;}
.act-run.tone-good .act-kind{background: var(--good-soft); color: var(--good);}
.act-run.tone-warn .act-kind{background: #FFF1DD; color: #8A5200;}
:root[data-theme="dark"] .act-kind{background: #2C2A25; color: var(--ink-2);}
:root[data-theme="dark"] .act-run.tone-warn .act-kind{background: #3A2A12; color: #F0B429;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .act-kind{background: #2C2A25; color: var(--ink-2);}
:root:not([data-theme="light"]) .act-run.tone-warn .act-kind{background: #3A2A12; color: #F0B429;}}
.act-receipt{font: 700 12px var(--font); color: var(--accent); background: none; border: 1px dashed var(--line-2); border-radius: 99px; padding: 5px 11px; white-space: nowrap;}
.act-receipt:hover{border-color: var(--accent); background: var(--accent-soft);}
.act-receipt.is-none{color: var(--ink-3); border-style: dotted; font-weight: 500; cursor: default;}
.act-receipt.is-none:hover{border-color: var(--line-2); background: none;}
@media (max-width: 760px){.act-run{grid-template-columns: 36px minmax(0, 1fr) auto; row-gap: 8px; padding: 12px;}
.act-time{grid-column: 2 / -1; grid-row: 1; justify-self: start; align-self: center;}
.act-av{grid-column: 1; grid-row: 1 / span 2; align-self: start;}
.act-body{grid-column: 2 / -1; grid-row: 2;}
.act-kind{grid-column: 1 / 3; grid-row: 3; justify-self: start;}
.act-receipt{grid-column: 3; grid-row: 3;}}
.conn-grid{display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px;}
.conn-card{display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--r); background: var(--card); border: 1.5px solid var(--line); box-shadow: var(--shadow-sm);}
.conn-card.is-on{border-color: color-mix(in srgb, var(--good) 40%, var(--line));}
.conn-top{display: flex; align-items: center; gap: 11px;}
.conn-ico{width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--bg-2); color: var(--ink-2);}
.conn-ico .i{width: 20px; height: 20px;}
.conn-name{min-width: 0; flex: 1;}
.conn-name h2{font: 800 16px var(--display);}
.conn-name small{display: block; color: var(--muted); font-size: 12.5px;}
.conn-chip{font: 700 11px var(--font); padding: 4px 9px; border-radius: 99px; background: var(--bg-2); color: var(--muted); white-space: nowrap;}
.conn-card.is-on .conn-chip{background: var(--good-soft); color: var(--good);}
.conn-unlocks{display: flex; align-items: center; gap: 10px; flex-wrap: wrap;}
.conn-lbl{font: 700 10.5px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--muted);}
.conn-faces{display: flex;}
.conn-face{width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: var(--soft); border: 1.5px solid var(--av-line); margin-left: -8px; transition: transform .2s var(--spring);}
.conn-face:first-child{margin-left: 0;}
.conn-face:hover{transform: translateY(-3px) scale(1.08); z-index: 2;}
.conn-help{margin-top: 16px;}
.conn-rules{list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px;}
.conn-rules li{display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--ink-2);}
.conn-rules .i{width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--muted);}
@media (max-width: 760px){.tab{position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px; padding: 6px 4px; color: var(--muted); font: 700 10.5px var(--font); text-decoration: none;}
.tab.is-on{color: var(--accent);}
.tab.is-on::before{content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 3px; border-radius: 0 0 4px 4px; background: var(--accent);}
.tab .pill{position: absolute; top: 4px; left: 54%; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: var(--bad); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center;}
.content{padding-bottom: 104px;}}
@media (max-width: 760px){.upnext-item{flex-wrap: wrap;}
.un-body{min-width: 0;}
.un-when{margin-left: auto;}}
@media (max-width: 760px){.act-receipt{min-height: 36px;}
.un-av{width: 36px; height: 36px;}
.don-dock{display: none;}
.tab .i{width: 20px; height: 20px;}
.tab{font-size: 10.5px;}}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .cc-av{--av-line: #0C0B0A;}
:root:not([data-theme="light"]) .kpi-ico{color: var(--ink);}
:root:not([data-theme="light"]) .cc-receipt span{color: var(--c);}
:root:not([data-theme="light"]) .agent-hero::before,:root:not([data-theme="light"]) .agent-card::before{opacity: .22;}
:root:not([data-theme="light"]) .family-sub{position: relative; z-index: 1;}}
:root[data-theme="dark"] .btn-primary{--c: #14131A;}
:root[data-theme="dark"] .urgent{color: #FF8A5C;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn-primary{--c: #14131A;}
:root:not([data-theme="light"]) .urgent{color: #FF8A5C;}}
:root[data-theme="dark"] .stars{color: #F0B429;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .stars{color: #F0B429;}}
@media (max-width: 760px){.act-meta a{padding-block: 10px; margin-block: -10px;}
.conn-face{width: 36px; height: 36px;}}
:root[data-theme="dark"] .upnext-item.is-soon{background: color-mix(in srgb, var(--soft) 13%, var(--card)); border-color: var(--line-2);}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .upnext-item.is-soon{background: color-mix(in srgb, var(--soft) 13%, var(--card)); border-color: var(--line-2);}}
:root[data-theme="dark"] .cc-receipt{background: color-mix(in srgb, var(--soft) 12%, var(--card));}
:root[data-theme="dark"] .un-body small{color: var(--ink-2);}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .cc-receipt{background: color-mix(in srgb, var(--soft) 12%, var(--card));}
:root:not([data-theme="light"]) .un-body small{color: var(--ink-2);}}
:root[data-theme="dark"] .tab .pill{color: #2A1405;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tab .pill{color: #2A1405;}}
.finding{transition: border-color .18s var(--ease), background .18s var(--ease);}
.finding:hover{border-color: var(--line-2); background: var(--card);}
.dp-agent{transition: background .18s var(--ease);}
.dp-agent:hover{background: var(--bg-2);}
.tabs button:not(.is-on):hover{color: var(--ink);}
.week-strip,.tabs{-webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);}
.act-receipt{border-style: solid;}
@keyframes btnSweep{ 0% { background-position: -50% 0; } 100% { background-position: 160% 0; } }
@media (prefers-reduced-motion: no-preference){.agent-hero:hover .ah-blob{animation: morph 9s ease-in-out infinite;}}
.stamp{font-size: 22px; border-width: 3px; color: #8E1C22; border-color: #8E1C22; background: color-mix(in srgb, var(--card) 92%, transparent);}
@keyframes stampIn{
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(-16deg) scale(1.35); }
  62%  { opacity: 1; transform: translate(-50%, -50%) rotate(-11deg) scale(.97); }
  100% { opacity: 1; transform: translate(-50%, -50%) rotate(-12deg) scale(1); }
}
:root.has-poked .stage-hint,body.has-poked .stage-hint{opacity: 0; pointer-events: none; transition: opacity .4s var(--ease);}
.side > *{flex: none;}
.don-dock.is-tucked .don-fab{gap: 0; padding: 0; width: 64px; justify-content: center;}
.dp-head{gap: 16px; padding: 18px 16px 22px;}
.dp-av{margin-bottom: -8px;}
@media (max-width: 480px){.dp-head{gap: 13px; padding: 16px 14px 20px;}
.dp-av{width: 92px;}}
@media (max-width: 760px){.field input[type="text"],.field input[type="email"],.field input[type="url"],.field select,.field textarea,input[type="text"],input[type="email"],input[type="url"],input[type="search"],textarea,select{font-size: 16px;}}
.q-text small{white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;}
.bm{width: 14px; height: 14px; flex: none; display: inline-block; vertical-align: -2px; color: var(--bm, currentColor);}
.src{display: inline-flex; align-items: center; gap: 5px;}
.src .bm{width: 13px; height: 13px;}
.conn-ico.is-brand{background: #FFFFFF; border: 1px solid var(--line);}
.conn-ico.is-brand .bm{width: 22px; height: 22px;}
:root[data-theme="dark"] .conn-ico.is-brand{background: #F4F0E8; border-color: transparent;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .conn-ico.is-brand{background: #F4F0E8; border-color: transparent;}}
:root[data-theme="dark"] .btn-primary,:root[data-theme="dark"] .msg-you{--b: #7D8BFF; --c: #11132B; --edge: #5A69F0; color: #11132B;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn-primary,:root:not([data-theme="light"]) .msg-you{--b: #7D8BFF; --c: #11132B; --edge: #5A69F0; color: #11132B;}}
:root[data-theme="dark"] .agent-hero::before{background: radial-gradient(60% 90% at 0% 50%, color-mix(in srgb, var(--soft) 16%, transparent), transparent 70%);}
:root[data-theme="dark"] .agent-card::before{background: linear-gradient(180deg, color-mix(in srgb, var(--soft) 18%, transparent), transparent);}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .agent-hero::before{background: radial-gradient(60% 90% at 0% 50%, color-mix(in srgb, var(--soft) 16%, transparent), transparent 70%);}
:root:not([data-theme="light"]) .agent-card::before{background: linear-gradient(180deg, color-mix(in srgb, var(--soft) 18%, transparent), transparent);}}
.draft-text:where([contenteditable="true"], [contenteditable="plaintext-only"]){padding: 8px; background: var(--card); box-shadow: 0 0 0 2px var(--accent);}
.draft-text:focus-visible{outline: 3px solid var(--accent); outline-offset: 3px;}
.don-panel{overflow: hidden auto;}
.dp-chips{flex: 0 1 auto;}
.dp-chat{flex: 1 1 auto; min-height: 0;}
.dp-form{position: sticky; bottom: 0; background: var(--card);}
@media (min-width: 761px){.content{padding-bottom: 120px;}}
body:has(:focus-visible):not(:has(.don-dock :focus-visible)) .don-dock{opacity: .3;}
.cat-card.is-soon .cc-av{filter: none;}
.cat-card.is-soon .cc-av .av{--shirt: #D9D5CC; --acc: #C9C4BA; --cheek: transparent; opacity: .82;}
:root.calm *,:root.calm *::before,:root.calm *::after{animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important;}
.icon-btn[data-action="calm"][aria-pressed="true"]{background: var(--accent-soft); color: var(--accent);}
@keyframes favTurn{ to { transform: translateX(-50%) rotate(360deg); } }
@keyframes favDrift{ 0%, 100% { transform: translateY(0) rotate(var(--r)); } 50% { transform: translateY(-9px) rotate(calc(var(--r) + 4deg)); } }
@keyframes favFloat{ 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-9px) scale(1.12); } }
@keyframes favSeal{ 0% { opacity: 0; transform: rotate(-26deg) scale(2.1); } 60% { opacity: 1; transform: rotate(-6deg) scale(.94); } 100% { opacity: 1; transform: rotate(-9deg) scale(1); } }
@keyframes todoPulse{ 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
@keyframes todoIn{ from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: none; } }
.conn-grid.is-one{grid-template-columns: minmax(0, 1fr); max-width: 640px;}
.conn-card.is-soon{opacity: .82;}
.conn-facts{list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px;}
.conn-facts li{display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px;
  line-height: 1.5; color: var(--muted);}
.conn-facts .i{width: 14px; height: 14px; flex: none; margin-top: 2px;}
.conn-admit{font-size: 12.5px; line-height: 1.5; color: var(--ink-2); margin: 0;
  padding: 8px 10px; border-radius: 10px; background: var(--bg-2);
  border-left: 3px solid color-mix(in srgb, var(--muted) 45%, var(--line));}
.conn-unlocks.is-quiet{opacity: .7;}
.conn-face.is-later{opacity: .55;}
[data-copy].is-done{pointer-events: none;}
@media (max-width: 760px){.conn-grid.is-one{max-width: none;}
.conn-card .btn{min-height: 44px;}}
.ni-says{margin: 8px 0 0; font-size: 12.5px; color: var(--muted);}
.ni-undo{display: flex; align-items: center; gap: 6px; margin: 6px 0 0;
  font-size: 12.5px; color: var(--muted);}
.ni-undo .i{width: 14px; height: 14px; flex: none;}
@media (max-width: 760px){.need-item .ni-says,.need-item .ni-undo{grid-column: 1 / -1;}
.draft-text:where([contenteditable="true"], [contenteditable="plaintext-only"]){font-size: 16px;}}
.act-run.tone-bad .act-kind{background: #FFE3DB; color: #9A2C0C;}
.act-receipt.is-snag{color: #9A2C0C; border-color: color-mix(in srgb, #9A2C0C 40%, var(--line-2));}
.act-receipt.is-snag:hover{border-color: #9A2C0C; background: color-mix(in srgb, #9A2C0C 8%, transparent);}
:root[data-theme="dark"] .act-run.tone-bad .act-kind{background: #3C1D13; color: #FF9E80;}
:root[data-theme="dark"] .act-receipt.is-snag{color: #FF9E80;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .act-run.tone-bad .act-kind{background: #3C1D13; color: #FF9E80;}
:root:not([data-theme="light"]) .act-receipt.is-snag{color: #FF9E80;}}
.family-head.is-soon{opacity: .72;}
.family-head.is-soon .fh-av{filter: grayscale(.35);}
.fh-soon{display: block; margin-top: 4px; font-size: 10.5px; font-style: normal; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted);}
.ah-soon-note{display: flex; gap: 7px; align-items: flex-start; margin-top: 10px;
  max-width: 52ch; line-height: 1.5;}
.ah-soon-note .i{width: 15px; height: 15px; flex: none; margin-top: 2px;}
.ah-facts dd.ah-sub{margin-top: 4px; font-size: 12.5px; font-weight: 500; color: var(--muted); line-height: 1.45;}
.ah-alone.is-alone{background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 35%, var(--line));}
.ah-alone.is-alone dt{color: var(--warn);}
.empty{display: grid; justify-items: center; gap: 10px; padding: 30px 16px; text-align: center; color: var(--muted);}
.agent-card[data-progress]::after{content: ""; position: absolute; left: 1px; right: 1px; top: 0; height: 3px;
  border-radius: var(--r) var(--r) 0 0; pointer-events: none;
  background:
    linear-gradient(90deg, var(--col, var(--accent)) 0 var(--run-progress, 0%), transparent var(--run-progress, 0%) 100%),
    color-mix(in srgb, var(--col, var(--accent)) 16%, transparent);
  background-size: auto;
  animation: none;
  transition: none;}
@media (prefers-reduced-motion: no-preference){.agent-card[data-progress]::after{transition: background .45s var(--ease);}}
[aria-busy="true"]:not(.btn){cursor: progress;}
[aria-busy="true"]:not(.btn) :where(.btn, .chip, .seg, input, select, textarea){opacity: .9; transition: opacity .2s var(--ease);}
.is-waiting{min-height: 96px;}
@media (max-width: 760px){.ni-actions .btn,.need-item .btn,[data-approve],[data-skip],[data-approve-all],[data-send],[data-publish],[data-pause],[data-run],[data-spend],[data-ask-send],[data-sb-start],[data-conv-act]{min-height: 44px;}
.ni-actions{gap: 10px;}
.stage-row .actor-av{width: 100%; margin: 0;}
.stage-row .actor-tag{max-width: 100%;}}
.btn-soft:focus-visible,.chip:focus-visible,.seg button:focus-visible{box-shadow: 0 0 0 2px var(--card);}
.btn-soft:focus-visible{box-shadow: 0 2px 0 var(--edge), 0 0 0 2px var(--card);}
a,button,input,select,textarea,summary,[tabindex],:focus-visible{scroll-margin-top: 84px; scroll-margin-bottom: 116px;}
.side :where(a, button, input, select, textarea, summary, [tabindex]),.dp-chat :where(a, button, input, select, textarea, summary, [tabindex]){scroll-margin-top: 0; scroll-margin-bottom: 0;}
@media (max-width: 760px){input:not([type]),input[type="tel"],input[type="number"],input[type="password"],input[type="date"]{font-size: 16px;}}
:root.calm .agent-card[data-progress]::after{transition: none;}
.ev{display: grid; gap: 14px;}
@keyframes wsSlide{ to { transform: translateX(-50%); } }
@keyframes wsSpin{ to { transform: rotate(360deg); } }
@keyframes wsBlip{ 0%, 70%, 100% { opacity: .25; transform: rotate(var(--a)) translate(46px) rotate(calc(-1 * var(--a))) scale(.8); } 8% { opacity: 1; transform: rotate(var(--a)) translate(46px) rotate(calc(-1 * var(--a))) scale(1.5); } }
@keyframes wsBeat{ from { stroke-dashoffset: 46; } to { stroke-dashoffset: -200; } }
@keyframes wsIn{ from { opacity: 0; transform: translateY(6px); } }
@keyframes wsFall{ 0% { opacity: .5; transform: translateY(-4px); } 18%, 82% { opacity: 1; transform: none; } 100% { opacity: .5; transform: translateY(3px); } }
@keyframes wsBlink{ 50% { opacity: .35; } }
@keyframes wsCaret{ 50% { border-right-color: transparent; } }
@keyframes wsPing{ 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.agent-hero{grid-template-columns: 190px minmax(0, 1fr); gap: 24px; padding: 22px 26px;}
.agent-hero .ah-blob{width: 176px; height: 176px;}
.agent-hero .ah-av{width: 180px;}
@media (max-width: 760px){.agent-hero{grid-template-columns: 1fr; padding: 20px;}}
.found{margin: 18px 0 8px;}
.plate{display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: start; margin: 0 0 24px; padding: 18px 20px; border-radius: var(--r); background: color-mix(in srgb, var(--soft) 72%, var(--card)); border: 1.5px solid color-mix(in srgb, var(--col) 50%, var(--line)); box-shadow: var(--shadow-sm);}
:root[data-theme="dark"] .plate{background: color-mix(in srgb, var(--col) 10%, var(--card)); border-color: color-mix(in srgb, var(--col) 35%, var(--line));}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .plate{background: color-mix(in srgb, var(--col) 10%, var(--card)); border-color: color-mix(in srgb, var(--col) 35%, var(--line));}}
@media (max-width: 760px){.plate{grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 14px 16px;}}