:root { color-scheme:light; --paper:#f7f5ef; --ink:#243247; --orange:#e9893e; --blue:#087dcd; font-family:"Segoe UI",Arial,sans-serif; font-synthesis:none; }
* { box-sizing:border-box; }
html,body { margin:0; width:100%; height:100%; overflow:hidden; background:var(--paper); color:var(--ink); }
body { background-image:radial-gradient(ellipse at 50% 42%,#fffdf7,transparent 72%); }
button,a { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button { font:inherit; cursor:pointer; }
a { color:inherit; text-decoration:none; }
[hidden] { display:none !important; }
button:focus-visible,a:focus-visible,.field:focus-visible { outline:2px solid var(--blue); outline-offset:4px; }
.field:focus-visible { outline-offset:-2px; border-radius:18px; }
.field:focus:not(:focus-visible) { outline:none; }
.field,.field * { -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.shell { height:100svh; height:100dvh; max-width:1440px; margin:auto; padding:0 clamp(20px,5vw,76px); display:grid; grid-template-rows:92px minmax(0,1fr) 52px; }
header { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; }
.brand { grid-column:2; }
.header-actions { grid-column:3; justify-self:end; display:flex; align-items:center; }
.sound-toggle { width:44px; height:44px; display:grid; place-items:center; padding:12px; border:1px solid #deddd3; border-radius:50%; background:transparent; color:#798a91; }
.sound-toggle:hover { color:var(--blue); border-color:#b7c8ce; }
.sound-toggle svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.sound-slash,.sound-toggle[aria-pressed="false"] .sound-waves { display:none; }
.sound-toggle[aria-pressed="false"] .sound-slash { display:block; }
.brand-mark { display:block; width:103px; height:31px; position:relative; overflow:hidden; }
.brand-mark img { position:absolute; width:123%; height:auto; max-width:none; left:-11%; top:0; transform:translateY(-33.4%); mix-blend-mode:multiply; }
main { min-height:0; display:grid; grid-template-rows:112px minmax(0,1fr) 78px; }
.intro { text-align:center; display:flex; justify-content:center; align-items:center; }
h1 { font-size:clamp(28px,3.4vw,44px); line-height:1.2; letter-spacing:-1.5px; margin:0; height:2.4em; width:100%; font-weight:500; }
#typed { white-space:pre-line; background:linear-gradient(90deg,#23659d,#243247 62%); background-clip:text; -webkit-background-clip:text; color:transparent; }
.cursor { display:inline-block; width:2px; height:.85em; margin-left:6px; vertical-align:-.02em; background:var(--orange); animation:blink 1s steps(1) infinite; }
.cursor.is-finished { opacity:0; animation:none; }
.field { position:relative; min-height:0; width:min(100%,540px); margin:auto; height:100%; user-select:none; -webkit-user-select:none; touch-action:none; cursor:pointer; overflow:hidden; isolation:isolate; border-radius:28px 28px 12px 12px; background:linear-gradient(180deg,#deedf2 0%,#edf4f2 46%,#f9f4e7 90%); box-shadow:inset 0 0 0 1px #c4d7da70,0 12px 40px -28px #48747b55; }
.field::after { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 1px 0 #ffffffc0; pointer-events:none; }
.sky { width:100%; height:100%; display:block; }
.sky-decor { pointer-events:none; }
.scoreboard { position:absolute; top:14px; left:50%; transform:translateX(-50%); display:flex; gap:0; z-index:2; padding:10px 0; border:1px solid #ffffffd0; border-radius:16px; background:#ffffffd9; box-shadow:0 4px 16px #648b9810; pointer-events:none; font:8px/1.3 ui-monospace,Consolas,monospace; letter-spacing:1.4px; color:#77909b; }
.scoreboard > span { padding:0 16px; }
.scoreboard > span + span { border-left:1px solid #dbe5e4; }
.scoreboard span { display:flex; align-items:center; gap:9px; }
.scoreboard b { font:500 17px/1 "Segoe UI",Arial,sans-serif; color:#426779; letter-spacing:0; min-width:12px; }
.scoreboard span:last-child b { color:#bc834d; }
.floor { stroke:#a7b8a6; stroke-width:1.2; stroke-linecap:round; }
.cloud { fill:url(#cloud-fill); stroke:#b9d1db; stroke-width:.8; vector-effect:non-scaling-stroke; }
.cloud-highlight { fill:none; stroke:#ffffff; stroke-width:2.4; stroke-linecap:round; opacity:.85; }
.cloud-underbelly { fill:none; stroke:#c5dde7; stroke-width:2; stroke-linecap:round; opacity:.6; }
.roof { fill:url(#building-fill); stroke:#89adbb; stroke-width:.8; stroke-linejoin:round; }
.roof-trim { fill:none; stroke:#759ba9; stroke-width:2; stroke-linecap:round; }
.roof-antenna { fill:none; stroke:#8aa7af; stroke-width:1; stroke-linecap:round; }
.message-tag { fill:#fffdf7; stroke:#dfd9c9; stroke-width:.6; }
.cloud-message { fill:#6e7b7f; font:500 9px "Segoe UI",Arial,sans-serif; text-anchor:middle; }
.gap-spark { fill:#e9aa50; }
.spark-halo { fill:#ffe5b2; opacity:.45; }
.bird { pointer-events:none; filter:drop-shadow(0 2px 1px #245d7214); }
.bird-body { transform-origin:0 10px; }
.resting .bird-body { transform:rotate(-8deg) scaleY(.78); animation:breathe 2.8s ease-in-out infinite; }
.awake-eye,.bird:not(.resting) .sleep-eye,.bird:not(.resting) .sleep-z { display:none; }
.bird:not(.resting) .awake-eye { display:block; }
.sleep-z { font:13px ui-monospace,monospace; fill:#8da8b5; animation:doze 2.8s ease-in-out infinite; }
.sleep-z.second { font-size:9px; animation-delay:1.3s; }
.resting .feet { opacity:0; }
.resting .awake-eye { display:block; transform-origin:12px -4px; transform:scaleY(0); animation:peek 7s ease-in-out infinite; }
.resting .sleep-eye { animation:closed-eye 7s ease-in-out infinite; }
.flying .feet,.falling .feet { opacity:0; }
.flying .wing { transform-origin:-12px 2px; animation:flap .22s ease-in-out infinite alternate; }
.waking .feet { animation:walk .12s ease-in-out infinite alternate; }
.waking .bird-body { animation:waddle .16s ease-in-out infinite alternate; }
.falling .bird-body { transform:rotate(110deg); }
.falling .sleep-eye { display:block !important; }
.falling .awake-eye { display:none !important; }
.bird:not(.resting):not(.waking) .bird-shadow { display:none; }
.action-dock { display:flex; justify-content:center; align-items:center; }
.message-button { min-height:45px; display:flex; align-items:center; justify-content:center; gap:35px; padding:12px 23px; border-radius:30px; background:var(--ink); color:#fffaf0; font-size:13px; box-shadow:0 0 0 3px #e9893e22,0 4px 20px #e9893e20; animation:contact-glow 2.8s ease-in-out infinite; }
.message-button:hover,.message-button:focus-visible { animation-play-state:paused; background:#136eaa; }
.message-button span { color:#ffb16e; font-size:18px; }
footer { display:flex; justify-content:space-between; align-items:center; font-size:10px; color:#8b8d83; }
footer > span:last-child { font:8px/1.4 ui-monospace,Consolas,monospace; letter-spacing:1.8px; color:#a1a194; }
.orange { color:var(--orange); }
.contact-note { position:fixed; z-index:10; bottom:20px; left:50%; transform:translateX(-50%); background:#fffdf8; border:1px solid #dfd4be; border-radius:14px; padding:8px 10px 8px 18px; box-shadow:0 10px 40px #394d5c16; display:flex; align-items:center; gap:10px; font-size:12px; width:max-content; max-width:calc(100% - 32px); }
.contact-note button { border:0; background:transparent; color:var(--ink); font-size:22px; min-width:44px; min-height:44px; }
.js .contact-note:not(.is-visible),.no-js .contact-note:not(:target) { display:none; }
.no-js #close-contact,.no-js .scoreboard { display:none; }
.fallback { position:absolute; top:20%; width:100%; text-align:center; color:#758b90; font-size:13px; line-height:1.8; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.pause-label { position:absolute; top:52px; width:100%; text-align:center; color:#7f918c; font-size:11px; z-index:3; }
@keyframes blink { 50% { opacity:0; } }
@keyframes breathe { 50% { transform:rotate(-5deg) scaleY(.83) translateY(-1px); } }
@keyframes peek { 0%,76%,86%,100% { transform:scaleY(0); } 79%,83% { transform:scaleY(1); } }
@keyframes closed-eye { 0%,76%,86%,100% { opacity:1; } 79%,83% { opacity:0; } }
@keyframes doze { 0%,100% { opacity:.2; } 50% { opacity:1; } }
@keyframes flap { to { transform:rotate(-65deg) scaleY(.6); } }
@keyframes walk { to { transform:translateX(3px); } }
@keyframes waddle { to { transform:rotate(7deg) translateY(-2px); } }
@keyframes contact-glow { 0%,100% { box-shadow:0 0 0 3px #e9893e18,0 4px 16px #e9893e1c; } 50% { box-shadow:0 0 0 7px #e9893e18,0 5px 28px #e9893e50; } }
@media (max-width:600px) {
  .shell { grid-template-rows:72px minmax(0,1fr) 40px; padding:0 22px; }
  main { grid-template-rows:100px minmax(0,1fr) 76px; }
  h1 { font-size:clamp(22px,6vw,30px); letter-spacing:-.7px; }
  .brand-mark { width:86px; height:26px; }
  footer { font-size:9px; }
  footer > span:last-child { font-size:6px; letter-spacing:1.1px; }
}
@media (max-height:600px) {
  .shell { grid-template-rows:54px minmax(0,1fr) 28px; }
  main { grid-template-rows:72px minmax(0,1fr) 62px; }
  h1 { font-size:25px; letter-spacing:-.7px; }
  .brand-mark { width:86px; height:26px; }
  .message-button { min-height:40px; padding:8px 20px; }
  .field { max-width:380px; }
}
@media (max-height:450px) {
  .shell { grid-template-rows:46px minmax(0,1fr) 24px; }
  main { grid-template-rows:52px minmax(0,1fr) 54px; }
  h1 { font-size:21px; }
  .field { max-width:300px; border-radius:18px 18px 10px 10px; }
  .scoreboard { top:7px; padding:6px 0; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } }