/* =========================================================
   ESTILOS - "Un pequeño universo"
   Este archivo controla todo el aspecto visual del sitio.
   No necesitas tocar nada aqui para personalizar el contenido:
   eso se hace en config.js. Este archivo es para ajustes de
   diseno (colores, tipografia, tamanos, animaciones).

   La tipografia se carga desde el <link> en index.html (mas
   rapido que @import, porque el navegador puede empezar a
   descargarla en paralelo con el resto de la pagina).
   ========================================================= */

/* =========================================================
   CONFIGURA TU REGALO buscando el objeto CONFIG dentro del
   bloque de codigo al final del archivo. Ahi cambias nombre,
   recuerdos, la carta, la linea de tiempo, etc.
   Para la cancion: coloca un archivo llamado music.mp3 en la
   misma carpeta que este index.html.
   ========================================================= */

:root{
  --bg:#06050d;
  --bg-2:#0b0919;
  --bg-3:#120e26;
  --panel: rgba(255,255,255,0.045);
  --panel-strong: rgba(255,255,255,0.075);
  --panel-border: rgba(255,255,255,0.10);
  --gold:#e8c07d;
  --gold-soft: rgba(232,192,125,0.6);
  --rose:#e0a8c2;
  --violet:#9b8cf6;
  --violet-deep:#4c3fa0;
  --text:#f6f3ff;
  --muted:#a79fc9;
  --serif:'Cormorant Garamond', 'Georgia', serif;
  --sans:'Jost', 'Helvetica Neue', sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-snap-type:y proximity; }
section{ scroll-snap-align:start; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--violet); color:#fff; }
a{ color:inherit; }

/* scrollbar a tono */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:linear-gradient(var(--violet), var(--gold)); border-radius:10px; border:2px solid var(--bg); }
*{ scrollbar-width:thin; scrollbar-color:var(--violet) var(--bg); }

#stars{ position:fixed; inset:0; z-index:0; pointer-events:none; }

.nebula{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 900px 600px at 15% 10%, rgba(155,140,246,0.14), transparent 60%),
    radial-gradient(ellipse 800px 700px at 85% 30%, rgba(224,168,194,0.09), transparent 60%),
    radial-gradient(ellipse 700px 900px at 50% 90%, rgba(232,192,125,0.08), transparent 60%);
}
.vignette{
  position:fixed; inset:0; z-index:3; pointer-events:none;
  box-shadow:inset 0 0 220px rgba(0,0,0,0.65);
}

main{ position:relative; z-index:1; }

section{
  min-height:100vh; width:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:6rem 1.5rem;
  position:relative;
}

.eyebrow{
  display:flex; align-items:center; justify-content:center; gap:0.6rem;
  font-family:var(--sans);
  font-size:0.72rem;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--gold);
  opacity:0.9;
  margin-bottom:1rem;
  text-align:center;
}
.eyebrow .idx{
  font-family:var(--serif);
  font-style:italic;
  color:var(--muted);
  letter-spacing:0;
  opacity:0.8;
}
.eyebrow::before, .eyebrow::after{ content:''; width:22px; height:1px; background:var(--gold-soft); }

h1,h2,h3{ font-family:var(--serif); font-weight:500; margin:0; }

.section-title{
  font-size:clamp(1.9rem, 4.5vw, 3.1rem);
  text-align:center; max-width:800px; line-height:1.15;
  margin-bottom:0.7rem;
}
.section-sub{
  font-family:var(--serif); font-style:italic; color:var(--muted);
  text-align:center; font-size:clamp(1rem,2vw,1.25rem);
  max-width:560px; margin:0 auto 3rem; line-height:1.5;
}

.glass{
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:20px;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 20px 60px rgba(0,0,0,0.35);
  transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s ease, transform .9s ease; }
.reveal.in-view{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ---------- preloader ---------- */
#preloader{
  position:fixed; inset:0; z-index:200;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .7s ease, visibility .7s ease;
}
#preloader.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
#preloader-mark{
  font-family:var(--serif); font-style:italic; font-size:1.1rem;
  color:var(--gold); letter-spacing:0.3em; text-transform:uppercase;
  opacity:0.85;
  position:relative; padding-bottom:18px;
}
#preloader-mark::after{
  content:''; position:absolute; left:50%; bottom:0; width:36px; height:1px;
  background:var(--gold); transform:translateX(-50%);
  animation:preload 1.3s ease-in-out infinite;
}
@keyframes preload{ 0%,100%{ width:8px; opacity:.3;} 50%{ width:48px; opacity:1;} }

/* ---------- progress bar ---------- */
#progressbar{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg, var(--violet), var(--gold), var(--rose));
  z-index:60;
  transition:width .1s linear;
}

#navdots{
  position:fixed; right:22px; top:50%; transform:translateY(-50%); z-index:50;
  display:flex; flex-direction:column; gap:14px;
}
#navdots button{
  width:9px; height:9px; border-radius:50%;
  border:1px solid var(--gold-soft); background:transparent;
  cursor:pointer; padding:0;
  transition:background .3s, transform .3s;
}
#navdots button.active{ background:var(--gold); transform:scale(1.35); }
@media (max-width:720px){ #navdots{ display:none; } }

#menu-toggle{
  position:fixed; top:20px; right:20px; z-index:55;
  width:46px; height:46px; border-radius:50%;
  border:1px solid var(--panel-border);
  background:var(--panel);
  backdrop-filter:blur(10px);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  gap:4px; flex-direction:column;
  transition:border-color .3s, transform .2s;
}
#menu-toggle:hover{ border-color:var(--gold-soft); transform:scale(1.06); }
#menu-toggle span{ width:18px; height:1.5px; background:var(--text); transition:transform .3s ease, opacity .3s ease; }
#menu-toggle.open span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
#menu-toggle.open span:nth-child(2){ opacity:0; }
#menu-toggle.open span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

#menu-overlay{
  position:fixed; inset:0; z-index:54;
  background:rgba(5,4,11,0.92);
  backdrop-filter:blur(18px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .4s ease, visibility .4s ease;
}
#menu-overlay.show{ opacity:1; visibility:visible; pointer-events:auto; }
#menu-list{ display:flex; flex-direction:column; gap:0.4rem; align-items:center; }
.menu-item{
  background:none; border:none; cursor:pointer;
  font-family:var(--serif); font-size:clamp(1.3rem,4vw,1.9rem);
  color:var(--muted); padding:0.5rem 1rem;
  display:flex; align-items:baseline; gap:0.9rem;
  transition:color .25s ease, transform .25s ease;
}
.menu-item:hover{ color:var(--text); transform:translateX(6px); }
.menu-item .menu-num{ font-family:var(--sans); font-size:0.72rem; letter-spacing:0.1em; color:var(--gold); }

#soundtoggle{
  position:fixed; left:20px; bottom:20px; z-index:50;
  width:46px; height:46px; border-radius:50%;
  border:1px solid var(--panel-border);
  background:var(--panel);
  backdrop-filter:blur(10px);
  color:var(--text); font-size:1.1rem;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:border-color .3s, transform .2s;
}
#soundtoggle:hover{ border-color:var(--gold-soft); transform:scale(1.06); }
#soundtoggle.playing{ animation:soundpulse 2.4s ease-in-out infinite; }
@keyframes soundpulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(232,192,125,0.35);} 50%{ box-shadow:0 0 0 8px rgba(232,192,125,0);} }

button{ font-family:var(--sans); }
.btn{
  font-family:var(--sans); font-size:0.85rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--bg);
  background:linear-gradient(135deg, var(--gold), #f2d9a8);
  border:none; padding:0.95rem 2.3rem; border-radius:999px; cursor:pointer;
  box-shadow:0 8px 26px rgba(232,192,125,0.25);
  transition:transform .25s ease, box-shadow .25s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(232,192,125,0.4); }
.btn:active{ transform:translateY(0); }
.btn:focus-visible, button:focus-visible, input:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
[role="button"]:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; border-radius:8px; }
.btn-ghost{
  font-size:0.82rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text); background:transparent;
  border:1px solid var(--panel-border); padding:0.85rem 1.8rem; border-radius:999px; cursor:pointer;
  transition:border-color .25s, background .25s;
}
.btn-ghost:hover{ border-color:var(--gold-soft); background:rgba(255,255,255,0.03); }

/* ---------- landing ---------- */
#landing{ text-align:center; position:relative; }
#landing-glow{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,40%), rgba(155,140,246,0.14), transparent 60%);
  transition:background .2s ease;
}
.landing-line{
  font-family:var(--serif); font-style:italic; font-size:clamp(1.05rem,2.4vw,1.5rem);
  color:var(--muted); max-width:640px; opacity:0;
  animation:fadeUp 1.4s ease forwards; animation-delay:.3s;
}
#landing-names{
  margin-top:1.6rem; font-family:var(--serif); font-size:clamp(2.2rem,6vw,3.9rem);
  background:linear-gradient(100deg, var(--gold), #fff5da 35%, var(--rose) 60%, var(--violet) 85%, var(--gold));
  background-size:300% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:fadeUp 1.4s ease forwards, shine 8s linear infinite;
  animation-delay:1.3s, 2.5s; opacity:0; letter-spacing:0.01em; will-change:background-position;
}
#landing-sub{
  margin-top:1.1rem; color:var(--muted); font-size:0.92rem; letter-spacing:0.2em; text-transform:uppercase;
  opacity:0; animation:fadeUp 1.2s ease forwards; animation-delay:2.6s;
}
#landing-btn{ margin-top:3.2rem; opacity:0; animation:fadeUp 1.2s ease forwards; animation-delay:3.3s; }
#audio-status{ min-height:1.2rem; margin:0.85rem 1rem 0; color:var(--muted); font-size:0.78rem; letter-spacing:0.03em; opacity:0; animation:fadeUp 1.2s ease forwards; animation-delay:3.55s; }
#landing-scroll{
  position:absolute; bottom:2.4rem; left:50%; transform:translateX(-50%);
  font-size:0.68rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--muted);
  opacity:0; animation:fadeUp 1.2s ease forwards, floaty 2.6s ease-in-out infinite;
  animation-delay:3.8s, 4.4s;
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:translateY(0);} }
@keyframes shine{ to{ background-position:300% center; } }
@keyframes floaty{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,-6px);} }
@media (prefers-reduced-motion: reduce){
  .landing-line, #landing-names, #landing-sub, #landing-btn, #audio-status, #landing-scroll{ animation:none; opacity:1; }
}

#assistant-panel{ width:100%; max-width:640px; padding:1.7rem; }
#assistant-panel:hover{ border-color:rgba(155,140,246,0.35); }
.assistant-head{ display:flex; align-items:center; gap:10px; padding-bottom:1rem; margin-bottom:1rem; border-bottom:1px solid var(--panel-border); }
.pulse-dot{ width:8px; height:8px; border-radius:50%; background:#7ef2b0; box-shadow:0 0 0 0 rgba(126,242,176,0.6); animation:pulse 2s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(126,242,176,0.55);} 70%{ box-shadow:0 0 0 8px rgba(126,242,176,0);} 100%{ box-shadow:0 0 0 0 rgba(126,242,176,0);} }
.assistant-name{ font-family:var(--serif); font-size:1.05rem; letter-spacing:0.03em; }
.assistant-status{ font-size:0.72rem; color:var(--muted); letter-spacing:0.08em; text-transform:uppercase; margin-left:auto; }
#chatlog{ display:flex; flex-direction:column; gap:0.8rem; min-height:170px; max-height:340px; overflow-y:auto; overscroll-behavior:contain; padding-right:4px; margin-bottom:1rem; }
.bubble{ max-width:85%; padding:0.75rem 1rem; border-radius:14px; font-size:0.95rem; line-height:1.5; white-space:pre-wrap; animation:bubblein .35s ease; }
@keyframes bubblein{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:translateY(0);} }
.bubble.user{ align-self:flex-end; background:var(--panel-strong); border:1px solid var(--panel-border); }
.bubble.ai{ align-self:flex-start; background:linear-gradient(135deg, rgba(155,140,246,0.16), rgba(224,168,194,0.10)); border:1px solid rgba(155,140,246,0.3); font-family:var(--serif); font-size:1.05rem; }
.bubble.typing span{ display:inline-block; width:5px; height:5px; margin:0 2px; border-radius:50%; background:var(--muted); animation:blink 1.2s infinite; }
.bubble.typing span:nth-child(2){ animation-delay:.2s; }
.bubble.typing span:nth-child(3){ animation-delay:.4s; }
@keyframes blink{ 0%,80%,100%{ opacity:.25;} 40%{ opacity:1;} }
.chips{ display:flex; flex-wrap:wrap; gap:0.5rem; }
.chip{ font-size:0.78rem; padding:0.5rem 0.9rem; border-radius:999px; border:1px solid var(--panel-border); background:transparent; color:var(--muted); cursor:pointer; transition:.2s; }
.chip:hover{ border-color:var(--gold-soft); color:var(--text); background:rgba(255,255,255,0.03); }

#timeline-list{ width:100%; max-width:760px; position:relative; }
#timeline-list::before{ content:''; position:absolute; left:50%; top:0; bottom:0; width:1px; background:linear-gradient(var(--gold-soft), var(--violet), transparent); transform:translateX(-50%); }
.tl-item{ position:relative; width:calc(50% - 34px); padding:1.3rem 1.5rem; margin-bottom:2.6rem; }
.tl-item:nth-child(odd){ margin-left:0; text-align:right; }
.tl-item:nth-child(even){ margin-left:calc(50% + 34px); text-align:left; }
.tl-dot{ position:absolute; top:1.4rem; width:11px; height:11px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(232,192,125,0.18); }
.tl-item:nth-child(odd) .tl-dot{ right:-40px; }
.tl-item:nth-child(even) .tl-dot{ left:-40px; }
.tl-date{ font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); margin-bottom:0.35rem; }
.tl-title{ font-family:var(--serif); font-size:1.3rem; margin-bottom:0.4rem; }
.tl-desc{ color:var(--muted); font-size:0.92rem; line-height:1.55; }
@media (max-width:680px){
  #timeline-list::before{ left:14px; }
  .tl-item, .tl-item:nth-child(odd), .tl-item:nth-child(even){ width:calc(100% - 44px); margin-left:44px; text-align:left; }
  .tl-item:nth-child(odd) .tl-dot, .tl-item:nth-child(even) .tl-dot{ left:-30px; right:auto; }
}

#const-wrap{ width:100%; max-width:900px; position:relative; padding:0.8rem; }
#const-wrap:hover{ border-color:rgba(232,192,125,0.3); }
#const-canvas{ width:100%; height:auto; border-radius:16px; cursor:pointer; display:block; }
#const-hint{ text-align:center; color:var(--muted); font-size:0.8rem; margin-top:1rem; letter-spacing:0.04em; }

#box-scene{ width:100%; max-width:640px; height:420px; position:relative; perspective:1200px; display:flex; align-items:center; justify-content:center; }
#box-core{ width:130px; height:130px; transform-style:preserve-3d; animation:spin 16s linear infinite; position:relative; will-change:transform; }
#box-scene:hover #box-core{ animation-play-state:paused; }
@media (prefers-reduced-motion: reduce){ #box-core{ animation:none; } }
.box-face{ position:absolute; inset:0; border:1px solid rgba(232,192,125,0.45); background:linear-gradient(135deg, rgba(155,140,246,0.14), rgba(232,192,125,0.08)); backdrop-filter:blur(4px); }
.box-face.f1{ transform:translateZ(65px); }
.box-face.f2{ transform:rotateY(180deg) translateZ(65px); }
.box-face.f3{ transform:rotateY(90deg) translateZ(65px); }
.box-face.f4{ transform:rotateY(-90deg) translateZ(65px); }
.box-face.f5{ transform:rotateX(90deg) translateZ(65px); }
.box-face.f6{ transform:rotateX(-90deg) translateZ(65px); }
@keyframes spin{ from{ transform:rotateY(0) rotateX(8deg);} to{ transform:rotateY(360deg) rotateX(8deg);} }

.mem-orbit{ position:absolute; inset:0; }
.mem-obj{ position:absolute; width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.5rem; cursor:pointer; border:1px solid var(--panel-border); background:var(--panel-strong); animation:bob 4.5s ease-in-out infinite; transition:transform .25s, border-color .25s; will-change:transform; }
.mem-obj:hover{ transform:scale(1.14); border-color:var(--gold); }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-12px);} }

#gallery-frame{ width:100%; max-width:640px; aspect-ratio:4/3; border-radius:20px; overflow:hidden; position:relative; touch-action:pan-y; }
.gallery-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.25);
  background:rgba(6,5,13,0.4);
  backdrop-filter:blur(6px);
  color:var(--text); font-size:1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, border-color .2s;
}
.gallery-arrow:hover{ background:rgba(6,5,13,0.65); border-color:var(--gold-soft); }
.gallery-arrow.prev{ left:12px; }
.gallery-arrow.next{ right:12px; }
.slide{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; padding:2rem; text-align:center; opacity:0; transition:opacity 1.1s ease; background-color:#0b0919; background-size:contain; background-repeat:no-repeat; background-position:center; }
.slide.active{ opacity:1; }
.slide-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,5,13,0.1), rgba(6,5,13,0.75)); }
.slide-icon{ font-size:2.4rem; margin-bottom:1rem; position:relative; }
.slide-caption{ font-family:var(--serif); font-style:italic; font-size:1.2rem; color:var(--text); max-width:80%; position:relative; }
#gallery-dots{ display:flex; gap:8px; margin-top:1.4rem; }
#gallery-dots span{ width:6px; height:6px; border-radius:50%; background:var(--panel-border); transition:background .3s, transform .3s; }
#gallery-dots span.active{ background:var(--gold); transform:scale(1.3); }

#letter-card{ width:100%; max-width:640px; padding:2.6rem 2.4rem; min-height:340px; }
#letter-text{ font-family:var(--serif); font-size:clamp(1.05rem,2vw,1.3rem); line-height:1.8; color:var(--text); white-space:pre-wrap; }
.cursor{ display:inline-block; width:2px; height:1.1em; background:var(--gold); vertical-align:-2px; animation:blinkcursor 1s step-end infinite; }
@keyframes blinkcursor{ 50%{ opacity:0; } }

#finale-canvas{ position:fixed; inset:0; z-index:2; pointer-events:none; }
#finale-msg{ position:relative; z-index:3; text-align:center; }

#giftbox-wrap{ display:flex; flex-direction:column; align-items:center; }
#giftbox{ width:170px; height:130px; position:relative; cursor:pointer; margin-bottom:2.2rem; transition:transform .3s; }
#giftbox:hover{ transform:translateY(-4px); }
#giftbox .base{ position:absolute; bottom:0; width:100%; height:95px; background:linear-gradient(135deg, var(--violet-deep), var(--violet)); border-radius:10px; box-shadow:0 20px 50px rgba(155,140,246,0.25); }
#giftbox .lid{ position:absolute; top:18px; width:100%; height:36px; background:linear-gradient(135deg, var(--gold), #f2d9a8); border-radius:8px; transform-origin:top left; transition:transform .9s cubic-bezier(.2,.9,.3,1.3), opacity .9s; }
#giftbox .ribbon-v{ position:absolute; left:50%; top:0; bottom:0; width:14px; margin-left:-7px; background:rgba(255,255,255,0.65); }
#giftbox .ribbon-h{ position:absolute; top:44px; left:0; right:0; height:14px; background:rgba(255,255,255,0.65); }
#giftbox.open .lid{ transform:rotateX(-115deg) translateY(-6px); opacity:0.85; }
#giftbox-glow{ position:absolute; inset:-30px; border-radius:50%; background:radial-gradient(circle, rgba(232,192,125,0.35), transparent 70%); opacity:0; transition:opacity .8s; }
#giftbox.open ~ #giftbox-glow{ opacity:1; }
#gift-message{ max-width:520px; text-align:center; opacity:0; transform:translateY(16px); transition:opacity .9s ease, transform .9s ease; }
#gift-message.show{ opacity:1; transform:translateY(0); }
#gift-message p{ font-family:var(--serif); font-size:1.2rem; line-height:1.7; color:var(--text); }
#gift-message .signature{ margin-top:1.3rem; color:var(--gold); font-style:italic; }

#modal-overlay{ position:fixed; inset:0; z-index:100; background:rgba(4,3,10,0.78); backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; padding:1.5rem; }
#modal-overlay.show{ display:flex; }
#modal-box{ max-width:440px; width:100%; padding:2.2rem 2rem; text-align:center; position:relative; transform:scale(0.92); opacity:0; transition:transform .3s ease, opacity .3s ease; }
#modal-overlay.show #modal-box{ transform:scale(1); opacity:1; }
#modal-box .modal-icon{ font-size:2.2rem; margin-bottom:0.8rem; }
#modal-box h3{ font-size:1.4rem; margin-bottom:0.8rem; }
#modal-box p{ color:var(--muted); line-height:1.65; font-size:0.98rem; }
#modal-close{ position:absolute; top:12px; right:14px; background:none; border:none; color:var(--muted); font-size:1.2rem; cursor:pointer; transition:color .2s; }
#modal-close:hover{ color:var(--text); }

footer{ position:relative; z-index:1; text-align:center; padding:3rem 1rem 4rem; color:var(--muted); font-size:0.8rem; letter-spacing:0.06em; }

@media (max-width:480px){
  section{ min-height:100svh; padding:5.5rem 1rem; }
  #landing-btn{ margin-top:2.4rem; max-width:calc(100vw - 2rem); padding:0.95rem 1.25rem; line-height:1.25; }
  #assistant-panel{ padding:1.1rem; }
  #letter-card{ padding:1.7rem 1.3rem; min-height:300px; }
  #box-scene{ height:340px; }
  #modal-overlay{ padding:1rem; }
}