:root{font-family:Arial,Helvetica,sans-serif;color:#fff;font-synthesis:none;--base:#5e5690;--base-light:#7873a7;--base-dark:#555184;--shadow:#4f4c6b;--letter:#d8d7e5}
*{box-sizing:border-box}
body{margin:0;background:#63556f url('images/bg.jpg') center/cover fixed no-repeat;min-width:280px;overflow-x:hidden}
button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:wait}a{color:inherit;text-decoration:none}button{color:inherit}h1,h2,p{margin:0}button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid #fff;outline-offset:5px}
.screen{min-height:100vh;min-height:100dvh;padding:32px 16px;background:#0003;display:flex;flex-direction:column;align-items:center;justify-content:center}
.screen h1{text-shadow:0 2px 8px #0003}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.glass-button{display:inline-flex;justify-content:center;align-items:center;gap:8px;padding:10px 16px;border:1px solid #ffffff80;border-radius:8px;background:#ffffff33;backdrop-filter:blur(4px);font-size:14px;line-height:1.4;transition:background .2s}
.glass-button:hover{background:#ffffff4d}.glass-button svg{width:16px;height:16px;flex-shrink:0}.page-nav{display:flex;justify-content:space-between;gap:12px;width:100%;margin-top:32px}.page-nav.centered{justify-content:center}
.passcode-screen{background:#0009;backdrop-filter:blur(4px)}.passcode-panel{width:min(100%,340px);text-align:center}.passcode-panel h1{font-size:24px;font-weight:300;margin-bottom:32px}.passcode-input{display:block;width:100%;background:transparent;border:1px solid #ffffff80;border-radius:8px;color:white;padding:12px;font-size:24px;text-align:center;letter-spacing:8px;margin:0 auto 20px}
.passcode-dots{display:none;justify-content:center;gap:14px;min-height:18px}.passcode-dots span{width:14px;height:14px;border:2px solid #71717a;border-radius:50%}.passcode-dots .filled{background:#fff;border-color:#fff}.enhanced .passcode-input{position:absolute;opacity:0;width:1px;height:1px;padding:0;margin:0;border:0}.enhanced .passcode-dots{display:flex}.enhanced:focus-within .passcode-dots{filter:drop-shadow(0 0 3px #fff5)}
.status{min-height:64px;padding:14px 0 10px;color:#ffb4b4;font-size:14px;font-weight:bold;line-height:1.4}.status.success{color:#86efac}.keypad{display:none;grid-template-columns:repeat(3,64px);gap:16px;justify-content:center;margin:0 auto 28px}.enhanced .keypad{display:grid}.keypad button{height:64px;width:64px;border:0;border-radius:50%;background:#27272a80;font-size:30px;font-weight:300;transition:background .2s}.keypad button:hover{background:#3f3f4680}.keypad button:active{background:#52525b80}.keypad button:last-child{grid-column:2}.passcode-actions{display:flex;justify-content:center;gap:32px}.text-button{border:0;background:transparent;padding:8px;font-size:18px}.submit-passcode{margin:16px auto 0}.enhanced .submit-passcode{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);padding:0;border:0}.enhanced .submit-passcode:focus-visible{position:static;width:auto;height:auto;clip:auto;padding:10px 16px}
.timer-panel{text-align:center;width:100%}.timer-panel h1{font-size:18px;margin-bottom:32px}.timer{display:flex;justify-content:center;gap:clamp(6px,2vw,16px);margin-bottom:24px;font-weight:bold;font-variant-numeric:tabular-nums}.time-unit{display:flex;flex-direction:column;position:relative;min-width:0}.time-unit+.time-unit{padding-left:clamp(12px,4vw,28px)}.time-unit+.time-unit:before{content:':';position:absolute;left:-4px;top:0;font-size:clamp(28px,8vw,60px)}.time-unit strong{font-size:clamp(30px,9vw,72px);text-shadow:0 2px 8px #0003}.time-unit span{font-size:14px;margin-top:4px}.timer-panel>p{font-size:18px}.timer-next{margin-top:64px;padding-inline:24px}
.recap-panel{width:min(100%,448px);text-align:center}.recap-panel h1{font-size:28px;line-height:1.2;margin-bottom:36px}.recap-options{display:flex;justify-content:center;gap:48px;margin-bottom:48px}.recap-option{display:flex;flex-direction:column;align-items:center;gap:10px}.heart-link{position:relative;width:96px;height:96px;transition:transform .2s}.recap-option:hover .heart-link{transform:scale(1.07)}.heart-link img{width:100%;height:100%;filter:drop-shadow(4px 6px 8px #0003)}.heart-link svg{position:absolute;inset:26px 30px 34px;width:36px;height:36px;color:#c67593}.click-me{font-size:14px;animation:bounce 1.6s infinite}.recap-option strong{font-size:18px}
.letter-panel{width:min(100%,400px)}.letter-stage{height:400px;display:flex;align-items:center;justify-content:center;padding-top:50px}.envelope-content{position:relative;perspective:600px;width:300px;height:180px;max-width:100%}.envelope{display:block;position:relative;width:100%;height:180px;border:0;padding:0;background:linear-gradient(#cccbd7 .5px,var(--base-light) .5px)}.envelope:before{content:'';position:absolute;top:0;left:0;width:100%;height:115px;background:var(--base-light);clip-path:polygon(0 0,100% 0,50% 100%);z-index:30;transform-origin:top;transition:transform .5s,z-index .01s .25s}.envelope:after{content:'';position:absolute;inset:0;z-index:25;background:linear-gradient(30deg,var(--base-dark) 47%,var(--shadow) 50%,var(--base) 50%) right bottom/50% 50% no-repeat,linear-gradient(31deg,var(--base) 49%,var(--shadow) 50%,transparent 50%) left top/51% 50% no-repeat,linear-gradient(150deg,var(--base) 50%,var(--shadow) 50%,var(--base-dark) 53%) left bottom/51% 50% no-repeat,linear-gradient(148.7deg,transparent 50%,var(--shadow) 50%,var(--base) 51%) right top/50% 50% no-repeat}
.letter{position:absolute;top:10px;left:10px;right:10px;height:160px;z-index:15;background:var(--letter);border-radius:2px;box-shadow:0 1px 7px -2px var(--base);color:var(--base);display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;transition:transform .7s, z-index .01s .4s;pointer-events:none}.letter p{font-size:16px;font-weight:900}.letter-close{position:absolute;right:12px;top:6px;background:none;border:0;font-size:25px}.open .envelope:before{transform:rotateX(180deg);z-index:10}.open .letter{transform:translateY(-130px);z-index:40;transition-delay:.3s;pointer-events:auto}
.music-panel{width:min(100%,400px)}.music-panel h1{text-align:center;font-size:24px}.music-board{position:relative;height:640px;overflow:hidden;border-radius:8px;margin-top:32px}.song{position:absolute;left:clamp(0px,var(--song-left),calc(100% - 224px));top:clamp(0px,var(--song-top),calc(100% - 64px));display:flex;align-items:center;gap:16px;width:224px;height:64px;padding:10px 16px;background:#ffffff1a;backdrop-filter:blur(16px);border-radius:12px;touch-action:none;user-select:none;cursor:grab}.song:active{cursor:grabbing}.song img{width:48px;height:48px;object-fit:cover;border-radius:6px;flex-shrink:0}.song>div{min-width:0}.song h2{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song p{font-size:12px;color:#ffffffb3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}.music-panel .page-nav{margin-top:16px}
.closing-screen{background:#0008 url('images/fireworks.gif') center/cover no-repeat}.closing-panel{width:min(100%,400px);text-align:center}.christmas{width:256px;height:256px;object-fit:contain;margin-bottom:32px;max-width:100%;animation:float 3s ease-in-out infinite}.closing-panel h1{font-size:20px;line-height:1.5}.closing-panel .page-nav{margin-top:48px}
.question-screen{background:#202124;justify-content:flex-start;padding-top:64px}.question-panel{width:min(100%,600px)}.google-word{text-align:center;font-size:72px;font-weight:500;letter-spacing:-6px;margin-bottom:32px}.google-word span:nth-child(1),.google-word span:nth-child(4){color:#4285f4}.google-word span:nth-child(2),.google-word span:nth-child(6){color:#ea4335}.google-word span:nth-child(3){color:#fbbc05}.google-word span:nth-child(5){color:#34a853}.question-panel form{display:flex;align-items:center;gap:12px;background:#303134;border:1px solid #5f6368;border-radius:28px;padding:4px 12px}.question-panel input{min-width:0;flex:1;background:none;border:0;color:white;padding:12px 0}.question-panel h2{margin-top:32px;font-size:24px;font-weight:400}.question-panel ul{list-style:none;padding:0}.question-panel li{padding:16px 0}.search-tip{color:#ffffff80;margin-top:24px;font-size:14px}.search-tip.highlight{color:#8ab4f8}
.gallery-panel{width:min(100%,400px)}.gallery-panel>h1{text-align:center;font-size:24px;margin-bottom:24px}.gallery-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;border-radius:8px;scrollbar-width:thin}.image-card{flex:0 0 100%;scroll-snap-align:start;background:#fff;color:#374151;border-radius:8px;overflow:hidden;min-height:520px}.image-card img{width:100%;height:400px;object-fit:cover}.image-card>div{padding:12px}.image-card h2{font-size:20px;color:#1f2937;margin-bottom:8px}.gallery-dots{display:flex;justify-content:center;gap:12px;margin-top:16px}.gallery-dots a{width:10px;height:10px;border-radius:50%;background:#ffffffb3}.gallery-panel .page-nav{margin-top:40px}
.song.is-selected{box-shadow:inset 0 0 0 2px #ffffffb3;background:#ffffff30}
.music-player[hidden]{display:none}
.music-player{position:fixed;right:16px;bottom:max(16px,env(safe-area-inset-bottom));z-index:1000;width:min(360px,calc(100vw - 32px));border:1px solid #ffffff80;border-radius:12px;background:#514963f2;backdrop-filter:blur(16px);box-shadow:0 8px 32px #0005;overflow:hidden;color:#fff}
.music-player-heading{display:flex;align-items:center;gap:12px;padding:12px 14px}.music-player-heading>div{flex:1;min-width:0}.music-player-heading h2{font-size:14px;font-weight:600;line-height:1.3}.music-player-heading p{font-size:12px;color:#ffffffb3;margin-top:4px}.music-player-heading button{flex-shrink:0;width:32px;height:32px;border:0;border-radius:50%;background:#ffffff1a;font-size:24px;line-height:1}
#music-player-frame iframe{display:block;width:100%;height:203px;min-height:200px;border:0;background:#000}.music-player-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:10px 14px;font-size:11px;color:#ffffffe6}.music-player-footer a{text-decoration:underline;text-underline-offset:3px}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.letter{overflow:hidden}.letter p{line-height:1.5}.open .letter{height:auto;min-height:160px;max-height:60dvh;overflow-y:auto;padding-top:40px;padding-bottom:28px}
#music-status{flex:1 1 100%;line-height:1.5}#retry-music-player{border:1px solid #ffffff80;border-radius:6px;background:#ffffff1a;color:inherit;padding:6px 10px;font:inherit;cursor:pointer}.music-player[data-state="error"] #music-status{color:#ffe0de}
@media(min-width:640px){.timer-panel h1{font-size:24px}.time-unit span{font-size:24px;margin-top:8px}.recap-panel h1{font-size:36px}.glass-button{font-size:16px}}
@media(max-width:360px){.glass-button{padding:9px 10px;font-size:13px}.passcode-dots{gap:12px}.recap-options{gap:32px}.letter-stage{height:360px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}