/* =========================================================================
   lex-fridman · 天際線(首頁)× 筆錄(單集頁)

   首頁是 docs/layouts/lex-fridman/09 定案的十棟台北 101;單集頁是第二批的 I(筆錄兩欄)
   加 K(回訪的集數右欄可以切成另一輪的時間軸)。兩頁的過渡靠單集頁頂上那條
   「樓層帶」:用那一棟的色相畫一截樓面,白天是樓的顏色、夜裡是夜景的樓。

   class 刻意避開 .stage / .row / .c / .band —— tmp/meta/check_site.py 用這些名字
   判斷「這個站是哪一種版型」,撞名會讓它對這個站跑別的版型的檢查。
   ========================================================================= */

:root{
  --ground:#E7EAEC;--panel:#FCFCFD;--panel2:#F1F3F5;--ink:#14181D;--ink2:#39424C;--muted:#5C6672;--rule:#C6CCD2;--rule2:#D9DEE3;
  --accent:#0E5C63;--sig-half:#8A5D0A;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;--sans:"Noto Sans TC","PingFang TC",system-ui,sans-serif;--serif:"Noto Serif TC","Songti TC",Georgia,serif;
  /* 101 白天:四個面各自的亮度 */
  --sky1:#C9DCEC;--sky2:#EEF4F8;--sat:30%;--lF:52%;--lR:40%;--lB:32%;--lL:46%;--lLedge:92%;--satLedge:40%;--lPlate:90%;--lPlateT:18%;--lT:12%;--satT:40%;
  --edge:rgba(0,0,0,.14);--ledgeglow:none;--tglow:none;
  --lBal:92%;--lBalT:18%;--lBalB:45%;--satGr:10%;--lGrF:78%;--lGrR:66%;--lGrB:58%;--lGrL:72%;--lGrT:40%;
  --spire:#7F918F;--beacon:#C8483E;--street:#9FB0B8;--same:#F2A93B;--samet:#3A2600;
  /* 筆錄(單集頁):米白紙、墨、暗紅 */
  --paper:#F4F2EC;--paper2:#EFEDE5;--pink:#1C1C1A;--pink2:#33322E;--pmuted:#7A7568;--prule:#D6D1C2;--pdot:#CFC9BA;--ox:#6B2018;
  --stripL:52%;--stripS:30%;--stripT:#0F1417;
  --dim:saturate(.35) brightness(1.12) contrast(.75);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#101418;--panel:#181D23;--panel2:#1F252C;--ink:#E6E9EC;--ink2:#B4BCC4;--muted:#8B959F;--rule:#2B333B;--rule2:#232A31;--accent:#5AB3BB;--sig-half:#D2A24C;
  --sky1:#05070D;--sky2:#151E33;--sat:45%;--lF:12%;--lR:8%;--lB:5%;--lL:10%;--lLedge:68%;--satLedge:70%;--lPlate:9%;--lPlateT:82%;--lT:86%;--satT:55%;
  --edge:rgba(255,255,255,.10);--ledgeglow:0 0 6px hsl(var(--h) 70% 68% / .75);--tglow:0 0 6px hsl(var(--h) 55% 86% / .45);
  --lBal:14%;--lBalT:88%;--lBalB:62%;--satGr:12%;--lGrF:11%;--lGrR:7%;--lGrB:5%;--lGrL:9%;--lGrT:42%;
  --spire:#DDE9E8;--beacon:#FF4D4D;--street:#0B0E16;--same:#FF9F43;--samet:#1A0E00;
  --paper:#15161A;--paper2:#1B1C20;--pink:#E8E4DA;--pink2:#CFCABD;--pmuted:#8E887A;--prule:#34332E;--pdot:#3A3934;--ox:#E09A86;
  --stripL:12%;--stripS:45%;--stripT:#E6EEF0;--dim:brightness(.5) saturate(.7)}}
:root[data-theme="dark"]{
  --ground:#101418;--panel:#181D23;--panel2:#1F252C;--ink:#E6E9EC;--ink2:#B4BCC4;--muted:#8B959F;--rule:#2B333B;--rule2:#232A31;--accent:#5AB3BB;--sig-half:#D2A24C;
  --sky1:#05070D;--sky2:#151E33;--sat:45%;--lF:12%;--lR:8%;--lB:5%;--lL:10%;--lLedge:68%;--satLedge:70%;--lPlate:9%;--lPlateT:82%;--lT:86%;--satT:55%;
  --edge:rgba(255,255,255,.10);--ledgeglow:0 0 6px hsl(var(--h) 70% 68% / .75);--tglow:0 0 6px hsl(var(--h) 55% 86% / .45);
  --lBal:14%;--lBalT:88%;--lBalB:62%;--satGr:12%;--lGrF:11%;--lGrR:7%;--lGrB:5%;--lGrL:9%;--lGrT:42%;
  --spire:#DDE9E8;--beacon:#FF4D4D;--street:#0B0E16;--same:#FF9F43;--samet:#1A0E00;
  --paper:#15161A;--paper2:#1B1C20;--pink:#E8E4DA;--pink2:#CFCABD;--pmuted:#8E887A;--prule:#34332E;--pdot:#3A3934;--ox:#E09A86;
  --stripL:12%;--stripS:45%;--stripT:#E6EEF0;--dim:brightness(.5) saturate(.7)}

/* 十個主題十個色相。單集頁的樓層帶也用同一個 --h */
[data-t="ai"]{--h:178}[data-t="science"]{--h:205}[data-t="geopolitics"]{--h:355}[data-t="history"]{--h:32}[data-t="culture"]{--h:285}
[data-t="health"]{--h:140}[data-t="cs"]{--h:225}[data-t="sports"]{--h:95}[data-t="business"]{--h:45}[data-t="other"]{--h:330}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.75;-webkit-font-smoothing:antialiased}
/* 單集頁與名詞索引是紙,首頁是天空。用外殼上的 data-page 判,不靠 JS */
body:not([data-page="home"]){background:var(--paper);color:var(--pink)}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif);text-wrap:balance;margin:0}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- 頁首 / 頁尾 ---------- */
.topbar{border-bottom:1px solid var(--rule);background:var(--panel)}
body:not([data-page="home"]) .topbar{background:var(--paper);border-bottom-color:var(--prule)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;flex-wrap:wrap}
.topbar .home{font-family:var(--serif);font-weight:900;font-size:17px;text-decoration:none;letter-spacing:.01em}
.topbar nav{display:flex;align-items:center;gap:4px 18px;flex-wrap:wrap;font-family:var(--mono);font-size:12px}
.topbar nav a{text-decoration:none;color:var(--muted);padding:4px 0;border-bottom:1.5px solid transparent}
body:not([data-page="home"]) .topbar nav a{color:var(--pmuted)}
.topbar nav a:hover,.topbar nav a[aria-current="page"]{color:inherit;border-bottom-color:currentColor}
.tgl{font:inherit;font-family:var(--mono);font-size:12px;background:transparent;color:inherit;border:1px solid var(--rule);padding:4px 10px;cursor:pointer;border-radius:2px}
body:not([data-page="home"]) .tgl{border-color:var(--prule)}
footer{border-top:1px solid var(--rule);margin-top:56px;padding:22px 0 40px;font-size:12.5px;color:var(--muted)}
body:not([data-page="home"]) footer{border-top-color:var(--prule);color:var(--pmuted)}
footer .wrap{display:flex;gap:8px 22px;flex-wrap:wrap}

/* ================= 首頁:天際線 ================= */
.sky{padding:18px 0 0}
.sky .wrap{max-width:none;padding:0 20px}
.skystage{display:grid;grid-template-columns:1fr 300px;border:1px solid var(--rule);height:clamp(560px,calc(100svh - 150px),900px);background:var(--panel)}
.hint{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.06em;display:flex;gap:6px 18px;flex-wrap:wrap;padding:8px 14px;background:var(--panel);border:1px solid var(--rule);border-top:none}
.hint b{color:var(--ink);font-weight:500}
.hint .touch{display:none}
.city{position:relative;overflow:hidden;--z:1;--fh:calc(15px * var(--z));--bw:calc(176px * var(--z));--tilt:-30deg;background:linear-gradient(to top,var(--sky2),var(--sky1));outline:none}
.city:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
.city .street{position:absolute;left:0;right:0;bottom:0;height:30px;z-index:4;pointer-events:none;background:var(--street);border-top:1px solid rgba(127,224,214,.18)}
.city .scroller{position:absolute;inset:0 0 30px 0;overflow-y:auto;overflow-x:auto;scrollbar-width:thin;z-index:2;perspective:2400px;perspective-origin:50% 72%}
.city .skyrow{display:flex;align-items:flex-end;gap:calc(118px * var(--z));padding:calc(150px * var(--z)) calc(60px * var(--z)) 0 calc(120px * var(--z));width:max-content;min-height:100%;position:relative;transform-style:preserve-3d}
/* 一棟:一個方柱體,寬 = 深 */
.bld{--gF:hsl(var(--h) var(--sat) var(--lF));--gR:hsl(var(--h) var(--sat) var(--lR));--gB:hsl(var(--h) var(--sat) var(--lB));--gL:hsl(var(--h) var(--sat) var(--lL));
  --grF:hsl(var(--h) var(--satGr) var(--lGrF));--grR:hsl(var(--h) var(--satGr) var(--lGrR));--grB:hsl(var(--h) var(--satGr) var(--lGrB));--grL:hsl(var(--h) var(--satGr) var(--lGrL));--greyt:hsl(var(--h) var(--satGr) var(--lGrT));
  --ledge:hsl(var(--h) var(--satLedge) var(--lLedge));--plate:hsl(var(--h) 30% var(--lPlate));--platet:hsl(var(--h) 45% var(--lPlateT));--t:hsl(var(--h) var(--satT) var(--lT));
  width:var(--bw);flex:none;position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;
  transform-style:preserve-3d;transform:rotateY(var(--tilt));transform-origin:50% 100%}
.bld .fls{display:flex;flex-direction:column-reverse;transform-style:preserve-3d}
.fl{display:block;height:var(--fh);position:relative;transform-style:preserve-3d;cursor:pointer;--k:1;text-decoration:none;color:inherit}
.fl:focus-visible{outline:none}
.fl:focus-visible .f{filter:brightness(1.35)}
/* 四個面:寬 = 深 = 樓寬 × k,各自推到自己的位置;背面看不到,所以是實心的 */
.f{position:absolute;top:0;height:100%;left:50%;width:calc(var(--bw) * var(--k));margin-left:calc(var(--bw) * var(--k) / -2);
  backface-visibility:hidden;border-top:1px solid var(--edge)}
.f.fr{background-color:var(--gF);transform:translateZ(calc(var(--bw) * var(--k) / 2))}
.f.rt{background-color:var(--gR);transform:rotateY(90deg) translateZ(calc(var(--bw) * var(--k) / 2))}
.f.bk{background-color:var(--gB);transform:rotateY(180deg) translateZ(calc(var(--bw) * var(--k) / 2))}
.f.lt{background-color:var(--gL);transform:rotateY(-90deg) translateZ(calc(var(--bw) * var(--k) / 2))}
/* 段頂的簷:一片方形的頂面,繞四面一圈突出 2px,夜裡亮 */
.f.tp{top:50%;height:calc(var(--bw) * var(--k) + 4px);width:calc(var(--bw) * var(--k) + 4px);margin-left:calc((var(--bw) * var(--k) + 4px) / -2);
  margin-top:calc((var(--bw) * var(--k) + 4px) / -2);background:var(--ledge);border:none;backface-visibility:visible;
  transform:rotateX(90deg) translateZ(calc(var(--fh) / 2));box-shadow:var(--ledgeglow);opacity:.92}
.fl.ledge .f.fr,.fl.ledge .f.rt,.fl.ledge .f.bk,.fl.ledge .f.lt{border-top:2px solid var(--ledge)}
/* 名稱:前面集名、右面講者名。左緣算到樓寬的 17%,跟 k 無關 */
.f .t{position:absolute;top:0;height:100%;line-height:var(--fh);font-size:calc(10px * var(--z));color:var(--t);text-shadow:var(--tglow);font-style:normal;
  left:calc(var(--bw) * (0.17 - (1 - var(--k)) / 2));right:7%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.f .t b{font-family:var(--mono);font-weight:500;font-size:calc(9px * var(--z));opacity:.8;margin-right:calc(5px * var(--z))}
.fl:hover .f,.fl.pin .f{filter:brightness(1.25)}
/* 同一位講者的其他層:亮成另一個顏色 */
.fl.same .f.fr,.fl.same .f.rt,.fl.same .f.bk,.fl.same .f.lt{background-color:var(--same)}
.fl.same .f .t{color:var(--samet);text-shadow:none;font-weight:700}
/* 還沒寫:反灰 */
.fl.sc{cursor:default}
.fl.sc .f.fr{background-color:var(--grF)}.fl.sc .f.rt{background-color:var(--grR)}.fl.sc .f.bk{background-color:var(--grB)}.fl.sc .f.lt{background-color:var(--grL)}
.fl.sc .f .t{color:var(--greyt);text-shadow:none}
.fl.sc.ledge .f{border-top-color:var(--greyt)}.fl.sc .f.tp{background:var(--greyt);box-shadow:none;opacity:.6}
.fl.sc.same .f.fr,.fl.sc.same .f.rt,.fl.sc.same .f.bk,.fl.sc.same .f.lt{background-color:var(--same);opacity:.55}
/* 底座銘牌:一個矮方柱 */
.bld .plate{--k:1;height:calc(34px * var(--z));border:none;width:100%;cursor:pointer;background:none;padding:0;position:relative;transform-style:preserve-3d;font:inherit;color:inherit}
.bld .plate .f{background-color:var(--plate);color:var(--platet);font-family:var(--sans);font-weight:700;font-size:calc(13px * var(--z));line-height:calc(34px * var(--z));text-align:left;
  padding:0 calc(10px * var(--z));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-top:2px solid var(--ledge)}
.bld .plate .f small{font-family:var(--mono);font-weight:400;font-size:calc(10px * var(--z));margin-left:calc(6px * var(--z));opacity:.75}
.bld .plate .f.rt,.bld .plate .f.bk,.bld .plate .f.lt{filter:brightness(.8)}
.bld .plate:focus-visible{outline:2px solid var(--ledge);outline-offset:2px}
/* 塔尖:三個越來越小的方柱再接尖塔,坐在頂層上 */
.cr{position:relative;width:100%;height:calc(var(--bw) * .62);pointer-events:none;transform-style:preserve-3d}
.cr .cube{position:absolute;left:0;right:0;transform-style:preserve-3d}
.cr .cube .f{border-top:1.5px solid var(--ledge)}
.cr .c1{bottom:0;height:calc(var(--bw) * .07);--k:.62}.cr .c2{bottom:calc(var(--bw) * .07);height:calc(var(--bw) * .06);--k:.44}.cr .c3{bottom:calc(var(--bw) * .13);height:calc(var(--bw) * .05);--k:.26}
.cr .spire{position:absolute;left:50%;bottom:calc(var(--bw) * .18);width:calc(var(--bw) * .035);height:calc(var(--bw) * .42);margin-left:calc(var(--bw) * -.0175);
  background:var(--spire);background-image:repeating-linear-gradient(0deg,transparent 0 6px,rgba(0,0,0,.28) 6px 7.5px)}
.cr .beacon{position:absolute;left:50%;bottom:calc(var(--bw) * .60);width:calc(5px * var(--z));height:calc(5px * var(--z));margin-left:calc(-2.5px * var(--z));border-radius:50%;background:var(--beacon);box-shadow:0 0 6px 2px var(--beacon);
  animation:blink 1.3s steps(1,end) infinite}
@keyframes blink{0%,45%{opacity:1;box-shadow:0 0 6px 2px var(--beacon)}55%,100%{opacity:.15;box-shadow:0 0 0 0 transparent}}
/* 氣球:錨在最頂層的右上角,一條線往右上 45°,末端一顆有厚度的長牌子;跟著樓轉,不擋避雷針 */
.balloon{position:absolute;bottom:0;left:calc(50% + var(--bw) * var(--ktop) / 2);width:0;height:0;pointer-events:none;transform-style:preserve-3d}
.balloon .str{position:absolute;left:0;bottom:0;width:calc(var(--bw) * .42);height:1.5px;background:var(--ledge);transform-origin:left center;transform:rotate(-45deg);box-shadow:var(--ledgeglow)}
.balloon .tie{position:absolute;left:calc(var(--bw) * .42 * .7071);bottom:calc(var(--bw) * .42 * .7071);transform-style:preserve-3d}
.balloon .pill{font-style:normal;position:absolute;left:0;bottom:0;white-space:nowrap;font-family:var(--sans);font-weight:700;font-size:calc(12px * var(--z));line-height:calc(26px * var(--z));padding:0 calc(14px * var(--z));border-radius:calc(13px * var(--z));
  background:hsl(var(--h) 45% var(--lBal));color:hsl(var(--h) 45% var(--lBalT));border:1.5px solid hsl(var(--h) 40% var(--lBalB))}
.balloon .pill small{font-family:var(--mono);font-weight:400;font-size:calc(10px * var(--z));margin-left:calc(8px * var(--z));opacity:.75}
/* 厚度:同一顆牌子往後疊四層,越後面越暗,轉起來看得到側邊 */
.balloon .pill.pb{color:transparent;border-color:hsl(var(--h) 40% calc(var(--lBalB) - 6%));background:hsl(var(--h) 40% calc(var(--lBal) - 9%))}
.balloon .pill.pb1{transform:translateZ(calc(-2.5px * var(--z)))}.balloon .pill.pb2{transform:translateZ(calc(-5px * var(--z)))}.balloon .pill.pb3{transform:translateZ(calc(-7.5px * var(--z)))}.balloon .pill.pb4{transform:translateZ(calc(-10px * var(--z)));background:hsl(var(--h) 40% calc(var(--lBal) - 16%))}
.balloon .pill.pf{transform:translateZ(0)}
/* 右面、左面的字被 30° 斜角壓扁,橫向拉回來 */
.f.rt .t,.f.lt .t{transform:scaleX(1.55);transform-origin:left center;font-size:calc(10.5px * var(--z));letter-spacing:.02em;right:auto;
  width:calc((var(--bw) * var(--k) * .93 - var(--bw) * (0.17 - (1 - var(--k)) / 2)) / 1.55)}
/* 轉盤 */
.city.ring{--bw:calc(340px * var(--z))}
.city.ring .scroller{overflow:hidden;touch-action:none}
.city.ring .skyrow{display:block;padding:0;width:100%;height:100%;transition:transform .75s cubic-bezier(.4,0,.2,1)}
.city.ring .skyrow.drag{transition:none}
.city.ring .bld{position:absolute;left:50%;bottom:0;width:var(--bw);margin-left:calc(var(--bw) / -2);
  transform:rotateY(var(--a)) translateZ(var(--r)) rotateY(var(--tilt))}
/* 沒選中的樓變淡。**不能**加在 .bld 或任何 preserve-3d 的容器上:opacity < 1 與 filter
   會把底下的 3D 壓成平面(CSS Transforms 2 的 grouping property),整棟變成一張紙,
   而且切換時新選中的那棟淡回來的 0.45 秒也是平的(2026-09-23 本人抓到)。
   所以濾鏡只放在葉子上:每一個面、塔尖、紅燈、氣球。 */
.city.ring .bld :is(.f,.spire,.beacon,.pill,.str){transition:filter .45s}
.city.ring .bld:not(.on) :is(.f,.spire,.beacon,.pill,.str){filter:var(--dim)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}.cr .beacon{animation:none}}

/* 縮放鈕:像地圖一樣疊在城市的右下角,街道上面 */
.zoom{position:absolute;right:12px;bottom:42px;z-index:5;display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:4px;overflow:hidden;
  background:var(--panel);box-shadow:0 1px 4px rgba(0,0,0,.18)}
.zoom button{font:inherit;font-family:var(--mono);font-size:18px;line-height:1;width:36px;height:36px;border:none;background:transparent;color:var(--ink);cursor:pointer;padding:0}
.zoom button+button{border-top:1px solid var(--rule)}
.zoom button:hover{background:var(--panel2)}
.zoom button:disabled{color:var(--muted);opacity:.45;cursor:default}
.zoom output{display:block;font-family:var(--mono);font-size:10px;text-align:center;color:var(--muted);padding:3px 0;border-top:1px solid var(--rule)}

/* ---------- 右側資訊框 ---------- */
.panel{border-left:1px solid var(--rule);padding:18px 20px;display:flex;flex-direction:column;gap:10px;overflow:auto;background:var(--panel)}
.panel .k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.panel .ep{font-family:var(--mono);font-size:12px;color:var(--accent);font-weight:500}
.panel h3{font-size:19px;line-height:1.35;font-weight:700}
.panel h3.gone{color:var(--muted)}
.panel .g{font-size:13.5px;color:var(--ink2)}
.panel .lead{font-size:13px;color:var(--ink2);line-height:1.7;border-top:1px solid var(--rule2);padding-top:10px}
.panel .meta{font-family:var(--mono);font-size:11px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 12px}
.rd{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--sig-half);border:1px solid var(--sig-half);padding:1px 6px;display:inline-block;line-height:1.5;vertical-align:1px}
.panel .also{font-size:12.5px;border-top:1px solid var(--rule2);padding-top:8px;color:var(--ink2)}
.panel .also b{display:block;color:var(--same);font-family:var(--mono);font-size:10px;letter-spacing:.1em;margin-bottom:3px}
.panel .go{margin-top:auto;font-family:var(--mono);font-size:12px;color:var(--accent);border-top:1px solid var(--rule2);padding-top:10px;text-decoration:none;display:block}
.panel .go:hover{text-decoration:underline}
.panel .rest p{margin:0 0 8px;font-size:13px;color:var(--ink2)}
.panel .rest .n{font-family:var(--serif);font-size:38px;font-weight:900;line-height:1;color:var(--ink);margin-bottom:10px}
.panel .rest .n small{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--muted);margin-left:6px}
.panel .rest .fine{font-family:var(--mono);font-size:11px;color:var(--muted)}

/* ---------- 首頁下半:這是什麼 ---------- */
.about{padding-top:36px}
.about .cols2{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:40px}
.about h2{font-size:22px;margin-bottom:10px}
.about p{margin:0 0 12px;color:var(--ink2);max-width:66ch}
.about dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;font-size:13.5px}
.about dt{font-family:var(--mono);font-size:12px;color:var(--muted)}
.about dd{margin:0}
.about .legend{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px 14px;font-size:13px}
.about .legend li{display:flex;align-items:center;gap:8px}
.about .legend i{width:14px;height:14px;flex:none;background:hsl(var(--h) var(--sat) var(--lF));border-top:2px solid hsl(var(--h) var(--satLedge) var(--lLedge))}
.about .legend small{font-family:var(--mono);color:var(--muted);font-size:11px}

/* ================= 單集頁:筆錄 ================= */
.strip{--sF:hsl(var(--h) var(--stripS) var(--stripL));background:var(--sF);color:var(--stripT);border-top:2px solid hsl(var(--h) var(--satLedge) var(--lLedge));
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.12)}
.strip .wrap{display:flex;align-items:center;gap:6px 16px;flex-wrap:wrap;min-height:34px;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em}
.strip a{text-decoration:none;color:inherit;border-bottom:1px solid transparent}
.strip a:hover{border-bottom-color:currentColor}
.strip .fl-no{opacity:.8}
:root[data-theme="dark"] .strip{text-shadow:0 0 6px hsl(var(--h) 55% 86% / .45)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .strip{text-shadow:0 0 6px hsl(var(--h) 55% 86% / .45)}}
.dephead{padding-top:34px;padding-bottom:18px;border-bottom:1.5px solid var(--pink)}
.dephead .kick{font-family:var(--mono);font-size:12px;color:var(--pmuted);letter-spacing:.06em;margin:0 0 10px;display:flex;gap:6px 14px;flex-wrap:wrap;align-items:center}
.dephead .kick b{color:var(--ox);font-weight:500}
.dephead .rd{color:var(--ox);border-color:var(--ox)}
.dephead h1{font-size:clamp(26px,4vw,38px);line-height:1.2;font-weight:900}
.dephead .guest{font-size:16px;margin:10px 0 0;color:var(--pink2)}
.dephead .lede{font-size:16px;line-height:1.8;margin:14px 0 0;max-width:62ch;color:var(--pink2)}
.dephead .orig{font-family:var(--mono);font-size:11.5px;color:var(--pmuted);margin:14px 0 0;display:flex;gap:6px 14px;flex-wrap:wrap}
.dephead .orig a{color:var(--ox)}
.points{padding-top:26px}
.sect{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--pmuted);border-bottom:1px dotted var(--pdot);padding-bottom:5px;margin:0 0 12px;display:flex;justify-content:space-between;gap:12px;font-weight:400}
.points ol{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px 32px;counter-reset:pt}
.points li{counter-increment:pt;display:grid;grid-template-columns:26px 1fr;font-size:14.5px;line-height:1.75;color:var(--pink2)}
.points li::before{content:counter(pt,decimal-leading-zero);font-family:var(--mono);font-size:11px;color:var(--pmuted);padding-top:3px}
.points li b{color:var(--pink);font-weight:700}
.depcols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:30px;border-top:1.5px solid var(--pink);border-bottom:1.5px solid var(--pink)}
.depcols .col{padding:18px 22px 22px 0;min-width:0}
.depcols .col+.col{border-left:1px solid var(--prule);background:var(--paper2);padding-left:22px;padding-right:22px}
.ln{display:grid;grid-template-columns:24px 62px minmax(0,1fr);gap:8px;padding:7px 0;border-bottom:1px dotted var(--pdot);font-size:14px;line-height:1.7}
.ln u{text-decoration:none;font-family:var(--mono);font-size:11px;color:var(--pmuted);text-align:right;padding-top:2px}
.ln .tc{font-family:var(--mono);font-size:12.5px;color:var(--ox);text-decoration:none;padding-top:1px;font-variant-numeric:tabular-nums}
.ln .tc:hover{text-decoration:underline}
.ln b{display:block;font-weight:700;color:var(--pink)}
.ln p{margin:0;color:var(--pink2)}
.modes{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}
.modes button{font:inherit;font-family:var(--mono);font-size:11.5px;background:transparent;color:var(--pmuted);border:1px solid var(--prule);padding:5px 10px;cursor:pointer;border-radius:2px;text-align:left;line-height:1.45}
.modes button[aria-selected="true"]{background:var(--pink);color:var(--paper);border-color:var(--pink)}
.modes button small{display:block;font-size:10px;opacity:.8}
.mode[hidden]{display:none}
.mode h3{font-size:12px;font-family:var(--mono);font-weight:400;letter-spacing:.14em;color:var(--pmuted);margin:22px 0 8px}
.mode h3:first-child{margin-top:0}
.quote{margin:0 0 14px;padding:0 0 12px;border-bottom:1px dotted var(--pdot)}
.quote q{display:block;font-family:var(--serif);font-size:15px;line-height:1.6;color:var(--pink);quotes:"“" "”"}
.quote p{margin:6px 0 0;font-size:13.5px;color:var(--pink2)}
.quote .tc{font-family:var(--mono);font-size:11.5px;color:var(--ox);text-decoration:none}
.terms{margin:0;display:grid;grid-template-columns:minmax(0,11em) minmax(0,1fr);gap:0 14px;font-size:13.5px}
.terms dt{font-weight:700;padding:6px 0;border-bottom:1px dotted var(--pdot)}
.terms dd{margin:0;padding:6px 0;border-bottom:1px dotted var(--pdot);color:var(--pink2)}
.more{margin:0;padding-left:1.1em;font-size:13.5px;color:var(--pink2)}
.more li{margin:0 0 6px}
.other-head{margin:0 0 12px}
.other-head .kick{font-family:var(--mono);font-size:11.5px;color:var(--pmuted);margin:0}
.other-head h4{font-size:18px;line-height:1.35;margin:4px 0 0}
.other-head h4 a{text-decoration:none;border-bottom:1px solid var(--prule)}
.other-head h4 a:hover{border-bottom-color:currentColor}
.also-note{font-size:12.5px;color:var(--pmuted);margin:16px 0 0;font-family:var(--mono)}
.epnav{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-top:22px}
.epnav a{display:block;text-decoration:none;font-size:14px;line-height:1.5;padding:10px 0;border-top:1px solid var(--prule)}
.epnav a small{display:block;font-family:var(--mono);font-size:11px;color:var(--pmuted);letter-spacing:.08em}
.epnav a:hover span{text-decoration:underline}
.epnav .nx{text-align:right;grid-column:2}

/* ================= 名詞索引 ================= */
.glhead{padding-top:34px;padding-bottom:18px;border-bottom:1.5px solid var(--pink)}
.glhead h1{font-size:clamp(26px,4vw,36px);font-weight:900}
.glhead p{margin:10px 0 0;color:var(--pink2)}
.glfind{margin:16px 0 0;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.glfind input{font:inherit;font-size:15px;padding:8px 12px;border:1px solid var(--prule);background:var(--paper2);color:var(--pink);width:min(420px,100%);border-radius:2px}
.glfind span{font-family:var(--mono);font-size:12px;color:var(--pmuted)}
.gllist{padding-top:12px}
.gl{border-bottom:1px dotted var(--pdot);padding:10px 0;display:grid;grid-template-columns:minmax(0,15em) minmax(0,1fr);gap:4px 18px}
.gl[hidden]{display:none}
.gl h3{font-family:var(--sans);font-size:14.5px;font-weight:700;line-height:1.6}
.gl h3 small{font-family:var(--mono);font-weight:400;font-size:11px;color:var(--pmuted);margin-left:6px}
.gl ul{list-style:none;margin:0;padding:0;font-size:13.5px;color:var(--pink2)}
.gl li{margin:0 0 4px}
.gl li a{font-family:var(--mono);font-size:11.5px;color:var(--ox);text-decoration:none;margin-right:8px}
.gl li a:hover{text-decoration:underline}
.glempty{padding:24px 0;color:var(--pmuted)}
.glempty[hidden]{display:none}

/* ================= 窄螢幕 ================= */
@media (max-width:860px){
  .skystage{grid-template-columns:1fr;height:auto}
  .city{height:min(72svh,640px)}
  .panel{border-left:none;border-top:1px solid var(--rule);min-height:240px}
  .about .cols2{grid-template-columns:1fr;gap:26px}
  .depcols{grid-template-columns:1fr}
  .depcols .col{padding-right:0}
  .depcols .col+.col{border-left:none;border-top:1px solid var(--prule);margin:0 -24px;padding:18px 24px 22px}
  .gl{grid-template-columns:1fr}
}
@media (max-width:720px){
  .wrap{padding:0 16px}
  .sky .wrap{padding:0}
  .skystage,.hint{border-left:none;border-right:none}
  .city.ring{--bw:calc(250px * var(--z))}
  .hint .desk{display:none}.hint .touch{display:inline}
  .depcols .col+.col{margin:0 -16px;padding:18px 16px 22px}
  .ln{grid-template-columns:20px 56px minmax(0,1fr);gap:6px}
  .points ol{grid-template-columns:1fr}
  .terms{grid-template-columns:1fr}
  .terms dt{border-bottom:none;padding-bottom:0}
  .epnav{grid-template-columns:1fr}
  .epnav .nx{grid-column:1}
}
@media (hover:none){.hint .desk{display:none}.hint .touch{display:inline}}
