:root{color-scheme:dark;font-size:100%;--bg:#090a0c;--surface:#111317;--text:#f4f1ed;--muted:#b9bdc4;--line:#363a41;--red:#8c2432;--hover:#a12b3b}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;font-size:1rem;line-height:1.9;overflow-wrap:anywhere}
p,h1,h2,h3,dl,dd{margin:0}
a{color:inherit;text-underline-offset:.3em}
a:focus-visible,h2:focus-visible{outline:2px solid var(--text);outline-offset:5px}
h1,h2,h3,.tagline,.brand{font-family:"Hiragino Mincho ProN","Yu Mincho",YuMincho,serif;font-weight:400}
.shell{width:calc(100% - 48px);max-width:1120px;margin-inline:auto}
.site-header{min-height:48px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);column-gap:12px}
.brand{font-size:.875rem}
.site-header nav{display:flex;flex-wrap:wrap;column-gap:20px;margin-left:auto}
.site-header a{display:flex;min-height:44px;min-width:44px;align-items:center;justify-content:center;text-decoration:none;font-size:.875rem}
.site-header a:hover{text-decoration:underline}
.site-header .desktop-nav{display:none}
.skip-link{position:absolute;top:8px;left:24px;z-index:10;max-width:calc(100% - 48px);background:var(--text);color:var(--bg);padding:8px 16px;min-height:44px;transform:translateY(-180%)}
.skip-link:focus{transform:none;outline:2px solid white;outline-offset:3px}
main:focus{outline:none}
.hero{display:grid;grid-template-columns:minmax(0,1fr);padding-block:20px 56px}
.eyebrow,.author,.reading,.role,.section-label,.sales,.site-footer{color:var(--muted)}
.eyebrow{font-size:1rem;line-height:1.8;margin-bottom:12px;max-width:36rem}
h1{font-size:2rem;line-height:1.35;letter-spacing:.01em}
.subtitle{display:block;font-size:1.375rem;line-height:1.5;margin-top:5px}
.author{margin-top:4px}
.cover{display:block;width:160px;max-width:100%;height:auto;justify-self:center;margin-block:16px;object-fit:contain}
.tagline{font-size:1.5rem;line-height:1.65}
.trial{margin-top:22px}
.trial-pending{color:var(--muted);font-size:1rem;line-height:1.9}
.hero .trial-pending{font-size:.875rem;margin-top:14px}
.trial-primary{display:flex;align-items:center;justify-content:center;min-height:48px;background:var(--red);color:#fff;text-decoration:none;padding:10px 22px;width:100%;font-size:1rem;text-align:center}
.trial-primary:hover{background:var(--hover)}
.section{border-top:1px solid var(--line);padding-block:36px 44px;scroll-margin-top:16px}
.section-label{font-size:.875rem;line-height:1.5;margin-bottom:8px}
h2{font-size:1.5rem;line-height:1.7}
.split{display:grid;gap:28px;grid-template-columns:minmax(0,1fr)}
.story-body,.learning-body,.author-body,.read-body{max-width:45rem;min-width:0}
.intermediate-trial{margin-top:24px}
.trial-text{display:inline-flex;align-items:center;min-height:44px;font-size:1rem}
.trial-text:hover{color:#fff}
.learning-topics{display:grid;gap:8px 28px;margin:24px 0 0;padding-left:1.3em}
.learning-topics li::marker{color:var(--muted)}
.learning-body{border-left:2px solid var(--red);padding-left:22px}
.characters{display:grid;margin-top:28px}
.character{border-bottom:1px solid var(--line);padding-block:20px;min-width:0}
.character:first-child{padding-top:0}
.character:last-child{border-bottom:0;padding-bottom:0}
.reading,.role{font-size:.875rem}
.character h3{font-size:1.625rem;line-height:1.5;margin-block:2px}
.character>p:last-child{margin-top:14px}
.read-section{padding-block:32px}
.read-body .trial{margin-top:24px}
.profile-link{margin-top:16px}
dl{display:grid;grid-template-columns:4rem minmax(0,1fr);column-gap:14px;row-gap:12px}
dt{font-size:.875rem;color:var(--muted)}
.sales{font-size:.875rem;margin-top:28px}
.site-footer{border-top:1px solid var(--line);padding-block:20px;font-size:.875rem}
@media(min-width:600px){.learning-topics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:960px){
 body{font-size:1.0625rem}
 .shell{width:calc(100% - 128px)}
 .site-header{min-height:76px}
 .brand{font-size:1rem}
 .site-header nav{column-gap:28px}
 .site-header .desktop-nav{display:flex}
 .hero{grid-template-columns:minmax(0,1fr) 320px;column-gap:80px;padding-block:90px 80px;min-height:668px;align-content:center}
 .hero-title{grid-column:1;grid-row:1}
 .cover{grid-column:2;grid-row:1 / 3;width:320px;margin:0;align-self:center}
 .hero-action{grid-column:1;grid-row:2;margin-top:40px}
 h1{font-size:3.5rem}
 .subtitle{font-size:1.75rem;margin-top:10px}
 .author{margin-top:18px}
 .tagline{font-size:2rem;line-height:1.6}
 .hero .trial{margin-top:36px}
 .trial-primary{width:fit-content;min-width:min(280px,100%);max-width:100%}
 .section{padding-block:56px}
 .split{grid-template-columns:280px minmax(0,1fr);gap:80px}
 .characters{grid-template-columns:repeat(3,minmax(0,1fr));gap:42px;margin-top:42px}
 .character,.character:first-child,.character:last-child{border:0;padding:0}
 .character h3{font-size:1.875rem}
 .character>p:last-child{margin-top:20px}
 .read-section{padding-block:36px}
 dl{grid-template-columns:5rem minmax(0,1fr)}
}
@media(max-width:420px){.site-header nav{column-gap:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}