:root { --red: #D7263D; --ink: #1A1414; --cream: #FBF1E3; --green: #0F5C45; --gold: #D4A62A; --paper: #EFE3D2; --muted: #6B5A55; --display: Anton, Impact, "Arial Narrow", sans-serif; --mono: "Space Mono", ui-monospace, Menlo, monospace; color-scheme: dark; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0px; background: var(--ink); overflow: hidden; }
button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; color: inherit; }
a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.vp { position: fixed; inset: 0px; display: flex; align-items: center; justify-content: center; padding: env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px); background: repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 1px,transparent 1px 10px),var(--ink); }
.stage { width: 390px; height: 844px; flex: 0 0 auto; position: relative; overflow: hidden; background: var(--cream); color: var(--ink); font-family: var(--mono); transform-origin: 50% 50%; }
.screen { position: absolute; inset: 0px; overflow: hidden; }
.screen[hidden] { display: none !important; }
.anton { font-family: var(--display); font-weight: 400; text-transform: uppercase; }
.press { transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); }
.press:active { transform: scale(0.94); }
.pressK { transition: transform 0.14s ease-out, box-shadow 0.14s ease-out; }
.pressK:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink) !important; }
.btn { height: 58px; border: 2px solid var(--ink); border-radius: 4px; font-size: 14px; font-weight: 700; letter-spacing: 0.1em; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0px 16px; }
@keyframes titleIn { 
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: none; }
}
@keyframes fallIn { 
  0% { opacity: 0; transform: translateY(-560px) rotate(-18deg); }
  55% { opacity: 1; transform: translateY(0px) rotate(4deg) scale(1.05, 0.92); }
  70% { transform: translateY(-12px) rotate(-3deg) scale(0.98, 1.03); }
  84% { transform: translateY(0px) rotate(1deg) scale(1.02, 0.98); }
  100% { opacity: 1; transform: none; }
}
@keyframes rattle { 
  0%, 84%, 100% { transform: rotate(0deg) translateY(0px); }
  86% { transform: rotate(-7deg) translateY(-3px); }
  88% { transform: rotate(6deg) translateY(-4px); }
  90% { transform: rotate(-5deg) translateY(-2px); }
  92% { transform: rotate(3deg); }
  94% { transform: rotate(-1deg); }
}
@keyframes shake { 
  0%, 60%, 100% { transform: rotate(0deg) translateY(0px); }
  64% { transform: rotate(-4deg) translateY(-6px); }
  68% { transform: rotate(4deg) translateY(-8px); }
  72% { transform: rotate(-3deg) translateY(-3px); }
  76% { transform: rotate(2deg); }
  80% { transform: rotate(-1deg); }
}
@keyframes lid { 
  0%, 60%, 100% { transform: translateY(0px) rotate(4deg); }
  66% { transform: translateY(-14px) rotate(8deg); }
  74% { transform: translateY(-3px) rotate(1deg); }
  80% { transform: translateY(0px) rotate(5deg); }
}
@keyframes no { 
  0%, 100% { transform: translateX(0px) rotate(0deg); }
  15% { transform: translateX(-7px) rotate(-4deg); }
  32% { transform: translateX(6px) rotate(3deg); }
  50% { transform: translateX(-4px) rotate(-2deg); }
  68% { transform: translateX(2px) rotate(1deg); }
  84% { transform: translateX(-1px); }
}
@keyframes sheetUp { 
  0% { transform: translateY(100%); }
  100% { transform: none; }
}
@keyframes up { 
  0% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: none; }
}
@keyframes fadeIn { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes ticker { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(-50%); }
}
@keyframes fill { 
  0% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}
@keyframes blink { 
  0%, 100% { background: var(--cream); }
  50% { background: transparent; }
}
.toastBox .sw2 { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 2px; border: 1.5px solid var(--cream); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 16px; color: var(--ink); }
.toastBox .sw2 b { background: var(--cream); padding: 0px 3px; font-weight: 400; }
.toastBox .tx { display: flex; flex-direction: column; gap: 2px; }
.toastBox .tx strong { font-family: var(--display); font-weight: 400; font-size: 20px; line-height: 1.05; text-transform: uppercase; }
.toastBox .tx small { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: rgba(251, 241, 227, 0.75); }
@keyframes tileIn { 
  0% { opacity: 0; transform: translateY(40px) scale(0.9); }
  70% { opacity: 1; transform: translateY(-3px); }
  100% { opacity: 1; transform: none; }
}
@keyframes toast { 
  0% { opacity: 0; transform: translateY(24px) scale(0.96); }
  10% { opacity: 1; transform: translateY(-2px); }
  14% { transform: none; }
  84% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(8px); }
}
@keyframes boxRattle { 
  0%, 70%, 100% { transform: rotate(0deg) translateY(0px); }
  73% { transform: rotate(-4deg) translateY(-6px); }
  76% { transform: rotate(4deg) translateY(-8px); }
  79% { transform: rotate(-3deg) translateY(-3px); }
  82% { transform: rotate(2deg); }
  85% { transform: rotate(-1deg); }
}
@keyframes lidPeek { 
  0%, 70%, 100% { transform: none; }
  76% { transform: translateY(-10px) rotate(-2deg); }
  82% { transform: none; }
}
@keyframes ribUp { 
  100% { transform: translateY(-460px); }
}
@keyframes lidFly { 
  100% { transform: translate(140px, -560px) rotate(48deg); }
}
@keyframes boxPop { 
  40% { transform: scale(1.07, 0.93); }
  100% { transform: scale(0.92); }
}
@keyframes fadeOut { 
  100% { opacity: 0; transform: translateY(12px); }
}
@keyframes flood { 
  0% { clip-path: circle(0% at 50% 40%); }
  100% { clip-path: circle(140% at 50% 40%); }
}
@keyframes photoIn { 
  0% { opacity: 0; filter: blur(14px); transform: scale(1.15); }
  100% { opacity: 1; filter: blur(0px); transform: none; }
}
@keyframes l1 { 
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: none; }
}
@keyframes slam { 
  0% { opacity: 0; transform: scale(1.7) rotate(-3deg); }
  55% { opacity: 1; transform: scale(0.95) rotate(1deg); }
  75% { transform: scale(1.03); }
  100% { opacity: 1; transform: none; }
}
@keyframes sub { 
  0% { opacity: 0; transform: translateX(-14px); }
  100% { opacity: 1; transform: none; }
}
@keyframes pop { 
  0% { opacity: 0; transform: scale(0.4); }
  70% { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: none; }
}
@keyframes hint { 
  0%, 100% { transform: none; }
  50% { transform: translateY(-5px); }
}
.tick { animation: 18s linear 0s infinite normal none running ticker; }
.p2, .p3, .p4, .pg, .px, .pq span { transition: transform 0.3s cubic-bezier(0.34, 2, 0.64, 1), box-shadow 0.3s cubic-bezier(0.34, 2, 0.64, 1), background-color 0.2s; }
.p2:active, .p3:active, .p4:active, .pg:active, .px:active, .pq:active span { transition-duration: 0.05s; }
.p2:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink) !important; }
.p3:active { transform: translate(3px, 3px); box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 0px !important; }
.p4:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--red) !important; }
.pg:active { transform: translate(2px, 2px); background-color: rgba(0, 0, 0, 0.3) !important; }
.px:active { transform: translate(2px, 2px); }
.pq:active span { transform: translate(3px, 3px) rotate(-4deg); box-shadow: 0 0 0 var(--ink); }
@keyframes burst { 
  0% { opacity: 1; transform: translate(-50%, -50%) scale(0.4) rotate(0deg); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1) rotate(90deg); }
}
.star { position: absolute; left: 50%; top: 50%; font-size: 22px; line-height: 1; pointer-events: none; -webkit-text-stroke: 1px var(--ink); animation: 0.7s cubic-bezier(0.2, 0.8, 0.3, 1) 0s 1 normal both running burst; z-index: 9; }
@keyframes wiggle { 
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(-3deg); }
  60% { transform: rotate(2deg); }
  85% { transform: rotate(-1deg); }
}
.wiggle .lbl2 { display: inline-block; animation: 0.45s ease-out 0s 1 normal none running wiggle; }
@keyframes dip { 
  0%, 100% { transform: none; }
  40% { transform: translateY(7px); }
  70% { transform: translateY(-2px); }
}
@keyframes tickIn { 
  0% { transform: scale(0.3); }
  60% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.sq.dip svg { animation: 0.4s ease-out 0s 1 normal none running dip; }
.sq.ok svg { animation: 0.35s cubic-bezier(0.3, 1.5, 0.5, 1) 0s 1 normal none running tickIn; }
@keyframes swing { 
  0% { transform: rotate(-4deg); }
  20% { transform: rotate(16deg); }
  45% { transform: rotate(-14deg); }
  65% { transform: rotate(8deg); }
  85% { transform: rotate(-4deg); }
  100% { transform: rotate(-4deg); }
}
.pq.swing span { animation: 0.7s ease-out 0s 1 normal none running swing; transform-origin: 50% 0px; }
@keyframes shoot { 
  0% { transform: none; opacity: 1; }
  45% { transform: translateX(14px); opacity: 0; }
  46% { transform: translateX(-14px); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
.shoot svg { animation: 0.5s ease-in-out 0s 1 normal none running shoot; }
@keyframes fromL { 
  0% { opacity: 0; transform: translateX(-90px); }
  25% { opacity: 1; }
  80% { transform: translateX(4px); }
  100% { opacity: 1; transform: none; }
}
@keyframes fromR { 
  0% { opacity: 0; transform: translateX(90px); }
  25% { opacity: 1; }
  80% { transform: translateX(-4px); }
  100% { opacity: 1; transform: none; }
}
@keyframes fromU { 
  0% { opacity: 0; transform: translateY(-76px); }
  25% { opacity: 1; }
  80% { transform: translateY(3px); }
  100% { opacity: 1; transform: none; }
}
@keyframes fromD { 
  0% { opacity: 0; transform: translateY(76px); }
  25% { opacity: 1; }
  80% { transform: translateY(-3px); }
  100% { opacity: 1; transform: none; }
}
.fromL { animation: 0.55s cubic-bezier(0.3, 0.8, 0.3, 1) 0s 1 normal both running fromL; }
.fromR { animation: 0.55s cubic-bezier(0.3, 0.8, 0.3, 1) 0s 1 normal both running fromR; }
.fromU { animation: 0.55s cubic-bezier(0.3, 0.8, 0.3, 1) 0s 1 normal both running fromU; }
.fromD { animation: 0.55s cubic-bezier(0.3, 0.8, 0.3, 1) 0s 1 normal both running fromD; }
@keyframes fall24 { 
  0% { opacity: 0; transform: translate(-30px, -300px) rotate(90deg); }
  22% { opacity: 1; transform: translate(-30px, -110px) rotate(90deg) scale(1.03, 0.92); }
  28% { transform: translate(-30px, -116px) rotate(90deg) scale(1); }
  38% { transform: translate(-30px, -110px) rotate(82deg); }
  47% { transform: translate(-30px, -111px) rotate(97deg); }
  55% { transform: translate(-30px, -110px) rotate(86deg); }
  62% { transform: translate(-26px, -104px) rotate(76deg); }
  82% { transform: translate(0px, 0px) rotate(0deg) scale(1.05, 0.93); }
  89% { transform: translate(0px, -10px) rotate(-4deg) scale(0.98, 1.03); }
  95% { transform: translate(0px, 0px) rotate(-1deg) scale(1.02, 0.98); }
  100% { opacity: 1; transform: translate(0px, 0px) rotate(-2deg) scale(1); }
}
@keyframes wob24 { 
  0%, 86%, 100% { transform: rotate(0deg); }
  89% { transform: rotate(4deg); }
  92% { transform: rotate(-3deg); }
  95% { transform: rotate(1deg); }
}
.tile.side .ribV { position: absolute; left: 30%; top: 0px; bottom: 0px; width: 9px; border-left: 1.5px solid var(--ink); border-right: 1.5px solid var(--ink); }
.tile.side .ribH { position: absolute; left: 0px; right: 0px; top: 36%; height: 9px; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
.tile.side .num { left: auto; right: 6px; top: 10px; transform: rotate(90deg); }
.clock { position: absolute; left: 20px; bottom: 96px; width: 30px; height: 30px; border: 0px; padding: 0px; background: transparent; display: flex; align-items: center; justify-content: center; z-index: 6; animation: 0.45s ease 1.9s 1 normal both running pop; border-radius: 50%; }
.tip { position: absolute; left: 14px; bottom: 134px; z-index: 7; padding: 9px 12px; background: var(--cream); color: var(--ink); border: 2px solid var(--ink); border-radius: 4px; box-shadow: 3px 3px 0 var(--ink); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; white-space: nowrap; animation: 0.3s ease 0s 1 normal both running pop; }
.tip::after { content: ""; position: absolute; left: 10px; bottom: -8px; width: 12px; height: 12px; background: var(--cream); border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); }
#welcome h1 .w { display: inline-block; }
@keyframes inL { 
  0% { opacity: 0; transform: translateX(-120px) skewX(12deg); }
  70% { opacity: 1; transform: translateX(6px) skewX(-3deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes inT { 
  0% { opacity: 0; transform: translateY(-90px) rotate(-6deg); }
  65% { opacity: 1; transform: translateY(5px) rotate(1deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes inB { 
  0% { opacity: 0; transform: translateY(80px); }
  70% { opacity: 1; transform: translateY(-4px); }
  100% { opacity: 1; transform: none; }
}
@keyframes grow { 
  0% { max-width: 0px; margin-left: 0px; }
  100% { max-width: 4.2em; margin-left: 0.22em; }
}
@keyframes gayIn { 
  0% { opacity: 0; transform: translateY(-140px) rotate(-14deg) scale(1.3); color: var(--gold); }
  55% { opacity: 1; transform: translateY(8px) rotate(4deg) scale(0.96, 1.06); color: var(--gold); }
  75% { transform: translateY(-4px) rotate(-2deg); }
  90% { color: var(--gold); }
  100% { opacity: 1; transform: none; color: var(--cream); }
}
@keyframes everIn { 
  0% { opacity: 0; transform: scale(3.2) rotate(-14deg); }
  60% { opacity: 1; transform: scale(0.9) rotate(3deg); }
  80% { transform: scale(1.06) rotate(-1deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes jolt { 
  0%, 100% { transform: none; }
  25% { transform: translateY(5px); }
  50% { transform: translateY(-2px); }
}
#welcome h1 { animation: 0.35s ease-out 2.75s 1 normal both running jolt; }
#welcome .w-the { animation: 0.6s cubic-bezier(0.2, 0.9, 0.3, 1) 0.2s 1 normal both running inL; }
#welcome .w-adv { animation: 0.6s cubic-bezier(0.2, 0.9, 0.3, 1) 0.38s 1 normal both running inT; }
#welcome .w-cal { animation: 0.6s cubic-bezier(0.2, 0.9, 0.3, 1) 0.56s 1 normal both running inB; }
#welcome .w-gay { overflow: hidden; vertical-align: top; max-width: 0px; animation: 0.45s cubic-bezier(0.5, 0, 0.2, 1) 1.45s 1 normal forwards running grow; }
#welcome .w-gay span { display: inline-block; animation: 0.75s cubic-bezier(0.3, 0.8, 0.3, 1) 1.5s 1 normal both running gayIn; }
#welcome .w-ever { color: var(--ink); transform-origin: 20% 70%; animation: 0.5s cubic-bezier(0.3, 1.2, 0.5, 1) 2.6s 1 normal both running everIn; }
#box.d24 { background: radial-gradient(circle at 50% 36%, rgb(31, 92, 68) 0%, rgb(15, 46, 34) 58%, rgb(10, 31, 23) 100%); color: var(--cream); }
#box .halo { position: absolute; left: 25px; top: 130px; width: 340px; height: 340px; border-radius: 170px; background: radial-gradient(circle, rgba(232, 184, 58, 0.5) 0%, rgba(232, 184, 58, 0.15) 40%, rgba(232, 184, 58, 0) 68%); pointer-events: none; animation: 2.6s ease-in-out 0s infinite normal none running halo; }
@keyframes halo { 
  0%, 100% { opacity: 0.7; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.06); }
}
#box.d24 .nudge span { color: rgb(232, 184, 58); }
#box.d24 .tickerBar { background: repeating-linear-gradient(135deg,rgba(0,0,0,.07) 0 1px,transparent 1px 8px),var(--red); }
#box.d24 .tickerBar b { color: var(--ink); }
@keyframes mega { 
  0% { transform: none; }
  8% { transform: rotate(-5deg) scale(1.03); }
  16% { transform: rotate(6deg) scale(1.05); }
  24% { transform: rotate(-8deg) scale(1.08); }
  32% { transform: rotate(9deg) scale(1.11); }
  40% { transform: rotate(-6deg) scale(1.14); }
  48% { transform: rotate(0deg) scale(1.32, 0.78); }
  58% { transform: scale(0.9, 1.2); }
  70% { opacity: 1; transform: scale(1.45); }
  100% { opacity: 0; transform: scale(0.1) rotate(40deg); }
}
@keyframes lidFly24 { 
  100% { transform: translate(170px, -760px) rotate(900deg); }
}
@keyframes flash { 
  0% { opacity: 0; transform: scale(0.2); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: scale(9); }
}
@keyframes rays { 
  0% { opacity: 0; transform: scale(0.1) rotate(0deg); }
  25% { opacity: 0.95; }
  70% { opacity: 0.8; }
  100% { opacity: 0; transform: scale(1.2) rotate(120deg); }
}
@keyframes paper { 
  0% { opacity: 0; transform: translate(-50%, -40px) rotate(0deg) scale(0.5); }
  10% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -460px) rotate(620deg) scale(1); }
}
@keyframes iconA { 
  0% { opacity: 0; transform: translateY(-30px) scale(0.3) rotate(0deg); }
  12% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-360px) scale(1.15) rotate(35deg); }
}
@keyframes iconB { 
  0% { opacity: 0; transform: translateY(-30px) scale(0.3) rotate(0deg); }
  12% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-460px) scale(1.25) rotate(-40deg); }
}
#box.d24.opening #present { animation: 1.15s cubic-bezier(0.4, 0, 0.6, 1) 0s 1 normal both running mega; transform-origin: 50% 70%; }
#box.d24.opening #present .plid { animation: 0.9s cubic-bezier(0.25, 0, 0.55, 1) 0.62s 1 normal forwards running lidFly24; }
#box.d24.opening #present .pbody .prib { animation: 0.4s cubic-bezier(0.6, 0, 0.9, 0.5) 0.55s 1 normal forwards running ribUp; }
#box .fx { position: absolute; left: 195px; top: 340px; pointer-events: none; }
#box .flashEl { position: absolute; left: 195px; top: 338px; width: 120px; height: 120px; margin: -60px 0px 0px -60px; border-radius: 60px; background: rgb(255, 246, 220); z-index: 5; pointer-events: none; opacity: 0; animation: 0.8s cubic-bezier(0.1, 0.7, 0.3, 1) 0.7s 1 normal both running flash; }
#box .raysEl { position: absolute; left: 195px; top: 338px; width: 1100px; height: 1100px; margin: -550px 0px 0px -550px; border-radius: 550px; background: repeating-conic-gradient(rgb(215, 38, 61) 0deg, rgb(215, 38, 61) 12deg, rgb(212, 166, 42) 12deg, rgb(212, 166, 42) 24deg, rgb(15, 92, 69) 24deg, rgb(15, 92, 69) 36deg, rgb(251, 241, 227) 36deg, rgb(251, 241, 227) 48deg); z-index: 4; pointer-events: none; opacity: 0; animation: 1.9s cubic-bezier(0.2, 0.7, 0.3, 1) 0.7s 1 normal both running rays; }
#box .paper { position: absolute; left: 0px; top: 0px; border: 1.5px solid var(--ink); border-radius: 2px; animation: 1.6s cubic-bezier(0.15, 0.7, 0.35, 1) 0s 1 normal both running paper; }
#box .icon { position: absolute; left: 0px; top: 0px; display: block; opacity: 0; animation-duration: 1.9s; animation-timing-function: cubic-bezier(0.12, 0.75, 0.3, 1); animation-fill-mode: both; }
@keyframes snowA { 
  0% { transform: translate(0px, -20px); }
  100% { transform: translate(40px, 880px); }
}
@keyframes snowB { 
  0% { transform: translate(0px, -20px); }
  100% { transform: translate(-40px, 880px); }
}
#snow { position: absolute; inset: 0px; z-index: 35; pointer-events: none; overflow: hidden; }
#snow i { position: absolute; top: 0px; border-radius: 50%; background: rgb(255, 255, 255); animation-timing-function: linear; animation-iteration-count: infinite; }
#welcome { background: repeating-linear-gradient(135deg,rgba(0,0,0,.06) 0 1px,transparent 1px 8px),var(--red); color: var(--cream); }
#welcome .top { position: absolute; left: 20px; right: 20px; top: 24px; display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; animation: 0.6s ease 0.1s 1 normal both running titleIn; }
#welcome h1 { position: absolute; left: 20px; right: 20px; top: 56px; margin: 0px; font-size: 66px; line-height: 0.88; animation: 0.6s ease 0.25s 1 normal both running titleIn; }
#welcome .pile { position: absolute; left: 0px; right: 0px; top: 350px; height: 222px; }
#welcome .gift { animation-delay: calc(var(--i) * 150ms + 2.95s) !important; }
#welcome .gift { position: absolute; animation: 0.9s cubic-bezier(0.5, 0, 0.5, 1) 0s 1 normal both running fallIn; transform-origin: 50% 100%; }
#welcome .gift > div { width: 100%; height: 100%; animation: 4.6s ease-in-out 0s infinite normal none running rattle; transform-origin: 50% 100%; }
#welcome .sheet { position: absolute; inset: 572px 0px 0px; background: var(--cream); color: var(--ink); border-top: 2px solid var(--ink); display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 28px 20px 0px; }
#welcome .age { display: flex; justify-content: center; align-items: baseline; gap: 10px; line-height: 1; animation: 0.45s ease 4.4s 1 normal both running up; }
#welcome .lead { margin: 0px; text-align: center; font-size: 14px; font-weight: 700; line-height: 20px; animation: 0.45s ease 4.5s 1 normal both running up; }
#welcome .go { background: var(--ink); color: var(--cream); box-shadow: 4px 4px 0 var(--red); animation: 0.45s ease 4.6s 1 normal both running up; }
#welcome .nope { align-self: center; height: 32px; color: var(--ink); font-size: 12px; font-weight: 700; text-underline-offset: 3px; animation: 0.45s ease 4.7s 1 normal both running up; display: flex; align-items: center; }
#cal { display: flex; flex-direction: column; background: var(--cream); }
#cal .head { flex: 0 0 auto; background: repeating-linear-gradient(135deg,rgba(0,0,0,.07) 0 1px,transparent 1px 8px),var(--red); color: var(--cream); padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 10px; }
#cal .row1 { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; }
#cal .menuBtn { width: 44px; height: 44px; margin: -10px -10px -10px 0px; border: 0px; background: transparent; display: flex; align-items: center; justify-content: center; padding: 0px; }
#cal h1 { margin: 0px; font-size: 50px; line-height: 0.9; }
#cal .strip { display: flex; align-items: center; gap: 10px; }
#cal .cells { flex: 1 1 0%; display: grid; grid-template-columns: repeat(24, minmax(0px, 1fr)); gap: 3px; }
#cal .cells span { height: 10px; outline: rgba(251, 241, 227, 0.55) solid 1.5px; outline-offset: -1.5px; overflow: hidden; display: block; }
#cal .cells .done i { display: block; height: 10px; background: var(--ink); transform-origin: 0px 50%; animation: 0.3s ease-out 0s 1 normal both running fill; }
#cal .cells .miss i { display: block; height: 10px; background: repeating-linear-gradient(-45deg,var(--cream) 0 1.5px,transparent 1.5px 4px); }
#cal .cells .now { outline-color: var(--cream); animation: 1s steps(2) 0s infinite normal none running blink; }
#cal .count { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
#cal .banner { flex: 0 0 auto; background: var(--ink); color: var(--gold); text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; padding: 7px 0px; }
#grid { flex: 1 1 0%; min-height: 0px; padding: 16px 20px 14px; display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); grid-auto-flow: dense; gap: 9px; }
.tile { position: relative; height: 100%; }
@keyframes dropIn { 
  0% { opacity: 0; transform: translateY(-40px) scale(0.8); }
  70% { opacity: 1; transform: translateY(4px) scale(1.02); }
  100% { opacity: 1; transform: none; }
}
.tile.drop { animation: 0.6s cubic-bezier(0.3, 1.4, 0.5, 1) 0s 1 normal both running dropIn; }
.tile > .wig { position: absolute; inset: 0px; }
.tile .wig.idle { animation: 4.2s ease-in-out 0s infinite normal none running rattle; transform-origin: 50% 100%; }
.tile .wig.no { transform-origin: 50% 100%; animation: 0.5s ease-out 0s 1 normal both running no !important; }
@keyframes joltD { 
  0%, 100% { transform: none; }
  25% { transform: translateY(5px) rotate(-4deg) scale(1.03, 0.95); }
  55% { transform: translateY(-2px) rotate(2deg); }
  80% { transform: translateY(0px) rotate(-1deg); }
}
.tile .wig.hit { animation: 0.45s ease-out 2.08s 1 normal none running joltD, 4.2s ease-in-out 4.2s infinite normal none running rattle; transform-origin: 50% 100%; }
.tile button { position: absolute; inset: 0px; width: 100%; height: 100%; border: 1.5px solid var(--ink); border-radius: 6px; padding: 0px; overflow: hidden; box-shadow: 2px 2px 0 var(--ink); transition: transform 0.15s ease-out; }
.tile button:active { transform: scale(0.95); }
.tile .rib { position: absolute; right: 12px; top: 0px; bottom: 0px; width: 8px; border-left: 1.5px solid var(--ink); border-right: 1.5px solid var(--ink); }
.tile .num { position: absolute; left: 5px; top: 4px; min-width: 28px; padding: 1px 5px; box-sizing: border-box; background: var(--cream); border: 1.5px solid var(--ink); border-radius: 2px; font-family: var(--display); font-size: 21px; line-height: 1.1; text-align: center; color: var(--ink); }
.tile.opened button { border: 1.5px dashed rgba(26, 20, 20, 0.4); background: rgb(242, 228, 207); box-shadow: none; opacity: 0.5; filter: saturate(0.55); }
.tile.opened.again button { opacity: 1; filter: none; border-style: solid; border-color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.tile.opened .big { position: absolute; left: 8px; top: 2px; font-family: var(--display); font-size: 26px; color: rgba(26, 20, 20, 0.3); z-index: 2; }
.tile.opened.again .big { color: var(--ink); }
@keyframes rip { 
  0% { opacity: 0; transform: translate(0px, -6px) rotate(-3deg); }
  60% { opacity: 1; transform: translate(0px, 1px) rotate(1deg); }
  100% { opacity: 1; transform: none; }
}
.tile .piece { position: absolute; inset: 0px; animation: 0.45s cubic-bezier(0.3, 1.4, 0.5, 1) 0s 1 normal both running rip; filter: drop-shadow(rgb(255, 251, 244) 1.5px 1.5px 0px) drop-shadow(rgb(255, 251, 244) -1.5px -1px 0px) drop-shadow(rgba(26, 20, 20, 0.18) 1px 2px 0px); }
.tile .piece > span { position: absolute; inset: 0px; }
.tile.missed button { background: var(--paper); border-style: dashed; box-shadow: none; }
.tile.missed .stamp { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-14deg); padding: 1px 5px; border: 2px solid var(--red); color: var(--red); font-family: var(--display); font-size: 15px; letter-spacing: 0.04em; background: rgba(251, 241, 227, 0.8); }
.tile.missed .big { position: absolute; left: 8px; top: 2px; font-family: var(--display); font-size: 22px; color: rgba(26, 20, 20, 0.3); }
.tile.today { grid-area: span 2 / span 2; z-index: 2; }
.tile.today .wig { animation: 2.4s ease-in-out 0s infinite normal none running shake; transform-origin: 50% 100%; }
.tile.today button { border: 0px; background: transparent; box-shadow: none; overflow: visible; }
.tile.today .body { position: absolute; inset: 30% 0px 0px; border: 2px solid var(--ink); border-radius: 6px; box-shadow: 4px 4px 0 var(--ink); overflow: hidden; }
.tile.today .body .rib { right: 22px; width: 16px; border-width: 2px; }
.tile.today .body .num { left: 8px; top: auto; bottom: 8px; font-size: 34px; line-height: 1.05; padding: 2px 9px; border-width: 2px; }
@keyframes lidD { 
  0%, 60%, 100% { transform: translateY(0px) rotate(0deg); }
  66% { transform: translateY(-12px) rotate(4deg); }
  74% { transform: translateY(-4px) rotate(-2deg); }
  80% { transform: translateY(0px) rotate(0deg); }
}
.tile.today .lidT { position: absolute; left: -5px; right: -5px; top: 12%; height: 20%; border: 2px solid var(--ink); border-radius: 5px; animation: 2.4s ease-in-out 0s infinite normal none running lidD; transform-origin: 80% 100%; }
.tile.today .lidT .rib { right: 27px; width: 16px; border-width: 2px; }
.tile.today .bowT { position: absolute; right: 4px; top: -30px; }
.tile.today.press-down .wig { animation: auto ease 0s 1 normal none running none; transform: translateY(4px); }
@keyframes fallD { 
  0% { opacity: 0; transform: translate(-10px, -440px) rotate(-90deg); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  6% { opacity: 1; }
  40% { transform: translate(-10px, -108px) rotate(-90deg); animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); }
  45% { transform: translate(-9px, -116px) rotate(-83deg); animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.6); }
  62% { transform: translate(-4px, -78px) rotate(-52deg); animation-timing-function: cubic-bezier(0.4, 0, 1, 0.7); }
  76% { transform: translate(0px, -8px) rotate(-10deg); animation-timing-function: ease-out; }
  82% { transform: translate(0px, 0px) rotate(3deg) scale(1.04, 0.94); animation-timing-function: ease-out; }
  89% { transform: translate(0px, -7px) rotate(-3deg) scale(0.99, 1.02); animation-timing-function: ease-in; }
  95% { transform: translate(0px, 0px) rotate(-1deg) scale(1.01, 0.99); }
  100% { opacity: 1; transform: translate(0px, 0px) rotate(-2deg) scale(1); }
}
@keyframes wob24 { 
  0%, 86%, 100% { transform: rotate(0deg); }
  89% { transform: rotate(4deg); }
  92% { transform: rotate(-3deg); }
  95% { transform: rotate(1deg); }
}
@keyframes impact { 
  0% { opacity: 0; transform: scale(0.4); }
  25% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.3); }
}
.tile.side { grid-area: 6 / 4 / span 2; z-index: 3; }
.tile.side .impact { position: absolute; opacity: 0; pointer-events: none; animation: 0.45s ease-out 0s 1 normal both running impact; }
.tile.side .fall { position: absolute; inset: 2px; animation: 2.2s linear 1.2s 1 normal both running fallD; transform-origin: 50% 50%; }
.tile.side .wig { position: absolute; inset: 0px; animation: 5.5s ease-in-out 4s infinite normal none running wob24; transform-origin: 50% 100%; }
.tile.side button { box-shadow: 3px 3px 0 var(--ink); }
.tile.side .ribV { position: absolute; left: 30%; top: 0px; bottom: 0px; width: 9px; border-left: 1.5px solid var(--ink); border-right: 1.5px solid var(--ink); }
.tile.side .ribH { position: absolute; left: 0px; right: 0px; top: 36%; height: 9px; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
.tile.side .num { left: auto; right: 6px; top: 10px; transform: rotate(90deg); }
.tickerBar { flex: 0 0 auto; background: var(--ink); color: var(--cream); height: 40px; overflow: hidden; display: flex; align-items: center; }
.tickerBar > div { display: flex; gap: 28px; white-space: nowrap; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; padding-left: 20px; }
.tickerBar b { color: var(--red); font-weight: 700; }
.toastBox { position: absolute; left: 20px; right: 20px; bottom: 56px; z-index: 60; display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--ink); color: var(--cream); border: 2px solid var(--ink); border-radius: 4px; box-shadow: 4px 4px 0 var(--red); font-size: 13px; font-weight: 700; letter-spacing: 0.03em; animation: 2.8s cubic-bezier(0.2, 0.8, 0.3, 1) 0s 1 normal both running toast; pointer-events: none; }
#box { background: var(--cream); }
.topbar { position: absolute; left: 20px; right: 20px; top: 20px; display: flex; justify-content: space-between; align-items: center; z-index: 5; }
.back { width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 4px; background: var(--cream); display: flex; align-items: center; justify-content: center; padding: 0px; box-shadow: 2px 2px 0 var(--ink); }
.dayN { font-family: var(--display); font-size: 34px; line-height: 1; }
#present { position: absolute; left: 70px; top: 150px; width: 250px; height: 280px; border: 0px; background: transparent; padding: 0px; animation: 2.6s ease-in-out 0s infinite normal none running boxRattle; transform-origin: 50% 100%; }
#present .pbody { position: absolute; left: 0px; top: 96px; width: 250px; height: 184px; box-sizing: border-box; border: 2.5px solid var(--ink); border-radius: 4px; box-shadow: 8px 8px 0 var(--ink); overflow: hidden; }
#present .prib { position: absolute; right: 34px; top: 0px; bottom: 0px; width: 22px; border-left: 2.5px solid var(--ink); border-right: 2.5px solid var(--ink); }
#present .pnum { position: absolute; left: 14px; bottom: 14px; padding: 2px 10px; background: var(--cream); border: 2.5px solid var(--ink); border-radius: 3px; font-family: var(--display); font-size: 46px; line-height: 1.05; color: var(--ink); }
#present .plid { position: absolute; left: -12px; top: 0px; width: 274px; height: 100px; animation: 2.6s ease-in-out 0s infinite normal none running lidPeek; }
#present .plid .lidbar { position: absolute; left: 0px; top: 50px; width: 274px; height: 50px; box-sizing: border-box; border: 2.5px solid var(--ink); border-radius: 4px; }
#present .plid .prib { right: 46px; }
#present .pbow { position: absolute; left: 157px; top: 0px; }
#box .nudge { position: absolute; left: 20px; right: 20px; top: 488px; margin: 0px; text-align: center; font-size: 40px; line-height: 1; text-wrap: balance; }
#box .nudge span { color: var(--red); }
#box .tickerBar { position: absolute; left: 0px; right: 0px; bottom: 0px; }
#box.opening #present { animation: 0.5s ease-in-out 0.2s 1 normal forwards running boxPop; }
#box.opening #present .plid { animation: 0.6s cubic-bezier(0.5, 0, 0.8, 0.4) 0.14s 1 normal forwards running lidFly; }
#box.opening #present .pbody .prib { animation: 0.38s cubic-bezier(0.6, 0, 0.9, 0.5) 0s 1 normal forwards running ribUp; }
#box.opening .nudge { animation: 0.3s ease-out 0s 1 normal forwards running fadeOut; }
#msg { color: var(--cream); }
#msg.flood { animation: 0.75s cubic-bezier(0.7, 0, 0.2, 1) 0s 1 normal both running flood; }
#msg .stripes { position: absolute; inset: 0px; }
#msg .photo { position: absolute; left: 0px; top: 0px; width: 390px; height: 630px; overflow: hidden; animation: 1.3s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s 1 normal both running photoIn; }
#msg .photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
#msg.full .photo { height: 844px; }
#msg .fade { position: absolute; inset: 0px; pointer-events: none; }
#msg .bar { position: absolute; left: 20px; right: 20px; top: 20px; display: flex; justify-content: space-between; align-items: center; z-index: 6; animation: 0.5s ease 0.5s 1 normal both running up; }
#msg .bar .back { border-color: var(--cream); background: rgba(0, 0, 0, 0.14); box-shadow: none; }
#msg .bar .dayN { text-shadow: rgba(0, 0, 0, 0.35) 0px 2px 10px; }
#msg .words { position: absolute; left: 20px; right: 20px; display: flex; flex-direction: column; z-index: 3; }
#msg .h1, #msg .h2 { font-family: var(--display); font-size: 82px; line-height: 0.9; text-transform: uppercase; }
#msg .h1 { text-shadow: rgba(0, 0, 0, 0.3) 0px 4px 18px; animation: 0.55s cubic-bezier(0.2, 0.9, 0.3, 1) 0.9s 1 normal both running l1; }
#msg .h2 { line-height: 0.92; animation: 0.55s cubic-bezier(0.3, 1, 0.5, 1) 1.15s 1 normal both running slam; transform-origin: 0px 70%; }
#msg .subs { display: flex; flex-direction: column; font-family: var(--display); font-size: 29px; line-height: 1.08; text-shadow: rgba(0, 0, 0, 0.3) 0px 2px 12px; z-index: 3; }
#msg .subs span { display: block; animation: 0.45s ease-out 0s 1 normal both running sub; }
#msg .actions { position: absolute; left: 20px; right: 20px; bottom: 28px; display: flex; gap: 12px; z-index: 6; }
#msg .cta { flex: 1 1 0%; background: var(--cream); color: var(--ink); box-shadow: rgba(0, 0, 0, 0.35) 3px 3px 0px; animation: 0.45s ease 2s 1 normal both running pop; }
#msg .sq { width: 58px; height: 58px; flex: 0 0 auto; border: 2px solid var(--cream); border-radius: 4px; background: rgba(0, 0, 0, 0.14); display: flex; align-items: center; justify-content: center; padding: 0px; animation: 0.45s ease 2.1s 1 normal both running pop; }
#msg .q { width: 58px; height: 58px; flex: 0 0 auto; border: 0px; background: transparent; padding: 0px; animation: 0.45s ease 2.2s 1 normal both running pop; }
#msg .q span { width: 58px; height: 58px; box-sizing: border-box; border: 2px solid var(--ink); border-radius: 4px; background: var(--red); color: var(--cream); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 32px; box-shadow: 3px 3px 0 var(--ink); transform: rotate(-4deg); }
#msg .q.done span { background: var(--green); }
.scrim { position: absolute; inset: 0px; z-index: 50; border: 0px; padding: 0px; background: rgba(20, 0, 4, 0.6); animation: 0.3s ease 0s 1 normal both running fadeIn; }
.sheet { position: absolute; left: 0px; right: 0px; bottom: 0px; z-index: 51; max-height: 92%; overflow: auto; padding: 18px 20px 26px; background: var(--cream); color: var(--ink); border-top: 2px solid var(--ink); display: flex; flex-direction: column; gap: 12px; animation: 0.4s cubic-bezier(0.2, 0.9, 0.3, 1) 0s 1 normal both running sheetUp; }
.sheet .sh { display: flex; justify-content: space-between; align-items: center; }
.sheet .lbl { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; }
.sheet .lbl i { width: 26px; height: 26px; border: 2px solid var(--ink); border-radius: 2px; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 17px; background: var(--red); color: var(--cream); font-style: normal; }
.x { width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 4px; background: transparent; display: flex; align-items: center; justify-content: center; padding: 0px; }
.sheet .tq { margin: 0px 0px 4px; font-size: 27px; line-height: 1.02; text-wrap: balance; }
.opt { min-height: 56px; border: 2px solid var(--ink); border-radius: 4px; display: flex; align-items: center; gap: 12px; padding: 0px 14px; font-size: 14px; font-weight: 700; text-align: left; box-shadow: 3px 3px 0 var(--ink); background: var(--cream); color: var(--ink); }
.opt b { width: 28px; height: 28px; flex: 0 0 auto; border: 2px solid; border-radius: 2px; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 16px; font-weight: 400; }
.opt.right { background: var(--green); color: var(--cream); }
.opt.wrong { background: var(--red); color: var(--cream); }
.verdict { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; animation: 0.4s ease 0s 1 normal both running up; }
.verdict strong { font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1; text-transform: uppercase; }
.verdict p { margin: 0px; font-size: 12px; line-height: 1.5; }
.sheet p.body { margin: 0px; font-size: 13px; line-height: 1.6; }
.cardWrap { display: flex; justify-content: center; }
.cardWrap img { width: 220px; height: auto; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); display: block; }
.hintTxt { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--muted); }
.copyBtn { background: var(--ink); color: var(--cream); box-shadow: 3px 3px 0 var(--red); }
.copyTxt { font-size: 12px; line-height: 1.55; padding: 10px 12px; border: 1.5px dashed rgba(26, 20, 20, 0.5); border-radius: 4px; user-select: all; white-space: pre-line; }
.copyTxt .nw { white-space: nowrap; }
#menu, #setup, #contact { display: flex; flex-direction: column; background: var(--cream); }
#menu .mh, #setup .mh, #contact .mh { background: repeating-linear-gradient(135deg,rgba(0,0,0,.07) 0 1px,transparent 1px 8px),var(--red); color: var(--cream); padding: 20px 20px 22px; border-bottom: 2px solid var(--ink); display: flex; flex-direction: column; gap: 14px; }
#menu .mh .row1, #setup .mh .row1, #contact .mh .row1 { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; }
#menu .mh .x, #setup .mh .x, #contact .mh .x { background: var(--cream); margin: -10px -4px -10px 0px; box-shadow: 3px 3px 0 var(--ink); }
#menu .mh h2, #setup .mh h2, #contact .mh h2 { margin: 0px; font-size: 54px; line-height: 0.9; }
#menu .rows, #setup .rows, #contact .rows { flex: 1 1 0%; display: flex; flex-direction: column; padding: 4px 20px 0px; overflow: auto; }
.mrow { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 0px; border-top: 0px; border-right: 0px; border-left: 0px; border-image: none; border-bottom: 2px solid var(--ink); background: transparent; text-align: left; color: var(--ink); animation: 0.4s ease 0s 1 normal both running up; }
.mrow:active { background: rgba(26, 20, 20, 0.06); }
.mrow .t { flex: 1 1 0%; display: flex; flex-direction: column; gap: 3px; }
.mrow .t span:first-child { font-family: var(--display); font-size: 27px; line-height: 1; text-transform: uppercase; }
.mrow .t span:last-child { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); }
.sw { position: relative; width: 58px; height: 32px; flex: 0 0 auto; box-sizing: border-box; border: 2px solid var(--ink); border-radius: 4px; box-shadow: 2px 2px 0 var(--ink); }
.sw i { position: absolute; top: 3px; width: 22px; height: 22px; box-sizing: border-box; border: 2px solid var(--ink); border-radius: 2px; background: var(--cream); transition: left 0.28s cubic-bezier(0.34, 1.8, 0.64, 1); }
.score { padding: 4px 8px; background: var(--green); color: var(--cream); border: 2px solid var(--ink); border-radius: 3px; font-family: var(--display); font-size: 20px; line-height: 1.1; box-shadow: 2px 2px 0 var(--ink); font-variant-numeric: tabular-nums; }
#menu .foot { padding: 16px 20px 22px; display: flex; justify-content: space-between; align-items: flex-end; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--muted); }
#closed { background: repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 1px,transparent 1px 8px),var(--ink); color: var(--cream); display: flex; flex-direction: column; justify-content: center; padding: 0px 24px; gap: 22px; }
#closed h2 { margin: 0px; font-size: 76px; line-height: 0.88; }
#closed h2 span { color: var(--red); }
#closed p { margin: 0px; font-size: 14px; line-height: 1.6; max-width: 30ch; }
#closed .small { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--gold); }
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}
#factory { background: rgb(251, 241, 227); }
#factory .zone { position: absolute; left: 0px; right: 0px; top: 0px; height: 330px; background: repeating-linear-gradient(135deg, rgba(26, 20, 20, 0.07) 0px, rgba(26, 20, 20, 0.07) 1px, transparent 1px, transparent 8px), rgb(244, 228, 204); }
#factory .top { position: absolute; left: 20px; right: 20px; top: 24px; display: flex; justify-content: space-between; align-items: center; font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: 0.1em; }
#factory .top span:last-child { display: flex; align-items: center; gap: 8px; }
#factory .lamp { width: 10px; height: 10px; border: 1.5px solid var(--ink); border-radius: 5px; animation: 1s steps(2) 0s infinite normal none running blinkLamp; }
@keyframes blinkLamp { 
  0%, 100% { background: rgb(215, 38, 61); }
  50% { background: rgb(122, 20, 34); }
}
@keyframes count { 
  0% { opacity: 0; transform: translateY(40px) scale(0.9); }
  60% { opacity: 1; transform: translateY(-4px) scale(1.02); }
  100% { opacity: 1; transform: none; }
}
#factory .count { position: absolute; left: 20px; right: 20px; top: 65px; display: flex; align-items: flex-end; gap: 14px; animation: 0.7s cubic-bezier(0.3, 1, 0.5, 1) 0.2s 1 normal both running count; }
#factory .count span:first-child { font-family: var(--display); font-size: 200px; line-height: 0.8; color: var(--red); letter-spacing: -0.02em; }
#factory .count span:last-child { font-family: var(--display); font-size: 36px; line-height: 0.95; text-transform: uppercase; }
#factory .nt { position: absolute; left: 20px; right: 20px; top: 250px; display: flex; flex-direction: column; font-family: var(--display); font-size: 30px; line-height: 1.08; text-transform: uppercase; animation: 0.45s ease 0.7s 1 normal both running up; }
#factory .nt span span { color: var(--red); }
#factory .belt { position: absolute; left: 0px; right: 0px; top: 430px; height: 110px; overflow: hidden; }
@keyframes belt { 
  0% { transform: translateX(-130px); }
  100% { transform: translateX(420px); }
}
@keyframes bob { 
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  25% { transform: translateY(-2px) rotate(-1.5deg); }
  75% { transform: translateY(-1px) rotate(1.5deg); }
}
@keyframes tread { 
  0% { background-position: 0px 0px; }
  100% { background-position: 32px 0px; }
}
@keyframes spin { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes hop { 
  0%, 55%, 100% { transform: translateY(0px) scale(1, 1); }
  61% { transform: translateY(0px) scale(1.06, 0.92); }
  70% { transform: translateY(-18px) scale(0.96, 1.05); }
  79% { transform: translateY(0px) scale(1.05, 0.95); }
  86% { transform: translateY(0px) scale(1); }
}
@keyframes lidF { 
  0%, 57%, 100% { transform: translateY(0px) rotate(0deg); }
  70% { transform: translateY(-12px) rotate(-4deg); }
  80% { transform: translateY(0px) rotate(1deg); }
}
@keyframes lock { 
  0%, 55%, 100% { transform: rotate(0deg); }
  66% { transform: rotate(-10deg); }
  76% { transform: rotate(7deg); }
  86% { transform: rotate(-2deg); }
}
@keyframes shadowF { 
  0%, 55%, 100% { transform: scaleX(1); opacity: 0.25; }
  70% { transform: scaleX(0.8); opacity: 0.12; }
}
#factory .gift { position: absolute; left: 0px; bottom: 0px; animation: 9s linear 0s infinite normal none running belt; }
#factory .bob { position: relative; width: 100%; height: 100%; animation: 0.6s ease-in-out 0s infinite normal none running bob; transform-origin: 50% 100%; }
#factory .tread { position: absolute; left: -10px; right: -10px; top: 540px; height: 18px; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); background: repeating-linear-gradient(90deg, rgb(26, 20, 20) 0px, rgb(26, 20, 20) 14px, rgb(58, 48, 48) 14px, rgb(58, 48, 48) 16px) 0px 0px / 32px 100%; animation: 0.53s linear 0s infinite normal none running tread; }
#factory .rollers { position: absolute; left: 0px; right: 0px; top: 562px; height: 22px; display: flex; justify-content: space-around; }
#factory .rollers span { width: 20px; height: 20px; box-sizing: border-box; border: 2px solid var(--ink); border-radius: 10px; background: linear-gradient(90deg, transparent 8px, rgb(26, 20, 20) 8px, rgb(26, 20, 20) 10px, transparent 10px), rgb(251, 241, 227); animation: 0.95s linear 0s infinite normal none running spin; }
#factory .box1 { position: absolute; right: 26px; top: 496px; width: 108px; height: 160px; z-index: 2; }
#factory .box1 .shadow { position: absolute; left: 4px; right: -4px; bottom: -8px; height: 8px; border-radius: 4px; background: var(--ink); animation: 3s cubic-bezier(0.4, 0, 0.3, 1) 1.2s infinite normal none running shadowF; }
#factory .box1 .hop { position: absolute; inset: 0px; animation: 3s cubic-bezier(0.4, 0, 0.3, 1) 1.2s infinite normal none running hop; transform-origin: 50% 100%; }
#factory .box1 .lidF { animation: 3s cubic-bezier(0.4, 0, 0.3, 1) 1.2s infinite normal none running lidF; transform-origin: 20% 100%; }
#factory .box1 .lock { position: absolute; left: 50%; top: 66px; margin-left: -20px; width: 40px; animation: 3s ease-in-out 1.2s infinite normal none running lock; transform-origin: 50% 0px; }
#factory .go { position: absolute; left: 20px; right: 20px; top: 700px; background: var(--ink); color: var(--cream); box-shadow: 4px 4px 0 var(--red); animation: 0.45s ease 1.1s 1 normal both running up; }
#factory .line { position: absolute; left: 20px; right: 20px; top: 766px; height: 30px; display: flex; align-items: center; justify-content: center; white-space: nowrap; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; animation: 0.45s ease 1.25s 1 normal both running up; }
#factory .tickerBar { position: absolute; left: 0px; right: 0px; bottom: 0px; }
.btn.ring svg { transform-origin: 50% 0px; }
.btn.ring.swing svg { animation: 0.7s ease-out 0s 1 normal none running swing; }
.steps { margin: 0px; padding: 0px; list-style: none; display: flex; flex-direction: column; gap: 10px; counter-reset: s 0; }
.steps li { counter-increment: s 1; display: flex; gap: 12px; align-items: flex-start; font-size: 13px; line-height: 1.5; font-weight: 700; }
.steps li::before { content: counter(s); flex: 0 0 auto; width: 26px; height: 26px; border: 2px solid var(--ink); border-radius: 2px; background: var(--red); color: var(--cream); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 16px; font-weight: 400; }
.btn.dark { background: var(--ink); color: var(--cream); box-shadow: 3px 3px 0 var(--red); }
#snow[hidden], #overlay:empty { display: none; }
#cal .afterBar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; background: var(--ink); color: var(--cream); border-radius: 3px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; }
#cal .afterBar span:last-child { color: rgb(232, 184, 58); }
#cal .tile.fresh button { transition: transform 0.15s ease-out; }
#loading, #notice { background: repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 1px,transparent 1px 8px),var(--ink); color: var(--cream); display: flex; flex-direction: column; justify-content: center; padding: 0px 24px; gap: 22px; }
#loading { background: repeating-linear-gradient(135deg,rgba(0,0,0,.07) 0 1px,transparent 1px 8px),var(--red); }
#loading .small, #notice .small { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--gold); }
#loading .small { color: var(--cream); }
#loading h2, #notice h2 { margin: 0px; font-size: 76px; line-height: 0.88; }
#loading h2 span { color: var(--ink); }
#notice h2 span { color: var(--red); }
#notice p { margin: 0px; font-size: 14px; line-height: 1.6; max-width: 30ch; }
#loading .lamp { width: 14px; height: 14px; border: 2px solid var(--ink); border-radius: 7px; animation: 1s steps(2) 0s infinite normal none running blinkLamp; }
#notice .ghostBtn { background: transparent; color: var(--cream); border-color: var(--cream); }
#doc { display: flex; flex-direction: column; background: var(--cream); }
#doc .mh { background: repeating-linear-gradient(135deg,rgba(0,0,0,.07) 0 1px,transparent 1px 8px),var(--red); color: var(--cream); padding: 20px 20px 22px; border-bottom: 2px solid var(--ink); display: flex; flex-direction: column; gap: 14px; }
#doc .mh .row1 { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; }
#doc .mh .x { background: var(--cream); margin: -10px -4px -10px 0px; box-shadow: 3px 3px 0 var(--ink); }
#doc .mh h2 { margin: 0px; font-size: 54px; line-height: 0.9; }
#doc .mh h2 span { color: var(--ink); }
.dbody { flex: 1 1 0%; overflow: auto; padding: 22px 20px 28px; display: flex; flex-direction: column; gap: 14px; font-size: 13px; line-height: 1.65; font-weight: 700; }
.dbody h3 { margin: 8px 0px -6px; font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1; text-transform: uppercase; }
.dbody p { margin: 0px; }
.dbody a { color: var(--red); }
.dbody .btn { margin-top: 6px; }
.lnk { border: 0px; background: transparent; padding: 12px 2px; font: inherit; letter-spacing: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
#desktop { position: fixed; inset: 0px; z-index: 100; background: repeating-linear-gradient(135deg,rgba(0,0,0,.07) 0 1px,transparent 1px 8px),var(--red); color: var(--cream); font-family: var(--mono); display: flex; align-items: center; justify-content: center; padding: 40px; }
#desktop[hidden] { display: none; }
#desktop .dk { max-width: 760px; width: 100%; display: flex; flex-direction: column; gap: 26px; }
#desktop .small { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; }
#desktop h1 { margin: 0px; font-size: clamp(64px, 11vw, 132px); line-height: 0.88; }
#desktop h1 span { color: var(--ink); }
#desktop .dkp { margin: 0px; font-size: 16px; font-weight: 700; line-height: 1.6; max-width: 36ch; }
#desktop .dkrow { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
#desktop .dkurl { font-size: 44px; line-height: 1; }
#desktop .dkcopy { width: auto; padding: 0px 24px; box-shadow: 4px 4px 0 var(--ink); background: var(--cream); color: var(--ink); }
#desktop .dkany { align-self: flex-start; color: var(--cream); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; padding: 12px 0px; }
#desktop .btn { border-color: var(--ink); }
#notice .remind { background: var(--cream); color: var(--ink); box-shadow: 4px 4px 0 var(--red); }
#pvTag { position: fixed; left: 50%; top: 0px; transform: translateX(-50%); z-index: 200; padding: 2px 10px; background: rgb(212, 166, 42); color: rgb(26, 20, 20); font: 700 10px "Space Mono", monospace; letter-spacing: 0.1em; pointer-events: none; border-radius: 0px 0px 4px 4px; }
#factory .apptitle { position: absolute; left: 20px; right: 20px; top: 344px; margin: 0px; font-size: 34px; line-height: 1; animation: 0.45s ease 0.9s 1 normal both running up; }
#factory .apptitle span { color: var(--red); }
#factory.three .count span:first-child { font-size: 130px; }
#factory .count { gap: 12px; }
#factory .count span:first-child { font-size: 186px; }
#factory .count span:last-child { font-size: 31px; white-space: nowrap; }
#factory.three .count span:first-child { font-size: 128px; }
#factory .head { position: absolute; left: 0px; right: 0px; top: 0px; background: repeating-linear-gradient(135deg,rgba(0,0,0,.07) 0 1px,transparent 1px 8px),var(--red); color: var(--cream); padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 10px; }
#factory .head .row1 { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; min-height: 24px; }
#factory .head .fl { display: flex; align-items: center; gap: 8px; }
#factory .head h1 { margin: 0px; font-size: 50px; line-height: 0.9; }
#factory .count { top: 236px; }
#quiz { display: flex; flex-direction: column; background: var(--cream); }
#quiz .mh { flex: 0 0 auto; background: repeating-linear-gradient(135deg,rgba(0,0,0,.07) 0 1px,transparent 1px 8px),var(--red); color: var(--cream); padding: 20px 20px 22px; border-bottom: 2px solid var(--ink); display: flex; flex-direction: column; gap: 14px; }
#quiz .mh .row1 { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; }
#quiz .mh .row1 span { min-width: 0px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#quiz .mh .x { flex: 0 0 auto; background: var(--cream); margin: -10px -4px -10px 0px; box-shadow: 3px 3px 0 var(--ink); }
#quiz .mh h2 { margin: 0px; font-size: 54px; line-height: 0.9; }
#quiz .mh h2 span { color: var(--ink); }
.qb { flex: 1 1 0%; overflow: auto; padding: 20px 20px 28px; display: flex; flex-direction: column; gap: 12px; }
.qcard { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 16px; border: 2px solid var(--ink); border-radius: 4px; background: var(--cream); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.qcard .qt { font-family: var(--display); font-size: 30px; line-height: 1; text-transform: uppercase; }
.qcard .qs { font-size: 12px; font-weight: 700; line-height: 1.5; color: var(--muted); }
.qlead { margin: 0px; font-size: 13px; font-weight: 700; line-height: 1.55; text-align: center; }
.qlead b { font-weight: 700; color: var(--red); }
.qwho { margin: 0px; text-align: center; font-size: 64px; line-height: 1; color: var(--red); word-break: break-word; }
.qscore { margin: 0px; text-align: center; font-size: 150px; line-height: 0.9; color: var(--red); }
.qscore small { font-size: 60px; color: var(--ink); }
.qvs { display: flex; gap: 12px; }
.qvs span { flex: 1 1 0%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; border: 2px solid var(--ink); border-radius: 4px; box-shadow: 3px 3px 0 var(--ink); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.qvs b { font-family: var(--display); font-weight: 400; font-size: 64px; line-height: 1; color: var(--red); }
.qlabel { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.qin { height: 50px; width: 100%; box-sizing: border-box; padding: 0px 14px; border: 2px solid var(--ink); border-radius: 4px; background: rgb(255, 248, 238); color: var(--ink); font: 700 15px var(--mono); }
.qin:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.qprow { display: flex; align-items: center; gap: 10px; }
.qprow .x { flex: 0 0 auto; }
.btn.ghost2 { background: transparent; color: var(--ink); box-shadow: none; }
.qlbs { display: flex; flex-direction: column; gap: 8px; }
.qlb { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 2px solid var(--ink); border-radius: 4px; background: var(--cream); }
.qlb.win { background: var(--green); color: var(--cream); box-shadow: 3px 3px 0 var(--ink); }
.qlb span:first-child { font-family: var(--display); font-size: 30px; line-height: 1; min-width: 26px; }
.qlb .qn { flex: 1 1 0%; font-family: var(--display); font-size: 26px; line-height: 1; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; }
.qlb .qp { font-weight: 700; font-size: 14px; }
#qAfter { display: flex; flex-direction: column; gap: 12px; }
#cards { display: flex; flex-direction: column; background: var(--cream); }
#cards .mh { flex: 0 0 auto; background: repeating-linear-gradient(135deg,rgba(0,0,0,.07) 0 1px,transparent 1px 8px),var(--red); color: var(--cream); padding: 20px 20px 22px; border-bottom: 2px solid var(--ink); display: flex; flex-direction: column; gap: 14px; }
#cards .mh .row1 { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; }
#cards .mh .row1 span { min-width: 0px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#cards .mh .x { flex: 0 0 auto; background: var(--cream); margin: -10px -4px -10px 0px; box-shadow: 3px 3px 0 var(--ink); }
#cards .mh h2 { margin: 0px; font-size: 54px; line-height: 0.9; }
#cards .mh h2 span { color: var(--ink); }
#cards.editor .mh { padding: 12px 20px; }
#cards.editor .mh h2 { display: none; }
#cards.editor .qb { overflow: hidden; padding: 12px 20px 14px; gap: 8px; }
.cgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cthumb { position: relative; padding: 0px; border: 2px solid var(--ink); border-radius: 4px; overflow: hidden; background: var(--ink); box-shadow: 3px 3px 0 var(--ink); text-align: left; }
.cthumb img { display: block; width: 100%; height: auto; }
.cthumb .cname { position: absolute; left: 0px; right: 0px; bottom: 0px; padding: 6px 8px; background: var(--ink); color: var(--cream); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.csample { position: absolute; right: 6px; top: 6px; padding: 1px 6px; background: var(--gold); color: var(--ink); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; border: 1.5px solid var(--ink); border-radius: 2px; }
.cpv { flex: 0 0 auto; display: flex; justify-content: center; }
.cpv canvas { height: 318px; width: auto; border: 2px solid var(--ink); border-radius: 2px; box-shadow: 3px 3px 0 var(--ink); background: rgb(17, 17, 17); max-width: 100%; }
.ctabs { flex: 0 0 auto; display: flex; gap: 6px; }
.ctab { flex: 1 1 0%; height: 36px; border: 2px solid var(--ink); border-radius: 4px; background: transparent; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--ink); }
.ctab.on { background: var(--ink); color: var(--cream); }
.cctl { flex: 1 1 0%; min-height: 0px; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 2px 2px 4px; }
.cbar { flex: 0 0 auto; display: flex; gap: 10px; }
.cbar .btn { height: 52px; flex: 1 1 0%; }
.cfile { cursor: pointer; }
.chint { margin: 0px; font-size: 11px; font-weight: 700; line-height: 1.5; color: var(--muted); }
.clab { display: flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.clab input[type="range"] { flex: 1 1 0%; accent-color: rgb(215, 38, 61); }
.clab.col { flex-direction: column; align-items: stretch; gap: 5px; }
.cta { height: auto; padding: 10px 14px; resize: none; line-height: 1.4; }
.cchips { display: flex; gap: 8px; flex-wrap: wrap; }
.cchip { min-width: 44px; height: 40px; padding: 0px 12px; border: 2px solid var(--ink); border-radius: 4px; background: var(--cream); color: var(--ink); font-size: 13px; font-weight: 700; }
.cchip.on { background: var(--ink); color: var(--cream); }
.cchip:disabled { opacity: 0.35; }
.cchip.cfont { font-size: 17px; }
.cchip.big { flex: 1 1 0%; height: auto; padding: 10px; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.cchip.big b { font-family: var(--display); font-weight: 400; font-size: 24px; }
.cchip.big span { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; }
.cswatch { width: 40px; height: 40px; border: 2px solid var(--ink); border-radius: 4px; box-shadow: 2px 2px 0 var(--ink); }
.cswatch.on { outline: 3px solid var(--red); outline-offset: 2px; }
.cconsent { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; font-weight: 700; line-height: 1.5; }
.cconsent input { flex: 0 0 auto; width: 26px; height: 26px; accent-color: rgb(215, 38, 61); margin-top: 2px; }
#cal .rr { display: flex; align-items: center; gap: 6px; }
.starChip { display: flex; align-items: center; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; padding: 3px 8px; border: 1.5px solid var(--cream); border-radius: 2px; color: var(--cream); }
.starChip[hidden] { display: none; }
.starChip.pop { animation: 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) 0s 1 normal none running pop; }
.persBar { display: block; width: 100%; height: 44px; border: 2px solid var(--ink); border-radius: 4px; background: var(--gold); color: var(--ink); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; box-shadow: 3px 3px 0 var(--ink); }
.persBar[hidden] { display: none; }
.verdict .plus { color: var(--red); font-weight: 700; letter-spacing: 0.04em; }
#persona { color: var(--cream); background: var(--ink); }
#persona.flood { animation: 0.75s cubic-bezier(0.7, 0, 0.2, 1) 0s 1 normal both running flood; }
#persona .stripes { position: absolute; inset: 0px; }
#persona .pimg { position: absolute; left: 0px; top: 0px; width: 390px; height: 430px; overflow: hidden; animation: 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s 1 normal both running photoIn; }
#persona .pimg img { display: block; width: 100%; height: 100%; object-fit: cover; }
#persona .pfade { position: absolute; inset: 0px; pointer-events: none; }
#persona .bar { position: absolute; left: 20px; right: 20px; top: 20px; display: flex; justify-content: space-between; align-items: center; z-index: 6; animation: 0.5s ease 0.5s 1 normal both running up; }
#persona .bar .back { border-color: var(--cream); background: rgba(0, 0, 0, 0.14); box-shadow: none; }
#persona .bar .dayN { text-shadow: rgba(0, 0, 0, 0.35) 0px 2px 10px; }
.pcount { position: absolute; inset: 0px; z-index: 8; border: 0px; background: var(--ink); color: var(--cream); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-family: var(--mono); }
.pcount[hidden] { display: none; }
.pcount .pcs { font-size: 70px; color: var(--gold); animation: 1.4s ease-in-out 0s infinite normal none running swing; transform-origin: 50% 0px; }
.pcount .pcn { font-size: 170px; line-height: 0.9; color: var(--red); }
.pcount .pcl { font-size: 13px; font-weight: 700; letter-spacing: 0.16em; }
.pcount .pcl.small { margin-top: 14px; font-size: 11px; letter-spacing: 0.06em; opacity: 0.7; }
.pbody { position: absolute; inset: 0; z-index: 3; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.pwrap { margin-top: 300px; padding: 150px 20px 0; display: flex; flex-direction: column; gap: 12px; min-height: calc(100% - 300px); box-sizing: border-box; }
.pkick { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-shadow: 0 2px 10px rgba(0,0,0,.4); animation: l1 .5s .9s both; }
.pname { margin: 0; font-size: 56px; line-height: .92; text-shadow: 0 4px 18px rgba(0,0,0,.3); animation: slam .6s cubic-bezier(.3,1,.5,1) 1.1s both; transform-origin: 0 70%; }
.pname.long { font-size: 44px; }
.pquote { margin: 0; font-size: 22px; line-height: 1.15; font-weight: 400; animation: sub .45s ease-out 1.5s both; }
.ptext { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.55; animation: sub .45s ease-out 1.7s both; }
.pfacts { margin: 2px 0 0; display: flex; flex-direction: column; gap: 10px; animation: sub .45s ease-out 1.9s both; }
.pfacts div { padding: 10px 12px; border: 2px solid var(--cream); border-radius: 4px; background: rgba(0,0,0,.18); }
.pfacts dt { font-size: 9px; font-weight: 700; letter-spacing: .12em; opacity: .8; margin-bottom: 4px; }
.pfacts dd { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.45; }
.pnums { margin: 0; font-size: 10px; font-weight: 700; letter-spacing: .1em; opacity: .8; animation: sub .45s ease-out 2.05s both; }
.pbtns { display: flex; gap: 12px; position: sticky; bottom: 0; padding: 12px 0 22px; margin-top: auto; }
.pbtns .cta { flex: 1 1 0%; background: var(--cream); color: var(--ink); box-shadow: rgba(0, 0, 0, 0.35) 3px 3px 0px; }
.qthemes { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 12px; flex: 1 1 0%; min-height: 0px; }
.qth { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; text-align: left; padding: 14px; border: 2px solid var(--ink); border-radius: 4px; background: var(--bg,var(--cream)); color: var(--fg,var(--ink)); box-shadow: 3px 3px 0 var(--ink); }
.qth .qt { font-family: var(--display); font-size: 27px; line-height: 1; text-transform: uppercase; }
.qth .qs { font-size: 11px; font-weight: 700; line-height: 1.4; opacity: 0.85; }
.qth.vers { background: repeating-linear-gradient(135deg,rgba(26,20,20,.07) 0 1px,transparent 1px 8px),var(--cream-2); }

/* day pictures drawn as one full screen (colour, stripes, photo, fade) */
#msg.baked #mStripes, #msg.baked #mFade { display: none; }

/* the box page: striped cream, like the top of the countdown page */
#box:not(.d24) { background: repeating-linear-gradient(135deg, rgba(26,20,20,.07) 0 1px, transparent 1px 8px), var(--cream-2, #F4E4CC); }

/* longer note on the calendar (late joiners, 25 December): slides in and stays until it times out or is tapped */
@keyframes noteIn { 0% { opacity: 0; transform: translateY(16px); } 100% { opacity: 1; transform: none; } }
.toastBox.note { animation: noteIn .35s cubic-bezier(0.2, 0.8, 0.3, 1) both; pointer-events: auto; box-shadow: 4px 4px 0 var(--gold); cursor: pointer; }

/* in-app browser banner (top of the screen, can be closed) */
#inapp { position: absolute; left: 10px; right: 10px; top: 10px; z-index: 70; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; background: var(--ink); color: var(--cream); border: 2px solid var(--ink); border-radius: 4px; box-shadow: 4px 4px 0 var(--gold); animation: noteIn .35s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
#inapp[hidden] { display: none; }
#inapp .tx { flex: 1; display: flex; flex-direction: column; gap: 2px; }
#inapp strong { font-family: var(--display); font-weight: 400; font-size: 20px; line-height: 1.05; text-transform: uppercase; }
#inapp small { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: rgba(251, 241, 227, 0.75); }
#inapp .btn { flex: 0 0 auto; width: auto; min-height: 40px; padding: 0 14px; font: 700 13px var(--mono); letter-spacing: .1em; text-decoration: none; display: flex; align-items: center; background: var(--red); color: var(--cream); border: 2px solid var(--cream); border-radius: 4px; box-shadow: 2px 2px 0 var(--cream); }
#inapp .x { flex: 0 0 auto; background: var(--cream); }

/* 18+ gate: date of birth */
.dob { display: flex; gap: 10px; }
.dob .qin { flex: 1 1 0; min-width: 0; text-align: center; font-size: 20px; letter-spacing: .08em; }
.dob .qin.y { flex: 1.6 1 0; }
.dobErr { margin: 0; font-size: 13px; font-weight: 700; color: var(--red); }
.sheet a.btn { text-decoration: none; display: flex; align-items: center; justify-content: center; }
.sheet .btn:disabled { opacity: .35; box-shadow: none; }

/* gift factory: "?" opens the landing page (what's inside the calendar) */
.aboutBtn { position: absolute; z-index: 3; right: 20px; top: 56px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--cream); border-radius: 3px; color: var(--cream); text-decoration: none; font: 400 18px var(--display); }
.aboutBtn::before { content: ""; position: absolute; width: 48px; height: 48px; }

/* gift factory countdown: big days, then hours, minutes, seconds like the landing page (owner, 15 Oct 2026) */
#factory .count .cr { display: flex; flex-direction: column; gap: 6px; padding-bottom: 2px; }
#factory .count .dw, #factory .count .dw2 { font-weight: 400; }
#factory .count .dw2 { font-size: 22px; }
#factory .count .hms { display: flex; gap: 6px; }
#factory .count .c { width: 46px; padding: 5px 0 4px; display: flex; flex-direction: column; align-items: center; background: var(--ink); border-radius: 3px; box-shadow: 3px 3px 0 var(--gold); }
#factory .count .c b { font: 400 26px/1 var(--display); color: var(--cream); font-variant-numeric: tabular-nums; }
#factory .count .c small { margin-top: 2px; font: 700 8px var(--mono); letter-spacing: .12em; color: rgba(251,241,227,.7); }
#factory .count .c b.flip { animation: fFlip .4s cubic-bezier(.3,1.5,.5,1); }
@keyframes fFlip { 0% { transform: translateY(-40%) scaleY(.4); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* days in the same box style as hours, minutes, seconds: just bigger */
#factory .count { align-items: center; }
#factory .count span.dbox { flex: 0 0 auto; width: 150px; padding: 12px 0 10px; display: flex; flex-direction: column; align-items: center; background: var(--ink); border-radius: 4px; box-shadow: 5px 5px 0 var(--gold); font-size: inherit; line-height: 1; letter-spacing: 0; }
#factory .count .dbox b { font: 400 112px/.9 var(--display); color: var(--cream); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
#factory .count .dbox small { margin-top: 6px; font: 700 12px var(--mono); letter-spacing: .16em; color: rgba(251,241,227,.7); }
#factory.three .count .dbox b { font-size: 76px; }
#factory .count .hms .c { width: 54px; padding: 8px 0 6px; }
#factory .count .hms .c b { font-size: 32px; }
#factory .count .dw2 { font-size: 24px; margin-top: 6px; }

/* "till 1 December" above the small boxes; their bottom lines up with the days box */
#factory .count { align-items: flex-end; }
#factory .count .cr { padding-bottom: 0; gap: 8px; }
#factory .count .dw2 { margin: 0; }