:root{ --sand:#F1EDE4; --mist:#9AA3B2; --line:rgba(241,237,228,.14); --amber:#E0A458; --ink:#0B0F1A;
  --mark:"Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  --sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  --latin:system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif; --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace; }
*{ box-sizing:border-box; }
html{ background:var(--ink); }
body{ margin:0; background:var(--ink); color:var(--sand); font-family:var(--sans); font-weight:300; -webkit-font-smoothing:antialiased; font-feature-settings:"palt" 1; line-break:strict; }
a{ color:inherit; }
::selection{ background:rgba(224,164,88,.28); }
.sky{ position:fixed; inset:0; z-index:0; pointer-events:none; background:linear-gradient(180deg,#0B0F1A 0%,#0D1220 100%); }
.sky .mist{ position:absolute; inset:-20%; opacity:.5; filter:blur(60px);
  background:radial-gradient(40% 30% at 30% 40%, rgba(120,140,190,.16), transparent 70%), radial-gradient(35% 28% at 75% 60%, rgba(150,120,170,.12), transparent 70%); }
.page{ position:relative; z-index:1; }
header .bar{ max-width:720px; margin:0 auto; padding:20px 24px; display:flex; align-items:center; justify-content:space-between; }
.logo{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.logo .k{ font-family:var(--mark); font-weight:500; font-size:22px; line-height:1; }
.logo .r{ font-family:var(--latin); font-weight:300; font-size:10px; letter-spacing:.42em; text-transform:uppercase; color:var(--mist); }
.nav{ font-family:var(--latin); font-size:12px; letter-spacing:.1em; color:var(--mist); text-decoration:none; border-bottom:1px solid transparent; }
.nav:hover{ color:var(--sand); border-bottom-color:var(--amber); }
main{ max-width:720px; margin:0 auto; padding:28px 24px 80px; }
.eyebrow{ font-family:var(--mono); font-weight:500; font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--mist); margin:0 0 22px; display:flex; align-items:center; gap:14px; }
.eyebrow i{ display:inline-block; width:28px; height:1px; background:var(--mist); opacity:.6; }
h1{ font-weight:300; font-size:clamp(24px,4.6vw,32px); line-height:1.6; letter-spacing:.03em; margin:0 0 22px; text-wrap:pretty; }
.byline{ font-family:var(--latin); font-size:12px; letter-spacing:.06em; color:var(--mist); margin:-8px 0 28px; }
.lead{ font-size:17px; line-height:2.05; letter-spacing:.02em; margin:0 0 40px; color:var(--sand); text-wrap:pretty; }
h2{ font-weight:400; font-size:14px; letter-spacing:.2em; color:var(--mist); margin:44px 0 14px; padding-top:18px; border-top:1px solid var(--line); }
p{ font-size:15.5px; line-height:2.05; letter-spacing:.02em; margin:0 0 18px; text-wrap:pretty; }
.refs{ list-style:none; padding:0; margin:0; }
.refs li{ font-family:var(--latin); font-size:12.5px; line-height:1.8; color:var(--mist); margin:0 0 12px; }
.refs a{ color:var(--sand); text-decoration:none; border-bottom:1px solid var(--line); }
.refs a:hover{ border-bottom-color:var(--amber); }
.note{ font-size:12.5px; color:var(--mist); margin:48px 0 0; }
.shelf{ list-style:none; padding:0; margin:12px 0 0; }
.shelf li{ border-top:1px solid var(--line); }
.shelf li:last-child{ border-bottom:1px solid var(--line); }
.shelf a{ display:block; padding:22px 0; text-decoration:none; }
.shelf .t{ font-size:17px; line-height:1.8; letter-spacing:.02em; text-wrap:pretty; }
.shelf .s{ font-family:var(--latin); font-size:11px; letter-spacing:.06em; color:var(--mist); margin-top:8px; }
.shelf .u{ font-size:12px; color:var(--mist); margin-top:4px; }
.shelf a:hover .t{ color:var(--amber); }
.back{ display:inline-block; margin-top:56px; font-size:13px; letter-spacing:.12em; text-decoration:none; padding:10px 0; border-bottom:1px solid var(--sand); }
.back:hover{ border-bottom-color:var(--amber); }
footer{ font-family:var(--latin); font-size:11px; letter-spacing:.06em; color:var(--mist); padding:0 24px 40px; max-width:720px; margin:0 auto; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
footer a{ text-decoration:none; }
/* アプリの中で開くとき（?app=1）: ナビゲーションと戻る導線を隠す */
html.app header, html.app footer, html.app .back{ display:none; }
html.app main{ padding-top:8px; }