.cal{--perf:#fff8eb6b;--badge-bg:#fffaf0eb;--badge-ink:#22302a;grid-template-columns:repeat(var(--cal-cols,4), minmax(0, 1fr));grid-template-rows:repeat(var(--cal-rows,7), minmax(0, 1fr));aspect-ratio:600/840;background:var(--cal-bg,#1e3a2c);width:100%;box-shadow:var(--shadow-card);isolation:isolate;border-radius:12px;display:grid;position:relative;overflow:clip;container-type:inline-size}.cal[data-tone=light]{--perf:#1e3a2c57;--badge-bg:#fffdf9f0}.door{--nfs:clamp(11px, 4.4cqi, 26px);min-width:0;min-height:0;color:inherit;font:inherit;perspective:900px;-webkit-tap-highlight-color:transparent;background:0 0;border:0;border-radius:0;margin:0;padding:0;display:block;position:relative}button.door{cursor:pointer}.door-in{background:radial-gradient(120% 90% at 50% 40%,#fffaf0 0%,#f3e7cf 100%);place-items:center;display:grid;position:absolute;inset:0;box-shadow:inset 0 0 0 1px #3c280a1a,inset 6px 6px 14px -6px #3c280a61}.door-in-n{font:italic 500 clamp(14px, 6cqi, 40px) / 1 var(--serif);color:#9a6f26;opacity:0;transition:opacity var(--dur-2) var(--ease) .25s}.door[data-big="2"] .door-in-n{font-size:clamp(22px,13cqi,84px)}.door[data-state=open] .door-in-n{opacity:1}.door-leaf{transform-origin:0;transition:transform .9s var(--ease-out), filter .9s var(--ease-out);will-change:transform;position:absolute;inset:0;overflow:hidden}.door-leaf:after{content:"";border:1px dashed var(--perf);pointer-events:none;position:absolute;inset:0}.door-img{width:calc(100% * var(--cal-cols,4) / var(--w));height:calc(100% * var(--cal-rows,7) / var(--h));left:calc(-100% * var(--c) / var(--w));top:calc(-100% * var(--r) / var(--h));background:var(--cal-img) center / 100% 100% no-repeat;position:absolute}.door-n{background:var(--badge-bg);min-width:1.9em;height:1.9em;color:var(--badge-ink);font:600 var(--nfs) / 1 var(--serif);font-variant-numeric:lining-nums;border-radius:999px;place-items:center;padding:0 .3em;display:grid;position:absolute;top:50%;left:50%;translate:-50% -50%;box-shadow:0 1px 2px #00000038,0 0 0 1px #c9993f4d}.door[data-big="2"]{--nfs:clamp(16px, 8.5cqi, 48px)}.door[data-big="1"]{--nfs:clamp(12px, 5.4cqi, 32px)}.door[data-state=today]{z-index:2}.door[data-state=today]:before{content:"";z-index:1;box-shadow:0 0 0 2px var(--gold-2), 0 0 16px 4px #f8de968c, inset 0 0 14px 2px #f8de9673;pointer-events:none;border-radius:6px;animation:2.8s ease-in-out infinite today-glow;position:absolute;inset:2px}@keyframes today-glow{50%{box-shadow:0 0 0 2px var(--gold-2), 0 0 24px 8px #f8de964d, inset 0 0 18px 4px #f8de964d}}.door[data-state=today] .door-leaf:before{content:"I dag";left:50%;top:calc(50% + var(--nfs) * .95 + 3px);z-index:1;color:#f8ebc2;font:700 clamp(9px, 2.5cqi, 13px) / 1 var(--sans);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;background:#141c16c7;border-radius:999px;padding:.2em .55em;position:absolute;translate:-50%}@container (width<=299px){.door[data-state=today]:not([data-big]) .door-leaf:before{content:none}}.door[data-state=today] .door-n{background:var(--foil);color:#2a1f0c;animation:door-glow 2.4s var(--ease) infinite;box-shadow:0 1px 2px #0000004d,0 0 #f8ebc2b3}.door[data-state=ready] .door-n{box-shadow:0 1px 2px #00000038, 0 0 0 2px var(--gold-2)}@keyframes door-glow{0%,to{box-shadow:0 1px 2px #0000004d,0 0 #f8ebc299}50%{box-shadow:0 1px 2px #0000004d,0 0 0 .45em #f8ebc200}}.door[data-state=open]{z-index:2}.door[data-state=open] .door-leaf{filter:brightness(.78)saturate(.9);transform:rotateY(-68deg);box-shadow:6px 0 14px -4px #00000073}.door[data-state=open] .door-n{opacity:.85}.cal[data-instant] .door-leaf,.cal[data-instant] .door-in-n{transition:none}@media (hover:hover){button.door:not([data-state=open]):hover .door-leaf{filter:brightness(1.04);transform:rotateY(-9deg)}button.door[data-state=open]:hover .door-leaf{transform:rotateY(-74deg)}}button.door:focus-visible{z-index:3;outline:none}button.door:focus-visible:after{content:"";box-shadow:0 0 0 3px var(--gold-2), 0 0 0 5px #0000008c;pointer-events:none;border-radius:4px;position:absolute;inset:2px}.note{width:min(100% - 32px,460px);max-width:none;max-height:calc(100dvh - 24px);color:var(--ink);overscroll-behavior:contain;background:0 0;border:0;border-radius:18px;margin:auto;padding:0;overflow-y:auto}.note::backdrop{background:#050c09a3}.note-paper{background:var(--grain), #fffaf1;box-shadow:var(--shadow-lg);text-align:center;border-radius:18px;padding:40px clamp(22px,6vw,40px) 28px;position:relative}.note-paper:before{content:"";pointer-events:none;border:1px solid #c9993f61;border-radius:12px;position:absolute;inset:8px}.note-num{font:italic 500 3.4rem / 1 var(--serif);background:var(--foil-dark);color:#0000;-webkit-background-clip:text;background-clip:text;margin:0 auto 6px;display:block}.note-day{font:600 var(--step--2) / 1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 18px}.note-text{hyphens:auto;max-width:22em;font:italic 400 clamp(1.3rem, 1.1rem + 1.1vw, 1.7rem) / 1.38 var(--serif);color:var(--ink);text-wrap:balance;overflow-wrap:anywhere;margin:0 auto}.note-from{font:400 var(--step-0) / 1.4 var(--serif);color:var(--ink-2);margin:16px 0 0}.note-from:empty{display:none}.note-actions{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:26px;display:flex}.note[open] .note-paper{animation:note-in .55s var(--ease-out)}@keyframes note-in{0%{opacity:0;transform:translateY(18px)scale(.95)rotate(-1.2deg)}}@media (height<=520px){.note-paper{padding:22px clamp(20px,5vw,36px) 16px}.note-num{margin-bottom:2px;font-size:2.3rem}.note-day{margin-bottom:10px}.note-text{font-size:clamp(1.1rem,1rem + .8vw,1.35rem)}.note-from{margin-top:8px}.note-actions{margin-top:14px}}