/* Archivo de papel · presentación compartida por todas las pantallas. */
:root {
  color-scheme: light;
  --bg: #f7efdf;
  --panel: #fcf6e9;
  --panel2: #eee0ca;
  --line: #cdb897;
  --text: #302216;
  --muted: #75614e;
  --accent: #9f4328;
  --accent-hover: #81351f;
  --on-accent: #fff8ec;
  --ink: #32251b;
  --serif: Georgia, 'Times New Roman', serif;
  --mono: Consolas, 'Courier New', monospace;
  font-family: 'Segoe UI', Arial, sans-serif;
  color: var(--text);
  background: #eee2ce;
}
* { box-sizing: border-box; }
body {
  max-width: 1280px;
  min-height: 100vh;
  margin: 20px auto;
  border: 1px solid #c5ad87;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse at 10% 0%, #fffaf080, transparent 60%),
    radial-gradient(ellipse at 90% 95%, #d9be8e26, transparent 55%),
    radial-gradient(#73512b0c .55px, transparent .8px),
    radial-gradient(#8f6c3909 .6px, transparent .85px);
  background-size: auto, auto, 7px 9px, 11px 13px;
  background-position: 0 0, 0 0, 0 0, 4px 6px;
  box-shadow: 0 10px 50px #5941240c;
}
button, input, select { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; min-height: 46px; }
button:disabled { opacity: .55; cursor: wait; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 4px;
}
a { color: inherit; }
[hidden] { display: none !important; }
button.primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 24px;
  padding: 16px 24px; border: 1px solid var(--accent); border-radius: 1px;
  background: var(--accent); color: var(--on-accent);
  font: 700 12px var(--serif); letter-spacing: 1.25px;
  transition: background .15s;
}
button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button.secondary, .chip {
  padding: 11px 17px; border: 1px solid #b29a77; border-radius: 1px;
  background: #fffaf052; color: var(--text); font: 12px var(--mono);
}
button.secondary:hover, .chip:hover { border-color: var(--accent); background: #eee0ca; }
button[aria-pressed=true] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
button[aria-pressed=true]:hover { background: var(--accent-hover); }
.skip { position: fixed; top: -100px; left: 10px; z-index: 100; padding: 15px; background: var(--accent); color: var(--on-accent); }
.skip:focus { top: 10px; }
#demo-banner {
  padding: 9px; border-bottom: 1px solid var(--line);
  background: #eadbc2; color: #594027; font: 10px var(--mono); letter-spacing: 1.2px; text-align: center;
}
#demo-banner span { margin-left: 18px; letter-spacing: 0; }
.masthead {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 26px 38px; border-bottom: 1px solid #6e4e32;
  background: linear-gradient(120deg, #38291e, #2c2119); color: #fff7e8;
}
.brand { display: flex; align-items: center; gap: 16px; font: 700 14px var(--serif); letter-spacing: 2.7px; text-decoration: none; }
.brand-mark { color: #d3784e; font-size: 39px; line-height: 1; }
.private-label { color: #f5e8d3; font: 10px var(--mono); letter-spacing: 1.3px; }
.private-label i { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: #d3784e; }
.session-controls { display: flex; align-items: center; justify-content: flex-end; gap: 16px; flex-wrap: wrap; }
#switch-game { padding: 9px 12px; border-color: #947955; background: transparent; color: #fff7e8; font: 13px var(--serif); }
#switch-game:hover { border-color: #e0b38a; background: #fff0d910; }
.masthead :focus-visible { outline-color: #ebbb96; }
main { display: grid; grid-template-columns: 245px minmax(0, 1fr); gap: 36px; padding: 42px 38px 40px; }
.sidebar { padding-right: 28px; border-right: 1px solid var(--line); }
.eyebrow { color: var(--muted); font: 10px var(--mono); letter-spacing: 1.8px; }
.sidebar > .eyebrow { display: block; padding-bottom: 16px; border-bottom: 1px solid var(--line); color: #654128; font-family: var(--serif); font-weight: 700; }
.orbit { position: relative; display: flex; align-items: center; justify-content: center; width: 194px; height: 194px; margin: 32px 0; border: 1px solid var(--accent); border-radius: 50%; outline: 1px solid #aa6746; outline-offset: 4px; }
.orbit:before { content: ''; position: absolute; inset: 15px; border: 1px dashed #b88d67; border-radius: 50%; }
.orbit:after { content: '✦'; position: absolute; top: 17px; right: 83px; color: var(--accent); font: 18px var(--serif); }
.orbit > span { margin: -9px 0 0; color: var(--text); font: 700 78px var(--serif); letter-spacing: -5px; }
.orbit > small { position: absolute; bottom: 28px; padding: 3px 5px; background: var(--bg); color: #6c422b; font: 8px var(--serif); letter-spacing: 1px; }
.orbit-cross { position: absolute; inset: -12px 96px; border-left: 1px solid #b58c6c; }
.orbit-cross:after { content: ''; position: absolute; top: 50%; left: -111px; right: -110px; height: 1px; background: #b58c6c; }
.orbit span, .orbit small { z-index: 1; }
.orbit span { padding: 0 5px; background: var(--bg); }
h1 { margin: 26px 0 16px; font: 400 30px/1.13 var(--serif); letter-spacing: -1.2px; }
.intro { color: #685541; font-size: 14px; line-height: 1.8; }
.progress-head { display: flex; justify-content: space-between; margin-top: 34px; color: #654128; font: 10px var(--mono); letter-spacing: 1px; }
.progress { display: flex; gap: 5px; list-style: none; padding: 0; }
.progress li { height: 7px; flex: 1; border: 1px solid #cbb99d; background: #e5d8c1; }
.progress li.done { background: var(--accent); border-color: var(--accent); }
.progress li.current { border-color: #b39a78; background: linear-gradient(90deg, var(--accent) 35%, #e5d8c1 35%); }
.note { margin-top: 25px; padding-top: 20px; border-top: 1px solid var(--line); color: #685541; font: 13px/1.7 var(--serif); }
.note > span { float: left; margin-right: 10px; color: var(--accent); font-size: 23px; }
#content { min-width: 0; outline: none; }
.card { position: relative; min-height: 570px; padding: 32px; border: 1px solid var(--line); border-radius: 2px; background: linear-gradient(130deg, #fffbf24d, #f4e8d533); }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 23px; border-bottom: 1px solid var(--line); }
.tag { color: var(--accent); font: 700 11px var(--mono); letter-spacing: 1.6px; }
.status-badge { padding: 6px 8px; border: 1px solid #aa8961; color: #654128; font: 9px var(--serif); letter-spacing: 1px; }
.card h2 { margin: 30px 0 24px; font: 400 clamp(34px, 3.8vw, 50px)/1.08 var(--serif); letter-spacing: -1.6px; }
.clue-copy { color: #46392d; font-size: 15px; line-height: 1.8; }
.clue-copy p { margin: 0 0 10px; }
.clue-copy p:last-child { margin-bottom: 0; }
.workspace { margin: 28px 0; }
.coords { position: relative; overflow: hidden; padding: 24px; border: 1px solid #ba9e79; background: #f0e4ce66; }
.coords:after { content: '+'; position: absolute; top: 8px; right: 12px; color: #946242; font: 18px var(--mono); }
.coords small { display: block; margin-bottom: 16px; color: #654128; font: 10px var(--mono); letter-spacing: 1.7px; }
.coords code { color: #33251a; font: clamp(17px, 2.1vw, 27px) var(--mono); letter-spacing: .3px; }
.coords .secondary { display: block; min-height: 44px; margin-top: 20px; padding: 10px 16px; border-color: var(--accent); background: var(--accent); color: var(--on-accent); font: 700 11px var(--serif); letter-spacing: 1px; }
.coords .secondary:hover { background: var(--accent-hover); }
.answer-form { margin-top: 28px; padding-top: 25px; border-top: 1px solid var(--line); }
.answer-form label, .access-form label { display: block; margin-bottom: 12px; color: #654128; font: 10px var(--mono); letter-spacing: 1.5px; }
.field-row { display: flex; gap: 12px; }
input { min-width: 0; width: 100%; padding: 14px 16px; border: 1px solid #af9574; border-radius: 1px; background: #fffbf666; color: var(--text); font: 18px var(--mono); }
input.code-input { text-transform: uppercase; letter-spacing: 3px; }
input::placeholder { color: #80705c; font-size: 14px; letter-spacing: 0; opacity: 1; }
.field-row input { flex: 1; }
.field-row button { flex-shrink: 0; }
.hint-format { margin: 12px 0 0; color: var(--muted); font: 10px/1.7 var(--mono); }
.form-error { color: #9a2c1b; font-size: 13px; line-height: 1.6; min-height: 0; }
.form-error:empty { display: none; }
.access-form { margin-top: 35px; }
.access-form input { font-size: 16px; }
.access-form button { width: 100%; margin-top: 14px; }
.access-emblem, .wait-emblem { margin: 32px 0 20px; color: var(--accent); font: 62px var(--serif); letter-spacing: -4px; }
.wait-title { color: var(--accent); font: 11px var(--mono); letter-spacing: 1.4px; }
.wait-date { font: 24px/1.5 var(--serif); }
.wait-card { display: flex; flex-direction: column; justify-content: space-between; }
.wait-card .secondary { margin-top: 28px; }
.success-code { margin: 28px 0; color: var(--accent); font: 64px var(--mono); letter-spacing: 6px; }
.success-card .primary { width: 100%; margin-top: 25px; }
.transmission { padding: 20px; border: 1px solid var(--line); border-left: 3px solid var(--accent); background: #eee1ca66; color: #493120; font: 13px/2 var(--mono); word-spacing: 8px; overflow-wrap: anywhere; }
.archive-documents { margin-top: 30px; }
.archive-documents h3 { margin: 0 0 8px; font: 400 25px/1.25 var(--serif); }
.archive-note { margin: 0 0 20px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.archive-document { margin-top: 12px; border: 1px solid var(--line); background: #fffaf080; box-shadow: 3px 3px 0 #ddcdb633; }
.archive-document summary { display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 14px 18px; color: var(--text); font: 19px var(--serif); cursor: pointer; list-style: none; }
.archive-document summary::-webkit-details-marker { display: none; }
.archive-document summary::after { content: '+'; margin-left: auto; color: var(--accent); font: 23px var(--mono); }
.archive-document[open] summary::after { content: '−'; }
.archive-document summary:hover { background: #eee0ca66; }
.archive-document summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.document-seal { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border: 1px solid #ae7956; color: var(--accent); font: 18px var(--mono); transform: rotate(-4deg); }
.document-content { margin: 0 18px; padding: 20px 0; border-top: 1px solid var(--line); }
.document-body { margin: 0 0 20px; color: #46392d; font: 17px/1.9 var(--serif); overflow-wrap: break-word; hyphens: none; }
.document-content .secondary { font-size: 11px; }
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 15px 0; }
.toolbar label { color: var(--muted); font: 11px var(--mono); }
.toolbar .secondary { padding: 9px 12px; font-size: 11px; }
.development { margin: 20px 0; padding: 15px; border: 1px dashed #a48653; background: #e8d7b640; color: #705123; font-size: 12px; line-height: 1.7; }
.development strong { display: block; margin-bottom: 6px; font: 10px var(--mono); letter-spacing: 1px; }
.handoff { display: flex; align-items: center; gap: 20px; padding: 25px; border: 1px solid var(--line); background: #f0e4cf66; }
.handoff > span { color: var(--accent); font: 35px var(--serif); }
.handoff p { margin: 0; color: #685541; font-size: 14px; line-height: 1.7; }
.mask-viewport { max-height: 380px; overflow: auto; border: 1px solid var(--line); background: #fff8e9; overscroll-behavior: contain; }
.mask-sheet { display: block; min-width: 500px; width: 100%; user-select: none; touch-action: pan-x pan-y; }
.mask-sheet text { fill: #35271b; font: 17px var(--mono); text-anchor: middle; dominant-baseline: middle; }
.mask-sheet .row-label { fill: #786450; font-size: 12px; }
.mask-sheet .mask-path { fill: #c39873; stroke: #874b2e; }
.mask-sheet .mask-piece { touch-action: none; cursor: grab; }
.mask-sheet .mask-piece:active { cursor: grabbing; }
.mask-description { color: #685541; font-size: 13px; line-height: 1.6; }
.mask-readout { color: var(--accent); font: 18px var(--mono); letter-spacing: 8px; }
select { min-height: 44px; padding: 10px; border: 1px solid #af9574; background: var(--panel); color: var(--text); }
.signal-panel { padding: 24px; border: 1px solid #7c6144; background: #35281e; color: #f5e7ce; }
.signal-lamp-wrap { position: relative; display: flex; align-items: center; justify-content: center; height: 120px; border-bottom: 1px solid #705a42; }
.signal-lamp { width: 28px; height: 28px; border: 1px solid #968065; border-radius: 50%; background: #74624e; box-shadow: 0 0 0 10px #b8956630; }
.signal-lamp.on { background: #f2d79c; box-shadow: 0 0 0 10px #f2d79c12, 0 0 35px #f2d79c26; }
.signal-status { position: absolute; bottom: 15px; color: #ead7b7; font: 9px var(--mono); letter-spacing: 1.5px; }
.signal-panel .secondary { border-color: #af926b; background: transparent; color: #fff1d9; }
.signal-panel .secondary:hover { background: #59432e; }
.signal-panel :focus-visible { outline-color: #edc696; }
.photo-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.photo-card { padding: 0; border: 1px solid var(--line); background: var(--panel); color: var(--text); text-align: left; }
.photo-card .photo-placeholder { display: flex; align-items: center; justify-content: center; height: 116px; background: repeating-linear-gradient(135deg, #cdb897 0, #cdb897 1px, transparent 1px, transparent 12px); color: #75614e; font: 30px var(--mono); }
.photo-card img { display: block; width: 100%; height: 116px; object-fit: cover; }
.photo-card b { display: block; padding: 12px; font: 12px var(--mono); letter-spacing: 2px; }
.photo-zoom { max-height: 420px; overflow: auto; margin-top: 15px; border: 1px solid #b69b79; background: var(--panel2); }
.photo-zoom img { display: block; width: 100%; max-width: none; }
.photo-pending { display: grid; place-content: center; min-height: 180px; border: 1px dashed var(--line); background: var(--panel); color: var(--muted); text-align: center; }
.photo-pending span { color: var(--accent); font: 42px var(--mono); }
.photo-pending p { font-size: 13px; }
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 40px 0; }
.time-unit { padding-top: 16px; border-top: 1px solid var(--line); }
.time-unit b { color: var(--accent); font: 400 clamp(25px, 4vw, 44px) var(--serif); }
.time-unit small { display: block; margin-top: 8px; color: var(--muted); font: 9px var(--mono); letter-spacing: 1px; }
.final-fields { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 12px; margin: 30px 0; }
.final-fields label { color: var(--muted); font: 10px var(--mono); letter-spacing: 1px; }
.final-fields input { display: block; margin-top: 10px; padding: 14px 8px; text-transform: uppercase; text-align: center; font-size: 20px; letter-spacing: 2px; }
.final-form > .primary { width: 100%; }
.opening { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; background: var(--bg); }
.opening .seal { display: grid; place-items: center; width: 180px; height: 180px; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent); font: 80px var(--serif); animation: seal-open 5.2s ease-in-out forwards; }
.opening p { z-index: 2; margin-top: 40px; font: 12px var(--mono); letter-spacing: 2px; }
.opening-line { position: absolute; top: 0; left: 50%; width: 1px; height: 100vh; background: var(--accent); opacity: .3; animation: light-open 5.2s ease-in-out forwards; }
.key-checks { display: flex; gap: 14px; margin-top: 30px; color: var(--accent); font: 16px var(--mono); }
.key-checks span { animation: key-check .5s both; animation-delay: calc(var(--i)*.18s); }
@keyframes key-check { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes seal-open { 0%,30% { transform: scale(.9); opacity: 1; } 60% { transform: scale(1); box-shadow: 0 0 70px #9f432822; } 100% { transform: scale(1.3); opacity: 0; } }
@keyframes light-open { 0%,50% { transform: scaleY(0); } 75% { transform: scaleY(1); } 100% { transform: scaleX(900); opacity: 0; } }
.grid-viewport { max-height: 520px; overflow: auto; overscroll-behavior: contain; border: 1px solid #b69b79; --cell: 40px; }
.letter-grid { border-spacing: 0; table-layout: fixed; background: #fff8eb; font: 15px var(--mono); }
.letter-grid th, .letter-grid td { min-width: var(--cell); width: var(--cell); height: var(--cell); padding: 0; border-right: 1px solid #d3c1a5; border-bottom: 1px solid #d3c1a5; text-align: center; }
.letter-grid th { position: sticky; z-index: 2; background: #e9d8bb; color: #5f3d24; font: 11px var(--mono); }
.letter-grid thead th { top: 0; }
.letter-grid tbody th { left: 0; }
.letter-grid thead th:first-child { left: 0; z-index: 3; }
.letter-grid td button { min-height: var(--cell); width: 100%; height: 100%; padding: 0; border: 0; background: transparent; color: #35271b; font: inherit; }
.letter-grid td.axis { background: #ecd7b8; }
.letter-grid td.selected { background: var(--accent); }
.letter-grid td.selected button { color: var(--on-accent); }
.grid-caption { min-height: 20px; color: var(--accent); font: 12px var(--mono); }
.grid-card { animation: reveal-grid .8s both; }
@keyframes reveal-grid { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.grid-card .letter-grid td button { animation: grid-letter .35s both; animation-delay: calc(var(--row,0)*45ms); }
@keyframes grid-letter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
footer { display: flex; justify-content: space-between; gap: 16px; margin: 0 38px; padding: 23px 0 27px; border-top: 1px solid var(--line); color: #73553b; font: 9px var(--serif); letter-spacing: 1.8px; }
.footer-cross { margin-left: 25px; color: var(--accent); font-size: 17px; }
#notice { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 30; max-width: 90vw; padding: 16px 22px; border: 1px solid #ad815b; border-left: 3px solid var(--accent); background: #fff5e4; color: var(--text); box-shadow: 0 10px 40px #3d271b26; font-size: 13px; }
.loading { padding: 90px 20px; color: var(--muted); font: 14px var(--mono); text-align: center; }
.birthday-celebration { position: fixed; inset: 0; z-index: 15; pointer-events: none; overflow: hidden; }
.birthday-celebration * { pointer-events: none; }
.birthday-greeting { position: absolute; top: clamp(82px, 12vh, 126px); left: 50%; transform: translateX(-50%); z-index: 1; width: max-content; max-width: calc(100% - 32px); margin: 0; padding: 20px 28px; border: 1px solid #b47750; border-radius: 2px; background: #fff5e4; box-shadow: 0 12px 40px #50331926; color: #743b22; font: 400 clamp(18px, 2.2vw, 27px)/1.4 var(--serif); text-align: center; animation: birthday-message 6s both; }
.birthday-confetti { position: absolute; inset: 0; overflow: hidden; }
.birthday-confetti i { position: absolute; top: -20px; left: var(--x); width: 7px; height: 12px; border-radius: 1px; background: var(--color); opacity: 0; animation: birthday-fall var(--fall) var(--delay) linear both; will-change: transform; }
.birthday-confetti i:nth-child(3n) { width: 6px; height: 6px; border-radius: 50%; }
@keyframes birthday-fall { 0% { opacity: 0; transform: translate3d(0,0,0) rotate(0); } 8%,80% { opacity: .8; } 100% { opacity: 0; transform: translate3d(var(--drift),110vh,0) rotate(var(--turn)); } }
@keyframes birthday-message { 0% { opacity: 0; transform: translate(-50%,-8px); } 8%,85% { opacity: 1; transform: translate(-50%,0); } 100% { opacity: 0; transform: translate(-50%,-4px); } }
#demo-banner #birthday-replay { min-height: 44px; margin: 5px 0 5px 18px; padding: 8px 12px; border: 1px solid #ad8b60; background: transparent; color: #594027; font: 10px var(--mono); letter-spacing: .6px; }
#birthday-replay:focus-visible { outline-color: var(--accent); }
@media (min-width: 1400px) {
  main { padding-top: 46px; }
  .card { min-height: 630px; }
  .card h2 { margin-top: 34px; }
}
@media (max-width: 1320px) { body { margin: 0 auto; border-top: 0; border-bottom: 0; } }
@media (max-width: 950px) {
  main { grid-template-columns: 205px minmax(0, 1fr); gap: 25px; padding: 36px 26px; }
  .masthead { padding: 24px 26px; }
  .sidebar { padding-right: 22px; }
  .card { padding: 25px; }
  .orbit { width: 165px; height: 165px; }
  .orbit-cross { inset: -10px 82px; }
  .orbit-cross:after { left: -96px; right: -95px; }
  .orbit:after { top: 14px; right: 68px; }
  .orbit > span { font-size: 65px; }
  .orbit > small { bottom: 24px; font-size: 7px; }
  h1 { font-size: 27px; }
  footer { margin: 0 26px; }
  .field-row { flex-wrap: wrap; }
  .field-row .primary { width: 100%; }
  .card h2 { font-size: 37px; }
  .coords { padding: 20px 16px; }
  .coords code { font-size: 19px; }
}
@media (max-width: 680px) {
  body { border: 0; }
  .masthead { padding: 20px; gap: 12px; }
  .brand { min-width: 0; gap: 10px; font-size: 12px; letter-spacing: 1.5px; }
  #brand-name { max-width: 125px; }
  .brand-mark { font-size: 31px; }
  .private-label { font-size: 8px; letter-spacing: .7px; }
  .session-controls { flex-direction: column; align-items: flex-end; gap: 6px; }
  #switch-game { padding: 8px; font-size: 11px; }
  #demo-banner { padding: 8px; font-size: 8px; }
  #demo-banner span { margin-left: 8px; font-size: 8px; }
  main { display: block; padding: 28px 20px 38px; }
  .sidebar { position: relative; margin-bottom: 30px; padding: 0; border: 0; }
  .sidebar > .eyebrow, .orbit, .sidebar .intro { display: none; }
  .sidebar h1 { max-width: 285px; margin: 0 0 22px; font-size: 30px; line-height: 1.12; letter-spacing: -1px; }
  .progress-head { margin-top: 0; }
  .progress { margin: 12px 0; }
  .note { margin: 12px 0 0; padding-top: 12px; font-size: 12px; }
  .note > span { font-size: 21px; }
  .card { min-height: 0; padding: 24px 20px; }
  .card h2 { margin-top: 26px; font-size: 35px; letter-spacing: -1.15px; }
  .card-top { padding-bottom: 21px; }
  .tag { font-size: 9px; letter-spacing: 1.2px; }
  .status-badge { font-size: 8px; }
  .clue-copy { font-size: 14px; line-height: 1.8; }
  .coords { padding: 22px 15px; }
  .coords code { font-size: 17px; letter-spacing: 0; }
  .field-row { flex-wrap: nowrap; flex-direction: column; }
  .field-row .primary { width: 100%; padding: 17px; }
  .transmission { padding: 15px; font-size: 12px; word-spacing: 3px; }
  .final-fields { grid-template-columns: repeat(3, 1fr); gap: 18px 10px; }
  .countdown { gap: 8px; }
  .time-unit b { font-size: 32px; }
  .time-unit small { font-size: 8px; }
  .photo-gallery { gap: 7px; }
  .photo-card .photo-placeholder, .photo-card img { height: 92px; }
  .toolbar { gap: 7px; }
  .toolbar .secondary { font-size: 10px; }
  .grid-viewport { --cell: 44px; max-height: 430px; }
  footer { margin: 0 20px; padding-top: 20px; gap: 14px; font-size: 8px; }
  footer > span:last-child { letter-spacing: 0; }
  .footer-cross { margin-left: 8px; }
  .birthday-greeting { top: 120px; padding: 16px 18px; }
  #demo-banner #birthday-replay { display: block; margin: 7px auto 0; }
}
@media (max-width: 370px) {
  main { padding-right: 14px; padding-left: 14px; }
  .masthead { padding: 16px 14px; }
  .brand { gap: 7px; font-size: 10px; }
  #brand-name { max-width: 100px; }
  .card { padding: 22px 16px; }
  .coords code { font-size: 15px; }
  .card h2 { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .opening .seal { transform: none; }
  .birthday-confetti { display: none; }
}