:root { color-scheme: light dark; --ink: #0f172a; --panel: #1e293b; }
body { font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif; margin: 0; color: #e2e8f0;
  background: radial-gradient(120% 60% at 50% 0%, #1e3a5f 0%, #0b1220 55%, #070d1a 100%); min-height: 100vh; }
.top { padding: 14px 16px 6px; max-width: 560px; margin: 0 auto; }
.top h1 { margin: 0; font-size: 19px; letter-spacing: .03em; }
.top h1::before { content: ""; display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: #22c55e; margin-right: 8px; }
.conn { margin: 5px 0 0; font-size: 12px; color: #94a3b8; }
.tabs { display: flex; gap: 8px; padding: 8px 16px 0; max-width: 560px; margin: 0 auto; }
.tabs button { flex: 1; padding: 11px 6px; border: 1px solid #ffffff22; border-radius: 12px; background: #334155cc; color: #fff; cursor: pointer; font-weight: 600; }
.tabs button.active { background: linear-gradient(180deg, #7dd3fc, #38bdf8); color: #06202e; border-color: #ffffff55; }
main { padding: 12px 16px 36px; max-width: 560px; margin: 0 auto; }
.office-scale { width: 100%; }
.office-scene { position: relative; width: 100%; aspect-ratio: 4 / 5; background: #d9b98c; border-radius: 20px; overflow: hidden; border: 1px solid #0f172a55; box-shadow: 0 10px 30px #00000055; }
.office-scene.booting .furniture { animation: scene-in .5s ease .05s both; }
.office-scene.booting .actor-body { animation: actor-in .55s cubic-bezier(.2,.9,.3,1.25) both; animation-delay: calc(var(--desync, 0s) * .6); }
.furniture { position: absolute; inset: 0; width: 100%; height: 100%; }
/* floor & wall */
.board-line { stroke: #b98f5f; stroke-width: .14; opacity: .7; }
.baseboard { fill: #fff; opacity: .75; }
.corridor { fill: #cbd5e1; opacity: .55; }
.runner { fill: #7c3aed; opacity: .5; }
.runner-dash { stroke: #ede9fe; stroke-width: .45; stroke-dasharray: 1.6 1.4; opacity: .8; }
.rug { fill: #f87171; opacity: .45; } .rug-inner { fill: #fecaca; opacity: .55; }
.office-scene[data-meeting]:not([data-meeting="0"]):not([data-meeting="1"]) .rug { animation: rugglow 1.8s ease-in-out infinite; }
/* windows */
.win-frame { fill: #7c4a21; } .sun { fill: #fbbf24; } .city { fill: #64748b; opacity: .85; }
.cloud { fill: #fff; opacity: .9; }
.cloud.c1 { animation: drift 9s ease-in-out infinite alternate; }
.cloud.c2 { animation: drift 11s ease-in-out infinite alternate-reverse; }
/* wall deco */
.clock-face { fill: #fff; stroke: #475569; stroke-width: .4; } .clock-inner { fill: #f1f5f9; }
.hand { stroke: #0f172a; stroke-linecap: round; transform-box: fill-box; transform-origin: 50% 92%; }
.hand.hour { stroke-width: .45; animation: tick 43200s linear infinite; }
.hand.min { stroke-width: .35; animation: tick 3600s linear infinite; }
.hand.sec { stroke: #ef4444; stroke-width: .22; animation: tick 60s linear infinite; }
.hand-pin { fill: #0f172a; }
.poster-bg { fill: #fff; stroke: #cbd5e1; stroke-width: .25; } .poster-t { font-size: 2.1px; font-weight: 800; fill: #334155; }
.poster-bar { fill: #38bdf8; } .poster-dot { fill: #22c55e; } .poster-dot.d2 { fill: #38bdf8; } .poster-dot.d3 { fill: #f59e0b; }
.wb-frame { fill: #92400e; } .wb-face { fill: #fff; } .wb-t { font-size: 1.9px; font-weight: 800; fill: #334155; }
.wb-bar { fill: #93c5fd; } .wb-bar.d2 { fill: #86efac; } .wb-bar.d3 { fill: #fcd34d; }
/* lamps */
.pendant line { stroke: #0f172a; stroke-width: .3; } .shade { fill: #1e293b; } .bulb { fill: #fef08a; }
.pendant { transform-box: fill-box; transform-origin: 50% 0%; animation: pendswey 6.5s ease-in-out infinite; }
.pendant.p2 { animation-delay: 1.1s; } .pendant.p3 { animation-delay: 2.2s; }
.cone { fill: #fef9c3; opacity: .28; animation: glow 4s ease-in-out infinite; }
/* plants */
.pot { fill: #b45309; } .pot-rim { fill: #92400e; }
.leaf { fill: #22c55e; stroke: #15803d; stroke-width: .3; } .leaf.d2 { fill: #4ade80; } .leaf.d3 { fill: #86efac; }
.plant-sway { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 5.5s ease-in-out infinite; }
.plant-sway.d2 { animation-delay: 1.6s; }
/* stations */
.plate { fill: #0f172acc; } .st-label { font-size: 2.5px; fill: #fff; font-weight: 800; letter-spacing: .1em; }
.shadow, .plant-shadow { fill: #0f172a; opacity: .14; } .floor-glow { fill: #38bdf8; opacity: .18; }
.desk { stroke: #7c4a21; stroke-width: .35; }
.desk.wood { fill: url(#woodG); } .desk.wood2 { fill: #b98a5a; } .desk.wood3 { fill: #a8a29e; } .desk.wood-dark { fill: #8a5a2b; }
.desk-front { fill: #6b4423; opacity: .9; } .desk-top-light { fill: #fff; opacity: .3; }
.desk.meeting { fill: #d97706; stroke: #92400e; } .desk-inner { fill: #fde68a; opacity: .85; }
.screen { fill: #0f172a; stroke: #334155; stroke-width: .3; }
.screen-glow { fill: #38bdf8; opacity: .8; animation: glow 3.4s ease-in-out infinite; }
.screen-shine { fill: #fff; opacity: .25; }
.scan { fill: #e0f2fe; opacity: 0; animation: scan 3.1s ease-in-out infinite; }
.code-bar { fill: #a5f3fc; opacity: .9; animation: codeblink 2.2s ease-in-out infinite; }
.code-bar.b2 { animation-delay: .4s; } .code-bar.b3 { animation-delay: .8s; }
.stand { fill: #475569; } .stand-base { fill: #1e293b; }
.kb { fill: #f1f5f9; stroke: #94a3b8; stroke-width: .2; } .mouse { fill: #e2e8f0; stroke: #94a3b8; stroke-width: .2; }
.paper { fill: #fff; stroke: #cbd5e1; stroke-width: .25; } .paper-line { fill: #cbd5e1; }
.sticky { stroke: #00000022; stroke-width: .2; } .sticky.s1 { fill: #fef08a; } .sticky.s2 { fill: #bbf7d0; }
.mug { fill: #ef4444; } .mug-b { fill: #0ea5e9; }
.steam { stroke: #fff; stroke-width: .3; opacity: 0; animation: steam 2.6s ease-in-out infinite; } .steam.s2 { animation-delay: 1.1s; }
.chair-back { fill: #475569; } .chair-cushion { fill: #64748b; } .chair-seat { fill: #334155; }
.chair-leg { fill: #1e293b; } .chair-base { fill: #0f172a; }
.chair { fill: #475569; stroke: #1e293b; stroke-width: .3; }
.rack { fill: #1e293b; stroke: #020617; stroke-width: .35; } .rack-top { fill: #38bdf8; opacity: .85; }
.led { opacity: .95; } .led.a { fill: #22c55e; animation: blinkled 1.7s steps(2) infinite; }
.led.b { fill: #38bdf8; animation: blinkled 2.4s steps(2) infinite; } .led.c { fill: #f59e0b; animation: blinkled 1.1s steps(2) infinite; }
.fan-ring { fill: none; stroke: #0f172a; stroke-width: .3; } .fan-blade { fill: #94a3b8; transform-box: fill-box; transform-origin: center; animation: fanspin 3s linear infinite; }
.cable { stroke: #0f172a; stroke-width: .4; opacity: .7; }
.lamp-arm { stroke: #0f172a; stroke-width: .4; } .lamp-head { fill: #facc15; } .lamp-glow { fill: #fef08a; opacity: .5; animation: glow 3s ease-in-out infinite; }
/* occupied desk glow: truth のみ反映 */
.st[data-occupied] .screen-glow { opacity: 1; }
.st[data-occupied] .code-bar { animation-duration: 1.2s; }
.st[data-truth="working"] .screen-glow { fill: #22c55e; }
.st[data-truth="reviewing"] .screen-glow { fill: #a78bfa; }
.st[data-truth="testing"] .screen-glow { fill: #38bdf8; }
.st[data-truth="debugging"] .screen-glow { fill: #fb923c; }
.st[data-truth="talking"] .screen-glow { fill: #f472b6; }
.st[data-truth="error"] .screen-glow { fill: #ef4444; }
.st[data-truth="waiting"] .screen-glow, .st[data-truth="idle"] .screen-glow, .st[data-truth="unknown"] .screen-glow { fill: #94a3b8; opacity: .6; animation: none; }
.mote { fill: #fff; opacity: 0; animation: float 7s ease-in-out infinite; }
.mote.m2 { animation-delay: 1.4s; } .mote.m3 { animation-delay: 2.6s; } .mote.m4 { animation-delay: 3.8s; } .mote.m5 { animation-delay: 5s; }
.lighting { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, #fff7ed55 0%, transparent 20%, transparent 78%, #0f172a2e 100%); }
.lighting::after { content: ""; position: absolute; top: -40%; bottom: -40%; left: -70%; width: 38%; rotate: 14deg;
  background: linear-gradient(90deg, transparent, #ffffff40 45%, transparent); animation: sweep 17s ease-in-out infinite; }
/* wires */
.wires { position: absolute; inset: 0; width: 100%; height: 100%; }
.wires .link { stroke: #f59e0b; stroke-width: 0.009; stroke-dasharray: 0.025 0.015; opacity: .95; fill: none; animation: dash 1.1s linear infinite; }
.wires .link.halo { stroke: #fde68a; stroke-width: 0.02; opacity: .4; animation: none; }
.wires .pulse { fill: #fbbf24; opacity: .9; animation: pop .9s ease-in-out infinite; }
.wires .packet { fill: #fff; stroke: #f59e0b; stroke-width: 0.004; animation: travel 1.1s linear infinite; }
.wires .packet.p2 { opacity: .7; animation-delay: -.55s; }
/* actors */
.actors { position: absolute; inset: 0; }
.actor { position: absolute; inset: 0; background: none; border: 0; padding: 0; pointer-events: none; will-change: transform; transition: transform .62s cubic-bezier(.45,.05,.2,1); }
.actor-body { position: absolute; left: 0; top: 0; display: block; width: 15%; aspect-ratio: 3 / 4.4; background: none; border: 0; border-radius: 14px; padding: 0; cursor: pointer; pointer-events: auto; will-change: transform; text-align: center;
  transform: translate(-50%, -66%) scale(var(--depth, 1)); transition: transform .62s cubic-bezier(.45,.05,.2,1); }
.actor:focus-visible .av { border-color: #38bdf8; }
.actor-shadow { position: absolute; left: 20%; right: 20%; bottom: 24%; height: 6%; background: #0f172a; opacity: .2; border-radius: 50%; }
.actor .av { display: block; width: 100%; aspect-ratio: 64 / 96; box-sizing: border-box; border: 2px solid transparent; border-radius: 12px; transition: border-color .25s ease; }
.actor .av svg { transition: scale .18s cubic-bezier(.3,.8,.3,1); }
.actor[data-dir="l"] .av svg { scale: -1 1; }
.actor[data-dir="r"] { --lean: 3deg; }
.actor[data-dir="l"] { --lean: -3deg; }
.actor[data-dir="front"] { --lean: 0deg; }
.actor .dust { position: absolute; left: 50%; bottom: 24%; width: 0; height: 0; pointer-events: none; opacity: 0; }
.actor .dust i { position: absolute; width: 7px; height: 7px; margin: -3px; border-radius: 50%; background: #fff; opacity: 0; }
.actor.is-walking .dust { opacity: 1; }
.actor.is-walking .dust i { animation: puff var(--step-ms, .45s) linear infinite; }
.actor.is-walking .dust i:nth-child(2) { animation: puff2 var(--step-ms, .45s) linear infinite; animation-delay: calc(var(--step-ms, .45s) / -2); }
.actor .waves { position: absolute; top: 7%; right: 2%; width: 0; height: 0; pointer-events: none; }
.actor .waves i { position: absolute; width: 16px; height: 16px; margin: -8px; border: 2px solid #f472b6; border-radius: 50%; opacity: 0; }
.actor.is-talking .waves i { animation: ripple 1.25s ease-out infinite; }
.actor .waves i:nth-child(2) { animation-delay: .42s; }
.actor .waves i:nth-child(3) { animation-delay: .84s; }
.actor .typing-dots { display: none; gap: 3px; justify-content: center; margin-top: 1px; }
.actor .typing-dots i { width: 5px; height: 5px; border-radius: 50%; background: #0f172a; opacity: .7; }
.actor.is-working .typing-dots, .actor.is-reviewing .typing-dots, .actor.is-testing .typing-dots, .actor.is-debugging .typing-dots { display: flex; }
.actor.is-working .typing-dots i, .actor.is-reviewing .typing-dots i, .actor.is-testing .typing-dots i, .actor.is-debugging .typing-dots i { animation: dots .8s ease-in-out infinite; }
.actor.is-working .typing-dots i:nth-child(2), .actor.is-reviewing .typing-dots i:nth-child(2), .actor.is-testing .typing-dots i:nth-child(2), .actor.is-debugging .typing-dots i:nth-child(2) { animation-delay: .15s; }
.actor.is-working .typing-dots i:nth-child(3), .actor.is-reviewing .typing-dots i:nth-child(3), .actor.is-testing .typing-dots i:nth-child(3), .actor.is-debugging .typing-dots i:nth-child(3) { animation-delay: .3s; }
.actor .role { display: block; font-size: 10px; line-height: 1.5; background: #0f172add; color: #fff; border-radius: 6px; margin-top: 3px; padding: 1px 4px; white-space: nowrap; }
.actor .badge { display: block; font-size: 10px; line-height: 1.5; min-height: 15px; color: #7f1d1d; font-weight: 800; transition: color .25s ease; }
.actor .bubble { position: relative; display: inline-block; max-width: 130%; font-size: 11px; line-height: 1.4; background: #fff; color: #0f172a; border: 1.5px solid #0f172a; border-radius: 11px; padding: 2px 8px; margin-top: 2px; box-shadow: 0 2px 6px #0f172a33;
  opacity: 0; scale: .85; transform-origin: 50% 100%; transition: opacity .18s ease, scale .18s cubic-bezier(.2,.9,.3,1.35); }
.actor .bubble::after { content: ""; position: absolute; left: 50%; bottom: -4.5px; width: 8px; height: 8px; background: #fff; border-right: 1.5px solid #0f172a; border-bottom: 1.5px solid #0f172a; translate: -50% 0; rotate: 45deg; }
.actor .bubble.show { opacity: 1; scale: 1; }
.actor .bubble.pop { animation: pop .38s cubic-bezier(.2,.9,.3,1.4); }
.actor.focused .av { border-color: #38bdf8; }
.actor.at-meeting .role { background: #f59e0bee; color: #1c1005; }
.actor.is-working .badge, .actor.is-reviewing .badge, .actor.is-testing .badge, .actor.is-debugging .badge { color: #166534; }
.actor.is-talking .badge { color: #9d174d; }
.actor.is-error .badge { color: #dc2626; animation: badgepulse 1.1s ease-in-out infinite; }
.actor.is-offline .badge { color: #475569; }
/* state presence: ring + motion (transform/opacity only) */
.actor.is-working .av, .actor.is-reviewing .av, .actor.is-testing .av, .actor.is-debugging .av { border-color: #22c55e66; }
.actor.is-talking .av { border-color: #f472b666; }
.actor.is-error .av { border-color: #ef4444; }
.actor.is-offline { opacity: .55; }
.actor.is-working .av { animation: typing .8s ease-in-out infinite; animation-delay: var(--desync, 0s); }
.actor.is-reviewing .av { animation: typing 1.1s ease-in-out infinite; animation-delay: var(--desync, 0s); }
.actor.is-testing .av { animation: typing .65s ease-in-out infinite; animation-delay: var(--desync, 0s); }
.actor.is-debugging .av { animation: typing .5s ease-in-out infinite; animation-delay: var(--desync, 0s); }
.actor.is-idle .av { animation: breathe 2.8s ease-in-out infinite; animation-delay: var(--desync, 0s); }
.actor.is-waiting .av { animation: breathe 1.7s ease-in-out infinite; animation-delay: var(--desync, 0s); }
.actor.is-idle .av .eyes, .actor.is-waiting .av .eyes { animation: looks 9.5s ease-in-out infinite; animation-delay: var(--desync, 0s); }
.actor.is-idle .av .ear, .actor.is-waiting .av .ear { animation: eartwitch 6.8s ease-in-out infinite; animation-delay: var(--desync, 0s); }
.actor.is-idle .av .ear.er, .actor.is-waiting .av .ear.er { animation-delay: calc(var(--desync, 0s) + .3s); }
.actor.is-waiting .leg.r { animation: tap 1.6s ease-in-out infinite; }
.actor.is-talking .av { animation: talk .7s ease-in-out infinite; }
.actor.is-talking .head { animation: nod 1.05s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
.actor.is-walking .av { animation: walkbob var(--step-ms, .45s) ease-in-out infinite; }
.actor.is-walking .actor-shadow { animation: shadowpulse var(--step-ms, .45s) ease-in-out infinite; }
.actor.is-walking .head { animation: headbob var(--step-ms, .45s) ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
.actor.is-walking .arm.l, .actor.is-walking .arm.r { animation: armswing calc(var(--step-ms, .45s) * 2) ease-in-out infinite; }
.actor.is-walking .arm.l { animation-delay: calc(var(--step-ms, .45s) * -1); }
.actor.is-error .av { animation: shake .4s ease 2; }
.actor.is-settling .av { animation: land .38s cubic-bezier(.2,.9,.3,1.2); }
/* avatar internals */
.av .eye { fill: #0f172a; transform-box: fill-box; transform-origin: center; animation: blink 4.4s ease-in-out infinite; animation-delay: var(--desync, 0s); }
.av .spark { fill: #fff; }
.av .eye-x { display: none; stroke: #0f172a; stroke-width: 1.8; stroke-linecap: round; }
.actor.is-error .eye-x { display: block; } .actor.is-error .eyes { display: none; }
.av .mouth { stroke: #0f172a; stroke-width: 1.5; }
.av .mouth-talk, .av .mouth-worried { display: none; }
.av .mouth-talk { fill: #7f1d1d; stroke: #0f172a; }
.actor.is-talking .mouth-talk { display: block; animation: mouthmove .24s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 50%; }
.actor.is-talking .mouth-smile { display: none; }
.actor.is-error .mouth-worried { display: block; } .actor.is-error .mouth-smile { display: none; }
.av .brow { stroke: #0f172a; stroke-width: 1.3; opacity: .55; }
.actor.is-working .brow, .actor.is-error .brow { opacity: 1; }
.av .blush { fill: #f9a8d4; opacity: .35; } .actor.is-talking .blush { opacity: .8; }
.av .paw { fill: #f8fafc; stroke: #00000033; stroke-width: .8; }
.av .ear { transform-box: fill-box; transform-origin: 50% 92%; }
.av .arm { transform-box: fill-box; transform-origin: 50% 10%; }
.actor.is-working .arm.r, .actor.is-reviewing .arm.r, .actor.is-testing .arm.r, .actor.is-debugging .arm.r { animation: armtype .5s ease-in-out infinite alternate; }
.actor.is-working .arm.l, .actor.is-reviewing .arm.l, .actor.is-testing .arm.l, .actor.is-debugging .arm.l { animation: armtype .5s ease-in-out infinite alternate-reverse; }
.av .leg { transform-box: fill-box; transform-origin: 50% 0%; }
.actor.is-walking .leg.l, .actor.is-walking .leg.r { animation: legstep calc(var(--step-ms, .45s) * 2) ease-in-out infinite; }
.actor.is-walking .leg.r { animation-delay: calc(var(--step-ms, .45s) * -1); }
.av .pupil-qa { fill: #0f172a; }
.antenna-light { animation: antennablink 1.4s ease-in-out infinite; }
.actor.is-debugging .antenna-light { animation-duration: .55s; }
@keyframes typing { 0%,100% { translate: 0 0; } 50% { translate: 0 -2.5px; } }
@keyframes breathe { 0%,100% { scale: 1; } 50% { scale: 1.03; } }
@keyframes talk { 0%,100% { translate: 0 0; rotate: 0deg; } 25% { translate: 0 -1.5px; rotate: -1.2deg; } 75% { translate: 0 -1px; rotate: 1.2deg; } }
@keyframes walkbob { 0%,100% { translate: 0 0; rotate: calc(var(--lean, 0deg) - 2deg); } 50% { translate: 0 -3px; rotate: calc(var(--lean, 0deg) + 2deg); } }
@keyframes legstep { 0%,100% { rotate: 13deg; } 50% { rotate: -13deg; } }
@keyframes armswing { 0%,100% { rotate: 11deg; } 50% { rotate: -11deg; } }
@keyframes headbob { 0%,100% { translate: 0 0; rotate: -1deg; } 50% { translate: 0 -0.8px; rotate: 1deg; } }
@keyframes land { 0% { scale: 1.06 .93; } 55% { scale: .98 1.03; } 100% { scale: 1 1; } }
@keyframes looks { 0%, 52%, 100% { translate: 0 0; } 60%, 68% { translate: 1.3px 0; } 78%, 86% { translate: -1.3px 0; } }
@keyframes eartwitch { 0%, 86%, 100% { rotate: 0deg; } 90% { rotate: 9deg; } 94% { rotate: -4deg; } }
@keyframes tap { 0%, 60%, 100% { translate: 0 0; } 80% { translate: 0 -1.5px; } }
@keyframes nod { 0%, 100% { rotate: 0deg; translate: 0 0; } 35% { rotate: 2.4deg; translate: 0 0.6px; } 70% { rotate: -1.2deg; } }
@keyframes mouthmove { from { scale: 1 1; } to { scale: 1.2 .5; } }
@keyframes ripple { 0% { opacity: .7; scale: .35; } 100% { opacity: 0; scale: 1.15; } }
@keyframes puff { 0% { opacity: .5; scale: .35; translate: 0 0; } 100% { opacity: 0; scale: 1.25; translate: -6px -3px; } }
@keyframes puff2 { 0% { opacity: .45; scale: .35; translate: 0 0; } 100% { opacity: 0; scale: 1.2; translate: 6px -3px; } }
@keyframes scan { 0% { translate: 0 0; opacity: 0; } 18% { opacity: .4; } 82% { opacity: .4; } 100% { translate: 0 2.7px; opacity: 0; } }
@keyframes pendswey { 0%, 100% { rotate: -1.2deg; } 50% { rotate: 1.2deg; } }
@keyframes sweep { 0%, 100% { translate: 0 0; opacity: 0; } 12% { opacity: .5; } 55% { translate: 430% 0; opacity: .28; } 72% { opacity: 0; } }
@keyframes travel { to { offset-distance: 100%; } }
@keyframes badgepulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes rugglow { 0%, 100% { opacity: .45; } 50% { opacity: .26; } }
@keyframes actor-in { 0% { opacity: 0; scale: .75; } 100% { opacity: 1; scale: 1; } }
@keyframes scene-in { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes armtype { from { translate: 0 0; rotate: -4deg; } to { translate: 0 -2px; rotate: 4deg; } }
@keyframes shadowpulse { 0%,100% { scale: 1; opacity: .2; } 50% { scale: .88; opacity: .13; } }
@keyframes blink { 0%,92%,100% { scale: 1 1; } 95% { scale: 1 .08; } }
@keyframes blinkled { 50% { opacity: .25; } }
@keyframes glow { 0%,100% { opacity: .35; } 50% { opacity: .65; } }
@keyframes codeblink { 0%,100% { opacity: .9; } 50% { opacity: .4; } }
@keyframes steam { 0% { opacity: 0; translate: 0 1px; } 40% { opacity: .8; } 100% { opacity: 0; translate: 0 -2px; } }
@keyframes sway { 0%,100% { rotate: -2deg; } 50% { rotate: 2deg; } }
@keyframes drift { from { translate: -1px 0; } to { translate: 1.5px 0; } }
@keyframes float { 0%,100% { opacity: 0; translate: 0 3px; } 50% { opacity: .8; translate: 0 -3px; } }
@keyframes dots { 0%,100% { translate: 0 0; opacity: .5; } 50% { translate: 0 -3px; opacity: 1; } }
@keyframes dash { to { stroke-dashoffset: -0.08; } }
@keyframes pop { 0% { scale: .6; opacity: 0; } 60% { scale: 1.08; opacity: 1; } 100% { scale: 1; opacity: 1; } }
@keyframes shake { 0%,100% { translate: 0 0; } 25% { translate: -2px 0; } 75% { translate: 2px 0; } }
@keyframes tick { to { rotate: 360deg; } }
@keyframes fanspin { to { rotate: 360deg; } }
@keyframes antennablink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) {
  .actor, .actor-body, .actor .av, .actor .av svg, .actor .typing-dots i, .av .eye, .av .ear, .av .head, .av .eyes, .av .arm, .av .leg, .av .mouth-talk,
  .actor .waves i, .actor .dust i, .actor .bubble, .actor .bubble.pop, .actor.is-error .badge, .antenna-light,
  .screen-glow, .code-bar, .scan, .rug, .led.a, .led.b, .led.c, .plant-sway, .wires .link, .wires .packet,
  .hand, .pendant, .cloud, .steam, .cone, .lamp-glow, .mote, .fan-blade,
  .office-scene.booting .actor-body, .office-scene.booting .furniture { animation: none !important; transition: none !important; }
}
ul[data-talk], ul[data-flow], ul[data-team] { background: #f8fafc; color: #0f172a; border-radius: 14px; padding: 12px 16px; list-style: none; display: grid; gap: 8px; border: 1px solid #e2e8f0; }
ul[data-talk] li, ul[data-flow] li, ul[data-team] li { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px 10px; font-size: 13px; }