*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{font-family:var(--font-body);color:var(--ink);background:linear-gradient(180deg,#e3f4ed,var(--pearl) 45%,var(--vanilla));-webkit-font-smoothing:antialiased;overflow-x:hidden}button{font:inherit;color:inherit}img{max-width:100%}.btn{font-weight:700;border:0;border-radius:999px;padding:.7em 1.5em;cursor:pointer;background:var(--lagoon);color:#fff;box-shadow:0 6px 18px #1f7f8052}.btn:disabled{opacity:.55;cursor:default}.btn.ghost{background:#ffffffe0;color:var(--lagoon);box-shadow:none}.muted{color:var(--ink-soft);font-size:.9em}.loading{min-height:60vh;display:grid;place-items:center;gap:12px;font-weight:600;color:var(--lagoon);text-align:center}.topbar{position:fixed;top:12px;right:14px;z-index:40}.chip{display:inline-flex;align-items:center;gap:8px;background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:0;border-radius:999px;padding:6px 8px 6px 14px;box-shadow:var(--shadow);font-weight:600;font-size:14px;cursor:pointer}.chip-name{max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chip-room{font-size:12px;background:var(--mint);color:var(--lagoon);border-radius:999px;padding:2px 8px}.chip-link{border:0;background:transparent;color:var(--ink-soft);font-size:12px;text-decoration:underline;cursor:pointer}.fx{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:30}.petal{position:absolute;top:-40px;width:14px;height:20px;border-radius:70% 0;background:linear-gradient(135deg,#ffb3c4,var(--poinciana));opacity:.8;animation:fall linear infinite}@keyframes fall{to{transform:translate(var(--dx),110vh) rotate(720deg)}}.bubble{position:absolute;bottom:-60px;border-radius:50%;opacity:.8;animation:rise linear infinite;background:radial-gradient(circle at 30% 30%,#fffffff2,#fff0 30%),conic-gradient(from 30deg,#ffa0c866,#82c8ff66,#aaffd266,#ffa0c866);-webkit-mask:radial-gradient(circle,transparent 60%,#000 67%);mask:radial-gradient(circle,transparent 60%,#000 67%)}@keyframes rise{to{transform:translateY(-120vh)}}@media(prefers-reduced-motion:reduce){.petal,.bubble{animation:none;display:none}}.start-overlay{position:fixed;inset:0;z-index:100;border:0;display:grid;place-content:center;gap:16px;text-align:center;cursor:pointer;background:#e8f6f09e;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:opacity .6s}.start-overlay.light{background:#e8f6f059}.start-overlay.out{opacity:0}.start-title{font:700 clamp(34px,6vw,72px) var(--font-title);color:var(--lagoon)}.start-cta{justify-self:center;font-weight:700;background:var(--lagoon);color:#fff;padding:.8em 2em;border-radius:999px;box-shadow:0 8px 24px #1f7f8059;animation:pulse 1.8s ease-in-out infinite}@keyframes pulse{50%{transform:scale(1.05)}}.page-lobby{position:relative;min-height:100vh;padding:28px 20px 40px;max-width:1400px;margin:0 auto}.lobby-bg{position:fixed;inset:-20px;z-index:-1;background:url(/img/room-bg.jpg) center/cover;filter:blur(6px) brightness(1.08) saturate(1.1)}.lobby-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#f6fbf88c,#fff6e066)}.lobby-title{text-align:center;margin:10px 0 18px}.lobby-title h1{margin:0;font:700 clamp(38px,6vw,76px) var(--font-title);color:var(--lagoon);text-shadow:0 2px 22px rgba(255,255,255,.9)}.lobby-title p{margin:4px 0 0;color:var(--ink-soft)}.countdown,.banner{margin:0 auto 18px;width:fit-content;background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:10px 20px;border-radius:999px;font-weight:700;color:var(--lagoon);box-shadow:var(--shadow);text-align:center}.rooms{--cols: 6;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 10px;max-width:1180px;margin:0 auto}.room-card{position:relative;flex:0 0 calc((100% - (var(--cols) - 1) * 10px) / var(--cols));display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:transparent;cursor:pointer;padding:6px;animation:bob 5s ease-in-out infinite;font:inherit;color:inherit}.pav{position:relative;display:block;width:130%;margin:0 -15%;aspect-ratio:400 / 335;transition:transform .35s cubic-bezier(.2,.9,.3,1.3)}.pav img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 16px rgba(31,127,128,.16))}.room-card:hover .pav,.room-card:focus-visible .pav{transform:scale(1.07) translateY(-3%)}.pav.radiant img{animation:radiant 3.2s ease-in-out infinite}@keyframes radiant{50%{filter:drop-shadow(0 0 14px rgba(255,226,150,.85))}}.radiant .room-name{box-shadow:0 0 0 2px #f3d27a,0 0 18px #f3d27acc}@media(prefers-reduced-motion:reduce){.pav.radiant img{animation:none}}.room-card.mine .room-name{background:var(--lagoon);color:#fff}@keyframes bob{50%{transform:translateY(-6px)}}.room-name{font-weight:800;background:#ffffffe0;padding:2px 12px;border-radius:999px;margin-top:-2%;white-space:nowrap;font-size:15px;position:relative}.room-count{font-size:12px;color:var(--ink-soft)}.room-mine{font-size:11px;font-weight:700;color:var(--lagoon)}.bar{width:70%;height:7px;border-radius:9px;background:#fffc;overflow:hidden;box-shadow:inset 0 0 0 1px #1f7f801f}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--aqua),var(--lagoon));border-radius:9px;transition:width .8s}.scroll-hint{text-align:center;margin:36px 0 0;font-size:13px;color:var(--ink-soft);opacity:.8;animation:bob 2.6s ease-in-out infinite}.ranking{position:relative;max-width:760px;margin:200px auto 40px;padding:40px 24px 28px;background:#f6fbf8db;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:28px;box-shadow:var(--shadow)}.ranking h2{margin:0;text-align:center;font:600 clamp(28px,4vw,40px)/1.1 "Playfair Display",Georgia,serif;letter-spacing:.08em;text-transform:uppercase;color:var(--lagoon)}.rk-sub{margin:6px 0 18px;text-align:center;color:var(--ink-soft);font-size:14px}.rk-flowers{position:absolute;top:-70px;width:44%;max-width:340px;pointer-events:none;z-index:1}.rk-flowers.l{left:-150px}.rk-flowers.r{right:-150px}.ranking>h2,.ranking>.rk-sub,.podiums,.rk-list{position:relative;z-index:2}.podiums{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:2%;margin-bottom:16px}.podium{position:relative;width:27%;display:grid;justify-items:center}.podium.p1{width:33%}.podium-card{position:relative;width:100%}.podium img{width:100%;display:block}.podium-plaque{position:absolute;left:14%;right:14%;top:71.1%;height:11.8%;display:flex;align-items:center;justify-content:center;overflow:hidden}.podium.p1 .podium-plaque{top:64.7%;height:14.7%;left:13%;right:13%}.podium-name{font-weight:800;font-size:clamp(12px,1.6vw,16px);line-height:1;color:var(--ink);white-space:nowrap}.podium-count{margin-top:2px;font-size:12px;font-weight:700;color:var(--lagoon)}.rk-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}.rk-row{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;padding:6px 18px 6px 0;border-radius:12px;background:linear-gradient(90deg,#fff,#f6fbf8b3);box-shadow:inset 0 0 0 1px #7cc6c48c,0 2px 6px #1f7f8014}.rk-no{display:grid;place-items:center;height:36px;border-radius:12px 18px 18px 12px;background:linear-gradient(135deg,var(--mint),#fff);color:var(--lagoon);font:600 20px Playfair Display,Georgia,serif;box-shadow:inset -3px 0 0 var(--aqua)}.rk-name{font-weight:700}.rk-count{font-size:13px;color:var(--ink-soft)}.rk-row:after{content:""}.modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px;background:#123b3347;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.login-card{width:min(420px,100%);background:#fff;border-radius:22px;padding:22px 22px 18px;box-shadow:0 20px 60px #123b3340;display:grid;gap:10px}.login-card h2{margin:0;font:700 32px var(--font-title);color:var(--lagoon)}.login-card label{display:grid;gap:4px;font-size:13px;font-weight:600}.login-card input,.login-card select{font:inherit;padding:10px 12px;border-radius:12px;border:1px solid #cfe5dc;background:var(--pearl)}.login-card .row{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}.error{color:var(--berry);font-size:13px;margin:0;min-height:1em}.toasts{position:fixed;left:50%;bottom:20px;transform:translate(-50%);z-index:120;display:grid;gap:8px;width:min(520px,calc(100% - 32px))}.toast{background:var(--ink);color:#fff;padding:10px 16px;border-radius:14px;box-shadow:var(--shadow);transition:opacity .4s;font-size:14px}.toast-error{background:var(--berry)}.toast.out{opacity:0}.quota-notice{position:fixed;z-index:1000;left:50%;top:max(16px,env(safe-area-inset-top));transform:translate(-50%);width:min(560px,calc(100% - 32px));padding:14px 18px;border-radius:18px;background:#ffffffc7;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--ink);box-shadow:var(--shadow);text-align:center;font-size:15px;line-height:1.5}.quota-notice p{margin:0}@media(max-width:900px){.rooms{--cols: 4}}@media(max-width:640px){.page-lobby{padding:64px 12px 32px}.rooms{--cols: 2}.ranking{padding:32px 12px 20px;margin-top:120px}.rk-flowers.l{left:-40px}.rk-flowers.r{right:-40px}.rk-row{grid-template-columns:36px 1fr auto;gap:8px}.chip-name{max-width:9ch}}.page-room{position:fixed;inset:0;overflow:hidden}.stage{position:absolute;inset:0;background:#dff1ea url(/img/room-bg.jpg) center/cover}.stage-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:manipulation}.hud{position:absolute;inset:0;pointer-events:none;z-index:20}.hud>*{pointer-events:auto}.hud-left{position:absolute;left:12px;top:12px;display:flex;gap:8px;align-items:center}.hud-right{position:absolute;right:14px;bottom:16px;display:flex;gap:10px;align-items:center}.hud-box{display:flex;align-items:center;gap:10px;background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:999px;padding:8px 14px;box-shadow:var(--shadow);font-weight:700}.hud-box .bar{width:clamp(70px,12vw,180px);height:8px;background:#1f7f8026}.hud-count{font-size:13px;color:var(--ink-soft);white-space:nowrap}.hud-btn{width:40px;height:40px;border-radius:50%;border:0;background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:var(--shadow);cursor:pointer;font-size:18px}.hud-link{border:0;background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:999px;padding:8px 14px;font-size:13px;color:var(--lagoon);cursor:pointer;box-shadow:var(--shadow)}.hud-notice{position:absolute;left:50%;top:66px;transform:translate(-50%);background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:8px 16px;border-radius:999px;font-size:13px;font-weight:600;color:var(--berry);box-shadow:var(--shadow);max-width:calc(100% - 32px);text-align:center}.bell-tip{position:absolute;transform:translate(-50%,12px);background:#fffffff0;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;box-shadow:0 4px 14px #0000001a;opacity:0;transition:opacity .2s;pointer-events:none}.bell-tip.on{opacity:1}.bells-2d{position:absolute;inset:0}.bell-2d{position:absolute;width:calc(8.5% * var(--s, 1));filter:hue-rotate(var(--hue, 0deg));aspect-ratio:300 / 666;transform:translate(-50%,-38%);border:0;padding:0;background:transparent;cursor:pointer;transition:left 1.6s cubic-bezier(.6,0,.3,1),top 1.6s cubic-bezier(.6,0,.3,1),width 1.6s,opacity 1.2s}.bells-2d.portrait .bell-2d{width:calc(16% * var(--s, 1))}.bell-2d:before{content:"";position:absolute;left:50%;bottom:100%;width:2px;height:300%;background:#2f5f56;opacity:.85;pointer-events:none}.bell-2d .bell-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .9s;transform-origin:50% 0;animation:sway var(--d) ease-in-out infinite var(--dl)}.bell-2d[data-state=vo] .bell-img-vo,.bell-2d[data-state=lanh] .bell-img-lanh,.bell-2d[data-state=hoanthien] .bell-img-hoanthien{opacity:1}.bell-2d .bell-img-vo{filter:brightness(1.28) saturate(1.05) contrast(.95)}.bell-2d .bell-img-lanh{filter:brightness(1.22) saturate(1.15)}@keyframes sway{0%,to{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}.bell-glow{position:absolute;left:-60%;right:-60%;top:2%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,246,210,.95),rgba(255,226,160,.4) 35%,transparent 65%);opacity:0;transition:opacity 1.2s;pointer-events:none}.bell-2d[data-state=hoanthien] .bell-glow{opacity:.8}.bell-flash{position:absolute;left:-80%;right:-80%;top:5%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff,rgba(255,255,255,.6) 25%,transparent 60%);opacity:0;pointer-events:none}.bell-flash.go{animation:flash 1s ease-out}@keyframes flash{0%{opacity:0;transform:scale(.3)}20%{opacity:1}to{opacity:0;transform:scale(1.4)}}.bells-2d.gather .bell-2d{left:50%!important;top:18%!important;opacity:0}@media(max-width:640px){.hud-left{top:60px}.hud-notice{top:116px;font-size:12px}.hud-right{left:12px;right:12px;justify-content:space-between}}.sheet-wrap{position:fixed;inset:0;z-index:60;background:#123b3338;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:flex-end;justify-content:center;animation:fadeIn .25s;transition:opacity .3s}.sheet-wrap.out{opacity:0}@keyframes fadeIn{0%{opacity:0}}.sheet{position:relative;width:min(720px,100%);max-height:88vh;overflow-y:auto;background:linear-gradient(180deg,#fff,var(--pearl));border-radius:26px 26px 0 0;padding:22px 24px 28px;box-shadow:0 -10px 40px #123b3333;animation:up .35s cubic-bezier(.2,.9,.3,1)}@keyframes up{0%{transform:translateY(40px);opacity:0}}.sheet-close{position:absolute;right:14px;top:10px;width:36px;height:36px;border:0;border-radius:50%;background:var(--mint);color:var(--lagoon);font-size:22px;cursor:pointer}.sheet header h2{margin:2px 0 0;font:700 38px var(--font-title);color:var(--lagoon)}.sheet-code{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}.mockup-badge{display:inline-block;margin-top:4px;font-size:12px;font-weight:700;color:var(--berry);background:var(--blush);padding:2px 10px;border-radius:999px}.sheet-message{font-style:italic;color:var(--ink-soft);margin:8px 0 12px}.sheet-progress{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;margin-bottom:10px}.sheet-progress .bar{flex:1;height:8px;background:#1f7f801f}.sheet-how{background:#fff;border:1px solid #dcefe7;border-radius:14px;padding:8px 14px;margin-bottom:14px}.sheet-how summary{font-weight:700;cursor:pointer;color:var(--lagoon)}.sheet-how p{margin:6px 0;font-size:14px;line-height:1.55}.form{display:grid;gap:10px;margin-bottom:12px}.form label{display:grid;gap:4px;font-size:13px;font-weight:600}.form input,.form textarea{font:inherit;padding:10px 12px;border-radius:12px;border:1px solid #cfe5dc;background:#fff;resize:vertical}.form-row{display:flex;justify-content:space-between;align-items:center}.counter{font-size:12px;color:var(--ink-soft)}.counter.over{color:var(--berry);font-weight:700}.form-msg{margin:0;font-size:13px;min-height:1em;color:var(--lagoon)}.form-msg.error{color:var(--berry)}.notice{background:var(--vanilla);border-radius:14px;padding:12px 14px;font-weight:600;color:var(--berry)}.big-press{justify-self:center;font-size:17px;padding:.9em 2em}.kw{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.kw-chip{border:1px solid var(--aqua);background:#fff;color:var(--lagoon);border-radius:999px;padding:4px 12px;cursor:pointer;font-size:13px}.kw-chip.on{background:var(--lagoon);color:#fff}.multi-progress{margin:0;font-weight:700;color:var(--lagoon)}.poses{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.pose{margin:0;text-align:center;font-size:12px}.pose img,.pose-ph{display:block;width:100%;aspect-ratio:1;border-radius:12px;object-fit:cover}.pose-ph{background:radial-gradient(circle at 50% 38%,var(--blush) 0 18%,transparent 19%),radial-gradient(ellipse at 50% 85%,var(--aqua) 0 35%,transparent 36%),var(--mint)}.pose-ph-1{filter:hue-rotate(40deg)}.pose-ph-2{filter:hue-rotate(-40deg)}.pose-ph-3{filter:hue-rotate(90deg)}.photo-preview{max-height:200px;border-radius:12px;object-fit:contain}.quiz{display:grid;gap:8px}.quiz-q{font-weight:700;margin:0}.quiz-choice{text-align:left;border:1px solid #cfe5dc;background:#fff;border-radius:12px;padding:10px 14px;cursor:pointer}.quiz-choice:hover{background:var(--mint)}.quiz-result{font-weight:800;color:var(--lagoon);font-size:18px}.mine{background:#fff;border-radius:14px;padding:8px 14px;margin-bottom:12px;border:1px dashed var(--aqua)}.mine h4{margin:4px 0;font-size:13px;color:var(--lagoon)}.mine ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13px}.mine li{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}.status-chip{font-size:11px;font-weight:700;border-radius:999px;padding:2px 8px;background:var(--vanilla);color:#8a6d1f}.mine-approved .status-chip{background:var(--mint);color:var(--lagoon)}.mine-rejected .status-chip{background:var(--blush);color:var(--berry)}.mine-body{overflow-wrap:anywhere}.wall-title{font:700 26px var(--font-title);color:var(--lagoon);margin:8px 0}.wall-wishes{columns:2 220px;column-gap:12px}.wish-card{break-inside:avoid;margin:0 0 12px;background:#fff;border-radius:16px;padding:12px 14px;box-shadow:0 6px 18px #1f7f801a;border-top:4px solid var(--aqua)}.wish-card blockquote{margin:0;font:600 18px/1.35 var(--font-title);color:var(--ink);overflow-wrap:anywhere}.wish-card figcaption{margin-top:6px;font-size:12px;color:var(--ink-soft)}.wall-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}.wall-photos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px}.wall-feed{list-style:none;padding:0;margin:0;display:grid;gap:6px;font-size:14px}.wall-feed li{background:#fff;border-radius:12px;padding:8px 12px;display:flex;gap:6px;flex-wrap:wrap}.wall-feed time{margin-left:auto;color:var(--ink-soft);font-size:12px}@media(max-width:640px){.sheet-wrap{align-items:stretch}.sheet{max-height:none;height:100%;border-radius:0;padding:18px 16px 28px}.poses{grid-template-columns:repeat(2,1fr)}}.guide{position:fixed;left:10px;bottom:8px;z-index:70;display:flex;align-items:flex-end;pointer-events:none;height:min(40vh,340px)}.pl-char{pointer-events:auto;position:relative;height:100%;aspect-ratio:524 / 800;border:0;padding:0;background:transparent;cursor:pointer;animation:plFloat 4s ease-in-out infinite;transform-origin:50% 100%}.pl-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(31,127,128,.25));transition:transform .08s}.pl-aura{position:absolute;inset:12% 10% 20%;border-radius:50%;background:radial-gradient(circle,rgba(255,250,220,.9),rgba(191,230,216,.35) 45%,transparent 70%);opacity:0;transition:opacity .15s}@keyframes plFloat{50%{transform:translateY(-3%)}}.guide.excited .pl-char{animation:plHop .55s ease-in-out infinite}@keyframes plHop{0%,to{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6%) rotate(2deg)}}.guide.tender .pl-char{animation:plBreathe 3.2s ease-in-out infinite}@keyframes plBreathe{50%{transform:scale(1.025) translateY(-1%)}}.pl-bubble{pointer-events:auto;align-self:center;margin-left:-10px;max-width:min(480px,42vw);background:#fffffff0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:20px 20px 20px 6px;padding:10px 14px 8px;box-shadow:0 10px 30px #1f7f8038;border:1px solid rgba(191,230,216,.9);font-size:15px;line-height:1.55;opacity:0;transform:translateY(8px) scale(.97);transition:opacity .35s,transform .35s}.pl-bubble.on{opacity:1;transform:none}.pl-bubble b{display:block;font:700 18px var(--font-title);color:var(--lagoon)}.pl-sub{margin:2px 0 6px;min-height:1.5em}.pl-row{display:flex;justify-content:flex-end;gap:6px}.pl-btn{font-size:12px;font-weight:600;border:0;border-radius:999px;padding:4px 10px;background:#e3f4ee;color:var(--lagoon);cursor:pointer}body[data-route=lobby] .guide{height:min(30vh,260px)}.sheet-wrap~.guide-host .guide,body:has(.sheet-wrap) .guide{opacity:0;pointer-events:none}@media(max-width:640px){.guide{height:150px;left:4px;bottom:4px;right:4px}.pl-bubble{max-width:none;flex:1;font-size:13px}}@media(prefers-reduced-motion:reduce){.pl-char,.guide.excited .pl-char,.guide.tender .pl-char{animation:none}}.intro{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px;background:#dff1ea59;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:opacity .5s}.intro.out{opacity:0}.letter-stage{position:relative;width:min(720px,94vw);aspect-ratio:467 / 300;cursor:pointer;perspective:1800px}.envelope{position:absolute;inset:0;display:grid;place-items:center;transition:transform .7s cubic-bezier(.3,.8,.3,1),opacity .5s}.env{position:absolute;inset:0;margin:auto;width:86%;max-height:100%;object-fit:contain;filter:drop-shadow(0 18px 30px rgba(18,59,51,.25));transition:opacity .55s,transform .7s cubic-bezier(.3,.8,.3,1)}.env.closed{animation:env-in .8s cubic-bezier(.2,.9,.3,1.2) both}.env.open{width:62%;opacity:0;transform:rotate(-4deg) scale(.9)}@keyframes env-in{0%{transform:translateY(40px) rotate(-6deg) scale(.8);opacity:0}}.letter-stage[data-step=open] .env.closed{opacity:0;transform:rotateX(70deg) scale(.9)}.letter-stage[data-step=open] .env.open{opacity:1;transform:rotate(-4deg) scale(1)}.letter-stage[data-step=letter] .envelope{opacity:0;transform:translateY(40%) scale(.85);pointer-events:none}.env-hint{position:absolute;bottom:-6%}.letter-stage[data-step=open] .env-hint{opacity:0}.letter-book{position:absolute;inset:0;transform-style:preserve-3d;opacity:0;transform:translateY(18%) scale(.6) rotate(-4deg);transition:opacity .5s .15s,transform .8s .1s cubic-bezier(.2,.9,.3,1.1);pointer-events:none}.letter-stage[data-step=letter] .letter-book{opacity:1;transform:none;pointer-events:auto}.letter-page{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:9% 12% 8%;background:url(/img/kv/letter.png) center / 100% 100% no-repeat;transform-origin:0 50%;transform-style:preserve-3d;backface-visibility:hidden;transition:transform .9s cubic-bezier(.45,.05,.3,1),box-shadow .9s;filter:drop-shadow(0 14px 24px rgba(18,59,51,.22))}.letter-page p{margin:0;font:500 clamp(13px,1.7vw,17px)/1.7 "Quicksand","Be Vietnam Pro",sans-serif;color:#4a3b2b;text-align:left}.letter-page p.strong,.letter-page p strong{font-weight:700;color:#3a2e21}.letter-page .letter-lines{display:grid;gap:.7em}.letter-page.turned{transform:rotateY(-178deg) translateZ(1px);pointer-events:none}.letter-page.turned:after{content:""}.letter-page:not(.turned)+.letter-page{transform:rotate(.8deg)}.letter-no{position:absolute;left:12%;bottom:7%;font-size:12px;color:#a08a6a;letter-spacing:.1em}.letter-hint{align-self:flex-end;font-size:12px;color:var(--lagoon);font-weight:700;opacity:.85;animation:hint 1.8s ease-in-out infinite}@keyframes hint{50%{opacity:.35;transform:translate(3px)}}.letter-enter{align-self:center;margin-top:4px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}@media(max-width:640px){.letter-stage{aspect-ratio:3 / 4.2;width:min(380px,92vw)}.letter-page{background-image:url(/img/kv/paper.png);padding:16% 13% 14%}.env{width:100%}.env.open{width:84%}}@media(prefers-reduced-motion:reduce){.letter-page,.env,.envelope,.letter-book{transition-duration:.01s}.letter-hint,.env.closed{animation:none}}.intro-skip{position:absolute;right:18px;top:18px;z-index:2}.whiteout{position:fixed;inset:0;z-index:110;background:#fffdf4;opacity:0;pointer-events:none;transition:opacity .8s}.whiteout.on{opacity:1}.finale{position:fixed;inset:0;z-index:100;overflow:hidden;opacity:0;transition:opacity 1s}.finale.on{opacity:1}.finale-bg{position:absolute;inset:0;background:#f3faf6 url(/img/tribute.jpg) center/contain no-repeat;transform:scale(1.15);transition:transform 9s ease-out}.finale.on .finale-bg{transform:scale(1)}@media(min-aspect-ratio:16/9){.finale-bg{background-size:cover}}.finale-wishes{position:absolute;inset:0}.finale-wish{position:absolute;margin:0;transform:translate(-50%,-50%);max-width:min(300px,44vw);background:#fffc;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:16px;padding:8px 14px;box-shadow:0 6px 18px #1f7f8026;opacity:0;animation:wishIn 1.2s ease-out forwards,drift 7s ease-in-out infinite 2s}.finale-wish blockquote{margin:0;font:600 clamp(14px,1.4vw,20px)/1.3 var(--font-title);color:var(--ink);overflow-wrap:anywhere}.finale-wish figcaption{font-size:11px;color:var(--ink-soft);margin-top:2px}@keyframes wishIn{0%{opacity:0;transform:translate(-50%,calc(-50% + 20px)) scale(.9)}to{opacity:1;transform:translate(-50%,-50%)}}@keyframes drift{50%{transform:translate(-50%,calc(-50% - 8px))}}.finale-msg{position:absolute;left:50%;bottom:74px;transform:translate(-50%);width:min(820px,calc(100% - 32px));text-align:center;opacity:0;transition:opacity 1.5s 2.5s}.finale.on .finale-msg{opacity:1}.finale-msg p{display:inline-block;margin:0;font:600 clamp(15px,1.8vw,24px) var(--font-title);color:var(--lagoon);background:#ffffffd1;padding:.4em 1.2em;border-radius:22px}.finale-actions{position:absolute;right:16px;top:14px;display:flex;gap:8px}@media(max-aspect-ratio:1/1){.finale-bg{background-size:cover}.finale-wish{max-width:44vw;padding:6px 10px}.finale-msg{bottom:10px}.finale-msg p{font-size:15px}}.sheet-compact{padding-top:26px}.sheet-head-compact{text-align:center;padding:0 64px}.sheet-head-compact h2{margin:0;font:700 clamp(40px,6vw,54px)/1.1 var(--font-title);color:var(--lagoon)}.sheet-subtitle{margin:4px 0 14px;font-size:14px;color:var(--ink-soft)}.sheet-compact .sheet-progress{max-width:520px;margin:0 auto 16px}.pl-tip{position:absolute;left:10px;top:6px;width:58px;height:74px;padding:0;border:0;background:none;cursor:help;z-index:3}.pl-tip img{width:100%;height:100%;object-fit:contain;object-position:top;filter:drop-shadow(0 4px 6px rgba(31,127,128,.25));animation:pl-bob 3.4s ease-in-out infinite}@keyframes pl-bob{50%{transform:translateY(-3px) rotate(-2deg)}}.pl-tip-bubble{position:absolute;left:62px;top:8px;width:min(320px,70vw);display:grid;gap:6px;padding:12px 14px;text-align:left;font-size:13px;line-height:1.5;color:var(--ink);background:#fff;border:1px solid var(--mint);border-radius:16px;box-shadow:var(--shadow);opacity:0;transform:translateY(-4px) scale(.96);transform-origin:0 0;pointer-events:none;transition:opacity .2s,transform .2s}.pl-tip-bubble:before{content:"";position:absolute;left:-7px;top:18px;width:12px;height:12px;background:#fff;border-left:1px solid var(--mint);border-bottom:1px solid var(--mint);transform:rotate(45deg)}.pl-tip-bubble strong{font:700 18px var(--font-title);color:var(--lagoon)}.pl-tip-done{font-weight:700;color:var(--lagoon)}.pl-tip:hover .pl-tip-bubble,.pl-tip:focus-visible .pl-tip-bubble,.pl-tip.on .pl-tip-bubble{opacity:1;transform:none}.teacher-select{font:inherit;padding:10px 12px;border-radius:12px;border:1px solid var(--aqua);background:var(--aqua);color:#0f3f3c;font-weight:600;cursor:pointer}.teacher-select option{background:#fff;color:var(--ink)}.press-burst{position:fixed;z-index:130;width:0;height:0;pointer-events:none}.burst-plus{position:absolute;left:0;top:0;display:flex;align-items:center;gap:2px;transform:translate(-50%,-50%);animation:burst-rise 1.5s cubic-bezier(.2,.8,.3,1) forwards}.burst-plus img{width:26px;height:auto;filter:drop-shadow(0 2px 4px rgba(31,127,128,.35))}.burst-plus b{font-size:22px;font-weight:800;color:var(--lagoon);text-shadow:0 1px 0 #fff,0 0 10px rgba(255,255,255,.9)}@keyframes burst-rise{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}15%{opacity:1;transform:translate(-50%,-60%) scale(1.1)}to{opacity:0;transform:translate(-50%,-260%) scale(1)}}.burst-bubble{position:absolute;left:0;top:0;border-radius:50%;background:radial-gradient(circle at 32% 30%,#fff 0 18%,#ffffff59 30%,#7cc6c447 62%,#f8c8d473);box-shadow:inset 0 0 0 1px #fffc;opacity:0;animation:bubble-rise var(--d) ease-out var(--delay) forwards}@keyframes bubble-rise{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}20%{opacity:.95}to{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% - var(--rise))) scale(1.1)}}@media(max-width:640px){.sheet-head-compact{padding:0 48px}.pl-tip{width:46px;height:60px}}@media(prefers-reduced-motion:reduce){.pl-tip img{animation:none}.burst-plus,.burst-bubble{animation-duration:.01s}}.letter-stage.direct .letter-book{animation:letter-in .7s cubic-bezier(.2,.9,.3,1.1) both}@keyframes letter-in{0%{opacity:0;transform:translateY(12%) scale(.82) rotate(-3deg)}}.wish-garden{display:grid;gap:8px;justify-items:center;margin:4px 0 8px}.wg-scene{position:relative;width:100%;aspect-ratio:1264 / 1085;container-type:size;border-radius:18px;overflow:hidden;box-shadow:0 16px 34px #123b332e;background:#dcefe7}.wg-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.wg-strip{position:absolute;z-index:1;width:var(--w);padding:0;border:0;background:none;cursor:pointer;transform:translate(-50%) rotate(var(--rot));transform-origin:50% 0;animation:strip-sway var(--d) ease-in-out infinite alternate}.wg-thread{display:block;width:1px;height:var(--len);margin:0 auto;background:#785c40a6}.wg-strip img{display:block;width:100%;filter:drop-shadow(0 5px 6px rgba(18,59,51,.28));transition:transform .2s}.wg-strip:hover img,.wg-strip:focus-visible img{transform:scale(1.12)}.wg-strip.far{z-index:1}.wg-strip.far img{opacity:.7;filter:blur(.7px) saturate(.75) brightness(1.06)}.wg-strip.far .wg-thread{opacity:.45}.wg-strip.mid{z-index:2}.wg-strip.mid img{opacity:.93;filter:saturate(.92) drop-shadow(0 4px 5px rgba(18,59,51,.22))}.wg-strip.near{z-index:3}.wg-strip.glow img{filter:drop-shadow(0 0 8px rgba(255,240,190,.95)) drop-shadow(0 0 22px rgba(255,214,120,.65))}.wg-strip.glow:after{content:"";position:absolute;left:50%;bottom:18%;width:260%;aspect-ratio:3 / 1;border:1.5px solid rgba(255,226,150,.85);border-radius:50%;box-shadow:0 0 10px #ffe29699;transform:translate(-50%) rotate(-14deg);pointer-events:none;animation:ring-glow 3s ease-in-out infinite}@keyframes ring-glow{50%{opacity:.45}}@keyframes strip-sway{0%{transform:translate(-50%) rotate(calc(var(--rot) - 2.5deg))}to{transform:translate(-50%) rotate(calc(var(--rot) + 2.5deg))}}.wg-empty{position:absolute;inset:42% 14% auto;z-index:4;text-align:center;font-weight:600;color:var(--lagoon);background:#fffc;padding:10px 14px;border-radius:14px}.wg-hint{margin:6px 0 0;font-size:12px}.wish-view{position:fixed;inset:0;z-index:95;display:grid;place-items:center;background:#123b3352;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:fadeIn .2s;transition:opacity .25s}.wish-view.out{opacity:0}.wish-view-close{position:fixed;right:18px;top:18px}.wish-strip-big{position:relative;margin:0;height:min(680px,86vh);aspect-ratio:71 / 244;padding:0;background:var(--strip) center / 100% 100% no-repeat;filter:drop-shadow(0 18px 30px rgba(18,59,51,.3));animation:strip-open .45s cubic-bezier(.2,.9,.3,1.2) both}@keyframes strip-open{0%{transform:translateY(30px) rotate(-6deg) scale(.6);opacity:0}}.wish-text{position:absolute;inset:7% 8% 40%;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:10px 8px;overflow:auto;scrollbar-width:none;border-radius:10px;background:#fff9;-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px)}.wish-text::-webkit-scrollbar{display:none}.wish-strip-big blockquote{margin:0;font:600 clamp(12px,1.9vh,14px)/1.5 "Quicksand","Be Vietnam Pro",sans-serif;color:#3e3326;text-align:center;overflow-wrap:anywhere}.wish-strip-big figcaption{display:grid;gap:2px;text-align:center;font-size:12px;font-weight:700;color:var(--lagoon)}.wish-strip-big .to{font-weight:600;color:var(--ink-soft)}@media(prefers-reduced-motion:reduce){.wg-strip,.wish-strip-big{animation:none}}.pl-tip-signal{position:absolute;left:96px;top:8px;display:inline-flex;align-items:center;gap:6px;padding:4px 11px 4px 9px;white-space:nowrap;font:700 13px/1.2 Quicksand,Be Vietnam Pro,sans-serif;color:var(--lagoon);background:#fff;border:1.5px solid var(--aqua);border-radius:999px;box-shadow:0 0 #7cc6c499;animation:signal-blink 1.6s ease-in-out infinite;pointer-events:none;transition:opacity .2s}.pl-tip-signal i{width:8px;height:8px;border-radius:50%;background:var(--rose);box-shadow:0 0 6px var(--rose);animation:signal-dot 1.6s ease-in-out infinite}@keyframes signal-blink{0%,to{opacity:1;box-shadow:0 0 #7cc6c48c}50%{opacity:.55;box-shadow:0 0 0 6px #7cc6c400}}@keyframes signal-dot{50%{transform:scale(.55);opacity:.4}}.pl-tip:hover .pl-tip-signal,.pl-tip:focus-visible .pl-tip-signal,.pl-tip.on .pl-tip-signal{opacity:0}@media(max-width:640px){.pl-tip-signal{left:74px;top:4px;font-size:11px;padding:3px 8px 3px 7px}}@media(prefers-reduced-motion:reduce){.pl-tip-signal,.pl-tip-signal i{animation:none}}.pl-tip-arrow{position:absolute;left:-36px;top:12px;width:32px;color:var(--rose);filter:drop-shadow(0 1px 1px rgba(255,255,255,.9));animation:arrow-nudge 1.1s ease-in-out infinite}.pl-tip-arrow svg{display:block;width:100%;height:auto}@keyframes arrow-nudge{50%{transform:translate(-5px,3px)}}@media(max-width:640px){.pl-tip-arrow{left:-24px;width:24px}}@media(prefers-reduced-motion:reduce){.pl-tip-arrow{animation:none}}.memory-wall{position:relative;margin:6px -8px 8px;padding:34px 22px 30px;min-height:260px;overflow:hidden;border-radius:22px;background:radial-gradient(120% 80% at 15% 0%,rgba(248,200,212,.35),transparent 60%),radial-gradient(100% 70% at 100% 100%,rgba(124,198,196,.3),transparent 60%),linear-gradient(180deg,#fffaf3,#f3faf6);box-shadow:inset 0 0 0 1px #7cc6c459,0 10px 26px #123b331a}.mw-deco{position:absolute;pointer-events:none;z-index:0}.mw-deco.petals.a{left:-30px;top:-20px;width:46%;opacity:.75;animation:mw-drift 9s ease-in-out infinite}.mw-deco.petals.b{right:-20px;bottom:-30px;width:30%;opacity:.7;transform:rotate(160deg);animation:mw-drift 11s ease-in-out infinite reverse}.mw-deco.bubbles.a{right:-40px;top:-30px;width:34%;opacity:.55;animation:mw-float 7s ease-in-out infinite}.mw-deco.bubbles.b{left:-60px;bottom:-50px;width:40%;opacity:.45;animation:mw-float 9s ease-in-out infinite -3s}@keyframes mw-drift{50%{translate:10px 8px}}@keyframes mw-float{50%{translate:0 -12px}}.mw-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:26px 22px;align-items:start}.memory{position:relative;display:block;margin-top:var(--drop, 0);padding:9px 9px 30px;background:#fff;border-radius:3px;text-decoration:none;box-shadow:0 10px 22px #123b332e,0 2px 4px #123b3314;transform-origin:50% 0;transform:rotate(var(--tilt, 0deg));animation:memory-float var(--d, 5s) ease-in-out infinite var(--dl, 0s);transition:box-shadow .2s}.memory:hover,.memory:focus-visible{z-index:2;box-shadow:0 16px 30px #123b333d;animation-play-state:paused}@keyframes memory-float{0%,to{transform:rotate(var(--tilt, 0deg)) translateY(0)}50%{transform:rotate(calc(var(--tilt, 0deg) * -.4)) translateY(-7px)}}.memory img{display:block;width:100%;aspect-ratio:4 / 3;object-fit:cover;border-radius:2px}.memory-pin{position:absolute;left:50%;top:-9px;width:18px;height:18px;margin-left:-9px;z-index:2;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 18%,var(--pin) 42%,color-mix(in srgb,var(--pin) 70%,#000) 100%);box-shadow:0 3px 4px #123b3359}.memory-pin:after{content:"";position:absolute;left:50%;top:14px;width:2px;height:8px;margin-left:-1px;background:linear-gradient(#9aa,#ccd);border-radius:1px}.memory-cap{position:absolute;left:9px;right:9px;bottom:7px;font:600 12px Quicksand,Be Vietnam Pro,sans-serif;color:var(--ink-soft);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.memory-tag{position:absolute;top:16px;right:14px;padding:2px 8px;font-size:11px;font-weight:700;color:var(--berry);background:#fff6e0f0;border-radius:999px}.memory.pending img{filter:saturate(.85)}.mw-empty{position:relative;z-index:1;margin:70px auto;max-width:360px;text-align:center;font-weight:600;color:var(--lagoon);background:#ffffffbf;padding:12px 16px;border-radius:14px}@media(max-width:640px){.mw-grid{grid-template-columns:repeat(2,1fr);gap:20px 14px}.memory-wall{padding:28px 12px 24px;margin:6px 0 8px}}@media(prefers-reduced-motion:reduce){.memory,.mw-deco{animation:none}}.wg-scene.orange{aspect-ratio:1130 / 1122;background:#f7d6c0}.wg-jar img{filter:drop-shadow(0 6px 8px rgba(120,50,30,.3))}.wg-jar.far img{opacity:.78;filter:blur(.6px) saturate(.85) drop-shadow(0 3px 4px rgba(120,50,30,.2))}.wg-jar.glow img{filter:drop-shadow(0 0 10px rgba(255,236,190,.95)) drop-shadow(0 0 24px rgba(255,200,140,.7))}.wg-jar.glow:after{bottom:22%}.wg-jar .wg-thread{background:#f0e1c8cc}.jar-badge{position:absolute;left:50%;bottom:14%;min-width:1.6em;padding:0 .35em;transform:translate(-50%);font:700 clamp(9px,1.4cqw,13px)/1.6 "Quicksand","Be Vietnam Pro",sans-serif;color:#8f3a55;text-align:center;background:#ffffffd9;border-radius:999px;box-shadow:0 1px 3px #78321e40;pointer-events:none}.wg-jar.far .jar-badge{display:none}.jar-view{overflow-y:auto;padding:24px 12px}.jar-open{display:grid;justify-items:center;gap:4px;width:100%}.jar-title{margin:0;font:700 clamp(28px,4vw,40px) var(--font-title);color:#fff;text-shadow:0 2px 12px rgba(143,58,85,.5)}.jar-count{margin:0 0 12px;font:700 14px Quicksand,Be Vietnam Pro,sans-serif;color:#fff;text-shadow:0 1px 6px rgba(18,59,51,.5)}.jar-strips{display:flex;gap:clamp(10px,2vw,22px);max-width:100%;overflow-x:auto;padding:6px 10px 14px;scroll-snap-type:x mandatory}.jar-strip{flex:0 0 auto;height:min(480px,66vh);scroll-snap-align:center;animation:strip-open .45s cubic-bezier(.2,.9,.3,1.2) both;animation-delay:calc(var(--i) * 90ms)}.jar-strip .wish-text{justify-content:center}@media(max-width:640px){.jar-strips{justify-content:flex-start}.jar-strip{height:min(420px,60vh)}}.jar-strips>:first-child{margin-left:auto}.jar-strips>:last-child{margin-right:auto}.finale.with-photos .finale-bg{background:radial-gradient(90% 70% at 15% 10%,rgba(248,200,212,.45),transparent 60%),radial-gradient(90% 70% at 90% 90%,rgba(124,198,196,.4),transparent 60%),linear-gradient(180deg,#f6fbf8,#fff6e0)}.finale-photos{position:absolute;inset:0}.finale-photo{position:absolute;margin:0;padding:.45em .45em 1.6em;background:#fff;border-radius:3px;font-size:clamp(9px,1vw,14px);box-shadow:0 14px 30px #123b3338,0 2px 5px #123b331a;transform:translate(-50%,-50%) rotate(var(--rot));opacity:0;animation:finale-photo-in .9s cubic-bezier(.2,.9,.3,1.2) forwards,finale-photo-sway 6s ease-in-out infinite}.finale-photo:before{content:"";position:absolute;left:50%;top:-.55em;width:1.2em;height:1.2em;margin-left:-.6em;border-radius:50%;z-index:1;background:radial-gradient(circle at 35% 30%,#fff 0 18%,var(--pin) 45%,color-mix(in srgb,var(--pin) 70%,#000) 100%);box-shadow:0 2px 4px #123b3359}.finale-photo img{display:block;width:100%;aspect-ratio:4 / 3;object-fit:cover;border-radius:2px}.finale-photo figcaption{position:absolute;left:.45em;right:.45em;bottom:.3em;font:600 1em Quicksand,Be Vietnam Pro,sans-serif;color:var(--ink-soft);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@keyframes finale-photo-in{0%{opacity:0;transform:translate(-50%,-30%) rotate(calc(var(--rot) * 2)) scale(.7)}to{opacity:1;transform:translate(-50%,-50%) rotate(var(--rot))}}@keyframes finale-photo-sway{50%{translate:0 -6px}}.finale.with-photos .finale-wishes{z-index:2}.finale.with-photos .finale-msg,.finale.with-photos .finale-actions{z-index:3}.finale-deco{position:absolute;pointer-events:none;opacity:.6}.finale-deco.petals{left:-4%;top:-6%;width:34%}.finale-deco.bubbles{right:-4%;bottom:-6%;width:26%}@media(prefers-reduced-motion:reduce){.finale-photo{animation:finale-photo-in .01s forwards}}