:root {
  color-scheme: light dark;
  --bg:#F7F8F4; --surface:#FFFFFF; --surface-2:#EDF3ED; --text:#14213D; --muted:#52645B;
  --accent:#3FAE63; --green:#0E5C3F; --sun:#FFC53D; --navy:#14213D; --line:#CFDAD1;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px; --s6:48px;
  --t1:13px; --t2:15px; --t3:17px; --t4:20px; --t5:24px; --t6:32px;
  --r1:12px; --r2:20px; --r3:28px;
  /* System fonts render immediately; there is no webfont to fetch or block. */
  font:17px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,"Segoe UI",sans-serif;
  color:var(--text); background:var(--bg);
}
* { box-sizing:border-box; min-width:0; }
body { margin:0; overflow:hidden; overflow-x:hidden; }
button,input,textarea,select { font:inherit; }
button,.button { min-width:48px; min-height:48px; border:1px solid var(--line); border-radius:var(--r1); padding:8px 16px; background:var(--surface); color:var(--text); cursor:pointer; transition:background-color 175ms ease-out,border-color 175ms ease-out,transform 175ms ease-out; }
button:hover,.button:hover { border-color:var(--green); background:var(--surface-2); }
button:active,.button:active { transform:translateY(1px); }
button:disabled { cursor:default; color:var(--muted); background:var(--surface-2); }
:focus-visible { outline:3px solid var(--green); outline-offset:3px; }
a { color:var(--green); text-underline-offset:3px; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:var(--t6); line-height:1.15; letter-spacing:-.04em; }
h2 { font-size:var(--t5); line-height:1.25; letter-spacing:-.025em; }
h3 { font-size:var(--t4); }
[hidden] { display:none!important; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.svg-defs { position:absolute; width:0; height:0; overflow:hidden; }
.app { position:relative; top:var(--viewport-top,0px); width:100%; max-width:760px; height:var(--app-height,100dvh); margin:auto; display:flex; flex-direction:column; padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom)); overflow:hidden; }
.app-header { display:flex; align-items:center; gap:8px; flex-shrink:0; padding-bottom:16px; border-bottom:1px solid var(--line); }
.brand-copy { flex:1; }
.app-header h1 { font-size:var(--t5); margin:0 0 2px; }
#impact { font-size:var(--t1); color:var(--muted); }
.icon-button { display:inline-flex; gap:8px; justify-content:center; align-items:center; padding:8px; flex-shrink:0; }
.icon-button>span[aria-hidden] { font-size:var(--t5); line-height:1; }
#language { font-size:var(--t2); font-weight:650; background:transparent; }
#settings-open { background:transparent; }
.desktop-label { display:none; }
#connection { color:var(--muted); font-size:var(--t1); }
#connection:not(:empty) { padding-top:8px; }
#thread { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; overflow-wrap:anywhere; padding:24px 4px 16px 0; }
.welcome-card { text-align:center; max-width:520px; margin:8px auto 0; padding:16px 8px 24px; }
.welcome-card .eyebrow { display:block; font-size:var(--t1); color:var(--muted); margin:8px 0; }
.welcome-card h2 { font-size:var(--t5); margin:0 0 8px; }
.welcome-card>p { color:var(--muted); font-size:var(--t3); max-width:360px; margin:0 auto; white-space:normal; }
#quick { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; max-width:420px; margin:24px auto; }
#quick button { border-radius:28px; padding:8px 12px; font-size:var(--t2); text-align:left; background:var(--surface); overflow-wrap:anywhere; }
.mini-steps { display:flex; justify-content:center; gap:16px; color:var(--muted); font-size:var(--t1); padding-top:8px; }
#status { flex-shrink:0; min-height:19px; margin:8px 0; font-size:var(--t1); color:var(--muted); }
#composer { flex-shrink:0; padding:3px; border:1px solid var(--line); border-radius:var(--r2); background:var(--surface); box-shadow:0 8px 24px #14213d08; transition:border-color 175ms ease-out; }
#composer:focus-within { border-color:var(--green); }
#composer:has(textarea:focus-visible) { outline:2px solid var(--green); outline-offset:3px; }
textarea:focus-visible { outline:none; }
.compose-row { display:flex; align-items:center; gap:4px; min-height:48px; }
#camera { border:0; background:transparent; font-size:var(--t4); padding:8px; }
textarea { flex:1; width:0; min-height:48px; max-height:96px; padding:12px 4px; resize:none; border:0; background:transparent; color:var(--text); line-height:24px; }
textarea::placeholder,input::placeholder { color:var(--muted); opacity:1; }
#send { border:0; border-radius:16px; background:var(--surface-2); color:var(--muted); }
#send.ready { background:var(--accent); color:var(--navy); }
#attachment:not([hidden]) { display:flex; align-items:center; gap:16px; padding:8px; }
#thumbnail { width:64px; height:64px; object-fit:cover; border-radius:var(--r1); }
.app>footer { flex-shrink:0; text-align:center; padding-top:8px; font-size:var(--t1); color:var(--muted); }
.bubble { position:relative; width:fit-content; max-width:calc(100% - 40px); margin:0 0 24px; padding:16px; border:1px solid var(--line); border-radius:var(--r2); background:var(--surface); overflow-wrap:anywhere; }
.bubble.user { margin-left:auto; background:var(--surface-2); border-color:transparent; border-bottom-right-radius:4px; }
.bubble.agent { margin-left:40px; border-bottom-left-radius:4px; min-width:120px; }
.bubble img { display:block; max-width:100%; width:auto; max-height:200px; margin-bottom:8px; border-radius:var(--r1); }
.message-text { white-space:pre-wrap; }
.message-text p { margin:0 0 8px; }
.message-text p:last-child { margin-bottom:0; }
.message-text p:empty { min-height:8px; }
.message-text ul,.message-text ol { white-space:normal; margin:8px 0 16px; padding-left:24px; }
.message-text li { margin:8px 0; }
.message-text code { font-size:var(--t2); padding:2px 4px; border-radius:4px; background:var(--surface-2); }
.thinking-dots { display:none; height:32px; gap:6px; align-items:center; }
.thinking-dots span { width:6px; height:6px; border-radius:50%; background:var(--green); animation:thinking-dot 1.2s ease-in-out infinite; }
.thinking-dots span:nth-child(2) { animation-delay:.15s; }
.thinking-dots span:nth-child(3) { animation-delay:.3s; }
.is-thinking:not(.has-text) .thinking-dots { display:flex; }
.is-thinking:not(.has-text) .message-text { display:none; }
.is-thinking .message-text { min-height:32px; }
@keyframes thinking-dot { 0%,70%,100% { transform:translateY(0); } 35% { transform:translateY(-4px); } }
.tool-pills { display:flex; flex-wrap:wrap; gap:8px; padding-top:8px; }
.tool-pill { font-size:var(--t1); color:var(--muted); background:var(--surface-2); border-radius:12px; padding:4px 8px; }
.fraction-badges { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.fraction-badge { border:1px solid var(--line); border-left:6px solid var(--fraction); border-radius:var(--r1); padding:4px 8px; color:var(--text); background:var(--surface-2); font-size:var(--t1); }
.fraction-food,.fraction-reuse { --fraction:#3FAE63; }
.fraction-plastic { --fraction:#B277D4; }
.fraction-paper { --fraction:#4F9DD6; }
.fraction-glass { --fraction:#409A96; }
.fraction-residual { --fraction:#82909B; }
.fraction-hazard { --fraction:#D45B57; }
.fraction-deposit { --fraction:#AA7F0B; }
.source-links { display:flex; flex-wrap:wrap; gap:0 12px; margin-top:8px; font-size:var(--t1); }
.source-links a { display:inline-flex; align-items:center; min-height:48px; }
.answer-tip { background:var(--surface-2); border-radius:var(--r1); padding:12px; font-size:var(--t2); margin-top:8px; }
.answer-tip>strong { display:block; font-size:var(--t1); margin-bottom:4px; }
.answer-tip p { margin:0; }
.answer-actions { display:flex; gap:8px; margin-top:8px; }
.answer-actions button { display:inline-flex; gap:8px; align-items:center; border:0; font-size:var(--t1); background:transparent; padding:8px; }
.mascot { flex-shrink:0; overflow:visible; }
.header-mascot { width:40px; height:40px; }
.welcome-mascot { width:112px; height:112px; display:block; margin:0 auto 8px; }
.bubble-mascot { position:absolute; left:-40px; top:8px; width:32px; height:32px; }
.idle { --eye-animation:blink 4.2s infinite; --pompom-animation:pompom-sway 2.8s ease-in-out infinite; }
.thinking { --body-animation:bob 1.5s ease-in-out infinite; --sparkle-animation:sparkle .8s ease-in-out infinite alternate; }
.happy { --wing-animation:flap .28s ease-in-out 4 alternate; --sparkle-animation:sparkle .8s ease-in-out 4 alternate; }
.bird-eye { transform-box:fill-box; transform-origin:center; animation:var(--eye-animation,none); }
.bird-body { transform-origin:center; animation:var(--body-animation,none); }
.bird-sparkle { opacity:.5; animation:var(--sparkle-animation,none); }
.bird-wing { transform-box:fill-box; transform-origin:right center; animation:var(--wing-animation,none); }
.bird-pompom { transform-box:fill-box; transform-origin:center bottom; animation:var(--pompom-animation,none); }
@keyframes blink { 0%,90%,94%,100% { transform:scaleY(1); } 92% { transform:scaleY(.08); } }
@keyframes bob { 50% { transform:translateY(-4px) rotate(-3deg); } }
@keyframes sparkle { to { opacity:1; } }
@keyframes flap { to { transform:rotate(28deg); } }
@keyframes pompom-sway { 0%,100% { transform:rotate(-8deg); } 50% { transform:rotate(9deg) translateX(1px); } }
dialog { width:min(calc(100% - 32px),480px); max-height:90dvh; border:1px solid var(--line); border-radius:var(--r3); padding:24px; color:var(--text); background:var(--surface); overflow:auto; }
dialog::backdrop { background:#14213d80; backdrop-filter:blur(4px); }
dialog h2 { font-size:var(--t5); margin-bottom:16px; }
dialog label { display:block; margin:16px 0 8px; font-size:var(--t2); }
dialog p { color:var(--muted); font-size:var(--t2); }
dialog input,dialog select { width:100%; min-height:48px; padding:8px 12px; border:1px solid var(--line); border-radius:var(--r1); background:var(--bg); color:var(--text); }
.settings-tools { display:flex; flex-wrap:wrap; gap:8px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.about-link { display:inline-flex; align-items:center; min-height:48px; padding:8px; font-size:var(--t2); }
.actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin-top:24px; }
.primary { background:var(--accent); color:var(--navy); border-color:transparent; font-weight:650; }
.primary:hover { background:var(--accent); color:var(--navy); }
.camera-sheet { position:fixed; inset:0; width:100%; height:100dvh; max-width:none; max-height:none; margin:0; padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom)); border:0; border-radius:0; display:flex; flex-direction:column; background:var(--bg); }
.camera-sheet:not([open]) { display:none; }
.camera-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.camera-toolbar h2 { font-size:var(--t4); margin:0; }
.viewfinder { position:relative; flex:1; min-height:120px; overflow:hidden; border-radius:var(--r3); background:#14213D; }
.viewfinder video,.viewfinder img { width:100%; height:100%; object-fit:contain; position:absolute; inset:0; }
.frame-guide { position:absolute; inset:12%; border:2px solid #F7F8F4; border-radius:var(--r2); opacity:.7; }
.scan-line { position:absolute; left:12%; right:12%; top:14%; height:2px; background:#FFC53D; box-shadow:0 0 24px #ffc53d80; animation:scan 3s ease-in-out infinite alternate; }
@keyframes scan { to { top:84%; } }
.viewfinder-label { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); padding:8px 12px; white-space:nowrap; border-radius:var(--r1); color:#F7F8F4; background:#14213D; font-size:var(--t1); }
.shutter-actions { display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:24px; }
#switch-camera,.shutter-balance { flex:1; }
#switch-camera { font-size:var(--t1); padding:8px; }
.shutter { width:80px; height:80px; border-radius:50%; background:var(--surface); border:2px solid var(--green); padding:6px; flex-shrink:0; }
.shutter>span { display:block; height:100%; border-radius:50%; background:var(--accent); }
.reviewing .scan-line,.reviewing .frame-guide,.reviewing .viewfinder-label { display:none; }
#camera-status { text-align:center; min-height:24px; margin:8px 0 0; }
#confetti { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:20; }
.site-page { overflow-y:auto; overflow-x:hidden; }
.site-shell { width:100%; max-width:1040px; margin:auto; padding:16px max(16px,env(safe-area-inset-right)) 32px; }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:8px 0 24px; }
.site-header nav { display:flex; gap:8px; align-items:center; }
.brand { display:inline-flex; align-items:center; gap:8px; color:var(--text); text-decoration:none; font-size:var(--t5); font-weight:750; }
.brand img { border-radius:var(--r1); }
.button { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; font-size:var(--t2); font-weight:650; }
.site-hero { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:32px; align-items:center; padding:32px 0 48px; }
.site-kicker { color:var(--green); font-size:var(--t1); letter-spacing:.12em; font-weight:700; }
.site-hero h1 { font-size:var(--t6); margin:16px 0; max-width:540px; }
.site-intro { font-size:var(--t3); color:var(--muted); max-width:520px; margin:0 0 24px; }
.site-small { font-size:var(--t1); color:var(--muted); margin:16px 0 0; }
.hero-art { position:relative; display:grid; place-items:center; min-height:240px; border-radius:var(--r3); background:var(--surface-2); }
.hero-art img { width:64%; height:auto; max-width:240px; transform:rotate(-5deg); border-radius:var(--r2); }
.hero-spark { position:absolute; right:16px; top:0; color:var(--green); font-size:48px; }
.hero-sticker { position:absolute; bottom:8px; right:8px; border-radius:var(--r1); padding:8px 16px; background:var(--sun); color:var(--navy); transform:rotate(-4deg); font-size:var(--t2); font-weight:650; }
.feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.site-card { padding:24px; border:1px solid var(--line); border-radius:var(--r2); background:var(--surface); }
.site-card h2 { font-size:var(--t4); margin:16px 0 8px; }
.site-card p { color:var(--muted); font-size:var(--t2); margin-bottom:0; }
.feature-icon { display:grid; place-items:center; width:48px; height:48px; border-radius:var(--r1); background:var(--surface-2); color:var(--green); font-size:var(--t5); }
.how-strip { padding:40px 0; }
.how-strip h2 { font-size:var(--t4); margin:0 0 16px; }
.how-strip ol { display:flex; flex-wrap:wrap; gap:8px 16px; list-style:none; padding:0; margin:0; color:var(--muted); font-size:var(--t2); }
.how-strip li:not(:last-child)::after { content:' →'; color:var(--green); margin-left:8px; }
.how-strip a { display:inline-flex; min-height:48px; align-items:center; }
.municipality-card { display:flex; align-items:center; gap:24px; background:var(--surface-2); }
.municipality-card>div { flex:1; }
.municipality-mark { font-size:80px; color:var(--green); }
.install-section { margin-top:24px; padding:24px; border:1px solid var(--line); border-radius:var(--r2); background:var(--surface); }
.install-section h2 { font-size:var(--t4); margin-bottom:8px; }
.install-section p { color:var(--muted); font-size:var(--t2); margin:0; }
.site-final { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:32px 0; }
.site-final h2 { font-size:var(--t4); margin:0; }
.site-footer { border-top:1px solid var(--line); padding-top:24px; color:var(--muted); font-size:var(--t1); }
.site-footer>p { margin:0 0 16px; }
.site-footer details summary { display:flex; align-items:center; min-height:48px; cursor:pointer; color:var(--green); }
.site-footer details p { line-height:1.45; }
.site-sticky { display:none; }
.skip-link { position:fixed; left:16px; top:-100px; padding:16px; background:var(--surface); border:2px solid var(--green); z-index:30; }
.skip-link:focus { top:16px; }
@media(min-width:480px) { .desktop-label { display:inline; font-size:var(--t2); } .icon-button { padding-inline:12px; } }
@media(max-width:640px) {
  .site-hero { grid-template-columns:minmax(0,1fr); gap:24px; padding:24px 0 32px; }
  .hero-art { min-height:192px; max-width:320px; width:100%; margin:auto; }
  .hero-art img { width:160px; }
  .feature-grid { grid-template-columns:minmax(0,1fr); gap:8px; }
  .site-card { padding:20px; }
  .municipality-mark { display:none; }
  .site-final { flex-wrap:wrap; }
  .site-shell { padding-bottom:112px; }
  .site-sticky { display:flex; position:fixed; z-index:10; bottom:0; left:0; right:0; justify-content:space-between; align-items:center; gap:16px; padding:12px 16px max(12px,env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--surface); }
  .site-sticky>span { font-size:var(--t2); font-weight:650; }
}
@media(max-height:600px) { .welcome-mascot { width:80px; height:80px; } .welcome-card { margin:0; padding-top:0; } .app>footer { display:none; } }
@media(prefers-color-scheme:dark) {
  :root { --bg:#111C24; --surface:#1B2C31; --surface-2:#233A32; --text:#EAF0ED; --muted:#B3C3B9; --green:#8DDBA4; --line:#40574F; }
  :focus-visible { outline-color:var(--sun); }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  #confetti { display:none; }
}
/* Speech is opt-in; the button remains hidden without browser support. */
#microphone { border:0; background:transparent; touch-action:none; }
#microphone.listening { color:var(--navy); background:var(--accent); animation:mic-pulse 1.2s ease-in-out infinite; }
textarea.speech-interim { color:var(--muted); }
@keyframes mic-pulse { 50% { box-shadow:0 0 0 4px var(--surface-2); } }
@media(prefers-reduced-motion:reduce) { #microphone.listening { animation:none; } }
:lang(zh-CN) .welcome-card h2 { font-size:var(--t4); line-height:1.5; }
.brand-copy #impact { display:none; }
#game-pill { display:block; min-height:48px; max-width:100%; padding:8px 0; border:0; background:transparent; font-size:var(--t1); text-align:left; color:var(--green); }
.reward-header { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.reward-header h2 { margin:0; }
#game-level { margin:16px 0 8px; }
#game-next { font-size:var(--t2); }
#game-progress { width:100%; height:12px; accent-color:var(--accent); margin-bottom:24px; }
#game-badges { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:24px; }
.reward-card { padding:12px; border:1px solid var(--line); border-radius:var(--r1); background:var(--surface-2); }
.reward-card.unlocked { border-color:var(--green); }
.reward-icon { font-size:32px; }
.reward-card.locked .reward-icon { filter:grayscale(1); }
.reward-card h3 { font-size:var(--t2); margin:8px 0; }
.reward-card p,.reward-card small { font-size:var(--t1); color:var(--muted); }
.reward-card p { margin-bottom:8px; }
.reward-card small { display:block; }
#game-history { padding:0; list-style:none; }
#game-history li { display:flex; align-items:start; gap:16px; justify-content:space-between; border-top:1px solid var(--line); padding:12px 0; font-size:var(--t1); }
#game-history time { color:var(--muted); white-space:nowrap; }
#game-toast { position:fixed; z-index:15; left:50%; bottom:max(112px,env(safe-area-inset-bottom)); transform:translateX(-50%); width:max-content; max-width:calc(100% - 32px); background:var(--surface); color:var(--text); border:1px solid var(--green); padding:12px 16px; border-radius:var(--r2); box-shadow:0 8px 24px #14213d18; font-size:var(--t2); }

.profile-avatar { width:48px; height:48px; flex-shrink:0; display:grid; place-items:center; padding:0; border:0; background:transparent; }
.brand-line { display:flex; align-items:baseline; gap:8px; }
#account-display-name { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:var(--t1); color:var(--muted); }
#account-kind { margin:16px 0 0; color:var(--green); font-size:var(--t2); }
#account-email { overflow-wrap:anywhere; margin-bottom:8px; }
#account-name-help { font-size:var(--t1); margin:8px 0; }
#account-okta { margin-top:24px; width:100%; }
#account-logout { margin-top:24px; }
#account-status { margin-top:16px; }
.claim-nudge:not([hidden]) { flex-shrink:0; display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px; border:1px solid var(--green); border-radius:var(--r2); background:var(--surface-2); }
.claim-nudge p { flex-basis:100%; font-size:var(--t2); margin:0; }
.claim-nudge #claim-signin { margin-left:auto; }

/* Six compact, native buttons; works with touch, keyboard and narrow screens. */
.mascot-settings { margin:16px 0; }
.mascot-settings h3 { margin:0 0 8px; font-size:var(--t2); }
.mascot-picker { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; }
.mascot-option { display:flex; min-width:0; padding:6px 2px; flex-direction:column; align-items:center; gap:4px; background:var(--surface); border:2px solid transparent; border-radius:12px; font-size:11px; }
.mascot-option img { width:44px; height:44px; object-fit:contain; }
.mascot-option span { max-width:100%; overflow-wrap:anywhere; }
.mascot-option[aria-pressed="true"] { border-color:var(--green); background:var(--surface-2); }
.brand-copy { min-width:0; }
.brand-line { flex-wrap:wrap; gap:2px 6px; }
#account-display-name { max-width:100px; }
#account-signin { padding:2px 6px; min-height:24px; font-size:11px; background:var(--surface-2); }
img.mascot { object-fit:contain; }
@media(max-width:380px) { .mascot-option img { width:36px; height:36px; } .mascot-option { font-size:10px; } }

.locate-button { margin-top:8px; }
.locate-note { display:block; margin:8px 0; color:var(--muted); }
.locate-status { margin:8px 0; overflow-wrap:anywhere; }

.reward-tabs { display:flex; gap:8px; margin:16px 0; }
.reward-tabs button { flex:1; }
.reward-tabs [aria-selected="true"] { outline:2px solid var(--green); outline-offset:-2px; }
.leaderboard-list { padding:0; list-style:none; }
.leaderboard-row { display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:8px; padding:12px 8px; border-bottom:1px solid var(--line); border-radius:8px; }
.leaderboard-row.current-user { outline:2px solid var(--green); outline-offset:-2px; }
.leaderboard-name { overflow-wrap:anywhere; }
.leaderboard-rank { font-weight:700; }
.leaderboard-level { grid-column:2 / -1; justify-self:start; padding:2px 8px; border:1px solid var(--line); border-radius:20px; font-size:var(--t1); }

.profile-toast { padding:12px 16px; margin:16px 0; border:1px solid var(--green); border-radius:var(--r1); background:var(--surface-2); color:var(--text); }

/* Five one-shot eggs; decorative layers never receive pointer events. */
[data-egg-mascot] { position:relative; overflow:visible; }
.welcome-mascot-trigger { display:block; width:112px; min-width:0; min-height:0; margin:0 auto 8px; padding:0; border:0; background:transparent; }
.welcome-mascot-trigger:hover { background:transparent; }
.welcome-mascot-trigger .welcome-mascot { margin:0; }
.egg-accessory { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.egg-crown { position:absolute; right:-3px; top:-9px; color:#BD8A19; font-size:20px; line-height:1; text-shadow:0 1px var(--surface); pointer-events:none; }
.egg-pip { position:absolute; left:75%; top:0; padding:3px 8px; border:1px solid var(--line); border-radius:12px 12px 12px 0; background:var(--surface); color:var(--text); font-size:12px; pointer-events:none; z-index:2; }
.egg-wink::after { content:'⌣'; position:absolute; top:29%; left:46%; font-size:18px; color:var(--text); background:var(--surface-2); line-height:.5; border-radius:50%; pointer-events:none; }
.egg-loop .mascot { animation:egg-loop 1.2s ease-in-out; }
.egg-loop::before { content:'✦ · ✧'; position:absolute; inset:10%; color:var(--sun); font-size:18px; pointer-events:none; animation:egg-trail 1.2s ease-out; }
.egg-dizzy .mascot { animation:egg-dizzy .2s ease-in-out 5; }
@keyframes egg-loop { 0%,100% { transform:translate(0,0) rotate(0); } 25% { transform:translate(14px,-16px) rotate(90deg); } 50% { transform:translate(0,-30px) rotate(180deg); } 75% { transform:translate(-14px,-16px) rotate(270deg); } 99% { transform:rotate(360deg); } }
@keyframes egg-trail { 0% { opacity:0; transform:rotate(0) scale(.7); } 25% { opacity:1; } 100% { opacity:0; transform:rotate(270deg) scale(1.3); } }
@keyframes egg-dizzy { 0%,100% { transform:rotate(-7deg); } 50% { transform:rotate(7deg); } }
@media(prefers-reduced-motion:reduce) { .egg-loop::before,.egg-wink::after { display:none; } }
@media(max-height:600px) { .welcome-mascot-trigger { width:80px; } }