:root {
  --fg:#1a1a1a; --muted:#5d5d5d; --bg:#fcfcf9; --paper:#ffffff;
  --rule:#d8d4c4; --accent:#b8651e; --accent2:#1f5d8a;
  --green:#2e6e3e; --red:#983c3c; --code-bg:#f3efe5; --side-bg:#f7f2e3;
}
* { box-sizing: border-box; }
html { font-size: 16.5px; }
body {
  margin:0; background:var(--bg); color:var(--fg);
  font-family: 'Charter','Iowan Old Style',Georgia,'Hiragino Mincho ProN','Yu Mincho','YuMincho','Noto Serif JP',serif;
  line-height:1.7; -webkit-font-smoothing:antialiased;
}
body.show-jp {
  font-family:'Hiragino Mincho ProN','Yu Mincho','YuMincho','Noto Serif JP','Charter',Georgia,serif;
}
.wrap {
  max-width:880px; margin:0 auto; padding:64px 48px 96px;
  background:var(--paper); box-shadow:0 0 0 1px var(--rule), 0 24px 60px -30px rgba(0,0,0,.18);
}
#lang-toggle {
  position:fixed; top:18px; right:18px;
  background:var(--accent2); color:white;
  padding:9px 18px; border:none; border-radius:24px;
  cursor:pointer; font-family:ui-sans-serif,system-ui,-apple-system,'Hiragino Sans','Yu Gothic',sans-serif;
  font-size:0.88rem; font-weight:600; letter-spacing:0.02em;
  box-shadow:0 4px 12px rgba(31,93,138,.3), 0 1px 2px rgba(0,0,0,.1);
  z-index:1000; transition:all .15s ease;
}
#lang-toggle:hover {
  background:var(--accent);
  box-shadow:0 6px 16px rgba(184,101,30,.35), 0 2px 4px rgba(0,0,0,.1);
  transform:translateY(-1px);
}
#lang-toggle::before { content:"🌐 "; margin-right:4px; }
#content-en { display:block; }
#content-ja { display:none; }
body.show-jp #content-en { display:none; }
body.show-jp #content-ja { display:block; }

header.title {
  border-bottom:3px double var(--rule); padding-bottom:24px; margin-bottom:32px;
}
header.title h1 { font-size:2.1rem; margin:0 0 .25em; line-height:1.25; letter-spacing:-.01em; }
header.title .sub { font-style:italic; color:var(--muted); font-size:1.1rem; }
header.title .meta { margin-top:14px; font-family:'SF Mono','Menlo',monospace; font-size:.82rem; color:var(--muted); }

.crumbs {
  font-family:ui-sans-serif,system-ui,sans-serif; font-size:.82rem;
  color:var(--muted); margin-bottom:24px;
}
.crumbs a { color:var(--accent2); text-decoration:none; border-bottom:1px dotted var(--accent2); }
.crumbs a:hover { color:var(--accent); }

h2 {
  font-size:1.55rem; margin-top:2.4em; margin-bottom:.6em;
  letter-spacing:-.005em; color:var(--accent2);
  border-bottom:1px solid var(--rule); padding-bottom:6px;
}
h2::before { content:"§ "; color:var(--accent); font-weight:normal; }
h3 { font-size:1.2rem; margin-top:1.8em; color:var(--fg); }
p { margin:.7em 0; }
a { color:var(--accent2); text-decoration:none; border-bottom:1px dotted var(--accent2); }
a:hover { color:var(--accent); border-bottom-color:var(--accent); }
ul,ol { padding-left:1.4em; }
li { margin:.3em 0; }
code {
  font-family:'SF Mono','Menlo','Consolas',monospace; font-size:.86em;
  background:var(--code-bg); padding:1px 5px; border-radius:3px;
}
pre {
  background:#1e1e1e; color:#ececec; padding:18px 20px; border-radius:6px;
  overflow-x:auto; font-size:.82rem; line-height:1.5; margin:1.2em 0;
}
pre code { background:transparent; color:inherit; font-size:inherit; padding:0; }
table { border-collapse:collapse; width:100%; margin:1.4em 0; font-size:.92rem; }
th, td { border:1px solid var(--rule); padding:8px 10px; text-align:left; vertical-align:top; }
th { background:var(--side-bg); font-weight:600; }
tr:nth-child(even) td { background:#fafaf5; }

blockquote, .callout {
  margin:1.3em 0; padding:14px 18px;
  border-left:4px solid var(--accent); background:var(--side-bg); border-radius:0 6px 6px 0;
}
.callout.intuition  { border-color:var(--accent2); background:#eef4f8; }
.callout.intuition::before {
  content:"💡 Intuition"; display:block; font-weight:600; color:var(--accent2);
  margin-bottom:6px; font-family:ui-sans-serif,system-ui,sans-serif;
  font-size:.85rem; letter-spacing:.04em; text-transform:uppercase;
}
body.show-jp .callout.intuition::before { content:"💡 直感"; text-transform:none; letter-spacing:normal; }

.callout.warning { border-color:var(--red); background:#fbeeee; }
.callout.warning::before {
  content:"⚠ Watch out"; display:block; font-weight:600; color:var(--red);
  margin-bottom:6px; font-family:ui-sans-serif,system-ui,sans-serif;
  font-size:.85rem; letter-spacing:.04em; text-transform:uppercase;
}
body.show-jp .callout.warning::before { content:"⚠ 注意点"; text-transform:none; letter-spacing:normal; }

.callout.key { border-color:var(--green); background:#ecf3ee; }
.callout.key::before {
  content:"★ Key insight"; display:block; font-weight:600; color:var(--green);
  margin-bottom:6px; font-family:ui-sans-serif,system-ui,sans-serif;
  font-size:.85rem; letter-spacing:.04em; text-transform:uppercase;
}
body.show-jp .callout.key::before { content:"★ 重要ポイント"; text-transform:none; letter-spacing:normal; }

.callout.refs { border-color:var(--muted); background:#f3f3ee; font-size:.92rem; }
.callout.refs::before {
  content:"📚 Reference points"; display:block; font-weight:600; color:var(--muted);
  margin-bottom:6px; font-family:ui-sans-serif,system-ui,sans-serif;
  font-size:.85rem; letter-spacing:.04em; text-transform:uppercase;
}
body.show-jp .callout.refs::before { content:"📚 関連研究との対比"; text-transform:none; letter-spacing:normal; }

.callout.aof { border-color:#7a3e87; background:#f4eaf6; }
.callout.aof::before {
  content:"🏛 What this gives AOF"; display:block; font-weight:600; color:#7a3e87;
  margin-bottom:6px; font-family:ui-sans-serif,system-ui,sans-serif;
  font-size:.85rem; letter-spacing:.04em; text-transform:uppercase;
}
body.show-jp .callout.aof::before { content:"🏛 AOF モデルへの貢献"; text-transform:none; letter-spacing:normal; }

.tldr {
  background:linear-gradient(180deg,#fff6e3 0%,#fbe9c4 100%);
  border:1px solid #e3c98a; border-radius:8px; padding:18px 22px; margin:1.2em 0 2em;
}
.tldr h2 { margin-top:0; border:none; color:var(--accent); font-size:1.15rem; }
.tldr h2::before { content:"📌 TL;DR — "; color:var(--accent); }
body.show-jp .tldr h2::before { content:"📌 要約 — "; }

.mermaid {
  background:#fefefe; border:1px solid var(--rule); border-radius:6px;
  padding:14px; margin:1.2em 0; text-align:center;
}
.tag {
  display:inline-block; font-family:ui-sans-serif,system-ui,sans-serif;
  font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  padding:2px 8px; border-radius:3px;
  background:var(--side-bg); color:var(--muted); margin-right:6px; vertical-align:middle;
}
.tag.green { background:#ddeede; color:var(--green); }
.tag.red   { background:#f5d8d8; color:var(--red); }
.tag.blue  { background:#d8e6f0; color:var(--accent2); }
.tag.purple{ background:#ece1f0; color:#7a3e87; }
hr { border:none; height:1px; background:var(--rule); margin:2.4em 0; }
footer {
  margin-top:3em; padding-top:16px; border-top:2px solid var(--rule);
  color:var(--muted); font-size:.88rem; font-style:italic;
}

/* index hub specific */
.paper-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; margin:1.5em 0; }
.paper-card {
  border:1px solid var(--rule); border-radius:8px; padding:16px 18px;
  background:#fdfcf6; transition:all .15s ease; text-decoration:none; color:inherit;
  border-bottom:1px solid var(--rule);
}
.paper-card:hover {
  border-color:var(--accent); background:#fffbf1;
  box-shadow:0 4px 12px rgba(184,101,30,.15);
  transform:translateY(-2px);
  color:inherit;
}
.paper-card .num { display:inline-block; background:var(--accent); color:white;
  padding:2px 9px; border-radius:12px; font-family:ui-sans-serif,sans-serif;
  font-size:.75rem; font-weight:700; margin-bottom:8px; }
.paper-card h3 { margin:.2em 0 .4em; font-size:1.05rem; }
.paper-card .auth { color:var(--muted); font-size:.85rem; font-style:italic; margin-bottom:6px; }
.paper-card .tldr-line { font-size:.88rem; line-height:1.5; color:var(--fg); }

@media print {
  body { background:#fff; }
  .wrap { box-shadow:none; max-width:none; padding:0; }
  pre { background:#f5f5f5; color:#1a1a1a; }
  h2 { page-break-after:avoid; }
  table, pre, .mermaid, .callout { page-break-inside:avoid; }
  #lang-toggle { display:none; }
}