/* --- 1. Variables --- */
:root{
  --night:#0d0812;
  --night-2:#150e1e;
  --gold:#c9a227;
  --gold-dim:#8a7a52;
  --paper:#f0e9dc;
  --dim:#6f6480;
  --dim-text:#a79cb9;   /* 読ませる小さな文字（注記・表の添え字・目次など）。--dim だとつぶれる */
  --line:rgba(201,162,39,.18);
  --mincho:"Shippori Mincho B1",serif;
  --gothic:"Zen Kaku Gothic New",system-ui,sans-serif;
  --mono:"Share Tech Mono",monospace;
}

/* --- 2. Global --- */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--night);
  color:var(--paper);
  font-family:var(--gothic);
  -webkit-font-smoothing:antialiased;
  line-height:1.9;
  overflow-x:hidden;
}

/* 夜空 */
.sky{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(122,74,168,.20), transparent 70%),
    radial-gradient(600px 400px at 90% 20%, rgba(201,162,39,.06), transparent 70%);}
.stars,.stars2{position:fixed;inset:0;z-index:0;pointer-events:none;}
.stars{
  background-image:
    radial-gradient(1.4px 1.4px at 12% 14%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.2px 1.2px at 78% 9%,  rgba(255,255,255,.55), transparent),
    radial-gradient(1.6px 1.6px at 34% 42%, rgba(255,240,210,.60), transparent),
    radial-gradient(1.2px 1.2px at 63% 63%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.3px 1.3px at 90% 77%, rgba(255,255,255,.50), transparent),
    radial-gradient(1.1px 1.1px at 8%  88%, rgba(255,240,210,.45), transparent);}
.stars2{
  background-image:
    radial-gradient(1px 1px at 25% 72%, rgba(255,255,255,.55), transparent),
    radial-gradient(1px 1px at 52% 22%, rgba(255,255,255,.40), transparent),
    radial-gradient(1px 1px at 70% 48%, rgba(255,240,210,.50), transparent),
    radial-gradient(1px 1px at 44% 92%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 96% 36%, rgba(255,255,255,.45), transparent);
  animation:twinkle 6s ease-in-out infinite;}
@keyframes twinkle{0%,100%{opacity:.35;}50%{opacity:1;}}

.wrap{position:relative;z-index:1;width:100%;max-width:820px;margin:0 auto;padding:0 22px 90px;}

/* --- 3. Breadcrumb --- */
.crumb{display:flex;justify-content:space-between;align-items:center;
  padding:18px 0;border-bottom:1px solid var(--line);}
.crumb a{color:var(--gold-dim);font-family:var(--mono);font-size:12px;
  letter-spacing:.14em;text-decoration:none;transition:color .3s;}
.crumb a:hover{color:var(--gold);}
.crumb span{color:#4a4258;font-family:var(--mono);font-size:11px;letter-spacing:.24em;}

/* --- 4. Hero --- */
.hero{padding:78px 0 60px;}
.rule{width:0;height:1px;background:var(--gold);margin-bottom:20px;
  animation:draw 1.6s cubic-bezier(.16,1,.3,1) .2s forwards;}
@keyframes draw{to{width:64px;}}
h1{font-family:var(--mincho);font-weight:600;
  font-size:clamp(30px,6.4vw,46px);line-height:1.55;letter-spacing:.06em;
  margin:0;color:var(--paper);text-shadow:0 0 40px rgba(201,162,39,.18);}
.hero .sub{color:var(--gold-dim);font-size:13px;letter-spacing:.16em;margin:20px 0 0;}

/* --- 5. Sections --- */
section{padding:44px 0;border-top:1px solid var(--line);}
.label{font-family:var(--mono);font-size:11px;letter-spacing:.28em;
  color:var(--dim);margin:0 0 18px;}
.label-lg{font-family:var(--mincho);font-size:16px;letter-spacing:.1em;
  color:var(--gold-dim);margin:0 0 22px;}
p{margin:0 0 1.1em;}
.lead{font-family:var(--mincho);font-size:17px;line-height:2.1;color:#e2dbd0;}

/* 問いのパネル */
.ask{background:var(--night-2);border-left:2px solid var(--gold);
  padding:22px 20px;margin:24px 0 0;}
.ask pre{margin:0;font-family:var(--mono);font-size:12.5px;line-height:2.05;
  color:#b9aec4;white-space:pre-wrap;word-break:break-word;}

.aside{font-size:13px;color:var(--gold-dim);margin-top:26px;}
.bridge{margin-top:26px;}
.aside a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(201,162,39,.4);
  padding-bottom:1px;transition:.3s;}
.aside a:hover{color:#f0d27a;border-bottom-color:#f0d27a;}

/* --- 6. AI Cards --- */
.decks{display:grid;gap:26px;}
.ai{position:relative;overflow:hidden;padding:26px 24px 24px;
  border-left:2px solid var(--accent);transition:box-shadow .45s ease,transform .45s ease;}
.ai-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;
  color:var(--muted);margin:0;}
.ai-name{font-family:var(--mincho);font-weight:600;font-size:24px;letter-spacing:.05em;
  margin:12px 0 10px;color:var(--accent);}
.ai-lede{font-size:13.5px;color:var(--muted);margin:0 0 22px;}

/* 引用（B案：4行だけ見せる） */
.quote{position:relative;font-size:13.5px;line-height:2.05;color:var(--body);}
.quote p{margin:0 0 1.1em;}
.quote p:last-child{margin-bottom:0;}
.quote .h{display:block;color:var(--accent);font-size:12px;letter-spacing:.12em;
  margin:1.6em 0 .7em;}
.quote p:first-child .h{margin-top:0;}
.quote.clip{max-height:9.6em;overflow:hidden;}
.quote.clip::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5em;
  background:linear-gradient(to bottom,transparent,var(--deck) 88%);}
.more{margin-top:14px;background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  color:var(--muted);transition:color .3s;}
.more:hover,.more:focus-visible{color:var(--accent);}
.more::after{content:" ▾";}
.more[aria-expanded="true"]::after{content:" ▴";}

.enter{display:inline-block;margin-top:26px;text-decoration:none;
  font-family:var(--mono);font-size:12px;letter-spacing:.18em;
  padding:11px 22px;border:1px solid var(--accent);color:var(--accent);
  transition:all .3s;}
.enter:hover{background:var(--accent);color:var(--deck);}

/* [A] claude — 庫内灯 */
.ai-claude{--accent:#D9A94E;--muted:#8f8471;--body:#c3b8a4;--deck:#171320;
  background:var(--deck);}
.ai-claude .ai-name{color:#F3E6C4;}
.ai-claude:hover{box-shadow:0 0 60px rgba(217,169,78,.16);}

/* [B] codex — 紙と方眼 */
.ai-codex{--accent:#d8ff4f;--muted:#a5a095;--body:#cfcabd;--deck:#111119;
  background:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px),
    var(--deck);
  background-size:44px 44px,44px 44px,100% 100%;
  transition:background-position .6s ease,box-shadow .45s ease;}
.ai-codex .ai-name{color:#e8e3d7;}
.ai-codex:hover{background-position:22px 22px,22px 22px,0 0;
  box-shadow:0 0 50px rgba(216,255,79,.10);}
.ai-codex .enter{background:var(--accent);color:#111119;border-color:var(--accent);}
.ai-codex .enter:hover{background:transparent;color:var(--accent);}
.ai-codex .dot{display:inline-block;width:5px;height:5px;border-radius:50%;
  background:#ff6659;margin-left:9px;vertical-align:middle;}

/* [C] antigravity — ネオンとスキャンライン */
.ai-antigravity{--accent:#00f3ff;--muted:#839bb0;--body:#b7cbd8;--deck:#0b0f1e;
  background:radial-gradient(500px 260px at 80% 0%,#151936,#0b0f1e 75%);}
.ai-antigravity::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,0) 50%,rgba(0,0,0,.28) 50%);
  background-size:100% 4px;opacity:.55;}
.ai-antigravity>*{position:relative;}
.ai-antigravity .ai-name{font-family:"Orbitron",var(--mincho);font-size:20px;
  letter-spacing:.08em;color:#00f3ff;}
.ai-antigravity:hover{box-shadow:0 0 50px rgba(0,243,255,.14);}
.ai-antigravity:hover .ai-name{animation:glitch .45s steps(2) 2;}
@keyframes glitch{
  0%{text-shadow:2px 0 #ff0266,-2px 0 #00f3ff;transform:translateX(0);}
  50%{text-shadow:-2px 0 #ff0266,2px 0 #00f3ff;transform:translateX(1px);}
  100%{text-shadow:none;transform:translateX(0);}}
.ai-antigravity .enter{border-color:#ff0266;color:#ff0266;}
.ai-antigravity .enter:hover{background:#ff0266;color:#0b0f1e;}

/* [D] sakana — 便箋の罫 */
.ai-sakana{--accent:#E4DCC4;--muted:#8b8272;--body:#c6bda9;--deck:#16130e;
  background:
    repeating-linear-gradient(transparent,transparent 33px,
      rgba(228,220,196,.035) 33px,rgba(228,220,196,.035) 34px),
    radial-gradient(460px 300px at 12% 0%,#211c14,#16130e 76%);
  transition:background-position .6s ease,box-shadow .45s ease;}
.ai-sakana .ai-name{color:#EFE7D2;}
.ai-sakana:hover{background-position:0 17px,0 0;
  box-shadow:0 0 55px rgba(228,220,196,.10);}

/* [E] grok — 鏡面の光沢 */
.ai-grok{--accent:#AFC3D6;--muted:#7f8b96;--body:#b6c0c9;--deck:#0d1014;
  background:radial-gradient(520px 300px at 85% -10%,#182029,#0d1014 78%);}
.ai-grok::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.05) 47%,
    rgba(255,255,255,.085) 50%,rgba(255,255,255,.05) 53%,transparent 62%);
  transition:transform .7s ease;}
.ai-grok:hover::before{transform:translateX(14%);}
.ai-grok>*{position:relative;}
.ai-grok .ai-name{font-family:"Amarante",var(--mincho);letter-spacing:.05em;color:#D5E1EC;}
.ai-grok:hover{box-shadow:0 0 55px rgba(175,195,214,.13);}

/* [F] mistral — 素朴な紙と朱 */
.ai-mistral{--accent:#f43625;--muted:#9a8079;--body:#cbb8b2;--deck:#17100f;
  background:radial-gradient(480px 300px at 18% 0%,#26150f,#17100f 76%);}
.ai-mistral .ai-name{color:#FFB3A3;}
.ai-mistral:hover{box-shadow:0 0 55px rgba(244,54,37,.16);}

/* --- 7. Verdict / Outro --- */
.verdict{list-style:none;margin:0;padding:0;}
.verdict li{position:relative;padding-left:22px;margin-bottom:1.1em;
  font-size:14px;color:#cfc6bb;}
.verdict li::before{content:"";position:absolute;left:0;top:.95em;
  width:10px;height:1px;background:var(--gold);}
.verdict li b{font-weight:500;color:var(--paper);}
.mutter{font-family:var(--mincho);font-size:16px;color:var(--gold-dim);
  letter-spacing:.1em;margin:26px 0 0;}
.outro{font-family:var(--mincho);font-size:clamp(19px,4.2vw,26px);
  line-height:1.9;letter-spacing:.06em;color:var(--paper);margin:0;}

/* --- 8. Footer --- */
.foot{margin-top:60px;text-align:center;}
.back{display:inline-block;text-decoration:none;font-family:var(--mono);
  font-size:12px;letter-spacing:.18em;padding:13px 26px;
  border:1px solid var(--gold);color:var(--gold);transition:all .35s;}
.back:hover{background:var(--gold);color:var(--night);
  box-shadow:0 0 30px rgba(201,162,39,.35);}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

@media (max-width:600px){
  .hero{padding:56px 0 44px;}
  .ai{padding:22px 18px 20px;}
  .ask{padding:18px 15px;}
  .ask pre{font-size:11.5px;line-height:1.95;}
}
@media (prefers-reduced-motion:reduce){
  .stars2{animation:none;opacity:.7;}
  .rule{animation:none;width:64px;}
  .ai-antigravity:hover .ai-name{animation:none;}
  *{transition-duration:.01ms !important;}
}

/* --- 9. VOICES ページ --- */
/* 七人の肖像 */
.portraits{margin:26px 0 0;}
.portraits img{display:block;width:100%;height:auto;border:1px solid var(--line);}

.epithets{list-style:none;margin:30px 0 0;padding:0;}
.epithets li{display:flex;gap:14px;align-items:baseline;margin-bottom:.85em;
  font-family:var(--mincho);font-size:15px;color:#cfc6bb;}
.epithets li b{flex:0 0 96px;font-weight:500;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.14em;color:var(--gold-dim);}

.gaps{list-style:none;margin:22px 0 0;padding:0;}
.gaps li{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;margin-bottom:.8em;font-size:14px;}
.gaps li b{flex:0 0 132px;font-weight:500;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.14em;color:var(--gold-dim);}
.gaps .before{color:var(--dim);}
.gaps .arrow{color:var(--gold-dim);}
.gaps .after{color:var(--paper);}

/* コラム */
.column{background:var(--night-2);border-left:2px solid var(--gold);padding:24px 22px;margin-top:8px;}
.column p{font-size:14px;line-height:2.05;color:#cfc6bb;}
.column p:last-child{margin-bottom:0;}
.column .mutter{font-family:var(--mincho);font-size:16px;color:var(--gold-dim);
  letter-spacing:.06em;margin-top:22px;}
.says{list-style:none;margin:0 0 1.1em;padding:0;}
.says li{position:relative;padding-left:20px;margin-bottom:.7em;
  font-size:13.5px;line-height:1.95;color:#a89ec0;}
.says li::before{content:"";position:absolute;left:0;top:.95em;width:9px;height:1px;background:var(--dim);}

/* ポータルから VOICES への導線 */
.to-voices{margin-top:30px;text-align:center;}
.to-voices a{display:inline-block;text-decoration:none;font-family:var(--mono);
  font-size:12px;letter-spacing:.16em;padding:12px 24px;
  border:1px solid var(--gold-dim);color:var(--gold-dim);transition:all .35s;}
.to-voices a:hover{border-color:var(--gold);color:var(--gold);}

@media (max-width:600px){
  .epithets li,.gaps li{flex-direction:column;gap:4px;}
  .epithets li b,.gaps li b{flex:none;}
  .column{padding:20px 16px;}
}

/* [G] specta-vox — 観測所の緑 */
.ai-spectavox{--accent:#6FA07C;--muted:#7d8a80;--body:#b4c2b8;--deck:#0e1512;
  background:radial-gradient(470px 300px at 16% 0%,#152019,#0e1512 76%);}
.ai-spectavox .ai-name{color:#C6E0CE;}
.ai-spectavox:hover{box-shadow:0 0 55px rgba(111,160,124,.16);}

/* [H] repoman — 余白の菫 */
.ai-repoman{--accent:#9C7BD1;--muted:#8b83a0;--body:#c0b8cf;--deck:#131020;
  background:radial-gradient(470px 300px at 16% 0%,#1e1830,#131020 76%);}
.ai-repoman .ai-name{color:#D8C9F2;}
.ai-repoman:hover{box-shadow:0 0 55px rgba(156,123,209,.16);}

/* --- 9. Ranking --- */
/* AI ごとの色（--accent）だけ借りて、カードの背景は打ち消す */
.cmp-row,.rv,.splits li{background:none;}
.cmp-row::before,.rv::before{content:none;}

/* 四体の順位表 */
.cmp{margin:26px 0 0;overflow-x:auto;}
.cmp-head,.cmp-row{display:grid;min-width:560px;align-items:center;
  grid-template-columns:minmax(150px,1fr) repeat(4,58px) 62px;gap:6px;}
/* 採点者が5体になった版（ranking2） */
.cmp5 .cmp-head,.cmp5 .cmp-row{min-width:620px;
  grid-template-columns:minmax(140px,1fr) repeat(5,54px) 60px;}
/* 採点者が6体になった版（ranking3） */
.cmp6 .cmp-head,.cmp6 .cmp-row{min-width:680px;
  grid-template-columns:minmax(132px,1fr) repeat(6,52px) 58px;}
.cmp6 .cmp-head{line-height:1.25;}
/* 採点者が7体になった版（ranking4） */
.cmp7 .cmp-head,.cmp7 .cmp-row{min-width:700px;
  grid-template-columns:minmax(120px,1fr) repeat(7,50px) 56px;}
.cmp7 .cmp-head{line-height:1.25;}

.cmp-head{padding:0 10px 8px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--dim-text);}
.cmp-head .ax,.cmp-head .tt{text-align:center;}
.cmp-row{padding:13px 10px;border-bottom:1px solid rgba(255,255,255,.05);
  border-left:2px solid var(--accent,var(--gold));}
.cmp-row .wk{display:flex;flex-direction:column;gap:2px;line-height:1.45;}
.cmp-row .wk b{font-family:var(--mincho);font-size:15.5px;font-weight:600;color:var(--paper);}
.cmp-row .wk i{font-family:var(--mono);font-style:normal;font-size:10px;
  letter-spacing:.1em;color:var(--dim-text);}
.cmp-row .ax{text-align:center;font-family:var(--mono);font-size:16px;color:#bdb3a6;}
.cmp-row .tt{text-align:center;font-family:var(--mono);font-size:16px;
  color:var(--accent,var(--gold));}

.axis-note{margin:12px 0 0;font-size:12.5px;color:var(--dim-text);line-height:2;}
.axis-note b{color:#cfc6da;}

/* 割れたところ／身内びいき／番外編 */
.splits{list-style:none;margin:26px 0 0;padding:0;}
.splits li{margin-bottom:1.6em;padding-left:16px;border-left:2px solid var(--line);
  font-size:13.5px;line-height:2;color:#c6bcae;}
.splits li b{display:block;font-family:var(--mincho);font-size:16px;
  font-weight:600;color:var(--paper);margin-bottom:.15em;}
.splits li span{display:block;font-family:var(--mono);font-size:11px;
  letter-spacing:.08em;color:var(--gold-dim);margin-bottom:.5em;}

/* 各 AI の講評（折りたたみ） */
.voice{margin:18px 0 0;border:1px solid var(--line);}
.voice summary{cursor:pointer;padding:15px 18px;list-style:none;
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  transition:background .3s;}
.voice summary::-webkit-details-marker{display:none;}
.voice summary::after{content:"▾";margin-left:auto;color:var(--gold-dim);font-size:12px;}
.voice[open] summary::after{content:"▴";}
.voice summary:hover{background:rgba(201,162,39,.05);}
.voice summary b{font-family:var(--mono);font-size:13px;letter-spacing:.16em;
  font-weight:500;color:var(--gold);}
.voice summary span{font-size:12.5px;color:var(--dim-text);}
.voice[open] summary{border-bottom:1px solid var(--line);}
.voice .rv{padding:20px 18px 4px;}
.voice .rv:last-child{padding-bottom:20px;}
.voice .rv p{margin:0 0 .8em;font-size:13.5px;line-height:2.05;color:#c6bcae;}
.voice .rv .rv-h{font-family:var(--mincho);font-size:15.5px;font-weight:600;
  color:var(--paper);margin-bottom:.5em;line-height:1.6;}

/* 部門別 */
.dept{margin:26px 0 0;overflow-x:auto;}
.dept-head,.dept-row{display:grid;min-width:620px;gap:8px;align-items:start;
  grid-template-columns:minmax(120px,150px) repeat(4,1fr);}
.dept-head{padding:0 10px 8px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--dim-text);}
.dept-row{padding:13px 10px;border-bottom:1px solid rgba(255,255,255,.05);
  font-family:var(--mincho);font-size:13.5px;color:var(--paper);line-height:1.7;}
.dept-row .ax-name{font-family:var(--gothic);font-size:12px;color:var(--gold-dim);}

/* --- 10. Profiles --- */
.sheet{margin:24px 0 0;}
.sheet a{display:block;text-decoration:none;}
.sheet img{display:block;width:100%;height:auto;border:1px solid var(--line);
  transition:box-shadow .4s ease;}
.sheet a:hover img,.sheet a:focus-visible img{box-shadow:0 0 42px rgba(201,162,39,.14);}
.sheet figcaption{margin:12px 2px 0;font-size:12.5px;line-height:1.95;color:var(--dim-text);}
.sheet figcaption b{font-family:var(--mincho);font-size:13.5px;font-weight:600;color:#c6bcae;}
.zoom{display:block;margin-top:8px;text-decoration:none;font-family:var(--mono);
  font-size:11px;letter-spacing:.14em;color:var(--gold-dim);transition:color .3s;}
.zoom:hover,.zoom:focus-visible{color:var(--gold);}

/* [I] kizashi — 昼の和紙と桜 */
.ai-kizashi{--accent:#E8AFC0;--muted:#9a8b90;--body:#cfc2c6;--deck:#1a1218;
  background:radial-gradient(470px 300px at 16% 0%,#2a1d24,#1a1218 76%);}
.ai-kizashi .ai-name{color:#F4DCE3;}
.ai-kizashi:hover{box-shadow:0 0 55px rgba(232,175,192,.16);}

/* [J] meta — BLACK EDITION の白 */
.ai-meta{--accent:#F2F4F8;--muted:#8b8d92;--body:#c4c7cc;--deck:#0d0d0f;
  background:radial-gradient(470px 300px at 16% 0%,#1b1b1f,#0d0d0f 76%);}
.ai-meta .ai-name{color:#FFFFFF;}
.ai-meta:hover{box-shadow:0 0 55px rgba(242,244,248,.13);}

/* [K] hazurecho — 封蝋の弁柄 */
.ai-hazurecho{--accent:#B8674A;--muted:#998a82;--body:#cbbdb5;--deck:#15100f;
  background:radial-gradient(470px 300px at 16% 0%,#281915,#15100f 76%);}
.ai-hazurecho .ai-name{color:#EBC3B1;}
.ai-hazurecho:hover{box-shadow:0 0 55px rgba(184,103,74,.18);}

/* GROK の肖像（profiles の末尾）。
   グリッドは幅560の縮小版を並べ、クリックで原寸（別ファイル）を開く。
   資料集と違って文字を読ませる絵ではないので、縮めてよい。 */
.portrait-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin:26px 0 0;}
.portrait-grid figure{margin:0;}
.portrait-grid a{display:block;text-decoration:none;}
.portrait-grid img{display:block;width:100%;height:auto;border:1px solid var(--line);
  transition:box-shadow .4s ease;}
.portrait-grid a:hover img,.portrait-grid a:focus-visible img{
  box-shadow:0 0 30px rgba(201,162,39,.18);}
.portrait-grid figcaption{margin:9px 2px 0;font-size:11.5px;line-height:1.7;color:var(--dim-text);}
.portrait-grid figcaption b{display:block;font-family:var(--mincho);font-size:13px;
  font-weight:600;color:var(--paper);margin-bottom:.1em;}
/* AI ごとのカードの中は、三体の絵を横一列に並べて見比べる */
.portrait-grid.three{grid-template-columns:repeat(3,1fr);}
@media (max-width:640px){
  .portrait-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .portrait-grid.three{grid-template-columns:repeat(3,1fr);gap:8px;}
}

/* --- この端末に残っているもの（about） --- */
.storage{margin:26px 0 0;border-top:1px solid var(--line);}
.storage li{list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
  padding:15px 2px;border-bottom:1px solid rgba(255,255,255,.05);}
.storage li b{font-family:var(--mincho);font-size:14.5px;font-weight:600;color:var(--paper);
  flex:0 0 132px;}
.storage li span{flex:1 1 200px;font-size:12.5px;line-height:1.9;color:var(--dim-text);}
.storage li .act{flex:0 0 auto;}
.storage button{appearance:none;-webkit-appearance:none;background:none;
  border:1px solid var(--line);border-radius:2px;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--dim-text);
  padding:8px 12px;transition:color .3s ease,border-color .3s ease;}
.storage button:hover,.storage button:focus-visible{color:var(--gold);border-color:var(--gold);}
.storage button[disabled]{opacity:.45;cursor:default;}
.storage .ask{flex:1 1 100%;font-size:12.5px;line-height:1.9;color:var(--paper);}
.storage .row{display:flex;gap:8px;}
.storage-all{margin:20px 0 0;display:flex;justify-content:flex-end;}
.storage-note{margin:14px 0 0;font-size:12.5px;line-height:2;color:var(--dim-text);}

/* --- 長いページの中を行き来する（profiles） --- */
/* 段落の目次。小さく、一行に流す */
.toc{display:flex;flex-wrap:wrap;gap:7px 14px;margin:22px 0 0;}
.toc a{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--dim-text);
  text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:3px;
  transition:color .3s ease,border-color .3s ease;}
.toc a:hover,.toc a:focus-visible{color:var(--gold);border-color:var(--gold);}
/* 段落の末尾から画面の先頭へ */
.to-top{margin:24px 0 0;text-align:right;}
.to-top a{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  color:var(--dim-text);text-decoration:none;padding:8px 2px;transition:color .3s ease;}
.to-top a:hover,.to-top a:focus-visible{color:var(--gold);}
/* 開いたカードを、その場で閉じる */
.close-card{margin:20px 0 2px;text-align:right;}
.close-card button{appearance:none;-webkit-appearance:none;background:none;border:0;
  cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  color:var(--dim-text);padding:10px 6px;transition:color .3s ease;}
.close-card button:hover,.close-card button:focus-visible{color:var(--gold);}
/* 目次から飛んだとき、見出しが画面の上端に貼り付かないように */
[id^="by-"],[id^="r-"]{scroll-margin-top:18px;}

/* 足元のコピーライト。ページごとの控えめな色に合わせる（薄くしすぎない） */
.copyright{color:var(--dim);}