:root {
  --coral:#b73f46; --coral-dark:#98333a; --teal:#176c66; --deep:#123e3b;
  --sun:#f3c34d; --ink:#24272b; --muted:#5b6268; --line:#d8dedc;
  --mint:#edf5f1; --rose:#fcf0ed; --soft:#f4f6f5;
}
* {box-sizing:border-box;letter-spacing:0}
html {scroll-behavior:smooth;scroll-padding-top:90px;scrollbar-gutter:stable}
body {--header-height:76px;min-height:100vh;margin:0;background:white;color:var(--ink);font:16px/1.65 system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
body.menu-open {overflow:hidden}
#app {min-height:calc(100vh - var(--header-height));display:flex;flex-direction:column}
#app > main {flex:1 0 auto}
#app > .sitemap {flex:0 0 auto}
a {color:inherit;text-decoration:none}
button {font:inherit;color:inherit;cursor:pointer;border:0;background:none}
button:disabled {cursor:default}
img {display:block;max-width:100%}
h1,h2,h3,p {margin:0}
h1,h2,h3 {line-height:1.2;overflow-wrap:anywhere}
h1 {font-size:38px} h2 {font-size:30px} h3 {font-size:19px}
svg {width:20px;height:20px;flex:none;vertical-align:middle}
:focus-visible {outline:3px solid var(--teal);outline-offset:4px}
.hidden {display:none!important}
.wrap {width:min(1120px,calc(100% - 64px));margin-inline:auto}
.skip {position:fixed;top:-80px;left:16px;z-index:100;padding:12px;background:white}
.skip:focus {top:8px}
.topbar {height:76px;background:white;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.topbar-in {height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand {display:inline-flex;align-items:center;gap:10px;color:var(--coral);font-size:28px;font-weight:800;line-height:1}
.brand-word {color:var(--coral)}
.brand-mark {width:30px;height:22px;display:flex;align-items:flex-end;gap:3px}
.brand-mark i {display:block;width:13px;height:18px;border-radius:3px 8px 3px 3px;background:var(--coral);transform:skewY(-8deg)}
.brand-mark i+i {background:var(--teal);border-radius:8px 3px 3px 3px;transform:skewY(8deg)}
.nav {display:flex;gap:36px;align-items:center;font-size:15px;font-weight:600}
.nav a {padding-block:22px;border-bottom:3px solid transparent}
.nav a[aria-current] {color:var(--coral);border-bottom-color:var(--coral)}
.nav a:hover,.header-contact:hover {color:var(--coral)}
.header-contact {display:flex;align-items:center;gap:16px;font-size:14px;font-weight:600}
.icon-btn {width:44px;height:44px;display:inline-grid;place-items:center;border-radius:6px;flex:none}
.icon-btn:hover {background:var(--soft)}
.menu {display:none}
.btn {display:inline-flex;justify-content:center;align-items:center;gap:12px;min-height:48px;padding:11px 20px;border-radius:6px;font-weight:650;line-height:1.5;text-align:center}
.primary {color:white;background:var(--coral)} .primary:hover {background:var(--coral-dark)}
.outline {border:1px solid var(--line);background:white} .outline:hover {border-color:var(--teal);color:var(--teal)}
.text-link {display:inline-flex;align-items:center;gap:12px;min-height:44px;color:var(--coral);font-weight:650}
.text-link:hover {text-decoration:underline;text-underline-offset:5px}
.kicker {display:flex;align-items:center;gap:9px;font-size:12px;font-weight:750;text-transform:uppercase;color:var(--teal);margin-bottom:12px}
.kicker svg {width:16px;height:16px}
.section {padding:64px 0}
.section-head {display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:28px}
.section-head p {color:var(--muted);margin-top:10px;max-width:520px}
.welcome {position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(110deg,#edf5f1 0%,#f7fbf7 58%,#fff4ec 100%);border-bottom:1px solid #d0e2d8;padding:34px 0 30px}
.welcome::before {content:"";position:absolute;z-index:0;width:520px;height:250px;right:-110px;top:-120px;border:1px solid #b73f4633;border-radius:50%;transform:rotate(-14deg);box-shadow:0 0 0 22px #b73f4610,0 0 0 44px #b73f4608;animation:drift-line 10s ease-in-out infinite}
.welcome::after {content:"";position:absolute;z-index:0;width:330px;height:170px;left:-120px;bottom:-105px;background:linear-gradient(135deg,#f3c34d66,#b73f4618);border-radius:55% 45% 0 0;transform:rotate(12deg)}
.welcome .wrap,.video-band .wrap,.brand-band .wrap {position:relative;z-index:1}
.welcome .wrap {display:flex;align-items:end;justify-content:space-between;gap:28px}
.welcome h1 {font-size:52px;color:var(--deep)}
.welcome .tagline {font-family:Georgia,serif;font-size:26px;line-height:1.4;margin-top:10px;color:var(--deep)}
.welcome .kicker {margin-bottom:4px}
.welcome-side {text-align:right;max-width:270px;padding-bottom:3px}
.welcome-side p {font-size:14px;color:var(--muted);margin-bottom:10px}
.catalog {padding-top:34px}
.book-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.book {min-width:0;display:block}
.book-art {position:relative;aspect-ratio:4/5;display:grid;place-items:center;background:var(--soft);border-radius:8px;padding:18px 26px;border-bottom:4px solid var(--accent);overflow:hidden;transition:transform .35s ease,box-shadow .35s ease}
.book-art::after {content:"";position:absolute;inset:auto -18% -38% auto;width:65%;height:62%;border:1px solid var(--accent);border-radius:50%;opacity:.32;transform:rotate(-18deg);transition:transform .45s ease,opacity .35s ease}
.book-art img {height:100%;width:100%;min-height:0;object-fit:contain;filter:drop-shadow(3px 7px 5px #24272b24);transition:filter .2s}
.book:hover .book-art {transform:translateY(-5px);box-shadow:0 14px 28px #123e3b18}
.book:hover .book-art::after {transform:rotate(-18deg) translate(-10px,-8px);opacity:.6}
.book:hover .book-art img {filter:drop-shadow(3px 9px 7px #24272b38)}
.book:hover h3 {color:var(--coral)}
.book .book-topline {display:flex;justify-content:space-between;align-items:center;color:var(--teal);font-size:11px;font-weight:750;text-transform:uppercase;margin:16px 0 8px}
.book-topline svg {width:16px;height:16px}
.book h3 {font-size:17px;line-height:1.4;transition:color .2s}
.book-meta {font-size:13px;color:var(--muted);margin-top:8px;display:flex;gap:6px;align-items:start}
.book-meta svg {width:15px;height:15px;margin-top:4px}
.book.b01 .book-art {background:#eef1fa}.book.b02 .book-art {background:#fff0ef}
.book.b03 .book-art {background:#fff6dc}.book.b04 .book-art {background:#e9f3ec}
.video-band {position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(120deg,#fff1ee 0%,#fff9e8 48%,#f2f6ed 100%);border-top:1px solid #efdbd5;border-bottom:1px solid #efdbd5}
.video-band::before {content:"";position:absolute;z-index:0;left:34%;top:-145px;width:760px;height:360px;border:2px solid #176c6622;border-radius:50%;transform:rotate(8deg);animation:slow-orbit 14s ease-in-out infinite}
.video-band::after {content:"";position:absolute;z-index:0;right:-100px;bottom:-155px;width:430px;height:280px;background:linear-gradient(145deg,#b73f4626,#f3c34d45);border-radius:58% 42% 0 0;transform:rotate(-18deg)}
.video-band .kicker {color:var(--coral)}
.video-layout {display:grid;grid-template-columns:280px 1fr;gap:60px;align-items:center}
.video-intro h2 {font-size:34px;line-height:1.22}
.video-intro p {color:var(--muted);margin-top:16px}
.video-intro .text-link {margin-top:20px}
.video-grid {display:grid;grid-template-columns:1fr 1fr;gap:24px}
.video-card {min-width:0}
.video-poster {height:290px;background:#192825;position:relative;border-radius:8px;overflow:hidden;display:flex;justify-content:center}
.video-poster img {width:100%;height:100%;object-fit:contain}
.video-poster .play-badge {position:absolute;bottom:16px;left:16px;background:white;color:var(--coral);border-radius:50%;width:44px;height:44px;display:grid;place-items:center}
.video-poster .time {position:absolute;bottom:18px;right:14px;padding:2px 7px;color:white;background:#121918;font-size:12px;border-radius:3px}
.video-card:hover .play-badge {background:var(--sun);color:var(--ink)}
.video-card h3 {font-size:17px;margin:14px 0 5px}.video-card p {color:var(--muted);font-size:13px}
.editorial {display:grid;grid-template-columns:240px 1fr;gap:64px;align-items:center;padding-block:12px}
.editorial-cover {background:#e8f1e9;padding:24px 36px;border-radius:4px}
.editorial-cover img {height:250px;width:100%;object-fit:contain;filter:drop-shadow(3px 8px 5px #24272b24)}
.editorial h2 {font-size:32px;max-width:610px}.editorial p {margin:18px 0 22px;color:var(--muted);max-width:560px}
.brand-band {position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(105deg,#f3c34d 0%,#f6d978 62%,#f4b7a6 100%);padding:28px 0;color:#343321}
.brand-band::before {content:"";position:absolute;z-index:0;left:-8%;top:-115px;width:116%;height:180px;background:white;border-radius:0 0 50% 50%/0 0 100% 100%;transform:rotate(-2deg)}
.brand-band::after {content:"";position:absolute;right:8%;bottom:-34px;width:160px;height:70px;border:1px solid #b73f4655;border-radius:50%;transform:rotate(-12deg)}
.brand-band .wrap {display:flex;justify-content:space-between;align-items:center;gap:24px}
.brand-band p {font-family:Georgia,serif;font-size:25px;line-height:1.35}
.brand-band .text-link {color:#343321;flex:none}
.sitemap {background:var(--deep);color:#f1f7f3;padding:54px 0 20px}
.sitemap a:focus-visible,.sitemap button:focus-visible {outline-color:var(--sun)}
.sitemap-grid {display:grid;grid-template-columns:1.4fr .8fr 1.25fr 1fr;gap:42px}
.sitemap .brand {color:white;font-size:34px}.sitemap .brand-word {color:#a1d7c7}.sitemap .brand-mark i:first-child{background:var(--coral)}.sitemap .brand-mark i+i{background:#a1d7c7}
.sitemap-intro p {margin-top:18px;max-width:240px;color:#c3d7d1;font-size:14px}
.sitemap h2 {font-size:13px;color:var(--sun);text-transform:uppercase;margin:1px 0 14px}
.sitemap nav a {display:block;font-size:14px;line-height:1.55;padding:7px 0;overflow-wrap:anywhere}
.sitemap nav a:hover {color:var(--sun);text-decoration:underline;text-underline-offset:4px}
.footer-bottom {display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #43625e;padding-top:20px;margin-top:38px;color:#bfd3ce;font-size:12px}
.footer-bottom .icon-btn:hover {background:#274e49}
.detail {padding:24px 0 64px}.back {font-size:14px;color:var(--muted);margin-bottom:20px;display:inline-flex;align-items:center;gap:8px;min-height:44px}
.identity {display:grid;grid-template-columns:116px minmax(0,1fr);gap:24px;align-items:start;border-bottom:1px solid var(--line);padding-bottom:28px;margin-bottom:28px}
.identity-cover {width:116px;height:166px;background:var(--soft);padding:5px;object-fit:contain}
.identity h1 {font-size:30px;max-width:790px}.identity .book-meta {margin:12px 0;color:var(--teal)}
.identity p {color:var(--muted);max-width:800px}
.detail-main {display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px;align-items:start}
.video-column {min-width:0}
.media-frame {background:#101514;position:relative;display:flex;justify-content:center;border-radius:8px;overflow:hidden;scroll-margin-top:90px;min-height:220px}
.media-stage {width:100%;position:relative;background:#101514}
.media-stage video {display:block;width:100%;height:auto;max-height:70vh;object-fit:contain;background:#101514}
.play-overlay {position:absolute;inset:0;display:grid;place-items:center}
.play-circle {width:60px;height:60px;border-radius:50%;background:white;color:var(--coral);box-shadow:0 4px 20px #0004;display:grid;place-items:center}
.play-circle svg {width:26px;height:26px}
.media-frame:fullscreen {width:100%;height:100%;border-radius:0}
.media-frame:fullscreen .media-stage {width:100%;height:100%;max-height:none;aspect-ratio:auto}
.media-stage video:fullscreen,.media-stage video:-webkit-full-screen {width:100%;height:100%;max-height:none;object-fit:contain;background:#000}
.video-actions {display:flex;justify-content:space-between;gap:16px;align-items:center;margin:10px 0 16px;color:var(--muted);font-size:14px}
.player-feedback:empty {display:none}.player-feedback {margin-bottom:12px;color:var(--coral)}
.end-actions {display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.episode-head h2 {font-size:23px}.episode-head p {color:var(--muted);font-size:14px;margin-top:8px}
.playlist-head {padding:0 0 16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}
.playlist-head h2 {font-size:20px}.playlist-head span {font-size:13px;color:var(--muted)}
.episode {display:grid;grid-template-columns:26px 46px 1fr 18px;gap:10px;width:100%;padding:16px 12px;min-height:100px;align-items:center;text-align:left;border-bottom:1px solid var(--line);border-left:3px solid transparent}
.episode:hover {background:var(--soft)}.episode.active {background:var(--mint);border-left-color:var(--teal)}
.episode img {width:46px;height:70px;object-fit:contain;background:#101514;border-radius:3px}
.episode-title {display:block;font-size:14px;font-weight:700;line-height:1.4}
.episode-num,.episode-duration {font-size:12px;color:var(--muted);display:block}.episode-duration {margin-top:6px}
.episode > svg {width:18px;color:var(--teal)}
.playlist-note {font-size:12px;color:var(--muted);padding-top:16px}
.about-book {border-top:1px solid var(--line);padding-top:32px;margin-top:36px}
.about-book h2 {font-size:22px;margin-bottom:12px}.about-book p {color:var(--muted);max-width:760px}
.related {background:var(--soft)}.related .book-art {background:white}
.notice {background:var(--mint);border-left:4px solid var(--teal);padding:28px;display:flex;align-items:start;gap:16px}
.notice h2 {font-size:22px;margin-bottom:10px}.notice p {color:var(--muted)}
.notice .text-link {margin-top:14px}
.state {max-width:680px;padding-block:76px 96px;text-align:center;min-height:50vh}
.state-symbol {display:grid;place-items:center;background:var(--mint);width:64px;height:64px;margin:0 auto 20px;border-radius:8px;color:var(--teal)}
.state h1 {font-size:32px}.state p {color:var(--muted);margin:18px 0 24px}
.state .actions {justify-content:center}.actions {display:flex;gap:12px;flex-wrap:wrap}
.copy-page {max-width:800px;padding:54px 0 70px;min-height:50vh}
.copy-page h1 {margin-bottom:24px}.copy-page h2 {font-size:24px;margin:30px 0 12px}
.copy-page p {color:var(--muted);margin-bottom:18px}.copy-page .notice {margin-top:24px}
.about-intro {background:var(--mint);padding:44px 0}.about-intro h1 {color:var(--deep)}
.about-intro p {font:26px/1.4 Georgia,serif;margin-top:16px;max-width:660px}
.about-spread {display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:32px 0}
.about-spread img {height:210px;width:100%;object-fit:contain;background:var(--soft);padding:12px}
.prototype-note {font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:18px;margin-top:22px}
.toast {position:fixed;z-index:60;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:white;padding:12px 18px;border-radius:6px;max-width:calc(100% - 32px);font-size:14px}
dialog {border:0;padding:26px;position:fixed;inset:0 0 0 auto;margin:0;width:min(340px,90vw);height:100%;max-height:100%;background:white;box-shadow:-12px 0 50px #0002}
dialog::backdrop {background:#122d2b88}
.drawer-head {display:flex;justify-content:space-between;align-items:center;padding-bottom:26px;border-bottom:1px solid var(--line)}
dialog nav {display:grid;gap:4px;padding-top:20px}dialog nav a {padding:14px 0;font-size:18px;border-bottom:1px solid var(--line)}
dialog > p {color:var(--muted);font:21px/1.4 Georgia,serif;margin-top:30px}
@keyframes drift-line {0%,100% {transform:rotate(-14deg) translate(0,0)}50% {transform:rotate(-10deg) translate(-12px,8px)}}
@keyframes slow-orbit {0%,100% {transform:rotate(8deg) translate(0,0)}50% {transform:rotate(12deg) translate(18px,10px)}}
@media(max-width:1023px) {
 .wrap {width:calc(100% - 48px)}.book-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
 .detail-main {grid-template-columns:1fr}.sitemap-grid {grid-template-columns:1fr 1fr;gap:32px}
 .video-layout {grid-template-columns:1fr;gap:28px}.video-intro {max-width:600px}
 .video-intro .text-link {margin-top:10px}.editorial {gap:32px}
}
@media(max-width:799px) {
 body {--header-height:60px}.nav,.header-contact {display:none}.menu {display:inline-grid}.topbar {height:60px}.brand {font-size:25px}
 .welcome h1 {font-size:42px}.welcome .wrap {align-items:start}.welcome-side {max-width:210px}
 .welcome .tagline {font-size:24px}.section {padding:42px 0}
 .book-art {padding:16px}.book h3 {font-size:16px}
 .identity {grid-template-columns:96px 1fr;gap:16px}.identity-cover {width:96px;height:144px}.identity h1 {font-size:24px}
}
@media(max-width:599px) {
 .wrap {width:calc(100% - 32px)}h1 {font-size:30px}h2 {font-size:25px}
 .welcome {padding:24px 0}.welcome .wrap {display:block}.welcome h1 {font-size:38px}
 .welcome .tagline {font-size:23px;max-width:340px}.welcome-side {display:none}
 .catalog {padding-top:28px}.section-head {gap:12px;align-items:start}.section-head p {font-size:14px}
 .section-head .text-link {font-size:13px;gap:6px;flex:none}.section-head .text-link svg {width:17px}
 .book-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px}
 .book-art {padding:12px 16px;aspect-ratio:2/3}.book .book-topline {font-size:10px;margin-top:12px}
 .book h3 {font-size:15px}.book-meta {font-size:12px}.book-meta svg {width:13px}
 .video-grid {gap:16px}.video-poster {height:250px}.video-intro h2 {font-size:28px}
 .video-card h3 {font-size:15px}.video-poster .play-badge {left:10px;bottom:12px;width:38px;height:38px}
 .video-poster .time {right:8px;bottom:18px;font-size:11px}
 .editorial {grid-template-columns:100px minmax(0,1fr);gap:22px;align-items:start}
 .editorial-cover {padding:10px}.editorial-cover img {height:132px}.editorial h2 {font-size:23px}
 .editorial p {font-size:14px;margin:12px 0}.editorial .btn {padding-inline:14px;font-size:14px}
 .brand-band .wrap {display:block}.brand-band p {font-size:24px}.brand-band .text-link {margin-top:12px}
 .sitemap {padding-top:36px}.sitemap-grid {grid-template-columns:1fr 1fr;gap:30px 20px}
 .sitemap-intro {grid-column:1/-1}.sitemap-intro p {max-width:310px;margin-top:12px}
 .sitemap .book-links {grid-column:1/-1;grid-row:3}.sitemap nav a {font-size:13px;padding:8px 0}
 .footer-bottom {margin-top:28px;gap:12px}.footer-bottom .locale {display:none}
 .detail {padding-top:16px}.identity {padding-bottom:22px}.identity .kicker {font-size:10px}
 .identity p {font-size:14px}.identity h1 {font-size:23px}
 .media-stage video {max-height:70vh}
 .about-book {margin-top:28px}.notice {padding:22px 16px;gap:12px}.notice h2 {font-size:20px}
 .related .book-grid .book:last-child {display:none}.state {padding-block:56px}.state h1 {font-size:27px}
 .copy-page {padding-block:36px 50px}.about-spread {grid-template-columns:repeat(2,1fr)}.about-spread img {height:230px}
}
@media(max-width:359px) {.section-head {display:block}.section-head .text-link {margin-top:8px}.book-art {padding:8px}.book-topline svg {display:none}.editorial {grid-template-columns:1fr}.editorial-cover {width:100px}.video-poster {height:220px}}
@media(prefers-reduced-motion:reduce) {html {scroll-behavior:auto}* {transition:none!important;animation:none!important}}