:root {
  --navy:#103f53;
  --teal:#16768a;
  --sky:#dff4f5;
  --paper:#fffdf6;
  --ink:#283536;
  --pink:#ee7c9c;
  --green:#6b9f67;
  --gold:#d7b35c;
  --shadow:0 18px 55px rgba(16,63,83,.28);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;color:var(--ink);background:
radial-gradient(circle at 10% 10%,rgba(255,255,255,.7),transparent 30%),
linear-gradient(160deg,#dff4f5,#f8f5e9 65%,#f2e4d1)}
button{font:inherit}
.app-shell{min-height:100vh;padding:calc(12px + env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column}
.app-header{max-width:620px;width:100%;margin:0 auto 10px;display:flex;align-items:center;justify-content:space-between}
.eyebrow{margin:0;color:var(--teal);font-size:11px;font-weight:700;letter-spacing:.08em}
.app-header h1{margin:2px 0 0;font-size:20px;color:var(--navy)}
.icon-btn{border:1px solid rgba(16,63,83,.25);background:rgba(255,255,255,.68);color:var(--navy);width:38px;height:38px;border-radius:50%;font-weight:800}
.book-stage{position:relative;flex:1;display:grid;place-items:center;perspective:1600px;min-height:520px}
.book{position:relative;width:min(92vw,430px);height:min(68vh,650px);max-height:650px;min-height:500px;transform-style:preserve-3d}
.page{position:absolute;inset:0;background:var(--paper);border-radius:5px 18px 18px 5px;overflow:hidden;box-shadow:var(--shadow);opacity:0;pointer-events:none;transform-origin:left center;transform:rotateY(0deg) translateZ(0);transition:opacity .15s linear}
.page::before{content:"";position:absolute;inset:0;background:
linear-gradient(90deg,rgba(50,32,10,.12),transparent 7%,transparent 92%,rgba(50,32,10,.06));
pointer-events:none;z-index:2}
.page.active{opacity:1;pointer-events:auto;z-index:4}
.page.turn-next{animation:turnNext .72s cubic-bezier(.55,.02,.18,1) forwards;z-index:8}
.page.turn-prev{animation:turnPrev .72s cubic-bezier(.55,.02,.18,1) forwards;z-index:8}
@keyframes turnNext{
  0%{transform:rotateY(0deg);filter:brightness(1)}
  46%{filter:brightness(.88)}
  100%{transform:rotateY(-180deg);filter:brightness(.72)}
}
@keyframes turnPrev{
  0%{transform:rotateY(-180deg);filter:brightness(.72)}
  54%{filter:brightness(.9)}
  100%{transform:rotateY(0deg);filter:brightness(1)}
}
.page-inner{height:100%;padding:34px 28px 30px;display:flex;flex-direction:column;position:relative;z-index:1}
.chapter{margin:0 0 8px;color:var(--pink);font-weight:800;font-size:12px;letter-spacing:.12em}
.page h2{font-size:clamp(25px,7vw,38px);line-height:1.25;margin:0 0 16px;color:var(--navy)}
.body-copy{font-size:clamp(15px,4vw,19px);line-height:1.85;margin:16px 0 0}
.body-copy.compact{font-size:15px;line-height:1.65}
.page-number{position:absolute;right:18px;bottom:12px;font-size:11px;color:#778}
.cover-page{background:#0e4154;color:#fff}
.cover-page::before{background:linear-gradient(180deg,rgba(6,29,39,.05),rgba(6,29,39,.75))}
.cover-art{position:absolute;inset:0;background:url("assets/poster_concept.png") center/cover no-repeat;opacity:.78}
.cover-copy{position:absolute;left:24px;right:24px;bottom:45px;z-index:3;text-shadow:0 2px 14px rgba(0,0,0,.45)}
.cover-copy .small-label{font-size:13px;letter-spacing:.18em}
.cover-copy h2{color:#fff;font-size:clamp(40px,11vw,60px);margin:0 0 10px;line-height:1.08}
.cover-copy .lead{font-size:17px;font-weight:700}
.primary,.secondary,.ai-button{border:0;border-radius:999px;padding:13px 20px;font-weight:800;cursor:pointer}
.primary{background:#fff;color:var(--navy)}
.secondary{background:var(--navy);color:#fff}
.hero-image{height:44%;border-radius:20px;margin:4px 0 8px;background-position:center;background-size:cover;box-shadow:0 10px 26px rgba(16,63,83,.14)}
.hero-image.world{background-image:url("assets/world_reference.jpg")}
.character-page{background:linear-gradient(165deg,#fffdf5,#eaf6ee)}
.speech{background:#fff;border:2px solid var(--navy);border-radius:24px;padding:20px;margin-top:12px;box-shadow:0 10px 25px rgba(16,63,83,.12);font-size:18px;line-height:1.7}
.rabbit-mark{font-size:100px;align-self:flex-end;margin-top:auto;filter:drop-shadow(0 8px 8px rgba(0,0,0,.1))}
.note{font-size:11px;color:#6f7775;margin-top:auto}
.cycle-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:8px 0 14px}
.cycle-card{min-height:112px;border:0;border-radius:20px;background:linear-gradient(145deg,#f8f4dd,#e5f3e5);box-shadow:0 6px 16px rgba(16,63,83,.1);padding:12px;color:var(--navy)}
.cycle-card b{display:block;font-size:24px;margin-bottom:6px}.cycle-card span{font-size:12px}
.interaction-message{background:#eef7f8;border-left:4px solid var(--teal);padding:12px;border-radius:8px;font-size:14px;line-height:1.5}
.theme-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.theme-list span{display:grid;place-items:center;min-height:50px;border-radius:14px;background:#edf1ed;color:#667;font-weight:800;font-size:13px}
.theme-list .open-theme{background:#f5dfe7;color:#9d3153}
.map-preview{flex:1;min-height:250px;background:url("assets/map_reference.jpg") center/cover no-repeat;border-radius:18px;box-shadow:0 8px 22px rgba(16,63,83,.14)}
.grape-page{background:linear-gradient(#fffdf8,#f6edf3)}
.grape-image{height:42%;background:url("assets/grape_reference.jpg") center/cover no-repeat;border-radius:20px;box-shadow:0 8px 22px rgba(16,63,83,.14)}
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0 18px}
.feature{border:0;border-radius:18px;background:#eff7f4;min-height:100px;font-size:28px;color:var(--navy)}
.feature span{display:block;font-size:13px;font-weight:800;margin-top:8px}
.ai-button{background:linear-gradient(135deg,var(--teal),var(--navy));color:#fff;font-size:17px}
.end-page{background:linear-gradient(165deg,#fffdf5,#e6f5ef)}
.end-page .page-inner{justify-content:center}
.end-actions{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
.prototype-stamp{margin-top:40px;font-size:11px;letter-spacing:.12em;color:#71807a}
.book-nav{max-width:620px;width:100%;margin:12px auto 0;display:flex;align-items:center;gap:12px}
.nav-btn{border:0;background:var(--navy);color:#fff;border-radius:999px;padding:11px 16px;font-weight:800;white-space:nowrap}
.nav-btn:disabled{opacity:.35}
.progress-wrap{height:8px;background:rgba(16,63,83,.14);border-radius:999px;flex:1;overflow:hidden}
.progress-bar{height:100%;width:12.5%;background:linear-gradient(90deg,var(--pink),var(--teal));border-radius:999px;transition:width .35s ease}
.swipe-hint{text-align:center;color:#667;font-size:11px;margin:8px 0 0}
dialog{border:0;padding:0;background:transparent}
dialog::backdrop{background:rgba(10,35,45,.55)}
.modal-card{width:min(88vw,420px);background:#fff;border-radius:20px;padding:28px;position:relative;box-shadow:var(--shadow)}
.modal-card h2{color:var(--navy);margin-top:0}
.modal-card p{line-height:1.7}
.modal-close{position:absolute;right:12px;top:10px;border:0;background:transparent;font-size:28px;color:var(--navy)}
@media (min-width:760px){
  .book{width:460px;height:650px}
  .app-header h1{font-size:24px}
}
@media (max-height:700px){
  .book-stage{min-height:460px}
  .book{height:500px;min-height:460px}
  .page-inner{padding-top:24px}
  .body-copy{font-size:14px;line-height:1.55}
  .page h2{font-size:25px}
}
@media (prefers-reduced-motion:reduce){
  .page.turn-next,.page.turn-prev{animation-duration:.15s}
}