:root {
  --night: #0c0e1b;
  --ink: #f7ecd9;
  --soft: #c4b9c7;
  --gold: #f6c59b;
  --paper: #e7dac6;
  --paper-ink: #2d2530;
  --sc-canvas: var(--night);
  --sc-ink: var(--ink);
  --sc-ink-soft: var(--soft);
  --sc-accent: var(--gold);
  --sc-font-display: Georgia, serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4.4rem; }
body { margin: 0; background: var(--night); color: var(--ink); font: 1rem/1.6 system-ui, sans-serif; }
a { color: inherit; }
button { color: inherit; font: inherit; cursor: pointer; }
button:disabled { cursor: default; }
[hidden] { display: none !important; }
/* Hide the public hosting badge injected by Netlify. */
iframe#nl-badge-frame { display: none !important; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
img, video { display: block; max-width: 100%; }
h1, h2, h3 { font-family: Georgia, serif; font-weight: 400; line-height: .99; letter-spacing: -.06em; margin: 0; }
h1 { font-size: clamp(4.2rem, 9.2vw, 9.75rem); }
h2 { font-size: clamp(3.2rem, 7.6vw, 7.8rem); }
h3 { font-size: clamp(2.3rem, 5vw, 5.3rem); }
em { font-weight: 400; color: var(--gold); }
p { margin: 0; }
.skip { position: fixed; z-index: 30; top: .5rem; left: .5rem; padding: .5rem 1rem; background: var(--night); transform: translateY(-160%); }
.skip:focus { transform: none; }
.top { position: sticky; z-index: 10; top: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .8rem; min-height: 4rem; padding: 0 clamp(1rem, 4vw, 4.5rem); border-bottom: 1px solid #ead9e527; background: #10101aeb; backdrop-filter: blur(12px); }
.brand, .top nav, .eyebrow, .hero-foot, .chapter-label, .album-controls, .end { font: 600 .69rem/1.4 ui-monospace, Consolas, monospace; letter-spacing: .13em; }
.brand, .top nav a { text-decoration: none; }
.brand span { color: var(--gold); font-size: 1.15rem; }
.top nav { display: flex; gap: clamp(.2rem, 2vw, 1.45rem); }
.top nav a { display: grid; place-items: center; min-width: 2rem; min-height: 2.7rem; color: var(--soft); }
.top nav a[aria-current], .top nav a:hover { color: var(--gold); }
.hero, .finale { position: relative; isolation: isolate; overflow: clip; }
.hero { min-height: min(57rem, calc(100svh - 4rem)); display: grid; align-items: center; padding: clamp(5rem, 10vw, 9rem) clamp(1.35rem, 8vw, 9rem); }
.deep-sky, .sky-grid, .meteors, .troll-bg { position: absolute; inset: 0; pointer-events: none; z-index: -2; }
.deep-sky { inset: -16% 0; background: radial-gradient(ellipse at 74% 63%, #5e385d66, transparent 51%), radial-gradient(ellipse at 58% 92%, #8d534834, transparent 52%), linear-gradient(145deg,#0a0c1b 12%,#1a1b34 61%,#100e1a); }
.deep-sky::before { content: ""; position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(circle, #f6d8bb 1px, transparent 1.7px), radial-gradient(circle, #f3e1f2 1px, transparent 1.8px), radial-gradient(circle, #bbb6e9 1px, transparent 2px); background-size: 131px 137px, 199px 163px, 283px 219px; background-position: 19px 51px, 62px 1px, 47px 112px; }
.sky-grid { opacity: .21; background: repeating-linear-gradient(90deg, transparent 0 13vw, #ac9aa944 13vw calc(13vw + 1px)), linear-gradient(0deg, #100e1b, transparent 48%); }
.hero-copy { position: relative; z-index: 1; align-self: center; }
.eyebrow { color: var(--gold); }
.eyebrow > span:first-child:empty { display: inline-block; width: 1.8rem; margin: 0 .5rem .2rem 0; border-top: 1px solid currentColor; }
.hero h1 { margin: .16em 0 .18em; }
.title-star { display: inline-block; color: var(--gold); font: .27em Georgia, serif; vertical-align: top; margin: .25em 0 0 .35em; }
.lede { max-width: 31ch; color: var(--soft); font-size: clamp(1rem, 1.6vw, 1.2rem); margin-bottom: 1.65rem; }
.cta { display: inline-flex; align-items: center; justify-content: center; gap: .75rem; min-height: 3rem; border: 1px solid #e2ba9d75; padding: .62rem 1.05rem; background: #201d30dc; color: var(--ink); text-decoration: none; border-radius: 3px; transition: background .25s, box-shadow .25s; }
.cta:hover { background: #392a43; box-shadow: 0 0 1.4rem #f6c59b29; }
.cta span { color: var(--gold); }
.hero-guides { position: absolute; bottom: 10%; right: 5%; width: min(41vw, 34rem); height: min(65%, 31rem); z-index: 0; display: flex; align-items: end; justify-content: center; pointer-events: none; }
.hero-guides img { width: 49%; height: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 1rem 2rem #0908118c); transform-origin: center bottom; animation: sway 6s ease-in-out infinite; }
.hero-guides .nastia { height: 87%; width: 35%; animation-delay: -2s; }
@keyframes sway { 0%,100% { transform: rotate(-1deg); } 50% { transform: translateY(-5px) rotate(1deg); } }
.constellation { position: absolute; top: 9%; right: 4%; width: min(36vw, 28rem); color: #ffd4a5; opacity: .68; z-index: -1; }
.constellation path { fill: none; stroke: currentColor; stroke-width: .7; stroke-dasharray: 2 4; }
.constellation g { fill: currentColor; }
.meteors { width: 100%; height: 100%; overflow: hidden; z-index: -1; }
.hidden-star { position: absolute; top: 17%; right: 9%; min-width: 44px; min-height: 44px; z-index: 2; border: 0; background: transparent; color: #ffdaa8; font-size: 1.6rem; }
.easter { position: absolute; top: calc(17% + 44px); right: 6%; z-index: 3; padding: .6rem .9rem; background: #171527; border: 1px solid #bd8ea96e; border-radius: 3px; }
.hero-foot { position: absolute; bottom: 0; inset-inline: clamp(1.35rem, 4vw, 4.5rem); min-height: 3.4rem; display: flex; justify-content: space-between; align-items: center; gap: .5rem; border-top: 1px solid #ead9e52c; color: var(--soft); }
.chapter { padding: clamp(4rem, 9vw, 8rem) 0; }
.shell { width: min(calc(100% - 2.75rem), 76rem); margin-inline: auto; position: relative; }
.paper { background: var(--paper); color: var(--paper-ink); color-scheme: light; }
.paper em, .paper .eyebrow { color: #834b53; }
.chapter-label { display: flex; align-items: center; gap: 1rem; border-bottom: 1px solid currentColor; padding-bottom: .75rem; margin-bottom: clamp(2.2rem, 5vw, 4rem); }
.chapter-label > span:first-child { font-size: 1rem; }
.split, .letter-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 5vw, 5rem); align-items: center; }
.split p { max-width: 34ch; font-size: clamp(1rem, 2vw, 1.25rem); margin: 1rem 0; }
.route { margin: clamp(2rem, 5vw, 4rem) 0; display: grid; grid-template-columns: .75fr 1.25fr; background: #191929; color: var(--ink); min-height: 24rem; }
.route-copy { padding: clamp(1.5rem, 4vw, 3.2rem); align-self: center; }
.route-copy .eyebrow { color: var(--gold); }
.route h3 { margin: .2em 0 .45em; }
.route ol { list-style: none; padding-left: 0; margin: 0; color: #e0cbca; }
.route li { position: relative; padding: .35rem 0 .35rem 1.35rem; }
.route li::before { content: ""; position: absolute; left: 0; top: .92rem; width: .43rem; height: .43rem; background: var(--gold); border-radius: 50%; }
.route li:not(:last-child)::after { content: ""; position: absolute; left: .19rem; top: 1.35rem; width: 1px; height: 1.3rem; background: #c4978066; }
.route-frame { position: relative; min-height: 16rem; overflow: hidden; }
.route-frame > * { width: 100%; height: 100%; object-fit: cover; }
.route-frame video { object-fit: contain; }
.route-illustration { position: absolute; inset: 0; }
.route-illustration svg { width: 100%; height: 100%; display: block; }
.album-heading h3 { margin: .2em 0 .5em; }
.album-rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 18rem); gap: 1.15rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 1.25rem .45rem .8rem; scrollbar-color: #895b60 #c9b9aa; }
.polaroid { position: relative; scroll-snap-align: start; background: #fff7eb; color: #352736; padding: .65rem .65rem 1rem; border: 0; box-shadow: 0 .28rem .6rem #35273621; text-align: left; transform: rotate(var(--tilt)) translateY(.2rem); transition: transform .25s, box-shadow .25s; }
.polaroid::before { content: ""; position: absolute; top: -.6rem; left: 48%; width: .6rem; height: 1.65rem; background: #ad8261; border-radius: 2px; z-index: 1; }
.polaroid:hover, .polaroid:focus-visible, .polaroid.active { transform: rotate(0) translateY(0); box-shadow: 0 .4rem .9rem #35273635; }
.polaroid img { width: 100%; aspect-ratio: 1.04; object-fit: cover; }
.polaroid span { display: block; font: italic 1rem/1.3 Georgia, serif; padding: .75rem .25rem 0; }
.album-controls { display: flex; align-items: center; justify-content: space-between; margin-top: .65rem; }
.album-controls button, #close-photo { min-width: 44px; min-height: 44px; border: 1px solid currentColor; background: transparent; border-radius: 50%; font-size: 1.2rem; margin-left: .4rem; }
.album-controls button:disabled { opacity: .42; }
.stories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 2.6rem 0; }
.stories p { border-top: 1px solid #7b5b60; padding-top: .65rem; }
.stories small { display: block; color: #834b53; letter-spacing: .12em; font: 600 .65rem ui-monospace, monospace; margin-bottom: .55rem; }
.troll { position: relative; isolation: isolate; overflow: clip; margin-top: 4rem; padding: clamp(3rem,7vw,7rem) 0; background: #101123; color: var(--ink); }
.troll-bg { inset: -12% 0; background: linear-gradient(0deg,#100e1c 5%,#100e1cb5 100%), url("assets/sky-1.jpg") center 40% / cover; }
.troll .eyebrow, .troll em { color: var(--gold); }
.troll h3 { margin: .25em 0 .6em; }
.sky-photos { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.sky-photos button { display: grid; gap: .55rem; width: 100%; text-align: left; border: 1px solid #d5b4cd44; background: #141426; padding: .55rem; }
.sky-photos img { width: 100%; aspect-ratio: 1.25; object-fit: cover; }
.sky-photos span { padding: .25rem; font-size: .9rem; }
#memories { padding-bottom: 0; }
.game { background: radial-gradient(ellipse at 80% 40%, #2a1c37, #121222 65%); }
.quiet-link { display: inline-block; min-height: 2.75rem; background: transparent; border: 0; padding: .45rem 0; text-decoration: underline; text-underline-offset: .3em; color: var(--gold); }
.game-board { --sc-mx: .5; --sc-my: .5; position: relative; text-align: center; min-height: 20rem; padding: 1.2rem .85rem; background: radial-gradient(ellipse at calc(var(--sc-mx) * 100%) calc(var(--sc-my) * 100%),#42304d,#241f35 76%); border: 1px solid #ddbdc05b; border-radius: 3px; }
.playfield { display: grid; place-items: center; height: 10rem; overflow: hidden; }
#catch { --nudge: 0px; --angle: 0deg; width: min(46%, 11rem); min-height: 60px; border: 0; background: transparent; padding: .2rem; transform: translateX(var(--nudge)) rotate(var(--angle)); transition: transform .34s cubic-bezier(.2,1.45,.55,1); touch-action: none; }
#catch:active { scale: .95; }
#catch img { max-height: 8rem; margin: auto; object-fit: contain; }
#game-status { margin: .45rem auto; min-height: 2.8em; }
.game-board.won::after { content: ""; pointer-events: none; position: absolute; inset: 10% 20%; border: 1px solid #f6c59b; border-radius: 50%; animation: ripple .75s ease-out both; }
@keyframes ripple { from { scale: .3; opacity: 1; } to { scale: 1.45; opacity: 0; } }
.letter-layout { align-items: start; }
.note { position: relative; margin: 0; padding: clamp(1.5rem, 4vw, 3rem); background: #f7ebd9; border: 1px solid #a88377; outline: 1px dashed #a88377; outline-offset: -9px; font: italic clamp(1.3rem,2.4vw,2.1rem)/1.4 Georgia,serif; }
.note > span { color: #834b53; }
.note p { margin: .7em 0; }
.note footer { text-align: right; }
#greetings { margin-top: 2rem; }
#greetings h3 { font-size: 1.7rem; margin-bottom: 1rem; }
details { background: #f7ebd9; margin: .55rem 0; border: 1px solid #ae897b; padding: .25rem .7rem; }
summary { cursor: pointer; padding: .65rem .25rem; }
details[open] p { padding: .25rem .25rem .8rem; white-space: pre-wrap; animation: unfold .35s ease-out both; }
@keyframes unfold { from { opacity: 0; transform: translateY(.65rem); } to { opacity: 1; transform: none; } }
.finale { min-height: 78svh; padding-bottom: 1.6rem; }
.final-copy { position: relative; text-align: center; padding: clamp(1.5rem, 5vw, 5rem) 0; }
.orbit-map { position: absolute; z-index: -1; right: -1%; top: 5%; width: min(36vw, 26rem); margin: 0; color: #eabaae; opacity: .32; }
.orbit-map svg { width: 100%; fill: none; stroke: currentColor; stroke-width: .65; }
.orbit-map circle { fill: currentColor; }
.orbit-link { stroke-width: 1.3; stroke-dasharray: 2 4; }
.orbit-map figcaption { display: flex; justify-content: space-around; font: .58rem ui-monospace, monospace; letter-spacing: .1em; }
.final-copy h2 { margin: .25em 0 .46em; }
.gift-button { box-shadow: 0 0 2.4rem #f8b2a137; }
.gift-button svg { color: var(--gold); fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linejoin: round; }
#gift-stage { position: relative; }
.invitation { width: min(100%, 36rem); padding: clamp(1.1rem, 4vw, 2.5rem); background: #252138; margin: auto; border: 1px solid #d0a8b679; animation: unfold .55s ease-out both; }
.invitation h3 { font-size: clamp(2rem, 5vw, 3.5rem); margin: .35em 0; }
.invitation p { max-width: 35ch; margin: 0 auto .6rem; color: var(--soft); }
.invitation > span:last-child { color: var(--gold); font-size: 1.45rem; }
.burst { position: absolute; top: 40%; left: 50%; color: var(--gold); pointer-events: none; animation: burst .8s ease-out both; }
.finale .constellation { opacity: .34; }
.finale.open .constellation path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: connect 1.6s .1s ease-out forwards; }
@keyframes connect { to { stroke-dashoffset: 0; } }
@keyframes burst { from { transform: translate(-50%,-50%) scale(.35); opacity: 0; } 30% { opacity: 1; } to { transform: translate(var(--x),var(--y)) rotate(60deg); opacity: 0; } }
.video-wrap { width: min(100%, 31rem); margin: 1.8rem auto 0; }
.video-wrap video { width: 100%; border: 1px solid #d0a8b679; }
.end { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid #ead9e549; padding-top: 1rem; color: var(--soft); }
dialog { width: min(92vw, 52rem); max-height: 92dvh; padding: 3.4rem .8rem .8rem; border: 1px solid #a983a3; background: #1a1626; color: var(--ink); }
dialog::backdrop { background: #080710df; }
dialog img { max-height: 67dvh; margin: auto; object-fit: contain; }
dialog p { text-align: center; padding: .5rem; }
#close-photo { position: absolute; right: .4rem; top: .3rem; }
@media (max-width: 720px) {
  .top { padding: 0 .6rem; gap: .4rem; }
  .brand { max-width: 7ch; font-size: .55rem; }
  .brand span { display: none; }
  .top nav a { min-width: 1.6rem; }
  .hero { display: flex; flex-direction: column; align-items: start; min-height: max(44rem, calc(100svh - 4rem)); padding: 3.1rem 1.4rem 15.4rem; }
  .hero-copy { align-self: start; }
  .hero h1 { font-size: clamp(3.5rem, 11.7vw, 6rem); }
  .hero-guides { height: 13.3rem; bottom: 3.9rem; right: 3%; width: 61%; }
  .constellation { top: auto; bottom: 8.8rem; right: 9%; width: 56vw; }
  .hidden-star { top: auto; bottom: 12.5rem; left: 7%; right: auto; }
  .easter { top: auto; bottom: 8.5rem; right: auto; left: 5%; max-width: 14rem; }
  .hero-foot { min-height: 3rem; font-size: .54rem; }
  .split, .letter-layout, .route { grid-template-columns: 1fr; }
  .route { min-height: 0; }
  .route-frame { min-height: 13rem; }
  .stories { grid-template-columns: 1fr; }
  .sky-photos { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .sky-photos button { flex: 0 0 72%; scroll-snap-align: start; }
  .orbit-map { position: relative; z-index: 0; width: min(73%, 15rem); margin: 0 auto 1.2rem; opacity: .62; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .meteors, .burst { display: none; }
}
.route:has(#route-photo:not([hidden])) { grid-template-columns:1fr; }
.route:has(#route-photo:not([hidden])) .route-frame { min-height:0; }
#route-photo { width:100%; height:auto; object-fit:contain; }
.quiz-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr)); gap:1rem; margin-top:2rem; }
.quiz { padding:clamp(1rem,4vw,2rem); background:#f7ebd9; border:1px solid #a88377; }
.quiz h3 { font-size:clamp(1.8rem,4vw,2.7rem); margin-bottom:1rem; }
.questions { margin:1rem 0; }
.questions button, #pencil-items button, #pencil-code button { display:inline-block; margin:.25rem; padding:.5rem .7rem; border:1px solid currentColor; background:transparent; border-radius:4px; min-height:44px; }
.questions button:disabled { opacity:.65; }
.questions button[aria-pressed="true"] { opacity:1; font-weight:bold; }
.questions p { margin:.5rem 0; }
#case-photo { border-radius:12px; }
#pencil-code input { width:6rem; font:inherit; }
#desk { color:var(--gold); }
.questions .quiet-answer { font-size:.86rem; }
.arcade { margin-top:clamp(2.8rem,7vw,6rem); }
.arcade > h3 { margin:.2em 0 .55em; }
.arcade-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,25rem),1fr)); gap:1rem; align-items:start; }
.arcade-card { min-width:0; padding:clamp(1rem,3vw,2rem); color:#f7ecd9; background:#211e31; border:1px solid #917883; color-scheme:dark; }
.arcade-card .eyebrow { color:var(--gold); }
.arcade-card h4 { margin:.2em 0 .35em; font:400 clamp(1.85rem,4vw,3rem)/1.05 Georgia,serif; }
.arcade-card label { display:block; margin-top:.75rem; font-size:.9rem; }
.arcade-card input[type="range"] { width:100%; accent-color:#ffce9e; min-height:32px; }
.arcade-card > [role="status"] { margin-top:.7rem; min-height:2.8em; color:#ffce9e; }
.arcade-actions { display:flex; flex-wrap:wrap; gap:.5rem; }
.arcade-actions button { min-height:44px; padding:.45rem .8rem; background:#363049; border:1px solid #ad94a4; border-radius:3px; }
.arcade-actions button:disabled { opacity:.6; }
.bowling-photo { margin:.7rem 0; background:#312a40; border-color:#997e91; }
.bowling-photo img { width:100%; max-height:22rem; object-fit:contain; }
#pool-table { display:block; width:100%; margin-top:1rem; }
.quests { background:#dccdb9; }
.quests .arcade { margin-top:0; }
.quests .arcade-actions { align-items:center; }
.quest-goal { color:#ffce9e; font-weight:600; margin:.45rem 0; }
.quest-badge, .quest-reward { margin:.9rem 0; padding:.65rem .8rem; border:1px solid currentColor; }
.quest-badge { color:#ffd6aa; }
.quest-reward { color:#553347; background:#f7ebd9; }
.quests .shell > a { display:inline-block; margin-top:1.25rem; }
#bowling-lane { width:100%; display:block; margin:1rem 0 .7rem; cursor:crosshair; touch-action:pan-y; }
#pins ellipse { transform-box:fill-box; transform-origin:center; transition:opacity .22s, transform .25s; }
#pins .down { opacity:0; transform:translateY(-12px) rotate(72deg); }
#bowling-ball { transform-box:fill-box; transform-origin:center; }
#aim-value { min-width:7rem; text-align:center; }
.power-meter { position:relative; height:14px; margin:.8rem 0; border-radius:10px; background:#4a4059; }
.power-meter span { position:absolute; inset:0 16% 0 65%; border-radius:8px; background:#d6a775; }
.power-meter i { position:absolute; left:0; top:-3px; width:4px; height:20px; background:#fff6e6; border-radius:3px; }
@media (prefers-reduced-motion:reduce) {
  .power-meter, #steady-roll { display:none; }
}
.tumble { color:var(--ink); background:radial-gradient(ellipse at 50% 85%,#594052,#211b32 68%); padding:clamp(1rem,5vw,3rem); border:1px solid #967381; }
.tumble-scene { --deck-offset:clamp(8px,2vw,21px); height:clamp(17rem,43vw,32rem); position:relative; isolation:isolate; perspective:1200px; perspective-origin:50% 28%; touch-action:pan-y; cursor:grab; overflow:hidden; }
.tumble-scene:active { cursor:grabbing; }
.tumble-frame { position:absolute; inset:8% 0 12%; margin:auto; width:min(74%,30rem); padding:.55rem; background:#f9eddb; border:1px solid #bda097; box-shadow:0 8px 25px #130e21a0; transform-origin:50% 100%; pointer-events:none; }
.tumble-frame img { width:100%; height:100%; object-fit:contain; background:#231d2d; }
.tumble-frame[data-layer="1"] { z-index:2; transform:translateY(calc(-1 * var(--deck-offset))) translateZ(-28px) rotateX(-8deg); }
.tumble-frame[data-layer="2"] { z-index:1; transform:translateY(calc(-1.85 * var(--deck-offset))) translateZ(-58px) rotateX(-11deg); }
.tumble-frame[data-layer="0"] { z-index:3; }
.tumble-frame.tumble-out { z-index:4; }
.tumble-controls { display:grid; grid-template-columns:auto 1fr auto; align-items:center; text-align:center; gap:.7rem; }
.tumble-controls button { min-width:44px; min-height:44px; border:1px solid #e5c4ad; border-radius:50%; background:transparent; }
.tumble-controls small { display:block; color:#efc29f; }
.album-overview { margin-top:1.65rem; }
.perseids { background:linear-gradient(#0c0e1b,#181829); }
.perseids h2 { margin:.2em 0 .35em; }
.perseids-figure { margin:0; border:1px solid #b6a1b868; background:#141421; }
.perseids-scene { position:relative; overflow:hidden; isolation:isolate; }
.perseids-field { width:100%; height:auto; }
.perseids-pair { position:absolute; z-index:2; width:23%; left:37%; top:59%; transform-origin:55% 95%; filter:drop-shadow(0 .3rem .3rem #101b27b5); animation:stargaze 5.4s ease-in-out infinite; }
.perseids-meteor { position:absolute; z-index:1; top:13%; left:15%; width:clamp(48px,13%,140px); height:2px; border-radius:50%; background:linear-gradient(90deg,transparent,#e4c4ff80,#fff0d4); box-shadow:0 0 .45rem #e9d3ff80; opacity:0; animation:field-meteor 8s linear infinite; }
.perseids-scene.paused > * { animation-play-state:paused; }
.perseids-figure figcaption { padding:.9rem 1.15rem; color:#ead5c6; font:italic clamp(1rem,2.2vw,1.35rem) Georgia,serif; }
.perseids-actions { display:flex; justify-content:space-between; flex-wrap:wrap; gap:.25rem 1rem; margin-top:.55rem; }
@keyframes stargaze { 0%,100% { transform:scaleY(1); } 50% { transform:scaleY(1.025) translateY(-1px); } }
@keyframes field-meteor { 0%,11%,31%,100% { opacity:0; } 14%,23% { opacity:1; } 11% { transform:translate(0,0) rotate(19deg); } 31%,100% { transform:translate(47vw,11vw) rotate(19deg); } }
.hat-guide { height:clamp(10rem,25vw,16rem); width:auto; margin:.5rem auto; object-fit:contain; transform-origin:50% 95%; animation:sway 4s ease-in-out infinite; }
.hat-options { position:relative; min-height:7.5rem; display:flex; justify-content:flex-end; align-items:center; }
.hat-options .hat-runaway { position:absolute; left:6%; top:7%; transform-origin:center; transition:top .24s,left .24s,transform .24s; }
.hat-runaway[data-escape="1"] { left:31%; top:65%; transform:scale(.8); }
.hat-runaway[data-escape="2"] { left:2%; top:53%; transform:scale(.65); }
.quest-guide { display:flex; align-items:center; gap:1rem; margin:1rem 0; }
.quest-guide img { height:7rem; width:auto; animation:sway 5s ease-in-out infinite; transform-origin:50% 95%; }
.quest-guide p { padding:.6rem .9rem; background:#f7ebd9; border:1px solid #ad8e80; font-style:italic; }
.top { display:flex; justify-content:space-between; flex-wrap:wrap; gap:0 1rem; }
.top nav { flex-wrap:wrap; gap:0 clamp(.35rem,1vw,1rem); }
.top nav a { padding:0 .24rem; }
.chapter-trail { width:min(calc(100% - 2.75rem),76rem); margin:auto; padding:1.1rem 0; display:flex; flex-wrap:wrap; justify-content:space-between; gap:.65rem; }
.chapter-trail a { padding:.4rem 0; }
@media (max-width:720px) {
  .top { justify-content:center; padding:.4rem .55rem; }
  .top .brand { max-width:none; }
  .top nav { justify-content:center; }
  .top nav a { min-height:2rem; }
  html { scroll-padding-top:6rem; }
}
@media(prefers-reduced-motion:reduce) { .perseids-meteor,#pause-perseids { display:none; } }

.quest-links { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr)); gap:1rem; margin-top:2rem; }
.quest-links a { display:grid; gap:.7rem; padding:1.2rem; background:#f7ebd9; border:1px solid #ad8e80; text-decoration:none; }
.quest-links a:hover { background:#fff3e4; }
.quest-links small { color:#834b53; letter-spacing:.1em; }
.quest-links strong { font:1.9rem Georgia,serif; }
.game-page { background:radial-gradient(ellipse at 50% 20%,#382742,#101020 70%); min-height:100svh; }
.game-nav { display:flex; justify-content:space-between; flex-wrap:wrap; align-items:center; gap:.65rem 1.5rem; padding:.9rem max(1rem,calc((100% - 54rem)/2)); border-bottom:1px solid #c9a0ac55; }
.game-nav nav { display:flex; flex-wrap:wrap; gap:.45rem 1rem; }
.game-nav a { padding:.3rem 0; text-underline-offset:.25em; }
.game-nav a[aria-current] { color:var(--gold); }
.game-shell { width:min(92%,48rem); margin:2.5rem auto; }
.game-shell h1 { font-size:clamp(2.7rem,8vw,5.5rem); margin:.15em 0 .3em; }
.game-footer { margin:1.4rem 0; }
.game-riddle { margin:1rem 0; padding:.8rem; background:#31253d; border:1px solid #9f7e91; }
.game-riddle label { display:block; margin:0 0 .5rem; }
.game-riddle button,.desk-inventory button { border:1px solid #b595a7; border-radius:4px; background:#453451; padding:.55rem .75rem; min-height:44px; }
.game-riddle input { padding:.5rem; border:1px solid #b595a7; border-radius:4px; width:min(100%,11rem); min-height:44px; font:inherit; margin:.25rem .3rem .25rem 0; }
.score-reveal { margin:1rem 0; background:#17121f; padding:.8rem; text-align:center; }
.score-reveal img { width:100%; max-height:24rem; object-fit:contain; }
.score-reveal figcaption { padding-top:.4rem; color:var(--gold); }
#desk-status { color:var(--gold); margin:.7rem 0; }
.school-desk { position:relative; isolation:isolate; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.4rem,2vw,1rem); align-items:center; padding:clamp(.8rem,4vw,2rem); border:5px solid #674332; border-radius:1rem; background:repeating-linear-gradient(6deg,#bd906b 0 12px,#b58762 12px 13px,#c1946f 13px 28px); box-shadow:inset 0 0 25px #5d342f5c; }
.desk-cover { min-width:0; min-height:clamp(4rem,12vw,7rem); border:0; padding:.4rem; font-weight:700; color:#362746; box-shadow:0 .4rem .55rem #472e39a0; transition:transform .22s,background .22s; overflow-wrap:anywhere; }
.desk-cover:hover { scale:1.04; }
.desk-cover.searched { background:#ffe4dc; transform:none; box-shadow:0 .12rem .3rem #472e3970; cursor:default; }
.notebook { background:repeating-linear-gradient(0deg,#d9c4ea 0 11px,#9f89bb 11px 12px); border-left:7px double #756092; transform:rotate(-8deg); }
.envelope { background:#f1bb94; transform:rotate(7deg); font-size:1.55rem; }
.envelope.searched { font-size:inherit; }
.school-card { background:#dbe8c8; transform:rotate(-5deg); font-size:clamp(.64rem,1.8vw,1rem); }
.doodle { background:#fff1aa; transform:rotate(10deg); }
.desk-pencil { position:relative; grid-column:1/-1; width:min(70%,26rem); margin:.6rem auto 0; text-align:center; }
.desk-pencil img { width:100%; height:clamp(9rem,28vw,16rem); object-fit:contain; border-radius:1rem; filter:drop-shadow(0 .6rem .55rem #4b282a91); transition:transform .45s; }
.desk-won .desk-pencil img { transform:rotate(-4deg) translateY(-4px); }
.desk-pencil span { display:inline-block; margin-top:.35rem; padding:.2rem .55rem; background:#372034; border-radius:3px; color:#fff0d7; font-size:.72rem; }
.desk-inventory { list-style:none; padding:0; display:flex; gap:.5rem; flex-wrap:wrap; }
.desk-inventory li { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; padding:.5rem .7rem; background:#392b44; border:1px solid #a68a9d; }
.desk-inventory output { background:#efadc8; color:#2d202c; padding:.2rem .45rem; border-radius:3px; font:700 1rem monospace; }
@media(max-width:520px) { .school-desk { grid-template-columns:repeat(2,1fr); } }
.desk-cover.searched[data-find]:not([data-find="empty"])::before { content:""; display:block; margin:0 auto .45rem; }
.desk-cover.searched[data-find="pen"]::before { width:76%; height:.44rem; border-radius:5px; background:linear-gradient(90deg,#514369 0 12%,#8269a3 12% 87%,#c7adc9 87% 95%,#514369 95%); transform:rotate(-10deg); }
.desk-cover.searched[data-find="markers"]::before { width:72%; height:1.1rem; background:linear-gradient(#e97da6 0 26%,transparent 26% 36%,#6a9f9e 36% 62%,transparent 62% 72%,#e3a658 72%); border-radius:4px; transform:rotate(8deg); }
.desk-cover.searched[data-find="calculator"]::before { width:1.5rem; height:1.8rem; border:3px solid #e58da9; border-radius:5px; background:linear-gradient(#6d626e 0 24%,transparent 24% 32%),repeating-linear-gradient(#ffc1d2 0 3px,#e58da9 3px 5px); }
/* Glyph Portal uses Arial Black for display and Arial for supporting text. */
body:not(.letter-page) { --sc-font-display:"Arial Black",Arial,sans-serif; font-family:Arial,sans-serif; }
body:not(.letter-page) :is(h1,h2,h3,h4,.quest-links strong) { font-family:"Arial Black",Arial,sans-serif; font-weight:900; letter-spacing:-.045em; }
body:not(.letter-page) :is(.brand,.top nav,.eyebrow,.hero-foot,.chapter-label,.album-controls,.end,.polaroid span,.perseids-figure figcaption,.orbit-map figcaption,.desk-inventory output) { font-family:Arial,sans-serif; }
body:not(.letter-page) :is(h1,h2,h3,h4) em { font-weight:inherit; }
body:not(.letter-page) .hero h1 { font-size:clamp(3rem,7.3vw,8rem); }
.questions [role="status"] { white-space:pre-line; }
@media (max-width:720px) { body:not(.letter-page) .hero h1 { font-size:clamp(2.65rem,9.7vw,5rem); } }
.sky-grid { display:none; }

.certificate { background:#f6e8d5; color:#302534; border:1px solid #a98277; outline:1px solid #bc9788; outline-offset:-8px; }
.certificate p { color:#483849; }
.certificate .certificate-recipient { letter-spacing:.16em; font-weight:700; font-size:.78rem; }
.certificate .certificate-venue { font-weight:700; margin:1rem auto .35rem; }
.certificate-meta { display:flex; justify-content:space-between; flex-wrap:wrap; gap:.4rem; border-top:1px solid #ac887e; padding-top:.55rem; margin:1.1rem 0 .5rem; }
.certificate-joke { font-size:.83rem; }
.certificate-seal { display:grid; place-items:center; width:6rem; min-height:5rem; margin:.8rem auto; border:1px dashed #99666b; border-radius:50%; color:#713f49; font:700 .52rem Arial,sans-serif; letter-spacing:.06em; transform:rotate(-7deg); }
.certificate-print { border:1px solid #a98277; background:transparent; color:inherit; padding:.55rem .75rem; }
@media print {
  body:has(.certificate:not([hidden])) { background:white; }
  body:has(.certificate:not([hidden])) * { visibility:hidden; }
  .certificate:not([hidden]), .certificate:not([hidden]) * { visibility:visible!important; }
  .certificate:not([hidden]) { position:fixed; top:1rem; left:50%; transform:translateX(-50%); width:min(90%,36rem); animation:none; print-color-adjust:exact; }
  .certificate .certificate-print { display:none; }
}
.ui-arrow { display:inline-block; width:.875rem; height:.875rem; vertical-align:-.125em; flex:none; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }