:root {
  --bg: #fff7fb;
  --bg-2: #fff0f7;
  --ink: #2f2630;
  --muted: #8f7c87;
  --line: rgba(255, 126, 174, .18);
  --glass: rgba(255,255,255,.62);
  --glass-strong: rgba(255,255,255,.82);
  --accent: #ff77ad;
  --accent-2: #ff9ac2;
  --accent-dark: #d94c87;
  --accent-soft: #ffd5e6;
  --accent-pale: #fff0f6;
  --good: #47a98a;
  --bad: #b87d45;
  --shadow: 0 18px 52px rgba(173, 82, 119, .12);
  --radius: 26px;

  /* Type scale — every font-size in this app draws from these steps. */
  --fs-nano: 9px;   /* decorative micro-badges only (rank tag, disabled hint) */
  --fs-2xs: 11px;   /* meta labels, captions, chips */
  --fs-xs: 12px;    /* secondary body / notes */
  --fs-sm: 13px;    /* buttons, list labels */
  --fs-base: 14px;  /* primary reading text (work titles, paragraphs) */
  --fs-md: 16px;    /* card values, minor headings */
  --fs-lg: 19px;    /* card-level headings */
  --fs-xl: 23px;    /* section headings */
  --fs-2xl: 28px;   /* headline-level text */
  --fs-3xl: 34px;   /* page-level headings */
  --fs-hero: clamp(34px, 8vw, 58px);

  /* Weight scale */
  --fw-regular: 500;
  --fw-medium: 600;
  --fw-semibold: 700;
  --fw-bold: 800;
  --fw-black: 900;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
/* iOS Safari auto-zooms the whole page on focus for any input/select/
   textarea whose *computed* font-size is under 16px, and that zoom does not
   reset itself when the field loses focus. Several inputs across the app
   set their own smaller font-size (14px search boxes, 13px on mobile
   breakpoints, etc.) - !important guarantees this wins over all of them
   regardless of load order, since it's a functional fix, not a style
   choice any single component should be able to opt out of. */
input, select, textarea { font-size: 16px !important; }
/* iOS Safari flashes its own blue tap-highlight on <button> taps by default
   (not on <summary>, which is why index.html's <summary>変更</summary>
   never shows it but all.html's #allScopeToggle <button>変更</button> did) -
   every custom pill/segment/chip in this app already draws its own active
   state, so this default highlight is never wanted. */
button, summary { -webkit-tap-highlight-color: transparent; }
/* Belt-and-suspenders for the same blue-box symptom: a lingering :focus
   outline (not just the transient tap-highlight above) can also paint a
   blue box around a button, and can persist even without an active tap if
   focus was never moved elsewhere. Keep a visible ring for genuine keyboard
   navigation via :focus-visible, drop it everywhere else. */
button:focus:not(:focus-visible), summary:focus:not(:focus-visible) { outline: none; }
/* Frequency-ranked search-suggestion dropdown, shared by the home search box
   and the catalog search box - each page just needs its own search field's
   container to be `position:relative` so this anchors directly under it. */
.search-suggest{position:absolute;left:10px;right:10px;top:100%;margin-top:6px;z-index:30;display:flex;flex-direction:column;padding:6px;border:1px solid rgba(45,55,72,.12);border-radius:16px;background:#fff;box-shadow:0 16px 36px rgba(52,61,76,.16);max-height:min(60vh,320px);overflow-y:auto}
.search-suggest[hidden]{display:none}
.search-suggest-item{display:flex;align-items:center;justify-content:space-between;gap:10px;border:0;border-radius:10px;padding:10px 10px;background:transparent;color:var(--ink);font:inherit;font-size:var(--fs-sm);text-align:left}
.search-suggest-item:active{background:rgba(45,55,72,.06)}
.search-suggest-item b{flex:0 0 auto;color:var(--muted);font-size:var(--fs-2xs);font-weight:var(--fw-semibold)}
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 183, 213, .44), transparent 31%),
    radial-gradient(circle at 92% 16%, rgba(255, 218, 235, .8), transparent 30%),
    linear-gradient(180deg, #fffafd 0%, #fff5fa 47%, #fffafd 100%);
}
body[data-market="bl"] {
  --bg: #f4fbff;
  --bg-2: #eaf8ff;
  --ink: #24313a;
  --muted: #718893;
  --line: rgba(74, 177, 231, .18);
  --accent: #65c9f5;
  --accent-2: #91dcfb;
  --accent-dark: #369bc9;
  --accent-soft: #cdefff;
  --accent-pale: #ecf9ff;
  --shadow: 0 18px 52px rgba(70, 164, 210, .12);
  background:
    radial-gradient(circle at 12% 0%, rgba(173, 226, 255, .55), transparent 31%),
    radial-gradient(circle at 92% 16%, rgba(205, 241, 255, .8), transparent 30%),
    linear-gradient(180deg, #fbfeff 0%, #effaff 47%, #fbfeff 100%);
}
button, input { font: inherit; }
button { color: inherit; }
a { color: inherit; }
.app-shell { width: min(100%, 1040px); margin: 0 auto; padding: max(28px, env(safe-area-inset-top)) 18px 100px; }
.topbar { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; padding: 8px 4px 20px; }
.topbar h1 { margin: 4px 0 0; font-size: var(--fs-hero); font-weight: var(--fw-black); letter-spacing:-.06em; line-height:.96; }
.eyebrow { color: var(--accent-dark); font-size: var(--fs-2xs); font-weight: var(--fw-black); letter-spacing:.24em; }
.sync-status { padding: 8px 12px; border: 1px solid rgba(255,255,255,.82); border-radius:999px; background:rgba(255,255,255,.52); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); color:var(--muted); font-size:var(--fs-2xs); font-weight:var(--fw-bold); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.topbar-status { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.history-link { padding: 8px 12px; border: 1px solid rgba(255,255,255,.82); border-radius:999px; background:rgba(255,255,255,.52); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); color:var(--accent-dark); font-size:var(--fs-2xs); font-weight:var(--fw-bold); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); text-decoration:none; white-space:nowrap; transition: transform .15s ease; }
.history-link:active { transform: scale(.96); }
.card {
  border: 1px solid rgba(255,255,255,.85);
  background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(255,255,255,.46));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.92);
  backdrop-filter: blur(22px) saturate(1.22);
  -webkit-backdrop-filter: blur(22px) saturate(1.22);
  border-radius: var(--radius);
}
.control-bar { padding:14px; }
.control-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.control-item { min-width:0; }
.control-label { display:block; margin:0 0 7px 5px; color:var(--muted); font-size:var(--fs-2xs); font-weight:var(--fw-bold); }
.compact-segments, .period-tabs { display:flex; gap:5px; padding:4px; border-radius:19px; background:rgba(255,255,255,.46); border:1px solid rgba(255,255,255,.8); }
.mini-segment, .period-button { flex:1; min-width:0; border:0; border-radius:15px; padding:10px 8px; background:transparent; font-size:var(--fs-sm); font-weight:var(--fw-bold); transition:.2s ease; }
.mini-segment.active, .period-button.active { background:linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,255,255,.7)); box-shadow:0 8px 20px rgba(184, 94, 131, .11), inset 0 1px 0 white; color:var(--accent-dark); }
.mini-segment.market-bl { color:#52a9d4; }
.mini-segment.market-male { color:#4f9a58; }
.mini-segment:disabled { opacity:.42; }
.mini-segment small { display:block; margin-top:2px; font-size:var(--fs-nano); font-weight:var(--fw-medium); }
.window-control { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:13px; padding-top:13px; border-top:1px solid rgba(255,255,255,.75); }
.window-control .period-tabs { width: 48%; min-width: 180px; }
.window-note { color:var(--muted); font-size:var(--fs-2xs); line-height:1.5; }
.hero { position:relative; overflow:hidden; margin:18px 0 14px; padding:24px 22px 22px; border-radius:30px; border:1px solid rgba(255,255,255,.88); background:linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,226,239,.62)); box-shadow:var(--shadow), inset 0 1px 0 white; }
.hero::before, .hero::after { content:""; position:absolute; border-radius:50%; filter:blur(.2px); pointer-events:none; }
.hero::before { width:145px; height:145px; right:-44px; top:-58px; background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.95), rgba(255,126,177,.24) 47%, rgba(255,126,177,.05) 72%); border:1px solid rgba(255,255,255,.7); box-shadow: inset 12px 12px 30px rgba(255,255,255,.72), inset -15px -17px 35px rgba(255,120,170,.15); }
.hero::after { width:48px; height:48px; right:88px; top:78px; background:rgba(255,255,255,.48); box-shadow: inset 5px 5px 14px rgba(255,255,255,.9), 0 8px 20px rgba(255,107,164,.12); }
body[data-market="bl"] .hero { background:linear-gradient(135deg, rgba(255,255,255,.9), rgba(211,241,255,.66)); }
.hero-kicker { position:relative; z-index:1; color:var(--accent-dark); font-size:var(--fs-xs); font-weight:var(--fw-black); }
.hero h2 { position:relative; z-index:1; margin:7px 0 7px; max-width:80%; font-size:var(--fs-2xl); font-weight:var(--fw-black); line-height:1.12; letter-spacing:-.045em; }
.hero p { position:relative; z-index:1; margin:0; max-width:78%; color:#6f5d67; font-size:var(--fs-sm); line-height:1.7; }
.hero-asof { position:relative; z-index:1; display:inline-flex; align-items:center; gap:6px; margin-top:12px; padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.78); color:var(--accent-dark); font-size:var(--fs-xs); font-weight:var(--fw-black); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
.hero-asof.is-stale { background:#fff2d6; color:#93600a; }
.hero-asof.is-stale::before { content:'⚠'; font-size:var(--fs-2xs); }
.hero-status { position:relative; z-index:1; display:inline-flex; margin-top:8px; padding:7px 10px; border-radius:999px; background:rgba(255,255,255,.55); color:var(--muted); font-size:var(--fs-2xs); font-weight:var(--fw-bold); }
/* Sticks at top:0 (not top:8px) with the old 8px/safe-area gap folded into
   padding-top instead of a sticky offset. The pill used to stick 8px below
   the true viewport top, leaving that 8px band uncovered by anything - a
   card's tail end (a chip, a hook fragment) scrolled to sit exactly there
   would show through undimmed, since sticky positioning only pins this
   element's own box and does nothing for empty space above it. Pushing the
   opaque/blurred box itself up to y:0 removes the gap instead of trying to
   patch it (a ::before extending above the box was tried first, but
   visual-guard.css's overflow:hidden on .view-tabs - added for the 4-tab
   mobile-row fix - clips anything escaping the box, pseudo-elements
   included). The button row's on-screen position is unchanged: padding-top
   now carries the offset that used to live in `top`. */
.view-tabs { position:sticky; top:0; z-index:30; display:flex; gap:5px; margin: 0 0 22px; padding:calc(max(8px, env(safe-area-inset-top)) + 5px) 5px 5px; border:1px solid var(--line); border-radius:22px; background:rgba(255,250,253,.68); box-shadow:0 12px 32px rgba(160,91,120,.08); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); }
.view-tab { flex:1; border:0; border-radius:17px; padding:12px; background:transparent; font-size:var(--fs-sm); font-weight:var(--fw-bold); }
.view-tab.active { color:white; background:linear-gradient(135deg, var(--accent), var(--accent-dark)); box-shadow:0 8px 20px rgba(217,76,135,.22), inset 0 1px 0 rgba(255,255,255,.35); }
.view { display:none; }
.view.active { display:block; }
.axis-summary-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.summary-card { position:relative; overflow:hidden; min-height:150px; padding:16px; }
.summary-card::after { content:""; position:absolute; width:58px; height:58px; right:-14px; bottom:-14px; border-radius:50%; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), var(--accent-soft)); opacity:.75; }
.summary-head { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; }
.summary-head span { font-size:var(--fs-xs); font-weight:var(--fw-bold); }
.summary-head small { color:var(--muted); font-size:var(--fs-nano); line-height:1.4; text-align:right; }
.summary-main { margin-top:17px; font-size:var(--fs-2xl); line-height:1; font-weight:var(--fw-black); letter-spacing:-.05em; }
.summary-share { display:flex; align-items:baseline; gap:6px; margin-top:8px; color:var(--muted); font-size:var(--fs-2xs); }
.summary-share b { color:var(--accent-dark); font-size:var(--fs-lg); font-weight:var(--fw-bold); }
.summary-compare { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; padding-top:9px; border-top:1px solid rgba(255,255,255,.78); color:var(--muted); font-size:var(--fs-2xs); font-weight:var(--fw-medium); }
.rise { color:var(--good) !important; }
.fall { color:var(--bad) !important; }
.section-block { margin-top:28px; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin:0 4px 12px; }
.section-heading h3 { margin:5px 0 0; font-size:var(--fs-xl); font-weight:var(--fw-black); letter-spacing:-.04em; }
.section-note { margin:-5px 4px 12px; color:var(--muted); font-size:var(--fs-xs); line-height:1.7; }
.momentum-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.momentum-card { padding:15px; }
.momentum-title { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; margin-bottom:10px; }
.momentum-title span { font-size:var(--fs-md); font-weight:var(--fw-black); }
.momentum-title small { color:var(--muted); font-size:var(--fs-2xs); font-weight:var(--fw-medium); }
.momentum-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; padding:10px 0; border-top:1px solid rgba(255,255,255,.72); }
.momentum-row:first-of-type { border-top:0; }
.momentum-row small { display:block; color:var(--muted); font-size:var(--fs-2xs); font-weight:var(--fw-medium); }
.momentum-row strong { display:block; margin-top:3px; font-size:var(--fs-base); font-weight:var(--fw-semibold); }
.momentum-values { display:grid; grid-template-columns:auto auto; gap:2px 6px; justify-items:end; font-size:var(--fs-2xs); color:var(--muted); font-weight:var(--fw-medium); }
.momentum-values b { grid-column:1/-1; font-size:var(--fs-sm); font-weight:var(--fw-bold); color:var(--ink); }
.axis-stack { display:grid; gap:12px; }
.axis-card { padding:18px; }
.axis-top { display:flex; justify-content:space-between; gap:10px; }
.axis-title { font-size:var(--fs-lg); font-weight:var(--fw-black); }
.axis-note { color:var(--muted); font-size:var(--fs-2xs); line-height:1.6; }
.label-list { margin-top:15px; }
.label-row-wrap:not(:last-child) { margin-bottom:2px; }
.label-row { width:100%; display:grid; grid-template-columns:96px minmax(0,1fr) 64px 16px; gap:9px; align-items:center; min-height:42px; border:0; background:none; padding:4px 2px; margin:0; font:inherit; text-align:left; cursor:pointer; border-radius:10px; transition:background-color .12s ease; }
.label-row:hover, .label-row:focus-visible { background:rgba(255,255,255,.55); }
.label-name { font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--ink); }
.label-track { height:9px; padding:1px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.68); box-shadow:inset 0 1px 4px rgba(151, 67, 104, .08); }
.label-track i { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, var(--accent-2), var(--accent-dark)); box-shadow:inset 0 1px 0 rgba(255,255,255,.45); }
.label-value { text-align:right; }
.label-value b { display:block; font-size:var(--fs-xs); font-weight:var(--fw-bold); }
.label-value span, .label-value small { display:block; color:var(--muted); font-size:var(--fs-2xs); font-weight:var(--fw-medium); }
.label-chevron { display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:var(--fs-2xs); transition:transform .15s ease; }
.label-row.open .label-chevron { transform:rotate(180deg); color:var(--accent-dark); }
.label-works { display:flex; flex-direction:column; gap:6px; margin:2px 0 8px; padding:10px 10px 10px 14px; border-left:2px solid var(--accent-soft); background:rgba(255,255,255,.38); border-radius:0 12px 12px 0; }
.label-works[hidden] { display:none; }
.label-work-link { display:grid; grid-template-columns:30px minmax(0,1fr); gap:9px; align-items:start; padding:7px 9px; border-radius:10px; background:rgba(255,255,255,.62); text-decoration:none; color:inherit; box-shadow:0 1px 0 rgba(255,255,255,.7) inset; }
.label-work-link:hover { background:#fff; }
.label-work-rank { display:flex; align-items:center; justify-content:center; height:22px; border-radius:999px; background:var(--accent-soft); color:var(--accent-dark); font-size:var(--fs-nano); font-weight:var(--fw-black); white-space:nowrap; padding:0 6px; }
.label-work-title { grid-column:2; font-size:var(--fs-xs); font-weight:var(--fw-semibold); line-height:1.4; }
.label-work-circle { grid-column:2; font-size:var(--fs-2xs); color:var(--muted); margin-top:2px; }
.metric-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.metric-card { padding:16px; min-height:140px; }
.metric-title { color:var(--muted); font-size:var(--fs-2xs); font-weight:var(--fw-bold); }
.metric-word { margin-top:10px; font-size:var(--fs-lg); font-weight:var(--fw-black); }
.metric-desc { margin-top:7px; color:var(--muted); font-size:var(--fs-2xs); line-height:1.6; }
.metric-foot { display:none; }
.heart-meter { display:flex; gap:2px; align-items:center; margin-top:8px; }
.heart { color:#dfd6da; font-size:21px; line-height:1; text-shadow:0 1px 0 white; }
.heart.filled { color:var(--accent); filter:drop-shadow(0 4px 5px rgba(255,98,159,.16)); }
.emerging-card { padding:16px; }
.emerging-list { display:flex; flex-wrap:wrap; gap:8px; }
.emerging-chip { display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border-radius:999px; border:1px dashed rgba(151,67,104,.28); background:rgba(255,255,255,.5); color:var(--ink); font-size:var(--fs-xs); font-weight:var(--fw-semibold); }
.emerging-chip b { color:var(--muted); font-size:var(--fs-nano); font-weight:var(--fw-bold); }
.emerging-chip.hot { border-style:solid; border-color:rgba(255,255,255,.85); background:linear-gradient(145deg, rgba(255,255,255,.92), var(--accent-soft)); color:#70505e; }
.emerging-chip.hot b { color:var(--accent-dark); }
.emerging-new { padding:2px 6px; border-radius:999px; background:var(--good); color:white; font-size:var(--fs-nano); font-weight:var(--fw-black); font-style:normal; letter-spacing:.04em; }
.longterm-link { position:relative; display:block; overflow:hidden; margin-top:30px; padding:21px 20px; text-decoration:none; }
.longterm-link::after { content:""; position:absolute; width:120px; height:120px; right:-28px; top:-28px; border-radius:42% 58% 55% 45%; background:linear-gradient(145deg, rgba(255,255,255,.9), var(--accent-soft)); opacity:.75; }
.longterm-link strong { position:relative; z-index:1; display:block; margin-top:6px; font-size:var(--fs-lg); font-weight:var(--fw-black); letter-spacing:-.04em; }
.longterm-link p { position:relative; z-index:1; margin:7px 0 0; max-width:72%; color:var(--muted); font-size:var(--fs-xs); line-height:1.7; }
.longterm-link .arrow { position:absolute; z-index:2; right:20px; bottom:20px; display:grid; place-items:center; width:37px; height:37px; border-radius:50%; background:var(--accent); color:white; font-weight:var(--fw-black); }
.works-heading { align-items:center; }
.search-box { display:flex; align-items:center; gap:7px; padding:7px 10px; border:1px solid rgba(255,255,255,.84); border-radius:999px; background:rgba(255,255,255,.62); }
.search-box span { color:var(--muted); font-size:var(--fs-2xs); }
.search-box input { width:130px; border:0; outline:0; background:transparent; color:var(--ink); font-size:var(--fs-sm); }
.works-list { display:grid; gap:9px; }
.work-card { width:100%; display:grid; grid-template-columns:46px minmax(0,1fr); gap:12px; align-items:center; text-align:left; padding:13px; border:1px solid rgba(255,255,255,.88); border-radius:22px; background:linear-gradient(145deg, rgba(255,255,255,.78), rgba(255,255,255,.5)); box-shadow:0 10px 28px rgba(177,80,123,.07), inset 0 1px 0 white; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.work-rank { display:grid; place-items:center; align-content:center; width:46px; height:46px; border-radius:16px; background:linear-gradient(145deg, var(--accent-soft), rgba(255,255,255,.85)); color:var(--accent-dark); font-size:var(--fs-md); font-weight:var(--fw-black); }
.work-rank small { display:block; font-size:var(--fs-nano); font-weight:var(--fw-semibold); letter-spacing:.1em; }
.work-title { font-size:var(--fs-base); line-height:1.45; font-weight:var(--fw-semibold); }
.work-meta { margin-top:5px; color:var(--muted); font-size:var(--fs-2xs); font-weight:var(--fw-medium); }
.work-person-link { text-decoration:underline; text-underline-offset:2px; }
.work-reading { display:flex; align-items:center; flex-wrap:wrap; gap:5px; margin-top:7px; }
.work-reading span { padding:4px 7px; border-radius:999px; background:rgba(255,231,241,.7); color:#72505f; font-size:var(--fs-2xs); font-weight:var(--fw-semibold); }
.work-reading .mini-hearts { padding:0; background:transparent; color:var(--accent); font-size:12px; letter-spacing:-1px; }
.sheet-backdrop { position:fixed; inset:0; z-index:70; background:rgba(67,41,54,.26); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.work-sheet { position:fixed; z-index:80; left:50%; bottom:0; width:min(100%, 760px); max-height:91dvh; overflow:auto; transform:translate(-50%, 105%); transition:transform .28s cubic-bezier(.22,.8,.24,1); padding:10px 18px calc(28px + env(safe-area-inset-bottom)); border-radius:34px 34px 0 0; border:1px solid rgba(255,255,255,.88); background:rgba(255,249,252,.9); box-shadow:0 -24px 80px rgba(103,49,74,.18), inset 0 1px 0 white; backdrop-filter:blur(30px) saturate(1.25); -webkit-backdrop-filter:blur(30px) saturate(1.25); }
.work-sheet.open { transform:translate(-50%,0); }
.sheet-handle { width:42px; height:5px; margin:0 auto 14px; border-radius:999px; background:rgba(121,93,106,.25); }
.sheet-header { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.rank-badge { color:var(--accent-dark); font-size:var(--fs-2xs); font-weight:var(--fw-black); }
.close-button { border:0; border-radius:999px; padding:9px 13px; background:rgba(255,255,255,.65); font-size:var(--fs-2xs); font-weight:var(--fw-bold); }
.sheet-title { margin:18px 0 7px; font-size:var(--fs-xl); line-height:1.38; font-weight:var(--fw-bold); letter-spacing:-.04em; }
.sheet-circle { color:var(--muted); font-size:var(--fs-xs); line-height:1.6; }
.sheet-voice-link { color:inherit; text-decoration:underline; text-underline-offset:2px; }
.sheet-actions { margin-top:13px; }
.sheet-link { display:inline-block; padding:10px 14px; border-radius:14px; background:linear-gradient(135deg,var(--accent),var(--accent-dark)); color:white; text-decoration:none; font-size:var(--fs-2xs); font-weight:var(--fw-bold); box-shadow:0 9px 22px rgba(217,76,135,.22); }
.detail-block { margin-top:22px; }
.detail-label { margin-bottom:9px; color:var(--muted); font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:.08em; }
.verbal-overview { padding:15px; border:1px solid rgba(255,255,255,.8); border-radius:20px; background:linear-gradient(145deg, rgba(255,255,255,.76), rgba(255,222,236,.45)); }
.verbal-overview p { margin:0; font-size:var(--fs-sm); line-height:1.8; font-weight:var(--fw-semibold); }
.reading-cards { display:grid; gap:9px; }
.reading-card { padding:15px; border:1px solid rgba(255,255,255,.86); border-radius:21px; background:rgba(255,255,255,.58); box-shadow:inset 0 1px 0 white; }
.reading-card > span { color:var(--muted); font-size:var(--fs-2xs); font-weight:var(--fw-bold); }
.reading-card > strong { display:block; margin-top:6px; font-size:var(--fs-lg); font-weight:var(--fw-bold); letter-spacing:-.03em; }
.reading-card > small { display:block; margin-top:4px; color:var(--accent-dark); font-size:var(--fs-2xs); font-weight:var(--fw-bold); }
.reading-card p { margin:8px 0 0; color:#705d67; font-size:var(--fs-xs); line-height:1.75; }
.play-focus { padding:15px; border-radius:21px; background:linear-gradient(145deg, rgba(255,239,246,.78), rgba(255,255,255,.72)); border:1px solid rgba(255,255,255,.85); }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { padding:6px 9px; border-radius:999px; background:linear-gradient(145deg, rgba(255,255,255,.92), var(--accent-soft)); color:#70505e; font-size:var(--fs-2xs); font-weight:var(--fw-semibold); box-shadow:inset 0 1px 0 white; }
.official-tags .chip { background:rgba(255,255,255,.62); color:var(--muted); }
.chip-groups { display:grid; gap:13px; }
.chip-group-name { margin-bottom:6px; color:var(--muted); font-size:var(--fs-2xs); font-weight:var(--fw-bold); }
.structure-summary { padding:12px 13px; border-radius:17px; background:rgba(255,255,255,.62); color:#6c5964; font-size:var(--fs-xs); line-height:1.7; }
.track-timeline { display:flex; overflow:hidden; height:18px; margin:12px 0 7px; border-radius:999px; background:rgba(255,255,255,.72); box-shadow:inset 0 1px 5px rgba(116,73,91,.08); }
.track-segment { min-width:4px; border-right:1px solid rgba(255,255,255,.7); }
.track-segment.erotic { background:linear-gradient(90deg,#ff78ad,#ff9bc2); }
.track-segment.mixed { background:linear-gradient(90deg,#d994ff,#ff8db9); }
.track-segment.story { background:linear-gradient(90deg,#a6d7ff,#c5a7ff); }
.track-segment.unknown { background:#eee7eb; }
.track-legend { display:flex; flex-wrap:wrap; gap:8px; color:var(--muted); font-size:var(--fs-nano); font-weight:var(--fw-medium); }
.track-legend i { display:inline-block; width:7px; height:7px; margin-right:3px; border-radius:50%; vertical-align:0; }
.track-list { margin-top:11px; }
.track-row { display:grid; grid-template-columns:27px minmax(0,1fr) auto; gap:8px; align-items:start; padding:11px 0; border-top:1px solid rgba(255,255,255,.74); }
.track-no { display:grid; place-items:center; width:27px; height:27px; border-radius:10px; background:rgba(255,255,255,.7); color:var(--accent-dark); font-size:var(--fs-nano); font-weight:var(--fw-bold); }
.track-role { display:inline-block; padding:3px 6px; border-radius:999px; background:var(--accent-pale); color:var(--accent-dark); font-size:var(--fs-nano); font-weight:var(--fw-bold); }
.track-title strong { display:block; margin-top:4px; font-size:var(--fs-xs); font-weight:var(--fw-semibold); line-height:1.5; }
.track-title small { display:block; margin-top:4px; color:var(--muted); font-size:var(--fs-2xs); line-height:1.55; }
.track-time { color:var(--muted); font-size:var(--fs-2xs); font-weight:var(--fw-bold); padding-top:5px; }
.raw-detail { border-top:1px solid rgba(255,255,255,.8); padding-top:15px; }
.raw-detail summary { color:var(--muted); font-size:var(--fs-2xs); font-weight:var(--fw-bold); }
.detail-text { margin-top:10px; color:#725f68; font-size:var(--fs-2xs); line-height:1.8; white-space:pre-wrap; }
.empty, .muted { color:var(--muted); font-size:var(--fs-xs); }

/* Long-term */
.longterm-shell { width:min(100%, 1050px); margin:0 auto; padding:max(24px, env(safe-area-inset-top)) 18px 100px; }
.longterm-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }
.back-link { display:inline-flex; align-items:center; gap:6px; padding:9px 12px; border-radius:999px; background:rgba(255,255,255,.62); text-decoration:none; color:var(--muted); font-size:var(--fs-2xs); font-weight:var(--fw-bold); }
.longterm-hero { padding:24px 22px; }
.longterm-hero h1 { margin:7px 0; font-size:var(--fs-3xl); font-weight:var(--fw-black); letter-spacing:-.05em; }
.longterm-hero p { margin:0; color:var(--muted); font-size:var(--fs-sm); line-height:1.75; }
.compare-kpis { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
.compare-kpi { padding:16px; }
.compare-kpi small { color:var(--muted); font-size:var(--fs-2xs); font-weight:var(--fw-medium); }
.compare-kpi strong { display:block; margin-top:4px; font-size:var(--fs-2xl); font-weight:var(--fw-black); }
.compare-kpi span { display:block; margin-top:3px; color:var(--accent-dark); font-size:var(--fs-2xs); font-weight:var(--fw-bold); }
.change-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.change-card { padding:17px; }
.change-card h3 { margin:0 0 10px; font-size:var(--fs-md); font-weight:var(--fw-bold); }
.change-row { display:grid; grid-template-columns:minmax(0,1fr) 60px; gap:9px; align-items:center; padding:9px 0; border-top:1px solid rgba(255,255,255,.72); }
.change-row:first-of-type { border-top:0; }
.change-label small { display:block; color:var(--muted); font-size:var(--fs-2xs); font-weight:var(--fw-medium); }
.change-label b { display:block; margin-top:2px; font-size:var(--fs-xs); font-weight:var(--fw-semibold); }
.change-value { text-align:right; font-size:var(--fs-xs); font-weight:var(--fw-black); }
.year-pair-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.year-pair-card { padding:16px; }
.year-pair-card h4 { margin:0 0 10px; font-size:var(--fs-base); font-weight:var(--fw-bold); }
.axis-history { padding:18px; margin-top:12px; }
.axis-history-head { display:flex; justify-content:space-between; align-items:flex-end; gap:10px; }
.axis-history h3 { margin:0; font-size:var(--fs-lg); font-weight:var(--fw-black); }
.history-row { display:grid; grid-template-columns:96px minmax(140px,1fr) 70px; gap:10px; align-items:center; padding:10px 0; border-top:1px solid rgba(255,255,255,.7); }
.history-row:first-of-type { margin-top:10px; }
.history-name { font-size:var(--fs-xs); font-weight:var(--fw-bold); }
.sparkline { width:100%; height:42px; overflow:visible; }
.history-values { text-align:right; font-size:var(--fs-nano); color:var(--muted); font-weight:var(--fw-medium); line-height:1.55; }
.history-values b { display:block; color:var(--accent-dark); font-size:var(--fs-xs); font-weight:var(--fw-bold); }
.heatmap-wrap { overflow:auto; margin-top:14px; border-radius:18px; }
.heatmap { width:100%; border-collapse:separate; border-spacing:4px; min-width:440px; }
.heatmap th { padding:5px; color:var(--muted); font-size:var(--fs-2xs); font-weight:var(--fw-medium); text-align:center; }
.heatmap th:first-child { text-align:left; }
.heatmap td { padding:8px; border-radius:10px; text-align:center; font-size:var(--fs-2xs); font-weight:var(--fw-bold); background:rgba(255,255,255,.5); }
.heatmap .name { text-align:left; background:transparent; font-weight:var(--fw-bold); }
.heat-cell { background:color-mix(in srgb, var(--accent) calc(var(--heat) * 100%), rgba(255,255,255,.72)) !important; }
.method-note { margin-top:25px; padding:16px; color:var(--muted); font-size:var(--fs-2xs); line-height:1.7; }

@media (max-width: 680px) {
  .app-shell, .longterm-shell { padding-left:12px; padding-right:12px; }
  .topbar { padding-left:5px; padding-right:5px; }
  .control-row { gap:8px; }
  .window-control { align-items:flex-end; }
  .window-control .period-tabs { width:52%; min-width:0; }
  .axis-summary-grid { grid-template-columns:1fr 1fr; }
  .summary-card { min-height:140px; padding:14px; }
  .summary-main { font-size:var(--fs-xl); }
  .momentum-grid, .change-grid, .year-pair-grid { grid-template-columns:1fr; }
  .metric-grid { grid-template-columns:1fr; }
  .metric-card { min-height:auto; }
  .label-row { grid-template-columns:76px minmax(0,1fr) 54px 14px; gap:7px; }
  .hero h2 { max-width:82%; }
  .hero p { max-width:82%; }
  .work-sheet { padding-left:14px; padding-right:14px; }
  .history-row { grid-template-columns:80px minmax(120px,1fr) 62px; gap:7px; }
}