/* ── bảng màu & nền tảng ─────────────────────────────────────── */
:root{
  --desk:#E9DCC6; --desk-hi:#F3E8D4; --desk-lo:#DCCBAD;
  --paper:#FFFAF0; --paper-lo:#F0E5D0;
  --ink:#333E53;
  --coral:#F0634A; --coral-d:#C8432E;
  --gold:#F5B53D;  --gold-d:#CE8F1D;
  --mint:#57BFA6;  --pink:#F79EB4;
  --soft:#8C7F6C;
  --hand:"Shantell Sans","Be Vietnam Pro",system-ui,sans-serif;
  --ui:"Be Vietnam Pro",system-ui,-apple-system,sans-serif;
  --pop:cubic-bezier(.34,1.56,.64,1);
  --pop-big:cubic-bezier(.3,1.7,.5,1);
  --ease:cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{
  min-height:100svh;background:var(--desk);color:var(--ink);
  font-family:var(--ui);overflow-x:hidden;overscroll-behavior-y:none;
}
body.is-locked{overflow:hidden;height:100svh}
img{display:block;max-width:100%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── mặt sổ ──────────────────────────────────────────────────── */
#desk{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(125% 95% at 50% -12%, var(--desk-hi), var(--desk) 52%, var(--desk-lo) 100%);
  transition:filter 1.2s var(--ease)}
#desk::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(circle, rgba(120,98,66,.16) 1px, transparent 1.2px);
  background-size:26px 26px}
#desk::after{content:"";position:absolute;inset:0;opacity:.10;mix-blend-mode:multiply;
  background:url("assets/grain.png") repeat;background-size:420px}
body.is-dawn #desk{filter:saturate(1.12) brightness(1.06)}

/* ── băng dính washi ─────────────────────────────────────────── */
.tape{
  position:absolute;z-index:4;width:var(--tw,104px);height:var(--th,28px);
  pointer-events:none;opacity:.74;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.26) 0 5px, rgba(255,255,255,0) 5px 11px),
    var(--tc,var(--mint));
  clip-path:polygon(3% 0,97% 0,100% 22%,96% 45%,100% 70%,97% 100%,3% 100%,0 72%,4% 48%,0 24%);
  box-shadow:0 2px 5px rgba(90,60,20,.18);
  transform:rotate(var(--tr,-4deg));
}
.tape-a{--tc:var(--mint); left:-32px;top:-19px;--tr:-30deg}
.tape-b{--tc:var(--pink); right:-24px;bottom:-11px;--tr:-16deg}
.tape-c{--tc:var(--gold); left:50%;top:-15px;--tr:3deg;margin-left:-52px}
.tape-e{--tc:var(--coral);left:50%;top:-14px;--tr:-6deg;margin-left:-46px;--tw:92px;--th:25px}

/* ── trang thư ───────────────────────────────────────────────── */
#stage{position:fixed;inset:0;z-index:10;display:grid;place-items:center;
  opacity:0;pointer-events:none;transition:opacity .7s var(--ease);
  transform:perspective(1500px)}
#stage.is-live{opacity:1}
.sheet{
  grid-area:1/1;position:relative;
  background:linear-gradient(168deg,var(--paper) 0%,#FDF5E6 58%,var(--paper-lo) 100%);
  border-radius:3px;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,
             0 14px 26px -10px rgba(96,66,28,.36),
             0 42px 50px -40px rgba(96,66,28,.5);
  will-change:transform,opacity;
}
.sheet-grain{position:absolute;inset:0;border-radius:3px;pointer-events:none;
  background:url("assets/grain.png") repeat;background-size:260px;
  mix-blend-mode:multiply;opacity:.13}
.page{
  position:absolute;inset:var(--pad,34px);display:flex;align-items:center;
  font-family:var(--hand);font-weight:500;color:var(--ink);
  line-height:1.66;font-variation-settings:"INFM" 16,"BNCE" 0;
}
.page .body{width:100%}
.page p{margin:0}
.page p + p{margin-top:.85em}
.page .sign{margin-top:1.5em}
.page .sign .w{display:block;width:100%}   /* không có dòng này thì ảnh co về 0 */
.page .sign.right{text-align:right;padding-right:6%}
.page .hw{display:block}
.page .hw-love{width:64%;max-width:330px;aspect-ratio:1100/232}
.page .hw-sig{width:31%;max-width:160px;aspect-ratio:622/207;margin-left:auto}
.page .w{display:inline-block;opacity:0;transform-origin:50% 84%;
  will-change:opacity,transform}
.pen{position:absolute;left:0;top:0;width:7px;height:7px;border-radius:50%;background:var(--ink);
  opacity:0;pointer-events:none;box-shadow:0 0 9px 3px rgba(51,62,83,.22);
  transform:translate(-50%,-50%)}

/* ── tranh dán kiểu polaroid ─────────────────────────────────── */
#plate{position:fixed;inset:0;z-index:12;display:grid;place-items:center;
  opacity:0;pointer-events:none}
.polaroid{position:relative;background:#FFFDF8;padding:11px 11px 30px;border-radius:3px;
  box-shadow:0 16px 30px -12px rgba(96,66,28,.45),0 46px 54px -44px rgba(96,66,28,.55)}
.polaroid canvas{display:block;border-radius:1px}

/* ── trăng cắt giấy ──────────────────────────────────────────── */
#moon{position:fixed;z-index:2;pointer-events:none;left:72%;top:11%;
  width:min(24vw,158px);aspect-ratio:1;opacity:0;
  transform:translate(-50%,var(--rise,34vh)) scale(var(--ms,.7)) rotate(var(--mr,0deg))}
#moon i{position:absolute;inset:0;border-radius:50%;display:block;
  background:#FBE6B0;                                  /* trăng cắt giấy: phẳng, không bóng */
  box-shadow:0 0 0 5px #fff, 0 8px 18px rgba(120,80,20,.22), 0 0 46px 14px rgba(250,206,120,.4)}
#moon i::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:                                          /* mấy vệt trăng cắt rời */
    radial-gradient(circle at 64% 36%, #F3D189 0 13%, transparent 13.5%),
    radial-gradient(circle at 38% 60%, #F3D189 0 9%,  transparent 9.5%),
    radial-gradient(circle at 57% 73%, #F3D189 0 7%,  transparent 7.5%),
    radial-gradient(circle at 30% 34%, #F3D189 0 5%,  transparent 5.5%)}

/* ── sticker kéo được ────────────────────────────────────────── */
#deco{position:fixed;inset:0;z-index:5;pointer-events:none;opacity:0;
  transition:opacity 1s var(--ease)}
#deco.is-in{opacity:1}
#deco .sticker{position:absolute;pointer-events:auto;cursor:grab;touch-action:none;
  will-change:transform;filter:drop-shadow(0 5px 7px rgba(96,66,28,.3))}
#deco .sticker:active{cursor:grabbing}
#deco .sticker-in{display:block;animation:bob 5.5s var(--ease) infinite;transform-origin:50% 60%}
#deco .sticker:nth-child(2) .sticker-in{animation-delay:-1.3s}
#deco .sticker:nth-child(3) .sticker-in{animation-delay:-2.6s}
#deco .sticker:nth-child(4) .sticker-in{animation-delay:-3.9s}
#deco .sticker:nth-child(5) .sticker-in{animation-delay:-0.7s}
#deco .sticker:nth-child(6) .sticker-in{animation-delay:-4.6s}
@keyframes bob{0%,100%{transform:rotate(-4deg) translateY(0)}
  50%{transform:rotate(4deg) translateY(-5px)}}
#deco .sticker:hover .sticker-in{animation:none;transform:scale(1.18) rotate(-9deg);
  transition:transform .3s var(--pop)}

/* ── nét vẽ tay ──────────────────────────────────────────────── */
#doodle{position:fixed;inset:0;z-index:13;pointer-events:none;overflow:visible}
#doodle path{fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ── xoè cả tập thư ──────────────────────────────────────────── */
#fan{position:fixed;inset:0;z-index:21;pointer-events:none}
#fan .leaf{position:absolute;left:50%;top:50%;border-radius:2px;overflow:hidden;
  background:linear-gradient(168deg,var(--paper),var(--paper-lo));
  box-shadow:0 10px 20px -8px rgba(96,66,28,.6);opacity:0;will-change:transform,opacity}
#fan .leaf canvas{position:absolute;inset:0;width:100%;height:100%}

/* ── màn kết ─────────────────────────────────────────────────── */
#finale{position:fixed;inset:0;z-index:20;display:grid;place-items:center;
  opacity:0;pointer-events:none;transition:opacity .8s var(--ease)}
#finale.is-live{opacity:1}
#fin-sheet{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(18px,3.4vh,40px);opacity:var(--fin,1);padding:0 7%}
#sig{position:relative;width:74%;max-width:380px;aspect-ratio:3}
#sig img{width:100%;height:100%;object-fit:contain}
#sig-ring{position:absolute;inset:-32% -10%;width:120%;height:164%;overflow:visible}
#sig-ring path{fill:none;stroke:var(--coral);stroke-linecap:round}
#sig-note{width:84%;max-width:460px;opacity:0;transform:translateY(10px) rotate(-1deg);
  transition:opacity 1s var(--ease) .4s,transform 1s var(--pop) .4s}
#finale.is-noted #sig-note{opacity:.92;transform:rotate(-1deg)}

/* ── màn trả lời ─────────────────────────────────────────────── */
#answer{position:fixed;inset:0;z-index:25;display:grid;place-items:center;padding:24px;
  opacity:0;pointer-events:none;transition:opacity .8s var(--ease)}
#answer.is-live{opacity:1}

/* Câu hỏi mọc lên ngay trên tờ giấy vừa được khoanh tròn chữ "Hà" */
#ask{display:none;text-align:center;width:100%}
#finale.is-asking{pointer-events:auto}
#finale.is-asking #ask{display:block;animation:askin .7s var(--pop-big) both}
@keyframes askin{from{opacity:0;transform:translateY(16px) scale(.9)}to{opacity:1;transform:none}}
#finale.is-answered #fin-sheet{
  transition:transform .9s cubic-bezier(.5,0,.75,0),opacity .7s var(--ease);
  transform:translateY(-26vh) rotate(-7deg) scale(.86);opacity:0}
#finale.is-teasing .ans-foot{opacity:0}
.ans-label{font-family:var(--hand);font-weight:600;font-size:14px;letter-spacing:.04em;
  color:var(--soft);margin-bottom:clamp(14px,2.6vh,22px);
  font-variation-settings:"BNCE" 22,"INFM" 40;transform:rotate(-1.5deg)}
.ans-actions{display:flex;flex-direction:column;align-items:center;gap:14px}
.btn{font-family:var(--hand);cursor:pointer;border:0}
.btn-yes{
  font-weight:700;font-size:clamp(21px,5.2vw,33px);color:#fff;background:var(--coral);
  border:4px solid #fff;border-radius:999px;padding:13px 32px;
  box-shadow:0 7px 0 var(--coral-d),0 16px 22px rgba(96,66,28,.26);
  transform:rotate(-2deg);
  font-variation-settings:"BNCE" 14,"INFM" 24;
  transition:transform .2s var(--pop),box-shadow .2s var(--pop);
}
.btn-yes:hover,.btn-yes:focus-visible{transform:rotate(-2deg) translateY(-3px) scale(1.04);
  box-shadow:0 10px 0 var(--coral-d),0 20px 26px rgba(96,66,28,.3);outline:none}
.btn-yes:active{transform:rotate(-2deg) translateY(6px) scale(.97);
  box-shadow:0 1px 0 var(--coral-d),0 6px 10px rgba(96,66,28,.24)}
.btn-wait{
  position:relative;z-index:3;font-weight:600;font-size:15px;color:#fff;background:var(--soft);
  border:3px solid #fff;border-radius:999px;padding:9px 20px;white-space:nowrap;
  box-shadow:0 4px 0 #6C6151,0 10px 14px rgba(96,66,28,.2);transform:rotate(2deg);
  transition:transform .62s var(--pop-big),box-shadow .2s var(--pop),background .3s var(--ease);
}
.btn-wait:hover,.btn-wait:focus-visible{background:#7D7161;outline:none}
.ans-foot{margin-top:clamp(14px,2.8vh,24px);font-size:12px;font-weight:300;line-height:1.85;
  color:var(--soft);max-width:36ch;margin-inline:auto;transition:opacity .6s var(--ease)}
#pola-pair{position:absolute;inset:0;pointer-events:none}
.pola-mini{position:absolute;margin:0;background:#FFFDF8;padding:8px 8px 22px;border-radius:3px;
  box-shadow:0 14px 26px -10px rgba(96,66,28,.45);width:min(34vw,190px);
  opacity:0;transform:translateY(60vh) rotate(0deg) scale(.6)}
.pola-mini img{display:block;width:100%;border-radius:1px}
.m-a{left:9%;top:16%}
.m-b{right:9%;top:22%}
#answer.is-yes .m-a{transition:transform 1.1s var(--pop-big) .35s,opacity .6s ease .35s;
  opacity:1;transform:translateY(0) rotate(-8deg) scale(1)}
#answer.is-yes .m-b{transition:transform 1.1s var(--pop-big) .55s,opacity .6s ease .55s;
  opacity:1;transform:translateY(0) rotate(7deg) scale(1)}
@media (max-width:760px){.m-a{left:4%;top:9%}.m-b{right:4%;top:auto;bottom:11%}}

#closing{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;
  gap:26px;opacity:0;pointer-events:none;transition:opacity 1.2s var(--ease) .7s}
#answer.is-done #closing{opacity:1}
#closing-love{width:min(72vw,440px);transform:rotate(-2deg)}
#closing-note{font-family:var(--hand);font-weight:500;font-size:clamp(15px,3.6vw,19px);
  color:var(--ink);text-align:center;max-width:32ch;line-height:1.85;
  white-space:pre-line;font-variation-settings:"INFM" 30}
#closing-ps{font-family:var(--hand);font-weight:400;font-size:clamp(13px,3.1vw,16px);
  color:var(--soft);text-align:center;max-width:30ch;line-height:1.8;
  margin-top:-12px;transform:rotate(-1deg);
  font-variation-settings:"INFM" 58,"BNCE" 8}
#closing-ps:empty{display:none}

.btn-msg{
  /* Lớp cha #answer và #closing đều pointer-events:none — phải tự bật lại,
     không thì cú bấm xuyên qua nút và trúng lớp phía sau. */
  pointer-events:auto;
  display:none;font-weight:700;font-size:clamp(15px,3.8vw,19px);color:var(--ink);
  background:var(--gold);text-decoration:none;
  border:4px solid #fff;border-radius:999px;padding:11px 26px;
  box-shadow:0 6px 0 var(--gold-d),0 14px 20px rgba(96,66,28,.24);
  transform:rotate(-1.5deg);font-variation-settings:"BNCE" 10,"INFM" 26;
  transition:transform .2s var(--pop),box-shadow .2s var(--pop);
}
#answer.is-yes .btn-msg{display:inline-block}
.btn-msg:hover,.btn-msg:focus-visible{transform:rotate(-1.5deg) translateY(-3px) scale(1.04);
  box-shadow:0 9px 0 var(--gold-d),0 18px 24px rgba(96,66,28,.28);outline:none}
.btn-msg:active{transform:rotate(-1.5deg) translateY(5px) scale(.97);
  box-shadow:0 1px 0 var(--gold-d),0 6px 10px rgba(96,66,28,.22)}

/* ── phong bì ────────────────────────────────────────────────── */
#arrival{position:fixed;inset:0;z-index:40;display:grid;place-items:center;
  touch-action:manipulation;transition:opacity .7s var(--ease)}
#arrival.is-gone{opacity:0;pointer-events:none}
#env-wrap{position:relative;width:min(88vw,486px);aspect-ratio:1.52;
  transform:translateY(130%) rotate(-8deg) scale(.86);will-change:transform}
#env-wrap.is-in{transition:transform 1.15s var(--pop-big);transform:none}
#envelope{position:absolute;inset:0;transform-origin:50% 88%;will-change:transform}
#envelope.wobble{animation:wob 2.6s var(--ease) infinite}
@keyframes wob{
  0%,100%{transform:rotate(-1.4deg) translateY(0)}
  25%{transform:rotate(1.6deg) translateY(-5px)}
  50%{transform:rotate(-1.1deg) translateY(1px)}
  75%{transform:rotate(1.2deg) translateY(-3px)}
}
.env-body{position:absolute;inset:0;border-radius:7px;
  background:linear-gradient(168deg,#FFF6E4 0%,#F6E8CE 58%,#E9D7B4 100%);
  box-shadow:0 2px 0 rgba(255,255,255,.55) inset,0 16px 26px -10px rgba(96,66,28,.42),
             0 46px 52px -42px rgba(96,66,28,.55)}
.env-body::after{content:"";position:absolute;inset:0;border-radius:7px;
  background:linear-gradient(to bottom right,transparent 49.5%,rgba(150,110,52,.12) 50%,transparent 50.5%),
             linear-gradient(to bottom left, transparent 49.5%,rgba(150,110,52,.12) 50%,transparent 50.5%)}
.env-name{position:absolute;left:13%;top:63%;width:18%;opacity:0;transform:translateY(8px) scale(.8);
  transition:opacity .8s var(--ease) .6s,transform .8s var(--pop) .6s}
#env-wrap.is-in .env-name{opacity:.95;transform:none}
.env-flap{position:absolute;left:0;right:0;top:0;height:58%;transform-origin:top center;
  background:linear-gradient(180deg,#FFF9EA,#F0E0C2);
  clip-path:polygon(0 0,100% 0,50% 100%);
  box-shadow:0 10px 14px -10px rgba(96,66,28,.5);
  transition:transform 1s cubic-bezier(.6,-0.28,.34,1.3)}
.env.is-open .env-flap{transform:rotateX(-168deg)}
#seal{
  position:absolute;left:50%;top:58%;width:23%;aspect-ratio:1;z-index:3;
  transform:translate(-50%,-50%);border:4px solid #fff;border-radius:50%;
  background:radial-gradient(60% 55% at 36% 30%, #FF8A63, var(--coral) 55%, var(--coral-d) 100%);
  box-shadow:0 5px 0 var(--coral-d),0 12px 18px rgba(96,66,28,.34);
  cursor:pointer;display:grid;place-items:center;
  transition:transform .2s var(--pop),box-shadow .2s var(--pop);
}
#seal:hover{transform:translate(-50%,-50%) scale(1.06) rotate(-4deg)}
#seal.squash{transform:translate(-50%,-50%) scale(1.16,.84) rotate(3deg);
  box-shadow:0 1px 0 var(--coral-d),0 5px 8px rgba(96,66,28,.3)}
.seal-face{font-family:var(--hand);font-weight:700;font-size:clamp(20px,4.6vw,30px);color:#fff;
  text-shadow:0 2px 0 rgba(150,50,30,.4);pointer-events:none;
  font-variation-settings:"INFM" 50}

/* ── phong thư bị xé — khung hình cuối cùng ──────────────────── */
#arrival.is-ruined{opacity:1;pointer-events:auto;cursor:pointer}
#arrival.is-ruined #cue{display:none}
.env-half{position:absolute;inset:0;transform-origin:50% 50%;
  transition:transform 1.25s cubic-bezier(.16,.9,.28,1),opacity 1s var(--ease);
  filter:drop-shadow(0 14px 18px rgba(96,66,28,.34)) saturate(.6) brightness(.95)}
.env-half .env{position:absolute;inset:0}
.h0{clip-path:polygon(0 0,50% 0%,54% 5%,46% 11%,53% 16%,48% 22%,43% 27%,52% 33%,47% 38%,56% 44%,49% 50%,44% 55%,53% 61%,48% 67%,51% 72%,43% 78%,50% 84%,55% 89%,46% 95%,50% 100%,0 100%)}
.h1{clip-path:polygon(50% 0,100% 0,100% 100%,50% 100%,46% 95%,55% 89%,50% 84%,43% 78%,51% 72%,48% 67%,53% 61%,44% 55%,49% 50%,56% 44%,47% 38%,52% 33%,43% 27%,48% 22%,53% 16%,46% 11%,54% 5%)}
#env-wrap.is-torn .h0{transform:translate(-4.5%,4%) rotate(-7deg)}
#env-wrap.is-torn .h1{transform:translate(5.5%,6%) rotate(5.5deg)}
.scrap{position:absolute;width:9px;height:12px;background:#F2E6CC;border-radius:1px;
  box-shadow:0 2px 4px rgba(96,66,28,.3);opacity:0;
  transition:transform 1.5s cubic-bezier(.3,.6,.4,1),opacity 1.4s ease}
#restart{position:fixed;left:0;right:0;bottom:max(6vh,34px);z-index:46;text-align:center;
  font-family:var(--ui);font-weight:300;font-size:12px;letter-spacing:.06em;
  color:rgba(140,127,108,.7);opacity:0;transition:opacity 1.6s var(--ease);pointer-events:none}
#restart.is-in{opacity:1}

.cue{position:fixed;left:0;right:0;bottom:max(4.5vh,26px);z-index:45;text-align:center;
  font-family:var(--hand);font-weight:600;font-size:17px;color:var(--soft);
  opacity:0;transition:opacity .6s var(--ease);font-variation-settings:"INFM" 45;
  pointer-events:none}
.cue span{background:rgba(233,220,198,.86);border-radius:999px;padding:6px 18px;
  box-shadow:0 2px 10px rgba(120,90,50,.16)}
.cue.is-in{opacity:1}
.cue span{display:inline-block;animation:hop 1.5s var(--pop) infinite}
@keyframes hop{0%,100%{transform:translateY(0) rotate(-1deg)}45%{transform:translateY(-7px) rotate(1.5deg)}}

/* ── linh tinh ───────────────────────────────────────────────── */
#confetti{position:fixed;inset:0;z-index:50;pointer-events:none;width:100%;height:100%}

/* ── cuốn phim tua ngược ─────────────────────────────────────── */
#rewind{position:fixed;inset:0;z-index:55;pointer-events:none;opacity:0;overflow:hidden;
  background:linear-gradient(rgba(62,46,20,.09),rgba(62,46,20,.09));
  transition:opacity .45s var(--ease)}
#rewind::before{content:"";position:absolute;inset:0;opacity:.14;
  background:url("assets/grain.png") repeat;background-size:130px}
body.is-rewind #rewind{opacity:1;animation:flick .12s steps(2) infinite}
@keyframes flick{0%,100%{opacity:.6}50%{opacity:1}}
#rewind::after{content:"";position:absolute;left:-10%;width:120%;height:30vh;
  background:linear-gradient(180deg,transparent,rgba(255,252,242,.14),transparent)}
body.is-rewind #rewind::after{animation:sweep 1.05s linear infinite}
@keyframes sweep{from{top:-32vh}to{top:112vh}}
/* nhoà màu trên từng lớp — không đặt filter lên body vì sẽ phá hết position:fixed */
body.is-rewind #desk,body.is-rewind #stage,body.is-rewind #plate,body.is-rewind #moon,
body.is-rewind #deco,body.is-rewind #doodle,body.is-rewind #fan,body.is-rewind #finale{
  filter:saturate(.34) brightness(.93);transition:filter 1s var(--ease)}
body.is-rewind #closing,body.is-rewind #answer{opacity:0;transition:opacity .5s var(--ease)}
/* tua xong thì cả trang nhạt màu hẳn đi một chút, và ở lại như thế */
body.is-after #desk,body.is-after #stage,body.is-after #moon,body.is-after #deco,
body.is-after #doodle{filter:saturate(.62) brightness(.97);transition:filter 2.4s var(--ease)}
#sound{position:fixed;right:max(3vw,14px);top:max(3vh,14px);z-index:60;
  width:38px;height:38px;border:3px solid #fff;border-radius:50%;background:var(--desk-lo);
  cursor:pointer;display:grid;place-items:center;opacity:.8;
  box-shadow:0 3px 0 rgba(140,110,70,.5);transition:.25s var(--pop)}
#sound:hover{opacity:1;transform:scale(1.08) rotate(-6deg)}
#sound span{display:block;width:10px;height:10px;border-radius:50%;
  border:2px solid var(--ink);transition:.25s var(--pop)}
#sound.is-hint{animation:sndhint 1.5s var(--pop) 4}
@keyframes sndhint{0%,100%{transform:scale(1)}
  40%{transform:scale(1.18) rotate(-8deg)}70%{transform:scale(.96) rotate(4deg)}}
#sound[data-on="true"]{background:var(--gold)}
#sound[data-on="true"] span{background:var(--ink)}
#scrollspace{position:relative;z-index:0;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .cue span,#envelope.wobble,#deco .sticker-in{animation:none}
  *{transition-duration:.2s!important}
}

@media (min-width:760px){#moon{left:78%;top:9%}}