:root { --bg: #fff; --fg: #111; --muted: #666; --accent: #111; --ink-gold: #d4af37; }
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background: var(--bg); color: var(--fg); font-family: "Noto Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial; line-height:1.6; }
.section { position:relative; padding: 80px 20px; }
.content { max-width: 1100px; margin: 0 auto; }
.content.narrow { max-width: 760px; }
h1,h2,h3,h4,h5 { line-height:1.2; margin:0 0 16px; font-weight:700; }
p { color: var(--fg); opacity: 0.9; }
.primary, .ghost-btn { border:1px solid #111; background:#111; color:#fff; padding:10px 16px; border-radius:8px; cursor:pointer; transition: transform .12s ease, opacity .2s; }
.ghost-btn { background: transparent; color:#111; }
.primary:active, .ghost-btn:active { transform: scale(0.98); }
.site-header { position: sticky; top:0; z-index:10; backdrop-filter: saturate(1.2) blur(8px); background: rgba(255,255,255,0.7); display:flex; justify-content:space-between; align-items:center; padding:12px 20px; }
.site-header a { color:#111; text-decoration:none; margin-left:16px; opacity:0.8; }
.site-header a:hover { opacity:1; }
.logo { font-weight:700; }

.hero { min-height: 90vh; display:flex; align-items:center; justify-content:center; }
.bg-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.overlay { position:absolute; inset:0; background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.35)); }
.hero .content { position:relative; color:#fff; text-align:center; }
.hero h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.hero p { color:#fff; opacity:.95; }

.split { display:grid; grid-template-columns: 1.2fr 1fr; gap:24px; align-items:center; }
.split .text .reflect { margin-top:16px; color:#111; font-weight:600; }

.jars { display:flex; gap:20px; justify-content:center; }
.jar { width:160px; height:240px; border:2px solid #111; border-radius:16px 16px 8px 8px; position:relative; overflow:hidden; }
.jar .label { position:absolute; top:8px; left:8px; font-size:14px; background:#fff; padding:2px 6px; border-radius:6px; border:1px solid #111; }
.water { position:absolute; bottom:0; left:0; width:100%; height:0%; background: linear-gradient(180deg, rgba(136,0,255,.25), rgba(212,175,55,.55)); transition: height .4s ease; }
.drops-area { margin-top:12px; text-align:center; }
.drop { display:inline-flex; justify-content:center; align-items:center; width:36px; height:36px; border-radius:50%; border:1px solid #111; background:#fff; font-size:24px; margin: 0 6px; touch-action:none; }
.hint { font-size:12px; color: var(--muted); }

.cosmos { background: url('https://images.unsplash.com/photo-1444703686981-a3abbc4d4fe3?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat; color:#fff; }
.cosmos .content { position:relative; background: rgba(0,0,0,.45); padding:24px; border-radius:16px; }
.quiz label { display:block; margin:10px 0; }
.quiz select { width:100%; padding:8px; border:1px solid #111; border-radius:8px; background:#fff; }
.result { margin-top:12px; font-weight:600; }

.play .toolbar { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
#canvas { width:100%; max-width:100%; background:#fff; border:2px solid #111; border-radius:12px; touch-action:none; }
.gallery { margin-top:12px; display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:10px; }
.gallery img { width:100%; border:1px solid #111; border-radius:8px; }

.elegant .grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap:24px; }
.bank .lists { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.bank ul { list-style:none; padding:0; margin:0 0 8px; }
.bank li { display:flex; justify-content:space-between; align-items:center; border:1px solid #111; border-radius:8px; padding:6px 8px; margin:6px 0; }
.bank input { width:100%; padding:8px; border:1px solid #111; border-radius:8px; }
.balance { margin-top:10px; padding:10px; border:1px dashed #111; border-radius:8px; display:flex; justify-content:space-between; align-items:center; }
.balance .value { font-size:22px; font-weight:700; }
.orchestra { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.instrument { border:1px solid #111; background:#fff; padding:8px 12px; border-radius:999px; cursor:pointer; }

.dusk { background: url('/dreamina-2025-07-18-1004 - Copy.png') center/cover no-repeat; color:#fff; }
.dusk .content { background: rgba(0,0,0,.45); padding:24px; border-radius:16px; }
.well { margin-top:8px; }
.well-area { position:relative; height:280px; background: radial-gradient(circle at 50% 85%, rgba(255,255,255,.1), rgba(0,0,0,.6)); border:1px solid #fff; border-radius:12px; overflow:hidden; }
.word { position:absolute; color:#fff; opacity:.9; white-space:nowrap; pointer-events:none; }

.media-full { position:relative; padding:0; min-height:70vh; display:grid; place-items:center; }
.media-full .media { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.media-full .media-caption { position:relative; z-index:1; background:rgba(0,0,0,.4); color:#fff; padding:8px 12px; border-radius:8px; }

.side-illus { width:100%; border:1px solid #111; border-radius:12px; margin-bottom:12px; background:#fff; }
.side-illus.wide { max-height:320px; object-fit:cover; }

.site-footer { padding:24px 20px; text-align:center; color:#555; border-top:1px solid #eee; }

#intro-overlay { position:fixed; inset:0; background:#fff; display:grid; place-items:center; z-index:999; overflow:hidden; }
#intro-overlay .intro-bg,
#intro-overlay .intro-dim { position:absolute; inset:0; }
#intro-overlay .intro-bg { width:100%; height:100%; object-fit:cover; }
#intro-overlay .intro-dim { background: rgba(0,0,0,0.25); }
#intro-overlay .intro-title, #intro-overlay #enter-btn, #intro-overlay .ink-circle { position:relative; z-index:1; }
.ink-circle { position:absolute; width:40vmin; height:40vmin; border-radius:50%; background: radial-gradient(circle at 40% 40%, rgba(128,0,128,.15), rgba(212,175,55,.3)); filter: blur(10px); transform: scale(0); }
.intro-title h1 {
  background: #fff;
  color: #111;
  padding: 8px 12px;
  border-radius: 8px;
  display: inline-block;
}
#enter-btn { position:absolute; bottom:10%; left:50%; transform: translateX(-50%); }

#lightbox { position:fixed; inset:0; background:rgba(0,0,0,.8); display:none; align-items:center; justify-content:center; z-index:1000; }
#lightbox.active { display:flex; }
#lightbox .lb-content > * { max-width:90vw; max-height:85vh; border-radius:12px; }
.lb-close { position:absolute; top:16px; right:16px; border:1px solid #fff; background:transparent; color:#fff; border-radius:8px; padding:6px 10px; }

.narration { background:#000; color:#fff; }
.stage-wrap { position:relative; border:1px solid #fff; border-radius:12px; overflow:hidden; }
#stage3d { width:100%; height:min(62vh, 600px); background:#000; }
.controls { display:flex; gap:10px; justify-content:center; padding:10px; background:rgba(255,255,255,0.04); }
.subtitles { position:absolute; left:0; right:0; bottom:8px; text-align:center; padding:8px 12px; }
.subtitles::before { content:""; position:absolute; inset:auto 10% 0 10%; height:100%; filter: blur(8px); }

#start-fab { position: fixed; right:16px; bottom:16px; z-index:50; padding:10px 14px; }

@media (max-width: 900px){
  .split { grid-template-columns: 1fr; }
  .elegant .grid-2 { grid-template-columns: 1fr; }
  .site-header nav { display:none; }
}