:root{color-scheme:dark;--cream:#f9ecd6;--muted:#d3b6ae;--gold:#d3b074}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 50% 40%,#692c3d 0,#411323 50%,#260c18 100%);color:var(--cream);font:15px/1.6 system-ui,sans-serif;min-height:100vh}
button,a,input{touch-action:manipulation}
button,a{ -webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #ffda80;outline-offset:5px}
header{max-width:1400px;margin:auto;padding:27px 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff15;gap:16px}
a{color:inherit;text-decoration:none}
.brand{display:flex;align-items:center;gap:10px;font-family:Georgia,serif;font-size:36px;line-height:1}
.brand span{font:12px/1.2 system-ui;letter-spacing:2px;max-width:85px}
.edition{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--muted)}
.admin-link{font-size:12px;color:var(--muted)}
main{position:relative;max-width:1200px;margin:auto;padding:0 24px}
.intro{text-align:center;padding:50px 0 28px}
.eyebrow{font-size:10px;letter-spacing:3px;color:#e0bf8b;font-weight:600}
h1{font:clamp(27px,4.3vw,48px)/1.18 Georgia,serif;font-weight:normal;margin:18px 0}
h2{font:32px/1.2 Georgia,serif}
.intro>p:last-child{color:var(--muted);font-size:13px}
.calendar-section{max-width:680px;margin:0 auto}
.calendar-heading{display:flex;justify-content:space-between;align-items:center;padding:8px 14px 14px;font-family:Georgia,serif;font-size:19px}
.calendar-heading span+span{font:10px system-ui;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.viewport{overflow:auto;padding:22px 18px 25px;scrollbar-width:thin;scrollbar-color:#bc986a transparent;overscroll-behavior:contain}
.calendar{position:relative;isolation:isolate;margin:0 auto;background:repeating-linear-gradient(2deg,transparent 0 8px,#71441b0b 9px,transparent 11px 25px),repeating-linear-gradient(177deg,#e9c99b 0px,#e8c494 3px,#e7c597 5px,#edcea4 23px,#dbb789 25px,#eed2aa 27px,#e9c99b 57px);border:3px solid #c49a68;border-radius:5px;box-shadow:0 5px 0 #a77a4d,0 12px 0 -3px #bc9163,0 25px 45px #14070b99;transform-style:preserve-3d;flex-shrink:0}
.door{position:absolute;padding:0;border:0;border-radius:1px;background:#593521;box-shadow:inset 0 0 12px #2a160b;perspective:700px;color:#492e1a}
.flap{position:absolute;inset:0;display:block;transform-origin:left center;transition:transform 1s cubic-bezier(.22,.7,.25,1),filter 1s;backface-visibility:hidden;background:repeating-linear-gradient(2deg,#e7c398 0 3px,#eacba3 4px 15px,#dcb68b 16px,#ebcda5 18px 38px);box-shadow:inset 0 0 0 1px #8b653c99,1px 1px 3px #3d241a77;z-index:2}
.flap img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;pointer-events:none}
.number{position:absolute;bottom:4%;right:6%;font:bold clamp(9px,1.4vw,15px)/1 Georgia,serif;color:#482917;background:#f5dfbaea;border-radius:50%;min-width:1.55em;padding:.28em;box-shadow:0 1px 3px #613e3533}
.door.unlocked:after{content:'✧';position:absolute;left:5%;top:2%;color:#fff1bb;z-index:3;text-shadow:0 0 6px #5a3611}
.door.open{z-index:20}
.door.open .flap{transform:rotateY(-112deg);filter:brightness(.8)}
.door:before{content:'♥';position:absolute;inset:0;display:grid;place-items:center;font-size:20px;color:#f4d69d;text-shadow:0 0 12px #ffbe55}
.door:hover .flap{filter:brightness(1.06)}
.wire{position:absolute;inset:-20px 8px auto;height:30px;z-index:30;pointer-events:none}
.wire svg{position:absolute;inset:0;width:100%;height:30px;overflow:visible}
.wire path{fill:none;stroke:#43513b;stroke-width:1.4;vector-effect:non-scaling-stroke}
.bulb{position:absolute;width:6px;height:9px;transform:translateX(-50%);background:#ffe5a0;border-radius:3px 3px 45% 45%;box-shadow:0 0 6px 2px #ffce7577,0 0 14px 5px #ffc35e22;animation:glow 4s infinite alternate}
.bulb::before{content:"";position:absolute;left:1px;top:-3px;width:4px;height:3px;background:#43513b;border-radius:1px}
.bulb:nth-child(3n){animation-delay:-2s}
.toolbar{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:8px}
button{border:1px solid #d5b77a55;color:var(--cream);background:#ffffff08;border-radius:30px;padding:8px 15px}
.toolbar label{font-size:11px;display:flex;align-items:center;gap:5px;color:var(--muted);margin-left:12px}
input{accent-color:#c4a066}
.hint{text-align:center;font-size:11px;color:var(--muted);line-height:1.9;margin:20px 0}
.measure-note{text-align:center;font-size:10px;color:#c4a69f;max-width:680px;margin:25px auto}
footer{padding:26px 0 30px;border-top:1px solid #ffffff15;color:var(--muted);font-size:10px;text-align:center}
footer span{margin:0 10px;color:var(--gold)}
#snow{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.flake{position:absolute;top:-20px;width:3px;height:3px;background:white;border-radius:50%;opacity:.4;animation:fall linear infinite}
@keyframes fall{to{transform:translate(50px,110vh)}
}
@keyframes glow{to{opacity:.65;box-shadow:0 0 4px 2px #ffce7577}
}
dialog{background:#461c2b;color:var(--cream);border:1px solid #bb9459;border-radius:12px;box-shadow:0 25px 80px #0008;width:min(440px,90vw);text-align:center;padding:45px 25px}
dialog::backdrop{background:#170710c9;backdrop-filter:blur(5px)}
.close{position:absolute;right:10px;top:8px;border:0;font-size:25px;padding:0 10px}
audio{width:100%;margin:15px 0 25px}
#message{color:var(--muted);font-size:14px}
#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);max-width:90vw;background:#f4dfbc;color:#4d2932;padding:12px 22px;border-radius:10px;box-shadow:0 4px 25px #0005;z-index:100;display:none}
.admin-main{max-width:1000px;padding:30px 24px}
.admin-main h1{font-size:36px}
.notice{border-left:2px solid var(--gold);padding:10px 18px;background:#ffffff08;color:var(--muted);font-size:13px}
.admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin:25px 0}
.admin-card{border:1px solid #d6b27a33;border-radius:8px;background:#ffffff05;padding:18px}
.admin-card h2{font-size:23px;margin:0}
.admin-card p{font-size:12px;color:var(--muted)}
.admin-card img.motif{width:65px;height:70px;object-fit:contain;background:#e7c59c;float:right;border-radius:3px}
.admin-card input{width:100%;font-size:11px;margin:15px 0}
.admin-card button{font-size:12px;margin:4px 0}
.admin-card details{margin-top:12px;font-size:12px}
.admin-card .qr{display:block;width:170px;height:170px;background:white;padding:8px;margin:12px 0}
.admin-card .url{display:block;overflow-wrap:anywhere;font-size:10px;text-decoration:underline}
.status{min-height:20px;font-size:12px;color:#f6db9e}
@media(max-width:600px){header{padding:20px 24px}
.edition{display:none}
.intro{padding:30px 0 20px}
main{padding:0 10px}
.toolbar label{width:100%;justify-content:center;margin:8px 0}
.calendar-heading{font-size:17px;padding:5px 22px}
.calendar-heading span+span{font-size:8px}
h1{font-size:30px}
.intro>p:last-child{font-size:11px}
.viewport{padding:18px 10px 20px}
.admin-main{padding:20px}
.number{font-size:10px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}
#snow{display:none}
}
@media print{body{background:white;color:black}
.admin-card{break-inside:avoid}
.admin-card input,.admin-card button,header,.notice{display:none}
.admin-card details{display:block}
.admin-card .url{color:black}
.admin-card h2,.admin-card p{color:black}
}


.number{display:none}

/* Keep one common mm scale inside the decorative frame. */
.calendar{box-sizing:content-box}