:root{color-scheme:dark;--night:#060b18;--navy:#0a1428;--ink:#101a31;--paper:#f4f0e7;--copy:#c8d2df;--muted:#8295aa;--cyan:#78e4ef;--violet:#aa91ff;--amber:#e5bc73;--line:rgba(150,205,226,.18);--card:rgba(9,20,38,.94)}
*{box-sizing:border-box}html{min-width:320px;scroll-behavior:smooth;background:var(--night)}body{min-height:100vh;margin:0;overflow-x:hidden;color:var(--paper);background:radial-gradient(circle at 72% 18%,rgba(78,46,139,.13),transparent 30rem),linear-gradient(180deg,#060b18,#080f20 36%,#070b16);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:rgba(115,226,239,.14)}button{font:inherit}.skip-link{position:fixed;z-index:20;top:8px;left:8px;padding:10px 14px;border-radius:10px;color:#06101c;background:var(--cyan);transform:translateY(-150%)}.skip-link:focus{transform:none}
.access-gate{display:grid;place-items:center;align-content:center;min-height:100svh;padding:24px;text-align:center;background:#05070c}.access-gate span{color:#2c3440;font:600 clamp(4rem,18vw,9rem)/1 Georgia,serif}.access-gate h1{margin:12px 0;color:#717985;font:500 clamp(1.5rem,4vw,2.4rem)/1.2 system-ui,sans-serif;letter-spacing:0}.access-gate p{color:#454d58}.site-locked{background:#05070c}.quiet-exit{padding:8px 12px;border:1px solid var(--line);border-radius:999px;color:#91a3b5;background:rgba(8,18,36,.72);cursor:pointer}.reader-part{margin:2.2em 0 .8em;color:#b8eaf1;font:500 1.35rem/1.3 Georgia,serif}
.forest-stage{position:absolute;z-index:0;inset:0 0 auto;height:100svh;min-height:650px;overflow:hidden;background:var(--night);pointer-events:none}.forest-art,.forest-haze,.fireflies{position:absolute;inset:0}.forest-art{inset:-2%;background:url("/web/assets/mononoke-awakening-hero-v2.webp") 65% center/cover no-repeat;transform:scale(1.025)}.forest-haze{background:linear-gradient(90deg,rgba(4,9,20,.97) 0%,rgba(4,9,20,.79) 38%,rgba(4,9,20,.21) 73%,rgba(4,9,20,.33)),linear-gradient(180deg,rgba(3,7,15,.24),transparent 45%,#060b18 97%)}.fireflies{opacity:.5;background:radial-gradient(circle at 72% 25%,rgba(121,228,239,.88) 0 1px,transparent 2px),radial-gradient(circle at 82% 62%,rgba(185,142,255,.72) 0 1px,transparent 2px),radial-gradient(circle at 58% 48%,rgba(226,187,112,.8) 0 1px,transparent 2px);background-size:31vw 37vh,27vw 43vh,39vw 41vh;animation:drift 15s ease-in-out infinite alternate}
.site-header{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;width:min(1240px,calc(100% - 64px));margin:auto;padding:22px 0;border-bottom:1px solid var(--line)}.brand{display:inline-flex;align-items:center;gap:12px;color:inherit;text-decoration:none}.brand>span:last-child,.brand strong,.brand small{display:block}.brand strong{font:700 15px/1 Georgia,serif;letter-spacing:.22em}.brand small{margin-top:4px;color:#9caebf;font-size:10px;letter-spacing:.08em}.brand-seal{position:relative;display:grid;place-items:center;width:43px;height:43px;border:1px solid rgba(145,228,237,.35);border-radius:50%;background:rgba(8,18,36,.62);box-shadow:inset 0 0 18px rgba(113,226,237,.06),0 0 24px rgba(103,86,215,.1)}.brand-seal:before{width:20px;height:24px;border:1px solid rgba(225,239,242,.63);border-radius:48% 48% 43% 43%;content:""}.brand-seal i{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}.brand-seal i:nth-child(1){transform:translate(-6px,-2px)}.brand-seal i:nth-child(2){transform:translate(6px,-2px)}.brand-seal i:nth-child(3){transform:translateY(7px)}.site-header nav{display:flex;gap:6px}.site-header nav a{padding:8px 11px;border-radius:999px;color:#aab9c9;font-size:12px;text-decoration:none;transition:color .2s ease,background .2s ease,box-shadow .2s ease}.site-header nav a:hover,.site-header nav a:focus-visible{color:#edfaff;background:rgba(100,215,232,.09);box-shadow:inset 0 0 0 1px rgba(100,215,232,.14);outline:none}
main{position:relative;z-index:1}.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.42fr);align-items:end;gap:clamp(40px,8vw,120px);width:min(1240px,calc(100% - 64px));min-height:calc(100svh - 88px);margin:auto;padding:clamp(70px,11vh,130px) 0 90px}.hero-copy{max-width:770px}.eyebrow,.section-heading>p{margin:0 0 17px;color:var(--cyan);font-size:11px;font-weight:800;letter-spacing:.2em}h1{margin:0;font:500 clamp(3.7rem,7.9vw,7.3rem)/.91 Georgia,"Times New Roman",serif;letter-spacing:-.055em;text-wrap:balance;text-shadow:0 10px 50px rgba(0,0,0,.45)}h1 em{color:#c7b8f5;font-weight:400}.lead{max-width:630px;margin:31px 0 27px;color:#c8d4df;font:400 clamp(1.04rem,1.7vw,1.27rem)/1.68 Georgia,"Times New Roman",serif;text-shadow:0 3px 20px #030711}.story-cta{display:inline-flex;align-items:center;gap:22px;padding:12px 12px 12px 18px;border:1px solid rgba(121,226,239,.24);border-radius:999px;color:#e7f9fb;background:rgba(8,23,42,.7);text-decoration:none;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.story-cta i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:#07131f;background:var(--cyan);font-style:normal}.story-cta:hover,.story-cta:focus-visible{transform:translateY(-2px);border-color:rgba(121,226,239,.52);box-shadow:0 0 32px rgba(95,207,226,.13);outline:none}.hero-note{max-width:330px;justify-self:end;padding:25px;border:1px solid rgba(170,145,255,.25);border-radius:3px 30px 3px 30px;background:linear-gradient(145deg,rgba(9,20,39,.8),rgba(27,16,50,.66));box-shadow:0 30px 80px rgba(0,0,0,.28)}.hero-note small{color:var(--amber);font-size:10px;letter-spacing:.15em}.hero-note strong{display:block;margin:14px 0;font:500 27px/1.14 Georgia,serif}.hero-note p{margin:0;color:#9eafc0;font-size:12px;line-height:1.65}
.story-shell,.screen-section,.character-section{width:min(1240px,calc(100% - 64px));margin:auto;padding:110px 0}.section-heading{max-width:760px;margin-bottom:38px}.section-heading h2{margin:0;color:#f4f1ec;font:500 clamp(2.4rem,5vw,4.8rem)/1 Georgia,serif;letter-spacing:-.045em;text-wrap:balance}.section-heading>span{display:block;max-width:630px;margin-top:18px;color:var(--muted);font-size:14px;line-height:1.65}.chapter-layout{display:grid;grid-template-columns:minmax(260px,.34fr) minmax(0,1fr);align-items:start;gap:24px}.chapter-shelf{position:sticky;top:20px}.chapter-list{display:grid;gap:10px}.chapter-link{display:grid;width:100%;gap:8px;padding:17px;border:1px solid var(--line);border-radius:16px;color:inherit;background:rgba(9,19,37,.84);text-align:left;cursor:pointer;transition:border-color .2s ease,background .2s ease,transform .2s ease}.chapter-link:hover,.chapter-link:focus-visible{transform:translateX(3px);border-color:rgba(116,226,239,.4);outline:none}.chapter-link.is-active{border-color:rgba(170,145,255,.44);background:linear-gradient(135deg,rgba(24,31,61,.96),rgba(27,17,53,.9));box-shadow:0 0 35px rgba(96,74,174,.1)}.chapter-link small{color:#78dfea;font-size:9px;letter-spacing:.08em}.chapter-link strong{font:600 20px/1.2 Georgia,serif}.chapter-link span{display:-webkit-box;overflow:hidden;color:#8fa1b4;font-size:11px;line-height:1.5;-webkit-box-orient:vertical;-webkit-line-clamp:3}.reader{min-height:520px;overflow:hidden;border:1px solid rgba(168,145,255,.22);border-radius:28px;background:linear-gradient(145deg,rgba(10,22,41,.97),rgba(12,12,29,.97));box-shadow:0 40px 100px rgba(0,0,0,.25)}.reader-empty{display:grid;place-items:center;align-content:center;min-height:520px;color:var(--muted)}.moon-mark{display:block;width:54px;height:54px;margin-bottom:15px;border:1px solid rgba(117,226,239,.32);border-radius:50%;box-shadow:inset 12px -5px rgba(159,139,250,.13),0 0 30px rgba(100,215,232,.09)}.reader-head{padding:clamp(24px,6vw,64px) clamp(22px,7vw,78px) 34px}.reader-head small,.outcomes>small{color:var(--cyan);font-size:10px;letter-spacing:.12em}.reader-head h3{margin:12px 0 17px;font:500 clamp(2.6rem,6vw,5.4rem)/.96 Georgia,serif;letter-spacing:-.05em}.reader-head p{max-width:710px;margin:0;color:#aebccc;font:italic 17px/1.65 Georgia,serif}.chapter-art{position:relative;aspect-ratio:16/8.4;margin:0;overflow:hidden;border-block:1px solid var(--line);background:#07101e}.chapter-art:after{position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(5,11,23,.38));content:""}.chapter-art img{width:100%;height:100%;object-fit:cover}.book-copy{max-width:760px;margin:auto;padding:clamp(38px,7vw,76px) clamp(22px,6vw,66px)}.book-copy p{margin:0 0 1.35em;color:#d5dde6;font:400 clamp(1.03rem,1.65vw,1.2rem)/1.85 Georgia,"Times New Roman",serif}.book-copy p.opening:first-letter{float:left;margin:8px 10px 0 0;color:var(--amber);font-size:4.2rem;line-height:.72}.outcomes{margin:0 clamp(22px,6vw,66px) 50px;padding-top:34px;border-top:1px solid var(--line)}.outcomes h4{margin:7px 0 20px;font:500 26px/1.2 Georgia,serif}.outcomes details{overflow:hidden;margin-top:9px;border:1px solid var(--line);border-radius:15px;background:rgba(6,15,29,.72)}.outcomes summary{padding:15px 17px;color:#e4defa;cursor:pointer;font:600 15px/1.3 Georgia,serif}.outcomes details[open] summary{border-bottom:1px solid var(--line)}.outcomes img{display:block;width:100%;max-height:360px;object-fit:cover}.outcomes details p{margin:0;padding:19px;color:#c8d3de;font:400 15px/1.75 Georgia,serif}.reader-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 22px;border-top:1px solid var(--line);background:rgba(5,12,24,.72)}.reader-nav button,.cinema-controls button{padding:10px 14px;border:1px solid rgba(120,221,235,.23);border-radius:999px;color:#cce8ec;background:rgba(15,31,52,.9);cursor:pointer}.reader-nav button:disabled{opacity:.35;cursor:default}.reader-nav span{color:#7f92a7;font-size:11px}
.screen-section{width:100%;padding-inline:max(32px,calc((100% - 1240px)/2));background:linear-gradient(180deg,transparent,rgba(32,18,64,.11) 18%,rgba(8,18,35,.55) 52%,transparent)}.cinema{overflow:hidden;border:1px solid rgba(119,223,237,.23);border-radius:28px;background:#050914;box-shadow:0 40px 110px rgba(0,0,0,.35)}.cinema-frame{position:relative;aspect-ratio:16/8.6;overflow:hidden}.cinema-frame img{width:100%;height:100%;object-fit:cover;opacity:.3;transform:scale(1.015);transition:opacity .55s ease,transform 6.5s ease}.cinema-frame img.is-visible{opacity:1;transform:scale(1.045)}.cinema-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,9,19,.88),rgba(4,9,19,.08) 70%),linear-gradient(180deg,transparent 50%,rgba(4,9,19,.8))}.cinema-caption{position:absolute;z-index:1;left:clamp(20px,5vw,66px);bottom:clamp(20px,5vw,58px);max-width:560px}.cinema-caption small{color:var(--cyan);font-size:10px;letter-spacing:.14em}.cinema-caption h3{margin:8px 0;font:500 clamp(2rem,4.5vw,4.3rem)/1 Georgia,serif;letter-spacing:-.04em}.cinema-caption p{margin:0;color:#d2dae2;font:400 clamp(.95rem,1.5vw,1.13rem)/1.65 Georgia,serif;text-shadow:0 2px 12px #000}.cinema-controls{display:flex;justify-content:center;gap:8px;padding:16px}.cinema-controls .play{min-width:180px;color:#07131e;border-color:transparent;background:linear-gradient(135deg,var(--cyan),#a7dded);font-weight:800}.cinema-controls button:hover,.cinema-controls button:focus-visible{box-shadow:0 0 24px rgba(105,215,232,.14);outline:none}
.character-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.character-card{position:relative;min-height:390px;overflow:hidden;border:1px solid var(--line);border-radius:22px;background:#091426}.character-card:after{position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(5,10,22,.96) 92%);content:""}.character-card img{width:100%;height:100%;object-fit:cover;transition:transform 6s ease}.character-card:hover img{transform:scale(1.045)}.character-card div{position:absolute;z-index:1;right:19px;bottom:19px;left:19px}.character-card small,.character-card strong,.character-card span{display:block}.character-card small{color:var(--cyan);font-size:9px;letter-spacing:.13em}.character-card strong{margin-top:5px;font:600 27px/1 Georgia,serif}.character-card span{margin-top:7px;color:#aebccc;font-size:11px;line-height:1.45}.loading-copy,.error-copy{margin:0;padding:20px;color:var(--muted)}.error-copy{color:#d7a8c8}footer{position:relative;z-index:1;display:flex;justify-content:space-between;gap:16px;width:min(1240px,calc(100% - 64px));margin:auto;padding:25px 0;border-top:1px solid var(--line);color:#63778d;font-size:9px;letter-spacing:.12em}
.motion-card{opacity:0;transform:translateY(18px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.75,.2,1)}.motion-card.motion-active{opacity:1;transform:none}@keyframes drift{from{opacity:.32;transform:translate3d(-1%,-.5%,0)}to{opacity:.63;transform:translate3d(1%,.5%,0)}}
@media(max-width:900px){.character-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.chapter-layout{grid-template-columns:1fr}.chapter-shelf{position:static}.chapter-list{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{grid-template-columns:1fr}.hero-note{justify-self:start}.cinema-frame{aspect-ratio:4/3}}
@media(max-width:680px){html{scroll-behavior:auto}.site-header,.hero,.story-shell,.character-section,footer{width:min(100% - 30px,1240px)}.site-header{padding:14px 0}.site-header nav{gap:0}.site-header nav a{padding:8px;font-size:10px}.brand small{display:none}.brand-seal{width:38px;height:38px}.hero{min-height:calc(100svh - 67px);padding:78px 0 52px;align-content:end}.forest-stage{min-height:620px}.forest-art{background-position:78% center}.forest-haze{background:linear-gradient(180deg,rgba(4,9,20,.1),rgba(4,9,20,.12) 36%,rgba(4,9,20,.88) 68%,#060b18 98%)}h1{font-size:clamp(3.2rem,15.5vw,5.2rem)}.lead{font-size:1rem;line-height:1.58}.hero-note{display:none}.story-shell,.screen-section,.character-section{padding-top:78px;padding-bottom:78px}.screen-section{padding-inline:15px}.section-heading{margin-bottom:25px}.section-heading h2{font-size:2.55rem}.chapter-list{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 1px 8px;overscroll-behavior-inline:contain}.chapter-link{flex:0 0 84%;scroll-snap-align:start}.reader{border-radius:21px}.reader-head{padding:27px 20px}.reader-head h3{font-size:2.65rem}.reader-head p{font-size:15px}.chapter-art{aspect-ratio:4/3}.book-copy{padding:36px 21px}.book-copy p{font-size:1.03rem;line-height:1.8}.outcomes{margin:0 20px 38px}.outcomes details p{font-size:14px}.cinema-frame{min-height:510px;aspect-ratio:auto}.cinema-frame img{object-position:62% center}.cinema-shade{background:linear-gradient(180deg,rgba(3,8,17,.04),rgba(3,8,17,.1) 36%,rgba(3,8,17,.93) 76%)}.cinema-caption{right:20px;bottom:24px;left:20px}.cinema-controls{display:grid;grid-template-columns:1fr 1fr}.cinema-controls .play{grid-column:1/-1;grid-row:1;min-width:0}.character-grid{grid-template-columns:1fr 1fr}.character-card{min-height:310px}footer{flex-direction:column}}
@media(max-width:390px){.site-header nav a:nth-child(3){display:none}.character-grid{grid-template-columns:1fr}.character-card{min-height:420px}.reader-nav button{padding-inline:10px;font-size:11px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.fireflies{animation:none}.motion-card{opacity:1;transform:none;transition:none}.cinema-frame img,.character-card img,.story-cta,.chapter-link{transition:none!important;transform:none!important}}
@media(max-width:680px){.motion-card{opacity:1;transform:none;transition:none}}
@media(max-width:680px){.chapter-list{display:grid;overflow:visible;padding:0;scroll-snap-type:none}.chapter-link{width:100%;max-width:100%;flex:none;scroll-snap-align:none}}