@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Noto+Sans+JP:wght@400;500;600;700&family=Noto+Serif+JP:wght@400;500;600&display=swap");

:root {
  color-scheme: dark;
  --reader-size: 17px;
  --ink: #ded9d2;
  --muted: #85818a;
  --line: rgba(255,255,255,.11);
  --purple: #9b6cff;
}

* { box-sizing: border-box; }
html { background: #070709; }
body { margin: 0; min-width: 320px; background: #070709; color: var(--ink); font-family: "Noto Sans JP", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button, textarea { font: inherit; }
button { color: inherit; }

.reading-progress { position: fixed; z-index: 80; inset: 0 0 auto; height: 2px; background: #25232a; }
.reading-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #7947ef, #bb79ff); box-shadow: 0 0 10px rgba(155,108,255,.8); }

.reader-toolbar {
  position: fixed; z-index: 50; inset: 2px 0 auto; display: grid; height: 64px; grid-template-columns: 1fr auto 1fr;
  align-items: center; border-bottom: 1px solid rgba(255,255,255,.055); background: rgba(7,7,9,.88); padding: 0 28px; backdrop-filter: blur(14px);
}
.reader-back { justify-self: start; color: #aaa6af; text-decoration: none; font-size: 11px; }
.reader-title { text-align: center; }
.reader-title span { display: block; color: #77737c; font-size: 8px; letter-spacing: .14em; }
.reader-title strong { display: block; margin-top: 3px; font-family: "Noto Serif JP", "Yu Mincho", serif; font-size: 13px; font-weight: 500; letter-spacing: .1em; }
.reader-actions { position: relative; justify-self: end; }
.type-button { border: 0; background: none; cursor: pointer; padding: 9px; font-family: Georgia, serif; font-size: 17px; }
.type-menu { position: absolute; top: 43px; right: 0; display: flex; gap: 3px; border: 1px solid var(--line); background: #151419; padding: 5px; box-shadow: 0 15px 35px rgba(0,0,0,.45); }
.type-menu[hidden] { display: none; }
.type-menu button { width: 44px; height: 36px; border: 0; background: transparent; color: #8e8993; cursor: pointer; }
.type-menu button.is-active { background: #2b2339; color: #d9c9ff; }
.type-menu button:nth-child(1) { font-size: 11px; }
.type-menu button:nth-child(2) { font-size: 15px; }
.type-menu button:nth-child(3) { font-size: 19px; }

.reader-main { width: min(100% - 48px, 690px); margin: 0 auto; padding: 145px 0 110px; }
.episode-heading { margin-bottom: 74px; text-align: center; }
.episode-heading .kicker { margin-bottom: 15px; color: var(--purple); font-size: 9px; font-weight: 600; letter-spacing: .2em; }
.episode-heading h1 { margin: 0 0 17px; font-family: "Noto Serif JP", "Yu Mincho", serif; font-size: clamp(25px, 3.5vw, 36px); font-weight: 500; letter-spacing: .14em; }
.episode-heading p { margin: 0; color: #77737c; font-size: 10px; letter-spacing: .08em; }

.story-text { font-family: "Noto Serif JP", "Yu Mincho", serif; font-size: var(--reader-size); font-weight: 400; letter-spacing: .075em; line-height: 2.45; }
.story-text p { margin: 0 0 2.35em; }
.story-text strong { color: #fff; font-weight: 600; }
.story-text ruby { ruby-position: over; }
.story-text rt { font-size: .48em; color: #aaa2b2; letter-spacing: .05em; }
.story-divider { display: flex; align-items: center; gap: 14px; margin: 70px 0; }
.story-divider::before, .story-divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #38343d); }
.story-divider::after { background: linear-gradient(90deg, #38343d, transparent); }
.story-divider span { width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid #7f5dc9; box-shadow: 0 0 10px rgba(155,108,255,.5); }
.story-end { margin-top: 86px; text-align: center; }
.story-end span { color: #7e7884; font-size: 9px; letter-spacing: .22em; }
.story-end h2 { margin: 17px 0 10px; font-family: "Noto Serif JP", serif; font-size: 20px; font-weight: 500; letter-spacing: .12em; }
.story-end p { color: #716d76; font-size: 10px; }

.reader-engagement { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 46px; border-top: 1px solid var(--line); padding-top: 25px; }
.reader-engagement button { min-height: 48px; border: 1px solid var(--line); background: rgba(255,255,255,.015); cursor: pointer; font-size: 11px; }
.reader-engagement button:hover { border-color: rgba(155,108,255,.55); }
.reader-like span { margin-right: 8px; color: #df5d75; font-size: 19px; vertical-align: -2px; }
.next-action { margin-top: 14px; border: 1px solid rgba(155,108,255,.34); background: linear-gradient(110deg, rgba(112,61,223,.16), transparent); padding: 24px; text-align: center; }
.next-action p { margin: 0 0 14px; color: #aaa4af; font-size: 10px; line-height: 1.8; }
.next-action a { display: inline-block; border: 1px solid #8d61ef; padding: 11px 18px; color: #d8cbf7; text-decoration: none; font-size: 10px; font-weight: 600; }

.comment-overlay { position: fixed; z-index: 89; inset: 0; background: rgba(0,0,0,.55); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.comment-overlay.is-open { opacity: 1; pointer-events: auto; }
.comments-panel { position: fixed; z-index: 90; inset: 0 0 0 auto; display: flex; width: min(440px, 100%); flex-direction: column; border-left: 1px solid var(--line); background: #101014; transform: translateX(100%); transition: transform .28s ease; }
.comments-panel.is-open { transform: translateX(0); }
.comments-head { display: flex; min-height: 68px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 0 22px; }
.comments-head h2 { margin: 0; font-size: 14px; }
.comments-head button { border: 0; background: none; cursor: pointer; color: #aaa6af; font-size: 21px; }
.comment-sort { display: flex; gap: 14px; border-bottom: 1px solid var(--line); padding: 13px 22px; color: #716d76; font-size: 9px; }
.comment-sort button { border: 0; background: none; color: inherit; cursor: pointer; padding: 0; }
.comment-sort button.is-active { color: #c8b5fa; }
.comment-list { flex: 1; overflow: auto; padding: 2px 22px; }
.comment { border-bottom: 1px solid var(--line); padding: 20px 0; }
.comment-meta { display: flex; justify-content: space-between; margin-bottom: 9px; color: #77737c; font-size: 9px; }
.comment-author { color: #c5c0c9; font-weight: 600; }
.comment p { margin: 0; color: #aaa5af; font-size: 11px; line-height: 1.8; }
.comment-form { border-top: 1px solid var(--line); padding: 16px 22px 20px; }
.comment-form textarea { display: block; width: 100%; min-height: 80px; resize: vertical; border: 1px solid var(--line); border-radius: 0; background: #0a0a0d; padding: 12px; color: #eeeaf0; font-size: 11px; line-height: 1.6; }
.comment-form__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.comment-count { color: #716d76; font-size: 9px; }
.comment-submit { border: 0; background: #7541dc; padding: 9px 18px; cursor: pointer; font-size: 10px; font-weight: 600; }

@media (max-width: 640px) {
  .reader-toolbar { height: 57px; padding: 0 14px; }
  .reader-back { font-size: 0; }
  .reader-back::before { content: "←"; font-size: 18px; }
  .reader-title strong { font-size: 11px; }
  .reader-main { width: calc(100% - 42px); padding: 112px 0 80px; }
  .episode-heading { margin-bottom: 56px; }
  .story-text { line-height: 2.3; letter-spacing: .055em; }
  .story-divider { margin: 56px 0; }
  .reader-engagement { grid-template-columns: 1fr; }
  .comments-panel { inset: auto 0 0; width: 100%; height: min(78vh, 660px); border-top: 1px solid var(--line); border-left: 0; transform: translateY(100%); }
  .comments-panel.is-open { transform: translateY(0); }
  .comments-head { min-height: 58px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

:focus-visible { outline: 2px solid #aa82ff; outline-offset: 3px; }

/* Readability pass */
.reader-back,.reader-title span,.episode-heading .kicker,.episode-heading p,.story-end span,.story-end p,.comment-sort,.comment-meta,.comment-count{font-size:12px}.reader-engagement button,.next-action p,.next-action a,.comment p,.comment-form textarea,.comment-submit{font-size:13px}.reader-title strong{font-size:14px}
.comment-author-line{display:flex;align-items:center;gap:9px}.comment-avatar{display:grid;width:30px;height:30px;flex:0 0 30px;place-items:center;border:1px solid rgba(255,255,255,.13);border-radius:50%;background:linear-gradient(135deg,#282234,#17161d);object-fit:cover;color:#ddd6e9;font-size:9px}.comment-avatar[data-avatar-preset-value=violet]{background:linear-gradient(135deg,#7c45f1,#2a183e)}.comment-avatar[data-avatar-preset-value=blue]{background:linear-gradient(135deg,#4c9fdb,#192b4d)}.comment-avatar[data-avatar-preset-value=rose]{background:linear-gradient(135deg,#d76c9b,#46203c)}.comment-avatar[data-avatar-preset-value=silver]{background:linear-gradient(135deg,#d5d7df,#4b4e59);color:#17171c}