/* PaperLens — 墨 (sumi): dark editorial theme.
 * Ink-black ground, paper-white type, vermilion seal accent. Same journal
 * structure as the print-inspired layout, rendered for a lit screen.
 * Contrast: ink 15.2:1, dim 6.1:1, accent 5.5:1 on the base — all AA+. */
:root {
  --bg: #131316;
  --bg-2: #0e0e11;
  --panel: #1b1a1f;
  --panel2: #24222a;
  --line: #2e2b35;
  --line-strong: #46424f;
  --ink: #ece8e1;
  --ink-soft: #cfc9c0;
  --dim: #9a938c;
  --accent: #e8613a;
  --accent-lift: #ff8a63;
  --gold: #d9b45c;
  --serif: "Newsreader", "Zen Old Mincho", "Hiragino Mincho ProN", serif;
  --sans: "IBM Plex Sans JP", "Hiragino Sans", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; color-scheme: dark; }
body {
  background:
    radial-gradient(ellipse 90% 55% at 50% -10%, rgba(232,97,58,.14), transparent 70%),
    radial-gradient(1px 1px at 18% 26%, rgba(236,232,225,.05) 1px, transparent 0),
    radial-gradient(1px 1px at 72% 62%, rgba(236,232,225,.04) 1px, transparent 0),
    var(--bg);
  background-size: 100% 620px, 260px 260px, 340px 340px, 100% 100%;
  background-repeat: no-repeat, repeat, repeat, no-repeat;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.85;
  min-height: 100vh; display: flex; flex-direction: column;
  border-top: 3px solid var(--accent);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-lift); }
.hidden { display: none !important; }
.dim { color: var(--dim); font-size: .85rem; }

/* ── masthead ── */
.hd {
  border-bottom: 1px solid var(--line-strong);
  background: rgba(19,19,22,.82); backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 20;
}
.hd-top {
  max-width: 880px; margin: 0 auto; padding: .7rem 1.2rem .55rem;
  display: flex; align-items: center; gap: .7rem;
}
/* 言語とログインは右端に固定する。タブと同じ行に置くと、タブが横に伸びたときに
   画面外へ流れて押せなくなる(スマホで実際に起きていた)。 */
.hd-acct { margin-left: auto; display: inline-flex; align-items: center; gap: .45rem; flex: 0 0 auto; }
.logo {
  font-family: var(--serif); font-weight: 700; font-size: 1.7rem; letter-spacing: .01em;
  color: var(--ink); display: inline-flex; align-items: center; gap: .45rem;
}
.logo:hover { color: var(--ink); }
.logo-kanji {
  font-size: .95rem; line-height: 1; color: #fff; background: var(--accent);
  border-radius: 4px; padding: .22rem .28rem; font-weight: 700; transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(232,97,58,.45);
}
/* タブ行。横スクロールさせるが、群の境目が必ず分かるようにする */
.hd-tabs {
  max-width: 880px; margin: 0 auto; padding: 0 1.2rem .5rem;
  display: flex; align-items: stretch; gap: .5rem;
  overflow-x: auto; scrollbar-width: none;
}
.hd-tabs::-webkit-scrollbar { display: none; }
.hd-tabs a { color: var(--ink-soft); font-size: .84rem; letter-spacing: .02em; position: relative; white-space: nowrap; }
.hd-tabs a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -3px;
  border-bottom: 2px solid var(--accent); transition: right .18s ease;
}
.hd-tabs a:hover::after { right: 0; }
.hd-tabs a:hover { color: var(--ink); }

/* ══════ タブの群 ══════
   10項目が等間隔で並ぶと、どこまでが一組か読めない。縦線1本では弱かったので、
   群ごとに小さな見出しを付け、薄い面で囲って「箱」として見せる。
   inline-flex を必ず指定すること。素の span のままだと中身が折り返し、
   ヘッダーが3行に伸びて本文が押し下げられる。 */
.nav-g {
  display: inline-flex; align-items: center; gap: .8rem; flex: 0 0 auto;
  padding: .28rem .6rem .28rem .5rem; white-space: nowrap;
  background: var(--panel); border: 1px solid var(--line); border-radius: 5px;
}
.nav-h {
  font-family: var(--mono); font-size: .6rem; font-weight: 400; letter-spacing: .08em;
  color: var(--dim); text-transform: uppercase;
  padding-right: .6rem; border-right: 1px solid var(--line-strong); flex: 0 0 auto;
}
.avatar { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--accent); cursor: pointer; align-self: center; }

main { flex: 1; width: 100%; max-width: 880px; margin: 0 auto; padding: 2rem 1.2rem 5rem; }

/* ── hero ── */
.hero { padding: 2.2rem 0 1.6rem; animation: rise .5s ease both; }
.kicker {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 1rem;
}
.kicker::before { content: "— "; }
.hero-t {
  font-family: var(--serif); font-weight: 700; font-size: clamp(2rem, 6vw, 3.1rem);
  line-height: 1.3; letter-spacing: .01em;
}
.hero-t em {
  font-style: normal; color: var(--accent-lift);
  background: linear-gradient(transparent 64%, rgba(232,97,58,.24) 64%);
}
.hero-sub { color: var(--dim); margin-top: 1rem; max-width: 34em; }

/* ── genre nav ── */
.gnav {
  display: flex; flex-wrap: wrap; gap: .45rem; align-items: center;
  border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line);
  padding: .9rem 0; margin: .8rem 0 1.8rem;
}
.gnav-label { font-family: var(--mono); font-size: .7rem; letter-spacing: .2em; color: var(--dim); margin-right: .5rem; }
.gchip {
  font-size: .8rem; color: var(--ink-soft); background: var(--panel);
  border: 1px solid var(--line); border-radius: 2px; padding: .16rem .6rem;
  display: inline-flex; gap: .4rem; align-items: baseline; transition: border-color .15s, color .15s;
}
.gchip b { font-family: var(--mono); font-size: .7rem; color: var(--accent); font-weight: 600; }
.gchip:hover { border-color: var(--accent); color: var(--ink); }
.gchip-empty { color: var(--dim); background: transparent; }

/* ── journal TOC rows ── */
.sec-t {
  font-family: var(--serif); font-size: 1.15rem; font-weight: 700;
  margin-bottom: .4rem; letter-spacing: .04em;
}
.sec-t::after { content: ""; display: block; width: 2.2rem; border-bottom: 3px solid var(--accent); margin-top: .35rem; }
.toc { margin-top: .8rem; }
.row {
  display: flex; gap: 1.1rem; padding: 1.15rem 0; color: var(--ink);
  border-bottom: 1px solid var(--line);
  animation: rise .5s ease both; animation-delay: var(--d, 0ms);
  transition: transform .15s ease;
}
.row:hover { transform: translateX(4px); }
.row:hover .row-title { color: var(--accent-lift); }
.row-no {
  font-family: var(--serif); font-size: 1.5rem; color: var(--line-strong);
  font-weight: 500; min-width: 2.1rem; line-height: 1.2;
}
.row-body { display: block; }
.row-meta { display: flex; align-items: center; gap: .5rem; font-family: var(--mono); font-size: .72rem; color: var(--dim); flex-wrap: wrap; }
.row-meta i { font-style: normal; color: var(--line-strong); }
.row-meta em { font-style: normal; color: var(--accent); }
.row-title {
  display: block; font-family: var(--serif); font-weight: 700; font-size: 1.18rem;
  line-height: 1.5; margin: .3rem 0 .25rem; transition: color .15s;
}
.row-sum { display: block; color: var(--dim); font-size: .86rem; line-height: 1.7; }

/* ── badges & chips ── */
.badge {
  font-family: var(--mono); font-size: .64rem; font-weight: 600; letter-spacing: .08em;
  border-radius: 2px; padding: .08rem .45rem; white-space: nowrap;
}
.badge.free { color: var(--ink-soft); border: 1px solid var(--line-strong); background: var(--panel2); }
.badge.premium { color: #1a1408; background: linear-gradient(120deg, var(--gold), #f0d089); }
.badge.paper { color: var(--accent); border: 1px solid rgba(232,97,58,.5); background: rgba(232,97,58,.1); }
.planned-badge { color: var(--dim); border: 1px dashed var(--line-strong); background: transparent; }
.tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .6rem; }
.tags a, .tags span { font-family: var(--mono); font-size: .72rem; color: var(--dim); }
.tags a:hover { color: var(--accent); }
.chip {
  display: inline-block; font-family: var(--mono); font-size: .74rem; color: var(--ink-soft);
  background: var(--panel); border: 1px solid var(--line); border-radius: 2px; padding: .06rem .55rem;
}
.chip:hover { border-color: var(--accent); color: var(--ink); }
.axes { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .7rem 0 0; }
.ax-label { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; color: var(--dim); }
.ax-sep { width: .6rem; }
.crumb { font-family: var(--mono); font-size: .74rem; color: var(--dim); margin-bottom: 1rem; }

/* ── page & article typography ── */
.pg-t {
  font-family: var(--serif); font-weight: 700; font-size: clamp(1.6rem, 4.5vw, 2.2rem);
  line-height: 1.4; margin-bottom: .5rem;
}
.pg-t::after { content: ""; display: block; width: 2.6rem; border-bottom: 3px solid var(--accent); margin-top: .5rem; }
.lede {
  font-family: var(--serif); font-style: italic; color: var(--ink-soft);
  font-size: 1.02rem; line-height: 1.9; margin: .8rem 0;
}
html[lang="ja"] .lede { font-style: normal; }
.a-meta { display: flex; align-items: center; gap: .6rem; font-family: var(--mono); font-size: .74rem; color: var(--dim); flex-wrap: wrap; }
.a-meta i { font-style: normal; color: var(--line-strong); }
.a-rule { border: 0; border-top: 1px solid var(--line-strong); margin: 1.4rem 0 1.8rem; }
/* 罫線の直後に来る最初の見出しは、自分の上線を持たない(線が2本並んでいた) */
.a-rule + h2 { border-top: 0; padding-top: 0; margin-top: 0; }

/* source card — the paper an article is built on */
.srcbox {
  background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 2px;
  padding: .9rem 1.1rem; margin: 1.2rem 0;
}
.srcbox-h {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .4rem;
}
.srcbox a { font-family: var(--serif); font-size: .98rem; line-height: 1.6; color: var(--ink); }
.srcbox a:hover { color: var(--accent-lift); }
.srcbox .srcid { font-family: var(--mono); font-size: .72rem; color: var(--dim); display: block; margin-top: .15rem; }

.prose { counter-reset: sec; }
.prose h1 {
  font-family: var(--serif); font-weight: 700; font-size: clamp(1.5rem, 4.5vw, 2.05rem);
  line-height: 1.45; margin: .6rem 0 .4rem;
}
.prose h2 {
  font-family: var(--serif); font-weight: 700; font-size: 1.32rem; line-height: 1.5;
  margin: 2.4rem 0 .9rem; padding-top: 1.2rem; border-top: 1px solid var(--line);
  counter-increment: sec;
}
.prose h2::before {
  content: counter(sec, decimal-leading-zero);
  font-family: var(--mono); font-weight: 400; font-size: .8rem; color: var(--accent);
  display: block; letter-spacing: .2em; margin-bottom: .2rem;
}
.prose h3 { font-family: var(--serif); font-size: 1.08rem; margin: 1.6rem 0 .6rem; }
.prose p, .prose li { margin: .8rem 0; color: var(--ink-soft); }
.prose ul, .prose ol { padding-left: 1.5rem; }
.prose li::marker { color: var(--accent); }
.prose strong { color: var(--ink); background: linear-gradient(transparent 68%, rgba(232,97,58,.22) 68%); }
.prose code {
  font-family: var(--mono); font-size: .84em; background: var(--panel2);
  border: 1px solid var(--line); border-radius: 3px; padding: .06rem .35rem; color: var(--accent-lift);
}
.prose pre {
  background: var(--bg-2); color: #e3ded4; border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 6px;
  padding: 1.1rem 1.2rem; overflow-x: auto; line-height: 1.6; margin: 1rem 0;
}
.prose pre code { background: none; border: 0; padding: 0; color: inherit; font-size: .82rem; }
.prose blockquote {
  border-left: 3px solid var(--line-strong); padding-left: 1rem; color: var(--dim);
  font-family: var(--serif);
}
.prose table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; margin: 1rem 0; }
.prose th { font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; text-align: left; color: var(--ink); }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: .45rem .8rem .45rem 0; font-size: .9rem; }
.prose thead th { border-bottom: 2px solid var(--line-strong); }
.katex-display { overflow-x: auto; overflow-y: hidden; padding: .4rem 0; }
.katex { font-size: 1.05em; color: var(--ink); }

/* ── references ── */
.refs { border-top: 1px solid var(--line-strong); margin-top: 2.4rem; padding-top: 1.2rem; }
.refs h3 { font-family: var(--serif); font-size: 1.05rem; margin-bottom: .6rem; }
.refs ol { padding-left: 1.3rem; }
.refs li { margin: .4rem 0; font-size: .9rem; color: var(--ink-soft); }
.refs .refid { font-family: var(--mono); font-size: .74rem; color: var(--dim); }

/* ── paywall ── */
.paywall {
  margin: 2.4rem 0; padding: 2rem 1.6rem; text-align: center;
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border: 1px solid var(--line-strong); border-radius: 2px; position: relative;
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--line), 0 24px 60px -30px rgba(232,97,58,.5);
}
.paywall-mark { font-family: var(--serif); font-size: 1.6rem; color: var(--accent); line-height: 1; margin-bottom: .5rem; }
.paywall h3, .paywall h1 { font-family: var(--serif); margin-bottom: .6rem; }
.paywall p { color: var(--ink-soft); }
.cta {
  display: inline-block; margin-top: 1rem; background: var(--accent); color: #fff;
  border: 0; border-radius: 2px; padding: .7rem 1.8rem;
  font-family: var(--sans); font-size: .95rem; font-weight: 700; letter-spacing: .04em; cursor: pointer;
  box-shadow: 3px 3px 0 rgba(0,0,0,.6); transition: transform .12s, box-shadow .12s, background .12s;
}
.cta:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 rgba(0,0,0,.6); background: var(--accent-lift); color: #16110d; }
.ghost {
  background: transparent; border: 1px solid var(--line-strong); color: var(--ink-soft);
  border-radius: 2px; padding: .35rem 1rem; cursor: pointer; font-family: var(--sans); font-size: .88rem;
}
.ghost:hover { border-color: var(--accent); color: var(--accent-lift); }
.ghost.liked { border-color: var(--accent); color: var(--accent); }

.engage { margin: 1.8rem 0; display: flex; gap: .8rem; }

/* ── comments ── */
.comments { border-top: 2px solid var(--line-strong); padding-top: 1.5rem; }
.comments h3 { font-family: var(--serif); margin-bottom: 1rem; }
#comment-form textarea {
  width: 100%; min-height: 84px; background: var(--panel); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 2px; padding: .7rem; font: inherit; font-size: .9rem;
}
#comment-form textarea:focus { outline: 2px solid rgba(232,97,58,.5); }
#comment-form .cta { padding: .45rem 1.3rem; font-size: .85rem; margin-top: .5rem; }
.comment { display: flex; gap: .75rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.comment img { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-strong); }
.comment .who { display: flex; align-items: center; gap: .5rem; font-size: .82rem; flex-wrap: wrap; }
.comment .who .name { font-weight: 700; }
.comment .who time { font-family: var(--mono); color: var(--dim); font-size: .7rem; }
.member-badge {
  font-family: var(--mono); font-size: .58rem; font-weight: 700; letter-spacing: .08em;
  color: #1a1408; background: linear-gradient(120deg, var(--gold), #f0d089);
  border-radius: 2px; padding: .05rem .4rem;
}
.comment .txt { font-size: .92rem; white-space: pre-wrap; word-break: break-word; margin-top: .15rem; color: var(--ink-soft); }
.comment .like-c { background: none; border: 0; color: var(--dim); cursor: pointer; font-size: .78rem; padding: .2rem 0 0; font-family: var(--mono); }
.comment .like-c.liked { color: var(--accent); }

/* ── panels / learn / landscape ── */
.panel, .lgenre, .planned-box {
  background: var(--panel); border: 1px solid var(--line); border-radius: 2px;
  padding: 1.2rem 1.4rem; margin: 1rem 0;
}
.panel h3, .planned-box h3 { font-family: var(--serif); margin-bottom: .3rem; }
.lgroup { margin: 2.2rem 0; }
.lgroup > h2 {
  font-family: var(--serif); font-size: 1.3rem;
  border-left: 4px solid var(--accent); padding-left: .7rem; margin-bottom: .3rem;
}
/* 体系のジャンルは開閉式。見出し行に本数を出して、開く前に量が分かるようにする */
.lgenre { margin: .7rem 0; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); }
.lgenre > summary { display: grid; grid-template-columns: auto 1fr auto; column-gap: .5rem; align-items: baseline;
  padding: .7rem .9rem; cursor: pointer; list-style: none; }
.lgenre > summary::-webkit-details-marker { display: none; }
.lgenre > summary::after { content: "›"; grid-column: 3; grid-row: 1 / span 2; align-self: center; font-size: 1.4rem;
  color: var(--dim); transform: rotate(90deg); transition: transform .15s; }
.lgenre[open] > summary::after { transform: rotate(-90deg); }
.lg-name { grid-column: 1; font-family: var(--serif); font-size: 1.02rem; font-weight: 700; }
.lg-n { grid-column: 2; justify-self: start; font-family: var(--mono); font-size: .68rem; font-weight: 400; color: var(--accent); }
.lg-desc { grid-column: 1 / span 2; font-size: .78rem; color: var(--dim); line-height: 1.5; }
.lg-all { padding: 0 .9rem; font-size: .76rem; }
.lgenre > .lls { padding: 0 .9rem .6rem 2.2rem; margin-top: .2rem; }
.lls { padding-left: 1.4rem; margin-top: .6rem; }
.lls li { margin: .45rem 0; }
.lls li::marker { font-family: var(--mono); font-size: .78rem; color: var(--accent); }
.lls .planned { color: var(--dim); list-style-type: circle; }
.planned-box ul { padding-left: 1.3rem; color: var(--dim); }
.planned-box li { margin: .35rem 0; }
.ls-cat { font-family: var(--mono); font-size: .78rem; letter-spacing: .14em; color: var(--accent); margin: 1.3rem 0 .4rem; text-transform: uppercase; }
.ls-flag { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }

.hist { display: flex; justify-content: space-between; gap: .8rem; padding: .55rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.hist .meta { font-family: var(--mono); color: var(--dim); font-size: .74rem; white-space: nowrap; }

/* ── install prompt (PWA) ── */
#install-bar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 1.1rem; z-index: 30;
  display: flex; align-items: center; gap: .8rem;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 3px;
  padding: .6rem .8rem .6rem 1rem; box-shadow: 0 18px 40px -20px #000;
  font-size: .85rem; max-width: calc(100vw - 2rem);
}
#install-bar .cta { margin: 0; padding: .35rem 1rem; font-size: .82rem; }
#install-bar .x { background: none; border: 0; color: var(--dim); cursor: pointer; font-size: 1rem; line-height: 1; }

/* ── footer ── */
.ft {
  text-align: center; font-family: var(--mono); color: var(--dim); font-size: .72rem;
  letter-spacing: .12em; padding: 1.6rem; border-top: 1px solid var(--line-strong);
}
.ft-rule { display: block; width: 2rem; border-top: 3px solid var(--accent); margin: 0 auto .8rem; }

@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero, .row { animation: none; } }
@media (max-width: 620px) {
  .row-no { display: none; }
}
@media (display-mode: standalone) {
  .hd { position: sticky; padding-top: env(safe-area-inset-top); }
  body { padding-bottom: env(safe-area-inset-bottom); }
}

/* ── Interactive Lab ── */
.lab { margin: 1.4rem 0 2rem; }
.lab-canvas {
  width: 100%; border: 1px solid var(--line); border-radius: 3px;
  background: radial-gradient(ellipse 70% 60% at 50% 30%, #1d1b22, var(--bg-2));
  overflow: hidden; cursor: grab; touch-action: pan-y;
}
.lab-canvas:active { cursor: grabbing; }
.lab-canvas canvas { display: block; }

.lab-hud { display: grid; grid-template-columns: 1fr auto; gap: 1rem; margin-top: 1rem; align-items: start; }
.lab-readout { background: var(--panel); border: 1px solid var(--line); border-radius: 3px; padding: .9rem 1.1rem; }
.lab-q { font-family: var(--serif); font-size: 1.05rem; margin-bottom: .5rem; }
.lab-q b { color: var(--accent); font-size: 1.25rem; }
.lab-q span { color: var(--dim); font-size: .85rem; }
.wlist { list-style: none; padding: 0; margin: 0; }
.wlist li { position: relative; margin: .25rem 0; height: 1.55rem; }
.wbar {
  position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, rgba(232,97,58,.55), rgba(232,97,58,.18));
  border-left: 2px solid var(--accent); border-radius: 2px; transition: width .18s ease;
}
.wlabel {
  position: relative; display: block; padding: .1rem .5rem;
  font-family: var(--mono); font-size: .78rem; color: var(--ink); line-height: 1.35rem;
}
.lab-focus { display: flex; align-items: center; gap: .6rem; margin-top: .7rem; }
.focus-track { flex: 1; height: 4px; background: var(--panel2); border-radius: 2px; overflow: hidden; }
#focus-bar { display: block; height: 100%; background: var(--accent); transition: width .2s ease; }
.lab-focus em { font-style: normal; font-size: .76rem; color: var(--dim); white-space: nowrap; }
.warn { color: var(--accent); font-family: var(--mono); font-size: .74rem; }

.lab-matrix { background: var(--panel); border: 1px solid var(--line); border-radius: 3px; padding: .9rem; }
.lab-mh { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; color: var(--dim); margin-bottom: .5rem; }
#matrix { display: block; max-width: 100%; }

.lab-controls {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .8rem 1.2rem;
  margin-top: 1rem; padding: 1rem 1.2rem; background: var(--panel); border: 1px solid var(--line); border-radius: 3px;
}
.ctl { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; color: var(--dim); }
.ctl b { color: var(--accent); font-family: var(--mono); }
.ctl select, .ctl input[type=text] {
  background: var(--bg-2); color: var(--ink); border: 1px solid var(--line-strong);
  border-radius: 2px; padding: .35rem .5rem; font: inherit; font-size: .84rem;
}
.ctl input[type=range] { accent-color: var(--accent); }
.ctl-check { flex-direction: row; align-items: center; gap: .5rem; color: var(--ink-soft); }
.ctl-check input { accent-color: var(--accent); width: 1rem; height: 1rem; }

.lab-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: linear-gradient(100deg, rgba(232,97,58,.14), transparent 70%), var(--panel);
  border: 1px solid var(--line-strong); border-left: 3px solid var(--accent);
  border-radius: 3px; padding: 1rem 1.2rem; margin: 1.4rem 0;
}
.lab-cta b { font-family: var(--serif); font-size: 1.05rem; display: block; }
.lab-cta span { color: var(--dim); font-size: .85rem; }
.lab-cta .cta { margin: 0; white-space: nowrap; }

@media (max-width: 700px) {
  .lab-hud { grid-template-columns: 1fr; }
  .lab-matrix { overflow-x: auto; }
}

/* ── in-article interactive figures ── */
.anim {
  margin: 1.8rem 0; padding: 1rem 1.1rem 0.9rem;
  background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 3px;
}
.anim-body { display: block; }
.anim-canvas { display: block; width: 100%; border-radius: 2px; background: var(--bg-2); touch-action: pan-y; }
.anim figcaption {
  margin-top: .7rem; font-size: .82rem; color: var(--dim); line-height: 1.65;
  display: flex; gap: .6rem; align-items: baseline;
}
.anim-n {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .12em;
  color: var(--accent); border: 1px solid rgba(232,97,58,.4); border-radius: 2px;
  padding: .05rem .35rem; flex: none;
}
.anim-note { margin-top: .55rem; font-size: .8rem; color: var(--ink-soft); line-height: 1.6; min-height: 2.6em; }
.anim-controls { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin-top: .8rem; align-items: center; }
.anim-ctl { display: flex; flex-direction: column; gap: .1rem; font-size: .74rem; color: var(--dim); min-width: 140px; flex: 1 1 140px; }
.anim-ctl b { color: var(--accent); font-family: var(--mono); font-weight: 600; }
.anim-ctl input[type=range] { accent-color: var(--accent); width: 100%; height: 1.6rem; }
.anim-btn {
  background: transparent; border: 1px solid var(--line-strong); color: var(--ink-soft);
  border-radius: 2px; padding: .3rem .9rem; font: inherit; font-size: .78rem; cursor: pointer;
}
.anim-btn:hover { border-color: var(--accent); color: var(--accent-lift); }
.anim-tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .7rem; }
.anim-tabs button {
  background: var(--bg-2); border: 1px solid var(--line); color: var(--dim);
  border-radius: 2px; padding: .22rem .7rem; font-family: var(--mono); font-size: .74rem; cursor: pointer;
}
.anim-tabs button.on { border-color: var(--accent); color: var(--accent); background: rgba(232,97,58,.1); }

/* ── numbered display equations ── */
.eq-block {
  display: flex; align-items: center; gap: .8rem; margin: 1.3rem 0;
  padding: .3rem 0 .3rem .9rem; border-left: 2px solid var(--line-strong);
}
.eq-body { flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; }
.eq-body .katex-display { margin: 0; }
.eq-n { font-family: var(--mono); font-size: .78rem; color: var(--accent); flex: none; }

/* ── soft navigation ── */
@view-transition { navigation: auto; }
main { view-transition-name: pl-main; }
::view-transition-old(pl-main) { animation: fade-out .12s ease both; }
::view-transition-new(pl-main) { animation: fade-in .18s ease both; }
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } }
body.nav-busy { cursor: progress; }
body.nav-busy .hd::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: sweep .8s linear infinite;
}
.hd { position: sticky; }
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ── mobile ── */
@media (max-width: 640px) {
  body { font-size: 15.5px; line-height: 1.8; }
  main { padding: 1.2rem 1rem 4rem; }
  .hd-top { padding: .55rem .7rem .45rem; }
  .logo { font-size: 1.35rem; }
  .hd-tabs { padding: 0 .7rem .45rem; font-size: .82rem; }
  .hero { padding: 1.4rem 0 1rem; }
  .hero-t { font-size: clamp(1.65rem, 8vw, 2.2rem); }
  .prose h2 { font-size: 1.18rem; margin-top: 1.9rem; }
  .prose pre { padding: .85rem .9rem; font-size: .95em; border-radius: 4px; }
  .prose pre code { font-size: .76rem; }
  .anim { padding: .8rem .8rem .7rem; margin: 1.4rem -.35rem; }
  .anim-ctl { min-width: 100%; flex-basis: 100%; }
  .anim-controls { gap: .35rem; }
  .eq-block { padding-left: .6rem; gap: .5rem; }
  .eq-n { font-size: .7rem; }
  .katex-display > .katex { font-size: .95em; }
  .lab-controls { padding: .8rem .9rem; grid-template-columns: 1fr; }
  .lab-hud { gap: .7rem; }
  .paywall { padding: 1.4rem 1rem; }
  .cta { padding: .65rem 1.3rem; font-size: .9rem; }
  #install-bar { left: .7rem; right: .7rem; transform: none; bottom: .7rem; font-size: .8rem; }
  .row { gap: .7rem; padding: .95rem 0; }
  .row-title { font-size: 1.06rem; }
  .lab-cta { padding: .85rem .9rem; }
  .lab-cta .cta { width: 100%; text-align: center; }
}
@media (hover: none) {
  .row:hover { transform: none; }          /* no sticky hover state on touch */
  .anim-ctl input[type=range] { height: 2rem; }   /* bigger touch target */
}

/* ヘッダーはスマホでも2段。上段=ロゴ/モード/言語/ログイン、下段=タブ。 */
#auth-btn .sm { display: none; }
@media (max-width: 640px) {
  .logo { font-size: .95rem; flex: 0 0 auto; gap: .25rem; }
  .logo-kanji { font-size: .62rem; padding: .14rem .2rem; }
  .hd-top { gap: .28rem; }
  .modesw { margin-left: auto; flex: 0 1 auto; min-width: 0; }
  .hd-acct { margin-left: .1rem; gap: .2rem; }
  #theme-btn { padding: .15rem .3rem; font-size: .78rem; }
  #auth-btn { flex: none; padding: .22rem .42rem; font-size: .7rem; }
  .hd-acct .langsw-b { padding: .16rem .4rem; }
@media (max-width: 400px) { .logo-kanji { display: none; } }
@media (max-width: 339px) {
  /* ここまで狭いと1行に収まらない。無理に潰すより、アカウント欄を次の行へ。 */
  .hd-top { flex-wrap: wrap; }
  .hd-acct { flex-basis: 100%; justify-content: flex-end; margin-left: 0; }
}
  #auth-btn .lg { display: none; }
  #auth-btn .sm { display: inline; }
  .avatar { width: 26px; height: 26px; }

  /* タブは横スクロール。折り返すとヘッダーが縦に伸びて本文が押し下げられる。
     端が切れているのが分かるよう、右端にぼかしを置く。 */
  .hd-tabs { gap: .4rem; padding-bottom: .4rem; -webkit-overflow-scrolling: touch; }
  .hd-tabs a { font-size: .8rem; }
  .nav-g { gap: .6rem; padding: .24rem .5rem .24rem .4rem; }
  .modesw-b { padding: .14rem .36rem; font-size: .58rem; }
  .nav-h { font-size: .56rem; padding-right: .45rem; }
  .hd::after {
    content: ""; position: absolute; right: 0; bottom: 1px; width: 1.6rem; height: 2rem;
    background: linear-gradient(90deg, transparent, var(--bg)); pointer-events: none;
  }
}

/* ── curriculum pager ── */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: 2.4rem 0 0; }
.pg-cell {
  display: flex; flex-direction: column; gap: .3rem; padding: .9rem 1rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 3px; color: var(--ink);
  transition: border-color .15s;
}
.pg-cell:hover { border-color: var(--accent); color: var(--ink); }
.pg-next { text-align: right; border-right: 3px solid var(--accent); }
.pg-prev { border-left: 3px solid var(--line-strong); }
.pg-empty { background: none; border: 0; }
.pg-dir { font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; color: var(--dim); text-transform: uppercase; }
.pg-next .pg-dir { color: var(--accent); }
.pg-title { font-family: var(--serif); font-size: .95rem; line-height: 1.5; }
@media (max-width: 640px) {
  .pager { grid-template-columns: 1fr; gap: .55rem; }
  .pg-next { text-align: left; border-right: 0; border-left: 3px solid var(--accent); }
}

/* ── curriculum steps on the Learn page ── */
.lls .lstep { list-style: none; margin-left: -1.4rem; display: grid;
  grid-template-columns: auto 1fr; column-gap: .55rem; row-gap: .1rem; align-items: baseline; margin-bottom: .55rem; }
.lls .lstep > a { grid-column: 2; font-size: .92rem; line-height: 1.45; }
.lstep-meta { grid-column: 2; display: flex; align-items: center; gap: .5rem; }
.lstep-n {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; color: var(--accent);
  border: 1px solid rgba(232,97,58,.4); border-radius: 2px; padding: .02rem .4rem; flex: none;
}
.lstep-min { font-family: var(--mono); font-size: .68rem; color: var(--dim); }

/* ── field cards (the top of the site) ── */
.fields { margin: 1.6rem 0 2.4rem; }
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .9rem; margin-top: 1rem; }
.fcard {
  display: flex; flex-direction: column; gap: .35rem; padding: 1.2rem 1.3rem 1.1rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 3px;
  color: var(--ink); position: relative; overflow: hidden;
  transition: border-color .15s, transform .15s;
}
.fcard::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), transparent);
  transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.fcard:hover { border-color: var(--accent); transform: translateY(-2px); color: var(--ink); }
.fcard:hover::after { transform: scaleX(1); }
.fmark { font-size: 1.5rem; line-height: 1; color: var(--accent); }
.fname { font-family: var(--serif); font-size: 1.25rem; font-weight: 700; line-height: 1.4; }
.fdesc { color: var(--dim); font-size: .85rem; line-height: 1.7; }
.fmeta { font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; color: var(--dim); margin-top: .35rem; }
@media (max-width: 640px) { .fgrid { grid-template-columns: 1fr; gap: .6rem; } .fcard { padding: 1rem 1.05rem; } }

/* ── top-page tabs ── */
.tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.4rem 0 1.6rem; border-bottom: 2px solid var(--line-strong); }
.tab {
  background: none; border: 0; border-bottom: 3px solid transparent;
  padding: .55rem 1.1rem; margin-bottom: -2px; cursor: pointer;
  font-family: inherit; font-size: .95rem; font-weight: 700; color: var(--dim);
}
.tab:hover { color: var(--ink); }
.tab.on { color: var(--accent); border-bottom-color: var(--accent); }

.fblock { margin: 1.8rem 0; }
.fblock-h { display: flex; align-items: baseline; gap: .5rem; font-size: 1.05rem; margin-bottom: .7rem; padding-bottom: .35rem; border-bottom: 1px solid var(--line); }
.gnav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .8rem; }
.gcell { background: var(--panel); border: 1px solid var(--line); border-radius: 2px; padding: .7rem .85rem; }
.gcell-h { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font-weight: 700; font-size: .9rem; }
.gcell-h b { font-family: var(--mono); font-size: .7rem; color: var(--accent); }
.gcell ul { list-style: none; padding: 0; margin: .45rem 0 0; }
.gcell li { font-size: .84rem; line-height: 1.65; margin: .18rem 0; }
.gcell p code { font-size: .68rem; }

.booklist { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 2rem; }
.booklist li { font-size: .88rem; line-height: 1.9; break-inside: avoid; }
.booklist li b { font-family: var(--mono); font-size: .72rem; color: var(--dim); margin-right: .45rem; }

/* the lab embedded inside an article figure */
.lab-inline .lab-canvas { min-height: 320px; }
.lab-inline .lab-hud { margin-top: .8rem; }

@media (max-width: 640px) {
  .tabs { gap: .1rem; }
  .tab { padding: .5rem .7rem; font-size: .85rem; }
  .gnav-grid { grid-template-columns: 1fr; }
  .booklist { columns: 1; }
}

/* ── search ── */
.search { margin: 1.2rem 0 1.4rem; }
.search-input {
  width: 100%; padding: .75rem 1rem; font: inherit; font-size: 1rem;
  background: var(--panel); color: var(--ink);
  border: 1.5px solid var(--line-strong); border-radius: 3px;
}
.search-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.search-results { margin-top: .8rem; }
.sr {
  display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: baseline;
  padding: .6rem .2rem; border-bottom: 1px dashed var(--line); color: var(--ink);
}
.sr:hover { background: var(--panel); }
.sr-kind { font-family: var(--mono); font-size: .66rem; color: var(--accent); }
.sr-title { font-weight: 700; line-height: 1.5; }
.sr-meta { font-family: var(--mono); font-size: .7rem; color: var(--dim); white-space: nowrap; }
.reqbox {
  margin-top: 1rem; padding: 1.1rem 1.2rem; background: var(--panel);
  border: 1.5px solid var(--line-strong); border-left: 4px solid var(--accent); border-radius: 3px;
}
.reqbox-h { font-weight: 700; margin-bottom: .3rem; }
.reqbox .cta { margin-top: .8rem; }
@media (max-width: 640px) {
  .sr { grid-template-columns: auto 1fr; }
  .sr-meta { grid-column: 2; }
}

/* ── supporter plots ── */
.plot {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem;
  margin: 2.4rem 0 0; padding: .8rem 1rem;
  border-top: 1px solid var(--line-strong); font-size: .85rem; color: var(--dim);
}
.plot-h { font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; }
.plot-body { color: var(--ink); }
.plot-body b { font-weight: 700; }
.plot-note { color: var(--dim); font-size: .8rem; }
.plot-cta { font-size: .82rem; }
.plot-state.taken { color: var(--accent); }

/* ── source links ── */
.srcby { display: block; font-family: var(--mono); font-size: .72rem; color: var(--dim); margin-top: .2rem; }
.srclinks { display: inline-flex; gap: .5rem; margin-left: .6rem; }
.srclinks a { font-family: var(--mono); font-size: .72rem; }
.srcsep { color: var(--dim); }
.srcdiv { border: 0; border-top: 1px dashed var(--line); margin: .7rem 0; }
.refs .srclinks { margin-left: .4rem; }

/* ── student mode ── */
.usec { margin: 2rem 0; }
.usec > h2 { font-family: var(--serif); font-size: 1.2rem; padding-bottom: .35rem; border-bottom: 1px solid var(--line); margin-bottom: .9rem; }
.social-t { font-family: var(--serif); font-size: 1.05rem; font-weight: 700; margin-bottom: .4rem; }
.social-ex { margin: .7rem 0 0; padding-left: 1.3rem; }
.social-ex li { margin: .25rem 0; font-size: .9rem; }
.ucard { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: 2px; padding: .8rem 1rem; margin: .7rem 0; }
.ucard-h { font-weight: 700; margin-bottom: .25rem; }
.ucard.def { border-left-color: var(--accent); }
.ucard.formula { border-left-color: var(--accent-lift); font-family: var(--mono); }
.ucard.tip { border-left-color: var(--gold); }
.ucard.ex { border-left-color: var(--dim); }
.ucell-n { font-family: var(--mono); font-size: .68rem; color: var(--dim); margin-top: .4rem; }

.quiz { background: var(--panel); border: 1px solid var(--line); border-radius: 3px; padding: .9rem 1rem; margin: .8rem 0; }
.quiz-q { margin-bottom: .6rem; }
.quiz-q b { font-family: var(--mono); color: var(--accent); margin-right: .4rem; }
.quiz-choices { display: grid; gap: .4rem; }
.quiz-c { text-align: left; padding: .55rem .8rem; font: inherit; font-size: .92rem;
  background: var(--bg-2); color: var(--ink); border: 1.5px solid var(--line-strong); border-radius: 3px; cursor: pointer; }
.quiz-c:hover:not(:disabled) { border-color: var(--accent); }
.quiz-c.right { border-color: #4ade80; color: #4ade80; }
.quiz-c.wrong { border-color: var(--accent); opacity: .7; text-decoration: line-through; }
.quiz-exp { margin-top: .6rem; font-size: .88rem; color: var(--ink-soft); border-top: 1px dashed var(--line); padding-top: .5rem; }

.career { background: var(--panel); border: 1px solid var(--line); border-radius: 2px; padding: .8rem 1rem; margin: .6rem 0; }
.career-h { display: flex; justify-content: space-between; gap: .8rem; font-weight: 700; }
.career-pay { font-family: var(--mono); color: var(--accent); font-size: .9rem; white-space: nowrap; }
.career-d { font-size: .88rem; margin-top: .3rem; color: var(--ink-soft); }
.career-m { margin-top: .4rem; font-size: .76rem; color: var(--dim); }
.career-m span { font-family: var(--mono); border: 1px solid var(--line); border-radius: 2px; padding: 0 .35rem; margin-right: .3rem; }
.salchart { margin: .6rem 0 1rem; }
.salrow { display: grid; grid-template-columns: 10em 1fr auto; gap: .6rem; align-items: center; margin: .3rem 0; font-size: .82rem; }
.sallabel { color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.salbar { height: 10px; background: linear-gradient(90deg, var(--accent), rgba(232,97,58,.35)); border-radius: 2px; }
.salval { font-family: var(--mono); font-size: .75rem; color: var(--dim); }
@media (max-width: 640px) { .salrow { grid-template-columns: 7em 1fr auto; font-size: .76rem; } }

/* ── モード切替（左上）── */
.modesw { display: inline-flex; border: 1.5px solid var(--line-strong); border-radius: 999px; overflow: hidden;
  margin-left: .7rem; margin-right: auto; flex: 0 0 auto; align-self: center; }
.modesw-b { padding: .22rem .72rem; font-size: .74rem; font-family: var(--mono); letter-spacing: .02em;
  color: var(--dim); text-decoration: none; white-space: nowrap; transition: background .2s, color .2s; }
.modesw-b:hover { color: var(--ink); }
.modesw-b.on { background: var(--accent); color: #fff; }
@media (max-width: 640px) { .modesw { margin-left: .4rem; } .modesw-b { padding: .2rem .5rem; font-size: .66rem; } }

/* ── 埋め込みラボ ── */
.lab-embed { margin: 1.6rem 0 2.4rem; }
.lab-embed .anim { margin: 1rem 0; }
.lab-howto { margin: .8rem 0; padding-left: 1.2rem; font-size: .85rem; color: var(--ink-soft); }
.lab-howto li { margin: .22rem 0; }

/* ── 図（学生モード）── */
.viz { margin: .9rem 0 .3rem; }
.viz-t { font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; color: var(--dim); margin-bottom: .3rem; }
.viz-svg { width: 100%; height: auto; display: block; }
.viz-n { font-size: .78rem; color: var(--dim); margin-top: .3rem; border-left: 2px solid var(--line); padding-left: .55rem; }
.usec.gentle { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 3px; padding: .9rem 1.1rem; }
.usec.gentle > h2 { border: 0; padding: 0; margin-bottom: .4rem; font-size: 1rem; }
.stage { margin: 2.2rem 0; }
.stage-h { font-family: var(--serif); font-size: 1.35rem; display: flex; align-items: baseline; gap: .6rem; border-bottom: 2px solid var(--accent); padding-bottom: .3rem; }
.stage-h b { font-family: var(--mono); font-size: .72rem; color: var(--dim); font-weight: 400; }
.stage-l { color: var(--ink-soft); font-size: .88rem; margin: .4rem 0 1rem; }
.grade-h { margin-top: 1.1rem; }

/* ── プレミアム会員のアイコン（虹の輪）── */
@property --pl-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.avatar.premium {
  border: 0; padding: 2.5px; background-clip: padding-box;
  background-image: conic-gradient(from var(--pl-ang),
    #ff3b6b, #ff9f0a, #ffd60a, #32d74b, #40c8e0, #5e5ce6, #bf5af2, #ff3b6b);
  box-shadow: 0 0 0 1px var(--bg), 0 0 12px rgba(191, 90, 242, .45);
  animation: pl-ring 4.5s linear infinite, pl-sparkle 2.6s ease-in-out infinite;
}
@keyframes pl-ring { to { --pl-ang: 360deg; } }
@keyframes pl-sparkle {
  0%, 100% { box-shadow: 0 0 0 1px var(--bg), 0 0 8px rgba(255, 214, 10, .35); }
  50%      { box-shadow: 0 0 0 1px var(--bg), 0 0 16px rgba(64, 200, 224, .6); }
}
@media (prefers-reduced-motion: reduce) { .avatar.premium { animation: none; } }
.panel-actions { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-top: .6rem; }

/* ── 付箋コメント ──
 * 本文の可読性が最優先。たたんだ付箋は小さな丸だけで、既定の置き場所は
 * 本文の右端。開いたカードも本文の外(広い画面では右の余白)へ逃がす。
 * 右下の固定ボタンで一発で全部消せる。
 */
.notes-host { position: relative; }
.notes-layer { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.notes-layer > * { pointer-events: auto; }

/* 貼るモードでは本文が押せる面になる。何が起きるかを見た目で伝える */
body.notes-adding .prose { cursor: crosshair; }
body.notes-adding .prose [data-line]:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }

.sticky { position: absolute; transform: translate(-50%, -.2rem); }
.sticky.open { transform: translate(-50%, -.2rem); z-index: 20; }

/* たたんだ状態＝小さな吹き出し。本文の上に乗っても読み進めを止めない大きさ */
.sticky-dot {
  position: relative;
  display: inline-flex; align-items: center; gap: .15rem;
  width: 1.55rem; height: 1.55rem; padding: 0;
  font-size: .72rem; line-height: 1;
  color: var(--ink); background: var(--panel);
  border: 1px solid var(--line-strong); border-radius: 999px 999px 999px 3px;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
  cursor: pointer; opacity: .82;
  transition: opacity .15s, transform .15s, border-color .15s;
}
.sticky-dot:hover { opacity: 1; transform: scale(1.12); border-color: var(--accent); }
.sticky-dot .sd-face { display: grid; place-items: center; width: 100%; font-weight: 700; }
.sticky-dot img { width: 1.25rem; height: 1.25rem; border-radius: 50%; object-fit: cover; }
.sd-v { position: absolute; top: -.35rem; right: -.35rem; min-width: .95rem;
  font-family: var(--mono); font-size: .58rem; line-height: .95rem; text-align: center;
  color: #fff; background: var(--accent); border-radius: 999px; }
.sticky.ai .sticky-dot { border-color: rgba(139,138,252,.55); }
.sticky.mine .sticky-dot { border-color: var(--accent); }

/* 開いたカード。角の欠けで吹き出しに見せる */
.sticky-card {
  width: min(17rem, 78vw); padding: .55rem .65rem .5rem;
  background: var(--panel); border: 1px solid var(--line-strong);
  border-radius: 6px 6px 6px 2px; box-shadow: 0 6px 22px rgba(0,0,0,.32);
}
.sticky.ai .sticky-card { border-left: 3px solid rgba(139,138,252,.7); }
.sc-head { display: flex; align-items: center; gap: .4rem; font-size: .74rem;
  padding-bottom: .35rem; border-bottom: 1px dashed var(--line); }
.sc-who { display: flex; align-items: center; gap: .35rem; min-width: 0; }
.sc-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-time { margin-left: auto; font-size: .66rem; }
.sc-x { padding: 0 .25rem; font-size: .95rem; line-height: 1; color: var(--dim);
  background: transparent; border: 0; cursor: pointer; }
.sc-x:hover { color: var(--ink); }
.sc-body { font-size: .85rem; margin: .45rem 0 .4rem; word-break: break-word; }
.sc-foot { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.sc-mine { font-size: .66rem; }
.sc-text { width: 100%; padding: .45rem .55rem; margin-top: .45rem; font: inherit; font-size: .85rem;
  color: var(--ink); background: var(--bg-2); border: 1px solid var(--line-strong);
  border-radius: 3px; resize: vertical; }

/* 右下の固定ボタン */
.notes-fab {
  position: fixed; right: max(.9rem, env(safe-area-inset-right)); bottom: max(.9rem, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: .2rem;
  width: 3rem; height: 3rem; padding: 0; font-size: 1.15rem;
  color: var(--ink); background: var(--panel);
  border: 1px solid var(--line-strong); border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0,0,0,.35); cursor: pointer; z-index: 60;
  transition: border-color .15s, opacity .15s;
}
.notes-fab:hover { border-color: var(--accent); }
.notes-fab.off { opacity: .62; }
.nf-ico { display: grid; place-items: center; width: 100%; }
.nf-n { position: absolute; top: -.15rem; right: -.15rem; min-width: 1.15rem;
  font-family: var(--mono); font-size: .62rem; line-height: 1.15rem; text-align: center;
  color: #fff; background: var(--accent); border-radius: 999px; }
.notes-fab-add { bottom: calc(max(.9rem, env(safe-area-inset-bottom)) + 3.5rem);
  width: 2.5rem; height: 2.5rem; font-size: 1rem; }
.notes-fab-add.on { color: #fff; background: var(--accent); border-color: var(--accent); }
.nf-plus { display: grid; place-items: center; width: 100%; }

.notes-hint {
  position: fixed; left: 50%; bottom: 5.2rem; transform: translateX(-50%) translateY(.4rem);
  padding: .4rem .8rem; font-size: .78rem; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0,0,0,.3); opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; z-index: 61;
}
.notes-hint.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 広い画面では、開いたカードを本文の外(右の余白)へ逃がす */
@media (min-width: 1180px) {
  .sticky.open { transform: translate(.6rem, -.2rem); }
}
@media (max-width: 560px) {
  .sticky-card { width: min(15rem, 74vw); }
  /* 画面の右端から出ないよう、右寄りの付箋は内側に寄せる */
  .sticky.open { transform: translate(-88%, -.2rem); }
}

/* 付箋の中で使い回す表示 */
.ln-av { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; background: var(--line); }
.ln-pm { color: var(--gold); font-style: normal; }
.ln-ai { font-family: var(--mono); font-size: .7rem; color: #8b8afc; border: 1px solid rgba(139,138,252,.4); border-radius: 2px; padding: 0 .3rem; }
.ln-q { font-size: .8rem; color: var(--ink-soft); border-left: 2px solid var(--line-strong); padding-left: .5rem; margin: .3rem 0; }
.ln-vote { padding: .12rem .5rem; font-family: var(--mono); font-size: .7rem;
  color: var(--dim); background: transparent; border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer; }
.ln-vote:hover { color: var(--ink); border-color: var(--accent); }
.ln-vote.on { color: #fff; background: var(--accent); border-color: var(--accent); }

/* ── 貢献ボード ── */
.board { list-style: none; padding: 0; margin: 1rem 0; }
.board-row { display: grid; grid-template-columns: 1.6rem 20px minmax(6em, 12em) 1fr auto;
  gap: .55rem; align-items: center; padding: .4rem 0; border-bottom: 1px dashed var(--line); }
.board-rank { font-family: var(--mono); font-size: .78rem; color: var(--dim); text-align: right; }
.board-name { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-bar { height: 8px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), rgba(232,97,58,.3)); }
.board-n { font-family: var(--mono); font-size: .7rem; color: var(--dim); white-space: nowrap; }
@media (max-width: 640px) { .board-row { grid-template-columns: 1.3rem 18px 1fr auto; } .board-bar { display: none; } }

/* ── 巻（パッケージ）── */
.pkg-meta { display: flex; gap: 1.4rem; flex-wrap: wrap; margin: 1rem 0 .5rem;
  padding: .6rem .8rem; background: var(--panel); border: 1px solid var(--line); border-radius: 3px; }
.pkg-meta span { font-size: .74rem; color: var(--dim); font-family: var(--mono); }
.pkg-meta b { font-size: 1.15rem; color: var(--accent); margin-right: .25rem; font-family: var(--serif); }
.pkg-sec { margin: 2rem 0; }
.pkg-sec > h2 { font-family: var(--serif); font-size: 1.25rem; border-bottom: 2px solid var(--accent);
  padding-bottom: .25rem; margin-bottom: .5rem; }
.src-chip { font-family: var(--mono); font-size: .64rem; color: var(--dim);
  border: 1px solid var(--line); border-radius: 2px; padding: 0 .3rem; margin-left: .35rem; white-space: nowrap; }

/* 論文の発表日と解説の公開日 */
.srcdates { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: .72rem; color: var(--dim);
  margin: .35rem 0 .6rem; padding-bottom: .5rem; border-bottom: 1px dashed var(--line); }
.srcdates b { font-weight: 400; color: var(--dim); opacity: .85; }
.srcdates span { color: var(--ink-soft); }
.srcdates i { color: var(--accent); font-style: normal; }
.srcdates em { font-style: normal; color: var(--accent); border: 1px solid var(--line-strong); border-radius: 999px; padding: 0 .45rem; }

/* ══════ 精読モード ══════ */
.rd-concept { display: inline-block; font-family: var(--mono); font-size: .78rem; letter-spacing: .04em;
  color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: .3rem .9rem; margin: .2rem 0 1.2rem; }
.rd-orig { font-family: var(--mono); font-size: .82rem; color: var(--dim); margin: -.4rem 0 .8rem; }
.rd-meta { display: flex; gap: 1.1rem; flex-wrap: wrap; align-items: baseline;
  font-size: .78rem; padding: .55rem .8rem; background: var(--panel);
  border: 1px solid var(--line); border-radius: 3px; margin-bottom: .9rem; }
.rd-meta b { font-family: var(--mono); font-size: .66rem; color: var(--dim); font-weight: 400; margin-right: .35rem; }
.rd-why { border-left: 3px solid var(--gold); padding: .6rem .9rem; background: var(--panel);
  border-radius: 0 3px 3px 0; margin-bottom: 1.2rem; font-size: .92rem; }
.rd-why b { display: block; font-family: var(--mono); font-size: .68rem; color: var(--gold); margin-bottom: .25rem; }

.rd-toolbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .8rem;
  padding: .5rem 0; margin-bottom: .6rem; background: var(--bg); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.rd-stat { font-family: var(--mono); font-size: .72rem; color: var(--dim); }
.rd-stat b { color: var(--accent); }

.rd-sec { margin: 2rem 0; }
.rd-h { font-family: var(--serif); font-size: 1.3rem; border-bottom: 2px solid var(--accent);
  padding-bottom: .3rem; margin-bottom: 1rem; }
.rd-h span { font-size: .8rem; color: var(--dim); margin-left: .6rem; font-family: var(--sans); }

/* 原文が主役。訳と解説は従属して見えるように寄せる */
.rd-para { margin: 1.4rem 0; }
.rd-en { font-family: var(--serif); font-size: 1.02rem; line-height: 1.85; color: var(--ink); }
.rd-side { margin: .5rem 0 0 1rem; padding-left: .9rem; border-left: 2px solid var(--line); }
.rd-ja { font-size: .92rem; color: var(--ink-soft); }
.rd-note { font-size: .84rem; color: var(--dim); margin-top: .35rem; }
body.rd-bare .rd-side { display: none; }
body.rd-bare .rd-para { margin: 1rem 0; }

.rd-terms { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; }
.rd-term { font-size: .76rem; border: 1px solid var(--line-strong); border-radius: 3px; background: var(--bg-2); }
.rd-term summary { cursor: pointer; padding: .18rem .5rem; list-style: none; }
.rd-term summary::-webkit-details-marker { display: none; }
.rd-term summary b { font-family: var(--mono); color: var(--accent); }
.rd-term summary span { color: var(--dim); margin-left: .4rem; }
.rd-term p { padding: .35rem .55rem .5rem; border-top: 1px dashed var(--line); font-size: .8rem; }

.rd-basics { margin: 1rem 0; border: 1px solid var(--line); border-left: 3px solid var(--accent-lift);
  border-radius: 0 3px 3px 0; background: var(--panel); }
.rd-basics summary { cursor: pointer; padding: .5rem .8rem; font-size: .85rem; color: var(--accent-lift); font-weight: 600; }
.rd-basics > div { padding: 0 .9rem .7rem; font-size: .88rem; }
.rd-figure { margin: 1.2rem 0; }
.rd-cap { font-size: .78rem; color: var(--dim); margin-top: .3rem; }
.rd-eq { margin: 1.1rem 0; text-align: center; }
.rd-eq .rd-note { text-align: left; }

.rd-gloss { display: grid; gap: .5rem; }
.rd-grow { padding: .5rem .7rem; background: var(--panel); border: 1px solid var(--line); border-radius: 3px; }
.rd-grow b { font-family: var(--mono); color: var(--accent); }
.rd-grow span { color: var(--dim); margin-left: .5rem; font-size: .85rem; }
.rd-grow p { font-size: .84rem; margin-top: .25rem; }

.rd-progress { margin: 2rem 0; padding: 1rem 1.1rem; background: var(--panel);
  border: 1px solid var(--line); border-radius: 4px; }
.rd-level { font-family: var(--serif); font-size: 1.4rem; color: var(--accent); margin: .2rem 0 .5rem; }
.rd-bar { height: 8px; background: var(--bg-2); border-radius: 999px; overflow: hidden; margin-bottom: .5rem; }
.rd-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--gold)); }
.rdcell .ucell-n { color: var(--accent); }

@media (max-width: 640px) {
  .rd-side { margin-left: .4rem; padding-left: .6rem; }
  .rd-en { font-size: .98rem; line-height: 1.8; }
  .rd-meta { gap: .7rem; font-size: .72rem; }
}

/* 法務ページ */
.legal-table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: .9rem; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top;
  padding: .6rem .7rem; border-bottom: 1px solid var(--line); }
.legal-table th { width: 12em; font-weight: 600; color: var(--ink-soft); background: var(--panel); }
.legal-warn { border-left: 3px solid var(--accent); background: var(--panel);
  padding: .6rem .8rem; font-size: .86rem; border-radius: 0 3px 3px 0; }
.ft-legal { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: .5rem; }
.ft-legal a { font-size: .74rem; color: var(--dim); }
.ft-legal a:hover { color: var(--accent); }

/* ══════ 動く図の全画面表示 ══════
   スライダーまで入れると縦に長くなり、記事の中では見切れる。
   全画面では「図を先に確保し、操作系を下に固定」して、スマホでも
   図を見ながらスライダーを触れるようにする。 */
figure.anim { position: relative; }
.anim-full {
  position: absolute; top: .4rem; right: .4rem; z-index: 3;
  width: 2rem; height: 2rem; padding: 0; line-height: 1;
  font-size: .9rem; color: var(--dim);
  background: var(--panel); border: 1px solid var(--line-strong);
  border-radius: 4px; cursor: pointer; opacity: .55; transition: opacity .15s, color .15s;
}
figure.anim:hover .anim-full, .anim-full:focus-visible { opacity: 1; color: var(--ink); }
@media (hover: none) { .anim-full { opacity: .9; width: 2.4rem; height: 2.4rem; font-size: 1.05rem; } }

body.anim-fs-open { overflow: hidden; }
.anim-fs {
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg); display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.anim-fs-bar {
  display: flex; align-items: center; gap: .6rem; padding: .5rem .8rem;
  border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
.anim-fs-bar b { font-family: var(--mono); font-size: .72rem; color: var(--dim); font-weight: 400;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anim-fs-close { margin-left: auto; flex: 0 0 auto; }
/* 図は残りを全部使い、操作系は下に固定して常に触れるようにする */
.anim-fs-stage { flex: 1 1 auto; min-height: 0; display: flex; align-items: center;
  justify-content: center; overflow: hidden; padding: .4rem .8rem; }
.anim-fs-stage > .anim-body { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.anim-fs-stage canvas { max-width: 100%; max-height: 100%; }
.anim-fs-ctl { flex: 0 0 auto; max-height: 42vh; overflow-y: auto;
  padding: .6rem .9rem calc(.8rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); background: var(--panel); }
.anim-fs-ctl .anim-controls { margin-top: .4rem; }
.anim-fs-ctl .anim-note { margin-top: .5rem; }
/* 全画面ではスライダーを太く、指で掴みやすく */
.anim-fs-ctl input[type=range] { height: 1.6rem; }
.anim-fs-ctl input[type=range]::-webkit-slider-thumb { width: 1.5rem; height: 1.5rem; }
@media (max-width: 640px) {
  .anim-fs-ctl .anim-ctl { width: 100%; }
  .anim-fs-ctl .anim-controls { gap: .5rem; }
}

/* ══════ TOPの案内 ══════ */
.offer { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: .8rem; margin: 1.4rem 0 1.6rem; }
.offer-card { position: relative; padding: 1rem 1.1rem; background: var(--panel);
  border: 1px solid var(--line); border-radius: 4px; display: flex; flex-direction: column; gap: .4rem; }
.offer-card b { font-family: var(--serif); font-size: 1.02rem; }
.offer-card p { font-size: .84rem; color: var(--ink-soft); flex: 1 1 auto; }
.offer-card .cta { align-self: flex-start; }
.offer-mark { position: absolute; top: .7rem; right: .9rem; font-size: 1.1rem; color: var(--accent); opacity: .55; }

/* ══════ 興味の選択とメール登録 ══════ */
.sub-box { margin: 1.6rem 0; padding: 1.1rem 1.2rem; background: var(--panel);
  border: 1px solid var(--line); border-radius: 4px; }
.sub-box > h2 { font-family: var(--serif); font-size: 1.2rem; margin-bottom: .2rem; }
.sub-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: .9rem 0 1.2rem; }
.sub-chip { text-align: left; padding: .5rem .75rem; background: var(--bg-2); color: var(--ink);
  border: 1.5px solid var(--line-strong); border-radius: 4px; cursor: pointer;
  display: flex; flex-direction: column; gap: .15rem; min-width: 10rem; transition: border-color .15s, background .15s; }
.sub-chip b { font-size: .9rem; }
.sub-chip span { font-size: .72rem; color: var(--dim); }
.sub-chip:hover { border-color: var(--accent); }
.sub-chip.on { border-color: var(--accent); background: rgba(232,97,58,.12); }
.sub-chip.on b { color: var(--accent); }
.sub-mail { border-top: 1px dashed var(--line); padding-top: .9rem; }
.sub-mail h3 { font-size: 1rem; margin-bottom: .2rem; }
.sub-note { font-size: .8rem; color: var(--gold); border-left: 2px solid var(--gold);
  padding-left: .55rem; margin: .5rem 0 .7rem; }
.sub-form { display: flex; gap: .5rem; flex-wrap: wrap; }
.sub-form input { flex: 1 1 16rem; padding: .55rem .7rem; font: inherit; font-size: .9rem;
  color: var(--ink); background: var(--bg-2); border: 1.5px solid var(--line-strong); border-radius: 4px; }
.sub-form input:focus { outline: none; border-color: var(--accent); }
#recommend { margin: 1.6rem 0; }
@media (max-width: 640px) {
  .sub-chip { min-width: 0; flex: 1 1 46%; }
  .sub-form input { flex: 1 1 100%; }
}

/* 新着フィード */
.feed-list li { margin: .7rem 0; padding-bottom: .6rem; border-bottom: 1px dashed var(--line); }
.feed-meta { display: block; font-family: var(--mono); font-size: .68rem; color: var(--dim); margin-top: .2rem; }
.feed-meta a { margin-left: .4rem; }
.feed-done { color: var(--accent); border: 1px solid var(--accent); border-radius: 2px;
  padding: 0 .3rem; margin-left: .4rem; font-weight: 400; }
.feed-list p { font-size: .8rem; margin-top: .3rem; }

/* ══════ 言語切替を目立たせる ══════
   日英どちらでも読めることが売りなのに、他のリンクに埋もれていた。
   地球儀＋現在の言語を出し、枠と色で「押せる」と分かる形にする。 */
/* 言語はタブ。JA|EN の並びは固定で、今どちらかは塗りで示す(位置では示さない)。
   下段の .modesw と同じ作りにして、ヘッダ内で挙動が揃うようにしている。 */
.hd-acct .langsw {
  display: inline-flex; align-items: stretch; overflow: hidden;
  border: 1.5px solid var(--accent); border-radius: 999px; line-height: 1;
}
.hd-acct .langsw-b {
  display: inline-flex; align-items: center; padding: .2rem .55rem;
  font-family: var(--mono); font-size: .7rem; font-weight: 700; letter-spacing: .04em;
  color: var(--accent); background: transparent; text-decoration: none;
  transition: background .18s, color .18s;
}
.hd-acct .langsw-b:hover { background: rgba(232, 97, 58, .12); }
.hd-acct .langsw-b.on { background: var(--accent); color: #fff; }
.hd-acct .langsw-b.on:hover { background: var(--accent); }
/* 押してから中身が入れ替わるまでの間、押した方を沈めて「受け付けた」ことを見せる。 */
.hd-acct .langsw-b.pending { animation: langPulse .7s ease-in-out infinite; }
@keyframes langPulse { 50% { opacity: .45; } }
@media (max-width: 640px) {
  .hd-acct .langsw-b { font-size: .6rem; padding: .16rem .4rem; }
}

/* ══════ TOPの新着 ══════
   「その日の記事が並んでいる」ことが売りなので、日付を目立たせ、
   文字だけの列にならないよう記事の図に応じた絵柄を左に置く。 */
.latest { margin: 1.2rem 0 1.6rem; }
.latest-h { font-family: var(--serif); font-size: 1.35rem; display: flex;
  align-items: center; gap: .7rem; border-bottom: 2px solid var(--accent); padding-bottom: .3rem; }
.latest-live { font-family: var(--mono); font-size: .64rem; letter-spacing: .06em;
  color: #fff; background: var(--accent); border-radius: 999px; padding: .12rem .5rem; }
.latest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: .6rem; margin-top: .9rem; }
.lcard { display: flex; gap: .7rem; padding: .65rem .75rem; background: var(--panel);
  border: 1px solid var(--line); border-radius: 4px; color: var(--ink);
  transition: border-color .15s, transform .15s; }
.lcard:hover { border-color: var(--accent); transform: translateY(-1px); color: var(--ink); }
.lcard-art { flex: 0 0 46px; height: 46px; display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; background: var(--bg-2); border: 1px solid var(--line); border-radius: 3px; }
.lcard-body { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.lcard-date { font-family: var(--mono); font-size: .64rem; color: var(--accent); }
.lcard-t { font-size: .88rem; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lcard-d { font-size: .74rem; color: var(--dim); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lcard-f { font-family: var(--mono); font-size: .62rem; color: var(--dim); margin-top: .1rem; }
.latest-more { margin-top: .7rem; font-size: .82rem; }
@media (max-width: 640px) { .latest-grid { grid-template-columns: 1fr; } }

/* ほかの入口（タブから外したものの行き先） */
.more { margin: 2rem 0 1rem; }
.more-h { font-family: var(--serif); font-size: 1.1rem; color: var(--dim);
  border-top: 1px solid var(--line); padding-top: 1rem; margin-bottom: .8rem; }
.more-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .6rem; }
.more-card { display: flex; align-items: center; gap: .7rem; padding: .7rem .85rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  color: var(--ink); transition: border-color .15s; }
.more-card:hover { border-color: var(--accent); color: var(--ink); }
.more-mark { font-size: 1.3rem; flex: 0 0 auto; }
.more-card b { display: block; font-size: .9rem; }
.more-card .dim { font-size: .74rem; }
.fblock-more { margin: .5rem 0 0; font-size: .8rem; text-align: right; }

/* 一次資料カードの原文要旨。日本語ページでも原題と要旨は英語のまま見せる。 */
.srcabs { margin-top: .6rem; border-top: 1px dashed var(--line); padding-top: .5rem; }
.srcabs summary { cursor: pointer; font-size: .78rem; color: var(--accent); }
.srcabs-en { margin-top: .5rem; font-size: .84rem; line-height: 1.7; color: var(--ink-soft);
  font-family: var(--serif); }
/* 記事見出しの下の原題。訳題だけだと読者がその論文を追えない。 */
.a-orig { font-family: var(--mono); font-size: .8rem; color: var(--dim);
  margin: -.5rem 0 .9rem; padding-left: .6rem; border-left: 2px solid var(--line-strong); }

/* 無料記事の末尾。読み終えた直後が最も会員化しやすいので、
   感想ボタンのすぐ下に置く。押しつけがましくならないよう1枚だけ。 */
.cvt { margin: 2rem 0 1.5rem; padding: 1.1rem 1.2rem;
  background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 0 4px 4px 0; }
.cvt-h { font-family: var(--serif); font-size: 1.05rem; margin-bottom: .3rem; }
.cvt-b { font-size: .88rem; color: var(--ink-soft); }
.cvt-acts { display: flex; gap: .6rem; flex-wrap: wrap; margin: .8rem 0 .5rem; }
.cvt-n { font-size: .76rem; color: var(--dim); }

/* 小学校の単元で「この3職種で使う」と誤読されないための断り書き */
.alljobs { margin-bottom: .7rem; padding: .5rem .7rem; font-size: .84rem;
  color: var(--ink-soft); background: var(--panel);
  border-left: 3px solid var(--gold); border-radius: 0 3px 3px 0; }
.alljobs b { color: var(--ink); }

/* ── 表示名 ──
 * Googleの本名がそのまま公開される事故を防ぐため、ログイン直後に一度きく。
 * 押し付けにならないよう「あとで」を必ず置く。 */
.namebox { position: fixed; inset: 0; display: grid; place-items: center;
  background: rgba(0,0,0,.55); backdrop-filter: blur(3px); z-index: 90; padding: 1rem; }
.namebox-in { width: min(24rem, 100%); padding: 1.1rem 1.2rem 1rem;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 6px;
  box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.nb-h { font-family: var(--serif); font-size: 1.05rem; margin-bottom: .3rem; }
.nb-hint { font-size: .8rem; color: var(--ink-soft); }
.nb-row { display: flex; gap: .45rem; margin: .8rem 0 .5rem; }
.nb-input { flex: 1 1 auto; min-width: 0; padding: .5rem .6rem; font: inherit; font-size: .9rem;
  color: var(--ink); background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: 3px; }
.nb-input:focus { outline: none; border-color: var(--accent); }
.me-name { margin: 1.2rem 0; padding: .9rem 1rem; background: var(--panel);
  border: 1px solid var(--line); border-radius: 4px; }
.me-name-l { display: block; font-size: .8rem; font-weight: 700; }
.me-name-h { font-size: .76rem; margin-top: .15rem; }
.me-name-msg { font-size: .76rem; min-height: 1em; }

/* 書き直した付箋には印を残す。黙って中身が変わると、票を入れた人が
   何に票を入れたのか確かめられなくなる。 */
.sc-ed { font-size: .72rem; }
.sc-edit { margin: .45rem 0 .4rem; }

/* ── 論文の原題と語義ポップアップ ──
 * 訳題だけだと自分でその論文を検索・引用できない。原題を必ず添え、
 * 知らない単語で止まらないよう、その場で意味を出す。 */
.a-orig, .row-orig, .lcard-orig {
  font-family: var(--mono); color: var(--dim); line-height: 1.5;
}
.a-orig { font-size: .82rem; margin: -.4rem 0 1rem; }
.row-orig { display: block; font-size: .74rem; margin: .1rem 0 .15rem; }
.lcard-orig { display: block; font-size: .68rem; margin: .1rem 0; }

/* 押せる単語。下線は点線1本だけにして、原題そのものの読みやすさを崩さない */
.gw { font-weight: inherit; cursor: pointer;
  border-bottom: 1px dotted color-mix(in srgb, var(--accent) 32%, transparent); }
.gw:hover { color: var(--ink); border-bottom-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 2px; }
.gw-wait { opacity: .5; }

.gloss-pop {
  position: fixed; z-index: 95; max-width: min(20rem, 90vw);
  padding: .55rem .7rem; background: var(--panel);
  border: 1px solid var(--line-strong); border-left: 3px solid var(--accent);
  border-radius: 4px; box-shadow: 0 8px 28px rgba(0,0,0,.4);
  opacity: 0; visibility: hidden; transform: translateY(-.25rem);
  transition: opacity .13s, transform .13s, visibility .13s;
}
.gloss-pop.on { opacity: 1; visibility: visible; transform: none; }
.gp-w { display: block; font-family: var(--mono); font-size: .82rem; color: var(--accent); }
.gp-ja { font-size: .88rem; margin-top: .2rem; }
.gp-n { font-size: .76rem; color: var(--dim); margin-top: .25rem;
  padding-top: .25rem; border-top: 1px dashed var(--line); }
.gp-none { color: var(--dim); }

/* 辞書に無い語は、押せる印を外す。点線が残っていると、押しても何も出ない語を
   延々と押すことになる。文字そのものは元のまま。 */
.gw-none { border-bottom: 0; cursor: default; }
.gw-none:hover { color: inherit; background: none; }

/* ── 読み放題の案内 ──
 * 壁の前で「何が手に入るのか」が分からないまま止まる人がいた。
 * 実数・値段・解約のしやすさを、スクロールなしで1画面に収める。 */
.join-card { margin: 1.4rem 0 2rem; padding: 1.2rem 1.2rem 1rem; text-align: center;
  background: var(--panel); border: 1px solid var(--line-strong);
  border-top: 3px solid var(--accent); border-radius: 0 0 6px 6px; }
.join-price { display: flex; flex-direction: column; gap: .15rem; margin-bottom: .9rem; }
.join-price b { font-family: var(--serif); font-size: 2rem; line-height: 1.1; }
.join-price span { font-size: .78rem; color: var(--dim); }
.join-cta { width: min(20rem, 100%); }
.join-signed { font-size: .74rem; margin-top: .5rem; }
.join-note { font-size: .78rem; color: var(--ink-soft); margin-top: .7rem;
  padding-top: .7rem; border-top: 1px dashed var(--line); }
.join-grid { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: 1rem 0 1.6rem; }
.join-item { padding: .8rem .9rem; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; }
.join-item-h { font-weight: 700; font-size: .92rem; margin-bottom: .2rem; }
.join-free { padding: .9rem 1rem; background: var(--bg-2);
  border-left: 3px solid var(--line-strong); border-radius: 0 4px 4px 0; margin-bottom: 1rem; }
/* ナビの「読み放題」だけ色を変える。壁に当たる前に見つけられるように。 */
.nav-join { color: var(--accent) !important; }

/* 壁の向こうにあるものを、見出しと1段落だけ先に見せる。
   値段だけ示して中身を隠すと、読者は何を買うのか分からないまま離れる。 */
.teaser { margin: 1.6rem 0 0; }
.teaser-p { position: relative; color: var(--ink-soft);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
  mask-image: linear-gradient(180deg, #000 55%, transparent); }
.teaser-fade { color: var(--dim); }
.teaser-h { font-size: .78rem; color: var(--dim); margin: .8rem 0 .3rem;
  font-family: var(--mono); letter-spacing: .04em; }
.teaser-list { margin: 0 0 .2rem; padding-left: 1.1rem; }
.teaser-list li { font-size: .88rem; color: var(--ink-soft); margin: .18rem 0; }


/* ══════ 読書中の画面をあける ══════
 * スマホではヘッダーが 180px(画面の21%)を常に占めていた。下へスクロール
 * している間はタブ行と付箋ボタンを畳み、上へ戻す動きで再び出す。 */
.hd-tabs { transition: max-height .18s ease, opacity .18s ease, padding .18s ease; max-height: 4rem; }
body.hd-slim .hd-tabs { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; }
body.hd-slim .hd-top { padding-bottom: .4rem; }
.notes-fab { transition: transform .18s ease, opacity .18s ease, border-color .15s; }
body.hd-slim .notes-fab { transform: translateY(5rem); opacity: 0; pointer-events: none; }

/* 読み進み度。長い記事(9,000px)で現在位置が分からなかった */
.readbar { position: fixed; left: 0; top: 0; height: 3px; width: 0; z-index: 70;
  background: var(--accent); pointer-events: none; transition: width .08s linear; }

@media (max-width: 640px) {
  .notes-fab { width: 2.6rem; height: 2.6rem; font-size: 1rem; opacity: .86; }
  .notes-fab-add { width: 2.2rem; height: 2.2rem; bottom: calc(max(.9rem, env(safe-area-inset-bottom)) + 3.1rem); }
  .nf-n { font-size: .58rem; min-width: 1rem; line-height: 1rem; }
  /* 本文の末尾がボタンに隠れないよう、下に余白を足す */
  main { padding-bottom: 6rem; }
  .lede { font-size: 1rem; line-height: 1.75; }
  .prose { font-size: 1rem; }
}

/* 副ボタン(メール受け取り)は塗らない。主ボタンと同じ塗りだと、どちらを押せばいいか分からなくなる */
.cvt-acts .cta.ghost { background: transparent; color: var(--ink-soft);
  border: 1px solid var(--line-strong); box-shadow: none; }
.cvt-acts .cta.ghost:hover { color: var(--ink); border-color: var(--accent); }

/* ── スマホの到達性(2026-09-05 購入導線監査) ──
 * タブ行は横スクロールできるが、スクロールバーを消しているので右にあるものに
 * 気づけない。課金(読み放題)と解約(マイページ)の入口は、スクロールなしで
 * 見える位置に置く。スマホだけ「自分」群を先頭に回す。 */
@media (max-width: 640px) {
  .hd-tabs .nav-g:last-child { order: -1; }
  .hd-tabs { scrollbar-width: thin; }
  .hd-tabs::-webkit-scrollbar { display: block; height: 3px; }
  .hd-tabs::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 2px; }
}
/* タップ目安 44px。登録ボタンは 48px にする */
.cta { min-height: 44px; }
.join-cta { min-height: 48px; }

/* ── 用語集 ── */
.gl-t { font-family: var(--mono); letter-spacing: .01em; }
.gl-short { margin-top: -.4rem; }
.gl-count { font-family: var(--mono); font-size: .74rem; margin-bottom: 1.2rem; }
.gl-sec { margin: 1.4rem 0; }
.gl-sec h2 { font-family: var(--serif); font-size: 1.05rem; margin-bottom: .4rem; }
.gl-def { font-size: 1.02rem; line-height: 1.85; }
.gl-list { list-style: none; padding: 0; }
.gl-list li { padding: .5rem 0; border-bottom: 1px dashed var(--line); display: flex; flex-direction: column; gap: .1rem; }
.gl-list .dim { font-family: var(--mono); font-size: .72rem; }
.gl-n { font-family: var(--mono); font-size: .8rem; font-weight: 400; color: var(--accent); margin-left: .6rem; }
.gl-az { display: flex; flex-wrap: wrap; gap: .35rem; margin: 1rem 0 .4rem; }
.gl-az a { font-family: var(--mono); font-size: .78rem; padding: .15rem .5rem; border: 1px solid var(--line); border-radius: 3px; color: var(--ink-soft); }
.gl-grid { display: grid; gap: .4rem; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.gl-cell { display: flex; flex-direction: column; gap: .1rem; padding: .5rem .65rem; background: var(--panel);
  border: 1px solid var(--line); border-radius: 4px; color: var(--ink); }
.gl-cell:hover { border-color: var(--accent); color: var(--ink); }
.gl-cell b { font-family: var(--mono); font-size: .86rem; }
.gl-cell span { font-size: .72rem; color: var(--dim); }