@font-face{font-family:BirthdaySerif;src:url('assets/fonts/CormorantGaramond.ttf') format('truetype');font-weight:300 700;font-style:normal;font-display:swap}
:root{color-scheme:dark;--ivory:#f3efe6;--muted:#b9c4d8;--night:#030a18}
*{box-sizing:border-box}
html{background:var(--night);min-height:100%}
html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
body{height:100vh;height:100dvh;display:grid;place-items:center;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);color:var(--ivory);font-family:Arial,'PingFang SC','Microsoft YaHei',sans-serif;-webkit-font-smoothing:antialiased}
.scene{width:min(100%,510px);height:100%;min-height:0;position:relative;isolation:isolate;container-type:inline-size;display:grid;grid-template-areas:"name" "cake" "wish" "actions";grid-template-rows:minmax(48px,.86fr) minmax(0,3.25fr) minmax(60px,.67fr) minmax(120px,.75fr);align-items:center}
.hero-slot{grid-area:cake;container-type:size;align-self:stretch;display:grid;place-items:center;min-height:0;min-width:0}
.hero-square{position:relative;isolation:isolate;width:min(100cqw,100cqh);aspect-ratio:1}
#atmosphere{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.greeting{grid-area:name;text-align:center}
h1{font-family:BirthdaySerif,Georgia,serif;font-size:23cqw;line-height:1;font-weight:500;letter-spacing:-.045em;margin:0;padding-right:.045em;color:#f7f3e9}
.wish{grid-area:wish;text-align:center}
.wish-title{font-size:5.1cqw;letter-spacing:.19em;padding-left:.19em;line-height:1.35;font-weight:300;margin:0;transition:opacity .45s}
.wish-note{font-size:max(11px,2.65cqw);line-height:1.8;letter-spacing:.2em;padding-left:.2em;margin:2cqw 0 0;color:var(--muted)}
.actions{grid-area:actions;align-self:start;width:80%;justify-self:center;display:flex;align-items:center;flex-direction:column}
button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.blow-button{position:relative;display:flex;align-items:center;justify-content:center;gap:4cqw;width:67%;min-height:44px;height:11.7cqw;border:1px solid #839bbf;border-radius:100px;background:rgba(6,16,35,.16);color:var(--ivory);font-size:3.7cqw;letter-spacing:.27em;padding-left:.27em;transition:background .3s,border-color .3s,box-shadow .3s,transform .3s}
.blow-button:hover{background:rgba(145,172,215,.09);border-color:#d0d9e8;box-shadow:0 0 25px #9ebeff12}
.blow-button:active{transform:scale(.97)}
button:focus-visible{outline:2px solid #e5d1a8;outline-offset:5px}
.blow-button:disabled{cursor:wait;opacity:.6}
.mic-button{margin-top:2cqw;display:flex;justify-content:center;align-items:center;gap:1.3cqw;min-height:44px;background:none;border:0;color:#b1bed4;font-size:max(11px,2.6cqw);letter-spacing:.09em;padding:0 1cqw;transition:color .25s}
.mic-button svg{width:3.2cqw;height:3.2cqw;min-width:14px;min-height:14px}
.mic-button:hover,.mic-button[aria-pressed=true]{color:#f0d5a5}
.mic-button:disabled{opacity:.4;cursor:wait}
.mic-button[hidden]{display:none}
.feedback{font-size:max(11px,2.6cqw);text-align:center;line-height:1.6;color:#bec9db;min-height:1.6em;margin:0;max-width:90%;letter-spacing:.04em}
.scene[data-state=out] .feedback{margin-top:3cqw}
.no-script{position:absolute;top:70%;left:10%;right:10%;text-align:center;font-size:14px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

#atmosphere {mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);}

@font-face{font-family:BirthdayHand;src:url('assets/fonts/Caveat.ttf') format('truetype');font-weight:400 700;font-display:swap}
html{background:#17171b}body{background:radial-gradient(ellipse at 50% 50%,#22232c 0%,#16161a 58%,#121215 100%)}

h1{font-size:20.5cqw;color:#fff7e8}
.wish-title{font-family:BirthdayHand,'Segoe Print',cursive;font-size:11.5cqw;line-height:1;letter-spacing:-.035em;font-weight:500;padding:0;text-shadow:0 1px 9px #f9e6ae35}
.wish-note{margin-top:1.5cqw}.blow-button{border-color:#ae9270;background:#e2c0890a}
 .cake-art{display:block;width:100%;height:100%;pointer-events:none;user-select:none;}
@media(max-height:680px){
  h1{font-size:clamp(36px,13cqw,68px)}.wish-title{font-size:clamp(25px,8.4cqw,42px)}
  .blow-button{height:44px}.mic-button{margin-top:0}.wish-note{margin-top:2px}
}
@media(orientation:landscape) and (max-height:540px){
  .scene{width:min(100%,900px);grid-template-areas:"cake name" "cake wish" "cake actions";grid-template-columns:54% 46%;grid-template-rows:1fr 1fr minmax(112px,1.3fr)}
  h1{font-size:min(10dvh,57px)}.wish-title{font-size:min(9dvh,43px)}
  .actions{width:94%}.blow-button{font-size:15px}.mic-button,.feedback,.wish-note{font-size:11px}
}

.hero-square{mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20500%20500%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22soft%22%20x%3D%22-3%25%22%20y%3D%22-3%25%22%20width%3D%22106%25%22%20height%3D%22106%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%221.15%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22white%22%20filter%3D%22url%28%23soft%29%22%20d%3D%22M79%20362%20C50%20328%2034%20278%2035%20240%20C35%20122%20126%2023%20247%2023%20C363%2023%20458%20120%20458%20238%20C459%20286%20442%20333%20415%20365%20C411%20397%20343%20425%20249%20425%20C159%20425%2081%20398%2079%20362%20Z%22%2F%3E%3C%2Fsvg%3E");mask-size:100% 100%;mask-repeat:no-repeat}

html,body {background:#141418}
.wish-title {display:inline-flex; align-items:baseline; gap:.19em}
.suffix {display:grid;text-align:left}
.suffix>span {grid-area:1/1;transition:opacity .58s ease}
.everyday-word,.scene[data-state=blowing] .birthday-word,.scene[data-state=out] .birthday-word {opacity:0}
.scene[data-state=out] .everyday-word {opacity:1}
.actions {position:relative}
.mic-button {border:1px solid #887d71;border-radius:100px;padding:0 21px;color:#ece5db;font-size:clamp(12px,3.3cqw,16px);margin-top:0}
.mic-button svg {width:16px;height:16px}
.music {position:absolute;right:0;top:0;width:44px;height:44px;background:transparent;border:0;color:#8490a3;display:grid;place-items:center}
.music svg {width:18px;height:18px}.music[aria-pressed=true]{color:#e4c995}
.feedback {margin-top:.4em}