:root {
  --sand:       #f0e8dc;
  --sand-deep:  #e2d5c3;
  --dust:       #c9b99e;
  --rose-pale:  #e8d5cc;
  --rose-mid:   #c9a090;
  --rose-deep:  #9e6d62;
  --rose-ink:   #6b3f37;
  --terracotta: #b5735a;
  --ink:        #2e1f1a;
  --ink-soft:   #5c4840;
  --ink-ghost:  rgba(46,31,26,0.38);
  --white:      #faf7f3;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  background: var(--sand);
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  min-height: 100vh;
  overflow-x: hidden;
}

body::after {
  content:'';
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events:none; z-index:999;
}

/* PARTICLES */
.particle-field { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.particle {
  position:absolute; opacity:0;
  animation: particle-float var(--pd) ease-in-out var(--delay) infinite;
  font-size:var(--ps); user-select:none;
}
@keyframes particle-float {
  0%   { opacity:0;   transform:translateY(0) rotate(0deg) scale(0.8); }
  15%  { opacity:0.5; }
  85%  { opacity:0.25; }
  100% { opacity:0;   transform:translateY(-90px) rotate(25deg) scale(1.1); }
}

/* LANDING */
#landing {
  min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:60px 24px; text-align:center;
  position:relative; z-index:1;
}

.landing-crescent {
  font-size:24px; opacity:0.5; display:inline-block;
  margin-bottom:40px; cursor:pointer;
  animation:crescent-drift 18s ease-in-out infinite;
  user-select:none;
  transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s;
  position:relative;
}
.landing-crescent:hover { transform:scale(1.35) rotate(-12deg) !important; opacity:0.85; }

.moon-tooltip {
  position:absolute; bottom:-20px; left:50%;
  transform:translateX(-50%);
  font-family:'DM Sans',sans-serif; font-size:9px;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--dust); white-space:nowrap;
  opacity:0; transition:opacity 0.4s 0.3s; pointer-events:none;
}
.landing-crescent:hover .moon-tooltip { opacity:1; }

@keyframes crescent-drift {
  0%   { transform:translateX(-6px) rotate(-4deg); }
  30%  { transform:translateX(5px) rotate(3deg); }
  60%  { transform:translateX(-3px) rotate(-2deg); }
  100% { transform:translateX(-6px) rotate(-4deg); }
}

.site-name {
  font-family:'Cormorant',serif; font-weight:300;
  font-size:clamp(36px,8vw,64px); color:var(--ink);
  letter-spacing:0.06em; line-height:1; margin-bottom:10px;
}

.site-tagline {
  font-family:'DM Sans',sans-serif; font-weight:200;
  font-size:13px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--dust); margin-bottom:72px;
}

.landing-question {
  font-family:'Cormorant',serif; font-style:italic; font-weight:300;
  font-size:clamp(20px,4vw,28px); color:var(--ink-soft);
  line-height:1.5; margin-bottom:56px; max-width:420px;
  min-height:80px; display:flex; align-items:center; justify-content:center;
}
.prompt-text { transition:opacity 0.7s ease,transform 0.7s ease; }
.prompt-text.fading { opacity:0; transform:translateY(6px); }

.landing-btns { display:flex; flex-direction:column; gap:14px; width:100%; max-width:300px; }

.land-btn {
  background:var(--white); border:1px solid var(--sand-deep);
  border-radius:2px; padding:18px 28px;
  font-family:'DM Sans',sans-serif; font-weight:300; font-size:16px;
  color:var(--ink-soft); letter-spacing:0.04em; cursor:pointer;
  text-align:left; display:flex; align-items:center; gap:14px;
  transition:all 0.3s ease;
}
.land-btn:hover { background:var(--rose-pale); border-color:var(--rose-mid); color:var(--ink); transform:translateX(4px); }
.land-btn .btn-icon { font-size:18px; flex-shrink:0; }
.land-btn .btn-sub { font-size:11px; color:var(--ink-ghost); display:block; margin-top:2px; font-weight:300; letter-spacing:0.05em; }
.land-btn:hover .btn-icon { animation:icon-wiggle 0.4s ease; }

@keyframes icon-wiggle {
  0%   { transform:rotate(0deg) scale(1); }
  25%  { transform:rotate(-12deg) scale(1.2); }
  50%  { transform:rotate(8deg) scale(1.1); }
  75%  { transform:rotate(-4deg) scale(1.05); }
  100% { transform:rotate(0deg) scale(1); }
}

.landing-footer {
  position:absolute; bottom:28px;
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--dust); opacity:0.6;
}

/* WAX SEAL */
.wax-seal-overlay {
  display:none; position:fixed; inset:0;
  align-items:center; justify-content:center;
  z-index:200; pointer-events:none;
}
.wax-seal-overlay.show { display:flex; pointer-events:all; }
.wax-seal {
  font-size:80px;
  animation:seal-stamp 0.6s cubic-bezier(0.34,1.56,0.64,1) both;
  filter:drop-shadow(0 8px 24px rgba(158,109,98,0.5));
}
@keyframes seal-stamp {
  0%   { transform:scale(3) rotate(-20deg); opacity:0; }
  60%  { transform:scale(0.9) rotate(5deg); opacity:1; }
  80%  { transform:scale(1.05) rotate(-2deg); }
  100% { transform:scale(1) rotate(0deg); opacity:1; }
}
.wax-seal-text {
  position:absolute; bottom:calc(50% - 80px);
  font-family:'Cormorant',serif; font-style:italic; font-size:16px;
  color:var(--ink-soft); opacity:0;
  animation:seal-text-appear 0.4s ease 0.5s both; letter-spacing:0.06em;
}
@keyframes seal-text-appear {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ENVELOPE */
.envelope-unfold {
  display:block; margin-bottom:36px; text-align:center;
  animation:unfold-envelope 1.2s cubic-bezier(0.22,1,0.36,1) both;
  transform-origin:top center;
}
@keyframes unfold-envelope {
  0%   { opacity:0; transform:perspective(600px) rotateX(-90deg) translateY(-30px); }
  60%  { opacity:1; transform:perspective(600px) rotateX(8deg); }
  100% { opacity:1; transform:perspective(600px) rotateX(0deg) translateY(0); }
}
.envelope-icon {
  font-size:36px; display:block; margin:0 auto 8px;
  animation:envelope-open 1.5s ease 0.4s both;
}
@keyframes envelope-open {
  0%   { transform:scale(0.6) rotate(-10deg); filter:blur(2px); }
  50%  { transform:scale(1.15) rotate(3deg); filter:blur(0); }
  100% { transform:scale(1) rotate(0deg); }
}

/* INK FLOURISH */
.ink-flourish {
  display:flex; align-items:center; justify-content:center;
  gap:12px; margin:8px 0 32px; opacity:0.35; user-select:none;
}
.ink-flourish span { font-family:'Cormorant',serif; font-size:18px; color:var(--rose-mid); }
.ink-flourish .line {
  flex:1; height:1px;
  background:linear-gradient(to right,transparent,var(--rose-pale),transparent);
  max-width:80px;
}

/* CURSOR TRAIL */
.cursor-trail {
  position:fixed; pointer-events:none; z-index:9998;
  opacity:0; animation:trail-fade 0.8s ease both; user-select:none;
}
@keyframes trail-fade {
  0%   { opacity:0.7; transform:scale(1) translateY(0); }
  100% { opacity:0;   transform:scale(0.3) translateY(-20px); }
}

/* CHAR HINT */
.char-hint {
  text-align:right; font-size:11px; color:var(--ink-ghost);
  margin-top:6px; letter-spacing:0.06em; font-style:italic;
  transition:color 0.3s; min-height:16px;
}

/* FLASH */
.flash-overlay {
  position:fixed; inset:0; background:white;
  opacity:0; pointer-events:none; z-index:100; transition:opacity 0.1s;
}
.flash-overlay.flash { opacity:1; }

/* PAGE STRUCTURE */
.page { display:none; min-height:100vh; flex-direction:column; }
.page.visible { display:flex; }

.page-header {
  padding:32px 36px 0; display:flex;
  align-items:center; justify-content:space-between;
}

.back-btn {
  font-family:'DM Sans',sans-serif; font-weight:300; font-size:13px;
  color:var(--dust); letter-spacing:0.1em; background:none; border:none;
  cursor:pointer; display:flex; align-items:center; gap:6px;
  transition:color 0.2s; padding:0;
}
.back-btn:hover { color:var(--ink-soft); }

.page-wordmark {
  font-family:'Cormorant',serif; font-weight:300;
  font-size:18px; color:var(--dust); letter-spacing:0.08em;
}

.page-body {
  flex:1; padding:48px 36px 80px;
  max-width:640px; margin:0 auto; width:100%;
}

.page-title {
  font-family:'Cormorant',serif; font-weight:300;
  font-size:clamp(28px,5vw,38px); color:var(--ink);
  line-height:1.2; margin-bottom:8px;
}

.page-hint {
  font-size:14px; color:var(--ink-ghost); font-weight:300;
  margin-bottom:48px; line-height:1.6; font-style:italic;
}

/* WRITE LETTER */
.field-group { margin-bottom:28px; }
.field-label {
  display:block; font-size:11px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--dust); margin-bottom:8px;
}
.field-input {
  width:100%; background:none; border:none;
  border-bottom:1px solid var(--sand-deep);
  font-family:'DM Sans',sans-serif; font-weight:300; font-size:17px;
  color:var(--ink); padding:6px 0 10px; outline:none;
  transition:border-color 0.3s; letter-spacing:0.01em;
}
.field-input::placeholder { color:var(--ink-ghost); }
.field-input:focus { border-bottom-color:var(--rose-mid); }

.type-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:36px; }
.type-chip {
  font-family:'DM Sans',sans-serif; font-weight:300; font-size:12px;
  letter-spacing:0.08em; color:var(--ink-soft); background:var(--white);
  border:1px solid var(--sand-deep); border-radius:20px;
  padding:7px 16px; cursor:pointer; transition:all 0.2s;
}
.type-chip:hover { border-color:var(--rose-mid); color:var(--rose-deep); }
.type-chip.selected { background:var(--rose-pale); border-color:var(--rose-mid); color:var(--rose-ink); }

.letter-area {
  width:100%; background:var(--white); border:none; border-radius:2px;
  font-family:'DM Sans',sans-serif; font-weight:300; font-size:17px;
  line-height:1.9; color:var(--ink); padding:24px 28px;
  resize:none; outline:none; min-height:280px;
  box-shadow:0 1px 0 var(--sand-deep),0 2px 0 var(--dust),0 8px 30px rgba(0,0,0,0.04);
  transition:box-shadow 0.3s; letter-spacing:0.01em;
}
.letter-area:focus { box-shadow:0 1px 0 var(--rose-mid),0 2px 0 var(--rose-mid),0 8px 30px rgba(0,0,0,0.06); }
.letter-area::placeholder { color:var(--ink-ghost); font-style:italic; }

.motif-row { display:flex; gap:10px; margin:20px 0 32px; flex-wrap:wrap; }
.motif-btn {
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--sand-deep); background:var(--white);
  font-size:17px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.2s;
}
.motif-btn:hover { border-color:var(--rose-mid); transform:scale(1.1); }
.motif-btn.selected { border-color:var(--rose-deep); background:var(--rose-pale); }

.quote-block { margin:32px 0 0; padding:18px 20px; border-left:2px solid var(--rose-pale); }
.quote-block p {
  font-family:'Cormorant',serif; font-style:italic; font-weight:300;
  font-size:16px; color:var(--ink-soft); line-height:1.7; opacity:0.7;
}
.quote-block cite {
  font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--dust); display:block; margin-top:6px;
}

.action-primary {
  background:var(--rose-deep); color:var(--white); border:none;
  border-radius:2px; font-family:'DM Sans',sans-serif; font-weight:300;
  font-size:14px; letter-spacing:0.12em; text-transform:uppercase;
  padding:16px 40px; cursor:pointer; transition:all 0.25s ease;
  margin-top:32px; display:inline-block;
}
.action-primary:hover { background:var(--rose-ink); transform:translateY(-1px); }
.action-primary:active { transform:translateY(0); }

.result-strip {
  display:none; margin-top:24px; padding:20px 24px;
  background:var(--white); border-radius:2px; border:1px solid var(--sand-deep);
}
.result-strip.visible { display:block; }
.result-strip p {
  font-family:'Cormorant',serif; font-style:italic; font-size:17px;
  color:var(--ink-soft); margin-bottom:16px; line-height:1.6;
}
.result-actions { display:flex; gap:10px; flex-wrap:wrap; }
.action-ghost {
  font-family:'DM Sans',sans-serif; font-weight:300; font-size:13px;
  letter-spacing:0.1em; color:var(--rose-deep); background:none;
  border:1px solid var(--rose-pale); border-radius:2px;
  padding:10px 22px; cursor:pointer; transition:all 0.2s;
}
.action-ghost:hover { background:var(--rose-pale); border-color:var(--rose-mid); }

/* VOICE */
.voice-center { display:flex; flex-direction:column; align-items:center; padding-top:20px; text-align:center; }

.voice-ring-wrap { position:relative; width:120px; height:120px; margin-bottom:28px; }
.voice-ring {
  width:120px; height:120px; border-radius:50%;
  border:1px solid var(--sand-deep); background:var(--white);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all 0.3s ease; position:relative; z-index:1;
}
.voice-ring:hover { border-color:var(--rose-mid); background:var(--rose-pale); }
.voice-ring.recording { border-color:var(--terracotta); border-width:2px; }
.voice-ring.recording::before {
  content:''; position:absolute; inset:-8px; border-radius:50%;
  border:1px solid var(--terracotta); opacity:0.4;
  animation:ring-pulse 1.5s ease-out infinite;
}
.voice-ring.recording::after {
  content:''; position:absolute; inset:-18px; border-radius:50%;
  border:1px solid var(--terracotta); opacity:0.2;
  animation:ring-pulse 1.5s ease-out 0.3s infinite;
}
@keyframes ring-pulse {
  0%   { transform:scale(0.95); opacity:0.5; }
  100% { transform:scale(1.1);  opacity:0; }
}
.voice-icon { font-size:32px; transition:all 0.3s; }
.voice-ring.recording .voice-icon { font-size:22px; }

.voice-timer {
  font-family:'Cormorant',serif; font-weight:300; font-size:40px;
  color:var(--ink); letter-spacing:0.08em; min-height:52px; line-height:1.2;
}
.voice-hint { font-size:13px; color:var(--ink-ghost); letter-spacing:0.08em; margin-top:6px; margin-bottom:32px; }
.voice-limit { font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--dust); margin-bottom:36px; }

.playback-strip {
  display:none; width:100%; max-width:400px; margin-top:16px;
  padding:20px 24px; background:#1a1208; border-radius:4px;
  border:1px solid #3a2a10; text-align:left;
  box-shadow:inset 0 2px 8px rgba(0,0,0,0.4),0 4px 20px rgba(0,0,0,0.15);
  position:relative;
}
.playback-strip::before {
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,0.015) 2px,rgba(255,255,255,0.015) 4px);
  border-radius:4px; pointer-events:none;
}
.playback-strip.visible { display:block; }
.vintage-player-label {
  font-family:'Cormorant',serif; font-style:italic; font-size:12px;
  letter-spacing:0.16em; color:rgba(201,150,42,0.7);
  margin-bottom:14px; text-align:center;
}
.playback-strip audio { width:100%; display:block; margin-top:4px; }

.voice-share-wrap {
  display:none; width:100%; max-width:400px; margin-top:20px;
  padding:20px 24px; background:var(--white);
  border:1px solid var(--sand-deep); border-radius:2px;
}
.share-instruction {
  font-size:11px; color:var(--ink-ghost); font-style:italic;
  margin-bottom:12px; line-height:1.5; letter-spacing:0.02em;
}

/* INSPIRATION SCRIPTS */
.scripts-section {
  width:100%; margin-bottom:36px;
  border:1px solid var(--sand-deep); border-radius:2px; overflow:hidden;
}
.scripts-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; cursor:pointer; background:var(--white);
  transition:background 0.2s; user-select:none;
}
.scripts-header:hover { background:var(--rose-pale); }
.scripts-label {
  font-family:'Cormorant',serif; font-style:italic;
  font-size:17px; color:var(--ink-soft); letter-spacing:0.02em;
}
.scripts-arrow { font-size:14px; color:var(--dust); transition:transform 0.3s ease; }
.scripts-arrow.open { transform:rotate(180deg); }
.scripts-list {
  display:none; padding:0 20px 20px;
  background:var(--white); border-top:1px solid var(--sand-deep);
}
.scripts-list.open { display:block; }
.scripts-note {
  font-size:12px; color:var(--ink-ghost); font-style:italic;
  letter-spacing:0.04em; padding:16px 0 12px;
}
.script-card {
  position:relative; padding:14px 16px; margin-bottom:8px;
  border:1px solid var(--sand-deep); border-radius:2px;
  cursor:pointer; transition:all 0.2s ease; background:var(--sand); overflow:hidden;
}
.script-card:hover { border-color:var(--rose-mid); background:var(--rose-pale); transform:translateX(3px); }
.script-card:last-child { margin-bottom:0; }
.script-card p {
  font-family:'Cormorant',serif; font-style:italic;
  font-size:15.5px; line-height:1.65; color:var(--ink-soft); pointer-events:none;
}
.script-copied {
  display:none; position:absolute; top:10px; right:12px;
  font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--rose-deep); font-family:'DM Sans',sans-serif; font-weight:300;
}
.script-card.copied .script-copied { display:block; }
.script-card.copied { border-color:var(--rose-mid); background:var(--rose-pale); }

/* PHOTO BOOTH */
.booth-wrap { display:flex; flex-direction:column; align-items:center; gap:20px; }
.viewfinder {
  width:100%; max-width:480px; aspect-ratio:4/3;
  background:var(--sand-deep); border-radius:2px;
  position:relative; overflow:hidden; border:1px solid var(--dust);
}
.viewfinder video, .viewfinder canvas { width:100%; height:100%; object-fit:cover; display:block; }
.viewfinder canvas { display:none; }
.booth-overlay {
  position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; flex-direction:column; gap:10px;
  background:var(--sand); transition:opacity 0.4s;
}
.booth-overlay-text { font-family:'Cormorant',serif; font-style:italic; font-size:18px; color:var(--ink-soft); opacity:0.6; }
.booth-overlay-sub { font-size:12px; color:var(--dust); letter-spacing:0.1em; }
.viewfinder-corner { position:absolute; width:18px; height:18px; border-color:var(--rose-mid); border-style:solid; opacity:0.5; }
.corner-tl { top:10px; left:10px; border-width:1px 0 0 1px; }
.corner-tr { top:10px; right:10px; border-width:1px 1px 0 0; }
.corner-bl { bottom:10px; left:10px; border-width:0 0 1px 1px; }
.corner-br { bottom:10px; right:10px; border-width:0 1px 1px 0; }

.booth-controls { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.booth-btn {
  font-family:'DM Sans',sans-serif; font-weight:300; font-size:13px;
  letter-spacing:0.1em; background:var(--white); border:1px solid var(--sand-deep);
  border-radius:2px; padding:12px 24px; cursor:pointer;
  color:var(--ink-soft); transition:all 0.2s;
}
.booth-btn:hover { border-color:var(--rose-mid); color:var(--ink); }
.booth-btn.primary { background:var(--rose-deep); border-color:var(--rose-deep); color:var(--white); }
.booth-btn.primary:hover { background:var(--rose-ink); }

.booth-send-wrap {
  width:100%; max-width:480px; padding:24px 28px;
  background:var(--white); border:1px solid var(--sand-deep);
  border-radius:2px; animation:fadeUp 0.4s ease both;
}

/* RECEIVED LETTER */
#receivedPage { min-height:100vh; display:none; flex-direction:column; }
#receivedPage.visible { display:flex; }
.recv-body-wrap { flex:1; padding:48px 36px 80px; max-width:580px; margin:0 auto; width:100%; }
.recv-tag { font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--dust); margin-bottom:40px; display:block; }
.recv-motif { font-size:28px; margin-bottom:28px; display:block; opacity:0.6; }
.recv-to { font-family:'Cormorant',serif; font-weight:300; font-size:22px; color:var(--ink-soft); margin-bottom:32px; }
.recv-to strong { color:var(--ink); font-weight:400; }
.recv-text { font-family:'DM Sans',sans-serif; font-weight:300; font-size:18px; line-height:2; color:var(--ink); white-space:pre-wrap; }
.recv-from { font-family:'Cormorant',serif; font-style:italic; font-size:19px; color:var(--ink-soft); text-align:right; margin-top:40px; }
.recv-divider { border:none; border-top:1px solid var(--sand-deep); margin:40px 0; }

/* ANIMATIONS */
.fade-in { animation:fadeUp 0.55s cubic-bezier(0.22,1,0.36,1) both; }
@keyframes fadeUp {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}

/* RESPONSIVE */
@media (max-width:480px) {
  .page-body { padding:36px 20px 60px; }
  .page-header { padding:24px 20px 0; }
  .letter-area { padding:18px 20px; }
  .recv-body-wrap { padding:36px 20px 60px; }
  .booth-send-wrap { padding:18px 20px; }
}