/* 網站版閱讀器：在原本閱讀器的樣式上，換成手抄本的紙色與字，加上網站功能的介面 */
html:root{--serif:"Noto Serif TC","Noto Serif CJK TC","Source Han Serif TC","思源宋體","PMingLiU","MingLiU",serif}
html:root[data-theme="paper"]{
  --bg:#CDBB95; --page:#EADFC5; --ink:#2B2219; --muted:#76664F; --rule:#BBA67A;
  --accent:#A3301E; --accent-soft:rgba(163,48,30,.1); --side:#E2D5B6; --mark:#E7C56C;
}
html:root[data-theme="night"]{--accent:#D9B25E;--accent-soft:rgba(217,178,94,.14)}
html{scroll-behavior:auto}
body{font-family:var(--serif);background:var(--bg);color:var(--ink);font-size:16px;line-height:normal}

/* 紙張質感與朱紅首字（只在紙色、橫排） */
:root[data-theme="paper"] article{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .12 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  box-shadow:inset 0 0 70px rgba(120,82,30,.22),0 1px 0 rgba(120,82,30,.2),0 18px 50px rgba(60,40,15,.18)}
article h1{font-family:var(--hand);font-weight:400;letter-spacing:.14em}
:root[data-theme="paper"] article h1{color:var(--accent)}
article hr::after{content:"✦";color:var(--accent);opacity:.7}

/* 頁首 */
header.bar .gdb-home{font-family:"Grenze Gotisch","UnifrakturMaguntia",serif;font-size:27px;line-height:1;letter-spacing:.02em;color:var(--accent);padding:0 10px 0 4px;text-decoration:none;display:flex;align-items:center}
header.bar .gdb-acct{min-width:36px;margin-left:2px}
header.bar .gdb-acct.in{width:32px;height:32px;min-width:32px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;line-height:1;font-size:16px;color:#F6E7C9;font-family:var(--hand);
  background:radial-gradient(circle at 35% 30%,#C4452E,#A3301E 45%,#7E2316);box-shadow:inset 0 0 0 2px rgba(255,220,190,.2),0 1px 4px rgba(0,0,0,.3)}
header.bar .gdb-acct.in:hover{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,220,190,.45),0 0 10px rgba(163,48,30,.5)}
#gdbAcctMenu{position:fixed;top:54px;right:10px;z-index:40;min-width:200px;padding:8px 0;background:var(--page);border:1px solid var(--rule);border-radius:4px;box-shadow:0 14px 34px rgba(0,0,0,.2);font-size:15px}
#gdbAcctMenu .who{padding:4px 16px 8px;border-bottom:1px solid var(--rule);font-family:var(--hand)}
#gdbAcctMenu .who small{display:block;color:var(--muted);font-family:var(--serif);font-size:12px}
#gdbAcctMenu a,#gdbAcctMenu button{display:block;width:100%;text-align:left;padding:7px 16px;border:0;background:none;text-decoration:none;color:var(--ink)}
#gdbAcctMenu a:hover,#gdbAcctMenu button:hover{background:var(--accent-soft);color:var(--accent)}
@media (max-width:600px){header.bar .gdb-home{font-size:23px;padding:0 6px 0 2px}}

/* 封面：放在網站的天色前面 */
body:not(.reading){background:transparent}
body:not(.reading) #cover{color:#E9DFC9}
#cover .vtitle .main{font-family:var(--hand);font-weight:400;color:#EBD08A;text-shadow:0 0 30px rgba(240,170,90,.35)}
#cover .vtitle .sub{font-family:var(--hand);color:#AFA690}
#cover .cover-side p{color:#C9BFA8}
#cover .primary{background:linear-gradient(180deg,#B5392A,#A3301E 55%,#7E2316);border:0;color:#F6E7C9;font-family:var(--hand);letter-spacing:.14em;
  box-shadow:inset 0 0 0 1px rgba(235,208,138,.5),inset 0 0 0 4px #7E2316,inset 0 0 0 5px rgba(235,208,138,.35)}
#cover .ghost{color:#EBD08A;border-color:rgba(235,208,138,.5);font-family:var(--hand);letter-spacing:.1em}
#cover .linkbtn{color:#AFA690}
body:not(.reading) header.bar{background:transparent;border-bottom-color:transparent;backdrop-filter:none}
body:not(.reading) header.bar .iconbtn,body:not(.reading) header.bar .where{color:#D8CDB3}
/* 左上角 Gudubi：跟主站導覽列同一個字型；封面與夜間模式用金色 */
body:not(.reading) header.bar .gdb-home,html[data-theme="night"] header.bar .gdb-home{color:#EBD08A;text-shadow:0 0 18px rgba(235,208,138,.25)}
/* 封面切換作品：頁首左右箭頭＋底下的圓點，左右滑動也可以 */
header.bar .gdb-work{flex:none;width:34px;height:34px;padding:0;border:0;background:none;display:inline-flex;align-items:center;justify-content:center;
  font:400 26px/1 var(--serif);color:#D8CDB3;cursor:pointer;border-radius:50%;transition:color .2s,background .2s}
header.bar .gdb-work:hover{color:#EBD08A;background:rgba(235,208,138,.12)}
header.bar .gdb-work.off{visibility:hidden;cursor:default}
body.reading header.bar .gdb-work{display:none}
body:not(.reading) header.bar .where{flex:0 1 auto}
body:not(.reading) header.bar .gdb-work.prev{margin-left:auto}
body:not(.reading) header.bar .gdb-work.next{margin-right:auto}
#gdbWorks{position:fixed;left:0;right:0;bottom:22px;z-index:2;display:flex;justify-content:center;gap:14px;pointer-events:none}
#gdbWorks a{pointer-events:auto;display:flex;align-items:center;gap:7px;text-decoration:none;font-family:var(--hand);font-size:14px;letter-spacing:.12em;color:#AFA690;padding:4px 6px}
#gdbWorks a i{width:8px;height:8px;border-radius:50%;border:1px solid rgba(235,208,138,.7);display:block}
#gdbWorks a.on{color:#EBD08A}
#gdbWorks a.on i{background:#EBD08A;box-shadow:0 0 8px rgba(235,208,138,.6)}
#gdbWorks a:not(.on):hover{color:#D8CDB3}
body.reading #gdbWorks{display:none}
#cover{transition:opacity .28s,transform .28s,margin .25s}
body.gdb-go-next #cover{opacity:0;transform:translateX(-48px)}
body.gdb-go-prev #cover{opacity:0;transform:translateX(48px)}
@media (max-width:560px){#gdbWorks a span{display:none}#gdbWorks{gap:4px}}


/* 載入畫面 */
#gdbVeil{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 120%,#6b2f45,#1d1b3f 60%,#0d1328);transition:opacity .6s}
#gdbVeil.gone{opacity:0;pointer-events:none}
#gdbVeil .in{text-align:center;color:#E9DFC9}
#gdbVeil b{display:block;font-family:var(--hand);font-weight:400;font-size:clamp(30px,6vw,44px);letter-spacing:.3em;color:#EBD08A;margin-bottom:10px}
#gdbVeil span{font-size:14px;letter-spacing:.3em;color:#AFA690}
#gdbVeil i{display:block;width:180px;height:2px;margin:18px auto 0;background:rgba(235,208,138,.18);overflow:hidden}
#gdbVeil em{display:block;height:100%;width:0;background:linear-gradient(90deg,#C8643C,#EBD08A);transition:width .2s}

/* 書籤 */
#bmPanel{position:fixed;top:56px;right:10px;width:min(340px,calc(100vw - 20px));max-height:min(70vh,560px);overflow:auto;z-index:27;display:none;
  background:var(--page);border:1px solid var(--rule);border-radius:6px;box-shadow:0 14px 34px rgba(0,0,0,.18);padding:12px 0}
body.bm-open #bmPanel{display:block}
#bmPanel .bm-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 14px 10px;border-bottom:1px solid var(--rule)}
#bmPanel .bm-head b{font-family:var(--hand);font-weight:400;font-size:18px;letter-spacing:.14em}
#bmPanel .bm-head .primary{padding:6px 12px;font-size:14px}
#bmPanel ol{list-style:none;margin:0;padding:4px 0}
#bmPanel li{display:flex;align-items:stretch}
#bmPanel .go{flex:1;text-align:left;border:0;background:none;padding:9px 14px;font-size:14px;line-height:1.6;color:var(--ink)}
#bmPanel .go small{display:block;color:var(--muted);font-size:12px}
#bmPanel .go:hover{background:var(--accent-soft)}
#bmPanel .del{border:0;background:none;color:var(--muted);padding:0 14px;font-size:18px}
#bmPanel .del:hover{color:var(--accent)}
#bmPanel .empty{margin:12px 14px 4px;color:var(--muted);font-size:14px;line-height:1.8}
article p.gdb-bm{position:relative}
article p.gdb-bm::before{content:"";position:absolute;left:-26px;top:.2em;width:10px;height:22px;background:var(--accent);clip-path:polygon(0 0,100% 0,100% 100%,50% 75%,0 100%)}
body.vertical article p.gdb-bm::before{left:auto;top:-26px;right:.2em;width:22px;height:10px;clip-path:polygon(0 0,100% 0,75% 50%,100% 100%,0 100%)}

/* 圖鑑裡的「在地圖上看」 */
.cx-onmap{display:inline-flex;align-items:center;gap:6px;margin:6px 0 0;border:1px solid var(--accent);color:var(--accent);background:transparent;border-radius:4px;padding:6px 14px;font-size:14px}
.cx-onmap::before{content:"";width:12px;height:12px;background:currentColor;clip-path:polygon(50% 0,100% 40%,80% 100%,20% 100%,0 40%)}
.cx-onmap:hover{background:var(--accent-soft)}

/* ---------- 地圖 ---------- */
body.map-open{overflow:hidden}
#gmap{position:fixed;inset:0;z-index:50;display:none;background:#3a3125;color:#E9DFC9;outline:none}
body.map-open #gmap{display:block;animation:gmIn .45s cubic-bezier(.2,.7,.2,1)}
@keyframes gmIn{from{opacity:0;transform:scale(1.02)}to{opacity:1;transform:none}}
#gmap .gm-stage{position:absolute;inset:0;overflow:hidden;cursor:grab;touch-action:none}
#gmap .gm-stage.drag{cursor:grabbing}
#gmap .gm-world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
#gmap .gm-world svg{display:block}
#gmap .gm-fog{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#gmap.loading .gm-stage::after{content:"展開地圖……";position:absolute;inset:0;display:grid;place-items:center;font-family:var(--hand);letter-spacing:.3em;color:#EBD08A}
/* 國界上色 */
#gmap #regions path{fill:transparent;stroke:none;pointer-events:none;transition:fill-opacity .3s}
#gmap #regions path.on{fill:var(--c);fill-opacity:.16;stroke:var(--c);stroke-opacity:.0;pointer-events:visiblePainted;cursor:pointer}
#gmap #regions path.on:hover{fill-opacity:.34}
#gmap.no-tint #regions path.on{fill-opacity:0}
#gmap.no-tint #regions path.on:hover{fill-opacity:.12}
#gmap #terrs{filter:contrast(1.25)}

/* 地點與地名 */
#gmap .gm-pins{position:absolute;inset:0;pointer-events:none}
#gmap .gm-pins>*{position:absolute;left:0;top:0;pointer-events:auto}
#gmap .gm-pin{display:flex;align-items:center;gap:4px;border:0;background:none;padding:0;color:#2B2219;cursor:pointer;margin:-11px 0 0 -11px;font-family:var(--hand);font-size:14px;letter-spacing:.08em;white-space:nowrap}
#gmap .gm-pin svg{width:22px;height:22px;flex:none;padding:2px;border-radius:50%;color:#7E2316;background:radial-gradient(#F3E6C4 55%,rgba(243,230,196,0) 72%);filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
#gmap .gm-pin span{padding:1px 6px;border-radius:2px;background:rgba(243,230,196,.82);box-shadow:0 1px 3px rgba(0,0,0,.25)}
#gmap .gm-pin.z-l{margin:-15px 0 0 -15px}
#gmap .gm-pin.z-l svg{width:30px;height:30px}
#gmap .gm-pin.z-l span{font-size:17px}
#gmap .gm-pin.z-s{margin:-9px 0 0 -9px}
#gmap .gm-pin.z-s svg{width:18px;height:18px;padding:1.5px}
#gmap .gm-pin.z-s span{font-size:13px}
#gmap .gm-pin.unk svg{color:#5E4A36;background:radial-gradient(#E9DFC9 55%,rgba(233,223,201,0) 72%)}
#gmap .gm-pin.plot svg{color:#8A1E12}
#gmap .gm-pin.tent svg{outline:1.5px dashed rgba(126,35,22,.7);outline-offset:1px}
#gmap .gm-pin.crowd span{display:none}
#gmap .gm-pin.crowd:hover span,#gmap .gm-pin.crowd.sel span,#gmap .gm-pin.crowd:focus-visible span{display:block;position:relative;z-index:2}
#gmap .gm-pin:hover span,#gmap .gm-pin.sel span{background:#A3301E;color:#F6E7C9}
#gmap .gm-pin:focus-visible{outline:2px solid #EBD08A;outline-offset:2px}
#gmap .gm-pin.sel svg{animation:gmPulse 1.6s infinite}
@keyframes gmPulse{0%{box-shadow:0 0 0 0 rgba(163,48,30,.6)}100%{box-shadow:0 0 0 16px rgba(163,48,30,0)}}
#gmap .gm-pin.fresh{animation:gmDrop .7s cubic-bezier(.3,1.6,.5,1) both;animation-delay:.35s}
#gmap .gm-pin.fresh svg::after{content:""}
@keyframes gmDrop{from{opacity:0;translate:0 -18px}to{opacity:1;translate:0 0}}
#gmap .gm-region{border:0;background:none;padding:0;transform-origin:0 0;cursor:pointer;color:#3B2A1A}
#gmap .gm-region span{display:block;translate:-50% -50%;font-family:var(--hand);font-size:calc(17px * var(--s) * clamp(.9,var(--k),1.6));letter-spacing:.5em;
  text-shadow:0 0 6px rgba(243,230,196,.9),0 0 2px rgba(243,230,196,1);white-space:nowrap;opacity:.85}
#gmap .gm-region:hover span{color:#A3301E;opacity:1}
#gmap .gm-region.unknown{cursor:default}
#gmap .gm-region.unknown span{color:#E9DFC9;text-shadow:0 1px 4px rgba(0,0,0,.6);opacity:.45;font-size:calc(14px * clamp(.9,var(--k),1.4));letter-spacing:.4em}
#gmap .gm-label span{display:block;translate:-50% -50%;font-family:var(--hand);font-size:calc(14px * var(--s) * clamp(.9,var(--k),1.6));letter-spacing:.4em;color:#5A4630;text-shadow:0 0 5px rgba(243,230,196,.9);white-space:nowrap;pointer-events:none}
#gmap.no-names .gm-label,#gmap.no-names .gm-pin span{display:none}
#gmap.no-names .gm-pin.sel span{display:block;position:relative;z-index:2}
#gmap .gm-pin:hover,#gmap .gm-pin:focus-visible{z-index:6}
#gmap .gm-pin.sel{z-index:7}
#gmap .gm-label.k-sea span{font-style:italic;color:#D9E6EC;letter-spacing:.7em;text-shadow:0 1px 3px rgba(0,0,0,.85)}
#gmap .gm-label.k-river span{color:#2F5873;letter-spacing:.3em}
#gmap .gm-label.k-mount span{color:#4A2E18;letter-spacing:.6em}
#gmap .gm-label.k-land span{color:#3E2F1F}
#gmap .gm-tip{position:fixed;left:0;top:0;z-index:3;pointer-events:none;background:rgba(20,16,10,.85);color:#F3E6C4;padding:3px 10px;border-radius:2px;font-family:var(--hand);font-size:14px;letter-spacing:.1em}

/* 上方列、控制鈕 */
#gmap .gm-top{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:16px;padding:10px 14px 26px;
  background:linear-gradient(rgba(16,12,8,.78),rgba(16,12,8,0));pointer-events:none}
#gmap .gm-top>*{pointer-events:auto}
#gmap .gm-title{flex:1;min-width:0;display:flex;align-items:baseline;gap:14px}
#gmap .gm-title b{font-family:var(--hand);font-weight:400;font-size:22px;letter-spacing:.3em;color:#EBD08A}
#gmap .gm-prog{font-size:13px;color:#C9BFA8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#gmap .gm-layers{display:flex;border:1px solid rgba(235,208,138,.4);border-radius:3px;overflow:hidden}
#gmap .gm-layers button{border:0;background:transparent;color:#C9BFA8;padding:5px 11px;font-size:13px;font-family:var(--hand);letter-spacing:.1em}
#gmap .gm-layers button+button{border-left:1px solid rgba(235,208,138,.25)}
#gmap .gm-layers button[aria-pressed="true"]{background:rgba(235,208,138,.18);color:#F3E6C4}
#gmap .gm-x{border:0;background:none;color:#E9DFC9;font-size:28px;line-height:1;padding:2px 8px}
#gmap .gm-ctl{position:absolute;left:14px;bottom:104px;display:flex;flex-direction:column;border-radius:3px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.4)}
#gmap .gm-ctl button{width:38px;height:36px;border:0;background:rgba(232,220,192,.92);color:#2B2219;font-size:17px;font-family:var(--hand)}
#gmap .gm-ctl button+button{border-top:1px solid rgba(43,34,25,.15)}
#gmap .gm-ctl button:hover{background:#F3E6C4;color:#A3301E}
#gmap .gm-foot{position:absolute;left:14px;bottom:14px;display:flex;align-items:flex-end;gap:14px;pointer-events:none}
#gmap .gm-compass{width:74px;height:74px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
#gmap .gm-scale{padding-bottom:10px;color:#F3E6C4;font-size:12px;text-shadow:0 1px 2px #000}
#gmap .gm-scale i{display:block;height:6px;border:1.5px solid #F3E6C4;border-top:0;margin-bottom:3px;box-shadow:0 1px 2px rgba(0,0,0,.6)}
#gmap .gm-hint{margin:0 0 10px;font-size:12px;color:rgba(243,230,196,.6);text-shadow:0 1px 2px #000}
@media (max-width:640px){#gmap .gm-hint,#gmap .gm-prog{display:none}#gmap .gm-compass{width:54px;height:54px}#gmap .gm-layers button{padding:5px 7px}}

/* 地點卡片 */
#gmap .gm-card{position:absolute;top:64px;right:14px;bottom:78px;width:min(360px,calc(100vw - 28px));overflow:auto;z-index:2;padding:26px 24px 22px;color:#2B2219;
  background:#E8DCC0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .12 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  box-shadow:inset 0 0 60px rgba(120,82,30,.25),0 20px 50px rgba(0,0,0,.5);border-radius:2px}
#gmap .gm-card.in{animation:gmCard .45s cubic-bezier(.2,.7,.2,1)}
@keyframes gmCard{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
#gmap .gm-card .gm-cx{position:absolute;top:8px;right:10px;border:0;background:none;font-size:24px;color:#8C7C64}
#gmap .gm-card .kind{font-size:13px;color:#8C7C64;letter-spacing:.2em}
#gmap .gm-card .kind em{font-style:normal;margin-left:10px;padding:1px 7px;border:1px dashed #A3301E;color:#A3301E;letter-spacing:.05em;border-radius:2px}
#gmap .gm-card h2{margin:.15em 0 .2em;font-family:var(--hand);font-weight:400;font-size:30px;letter-spacing:.16em;color:#A3301E}
#gmap .gm-card .aka{margin:0 0 .6em;color:#76664F;font-size:13px}
#gmap .gm-card section{margin:14px 0 0}
#gmap .gm-card h3{margin:0 0 2px;font-family:var(--hand);font-weight:400;font-size:15px;letter-spacing:.2em;color:#2C4A86}
#gmap .gm-card p{margin:0;font-size:15px;line-height:1.85;text-align:justify}
#gmap .gm-card .muted{color:#8C7C64;margin-top:12px}
#gmap .gm-card .desc{margin:.4em 0 0;color:#3A2E22}
#gmap .gm-card .kind em.pl{border-style:solid}
#gmap .gm-card .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
#gmap .gm-card .chips button{border:1px solid #BBA67A;background:rgba(255,250,235,.4);border-radius:2px;padding:3px 10px;font-size:14px}
#gmap .gm-card .chips button:hover{border-color:#A3301E;color:#A3301E}
#gmap .gm-card .acts{display:flex;flex-direction:column;gap:8px;margin-top:22px}
#gmap .gm-card .acts button{text-align:center;padding:9px 14px;border-radius:2px;font-size:15px}
#gmap .gm-card .primary{border:0;background:#A3301E;color:#F6E7C9}
#gmap .gm-card .ghost{border:1px solid #BBA67A;background:transparent;color:#2B2219}
@media (max-width:640px){#gmap .gm-card{top:auto;left:8px;right:8px;width:auto;bottom:8px;max-height:58vh}}
@media (prefers-reduced-motion:reduce){#gmap .gm-pin.fresh,#gmap .gm-card.in,body.map-open #gmap{animation:none}#gmap .gm-pin.sel svg{animation:none}}
/* 其他裝置的進度：要不要跳過去 */
#gdbJump{position:fixed;left:50%;bottom:72px;transform:translateX(-50%);z-index:45;display:flex;align-items:center;gap:6px;max-width:calc(100vw - 32px);padding:8px 8px 8px 16px;background:var(--page);border:1px solid var(--rule);border-radius:6px;box-shadow:0 14px 34px rgba(0,0,0,.2);font-size:14px;color:var(--ink)}
#gdbJump span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#gdbJump .go{border:0;border-radius:4px;padding:6px 12px;background:var(--accent);color:#F6E7C9;font-family:var(--hand);letter-spacing:.1em;cursor:pointer}
#gdbJump .x{border:0;background:none;color:var(--muted);font-size:18px;padding:0 6px;cursor:pointer}

/* ---------- 段落評論 ---------- */
body.cm-on #art p[data-p]{cursor:pointer;border-radius:4px;transition:background .2s}
#art p.cm-sel,#art p.cm-focus{background:var(--accent-soft);box-shadow:0 0 0 6px var(--accent-soft)}
#art .gdb-cc,#art .gdb-cm-add{display:inline-flex;align-items:center;justify-content:center;gap:3px;vertical-align:.12em;margin-left:.35em;
  height:1.45em;min-width:1.45em;padding:0 .42em;border-radius:.75em;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  background:color-mix(in srgb,var(--page) 70%,transparent);color:var(--accent);font:600 .62em/1 var(--sans);text-indent:0;letter-spacing:0;cursor:pointer}
#art .gdb-cc:hover,#art .gdb-cm-add:hover{background:var(--accent);color:var(--page)}
#art .gdb-cc.hot{border-color:#d9622b;color:#d9622b}
#art .gdb-cc svg{width:1.05em;height:1.05em;fill:currentColor}
#art .gdb-cm-add{animation:cmPop .18s ease}
@keyframes cmPop{from{transform:scale(.7);opacity:0}}
body.vertical #art .gdb-cc,body.vertical #art .gdb-cm-add{margin:.35em 0 0;vertical-align:baseline}
#art .gdb-cm-orphan{display:block;margin:1.4em auto 0;padding:8px 16px;border:1px dashed var(--rule);border-radius:18px;background:none;color:var(--muted);font:14px var(--serif);cursor:pointer}
#art .gdb-cm-orphan:hover{color:var(--accent);border-color:var(--accent)}

#cmScrim{position:fixed;inset:51px 0 0;z-index:33;background:rgba(10,12,18,.32);display:none}
#cmSheet{position:fixed;z-index:34;display:flex;flex-direction:column;background:var(--side);color:var(--ink);font-family:var(--sans);
  top:51px;right:0;bottom:0;width:min(430px,100%);border-left:1px solid var(--rule);box-shadow:-14px 0 34px rgba(0,0,0,.14);
  transform:translateX(102%);transition:transform .26s ease;visibility:hidden}
body.cm-open #cmSheet{transform:none;visibility:visible}
#cmSheet .cm-grip{display:none}
#cmSheet .cm-head{display:flex;align-items:flex-start;gap:8px;padding:14px 12px 10px 18px;border-bottom:1px solid var(--rule)}
#cmSheet .cm-quote{flex:1;min-width:0;font-family:var(--serif);font-size:15px;line-height:1.7;color:var(--ink);border-left:3px solid var(--accent);padding-left:10px}
#cmSheet .cm-quote small{display:block;font-family:var(--sans);font-size:12px;color:var(--muted);letter-spacing:.06em}
#cmSheet .cm-tools{display:flex;align-items:center;gap:10px;padding:8px 18px;font-size:13px;color:var(--muted)}
#cmSheet .cm-tools .sp,#cmSheet .sp{flex:1}
#cmSheet .cm-sort{display:flex;border:1px solid var(--rule);border-radius:14px;overflow:hidden}
#cmSheet .cm-sort button{border:0;background:none;padding:3px 12px;font-size:12.5px;color:var(--muted)}
#cmSheet .cm-sort button[aria-selected="true"]{background:var(--accent);color:var(--page)}
#cmSheet .cm-list{flex:1;overflow:auto;padding:4px 0 16px;overscroll-behavior:contain}
#cmSheet .cm-empty,#cmSheet .cm-note{color:var(--muted);text-align:center;font-size:14px;margin:28px 18px}
#cmSheet .cm-thread{padding:12px 18px;border-bottom:1px solid color-mix(in srgb,var(--rule) 55%,transparent)}
#cmSheet .cm-thread.private{background:color-mix(in srgb,var(--accent) 5%,transparent)}
#cmSheet .cm-replies{margin:8px 0 0 15px;padding-left:12px;border-left:2px solid var(--rule)}
#cmSheet .cm-replies .cm-item{padding-top:8px}
#cmSheet .cm-item.fresh{animation:cmFresh 1.6s ease}
@keyframes cmFresh{from{background:var(--accent-soft)}}
#cmSheet .cm-item.is-hidden{opacity:.55}
#cmSheet .cm-item.gone .cm-body{color:var(--muted);font-style:italic}
#cmSheet .cm-meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 7px;font-size:13px}
#cmSheet .cm-seal{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font:13px/1 var(--hand,var(--serif));color:#F6E7C9;
  background:radial-gradient(circle at 35% 30%,#C4452E,#A3301E 45%,#7E2316)}
#cmSheet .cm-name{font-weight:600;color:var(--ink)}
#cmSheet .cm-badge{font-size:11px;padding:1px 7px;border-radius:9px;border:1px solid var(--accent);color:var(--accent)}
#cmSheet .cm-badge.au{background:var(--accent);color:var(--page)}
#cmSheet .cm-lock,#cmSheet .cm-flag{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;color:var(--muted)}
#cmSheet .cm-lock svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.4}
#cmSheet .cm-flag{color:#b2552e}
#cmSheet .cm-time{margin-left:auto;font-size:12px;color:var(--muted)}
#cmSheet .cm-was{margin:6px 0 0;padding:2px 0 2px 9px;border-left:2px solid var(--rule);font:13px/1.6 var(--serif);color:var(--muted)}
#cmSheet .cm-body{margin:6px 0 0 31px;font-size:15px;line-height:1.75;white-space:pre-wrap;word-break:break-word}
#cmSheet .cm-replies .cm-body{margin-left:31px}
#cmSheet .cm-at{color:var(--accent)}
#cmSheet .cm-acts{display:flex;align-items:center;gap:2px;margin:4px 0 0 25px}
#cmSheet .cm-acts button{border:0;background:none;color:var(--muted);font-size:12.5px;padding:4px 7px;border-radius:12px;display:inline-flex;align-items:center;gap:4px}
#cmSheet .cm-acts button:hover{color:var(--accent);background:var(--accent-soft)}
#cmSheet .cm-like svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5}
#cmSheet .cm-like.on{color:#d0473a}
#cmSheet .cm-like.on svg{fill:currentColor}
#cmSheet .cm-edit{margin:6px 0 0 31px}
#cmSheet textarea{width:100%;border:1px solid var(--rule);border-radius:8px;padding:8px 10px;background:var(--page);color:var(--ink);font:15px/1.6 var(--sans);resize:none}
#cmSheet textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}
#cmSheet .cm-row{display:flex;align-items:center;gap:8px;margin-top:6px}
#cmSheet .cm-compose{padding:10px 14px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--rule);background:var(--side)}
#cmSheet .cm-replying{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);margin-bottom:6px}
#cmSheet .cm-replying b{color:var(--accent);font-weight:600}
#cmSheet .cm-x{margin-left:auto;border:0;background:none;color:var(--muted);font-size:18px;line-height:1}
#cmSheet .cm-priv{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--ink);cursor:pointer}
#cmSheet .cm-priv small{color:var(--muted);font-size:11.5px}
#cmSheet .cm-len{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
#cmSheet .cm-send,#cmSheet .cm-login{border:0;border-radius:16px;padding:6px 16px;background:var(--accent);color:var(--page);font-size:14px}
#cmSheet .cm-send:disabled{opacity:.45}
#cmSheet .cm-edit .cm-row button:not(.cm-send){border:0;background:none;color:var(--muted);font-size:13px}
#cmSheet .cm-login{display:block;width:100%;padding:10px}
@media (max-width:600px){
  body.cm-open #cmScrim{display:block}
  #cmSheet{top:auto;left:0;right:0;width:auto;height:min(78dvh,640px);border-left:0;border-top:1px solid var(--rule);border-radius:16px 16px 0 0;
    box-shadow:0 -14px 34px rgba(0,0,0,.2);transform:translateY(104%)}
  #cmSheet .cm-grip{display:block;width:38px;height:4px;border-radius:2px;background:var(--rule);margin:8px auto 0}
  #cmSheet .cm-head{padding-top:8px}
}