.narrative-intro{padding:22px;margin-bottom:24px;overflow:hidden;position:relative}.narrative-intro::after{content:"";position:absolute;width:150px;height:150px;right:-55px;top:-60px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.95),rgba(255,126,177,.22) 48%,rgba(255,126,177,.04) 72%)}.narrative-intro h3{position:relative;z-index:1;margin:7px 0 8px;font-size:var(--fs-2xl);font-weight:var(--fw-black);letter-spacing:-.04em}.narrative-intro>p{position:relative;z-index:1;color:var(--muted);font-size:var(--fs-xs);font-weight:var(--fw-regular);line-height:1.75;max-width:80%}.narrative-summary{position:relative;z-index:1;margin-top:16px;padding:16px;border-radius:20px;background:rgba(255,255,255,.58);border:1px solid rgba(255,255,255,.88)}.narrative-highlights{display:grid;gap:0}.narrative-highlight{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.78)}.narrative-highlight:first-child{padding-top:0}.narrative-highlight small{display:block;color:var(--muted);font-size:var(--fs-2xs);font-weight:var(--fw-bold);line-height:1.4}.narrative-highlight strong{display:block;margin-top:5px;color:var(--accent-dark);font-size:var(--fs-md);line-height:1.4;font-weight:var(--fw-black);word-break:keep-all}.narrative-highlight>div{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px;color:var(--muted);font-size:var(--fs-2xs);font-weight:var(--fw-medium)}.narrative-highlight b{padding:3px 7px;border-radius:999px;background:rgba(255,255,255,.72);font-size:var(--fs-2xs);font-weight:var(--fw-bold)}.narrative-highlight b.rise{color:var(--good)}.narrative-highlight b.fall{color:var(--bad)}.narrative-deltas{margin-top:16px}.narrative-deltas h4{margin:0 0 6px;color:var(--accent-dark);font-size:var(--fs-xs);font-weight:var(--fw-black)}.narrative-delta-row{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.72)}.narrative-delta-row small{color:var(--muted);font-size:var(--fs-2xs);font-weight:var(--fw-bold)}.narrative-delta-row strong{min-width:0;font-size:var(--fs-sm);line-height:1.4;font-weight:var(--fw-bold);word-break:keep-all}.narrative-delta-row b{white-space:nowrap;font-size:var(--fs-xs);font-weight:var(--fw-black)}.narrative-delta-row b.rise{color:var(--good)}.narrative-delta-row b.fall{color:var(--bad)}.narrative-nochange{margin:8px 0 0;color:var(--muted);font-size:var(--fs-xs)}.narrative-disclaimer{display:block;margin-top:12px;color:var(--muted);font-size:var(--fs-2xs);line-height:1.55}.narrative-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.narrative-card{padding:15px;min-height:128px}.narrative-card-top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}.narrative-card-top strong{font-size:var(--fs-base);font-weight:var(--fw-bold);line-height:1.4}.narrative-card-top span{color:var(--muted);font-size:var(--fs-2xs);font-weight:var(--fw-medium);white-space:nowrap}.narrative-bar{height:9px;margin-top:13px;padding:1px;border-radius:999px;background:rgba(255,255,255,.68);overflow:hidden}.narrative-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent-2),var(--accent-dark))}.narrative-card-foot{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:8px}.narrative-card-foot b{font-size:var(--fs-md);font-weight:var(--fw-black);color:var(--accent-dark)}.narrative-card-foot small{font-size:var(--fs-2xs);font-weight:var(--fw-medium);color:var(--muted)}.narrative-card p{margin:9px 0 0;color:var(--muted);font-size:var(--fs-2xs);font-weight:var(--fw-regular);line-height:1.6}.narrative-work-list{display:grid;gap:12px}.narrative-work{padding:18px}.narrative-work-rank{display:inline-flex;padding:5px 8px;border-radius:999px;background:var(--accent-pale);color:var(--accent-dark);font-size:var(--fs-2xs);font-weight:var(--fw-bold)}.narrative-work h4{margin:8px 0 12px;font-size:var(--fs-base);font-weight:var(--fw-semibold);line-height:1.45;letter-spacing:-.02em}.narrative-flow{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center}.narrative-flow span{padding:10px;border-radius:15px;border:1px solid rgba(255,255,255,.7);background:linear-gradient(145deg,rgba(255,255,255,.9),var(--accent-soft));color:#70505e;font-size:var(--fs-xs);line-height:1.5;text-align:center;font-weight:var(--fw-bold)}.narrative-flow b{color:var(--accent-dark);font-weight:var(--fw-black)}.narrative-hook{margin-top:12px;padding:12px 13px;border-radius:16px;background:linear-gradient(135deg,rgba(255,255,255,.76),rgba(255,225,239,.48));border:1px solid rgba(255,255,255,.84)}.narrative-hook small{display:block;color:var(--muted);font-size:var(--fs-2xs);font-weight:var(--fw-medium)}.narrative-hook strong{display:block;margin-top:4px;font-size:var(--fs-sm);font-weight:var(--fw-semibold);line-height:1.65}.narrative-work .chips{margin-top:10px}.narrative-work details{margin-top:12px;border-top:1px solid rgba(255,255,255,.72);padding-top:10px}.narrative-work summary{cursor:pointer;color:var(--accent-dark);font-size:var(--fs-2xs);font-weight:var(--fw-bold)}.narrative-work details p{margin:7px 0 0;color:var(--muted);font-size:var(--fs-xs);font-weight:var(--fw-regular);line-height:1.65}@media(max-width:620px){.narrative-grid{grid-template-columns:1fr}.narrative-intro{padding:18px}.narrative-intro h3{font-size:22px}.narrative-intro>p{max-width:100%}.narrative-summary{padding:14px}.narrative-delta-row{grid-template-columns:64px minmax(0,1fr) auto;gap:8px}.narrative-flow{grid-template-columns:1fr}.narrative-flow b{transform:rotate(90deg);text-align:center}#view-narrative .section-heading h3{font-size:19px!important}}
.narrative-watch-excerpt{margin:8px 0 0;color:var(--muted);font-size:var(--fs-xs);font-weight:var(--fw-regular);line-height:1.65}.narrative-watch-delta{margin:0 0 12px;font-size:var(--fs-xs);font-weight:var(--fw-bold)}.narrative-watch-delta.rise{color:var(--good)}.narrative-watch-delta.fall{color:var(--bad)}
/* Hook segment colors are fixed per dimension type (pattern/uke/man/exp/age),
   not per market - otome and BL share the same color for the dimensions
   they both have (pattern/man/exp) so the visual language stays consistent
   across markets, per direct user request. uke/age only ever appear in BL. */
.hook-seg{font-weight:var(--fw-black)}
.hook-pattern{color:#7a5cf0}
.hook-uke{color:#e2417e}
.hook-man{color:#2f8fd1}
.hook-exp{color:#d97a1f}
.hook-age{color:#1f9e82}