[hidden]{display:none!important}
:root{
  --stage:#0b0b0c;--ink:#121212;--paper:#fbfaf6;--mute:#8a8a8a;--line:#e7e4dc;
  --serif:'EB Garamond',Georgia,'Times New Roman',serif;--ui:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;--mono:'Space Mono','Courier New',monospace;
  --ph:600px;--pw:396px;
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--stage);color:#f2f2f2;font:300 15px/1.5 var(--ui);overflow:hidden;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:1.5px solid #fff;outline-offset:3px}
.glow{position:fixed;inset:0;pointer-events:none;background:radial-gradient(60% 55% at 50% 48%,rgba(255,255,255,.07),transparent 70%),radial-gradient(40% 30% at 50% 100%,rgba(255,255,255,.04),transparent 70%)}
.stars{position:fixed;inset:0;pointer-events:none}
.stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;opacity:.0;animation:tw 5s ease-in-out infinite}
@keyframes tw{50%{opacity:.55}}

/* top bar */
.bar{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:14px clamp(14px,3vw,28px);z-index:30;font-size:13px;color:#9a9a9a}
.bar .brand{letter-spacing:.3em;font-size:11.5px}
.bar .tools{display:flex;gap:8px;align-items:center}
.ibtn{border:1px solid #2c2c2c;background:rgba(255,255,255,.03);border-radius:999px;padding:7px 13px;font-size:12.5px;color:#d8d8d8;display:inline-flex;gap:8px;align-items:center}
.ibtn:hover{border-color:#777}
.ibtn.on{border-color:#e9e9e9;color:#fff}
.ibtn input{position:absolute;width:1px;height:1px;opacity:0}

/* stage */
.stage{position:fixed;inset:0;display:grid;place-items:center;padding:64px 16px 92px}
.book{position:relative;width:calc(var(--pw)*2);height:var(--ph);perspective:2600px;transition:transform .9s cubic-bezier(.645,.045,.355,1)}
.book.at-start{transform:translateX(calc(var(--pw)*-.5))}
.book.at-end{transform:translateX(calc(var(--pw)*.5))}
.leaf{position:absolute;left:50%;top:0;width:50%;height:100%;transform-origin:left center;transform-style:preserve-3d;transition:transform 1.05s cubic-bezier(.645,.045,.355,1)}
.leaf.flipped{transform:rotateY(-180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;background:var(--paper);color:var(--ink)}
.face.back{transform:rotateY(180deg)}
.face::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s}
.leaf.turning .face::after{opacity:1}
.face.front::after{background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(0,0,0,0) 40%,rgba(255,255,255,.12) 70%,rgba(0,0,0,.1))}
.face.back::after{background:linear-gradient(270deg,rgba(0,0,0,.28),rgba(0,0,0,0) 40%,rgba(255,255,255,.12) 70%,rgba(0,0,0,.1))}
.face.front{border-radius:0 6px 6px 0;box-shadow:inset 18px 0 22px -18px rgba(0,0,0,.35)}
.face.back{border-radius:6px 0 0 6px;box-shadow:inset -18px 0 22px -18px rgba(0,0,0,.35)}
.shadow{position:absolute;left:0;right:0;bottom:-26px;height:30px;background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.55),transparent 70%);filter:blur(6px)}

/* text page */
.tp{padding:calc(var(--ph)*.07) calc(var(--pw)*.12) calc(var(--ph)*.06);display:flex;flex-direction:column;height:100%;background:var(--paper) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.tp header{display:flex;justify-content:space-between;align-items:baseline;font:400 calc(var(--ph)*.016) var(--ui);letter-spacing:.32em;color:#9a958c;margin-bottom:calc(var(--ph)*.05)}
.tp header b{font:100 calc(var(--ph)*.05) var(--ui);letter-spacing:-.02em;color:#c9c4ba}
.tp .txt{font:400 calc(var(--ph)*.0295)/1.48 var(--serif);color:#1b1b1b;flex:1}
.tp .txt p{margin:0 0 .6em}
.tp .txt p:first-child::first-letter{float:left;font:400 calc(var(--ph)*.085)/.82 var(--serif);padding:.06em .08em 0 0;color:#111}
.tp footer{display:flex;justify-content:space-between;font:400 calc(var(--ph)*.017) var(--ui);color:#a39e94;letter-spacing:.12em}
.leaf .txt p{opacity:1}
.show .txt p{animation:rise .9s ease-out both}
.show .txt p:nth-child(2){animation-delay:.18s}.show .txt p:nth-child(3){animation-delay:.36s}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* image page */
.ip{position:relative;height:100%;background:#111}
.ip img{width:100%;height:100%;object-fit:cover;display:block;transform-origin:50% 40%}
.show .ip img{animation:kb 16s ease-in-out both}
@keyframes kb{from{transform:scale(1.0)}to{transform:scale(1.08) translate(-1%, -1%)}}
.ip .cap{position:absolute;left:0;right:0;bottom:0;padding:calc(var(--ph)*.05) calc(var(--pw)*.08) calc(var(--ph)*.035);background:linear-gradient(transparent,rgba(0,0,0,.55));color:#fff;font:400 calc(var(--ph)*.017) var(--ui);letter-spacing:.24em;display:flex;justify-content:space-between}

/* cover */
.cover{height:100%;background:#0a0a0a;color:#f4f4f4;position:relative;display:flex;flex-direction:column;padding:calc(var(--ph)*.06) calc(var(--pw)*.1)}
.cover .eb{display:flex;justify-content:space-between;font:400 calc(var(--ph)*.016) var(--ui);letter-spacing:.32em;color:#8f8f8f}
.cover .eb b{font:400 calc(var(--ph)*.018) var(--mono);letter-spacing:.04em;color:#e9e9e9}
.cover h1{font:100 calc(var(--ph)*.074)/.98 var(--ui);letter-spacing:-.03em;margin:calc(var(--ph)*.04) 0 0}
.cover h1 span{color:#7e7e7e}
.cover .arch{position:relative;margin:auto 0 0;height:calc(var(--ph)*.46);border-radius:calc(var(--pw)*.4) calc(var(--pw)*.4) 4px 4px;overflow:hidden;border:1px solid #2a2a2a}
.cover .arch img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;filter:grayscale(.15) contrast(1.05)}
.cover .by{display:flex;justify-content:space-between;align-items:center;margin-top:calc(var(--ph)*.03);font:400 calc(var(--ph)*.017) var(--ui);letter-spacing:.28em;color:#9a9a9a}
.cover .sg{width:calc(var(--ph)*.06);height:calc(var(--ph)*.06);border:1.5px solid #f2f2f2;border-radius:50%;display:grid;place-items:center;font:500 calc(var(--ph)*.02) var(--ui);letter-spacing:0;color:#fff}
.cover .tap{position:absolute;left:50%;bottom:calc(var(--ph)*.2);transform:translateX(-50%);font:400 calc(var(--ph)*.018) var(--ui);letter-spacing:.24em;color:#fff;background:rgba(10,10,10,.65);border:1px solid #444;padding:8px 16px;border-radius:999px;animation:pulse 2.2s ease-in-out infinite;white-space:nowrap}
@keyframes pulse{50%{opacity:.45}}
.backcover{height:100%;background:#0a0a0a;color:#eee;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:calc(var(--ph)*.025);padding:0 10%}
.backcover .big{font:100 calc(var(--ph)*.06)/1 var(--ui);letter-spacing:-.03em}
.backcover p{margin:0;color:#9a9a9a;font:300 calc(var(--ph)*.022)/1.5 var(--ui)}
.endp{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 12%;gap:calc(var(--ph)*.02);background:var(--paper)}
.endp .big{font:100 calc(var(--ph)*.07)/1 var(--ui);letter-spacing:-.03em;color:#111}
.endp p{margin:0;font:italic 400 calc(var(--ph)*.03)/1.4 var(--serif);color:#333}
.endp small{font:400 calc(var(--ph)*.016) var(--ui);letter-spacing:.3em;color:#9a958c}
.endp svg{width:calc(var(--ph)*.2)}
.cta{display:inline-block;margin-top:calc(var(--ph)*.02);border:1px solid #111;color:#111;text-decoration:none;border-radius:999px;padding:.55em 1.3em;font:500 calc(var(--ph)*.02) var(--ui)}

/* nav */
.nav{position:fixed;left:0;right:0;bottom:calc(18px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;align-items:center;gap:14px;z-index:30}
.round{width:44px;height:44px;border-radius:50%;border:1px solid #333;background:rgba(255,255,255,.04);display:grid;place-items:center;font-size:17px}
.round:hover{border-color:#bbb}.round:disabled{opacity:.3;cursor:default}
.where{font:400 12px var(--mono);color:#9a9a9a;min-width:96px;text-align:center}
.prog{position:fixed;left:0;bottom:0;height:2px;background:#f2f2f2;transition:width .8s ease;z-index:31}

/* robot companion */
.bot{position:fixed;right:clamp(10px,3vw,40px);bottom:calc(74px + env(safe-area-inset-bottom,0px));width:clamp(84px,9vw,128px);z-index:25;cursor:pointer;background:none;border:0;padding:0}
.bot svg{width:100%;height:auto;display:block;overflow:visible}
.say{position:fixed;right:calc(clamp(10px,3vw,40px) + clamp(70px,7.6vw,110px));bottom:calc(74px + clamp(84px,9vw,128px)*.82 + env(safe-area-inset-bottom,0px));max-width:min(250px,48vw);background:#f4f4f4;color:#111;font:400 13.5px/1.4 var(--ui);padding:10px 14px;border-radius:16px 16px 4px 16px;z-index:26;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s;pointer-events:none}
.say.on{opacity:1;transform:none}

/* single-page mode (phones) */
.single .book{width:var(--pw)}
.single .book.at-start,.single .book.at-end{transform:none}
.spage{position:absolute;inset:0;border-radius:6px;overflow:hidden;transform-origin:left center;transition:transform .8s cubic-bezier(.645,.045,.355,1),opacity .8s;backface-visibility:hidden;box-shadow:0 20px 50px -20px rgba(0,0,0,.8)}
.spage.past{transform:perspective(1800px) rotateY(-100deg);opacity:0}
.spage.future{transform:none;opacity:0}
.spage.cur{transform:none;opacity:1;z-index:2}
.spage .face{position:relative;transform:none;backface-visibility:visible;height:100%;border-radius:6px}
@media (max-width:520px){.bar .brand{display:none}.ibtn{padding:6px 10px;font-size:12px}}
@media (prefers-reduced-motion:reduce){.leaf,.book,.spage{transition-duration:.01s!important}.show .ip img,.show .txt p,.stars i{animation:none!important}}
/* inline styles moved here (CSP) */
.sx-dim{min-width:0;opacity:.7}
.sx-bot{width:34%}
.sx-small{font-size:calc(var(--ph)*.016);letter-spacing:.3em}