/* Layout: one carved slab (crown image + seamless body tile, max 680px) standing on a galaxy; plaques recessed into it; sticky rail; fixed carving bar */
:root{
  --void:#030305; --ink:#ece6da; --ink-2:#aaa398; --ink-3:#77726a;
  --gold:#d9b878; --gold-hi:#f7e4b4; --gold-lo:#8f6c34;
  --cream:#ecdcb4; --cream-ink:#231c10; --heart:#e58c82; --ok:#9fd3b0; --ember:#d99a66;
  --line:rgba(236,226,205,.1); --line-strong:rgba(236,226,205,.2);
  --plaque:rgba(9,9,11,.62);
  --f-cjk:"Noto Serif SC","Songti SC","STSong","SimSun",serif;
  --f-lat:"Cormorant Garamond","Noto Serif SC",Georgia,serif;
  --f-ui:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Segoe UI",sans-serif;
  --slab:680px;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{background:var(--void);color:var(--ink);font-family:var(--f-ui);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:#030305}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
a{color:var(--gold)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.galaxy{position:fixed;inset:0;z-index:-2;background:#030305}
.galaxy::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,rgba(3,3,5,.15),rgba(3,3,5,.75))}
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}

/* slab */
.world{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:14px 0}
.slab{position:relative;max-width:var(--slab);margin:0 auto;container-type:inline-size;filter:drop-shadow(0 30px 60px rgba(0,0,0,.85))}
.slab-crown{position:absolute;top:0;left:0;width:100%;aspect-ratio:804/720;background:url("/assets/crown.webp?v=3c60de94b5") 0 0/100% 100% no-repeat;pointer-events:none}
.slab-body{position:absolute;left:0;right:0;bottom:0;top:calc(100cqw * 720 / 804 - 1px);background:url("/assets/body.webp?v=2a195b9c67") 0 0/100% auto repeat-y;pointer-events:none}
.slab-in{position:relative;padding:0 calc(100cqw * 50 / 804)}

/* crown */
.crest{text-align:center;padding-top:calc(100cqw * 70 / 804);padding-bottom:calc(100cqw * 26 / 804)}
.crest h1{margin:0;font-family:var(--f-cjk);font-weight:900;font-size:calc(100cqw * 84 / 804 + 12px);letter-spacing:.14em;padding-left:.14em;line-height:1.1;
  background:linear-gradient(180deg,#fff1c9 0%,#e9c98a 38%,#b98c48 62%,#f0d697 82%,#9b7334 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.95)) drop-shadow(0 0 14px rgba(217,184,120,.28))}
.crest h1.latin{font-family:var(--f-lat);font-weight:600;letter-spacing:.08em;padding-left:.08em;font-size:calc(100cqw * 64 / 804 + 10px)}
.rule{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:calc(100cqw * 18 / 804 + 2px)}
.rule i{display:block;height:1px;width:28%;background:linear-gradient(90deg,transparent,var(--gold))}
.rule i:last-child{transform:scaleX(-1)}
.rule b{width:10px;height:10px;border:1.5px solid var(--gold-hi);transform:rotate(45deg);box-shadow:0 0 8px rgba(247,228,180,.4)}
.motto{margin:calc(100cqw * 16 / 804 + 2px) 0 0;font-family:var(--f-cjk);font-weight:500;font-size:calc(100cqw * 26 / 804 + 6px);letter-spacing:.32em;padding-left:.32em;color:var(--gold);text-shadow:0 1px 0 #000}
.motto.latin{font-family:var(--f-lat);font-style:italic;letter-spacing:.04em;padding-left:0}

/* plaque */
.plaque{position:relative;border-radius:6px;background:var(--plaque);border:1px solid rgba(255,238,205,.07);
  box-shadow:inset 0 2px 10px rgba(0,0,0,.85),inset 0 -1px 0 rgba(255,238,205,.05),0 1px 0 rgba(255,238,205,.05)}

/* stranger carousel */
.stranger{overflow:hidden;min-height:calc(100cqw * 200 / 804 + 150px);display:flex;flex-direction:column;justify-content:center;text-align:center;border-color:rgba(217,184,120,.16)}
.stranger .bg{position:absolute;inset:0;background-size:cover;background-position:center}
.stranger .bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 62% 58% at 50% 50%,rgba(6,6,8,.58),rgba(6,6,8,.12) 100%),linear-gradient(0deg,rgba(6,6,8,.4),transparent 35%)}
.stranger .in{position:relative;padding:18px 44px 16px}
.eyebrow{font-size:11.5px;letter-spacing:.12em;color:var(--ink-2)}
.stranger blockquote{margin:10px auto 0;font-family:var(--f-cjk);font-size:calc(100cqw * 24 / 804 + 7px);line-height:1.5;color:#f5efe3;text-wrap:balance;text-shadow:0 2px 10px rgba(0,0,0,.85);max-width:15em;transition:opacity .45s}
.stranger blockquote.latin{font-family:var(--f-lat);font-size:calc(100cqw * 30 / 804 + 11px);max-width:22em}
.stranger .who{margin-top:10px;color:var(--ink-2);font-size:12px;display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap}
.stranger .who .dotsep{width:3px;height:3px;border-radius:50%;background:var(--ink-2)}
.stranger .tr{color:var(--ink-2);font-size:11.5px;margin-top:6px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.stranger .tr button{color:var(--ink-2);font-size:11.5px}
.stranger .tr button:hover{color:var(--ink)}
.stranger .tr .bar{width:1px;height:12px;background:var(--line-strong);align-self:center}
.stranger .orig{font-size:11.5px;color:var(--ink-2);margin-top:4px;max-width:30em;margin-inline:auto}
.dots{display:flex;justify-content:center;gap:7px;margin-top:12px}
.dots button{width:20px;height:2px;border-radius:2px;background:rgba(236,226,205,.25)}
.dots button.on{background:var(--gold-hi)}
.arrow{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:56px;display:grid;place-items:center;color:var(--ink-2);z-index:1}
.arrow:hover{color:var(--gold-hi)}
.arrow svg{width:22px;height:22px}
.arrow.l{left:2px}.arrow.r{right:2px}

/* ask */
.ask{margin:calc(100cqw * 30 / 804 + 4px) auto;text-align:center;font-family:var(--f-cjk);font-weight:500;font-size:calc(100cqw * 28 / 804 + 6px);line-height:1.55;letter-spacing:.06em;color:#f2ece0;text-wrap:balance;max-width:14em;text-shadow:0 1px 0 #000}
.ask.latin{font-family:var(--f-lat);font-style:italic;max-width:20em;letter-spacing:0}

/* stats */
.stats{display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);align-items:center;padding:calc(100cqw * 20 / 804 + 6px) 6px}
.stats>i{height:44px;background:linear-gradient(transparent,var(--line-strong),transparent)}
.stat{text-align:center;padding:0 6px;min-width:0}
.stat .v{white-space:nowrap;line-height:1.1;font-family:var(--f-lat);font-weight:500;color:var(--gold);font-variant-numeric:lining-nums tabular-nums;text-shadow:0 1px 0 #000,0 0 12px rgba(217,184,120,.2)}
.stat .cnt{font-size:calc(100cqw * 38 / 804 + 8px)}
.stat .clk{font-size:calc(100cqw * 30 / 804 + 6px)}
.stat .clk span{font-family:var(--f-cjk);font-size:.46em;color:var(--ink-2);margin:0 5px 0 3px;vertical-align:.2em}
.stat .clk .ms{font-family:var(--f-lat);color:var(--gold);font-size:.52em;margin:0 0 0 2px;vertical-align:0}
.stat .l{margin-top:4px;font-size:calc(100cqw * 12 / 804 + 6.5px);white-space:nowrap;color:var(--ink-2);letter-spacing:.04em}

/* rail */
.rail{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;margin-top:calc(100cqw * 22 / 804 + 6px);border-bottom:1px solid var(--line);background:rgba(8,8,10,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.rail-in{display:flex;align-items:center;min-height:52px}
.tabs{display:flex;flex:1;min-width:0;gap:calc(100cqw * 18 / 804);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{position:relative;flex:none;padding:14px 5px 13px;font-family:var(--f-cjk);font-size:calc(100cqw * 14 / 804 + 8px);color:var(--ink-3);letter-spacing:.06em}
.tab:hover{color:var(--ink-2)}
.tab.on{color:var(--gold-hi);font-weight:600}
.tab.on::after{content:"";position:absolute;left:4px;right:4px;bottom:-1px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--gold-hi),transparent);box-shadow:0 0 10px rgba(247,228,180,.7)}
.tools{display:flex;align-items:center;flex:none;gap:calc(100cqw * 8 / 804)}
.ibtn{position:relative;width:36px;height:40px;display:grid;place-items:center;border-radius:6px;color:var(--ink-2);transition:color .2s,background .2s}
.ibtn:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.ibtn[aria-pressed="true"]{color:var(--gold-hi)}
.ibtn svg{width:max(18px,calc(100cqw * 12 / 804 + 10px));height:max(18px,calc(100cqw * 12 / 804 + 10px))}
.adot{position:absolute;top:8px;right:6px;width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px #0a0a0c}
.pop{position:absolute;top:100%;right:0;margin-top:6px;background:#121214;border:1px solid var(--line-strong);border-radius:10px;padding:6px;min-width:210px;box-shadow:0 18px 50px rgba(0,0,0,.65);z-index:5}
.pop button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px;border-radius:6px;font-size:14px;text-align:left}
.pop button:hover{background:rgba(255,255,255,.06)}
.pop .on{color:var(--gold)}
.pop hr{border:0;border-top:1px solid var(--line);margin:4px 6px}
@media(max-width:440px){.tab{padding-inline:4px}.ibtn{width:29px}.ibtn svg{width:18px;height:18px}}

/* feed */
#feed{padding-top:12px}
.subtabs{display:flex;gap:8px;flex-wrap:wrap;padding:2px 0 4px}
.chip{height:32px;padding:0 14px;border-radius:99px;border:1px solid var(--line-strong);font-size:13px;color:var(--ink-2);background:rgba(0,0,0,.3)}
.chip.on{border-color:var(--gold);color:var(--gold-hi);background:rgba(217,184,120,.08)}
.note{font-size:12.5px;color:var(--ink-3);padding:6px 0 0}
.list{display:flex;flex-direction:column;gap:10px;padding-top:10px}
.card{padding:calc(100cqw * 20 / 804 + 6px) calc(100cqw * 22 / 804 + 6px) 6px;cursor:pointer;display:flex;flex-direction:column;gap:6px;transition:border-color .25s}
.card:hover{border-color:rgba(217,184,120,.24)}
.card.mine{border-color:rgba(217,184,120,.5)}
.chead{display:flex;align-items:center;gap:calc(100cqw * 16 / 804 + 2px);flex-wrap:nowrap;font-size:calc(100cqw * 10 / 804 + 6.5px);color:var(--ink-2);white-space:nowrap;min-width:0}
.chead .no{flex:none;font-family:var(--f-lat);font-weight:600;font-size:calc(100cqw * 14 / 804 + 9px);color:var(--gold);letter-spacing:.02em;font-variant-numeric:lining-nums;line-height:1}
.chead .cz{color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}
.chead .cc{display:inline-flex;align-items:center;gap:4px;flex:none}
.chead .time{margin-left:auto;color:var(--ink-3);flex:none}
.rank{font-family:var(--f-lat);font-weight:600;font-size:16px;color:var(--gold-hi);line-height:1;border:1px solid rgba(217,184,120,.4);border-radius:4px;padding:2px 6px}
.flag{width:14px;height:14px;border-radius:50%;overflow:hidden;display:inline-block;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.2);vertical-align:-2px}
.flag svg{width:100%;height:100%;display:block}
.sentence{font-family:var(--f-cjk);font-size:calc(100cqw * 22 / 804 + 6.5px);line-height:1.6;margin:2px 0 0;color:#f2ece1;overflow-wrap:anywhere;padding-left:.55em;text-indent:-.55em;letter-spacing:.02em}
.sentence.latin{font-family:var(--f-lat);font-size:calc(100cqw * 26 / 804 + 8px);line-height:1.4;letter-spacing:0}
.trnote{font-size:max(11px,calc(100cqw * 10 / 804 + 4.5px));color:var(--ink-3);display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding-left:.6em}
.trnote button{color:var(--ink-3);font-size:inherit}
.trnote button:hover{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
.acts{display:flex;align-items:center;gap:calc(100cqw * 18 / 804);margin-left:-8px}
.act{height:32px;padding:0 8px;border-radius:99px;display:inline-flex;align-items:center;gap:6px;font-size:max(12px,calc(100cqw * 10 / 804 + 5.5px));color:var(--ink-2);font-variant-numeric:tabular-nums}
.act svg{width:max(18px,calc(100cqw * 12 / 804 + 9px));height:max(18px,calc(100cqw * 12 / 804 + 9px))}
.act:hover{background:rgba(255,255,255,.05);color:var(--ink)}
.act.liked{color:var(--heart)}
.act.liked svg path{fill:var(--heart)}
.act.faved{color:var(--gold-hi)}
.act.faved svg path{fill:var(--gold-hi)}
.act.more{margin-left:auto;color:var(--ink-3)}
.mine-badge{font-size:10.5px;color:var(--cream-ink);background:var(--gold);border-radius:99px;padding:0 7px}
.load-more{display:flex;align-items:center;gap:6px;margin:18px auto 4px;font-family:var(--f-cjk);font-size:13.5px;letter-spacing:.12em;color:var(--ink-2)}
.load-more:hover{color:var(--gold-hi)}
.load-more svg{width:14px;height:14px}
.empty{color:var(--ink-3);text-align:center;padding:36px 0;font-size:14px}

/* topics, answers */
.topic{padding:16px;cursor:pointer;display:flex;flex-direction:column;gap:6px}
.topic h3{margin:0;font-family:var(--f-cjk);font-size:18px;font-weight:600;line-height:1.45}
.topic p{margin:0;color:var(--ink-2);font-size:14px}
.tag{font-size:11px;letter-spacing:.06em;color:var(--ink-3);border:1px solid var(--line-strong);border-radius:99px;padding:1px 8px}
.tag.gold{color:var(--gold);border-color:rgba(217,184,120,.4)}
.topic .peek{font-family:var(--f-cjk);color:var(--ink);font-size:15px;border-left:1px solid var(--line-strong);padding-left:12px;margin-top:4px}
.create{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px dashed var(--line-strong);border-radius:6px;padding:14px 16px;text-align:left;width:100%;background:rgba(0,0,0,.3)}
.create b{font-weight:500;display:block}
.create span{color:var(--ink-3);font-size:12.5px}
.ans{padding:14px 16px 10px;display:flex;flex-direction:column;gap:6px}
.src{font-size:12px;color:var(--ink-3)}
.src button{color:var(--gold);font-size:12px}
.comments{border-top:1px solid var(--line);margin-top:6px;padding-top:10px;display:flex;flex-direction:column;gap:8px}
.cmt{font-size:13.5px;color:var(--ink-2)}
.cmt b{font-weight:500;color:var(--ink);font-size:12px;margin-right:6px}
.row{display:flex;gap:8px;align-items:flex-start}
.row>*:first-child{flex:1;min-width:0}

/* footer */
.foot{margin-top:30px;padding-block:22px 210px;text-align:center;color:var(--ink-3);font-size:11.5px;border-top:1px solid var(--line)}
.foot nav{display:flex;justify-content:center;gap:4px 16px;flex-wrap:wrap;margin-bottom:10px}
.foot nav button{color:var(--ink-2);font-size:12.5px}

/* buttons & forms */
.btn{height:48px;border-radius:99px;display:inline-flex;align-items:center;justify-content:space-between;gap:12px;padding:0 22px;font-size:15px;font-weight:500;transition:transform .2s,background .2s,border-color .2s;white-space:nowrap}
.btn svg{width:18px;height:18px;flex:none}
.btn-cream{background:linear-gradient(180deg,#f3e3bd,#c9a86a);color:var(--cream-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 8px rgba(0,0,0,.5)}
.btn-cream:hover{background:linear-gradient(180deg,#f8ebcb,#d5b57a)}
.btn-ghost{border:1px solid var(--line-strong);background:rgba(0,0,0,.35);color:var(--ink)}
.btn-ghost:hover{border-color:var(--gold)}
.btn-sm{height:40px;padding:0 16px;font-size:14px}
.btn:active{transform:scale(.985)}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.field{display:flex;flex-direction:column;gap:6px}
.field label,.flabel{font-size:13px;color:var(--ink-2)}
textarea,input[type=text],input[type=email],input[type=password],select{width:100%;background:rgba(0,0,0,.5);border:1px solid var(--line-strong);border-radius:8px;color:var(--ink);font:inherit;padding:12px 14px;resize:vertical;box-shadow:inset 0 2px 6px rgba(0,0,0,.6)}
textarea:focus,input:focus,select:focus{outline:none;border-color:var(--gold)}
textarea.big{font-family:var(--f-cjk);font-size:19px;line-height:1.55;min-height:120px}
.count{font-size:12px;color:var(--ink-3);text-align:right;font-variant-numeric:tabular-nums}
.count.over{color:var(--heart)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink-2);cursor:pointer}
.check input{margin-top:3px;accent-color:#d9b878;width:16px;height:16px;flex:none}
.bgs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.bgt{position:relative;aspect-ratio:2/1.1;border-radius:6px;overflow:hidden;border:1px solid var(--line);background-size:cover;background-position:center;max-width:100%}
.bgt.on{outline:2px solid var(--gold);outline-offset:1px}
.bgt.photo{display:grid;place-items:center;text-align:center;background:rgba(217,184,120,.06);border-style:dashed;font-size:11.5px;line-height:1.3;padding:4px}
.bgt.photo span{color:var(--ink-2)}
.panel{border:1px solid var(--line);border-radius:8px;padding:14px;background:rgba(217,184,120,.04);display:flex;flex-direction:column;gap:10px;font-size:13.5px;color:var(--ink-2)}
.panel h4{margin:0;color:var(--ink);font-size:15px;font-weight:500}
.photo-prev{width:100%;aspect-ratio:3/1;border-radius:6px;background-size:cover;background-position:center;border:1px solid var(--line)}
.warn{border:1px solid rgba(229,140,130,.4);background:rgba(229,140,130,.07);border-radius:8px;padding:12px 14px;font-size:13.5px;color:var(--ink)}
.err{color:var(--heart);font-size:13px;min-height:1em}
.stack{display:flex;flex-direction:column;gap:16px}
.btns{display:flex;gap:10px;flex-wrap:wrap}
.btns .btn{flex:1;min-width:140px;justify-content:center}
.menu-list{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.menu-list .btn{justify-content:flex-start;gap:12px}

/* sheet */
.sheet{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center;background:rgba(2,2,3,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.sheet-p{position:relative;width:100%;max-width:600px;max-height:min(92vh,92dvh);overflow:auto;
  background:linear-gradient(rgba(10,10,12,.78),rgba(10,10,12,.86)),url("/assets/stone.webp?v=9fe187606e") 0 0/300px 300px,#0c0c0e;
  border:1px solid rgba(217,184,120,.18);box-shadow:inset 0 1px 0 rgba(255,238,205,.1),0 -20px 60px rgba(0,0,0,.6);border-bottom:0;border-radius:14px 14px 0 0;
  padding:22px max(18px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px));animation:up .3s ease}
@media(min-width:720px){.sheet{align-items:center}.sheet-p{border-radius:10px;border-bottom:1px solid rgba(217,184,120,.18);padding:28px 30px 30px}}
@keyframes up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.sheet-x{position:absolute;top:12px;right:12px}
.sheet h2{margin:0 40px 4px 0;font-family:var(--f-cjk);font-weight:600;font-size:21px;line-height:1.35}
.sheet .sub{color:var(--ink-2);margin:0 0 18px;font-size:14px}
.poster{position:relative;border-radius:6px;overflow:hidden;min-height:260px;display:flex;align-items:flex-end;background-size:cover;background-position:center;border:1px solid rgba(0,0,0,.6)}
.poster::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,6,8,.92) 8%,rgba(6,6,8,.35) 60%,rgba(6,6,8,.15))}
.poster-in{position:relative;z-index:1;padding:20px;width:100%;display:flex;flex-direction:column;gap:8px}
.poster .sentence{font-size:22px;padding-left:0;text-indent:0}
.poster .sentence.latin{font-size:27px}
.story{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
.story summary{cursor:pointer;color:var(--ink-2);font-size:14px}
.story p{font-family:var(--f-cjk);color:var(--ink);line-height:1.85;margin:10px 0 0;font-size:15px}
.mtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.ostatus{display:flex;justify-content:space-between;gap:10px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:13.5px;flex-wrap:wrap}
.ostatus b{font-weight:500}
.page p{color:var(--ink-2);margin:0 0 12px}
.copybox{display:flex;gap:8px;align-items:center;border:1px solid var(--line-strong);border-radius:8px;padding:10px 12px;font-size:13px}
.copybox span{flex:1;min-width:0;overflow-wrap:anywhere;user-select:all}
.mem-img{width:100%;border-radius:8px;border:1px solid var(--line);display:block}

/* auth */
.auth{max-width:400px;margin:0 auto}
.auth-head{text-align:center;margin-bottom:18px}
.auth-logo{font-family:var(--f-cjk);font-weight:900;font-size:26px;letter-spacing:.14em;padding-left:.14em;margin-bottom:6px;background:linear-gradient(180deg,#fff1c9,#c9a061);-webkit-background-clip:text;background-clip:text;color:transparent}
.auth h2{margin:0;font-size:21px}
.auth .sub{margin:6px 0 0}
.auth input{height:48px}
.pw{position:relative}
.pw input{padding-right:64px}
.pw-t{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:12.5px;color:var(--ink-2);padding:6px 8px;border-radius:6px}
.auth-row{display:flex;justify-content:space-between;margin-top:-8px}
.link{color:var(--gold);font-size:13.5px}
.link:hover{text-decoration:underline;text-underline-offset:3px}
.auth-main{justify-content:center}
.auth-switch{text-align:center;color:var(--ink-2);font-size:13.5px;margin:0}
.divider{display:flex;align-items:center;gap:12px;color:var(--ink-3);font-size:12.5px;margin:22px 0 14px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line-strong)}
.socials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.social{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border:1px solid var(--line-strong);border-radius:8px;font-size:12.5px;color:var(--ink-2);min-width:0;background:rgba(0,0,0,.3)}
.social:hover{border-color:var(--gold);color:var(--ink)}
.glyph{width:34px;height:34px;border-radius:50%;background:rgba(236,220,180,.08);display:grid;place-items:center;font-weight:500;font-size:15px;color:var(--ink)}
.glyph svg{width:18px;height:18px}

/* carving bar */
.cbar{position:fixed;left:0;right:0;bottom:0;z-index:40;padding-bottom:env(safe-area-inset-bottom,0px);background:linear-gradient(rgba(3,3,5,0),rgba(3,3,5,.9) 45%);pointer-events:none}
.cbar-in{max-width:calc(var(--slab) + 24px);margin:0 auto;padding:22px max(12px,env(safe-area-inset-right,0px)) 10px max(12px,env(safe-area-inset-left,0px));pointer-events:auto}
.cbar-card{position:relative;display:flex;align-items:center;gap:10px;padding:12px 8px 12px clamp(12px,3.4vw,20px);border-radius:6px;
  background:linear-gradient(rgba(10,10,12,.8),rgba(8,8,10,.88)),url("/assets/stone.webp?v=9fe187606e") 0 0/300px 300px,#0b0b0d;
  border:1px solid rgba(217,184,120,.42);box-shadow:inset 0 0 0 3px rgba(0,0,0,.6),inset 0 0 0 4px rgba(217,184,120,.12),0 16px 44px rgba(0,0,0,.8),0 0 24px rgba(217,184,120,.08)}
.cbar-txt{flex:1;min-width:0}
.cbar-title{display:block;font-family:var(--f-cjk);font-weight:600;color:#f3ede1;font-size:clamp(12.5px,3.2vw,17px);line-height:1.5}
.cbar-sub{display:block;color:var(--ink-3);font-size:clamp(10px,2.6vw,12.5px);margin-top:4px;text-wrap:balance}
.cbar-title.s{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cbar-btns{display:flex;gap:6px;flex:none;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.cbar .btn{height:40px;padding:0 14px;font-size:13.5px}
.carve{position:relative;flex:none;width:clamp(156px,41vw,236px);aspect-ratio:760/197;background:url("/assets/carve.webp?v=198ec48cff") center/100% 100% no-repeat;display:flex;align-items:center;justify-content:center;gap:4px;padding:0 5% 0 25%;
  font-family:var(--f-cjk);font-weight:700;font-size:clamp(12px,3.2vw,16px);letter-spacing:.04em;color:#3a2a12;text-shadow:0 1px 0 rgba(255,236,190,.55);filter:drop-shadow(0 4px 10px rgba(0,0,0,.6)) drop-shadow(0 0 12px rgba(217,184,120,.25));transition:filter .2s,transform .2s}
.carve:hover{filter:drop-shadow(0 4px 10px rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(247,228,180,.45)) brightness(1.06)}
.carve:active{transform:scale(.98)}
.carve svg{width:clamp(12px,3.2vw,16px);height:clamp(12px,3.2vw,16px);flex:none}
.collapse{position:absolute;top:-1px;right:12px;transform:translateY(-100%);width:34px;height:20px;display:grid;place-items:center;color:var(--ink-3);border:1px solid rgba(217,184,120,.3);border-bottom:0;border-radius:6px 6px 0 0;background:rgba(10,10,12,.9)}
.collapse:hover{color:var(--ink)}
.collapse svg{width:14px;height:14px}
.pill{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:40;height:42px;padding:0 16px;border-radius:99px;background:rgba(12,12,14,.92);border:1px solid rgba(217,184,120,.42);display:flex;align-items:center;gap:8px;font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.pill svg{width:16px;height:16px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none}
.dot.pending{background:var(--ember);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.35}}

/* ceremony */
.cer{position:fixed;inset:0;z-index:90;background:radial-gradient(ellipse at 50% 70%,#221b12 0%,#0a0a0c 58%,#030305 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px max(20px,env(safe-area-inset-right,0px)) calc(40px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));overflow:auto}
.cer-line{width:1px;height:110px;background:linear-gradient(transparent,var(--gold));transform-origin:bottom;animation:grow 1.4s ease both}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.cer-no{font-family:var(--f-lat);font-weight:600;color:var(--gold);letter-spacing:.2em;margin-top:22px;font-size:18px;animation:fade 1s 1.2s both}
.cer-s{font-family:var(--f-cjk);font-size:clamp(24px,5vw,40px);line-height:1.5;max-width:20em;margin:22px 0 0;text-wrap:balance;color:var(--gold-hi);text-shadow:0 1px 0 #000,0 0 18px rgba(217,184,120,.3)}
.cer-s.latin{font-family:var(--f-lat)}
.cer-s span{animation:fade .9s both}
.cer-meta{color:var(--ink-2);font-size:13px;margin-top:16px;display:flex;gap:6px;align-items:center;justify-content:center;flex-wrap:wrap;animation:fade 1s both}
.cer h2{font-family:var(--f-cjk);font-weight:600;font-size:20px;margin:34px 0 0;animation:fade 1s both}
.cer .btns{margin-top:22px;width:min(520px,100%);animation:fade 1s both}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 64px);transform:translateX(-50%);z-index:100;background:var(--cream);color:var(--cream-ink);border-radius:99px;padding:9px 18px;font-size:13.5px;box-shadow:0 10px 30px rgba(0,0,0,.5);max-width:calc(100% - 32px);text-align:center}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:12px;color:var(--ink-2)}
.meta .sep{color:var(--ink-3)}
.meta .cz{color:var(--ink-3)}

/* ===== V0.5: edge-to-edge slab on phones, T1 title art, image frames, engraved text ===== */
@media (max-width:712px){.world{padding-left:0;padding-right:0;padding-top:4px}}
.slab-in{padding-left:max(16px,calc(100cqw * 50 / 804),env(safe-area-inset-left,0px));padding-right:max(16px,calc(100cqw * 50 / 804),env(safe-area-inset-right,0px))}
.crest h1.img{background:none;filter:none;letter-spacing:0;padding-left:0;line-height:0}
.crest .t1{display:block;width:calc(100cqw * 500 / 804);max-width:100%;height:auto;margin:0 auto;filter:drop-shadow(0 3px 6px rgba(0,0,0,.7))}
.crest .t1-rule{display:block;width:calc(100cqw * 560 / 804);max-width:100%;height:auto;margin:calc(100cqw * 14 / 804 + 4px) auto 0}
.crest .t1-motto{display:block;width:calc(100cqw * 380 / 804);max-width:90%;height:auto;margin:calc(100cqw * 12 / 804 + 4px) auto 0}

/* frames: border-image keeps the chamfered corners at any size; plain frame for stats and cards, ornate gold-crack frame for the carousel and the carving bar */
.plaque{border-radius:0;background:rgba(7,7,9,.62);border:13px solid transparent;border-image:url("/assets/frame9.webp?v=d00b8c1f2c") 26 / 13px stretch;box-shadow:none;
  clip-path:polygon(13px 0,calc(100% - 13px) 0,100% 13px,100% calc(100% - 13px),calc(100% - 13px) 100%,13px 100%,0 calc(100% - 13px),0 13px)}
.stranger{border:16px solid transparent;border-image:url("/assets/frame2.webp?v=3153b82bfe") 32 / 16px stretch}
.stranger .bg{inset:-10px}
.stranger .in{padding:10px 30px 8px}
.card{padding:calc(100cqw * 10 / 804 + 3px) calc(100cqw * 12 / 804 + 4px) 0}
.card:hover{background:rgba(14,13,12,.7)}
.card.mine{background:rgba(217,184,120,.07)}
.topic,.ans{padding:12px 12px 6px}
.cbar-in{position:relative;filter:drop-shadow(0 14px 30px rgba(0,0,0,.8))}
.cbar-card{border:16px solid transparent;border-image:url("/assets/frame2.webp?v=3153b82bfe") 32 / 16px stretch;box-shadow:none;border-radius:0;padding:0 0 0 4px;
  clip-path:polygon(13px 0,calc(100% - 13px) 0,100% 13px,100% calc(100% - 13px),calc(100% - 13px) 100%,13px 100%,0 calc(100% - 13px),0 13px)}
.collapse{top:22px;right:max(26px,calc(env(safe-area-inset-right,0px) + 14px))}

/* engraved text: T1 champagne gold for numbers and quotes, ivory for message text; SVG filters cut the groove */
.t1gold{background:linear-gradient(180deg,#faf4de 0%,#f0d5ae 28%,#dbb88f 52%,#be9d77 74%,#e8cba2 100%);-webkit-background-clip:text;background-clip:text}
.ivory{background:linear-gradient(180deg,#fffaf0 0%,#efe7d8 55%,#dcd2c0 100%);-webkit-background-clip:text;background-clip:text}
.lines{background-size:100% 1lh}
.cut-l{filter:url(#cut-l)}
.cut-m{filter:url(#cut-m)}
.cut-s{filter:url(#cut-s)}
.stat .v.t1gold,.chead .no.t1gold,.stranger blockquote.t1gold,.ask.ivory,.sentence.ivory{color:transparent;text-shadow:none}

/* spacing the user asked for */
.sentence{letter-spacing:.1em;line-height:1.85}
.sentence.latin{letter-spacing:.015em;line-height:1.5;font-weight:600}
.stranger blockquote{letter-spacing:.14em;padding-left:.14em;line-height:1.75;max-width:16.5em}
.stranger blockquote.latin{letter-spacing:.01em;padding-left:0}
.stat .l{letter-spacing:.16em;padding-left:.16em;margin-top:6px}
.ask{letter-spacing:.1em}
.poster .sentence{padding-left:0;text-indent:0}
html,body{margin:0}
@media (max-width:712px){
  .cbar-in{padding-left:max(8px,env(safe-area-inset-left,0px));padding-right:max(8px,env(safe-area-inset-right,0px))}
  .carve{width:clamp(146px,38vw,236px);padding:0 4% 0 25%;font-size:clamp(11.5px,3.05vw,16px)}
  .cbar-card{padding-left:0}
  .collapse{right:max(22px,calc(env(safe-area-inset-right,0px) + 14px))}
}
.stat .l{white-space:normal;text-wrap:balance}
html:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .stat .l{letter-spacing:.03em;padding-left:0}
.carve{white-space:nowrap}
html:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .carve{font-family:var(--f-lat);font-size:clamp(12.5px,3.4vw,17px);letter-spacing:0}

/* ===== V0.6: soft gold glow frame for stats and cards; textured panel for the carving bar ===== */
/* normal state keeps the V0.5 plain frame; hovering a card fades in a soft gold glow line */
.plaque::after{content:"";position:absolute;inset:-13px;border:15px solid transparent;border-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22120%22 height=%22120%22 viewBox=%220 0 120 120%22%3E%3Cdefs%3E%3Cfilter id=%22b1%22 x=%22-30%25%22 y=%22-30%25%22 width=%22160%25%22 height=%22160%25%22%3E%3CfeGaussianBlur stdDeviation=%224.5%22/%3E%3C/filter%3E%3Cfilter id=%22b2%22 x=%22-30%25%22 y=%22-30%25%22 width=%22160%25%22 height=%22160%25%22%3E%3CfeGaussianBlur stdDeviation=%221.6%22/%3E%3C/filter%3E%3C/defs%3E%3Cpath d=%22M21 6H99L114 21V99L99 114H21L6 99V21Z%22 fill=%22none%22 stroke=%22%23d9b878%22 stroke-opacity=%22.22%22 stroke-width=%227%22 filter=%22url(%23b1)%22/%3E%3Cpath d=%22M21 6H99L114 21V99L99 114H21L6 99V21Z%22 fill=%22none%22 stroke=%22%23e2c38a%22 stroke-opacity=%22.22%22 stroke-width=%222.6%22 filter=%22url(%23b2)%22/%3E%3Cpath d=%22M21 6H99L114 21V99L99 114H21L6 99V21Z%22 fill=%22none%22 stroke=%22%23e8cc95%22 stroke-opacity=%22.38%22 stroke-width=%221%22/%3E%3C/svg%3E") 30 / 15px stretch;opacity:0;transition:opacity .3s ease;pointer-events:none}
.stranger::after{inset:-16px}
.card:hover,.topic:hover{border-color:transparent}
@media (hover:hover){.card:hover::after,.topic:hover::after{opacity:1}.card:hover,.topic:hover{background:rgba(18,15,11,.66)}}
.cbar-in{container-type:inline-size}
.cbar-card{background:none;clip-path:none;border:16px solid transparent;border-image:url("/assets/panel1.webp?v=3d926b640d") 32 fill / 16px stretch;padding:2px 0 2px 6px}
.cbar-title .ln{display:block;white-space:nowrap}
.cbar-title{font-size:max(14px,min(17px,calc((100cqw - clamp(146px,38cqw,236px) - 72px) / 13.2)))}
.cbar-sub{text-wrap:balance}
.carve{width:clamp(146px,38cqw,236px)}

/* narrow phones: title on one full-width line, then the note beside the button */
@container (max-width:470px){
  .cbar-card{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title title" "sub btn";align-items:center;gap:6px 10px;padding:0 0 0 4px}
  .cbar-txt{display:contents}
  .cbar-title{grid-area:title;font-size:min(15.5px,calc((100cqw - 56px) / 19.4))}
  .cbar-title .ln{display:inline}
  .cbar-sub{grid-area:sub;margin:0;font-size:11px;line-height:1.45}
  .cbar-btns{grid-area:btn}
  .carve{width:clamp(140px,42cqw,190px)}
}
html:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .cbar-title .ln{white-space:normal}
@container (max-width:470px){html:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .cbar-title{font-size:15px}html:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .cbar-title .ln+.ln::before{content:" "}}

/* living background: oversized galaxy layer moved by script on scroll, plus a very slow drift */
.galaxy{inset:auto;left:-6vw;right:-6vw;top:-8vh;height:150vh;background:#030305;opacity:1;will-change:transform}
.galaxy::after{display:none}
.galaxy i{position:absolute;inset:0;background:url("/assets/galaxy.webp?v=bc54e758d5") center/cover no-repeat;opacity:.78;animation:drift 160s ease-in-out infinite alternate;will-change:transform}
@keyframes drift{0%{transform:scale(1.03) translate3d(0,0,0)}50%{transform:scale(1.1) translate3d(-1.6%,1.2%,0)}100%{transform:scale(1.05) translate3d(1.3%,-1%,0)}}
.vign{position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(ellipse at 50% 40%,rgba(3,3,5,.1),rgba(3,3,5,.72))}

/* V0.7 header art: width is set per language from each image's proportions */
.crest .t1{width:auto;max-width:100%;filter:none}
.crest .t1-motto{max-width:100%}
.crest .t1-rule{width:calc(100cqw * 600 / 804)}

/* V0.8: Chinese header back to the V0.6 art and sizes; other languages tinted toward the V0.6 bronze gold */
.crest.v06 .t1{width:calc(100cqw * 500 / 804);filter:drop-shadow(0 3px 6px rgba(0,0,0,.7))}
.crest.v06 .t1-rule{width:calc(100cqw * 560 / 804)}
.crest.v06 .t1-motto{width:calc(100cqw * 380 / 804);max-width:90%}
.crest .tint{filter:hue-rotate(-10deg) saturate(1) contrast(1.22) brightness(.9) drop-shadow(0 3px 6px rgba(0,0,0,.6))}

/* English title is live text until its gold image arrives: Noto Serif, the face used in the header art, in the same bronze gold */
.crest h1.latin{font-family:"Noto Serif",var(--f-lat);font-weight:600;font-size:min(calc((100cqw - 90px) / 11.2),46px);letter-spacing:.02em;padding-left:0;white-space:nowrap;line-height:1.25;
  background:linear-gradient(180deg,#f7e6c8 0%,#e4c59c 38%,#b88d5d 68%,#e9d0a8 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,240,215,.22)) drop-shadow(0 2px 2px rgba(0,0,0,.85))}

/* Latin-script languages: narrower serif for the tabs, normal spacing for the sign-in title */
html:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .tab{font-family:var(--f-lat);font-weight:600;font-size:calc(100cqw * 14 / 804 + 10px);letter-spacing:.02em}
html:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .auth-logo{font-family:"Noto Serif",var(--f-lat);font-weight:600;font-size:22px;letter-spacing:.02em;padding-left:0}
html:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .tab{font-size:calc(100cqw * 12 / 804 + 9px);padding-inline:3px}
html:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .tabs{gap:calc(100cqw * 10 / 804 + 2px)}
@media (max-width:380px){.ibtn{width:27px}.tools{gap:0}}

/* ===== V0.9 ===== */
/* carousel quote: plain, no engraving */
.stranger blockquote.plain{color:#f3eadb;font-weight:500;text-shadow:0 1px 2px rgba(0,0,0,.9),0 2px 14px rgba(0,0,0,.75);filter:none}
/* the question is cut into the stone: frosted stone grain inside the letters, groove shadows from the cut filter */
.ask.carved{color:transparent;text-shadow:none;max-width:15em;
  background-image:linear-gradient(180deg,rgba(150,142,130,1),rgba(206,198,184,1)),url("/assets/stone.webp?v=9fe187606e");
  background-size:100% 100%,180px 180px;background-blend-mode:multiply;-webkit-background-clip:text;background-clip:text}
.ask.carved.latin{max-width:20em}
/* stats as two rows, each one line: "12 位地球公民已留下铭刻" / "人类之碑已存在 58天 …" */
.stats2{display:flex;flex-direction:column;align-items:center;padding:calc(100cqw * 12 / 804 + 6px) 6px}
.stats2>i{display:block;width:58%;height:1px;margin:calc(100cqw * 6 / 804 + 3px) 0;background:linear-gradient(90deg,transparent,var(--line-strong),transparent)}
.srow{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:0 calc(100cqw * 14 / 804 + 6px);padding:0}
.srow .l{margin:0;white-space:nowrap;padding-left:0}
.srow .v{display:inline-block}
/* card head: flag only, country name on hover */
.chead .cc{cursor:default}
.chead .flag{width:16px;height:16px}
/* rail tools: language as a text code, music moved into the menu */
.tools{gap:calc(100cqw * 10 / 804 + 2px);margin-left:calc(100cqw * 10 / 804)}
.lcode{display:inline-grid;place-items:center;min-width:26px;height:22px;padding:0 5px;border:1px solid var(--line-strong);border-radius:4px;font-family:var(--f-ui);font-weight:600;font-size:12px;letter-spacing:.04em;line-height:1;color:var(--ink-2)}
.ibtn.lang:hover .lcode{border-color:var(--gold);color:var(--gold-hi)}
.ibtn.lang:hover{background:none}
.pop .st{font-size:12px;color:var(--ink-3);border:1px solid var(--line-strong);border-radius:99px;padding:1px 8px}
.pop .st.on{color:var(--gold-hi);border-color:rgba(217,184,120,.5)}
/* English header in the PSD logo style */
.crest h1.lux{font-family:"Cinzel","Cormorant Garamond",Georgia,serif;font-weight:500;line-height:1;margin:0;filter:drop-shadow(0 2px 2px rgba(0,0,0,.85))}
.crest h1.lux .e1,.crest h1.lux .e2{display:block;background:linear-gradient(180deg,#f9ead0 0%,#e3c497 45%,#b8895a 75%,#e8cda2 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.crest h1.lux .e1{font-size:min(calc((100cqw - 90px) / 9.4),60px);letter-spacing:.34em;padding-left:.34em}
.crest h1.lux .e2{font-size:min(calc((100cqw - 90px) / 25),24px);letter-spacing:.7em;padding-left:.7em;margin-top:.7em}
.lux-tag{display:inline-block;font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:500;font-size:min(calc(100cqw * 22 / 804 + 11px),26px);letter-spacing:.02em;
  background:linear-gradient(180deg,#f3e2c2,#c9a36f);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 1px rgba(0,0,0,.8))}
.motto .lux-tag{text-shadow:none;font-size:min(calc((100cqw - 70px) / 19.5),26px);white-space:nowrap}
.motto:has(.lux-tag){letter-spacing:0;padding-left:0;text-shadow:none}
.stranger blockquote.plain.latin{line-height:1.38;letter-spacing:.005em}

/* ===== V1.0 ===== */
/* language code: plain text, lighter */
.lcode{border:0;padding:0;min-width:24px;height:auto;font-weight:500;font-size:14px;letter-spacing:.06em;color:var(--ink-2)}
html:lang(zh) .lcode,html:lang(ja) .lcode{font-family:var(--f-cjk);font-weight:500;font-size:15px}
.ibtn.lang:hover .lcode{color:var(--gold-hi)}
/* music button only when it fits; the menu item only when it doesn't */
.rail.tight .ibtn.mus{display:none}
.rail:not(.tight) #pop-menu .m-music{display:none}
/* card head: country name whenever it fits */
.chead .cc{gap:5px}
.chead.tight .ccn{display:none}
.chead .flag{width:15px;height:15px}
/* floating "…" menu */
.pop-float{position:fixed;top:0;left:0;right:auto;margin:0;z-index:70;min-width:180px}
/* stats: stacked on phones, side by side once there is room */
@container (min-width:520px){
  .stats2{flex-direction:row;justify-content:center;align-items:center;padding:calc(100cqw * 20 / 804 + 6px) 6px}
  .stats2>i{width:1px;height:48px;margin:0;background:linear-gradient(transparent,var(--line-strong),transparent)}
  .srow{flex:1;flex-direction:column;flex-wrap:nowrap;align-items:center;gap:0}
  .srow .v{order:0}
  .srow .l{order:1;margin-top:6px}
}
/* hover glow at half strength */
@media (hover:hover){.card:hover::after,.topic:hover::after{opacity:.5}}
/* bottom bar: everything centred, button under the text */
.cbar-card{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:8px 10px 6px}
.cbar-txt{display:block;width:100%}
.cbar-title{grid-area:auto;font-size:min(17px,calc((100cqw - 60px) / 19.5))}
.cbar-title .ln{display:inline;white-space:normal}
html:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .cbar-title .ln+.ln::before{content:" "}
html:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .cbar-title{font-size:min(17px,calc((100cqw - 60px) / 24))}
.cbar-sub{grid-area:auto;margin:3px 0 0;font-size:min(12.5px,calc(100cqw / 32))}
.cbar-btns{grid-area:auto;width:auto;justify-content:center}
.cbar-btns>*{flex:none}
.carve{width:clamp(196px,56cqw,250px)}
.cbar-title{font-size:min(19px,calc((100cqw - 60px) / 19.5))}
.cbar-sub{font-size:min(13px,calc(100cqw / 32))}

/* ===== V1.1 ===== */
/* question: champagne gold, engraved (option B) */
.ask.t1gold{color:transparent;text-shadow:none;max-width:15em}
.ask.t1gold.latin{max-width:20em}
/* Chinese V0.6 header a touch dimmer */
.crest.v06 .t1{filter:brightness(.86) drop-shadow(0 3px 6px rgba(0,0,0,.7))}
.crest.v06 .t1-motto,.crest.v06 .t1-rule{filter:brightness(.86)}
/* English header: the logo lettering, spaced like the concept */
.crest.luxc{padding-top:calc(100cqw * 64 / 804);padding-bottom:calc(100cqw * 30 / 804)}
.crest.luxc h1{line-height:0;filter:none;background:none}
.crest.luxc .logo-text{display:block;width:calc(100cqw * 0.64);max-width:100%;height:auto;margin:0 auto;filter:sepia(.35) saturate(1.25) brightness(.92) drop-shadow(0 2px 3px rgba(0,0,0,.8))}
.crest.luxc .t1-rule{width:calc(100cqw * 0.66);margin-top:calc(100cqw * 22 / 804)}
.crest.luxc .motto{margin-top:calc(100cqw * 16 / 804)}
.crest.luxc .motto .lux-tag{font-size:max(15px,min(calc(100cqw * 27 / 804),26px))}
/* rail: hide music first, then the account icon; matching menu items appear instead */
.rail.tight2 #b-account{display:none}
.rail:not(.tight2) #pop-menu .m-acct{display:none}
html:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .lcode{font-size:12.5px;letter-spacing:.08em}
/* card head: No · flag · citizen · country; shed the country name, then the word "citizen" */
.chead .cc{flex:none}
.chead .ccn{flex:none;color:var(--ink-3)}
.chead.t1 .ccn{display:none}
.chead.t2 .czl{display:none}
/* English carousel: calmer size, eyebrow on one line */
html:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .stranger .eyebrow{letter-spacing:.05em}
.stranger blockquote.plain.latin{font-size:calc(100cqw * 24 / 804 + 9px)}
.stranger .who{gap:6px}
/* bottom bar sits inside the slab */
.cbar-in{max-width:var(--slab);padding-left:max(10px,calc(min(100vw, var(--slab)) * 46 / 804),env(safe-area-inset-left,0px));padding-right:max(10px,calc(min(100vw, var(--slab)) * 46 / 804),env(safe-area-inset-right,0px))}
.collapse{right:calc(max(10px,calc(min(100vw, var(--slab)) * 46 / 804)) + 14px)}
/* new darker plaque, bigger label, no bright glow */
.carve{width:clamp(220px,62cqw,290px);font-size:clamp(15px,4.6cqw,19px);letter-spacing:.06em;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6))}
.carve:hover{filter:drop-shadow(0 4px 10px rgba(0,0,0,.6)) brightness(1.05)}
html:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .carve{font-size:clamp(16px,4.8cqw,20px)}
/* logo mark: sign-in and footer */
.auth-mark{display:block;width:120px;height:auto;margin:0 auto 6px}
.auth-logo{font-size:18px}
.foot-mark{display:block;width:96px;height:auto;margin:0 auto 14px;opacity:.85}
/* when the rail is crowded, sign-in moves into the menu together with music */
.rail.tight #b-account{display:none}
.rail.tight #pop-menu .m-acct{display:flex}
.rail.tight #pop-menu hr.m-acct{display:block}
.crest.luxc .logo-text{filter:sepia(.8) saturate(1.7) brightness(.86) hue-rotate(-6deg) drop-shadow(0 2px 3px rgba(0,0,0,.8))}

/* ===== V1.2 ===== */
/* content centred on the stone face: the frame is 49/804 wide on the left and 24/804 on the right */
.slab-in{padding-left:max(18px,calc(100cqw * 72 / 804),env(safe-area-inset-left,0px));padding-right:max(14px,calc(100cqw * 47 / 804),env(safe-area-inset-right,0px))}
/* bottom bar: same centre as the stone face, a little narrower */
.cbar-in{--sw:min(100vw, var(--slab));padding-left:calc(var(--sw) * 86 / 804);padding-right:calc(var(--sw) * 61 / 804)}
.collapse{right:calc(var(--sw) * 61 / 804 + 14px)}
.cbar-sub{font-size:min(14.5px,max(12.5px,calc(100cqw / 30)));color:var(--ink-2)}
.carve{width:clamp(236px,68cqw,310px);font-size:clamp(17px,5.4cqw,22px);padding:0 4% 0 24%}
html:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .carve{font-size:clamp(17px,5.2cqw,21px);letter-spacing:.01em}
/* the question: one line whenever the stone is wide enough */
.ask.t1gold,.ask.t1gold.latin{max-width:none;text-wrap:balance}
@container (min-width:520px){
  .ask.t1gold{white-space:nowrap;font-size:min(calc(100cqw * 28 / 804 + 6px),calc((100cqw * 685 / 804) / 21))}
  .ask.t1gold.latin{font-size:min(28px,calc((100cqw * 685 / 804) / 30.5))}
}
/* popovers in the monument style: dark stone, fine gold edge with a sheen at the top */
.pop{border-radius:8px;padding:6px;border:1px solid rgba(217,184,120,.34);
  background:linear-gradient(180deg,rgba(26,23,19,.96),rgba(11,10,10,.97)),url("/assets/stone.webp?v=9fe187606e") 0 0/260px 260px,#0d0c0b;
  box-shadow:inset 0 1px 0 rgba(255,236,196,.14),inset 0 0 0 1px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.7),0 18px 50px rgba(0,0,0,.7),0 0 26px rgba(217,184,120,.07)}
.pop::before{content:"";position:absolute;left:18px;right:18px;top:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(247,228,180,.85),transparent);pointer-events:none}
.pop button{border-radius:5px;color:var(--ink);position:relative;transition:background .2s,color .2s}
.pop button:hover{background:linear-gradient(90deg,rgba(217,184,120,.16),rgba(217,184,120,.04) 70%,transparent);color:var(--gold-hi)}
.pop hr{border-top:1px solid transparent;border-image:linear-gradient(90deg,transparent,rgba(217,184,120,.28),transparent) 1}
.pop .on{color:var(--gold-hi)}
/* English header: two lines of the logo lettering at the concept proportions */
.crest.luxc{padding-top:calc(100cqw * 62 / 804);padding-bottom:calc(100cqw * 36 / 804)}
.crest.luxc h1{display:flex;flex-direction:column;align-items:center}
.crest.luxc .lg-m{display:block;width:calc(100cqw * 0.68);height:auto;filter:sepia(.8) saturate(1.7) brightness(.86) hue-rotate(-6deg) drop-shadow(0 2px 3px rgba(0,0,0,.8))}
.crest.luxc .lg-th{display:block;width:calc(100cqw * 0.47);height:auto;margin-top:calc(100cqw * 0.024);filter:sepia(.8) saturate(1.7) brightness(.86) hue-rotate(-6deg) drop-shadow(0 1px 2px rgba(0,0,0,.8))}
.crest.luxc .t1-rule{width:calc(100cqw * 0.69);margin-top:calc(100cqw * 0.03)}
.crest.luxc .motto{margin-top:calc(100cqw * 0.016)}
.crest.luxc .motto .lux-tag{font-size:max(13px,calc(100cqw * 0.036))}

/* menu items for hidden rail icons, now that the menu sits at page level */
#pop-menu .m-acct,#pop-menu .m-music{display:none}
body.rail-tight #pop-menu button.m-acct,body.rail-tight #pop-menu button.m-music{display:flex}
body.rail-tight #pop-menu hr.m-acct,body.rail-tight #pop-menu hr.m-music{display:block}
.pop-float{z-index:75;max-height:calc(100dvh - 24px);overflow:auto}
#pop-lang{min-width:200px}

/* ===== V1.3 ===== */
/* English header: lettering and divider lower, tagline lower and one size up */
.crest.luxc{padding-top:calc(100cqw * 92 / 804)}
.crest.luxc .t1-rule{margin-top:calc(100cqw * 0.042)}
.crest.luxc .motto{margin-top:calc(100cqw * 0.034)}
.crest.luxc .motto .lux-tag{font-size:max(15px,calc(100cqw * 0.043))}
/* carousel byline and translation note: wrap between items only */
.stranger .who .nw,.stranger .tr>*{white-space:nowrap}
.stranger .who.t1 .czl{display:none}
.stranger .tr{column-gap:8px;row-gap:2px}
/* popovers as little stone tablets: stone texture, plain gold frame with chamfered corners */
.pop{border:12px solid transparent;border-image:url("/assets/frame9.webp?v=d00b8c1f2c") 26 fill / 12px stretch;border-radius:0;padding:2px 4px;
  background:linear-gradient(rgba(8,7,7,.55),rgba(8,7,7,.68)),url("/assets/body.webp?v=2a195b9c67") 0 0/520px auto;background-origin:border-box;
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);
  box-shadow:none;filter:drop-shadow(0 16px 30px rgba(0,0,0,.75))}
.pop::before{left:24px;right:24px;top:-12px}
.pop button{color:#efe7d8;text-shadow:0 1px 0 rgba(0,0,0,.8)}
/* bottom bar: readable first line, smaller button until a style is chosen */
.cbar-title{font-size:clamp(16px,4.6cqw,19px)}
html:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .cbar-title{font-size:clamp(17px,5cqw,21px)}
.cbar-title .ln{white-space:nowrap}
.cbar-sub .s1{white-space:nowrap}
.cbar-sub{font-size:clamp(12.5px,3.4cqw,14px)}
.carve{width:clamp(200px,54cqw,256px);font-size:clamp(15px,4.4cqw,18px)}
html:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .carve{font-size:clamp(15.5px,4.5cqw,18.5px)}
/* footer logo with its lettering */
.foot-mark{width:170px;opacity:.9}
html:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .cbar-title .ln{display:block}
html:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .cbar-title .ln+.ln::before{content:none}
.carve{width:clamp(226px,60cqw,262px)}
html:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .carve{font-size:clamp(15px,4.3cqw,18px);padding-left:26%}
.stranger .tr .bar{display:none}
.stranger .tr button::before{content:"· ";color:var(--ink-3)}
html:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .cbar-in .cbar-title .ln{white-space:nowrap}
html:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .cbar-title{font-size:min(21px,max(15px,calc((100cqw - 56px) / 14.5)))}

/* ===== V1.4 ===== */
/* desktop: the stone grows with the screen, up to 880px (source art is 804px, so it stays sharp) */
:root{--slab:clamp(680px,52vw,880px)}
@media (max-width:712px){:root{--slab:680px}}
/* header sits lower on the stone */
.crest{padding-top:calc(100cqw * 96 / 804)}
.crest.v06 .t1-rule{margin-top:calc(100cqw * 26 / 804 + 4px)}
.crest.v06 .motto{margin-top:calc(100cqw * 22 / 804 + 4px)}
.crest.luxc{padding-top:calc(100cqw * 112 / 804)}
.crest.luxc .t1-rule{margin-top:calc(100cqw * 0.05)}
/* popovers: brighter gold frame plus the same soft glow ring as a hovered card */
.pop{border-image:url("/assets/frame9.webp?v=d00b8c1f2c") 26 fill / 12px stretch;filter:drop-shadow(0 16px 30px rgba(0,0,0,.75)) brightness(1.08)}
.pop::after{content:"";position:absolute;inset:-12px;border:15px solid transparent;border-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22120%22 height=%22120%22 viewBox=%220 0 120 120%22%3E%3Cdefs%3E%3Cfilter id=%22b1%22 x=%22-30%25%22 y=%22-30%25%22 width=%22160%25%22 height=%22160%25%22%3E%3CfeGaussianBlur stdDeviation=%224.5%22/%3E%3C/filter%3E%3Cfilter id=%22b2%22 x=%22-30%25%22 y=%22-30%25%22 width=%22160%25%22 height=%22160%25%22%3E%3CfeGaussianBlur stdDeviation=%221.6%22/%3E%3C/filter%3E%3C/defs%3E%3Cpath d=%22M21 6H99L114 21V99L99 114H21L6 99V21Z%22 fill=%22none%22 stroke=%22%23d9b878%22 stroke-opacity=%22.22%22 stroke-width=%227%22 filter=%22url(%23b1)%22/%3E%3Cpath d=%22M21 6H99L114 21V99L99 114H21L6 99V21Z%22 fill=%22none%22 stroke=%22%23e2c38a%22 stroke-opacity=%22.22%22 stroke-width=%222.6%22 filter=%22url(%23b2)%22/%3E%3Cpath d=%22M21 6H99L114 21V99L99 114H21L6 99V21Z%22 fill=%22none%22 stroke=%22%23e8cc95%22 stroke-opacity=%22.38%22 stroke-width=%221%22/%3E%3C/svg%3E") 30 / 15px stretch;opacity:1;pointer-events:none;mix-blend-mode:screen}
/* button style B: dark stone, plain gold frame, gold lettering, quill */
.carve{width:auto;aspect-ratio:auto;height:50px;padding:0 24px;gap:9px;justify-content:center;background:url("/assets/stone.webp?v=9fe187606e") 0 0/200px 200px;
  border:11px solid transparent;border-image:url("/assets/frame9.webp?v=d00b8c1f2c") 26 fill / 11px stretch;
  clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px),0 9px);
  color:var(--gold-hi);font-family:var(--f-cjk);font-weight:700;font-size:clamp(15.5px,4.4cqw,18px);letter-spacing:.08em;text-shadow:0 1px 0 #000;filter:none;transition:color .2s,background-color .2s}
.carve:hover{color:#fff3d4;background-color:rgba(217,184,120,.08);filter:brightness(1.12)}
.carve .qi{width:18px;height:18px;flex:none}
.carve>svg:last-child{width:16px;height:16px;flex:none}
html:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .carve{font-family:var(--f-lat);font-size:clamp(17px,4.8cqw,20px);letter-spacing:.01em;padding:0 24px}
.foot-mark{width:160px}
.pop-float{overflow:visible;max-height:none}
.pop{box-shadow:inset 0 0 0 1px rgba(217,184,120,.28),inset 0 0 18px rgba(217,184,120,.12)}
.pop::after{mix-blend-mode:normal;filter:brightness(1.6)}

/* ===== V1.5 ===== */
/* popovers: inside exactly as V1.3; the glow lives outside, on the wrapper */
.pop{box-shadow:none;filter:none}
.pop::after{content:none}
.popw{position:fixed;top:0;left:0;z-index:75;pointer-events:none;
  filter:drop-shadow(0 0 1.5px rgba(247,228,180,.55)) drop-shadow(0 0 9px rgba(217,184,120,.45)) drop-shadow(0 16px 30px rgba(0,0,0,.7))}
.popw>.pop-float{position:static;pointer-events:auto}
/* language code the same visual size as the icons */
.lcode{font-size:17px;font-weight:500;min-width:26px;color:var(--ink-2);letter-spacing:.04em}
html:lang(zh) .lcode,html:lang(ja) .lcode{font-size:19px;font-weight:500}
/* bottom bar: tile the stone inside the frame instead of stretching it (stretching made vertical streaks) */
.cbar-card{border-image:url("/assets/panel1.webp?v=3d926b640d") 32 / 16px stretch;
  background:linear-gradient(rgba(8,8,9,.55),rgba(8,8,9,.55)),url("/assets/stone.webp?v=9fe187606e") 0 0/260px 260px,#0c0c0d;background-clip:padding-box}

/* ===== V1.6 ===== */
.popw{filter:drop-shadow(0 0 1.5px rgba(247,228,180,.28)) drop-shadow(0 0 9px rgba(217,184,120,.22)) drop-shadow(0 16px 30px rgba(0,0,0,.7))}
html:lang(zh) .lcode,html:lang(ja) .lcode{font-size:17px}

/* ===== V1.7 ===== */
/* bottom button can never be wider than the bar: it shrinks, then the text steps down (fitUI) */
.cbar-card{min-width:0}
.cbar-btns{max-width:100%;min-width:0}
.cbar-btns>.carve{flex:0 1 auto;max-width:100%;min-width:0;box-sizing:border-box}
.carve>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.carve.fit1{padding:0 16px;gap:7px}
.carve.fit1 .qi{width:16px;height:16px}
.carve.fit1>svg:last-child{width:14px;height:14px}
.carve:active{transform:none;filter:brightness(.92)}
/* carousel source line: which monument entry or topic the sentence came from */
.stranger .src{margin-top:6px;display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;font-size:11.5px;color:var(--gold);letter-spacing:.03em}
.stranger .src button{color:var(--gold);font-size:11.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stranger .src button:hover{color:var(--gold-hi)}
.stranger .src button::after{content:" ›"}
.stranger .src .tag{font-size:10.5px;padding:0 6px}
/* topic page: background image on top */
.tp-hero{margin:-6px 0 16px;aspect-ratio:3/1;background:center/cover no-repeat;border:1px solid rgba(217,184,120,.28);
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);
  box-shadow:inset 0 -40px 50px -20px rgba(6,6,8,.7)}
/* a reply's own image, shown only inside its topic */
.ans-img{margin:10px 0 4px;aspect-ratio:12/5;background:center/cover no-repeat;border:1px solid rgba(217,184,120,.22);
  clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px)}
.ans-add{display:flex;align-items:center;gap:8px;margin:8px 0 2px;padding:10px 12px;border:1px dashed rgba(217,184,120,.35);color:var(--ink-2);font-size:13px;cursor:pointer;line-height:1.4}
.ans-add b{color:var(--gold);font-weight:500}
.ans-add svg{color:var(--gold);flex:none}
.ans-add:hover{border-color:rgba(217,184,120,.6);color:var(--ink)}
.ans-pick .ans-img{margin-top:8px}
.ans-pick .row{align-items:center;gap:10px;margin-top:6px}
label.bgt{cursor:pointer}
.stranger .src{flex-wrap:nowrap;max-width:100%;padding:0 4px}
.stranger .src button{flex:0 1 auto;min-width:0}
.stranger .src .tag{flex:none}
.sheet-p h2[tabindex="-1"]:focus{outline:none}

/* ===== V1.8 ===== */
/* carousel: the source line takes the old "from a stranger" spot, above the sentence */
.stranger .src{margin:0 0 2px;font-size:12px}
.stranger .src button{font-size:12px}
/* menus open above dialogs too (the "…" inside a topic used to sit behind it) */
.popw{z-index:85}
.pop .rules{padding:10px 12px 8px;width:min(330px,calc(100vw - 40px));font-size:12.5px;color:var(--ink-2);line-height:1.55;white-space:normal}
.pop .rules b{color:var(--gold);font-weight:500;font-size:13px}
.pop .rules ul{margin:6px 0 0;padding-left:16px}
.pop .rules li{margin:3px 0}
/* every dialog in the home style: stone inside a gold frame, gold-lettered stone buttons */
.sheet-p{container-type:inline-size;border:14px solid transparent;border-image:url("/assets/frame2.webp?v=3153b82bfe") 32 / 14px stretch;border-radius:0;
  background:linear-gradient(rgba(9,9,11,.58),rgba(9,9,11,.7)),url("/assets/stone.webp?v=9fe187606e") 0 0/300px 300px,#0c0c0e;background-clip:padding-box;box-shadow:0 -20px 60px rgba(0,0,0,.6);
  padding:14px max(12px,env(safe-area-inset-right,0px)) calc(18px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
@media(min-width:720px){.sheet-p{border-radius:0;border-bottom:14px solid transparent;padding:20px 24px 24px}}
.sheet-x{top:6px;right:6px}
.btn{border-radius:0;justify-content:center}
.btn-cream{background:url("/assets/stone.webp?v=9fe187606e") 0 0/200px 200px;border:11px solid transparent;border-image:url("/assets/frame9.webp?v=d00b8c1f2c") 26 fill / 11px stretch;
  clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px),0 9px);
  color:var(--gold-hi);font-family:var(--f-cjk);font-weight:700;letter-spacing:.06em;text-shadow:0 1px 0 #000;box-shadow:none;padding:0 18px}
.btn-cream:hover{background:url("/assets/stone.webp?v=9fe187606e") 0 0/200px 200px;background-color:rgba(217,184,120,.08);color:#fff3d4;filter:brightness(1.12)}
.btn-sm.btn-cream{border-width:9px;padding:0 14px}
html:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .btn-cream{font-family:var(--f-lat);font-size:17px;letter-spacing:.01em}
html:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .btn-sm.btn-cream{font-size:15.5px}
.btn-ghost{border-radius:0;border:1px solid rgba(217,184,120,.3);background:rgba(0,0,0,.4)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-hi)}
textarea,input[type=text],input[type=email],input[type=password],select{border-radius:2px;background:rgba(0,0,0,.48);border-color:rgba(217,184,120,.24)}
.panel{border-radius:2px;border-color:rgba(217,184,120,.16);background:rgba(0,0,0,.28)}
.social{border-radius:2px !important;border-color:rgba(217,184,120,.24) !important;background:rgba(0,0,0,.35) !important}
.comments .row input{height:40px;padding:8px 12px}
.linkb{color:var(--gold);font-size:12px;margin-left:8px;text-decoration:underline;text-underline-offset:3px}
.tiers{display:flex;gap:8px;flex-wrap:wrap}
/* counts never push the "…" out of the card */
.acts{min-width:0;flex-wrap:nowrap}
.act{flex:none}
@container (max-width:330px){.acts{gap:2px}.act{padding:0 6px;gap:4px}}
/* small stone button (topic page) */
.carve.sm{height:42px;padding:0 16px;border-width:9px;gap:7px;font-size:15px}
.carve.sm>svg{width:14px;height:14px}
html:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .carve.sm{font-size:16px;padding:0 16px}
/* ---- topic page ---- */
.sheet.tv .sheet-p{padding:0;display:flex;flex-direction:column;height:100dvh;max-height:100dvh;max-width:680px}
@media(min-width:720px){.sheet.tv .sheet-p{height:min(calc(100dvh - 40px),980px);padding:0}}
.sheet.tv .sheet-x{position:sticky;top:10px;align-self:flex-end;margin:10px 10px -50px 0;z-index:6;flex:none;width:40px;height:40px;background:rgba(6,6,8,.62);border:1px solid rgba(217,184,120,.32);border-radius:50%;color:var(--ink)}
.tv-hero{position:relative;flex:none;display:flex;flex-direction:column;min-height:clamp(270px,66cqw,420px);background:center/cover no-repeat #0c0c0e;padding:14px 16px 4px}
.tv-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,5,7,.5) 0%,rgba(5,5,7,0) 26%,rgba(5,5,7,.3) 52%,rgba(5,5,7,.9) 100%)}
.tv-hero>*{position:relative}
.tv-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding-right:52px}
.tv-tags .tag{background:rgba(6,6,8,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.tag.full{color:#efc2a8;border-color:rgba(239,194,168,.5)}
.tag.unlock{display:inline-flex;align-items:center;gap:4px;color:var(--gold-hi);border-color:var(--gold);background:rgba(60,46,22,.75) !important;cursor:pointer;font-size:11px;line-height:1.6}
.tv-txt{margin-top:auto;padding-top:28px}
.sheet .tv-txt h2{margin:0 0 6px;font-size:clamp(20px,5.6cqw,27px);line-height:1.35;color:#f5efe3;text-shadow:0 2px 12px rgba(0,0,0,.85)}
html:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .sheet .tv-txt h2{font-family:var(--f-lat);font-size:clamp(23px,6.4cqw,31px)}
.tv-introw{position:relative}
.tv-intro{margin:0;color:rgba(245,239,227,.88);font-size:14px;line-height:1.65;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 6px rgba(0,0,0,.95)}
.tv-hero.open .tv-intro{display:block;overflow:visible}
.tv-more{display:none;position:absolute;right:0;bottom:0;padding-left:30px;background:linear-gradient(90deg,rgba(14,12,10,0),rgba(14,12,10,.95) 28px);color:var(--gold-hi);font-size:14px;line-height:1.65}
.tv-hero.clip .tv-more{display:inline}
.tv-hero.open .tv-more{position:static;display:inline-block;background:none;padding:2px 0 0}
.tv-hero.open .tv-more .ell{display:none}
.tv-by{margin-top:8px;font-size:12px;color:rgba(245,239,227,.7);display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.tv-by .cz{color:inherit}
.tv-foot{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:8px;border-top:1px solid rgba(217,184,120,.18);padding-top:2px}
.tv-foot .acts{flex:0 1 auto}
.tv-foot .act{color:rgba(245,239,227,.82)}
.tv-foot .act.more{margin-left:0}
.tv-mt{flex:none;display:inline-flex;align-items:center;gap:4px;color:var(--gold);font-size:13px;white-space:nowrap;height:32px}
.tv-mt:hover{color:var(--gold-hi)}
.tv-body{flex:1 0 auto;padding:12px 12px 16px}
.tv-note{padding:0 2px 8px}
.tv-count{font-size:12.5px;color:var(--ink-3);letter-spacing:.06em;margin:0 2px}
.tv-bar{position:sticky;bottom:0;z-index:4;flex:none;padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));background:linear-gradient(rgba(3,3,5,0),rgba(3,3,5,.92) 30%)}
.tv-card{border:16px solid transparent;border-image:url("/assets/panel1.webp?v=3d926b640d") 32 / 16px stretch;background:linear-gradient(rgba(8,8,9,.55),rgba(8,8,9,.55)),url("/assets/stone.webp?v=9fe187606e") 0 0/260px 260px,#0c0c0d;background-clip:padding-box;padding:0 2px;display:flex;flex-direction:column;gap:6px;filter:drop-shadow(0 -6px 18px rgba(0,0,0,.6))}
.tv-card textarea{min-height:0;resize:none;font-family:var(--f-cjk);font-size:16px;line-height:1.5;padding:8px 11px}
.tv-card .err:empty{display:none}
.tv-tools{display:flex;align-items:center;gap:12px}
.tv-tool{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--gold);cursor:pointer;white-space:nowrap;min-width:0}
.tv-tool span{overflow:hidden;text-overflow:ellipsis}
.tv-tool.dim{color:var(--ink-3);text-decoration:underline;text-underline-offset:3px}
.tv-tool:hover{color:var(--gold-hi)}
.tv-tools .carve{margin-left:auto;flex:none}
.tv-pick{display:flex;align-items:center;gap:10px}
.tv-pick .thumb{width:64px;height:40px;flex:none;background:center/cover no-repeat;border:1px solid rgba(217,184,120,.3)}
.tv-pick .check{flex:1;font-size:12px;line-height:1.45}
.tv-x{flex:none;width:32px;height:32px;display:grid;place-items:center;color:var(--ink-2)}
.tv-x svg{width:16px;height:16px}
.tv-msg{display:flex;align-items:center;justify-content:center;gap:10px 14px;flex-wrap:wrap;text-align:center;padding:4px 2px;font-size:13.5px;color:var(--ink-2)}
@container (max-width:380px){.tv-tools{gap:8px}.tv-tools .carve.sm{padding:0 12px}}
.tv-mt .sm,.tv-tool .sm{display:none}
.tv-foot .acts{flex:none}
@container (max-width:400px){.tv-tool .lg{display:none}.tv-tool .sm{display:inline}}
@container (max-width:350px){.tv-foot .acts{gap:0}.tv-foot .act{padding:0 5px;gap:4px}.tv-mt .lg{display:none}.tv-mt .sm{display:inline}}
@container (max-width:350px){.tv-tools{gap:8px}.tv-tools .carve.sm>svg{display:none}.tv-tools .carve.sm{padding:0 12px}html:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .tv-tools .carve.sm{font-size:15px;padding:0 12px}}

/* ===== V1.9 ===== */
/* "Imagined" is a plain label, not a pill */
.ilab{font-size:11.5px;letter-spacing:.08em;color:var(--gold);white-space:nowrap}
.ilab::before{content:"◇ ";font-size:9px;vertical-align:1px;opacity:.8}
.stranger .src .ilab{font-size:11px}
/* topic page: see-through tags, bare close mark, title and intro right under the tags */
.tv-tags .tag{background:rgba(0,0,0,.16);-webkit-backdrop-filter:none;backdrop-filter:none;border-color:rgba(236,220,180,.45);color:#f3e7cc;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.tv-tags .tag.gold{border-color:rgba(217,184,120,.7);color:var(--gold-hi)}
.tv-tags .ilab{color:#f3e7cc;text-shadow:0 1px 4px rgba(0,0,0,.9)}
.sheet.tv .sheet-x{background:none;border:0;border-radius:0;width:40px;height:40px;color:#f5efe3;filter:drop-shadow(0 1px 3px rgba(0,0,0,.9))}
.sheet.tv .sheet-x svg{width:24px;height:24px}
.tv-hero::before{background:linear-gradient(180deg,rgba(5,5,7,.8) 0%,rgba(5,5,7,.5) 38%,rgba(5,5,7,.08) 64%,rgba(5,5,7,.78) 100%)}
.tv-txt{margin-top:10px;padding-top:0}
.tv-foot{margin-top:auto}
.tv-hero{padding-bottom:4px}
.tv-txt + *{margin-top:auto}
.tv-by .ccn{color:inherit}
.tv-by .flag{width:14px;height:14px}
/* country before citizen number: in headers the name sits right after the flag */
.chead .ccn{flex:none;color:var(--ink-3);order:0}
.meta .ccn{color:var(--ink-2)}
.meta .flag{width:14px;height:14px}
/* comments: country, number, time; text in your language with "show original"; likes */
.comments{gap:0}
.cmt{padding:9px 0 4px;border-bottom:1px solid rgba(217,184,120,.1)}
.cmt-h{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-3);white-space:nowrap;min-width:0;overflow:hidden}
.cmt-h .flag{width:14px;height:14px;flex:none}
.cmt-h .ccn{color:var(--ink-2);flex:none}
.cmt-h .cz{color:var(--ink-3)}
.cmt-h time{margin-left:auto;padding-left:8px;flex:none}
.cmt-h .mine-badge{flex:none}
.cmt p{margin:4px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink)}
.cmt p.cjk{font-family:var(--f-cjk)}
.cmt-f{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:30px}
.cmt-f .trnote{font-size:11.5px;margin:0}
.cmt-f .act{height:28px;margin-left:auto;margin-right:-8px}
.cmt-more{align-self:flex-start;color:var(--gold);font-size:12.5px;padding:8px 0 2px}
.comments .row{margin-top:10px}
@container (max-width:340px){.cmt-h .czl{display:none}}
/* sign in: one logo for every language, placeholders inside the fields, an eye to show the password, a row of round icons */
.auth{max-width:380px}
.auth-head{margin-bottom:14px}
.auth-mark2{display:block;width:150px;height:auto;margin:6px auto 14px}
.auth h2{text-align:center;font-size:22px;margin:0}
.auth-sub{text-align:center;margin:-4px 0 14px !important;font-size:13px}
.auth-f{gap:12px}
.auth-f input{height:48px}
.auth-row{display:flex;justify-content:flex-end;margin-top:-4px}
.pw input{padding-right:48px}
.pw-t{right:4px;width:40px;height:40px;padding:0;display:grid;place-items:center;color:var(--ink-3)}
.pw-t:hover{color:var(--ink)}
.pw-t svg{width:20px;height:20px}
.agree{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:20px;color:var(--ink-2)}
.agree input{margin:2px 0 0;width:16px;height:16px;flex:none;accent-color:#d9b878}
.agree label{cursor:pointer}
.agree .link{font-size:13px;padding:0;line-height:20px;vertical-align:baseline}
.socials{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.social{width:44px;height:44px;padding:0 !important;border-radius:50% !important;display:grid;place-items:center;font-size:17px;font-weight:600;color:var(--ink);border:1px solid rgba(217,184,120,.3) !important;background:rgba(0,0,0,.35) !important}
.social svg{width:19px;height:19px}
.social:hover{border-color:var(--gold) !important;color:var(--gold-hi)}
.auth-demo{text-align:center;margin-top:14px}
.sheet.tv .sheet-x{top:2px;margin-top:2px}
.tv-top{position:sticky;top:0;z-index:5;height:44px;margin-bottom:-44px;flex:none;display:flex;align-items:center;padding:0 52px 0 16px;
  background:linear-gradient(rgba(9,9,11,.9),rgba(9,9,11,.9)),url("/assets/stone.webp?v=9fe187606e") 0 0/300px 300px;border-bottom:1px solid rgba(217,184,120,.2);
  opacity:0;pointer-events:none;transition:opacity .2s}
.tv-top span{font-family:var(--f-cjk);font-weight:600;font-size:15px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .tv-top span{font-family:var(--f-lat);font-size:17px}
.sheet-p.scrolled .tv-top{opacity:1}
.sheet.tv .sheet-x{order:-1}
.cmt p,.cmt p.latin,.cmt p.cjk{font-family:var(--f-ui);font-weight:400;font-size:14.5px;line-height:1.6;letter-spacing:0;text-indent:0;padding-left:0;color:var(--ink)}
.sheet.tv .sheet-x{margin:2px 8px -42px 0}

/* ===== V2.0 ===== */
/* close mark: black-gold — gold gradient stroke with a dark edge, no circle */
.sheet-x svg{stroke:url(#gx-gold);stroke-width:2}
.sheet-x{filter:drop-shadow(0 0 1px rgba(0,0,0,.95)) drop-shadow(0 1px 3px rgba(0,0,0,.8))}
.sheet-x:hover{filter:drop-shadow(0 0 1px rgba(0,0,0,.95)) drop-shadow(0 0 6px rgba(217,184,120,.55))}
.sheet.tv .sheet-x{color:var(--gold)}
.sheet.tv .sheet-x svg{width:26px;height:26px}
/* topic answers are shown exactly as written: no quote marks, no hanging indent */
.sentence.raw,p.raw{padding-left:0;text-indent:0}
/* official topics are signed by the site, citizen topics by flag · country · number */
.offc{display:inline-flex;align-items:center;gap:4px;color:var(--gold);white-space:nowrap}
.offc svg{flex:none}
/* topic page: picture holds category, title and intro; who started it and the actions sit below */
.tv-hero{min-height:clamp(210px,52cqw,340px);padding-bottom:16px}
.tv-tags .tag.gold{background:rgba(0,0,0,.16)}
.tv-meta{padding:10px 14px 0;flex:none}
.tv-meta .tv-by{margin-top:0;color:var(--ink-2)}
.tv-meta .tv-by .ccn{color:var(--ink-2)}
.tv-meta .tv-foot{margin-top:6px;border-top:0;border-bottom:1px solid rgba(217,184,120,.14);padding:0 0 4px}
.tv-meta .tv-foot .act{color:var(--ink-2)}
.tv-body{padding-top:10px}
/* topic category filter */
.tcats{padding:14px 0 2px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.tcats::-webkit-scrollbar{display:none}
.tcats .chip{flex:none}
.cmt-h.t1 .czl{display:none}
.cmt-h.t2 .ccn,.cmt-h.t2 .ccn + .sep{display:none}

/* ===== V2.1 ===== */
/* topic answers and comments: text and "translated from · show original" share one left edge */
.ans .trnote,.cmt .trnote{padding-left:0}
.ans p.raw{margin-left:0}
/* sign-in: small round icons in a single row */
.socials{flex-wrap:nowrap;gap:12px}
.social{width:36px;height:36px;font-size:14px}
.social svg{width:16px;height:16px}
/* demo helper on your own topic */
.demo-fill{display:block;width:100%;margin:0 0 10px;padding:9px 12px;border:1px dashed rgba(217,184,120,.35);color:var(--gold);font-size:12.5px;text-align:center}
.demo-fill:hover{border-color:var(--gold);color:var(--gold-hi)}

/* ===== V2.2 ===== */
/* sentences shown exactly as written — no quote marks, so no hanging indent */
.sentence{padding-left:0;text-indent:0}
.trnote{padding-left:0}
/* browser autofill keeps the stone look instead of turning the field blue */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,textarea:-webkit-autofill{
  -webkit-text-fill-color:var(--ink);caret-color:var(--ink);-webkit-box-shadow:0 0 0 1000px #0b0b0d inset;box-shadow:0 0 0 1000px #0b0b0d inset;transition:background-color 9999s ease-out 0s}
/* sign-in fields: error under the field, red edge, password strength bar */
.af{display:flex;flex-direction:column;gap:5px;min-width:0}
.ferr{font-size:12.5px;color:#f08a7a;line-height:1.45}
.ferr:empty{display:none}
.af.bad input[type=text],.af.bad input[type=email],.af.bad input[type=password]{border-color:#e0705f}
.af.bad .agree{color:#f0a698}
.err:empty{display:none}
.pwm{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-3)}
.pwm i{flex:none;width:64px;height:3px;border-radius:2px;background:rgba(255,255,255,.12);position:relative;overflow:hidden}
.pwm i::after{content:"";position:absolute;inset:0 auto 0 0;width:0;background:#e0705f;transition:width .2s,background .2s}
.pwm.s1 i::after{width:33%;background:#e0705f}.pwm.s2 i::after{width:66%;background:#d9b878}.pwm.s3 i::after{width:100%;background:#7fbf8a}
.codeRow{align-items:flex-start}
.codeRow .af{flex:1}
.codeRow .btn{height:48px}
.demo-code{font-size:12.5px;color:var(--gold)}
.demo-code[hidden]{display:none}
/* lay a stone: 5 / 10 / 20 / other in one row, one button below */
.give{display:flex;gap:8px;margin-top:16px}
.amt{flex:1 1 0;min-width:0;height:44px;border:1px solid rgba(217,184,120,.3);background:rgba(0,0,0,.35);color:var(--ink);font-size:15px;font-variant-numeric:tabular-nums;display:flex;align-items:center;justify-content:center;gap:2px}
.amt.on{border-color:var(--gold);color:var(--gold-hi);background:rgba(217,184,120,.1)}
.amt.own{flex:1.4 1 0;padding:0 8px;cursor:text}
.amt.own span{color:var(--ink-3)}
.amt.own input{flex:1;min-width:0;height:100%;border:0;background:none;padding:0 2px;font-size:15px;color:inherit}
.amt.own input:focus{outline:none}
.give-go{width:100%;margin-top:12px}
.give-go .sm{display:none}
@container (max-width:380px){.give-go .lg{display:none}.give-go .sm{display:inline}}
/* topic page: the category tag and the close mark share one line; the tag is 15% see-through */
.tv-hero{padding-top:2px}
.tv-tags{min-height:40px;align-items:center;margin-top:2px}
.tv-tags .tag,.tv-tags .tag.gold{background:rgba(0,0,0,.15) !important;border-color:rgba(236,220,180,.38);color:#f6ecd4;-webkit-backdrop-filter:none;backdrop-filter:none}
.sheet.tv .sheet-x{margin-top:4px}
.sheet.tv .sheet-x{margin:4px 8px -44px 0}

/* ===== V2.3 ===== */
/* carousel: topic title under an answer */
.stranger .qttl{margin-top:6px;font-size:12.5px}
.stranger .qttl:empty{display:none}
.stranger .qttl button{color:var(--gold);font-family:var(--f-cjk);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stranger .qttl button::before{content:"《"}.stranger .qttl button::after{content:"》"}
html:not(:lang(zh)):not(:lang(ja)) .stranger .qttl button::before{content:"“"}
html:not(:lang(zh)):not(:lang(ja)) .stranger .qttl button::after{content:"”"}
/* topics tab: one clear "Start a global topic" button; category chips fit on one line */
.gtopic{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:58px;
  background:url("/assets/stone.webp?v=9fe187606e") 0 0/200px 200px;border:12px solid transparent;border-image:url("/assets/frame9.webp?v=d00b8c1f2c") 26 fill / 12px stretch;
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);
  color:var(--gold-hi);font-family:var(--f-cjk);font-weight:700;font-size:18px;letter-spacing:.1em;text-shadow:0 1px 0 #000}
.gtopic:hover{filter:brightness(1.12);color:#fff3d4}
.gtopic .gv{width:34px;height:24px;flex:none}
html:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .gtopic{font-family:var(--f-lat);font-size:19px;letter-spacing:.02em}
.tcats{flex-wrap:wrap;overflow:visible;gap:6px}
.tcats .chip{padding:0 12px;height:30px}
/* the answer box sits right under the topic, in the flow (no floating bar) */
.tv-bar{position:static;padding:4px 0 12px;background:none}
.tv-card{filter:none}
.tv-msg{padding:10px 4px}
/* featured: sort + country */
.fbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0 2px}
.fsort{display:flex;gap:4px}
.fsort button{height:30px;padding:0 10px;font-size:13px;color:var(--ink-2);border-bottom:1px solid transparent;display:inline-flex;align-items:center;gap:3px}
.fsort button.on{color:var(--gold-hi);border-bottom-color:var(--gold)}
.fsort .dir{font-size:12px}
#f-cc{width:auto;max-width:48%;height:32px;padding:0 28px 0 10px;font-size:13px}
/* pay first: amount and the rules, written plainly */
.pay-amt{font-family:var(--f-lat);font-size:40px;color:var(--gold-hi);text-align:center;margin:6px 0 4px;font-variant-numeric:lining-nums}
.pay-list{margin:6px 0 0;padding-left:18px;color:var(--ink-2);font-size:13.5px;line-height:1.65}
.pay-list li{margin:3px 0}
.pay-list li:nth-child(2){color:var(--ink)}
/* landing pages after sign-up / payment / reset */
.done{text-align:center}
.done .done-ic{display:block;width:44px;height:44px;margin:4px auto 8px;color:var(--gold);stroke-width:1.4}
.done h2{text-align:center}
.done .stack{margin-top:16px}
.cit-no{display:flex;flex-direction:column;align-items:center;gap:2px;margin:14px 0 8px;padding:14px;border:1px solid rgba(217,184,120,.25);background:rgba(0,0,0,.3)}
.cit-no span{font-size:12.5px;color:var(--ink-3);letter-spacing:.08em}
.cit-no b{font-family:var(--f-lat);font-size:40px;line-height:1.1;letter-spacing:.06em;font-variant-numeric:lining-nums;color:var(--gold-hi)}
.cit-no em{font-style:normal;font-size:12.5px;color:var(--ink-2)}

/* ===== V2.4 ===== */
/* every button in the home style: stone inside a gold frame. Secondary buttons only use quieter lettering */
.btn-ghost{background:url("/assets/stone.webp?v=9fe187606e") 0 0/200px 200px;border:11px solid transparent;border-image:url("/assets/frame9.webp?v=d00b8c1f2c") 26 fill / 11px stretch;
  clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px),0 9px);
  color:var(--ink);font-family:var(--f-cjk);font-weight:600;letter-spacing:.04em;padding:0 16px;text-shadow:0 1px 0 #000}
.btn-ghost:hover{background:url("/assets/stone.webp?v=9fe187606e") 0 0/200px 200px;border-color:transparent;color:var(--gold-hi);filter:brightness(1.12)}
.btn-sm.btn-ghost{border-width:9px;padding:0 12px}
html:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .btn-ghost{font-family:var(--f-lat);font-size:16px;letter-spacing:.01em}
/* My page: the number is the identity */
.my-id{display:flex;align-items:center;gap:12px;margin-right:40px}
.my-id .flag{width:30px;height:30px;flex:none}
.my-id h2{margin:0}
.my-id .sub{margin:2px 0 0 !important}
.mtabs{margin-top:14px}
.acc-set{margin-top:24px;padding-top:16px;border-top:1px solid rgba(217,184,120,.16);display:flex;flex-direction:column;gap:12px}
.acc-set h3{margin:0;font-size:15px;font-weight:600;color:var(--ink-2);font-family:var(--f-cjk)}
.acc-row{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;color:var(--ink-3)}
.acc-row b{font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auth .af select,.acc-set select,.done select{height:48px}
.done .af{margin:6px 0 4px}
/* add places: four packs */
.packs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.packs .btn{min-width:0;padding:0 8px;font-size:15px}
html:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .packs .btn{font-size:15px}
/* comments: "number：text" */
.cmt p{margin:0;font-size:14.5px;line-height:1.6}
.cno{display:inline-flex;align-items:center;gap:4px;color:var(--gold);font-variant-numeric:tabular-nums;vertical-align:-1px;white-space:nowrap}
.cno .flag{width:14px;height:14px}
.cmt .cs{color:var(--ink-3)}
.cmt .mine-badge{margin-left:6px}
.cmt-f time{margin-left:auto;font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.cmt-f .act{margin-left:6px}
/* create topic: error sits right after the field label */
.ferr.in{display:inline;margin-left:8px;font-size:12.5px}
.ferr.in:empty{display:none}
#cte-agree{margin-bottom:-8px}
/* globe icon (no sound lines) */
.gtopic .gv{width:24px;height:24px}
.packs .btn{height:64px;flex-direction:column;gap:2px;line-height:1.2}
.packs .btn b{font-weight:700;font-size:15px}
.packs .btn span{font-family:var(--f-lat);font-size:16px;color:var(--ink);font-weight:600}

/* ===== V2.5 ===== */
/* flags: every ISO region, one sprite (flag-icons, MIT) */
.flag.fs{background:url("/assets/flags.webp?v=2bb9503919") 0 0/1600% 1600% no-repeat #222}
/* option B everywhere: fields, boxes and choices wear the same gold frame as the buttons */
input[type=text],input[type=email],input[type=password],textarea,select{
  background:url("/assets/stone.webp?v=9fe187606e") 0 0/200px 200px;border:9px solid transparent;border-image:url("/assets/frame9.webp?v=d00b8c1f2c") 26 fill / 9px stretch;border-radius:0;
  clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px);padding:0 8px;color:var(--ink)}
textarea{padding:6px 8px}
input[type=text]:focus,input[type=email]:focus,input[type=password]:focus,textarea:focus,select:focus{border-color:transparent;filter:brightness(1.22)}
select{-webkit-appearance:none;appearance:none;padding-right:34px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23d9b878' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 8px center/12px 8px,url("/assets/stone.webp?v=9fe187606e") 0 0/200px 200px}
select option{background:#111;color:var(--ink)}
.af.bad input[type=text],.af.bad input[type=email],.af.bad input[type=password],.af.bad select{border-color:transparent;box-shadow:inset 0 0 0 1px #e0705f}
.af.bad .pw input,.af.bad>input,.af.bad>select{outline:1px solid #e0705f;outline-offset:-6px}
.pw input{padding-right:44px}
.pw-t{right:8px}
.panel,.cit-no,.pay-list,.give .amt,.fixed-cc{background:url("/assets/stone.webp?v=9fe187606e") 0 0/200px 200px;border:9px solid transparent;border-image:url("/assets/frame9.webp?v=d00b8c1f2c") 26 fill / 9px stretch;border-radius:0;
  clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px)}
.panel{padding:8px 10px}
.cit-no{padding:10px}
.pay-list{padding:8px 10px 8px 28px}
.give .amt.on{filter:brightness(1.3);color:var(--gold-hi)}
.give .amt.own input{border:0;border-image:none;background:none;clip-path:none;padding:0 2px;filter:none}
.fixed-cc{display:flex;align-items:center;gap:8px;padding:8px 10px;font-size:14.5px}
.fixed-cc .flag{width:18px;height:18px}
.fixed-cc .note{margin-left:auto}
.chip{border-radius:0;border:8px solid transparent;border-image:url("/assets/frame9.webp?v=d00b8c1f2c") 26 fill / 8px stretch;background:url("/assets/stone.webp?v=9fe187606e") 0 0/200px 200px;
  clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px);height:34px;padding:0 10px;display:inline-flex;align-items:center}
.chip.on{color:var(--gold-hi);filter:brightness(1.35);text-shadow:0 0 8px rgba(247,228,180,.35)}
.chip:hover{color:var(--ink)}
.tcats .chip{height:34px;padding:0 10px}
/* centred landing pages: titles centred on the panel, not pushed by the close mark */
.done h2,.auth h2{margin-left:36px;margin-right:36px;text-wrap:balance}
.done .sub,.auth-sub{text-wrap:balance}
.cc-line{display:inline-flex;align-items:center;gap:6px;justify-content:center}
.cc-line .flag{width:16px;height:16px}
/* "let others add places" switch */
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 2px 12px;font-size:13.5px;color:var(--ink-2)}
.switch{flex:none;width:42px;height:24px;border-radius:12px;background:rgba(255,255,255,.14);position:relative;transition:background .2s}
.switch i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#d8d2c4;transition:transform .2s}
.switch.on{background:linear-gradient(180deg,#d9b878,#a9843f)}
.switch.on i{transform:translateX(18px);background:#fff8e6}
/* topic list: top answer as "flag number：text" */
.peek .cno{margin-right:0}
.chip.on,.give .amt.on{background:linear-gradient(rgba(217,184,120,.2),rgba(217,184,120,.2)),url("/assets/stone.webp?v=9fe187606e") 0 0/200px 200px;filter:brightness(1.2)}

/* ===== V2.6 ===== */
/* add places at any time: a small "$ Add places" next to the count */
.seat-link{display:inline-flex;align-items:center;gap:3px;margin-left:6px;color:var(--gold);font-size:12.5px;white-space:nowrap}
.seat-link svg{width:13px;height:13px}
.seat-link:hover{color:var(--gold-hi)}
.carve.sm .qi{width:16px;height:16px}
/* create form: allow others to add places */
.ct-allow{padding:4px 0}
.ct-allow span{display:flex;flex-direction:column;gap:2px}
.ct-allow b{font-weight:500;color:var(--ink-2);font-size:13px}
.ct-allow em{font-style:normal;font-size:12px;color:var(--ink-3)}
/* comments: number：text / translation / time · reply · ♡ ☆ ↗ … ; replies indented */
.cmt{padding:9px 0 3px}
.cmt.rep{margin-left:18px;padding-top:6px;border-bottom:0;border-left:1px solid rgba(217,184,120,.18);padding-left:10px}
.cmt .trnote{margin:2px 0 0}
.cmt-f{display:flex;align-items:center;gap:10px;min-height:30px}
.cmt-f time{margin-left:0;flex:none}
.cmt-f .rp{font-size:12px;color:var(--ink-2);flex:none}
.cmt-f .rp:hover{color:var(--gold)}
.cacts{margin-left:auto;display:flex;align-items:center;gap:2px;min-width:0}
.cacts .act{height:28px;padding:0 5px;gap:3px;font-size:11.5px;margin:0}
.cacts .act svg{width:15px;height:15px}
.cacts .act.more{margin-left:0}
.rp-row{margin:4px 0 6px}
.rp-row input{height:40px}
.plain-list{margin:0;padding-left:16px;font-size:13px;line-height:1.7;color:var(--ink-2)}
.cmt-f{flex-wrap:wrap;row-gap:0}
.cacts{flex:none}
.cmt-f{justify-content:flex-start}

/* ===== V2.7 ===== */
/* citizen numbers are links to that citizen's page */
.czb{display:inline;color:inherit;font:inherit;padding:0;white-space:nowrap}
.czb:hover,.cno:hover{color:var(--gold-hi);text-decoration:underline;text-underline-offset:3px}
button.cno{font:inherit;padding:0}
.chead .czb{color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}
.cz-sec{margin-top:18px}
.cz-sec h3{margin:0 0 8px;font-size:14px;font-weight:600;color:var(--ink-2);font-family:var(--f-cjk)}
/* one place for adding places: the count row */
.cap-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px;font-size:13px;color:var(--ink-2)}
.cap-row b{color:#efc2a8;font-weight:500}
.cap-row .carve.sm{flex:none}
/* posting restricted */
.ban-bar{display:flex;align-items:center;gap:8px;width:100%;margin:12px 0 0;padding:10px 12px;border:1px solid rgba(224,112,95,.5);background:rgba(224,112,95,.1);color:#f0a698;font-size:13px;text-align:left}
/* my comments */
.mycmt{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;padding:12px 14px;text-align:left;cursor:pointer}
.mycmt .mc-t{font-size:14.5px;color:var(--ink);line-height:1.6}
.mycmt .mc-s{font-size:12px;color:var(--ink-3)}
/* share sheet */
.share-card img{display:block;width:100%;max-width:340px;margin:6px auto 0;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.share-card.empty{height:200px;display:grid;place-items:center}
#share-save{text-decoration:none}
.cap-row>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cap-row .carve .sm{display:none}
@container (max-width:400px){.cap-row .carve .lg{display:none}.cap-row .carve .sm{display:inline}}

/* ===== V2.8 ===== */
/* add places: solid gold so it can't be missed */
.btn-gold{flex:none;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;font-family:var(--f-cjk);font-weight:700;font-size:15px;letter-spacing:.04em;color:#2a1d08;
  background:linear-gradient(180deg,#fbeec6 0%,#e2c07a 45%,#b58a3e 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(0,0,0,.25),0 3px 10px rgba(0,0,0,.5),0 0 14px rgba(217,184,120,.25);
  clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px)}
.btn-gold:hover{filter:brightness(1.08)}
.btn-gold .qi{width:16px;height:16px}
.btn-gold .sm{display:none}
html:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .btn-gold{font-family:var(--f-lat);font-size:16px;letter-spacing:.01em}
@container (max-width:400px){.cap-row .btn-gold .lg{display:none}.cap-row .btn-gold .sm{display:inline}}
/* account rows: label never wraps; long values get an ellipsis */
.acc-row{align-items:center}
.acc-row span{flex:none;white-space:nowrap}
.acc-row b{min-width:0;text-align:right}
.warn-t{color:#f0a698 !important}
/* topics: "still open" filter */
.open-only{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2);white-space:nowrap;cursor:pointer}
.open-only input{accent-color:#d9b878;width:15px;height:15px}
.fsort{flex-wrap:wrap}
/* review rows: status on top, the (demo) actions wrap underneath */
.ostatus{flex-wrap:wrap}
.ostatus>.btns{flex:1 1 100% !important;display:flex;flex-wrap:wrap;gap:6px}
.ostatus>.btns:empty{display:none}
.ostatus>.btns .btn{flex:1 1 calc(50% - 6px);min-width:0;font-size:13px}
.fbar{flex-wrap:wrap;row-gap:4px}

/* ===== V2.9 ===== */
/* admin console */
.admin{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;background:linear-gradient(rgba(8,8,10,.86),rgba(8,8,10,.92)),url("/assets/stone.webp?v=9fe187606e") 0 0/300px 300px,#0b0b0d;color:var(--ink);container-type:inline-size}
.adm-top{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid rgba(217,184,120,.25);font-family:var(--f-cjk);font-size:16px;color:var(--gold-hi)}
.adm-tabs{display:flex;gap:4px;overflow-x:auto;padding:8px 12px;border-bottom:1px solid rgba(217,184,120,.12);scrollbar-width:none}
.adm-tabs::-webkit-scrollbar{display:none}
.adm-tabs button{flex:none;height:32px;padding:0 12px;font-size:13.5px;color:var(--ink-2);border-bottom:2px solid transparent;display:inline-flex;align-items:center;gap:6px}
.adm-tabs button.on{color:var(--gold-hi);border-bottom-color:var(--gold)}
.adm-tabs i{font-style:normal;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#b8452f;color:#fff;font-size:11px;display:inline-grid;place-items:center}
.adm-body{flex:1;overflow:auto;padding:14px 16px 40px;max-width:980px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.adm-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.adm-kpi{padding:14px;border:1px solid rgba(217,184,120,.22);background:rgba(0,0,0,.3);display:flex;flex-direction:column;gap:4px}
.adm-kpi b{font-family:var(--f-lat);font-size:28px;color:var(--gold-hi);font-variant-numeric:lining-nums}
.adm-kpi span{font-size:12.5px;color:var(--ink-3)}
.adm-item{padding:12px 14px;border:1px solid rgba(217,184,120,.18);background:rgba(0,0,0,.28);display:flex;flex-direction:column;gap:6px}
.adm-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:12.5px;color:var(--ink-2)}
.adm-h .flag{width:14px;height:14px}
.adm-h time{margin-left:auto;color:var(--ink-3)}
.adm-t{margin:0;font-size:15px;line-height:1.6;color:var(--ink)}
.adm-acts{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.adm-acts .btn{flex:0 0 auto;min-width:0}
.adm-reason{width:auto !important;height:40px !important;font-size:13px;max-width:100%}
.adm-table{display:flex;flex-direction:column;border:1px solid rgba(217,184,120,.18)}
.adm-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:10px 12px;border-bottom:1px solid rgba(217,184,120,.1);font-size:13px}
.adm-row:last-child{border-bottom:0}
.adm-row .flag{width:14px;height:14px}
.adm-row>b{margin-left:auto}
.adm-row .adm-acts{margin-left:auto}
.adm-sub{margin:4px 0;font-size:14px;color:var(--ink-2);font-weight:600}
/* add places: calmer antique gold (final style to be chosen) */
.btn-gold{color:#f3e2b6;background:linear-gradient(180deg,#5a4524 0%,#3d2e17 55%,#2a1f10 100%);box-shadow:inset 0 0 0 1px rgba(217,184,120,.55),inset 0 1px 0 rgba(255,236,190,.25),0 3px 10px rgba(0,0,0,.5);text-shadow:0 1px 0 #000}

/* ===== V3.0 ===== */
/* the count row: the status text may wrap; it is never cut off */
.cap-row{flex-wrap:wrap;row-gap:8px}
.cap-row>span{white-space:normal;overflow:visible;text-overflow:clip;flex:1 1 9em;min-width:0;line-height:1.5}
.cap-row .btn-gold{margin-left:auto}
/* admin numbers above everything else; sheets opened from the admin (a citizen page) sit above it */
body:has(#admin) #sheet{z-index:95}
.adm-top{gap:10px;flex-wrap:wrap}
.adm-top>b{flex:1 1 auto;min-width:0}
.adm-chip{height:24px;padding:0 10px;font-size:12px;color:#e9d7ae;border:1px solid rgba(217,184,120,.45);background:rgba(217,184,120,.08);border-radius:12px}
.adm-tabs{flex-wrap:wrap;overflow:visible;row-gap:2px}
.adm-body{max-width:1180px;gap:12px}
.adm-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding-bottom:4px}
.adm-filters select{width:auto !important;max-width:100%;height:36px !important;font-size:13px;padding-top:0;padding-bottom:0}
.adm-seg{display:inline-flex;flex-wrap:wrap;border:1px solid rgba(217,184,120,.3)}
.adm-seg button{height:34px;padding:0 12px;font-size:13px;color:var(--ink-2);border-right:1px solid rgba(217,184,120,.18)}
.adm-seg button:last-child{border-right:0}
.adm-seg button.on{background:rgba(217,184,120,.16);color:var(--gold-hi);font-weight:600}
.adm-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.adm-live i{width:7px;height:7px;border-radius:50%;background:#3ccf8e;box-shadow:0 0 0 0 rgba(60,207,142,.6);animation:admPulse 2s infinite}
@keyframes admPulse{0%{box-shadow:0 0 0 0 rgba(60,207,142,.55)}70%{box-shadow:0 0 0 7px rgba(60,207,142,0)}100%{box-shadow:0 0 0 0 rgba(60,207,142,0)}}
.adm-kpis{grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr))}
.adm-kpi{gap:3px;min-width:0}
.adm-kpi>span{font-size:12.5px;color:var(--ink-3);order:-1}
.adm-kpi b{font-size:26px;line-height:1.15;overflow-wrap:anywhere}
.adm-kpi small{font-size:12px;color:var(--ink-3)}
.adm-kpi small.up{color:#58c79a}.adm-kpi small.dn{color:#f08a7a}
.adm-kpi.go{cursor:pointer}.adm-kpi.go:hover{border-color:rgba(217,184,120,.5)}
.adm-card{margin:0;padding:12px 14px;border:1px solid rgba(217,184,120,.18);background:rgba(0,0,0,.3);min-width:0}
.adm-card h4{margin:0 0 10px;font-size:14px;font-weight:600;color:var(--ink-2)}
.adm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:10px}
.adm-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:10px;align-items:start}
/* charts */
.adm-chart{position:relative}
.adm-chart figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:8px}
.adm-chart figcaption>b{font-size:14px;font-weight:600;color:var(--ink-2)}
.adm-chart .ch-tot{font-family:var(--f-lat);font-size:20px;color:var(--gold-hi);font-weight:600;margin-left:auto}
.ch-leg{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--ink-2)}
.ch-leg i{display:inline-block;width:14px;height:2px;border-radius:1px;margin-right:5px;vertical-align:middle}
.ch-plot{width:100%;min-height:110px;touch-action:pan-y}
.ch-plot svg{display:block}
.ch-plot .gl{stroke:rgba(236,230,218,.08);stroke-width:1}
.ch-plot .ax{fill:#8e887c;font-size:11px;font-variant-numeric:tabular-nums}
.ch-plot .xl{stroke:rgba(236,230,218,.35);stroke-width:1}
.ch-tip{position:absolute;top:34px;z-index:2;min-width:110px;padding:8px 10px;background:rgba(14,14,16,.96);border:1px solid rgba(217,184,120,.35);box-shadow:0 6px 18px rgba(0,0,0,.5);font-size:12px;pointer-events:none}
.ch-tip .tt-h{color:var(--ink-3);margin-bottom:4px;white-space:nowrap}
.ch-tip .tt-r{display:flex;align-items:center;gap:7px;white-space:nowrap;line-height:1.7}
.ch-tip .tt-r i{width:12px;height:2px;border-radius:1px;flex:none}
.ch-tip .tt-r b{color:var(--ink);font-size:13px;font-variant-numeric:tabular-nums}
.ch-tip .tt-r span{color:var(--ink-3)}
/* country table */
.adm-ct{display:flex;flex-direction:column}
.adm-ct .ct-h,.adm-ct .ct-r{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.9fr) minmax(0,.8fr) minmax(0,.9fr) minmax(70px,1.1fr);gap:8px;align-items:center;padding:7px 4px;font-size:13px;text-align:right}
.adm-ct .ct-h{font-size:11.5px;color:var(--ink-3);border-bottom:1px solid rgba(217,184,120,.15)}
.adm-ct .ct-h>span:first-child,.adm-ct .ct-n{text-align:left}
.adm-ct .ct-r{width:100%;border-bottom:1px solid rgba(217,184,120,.07);color:var(--ink);font-variant-numeric:tabular-nums}
.adm-ct .ct-r:hover{background:rgba(217,184,120,.06)}
.adm-ct .ct-r.on{background:rgba(217,184,120,.12);box-shadow:inset 2px 0 0 var(--gold)}
.adm-ct .ct-n{display:flex;align-items:center;gap:7px;min-width:0}
.adm-ct .ct-n>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-ct .ct-n .flag{width:16px;height:16px;flex:none}
.adm-ct b{font-weight:600}
.adm-ct .ct-s{display:flex;align-items:center;gap:6px}
.adm-ct .ct-s i,.adm-bar .bt i{display:block;height:6px;border-radius:0 3px 3px 0;background:#c9a565}
.adm-ct .ct-s i{flex:none;max-width:calc(100% - 40px)}
.adm-ct .ct-s em{font-style:normal;font-size:11.5px;color:var(--ink-3);margin-left:auto}
.adm-more{margin-top:8px;font-size:13px}
@container (max-width:520px){.adm-ct .opt{display:none}.adm-ct .ct-h,.adm-ct .ct-r{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(70px,1fr)}}
/* breakdown bars */
.adm-bars{display:flex;flex-direction:column;gap:8px}
.adm-bar{display:grid;grid-template-columns:minmax(0,9em) minmax(40px,1fr) auto 3.4em;gap:8px;align-items:center;font-size:13px}
.adm-bar .bl{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-bar .bt{background:rgba(236,230,218,.05);height:6px}
.adm-bar b{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.adm-bar em{font-style:normal;font-size:11.5px;color:var(--ink-3);text-align:right}
@container (max-width:400px){.adm-bar{grid-template-columns:minmax(0,1fr) auto 3.2em}.adm-bar .bt{grid-column:1/-1;order:5}}
/* queues */
.adm-note{margin:0;padding:8px 10px;font-size:13.5px;line-height:1.6;color:var(--ink);background:rgba(217,184,120,.06);border-left:2px solid rgba(217,184,120,.5)}
.adm-note span{color:var(--ink-3)}
.adm-other{flex:1 1 220px;width:auto !important;height:40px !important;font-size:13px}
.adm-other[hidden]{display:none}
.adm-e:empty{display:none}
#adm-q{margin-bottom:8px;height:40px !important}
.adm-acc[hidden]{display:none}
.adm-h .lk,.adm-row .lk{display:inline-flex;align-items:center;gap:5px;color:var(--ink);font-variant-numeric:tabular-nums}
@container (max-width:480px){
  .adm-body{padding:12px 12px 40px}
  .adm-live{margin-left:0;flex-basis:100%}
  .adm-kpi{padding:10px 12px}.adm-kpi b{font-size:21px}
  .adm-tabs button{padding:0 9px;font-size:13px}
  .adm-acts .btn{flex:1 1 calc(50% - 6px)}
  .adm-reason,.adm-other{flex:1 1 100%;width:100% !important}
  .adm-h time{margin-left:0;flex-basis:100%}
}
/* report: details for "Other" */
#rep-o[hidden]{display:none}
#rep-note{min-height:84px;resize:vertical}
.adm-kpis{grid-template-columns:repeat(auto-fill,minmax(min(100%,132px),1fr))}
@container (min-width:900px){.adm-kpis.k8,.adm-kpis.k4{grid-template-columns:repeat(4,1fr)}.adm-kpis.k6{grid-template-columns:repeat(6,1fr)}.adm-kpis.k7{grid-template-columns:repeat(7,1fr)}}
@container (min-width:640px) and (max-width:899px){.adm-kpis.k6{grid-template-columns:repeat(3,1fr)}.adm-kpis.k8,.adm-kpis.k4{grid-template-columns:repeat(4,1fr)}}
.adm-chart .ch-tot small{font-size:12px;color:var(--ink-3);font-weight:400;margin-left:2px}

/* ===== V3.0 (2) ===== */
/* write: country on one row; Earth citizens pick once */
.cc-row{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap}
.cc-row .flabel{margin:0}
.cc-v{display:inline-flex;align-items:center;gap:8px;font-size:15px;color:var(--ink);min-width:0}
.cc-v .flag{width:18px;height:18px;flex:none}
.cc-v select{width:auto !important;min-width:150px;max-width:min(240px,60vw);height:42px !important}
.cc-note{margin-top:6px;font-size:12px;color:var(--ink-3);text-align:right}
.check .link{display:inline;padding:0;font:inherit;color:var(--gold-hi);text-decoration:underline;text-underline-offset:3px}
/* my sentence: straight on the black, no frame */
.my-one{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:10px 2px 16px;text-align:left}
.my-one .mo-meta{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.my-one>p:not(.mo-story):not(.mo-empty){margin:0;font-family:var(--f-cjk);font-size:21px;line-height:1.6;color:var(--ink)}
.my-one .mo-story{margin:0;font-size:14px;line-height:1.7;color:var(--ink-2)}
.my-one .mo-empty{margin:0;font-size:15px;color:var(--ink-2)}
.my-one .acts{width:100%}
/* review list */
.adm-qbar{display:flex;flex-wrap:wrap;gap:8px 12px}
.adm-seg button i{font-style:normal;font-size:11.5px;color:var(--ink-3);margin-left:3px}
.adm-seg button.on i{color:var(--gold-hi)}
.adm-batch{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 12px;border:1px dashed rgba(217,184,120,.35);background:rgba(217,184,120,.04)}
.adm-batch .adm-e{flex-basis:100%}
.adm-all{gap:8px}
.adm-ck{display:inline-flex;align-items:center;margin-right:2px}
.adm-ck input,.adm-all input{width:18px;height:18px;accent-color:#d9b878}
.adm-rsn{gap:8px}
.adm-res{margin:0;font-size:13px;color:var(--ink-2)}
.adm-res.ok b{color:#58c79a}.adm-res.no b{color:#f08a7a}
.adm-ct .ct-s i{max-width:calc(100% - 46px)}
.adm-ct .ct-s{gap:8px}

/* ===== V3.1 ===== */
/* full topic: status on its own line under the count */
.cap-row .cap-l{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0;white-space:normal}
.cap-row .cap-l b{color:#efc2a8;font-weight:500}
/* add places: a gold line that follows the cut corners, with a sheen on each corner */
.btn-gold{position:relative;isolation:isolate;background:
  radial-gradient(circle at 0 0,#fff4cc 0,rgba(255,236,180,.85) 4px,transparent 12px),radial-gradient(circle at 100% 0,#fff4cc 0,rgba(255,236,180,.85) 4px,transparent 12px),
  radial-gradient(circle at 0 100%,#f3d58e 0,rgba(230,190,110,.8) 4px,transparent 12px),radial-gradient(circle at 100% 100%,#f3d58e 0,rgba(230,190,110,.8) 4px,transparent 12px),
  linear-gradient(180deg,#e9cf8f 0%,#b8893f 50%,#8a6428 100%) !important;box-shadow:none !important}
.btn-gold::before{content:"";position:absolute;inset:1.4px;z-index:-1;background:linear-gradient(180deg,#5a4524 0%,#3d2e17 55%,#2a1f10 100%);
  clip-path:polygon(6.4px 0,calc(100% - 6.4px) 0,100% 6.4px,100% calc(100% - 6.4px),calc(100% - 6.4px) 100%,6.4px 100%,0 calc(100% - 6.4px),0 6.4px)}
.btn-gold::after{content:"";position:absolute;inset:1.4px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(255,236,190,.16),transparent 45%);
  clip-path:polygon(6.4px 0,calc(100% - 6.4px) 0,100% 6.4px,100% calc(100% - 6.4px),calc(100% - 6.4px) 100%,6.4px 100%,0 calc(100% - 6.4px),0 6.4px)}
/* the pact: one line */
.check.pact>span{white-space:nowrap;font-size:min(13.5px,3.85vw)}
.check.pact .link{display:inline !important;white-space:nowrap}
/* my sentence: same metal number as the home cards */
.my-one .mo-meta{display:flex;align-items:baseline;gap:10px}
.my-one .mo-meta .no{font-size:15px}
.my-one .mo-d{font-size:12px;color:var(--ink-3)}
/* notices */
#b-account.has-un::after,#b-menu.has-un::after{content:"";position:absolute;top:6px;right:5px;width:8px;height:8px;border-radius:50%;background:#e0604a;box-shadow:0 0 0 2px #0a0a0c}
#b-account,#b-menu{position:relative}
.chip .nb{font-style:normal;margin-left:5px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:#b8452f;color:#fff;font-size:10.5px;display:inline-grid;place-items:center}
.note-it{display:flex;flex-direction:column;gap:3px;padding:12px 2px;border-bottom:1px solid rgba(217,184,120,.12);text-align:left}
.note-it b{font-size:13px;color:var(--gold-hi);font-weight:600}
.note-it p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink)}
.note-it time{font-size:12px;color:var(--ink-3)}
.note-it.new b::after{content:"";display:inline-block;width:6px;height:6px;margin-left:6px;border-radius:50%;background:#e0604a;vertical-align:middle}
/* admin: top bar, folded analytics, tools, tables, drawer */
.adm-top{padding:10px 16px}
.adm-meSel{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3)}
.adm-meSel select{width:auto !important;height:30px !important;font-size:12.5px;padding-top:0;padding-bottom:0}
.adm-top .adm-live{margin-left:0}
.adm-ana{border:1px solid rgba(217,184,120,.22);background:rgba(0,0,0,.25)}
.adm-ana>summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:11px 14px;font-size:13px;color:var(--ink-2)}
.adm-ana>summary::-webkit-details-marker{display:none}
.adm-ana>summary>b{font-size:14px;color:var(--gold-hi)}
.adm-ana .ana-sum b{color:var(--ink);font-variant-numeric:tabular-nums}
.adm-ana .ana-tg{margin-left:auto;color:var(--gold);font-size:12.5px}
.adm-ana .ana-tg::after{content:" ▾"}
.adm-ana[open] .ana-tg::after{content:" ▴"}
.adm-ana .ana-b{display:flex;flex-direction:column;gap:12px;padding:0 14px 14px}
.adm-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.adm-q{width:auto !important;flex:1 1 220px;min-width:0;height:36px !important;font-size:13.5px}
.adm-f{width:auto !important;max-width:100%;height:36px !important;font-size:13px;padding-top:0;padding-bottom:0}
.adm-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:4px 0}
.adm-todo{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:8px}
.adm-todo button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;border:1px solid rgba(217,184,120,.18);text-align:left}
.adm-todo button b{font-family:var(--f-lat);font-size:24px;color:var(--ink-3)}
.adm-todo button.has b{color:#f0a698}
.adm-todo button span{font-size:12.5px;color:var(--ink-2)}
.adm-tw{border:1px solid rgba(217,184,120,.18);background:rgba(0,0,0,.28);overflow:hidden}
.adm-tbl{width:100%;border-collapse:collapse;font-size:13px}
.adm-tbl th{position:sticky;top:0;text-align:left;font-weight:500;font-size:12px;color:var(--ink-3);padding:9px 10px;border-bottom:1px solid rgba(217,184,120,.2);background:#111113;white-space:nowrap}
.adm-tbl td{padding:9px 10px;border-bottom:1px solid rgba(217,184,120,.08);vertical-align:middle;color:var(--ink)}
.adm-tbl tr:last-child td{border-bottom:0}
.adm-tbl tbody tr:hover{background:rgba(217,184,120,.05)}
.adm-tbl tr.is-ban td{background:rgba(224,112,95,.05)}
.adm-tbl .c-op{text-align:right;white-space:nowrap}
.adm-tbl .c-ck{width:28px}
.adm-tbl code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:var(--ink-2)}
.adm-tbl .flag{width:14px;height:14px}
.adm-sel,#adm-all{width:18px;height:18px;accent-color:#d9b878}
.ok-t{color:#58c79a}.amber-t{color:#e6b45a;font-weight:500}
.ost{font-size:12px;padding:2px 8px;border-radius:10px;border:1px solid rgba(236,230,218,.2);white-space:nowrap}
.ost.paid{color:#58c79a;border-color:rgba(88,199,154,.4)}.ost.rfpend,.ost.pending{color:#e6b45a;border-color:rgba(230,180,90,.45)}.ost.refunded,.ost.done{color:var(--ink-2)}.ost.rejected{color:#f08a7a;border-color:rgba(240,138,122,.4)}
.adm-form{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:10px 18px}
.adm-form label{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;color:var(--ink-2)}
.adm-in{display:inline-flex;align-items:center;gap:6px;color:var(--ink-3)}
.adm-num{width:110px !important;height:36px !important;text-align:right;font-variant-numeric:tabular-nums}
.adm-file{cursor:pointer;margin-top:10px}
.adm-dr{position:absolute;inset:0;z-index:5;display:flex;justify-content:flex-end;background:rgba(0,0,0,.55)}
.adm-dr.adm-mod{justify-content:center;align-items:center;padding:16px}
.dr-p{width:min(460px,100%);height:100%;overflow:auto;background:#101012;border-left:1px solid rgba(217,184,120,.3);box-shadow:-10px 0 30px rgba(0,0,0,.6)}
.adm-mod .dr-p{height:auto;max-height:100%;border:1px solid rgba(217,184,120,.35)}
.dr-h{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:8px;padding:12px 14px;background:#101012;border-bottom:1px solid rgba(217,184,120,.2);font-size:15px;color:var(--gold-hi)}
.dr-h .ibtn{margin-left:auto}
.dr-h .flag{width:18px;height:18px}
.dr-b{display:flex;flex-direction:column;gap:10px;padding:12px 14px 24px}
.dr-b>p{margin:0;font-size:14px;line-height:1.6}
.dr-r{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--ink-3)}
.dr-r b{color:var(--ink);font-weight:500;text-align:right;min-width:0;overflow-wrap:anywhere}
.dr-q{display:inline-block;margin-top:4px;font-family:var(--f-cjk);font-size:14px;color:var(--ink-2);font-weight:400}
.dr-f{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--ink-2)}
.dr-s{border-top:1px solid rgba(217,184,120,.15);padding-top:10px}
.dr-s h5{margin:0 0 8px;font-size:13px;color:var(--ink-2);font-weight:600}
.dr-l{display:flex;gap:10px;font-size:12.5px;line-height:1.55;padding:3px 0;color:var(--ink-2)}
.dr-l time{flex:none;color:var(--ink-3);font-variant-numeric:tabular-nums}
#adm-msg{min-height:70px}
/* phones: each table row becomes a small card, nothing hidden */
@container (max-width:760px){
  .adm-tw{border:0;background:none}
  .adm-tbl thead{display:none}
  .adm-tbl,.adm-tbl tbody{display:block}
  .adm-tbl tr{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;padding:10px 12px;margin-bottom:8px;border:1px solid rgba(217,184,120,.18);background:rgba(0,0,0,.3)}
  .adm-tbl td{display:flex;flex-direction:column;gap:1px;padding:0;border:0;min-width:0;overflow-wrap:anywhere}
  .adm-tbl td[data-l]:not([data-l=""])::before{content:attr(data-l);font-size:11px;color:var(--ink-3)}
  .adm-tbl td.c-main{grid-column:1/-1;flex-direction:row;align-items:center;flex-wrap:wrap;gap:6px;font-size:14px}
  .adm-tbl td.c-main::before{display:none}
  .adm-tbl td.c-ck{grid-column:1/-1;flex-direction:row}
  .adm-tbl td.c-ck:empty{display:none}
  .adm-tbl td.c-op{grid-column:1/-1;align-items:flex-start;text-align:left}
  .adm-tbl td.c-op:empty{display:none}
  .adm-top{gap:6px 10px}
  .adm-meSel{order:3;flex:1 1 auto}
  .adm-top .adm-live{order:4}
}
.adm-body>*{flex-shrink:0}
.adm-tw{overflow-x:auto}
.adm-tbl td{white-space:nowrap}
.adm-tbl td.c-wrap{white-space:normal;min-width:180px}
.adm-tbl .tag{white-space:nowrap}
body:has(#admin) #toast{top:auto !important;bottom:28px !important;z-index:200}
@container (max-width:760px){.adm-tbl td{white-space:normal}.adm-tbl td.c-wrap{min-width:0;grid-column:1/-1}}
.adm-meSel select{height:32px !important;line-height:1.2;padding:0 30px 0 10px !important;font-size:12.5px}
.dr-s .adm-batch{flex-direction:column;align-items:stretch;gap:8px}
.dr-s .adm-batch .adm-acts{justify-content:flex-start}
.dr-s .adm-batch .adm-acts .btn{flex:0 0 auto}
.dr-r b .dr-q{text-align:right}

/* ===== V3.2 ===== */
/* add places: optical centring ($ glyph has side bearing; trailing letter-spacing) */
.btn-gold .qi{margin-left:-4px}
.btn-gold .lg,.btn-gold .sm{margin-right:-.04em}
/* card actions: same quiet grey as the citizen number */
.plaque .acts .act,.cmt .cacts .act{color:var(--ink-3)}
.plaque .acts .act:hover,.cmt .cacts .act:hover{color:var(--ink-2)}
.plaque .acts .act.liked{color:var(--heart)}
.plaque .acts .act.faved{color:var(--gold)}
/* admin rows: labels, flags and numbers on one line */
.adm-h>span,.adm-item p.note{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px}
.adm-item p.note{display:flex}
.lk{display:inline-flex;align-items:center;gap:5px;vertical-align:middle;line-height:1.2}
/* translation under content */
.adm-tr{margin:0;padding:6px 10px;font-size:13.5px;line-height:1.6;color:var(--ink-2);background:rgba(57,135,229,.07);border-left:2px solid rgba(57,135,229,.5)}
.adm-tr span{color:var(--ink-3);font-size:12px;margin-right:4px}
.adm-tr em{font-style:normal;color:var(--ink-3)}
.adm-chip.adm-trt{cursor:pointer}
.adm-chip.adm-trt.on{background:rgba(57,135,229,.14);border-color:rgba(57,135,229,.55);color:#cfe1fb}
/* featured: obvious states */
.adm-item.is-feat{border-color:rgba(217,184,120,.5);background:linear-gradient(90deg,rgba(217,184,120,.08),rgba(0,0,0,.28) 40%)}
.feat-on{color:#f3d58e;font-weight:600;font-size:12.5px}
.adm-seg button{cursor:pointer}
.adm-role-save[disabled],button[disabled]{opacity:.45;cursor:default}
/* pact page */
.page.pact h3{margin:18px 0 6px;font-size:15px;color:var(--gold-hi);font-family:var(--f-cjk)}
.page.pact p.li{position:relative;padding-left:14px;margin:4px 0}
.page.pact p.li::before{content:"";position:absolute;left:2px;top:.75em;width:4px;height:4px;border-radius:50%;background:var(--gold)}

/* ===== V3.3 ===== */
/* featured: the country picker shows its whole label */
#f-cc{height:40px !important;max-width:none !important;width:auto !important;min-width:150px;padding:0 32px 0 12px !important;font-size:13px;line-height:1.2}
/* ads: same card family, dashed gold edge, clearly labelled */
.plaque.ad{border-style:dashed !important;text-align:left}
.ad-h{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-3)}
.ad-tag{padding:1px 8px;border:1px solid rgba(217,184,120,.5);border-radius:10px;color:var(--gold);font-size:11.5px;letter-spacing:.04em}
.ad-sp{color:var(--ink-2)}
.ad-x{margin-left:auto;font-size:12px;color:var(--ink-3)}
.ad-x:hover{color:var(--ink-2)}
.ad-img{height:120px;margin:10px 0 0;background-size:cover;background-position:center;border-radius:2px}
.plaque.ad h4{margin:10px 0 4px;font-size:16px;font-family:var(--f-cjk);color:var(--ink)}
.plaque.ad p{margin:0 0 10px;font-size:14px;line-height:1.6;color:var(--ink-2)}
.ad-go{text-decoration:none;display:inline-flex}
/* personal centre header */
.my-c h2{margin:0}
.my-c .my-cit{margin:2px 0 0;font-size:13px;color:var(--ink-3)}
/* admin: carousel rows, ad form */
.car-it{flex-direction:row !important;gap:12px;align-items:flex-start}
.car-th{flex:none;width:150px;height:84px;background-size:cover;background-position:center;position:relative;border:1px solid rgba(217,184,120,.25)}
.car-th b{position:absolute;left:6px;top:4px;font-family:var(--f-lat);font-size:18px;color:#fff;text-shadow:0 1px 4px #000}
.car-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
@container (max-width:520px){.car-it{flex-direction:column !important}.car-th{width:100%;height:120px}}
.adm-form2{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:10px 16px}
.adm-form2 label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--ink-2)}
.adm-form2 label.wide{grid-column:1/-1}
.adm-form2 input,.adm-form2 select,.adm-form2 textarea{height:auto;min-height:38px;font-size:13.5px}
.ad-prev{display:inline-block;width:120px;height:50px;background-size:cover;background-position:center;border:1px solid rgba(217,184,120,.3)}
.adm-ul{margin:0;padding-left:18px;font-size:13px;line-height:1.7;color:var(--ink-2)}
.ad-son{width:18px;height:18px;accent-color:#d9b878}

/* ===== V3.4 ===== */
/* period as plain text links */
.fsort.ptxt{gap:2px;padding:2px 0 0}
.fsort.ptxt button{height:28px;padding:0 8px;font-size:13px;color:var(--ink-3)}
.fsort.ptxt button.on{color:var(--gold-hi)}
/* country pickers: as wide as the chosen name */
#f-cc,#l-cc{min-width:0 !important;max-width:70% !important;height:38px !important;padding:0 30px 0 12px !important;font-size:13px;line-height:1.2}

/* ===== V3.5 ===== */
/* topic categories as text links */
.fsort.tcats{flex-wrap:wrap;padding:4px 0 2px}
/* personal centre: tabs first, then "your inscription" in a framed box with a faint golden halo */
.my-one-wrap{margin:14px 0 6px;filter:drop-shadow(0 0 10px rgba(217,184,120,.28)) drop-shadow(0 0 2px rgba(217,184,120,.35))}
.my-one.plaque{padding:16px 18px 12px;cursor:default}
.my-one .mo-title{font-size:12.5px;letter-spacing:.12em;color:var(--gold);font-family:var(--f-cjk)}
.my-one .acts{margin-top:2px}
/* about page */
.about-hero{text-align:center;padding:6px 0 4px}
.about-hero img{width:150px;max-width:50%;display:block;margin:0 auto}
.about-hero p{margin:6px 0 0;color:var(--gold);font-family:var(--f-cjk);letter-spacing:.2em;font-size:14px}
.page.about>p:first-child{font-size:15.5px;color:var(--ink)}

/* ===== V3.6 ===== */
.acc-row.acc-pub select{height:38px;width:auto;min-width:0;padding:0 30px 0 12px;font-size:13px}
.del-link{align-self:flex-start;color:var(--ink-3);font-size:12.5px;text-decoration:underline;text-underline-offset:3px;margin-top:4px}
.del-acc h2{margin:0 0 10px}
.del-list{margin:0 0 16px;padding-left:18px;color:var(--ink-2);font-size:14px;line-height:1.75}
.del-list li{margin:0 0 6px}
.del-acc .del-go{color:#e8a493;border-color:rgba(232,164,147,.45)}
.del-acc .btns{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}

/* ===== V3.7 ===== */
.auth .auth-main.busy,.auth [data-act=send-code].busy{opacity:.55;pointer-events:none}

/* ===== V3.9 ===== */
.ts-box{display:flex;justify-content:center;min-height:0}
.ts-box:empty{display:none}
#q-text[data-act]{cursor:pointer}
#q-text[data-act]:focus-visible{outline:1px solid var(--gold);outline-offset:6px}
.give-perk{text-align:center;margin-top:12px;color:var(--gold);font-size:13px;line-height:1.6}
.adm-meReal{color:var(--ink-2);font-size:13px}
.adm-purge .adm-danger{color:#e8a493;border-color:rgba(232,164,147,.45)}

/* ===== V3.10: memorial collectibles (纪念藏品) ===== */
/* the shine: a 45° band of light crosses the number, then rests */
.kp{--kb:#d9b878;--kh:#fff7da;background:linear-gradient(135deg,var(--kb) 0%,var(--kb) 42%,var(--kh) 50%,var(--kb) 58%,var(--kb) 100%);background-size:300% 100%;background-position:0 0;
  -webkit-background-clip:text;background-clip:text;color:transparent !important;-webkit-text-fill-color:transparent;text-shadow:none !important;font-weight:600;animation:kpSweep 7s ease-in-out infinite}
.kp *{color:transparent !important;-webkit-text-fill-color:transparent;text-shadow:none !important}
@keyframes kpSweep{0%{background-position:100% 0}42%,100%{background-position:0 0}}
.kp-bronze{--kb:#c98a55;--kh:#ffe4c8}
.kp-silver{--kb:#bfc5ce;--kh:#ffffff}
.kp-gold{--kb:#dcbb78;--kh:#fff8de}
body.sheet-open #slab .kp{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.kp{animation:none;background-position:0 0}}
.kp-br{width:1.05em;height:1.05em;vertical-align:-.15em;flex:none}
.kp-br.md{width:24px;height:24px;margin-left:6px;vertical-align:-4px;filter:drop-shadow(0 0 6px rgba(217,184,120,.35))}
.kp-br.lg{width:72px;height:72px;filter:drop-shadow(0 0 16px rgba(217,184,120,.4))}
.my-id .kp-gl{margin:2px 0 0;color:var(--gold);font-size:13px;letter-spacing:.06em}
.kpc-bronze{--kc:#c98a55}.kpc-silver{--kc:#c9ced6}.kpc-gold{--kc:#e3c27f}
/* the collectibles page */
.kp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
@media (max-width:620px){.kp-grid{grid-template-columns:1fr}}
.kp-card{position:relative;display:flex;flex-direction:column;gap:10px;text-align:left;padding:16px 14px 14px;border:1px solid rgba(217,184,120,.18);border-radius:4px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(0,0,0,.25));color:var(--ink);cursor:pointer;transition:border-color .2s,box-shadow .2s}
.kp-card::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--kc);opacity:.75}
.kp-card:hover{border-color:rgba(217,184,120,.4)}
.kp-card.on{border-color:var(--kc);box-shadow:0 0 0 1px var(--kc),0 0 18px rgba(217,184,120,.15)}
.kp-card.own{cursor:default;opacity:.7}
.kpc-top{display:flex;align-items:center;gap:10px}
.kpc-top .kp-br{width:40px;height:40px;filter:drop-shadow(0 0 8px rgba(217,184,120,.3))}
.kpc-n{display:flex;flex-direction:column;line-height:1.3}
.kpc-n b{font-family:var(--f-cjk);font-weight:600;color:var(--kc);font-size:15px}
.kpc-n em{font-style:normal;font-family:var(--f-lat);font-size:24px;color:var(--ink)}
.kpc-l{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--ink-2);line-height:1.5}
.kpc-l span::before{content:"◆";color:var(--kc);font-size:8px;margin-right:7px;vertical-align:2px}
.kpc-st{font-size:12.5px;color:var(--kc);min-height:1em}
.kp-prev{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:16px 0 4px;font-size:13px;color:var(--ink-2)}
.kp-prev b{font-family:var(--f-cjk);font-size:19px}
.kp-go{width:100%;margin-top:12px}
.kp-max{text-align:center;color:var(--gold);margin:16px 0 0}
.kp-note,.kp-demo{text-align:center}
.kp-sum{display:flex;align-items:center;gap:12px;margin:14px 0;padding:12px 14px;border:1px solid var(--kc);border-radius:4px}
.kp-sum .kp-br{width:36px;height:36px}
.kp-sum div{display:flex;flex-direction:column;flex:1;line-height:1.4}
.kp-sum b{color:var(--kc);font-family:var(--f-cjk)}
.kp-sum div span{font-size:12.5px;color:var(--ink-2)}
.kp-sum .num{font-family:var(--f-lat);font-size:24px}
.kp-lines{margin:0;padding-left:1.1em;display:flex;flex-direction:column;gap:6px}
.kp-done{text-align:center;padding-top:6px}
.kp-done .kp-big{display:block;margin:4px auto 6px}
.kp-done .kp-num{font-family:var(--f-cjk);font-size:26px;margin:6px 0 2px}
.kp-done .kp-gno{color:var(--gold);letter-spacing:.08em;margin:0 0 8px}
.kp-done .btns{justify-content:center;margin-top:16px}
/* my page */
.kp-cta{display:flex;align-items:center;gap:10px;width:100%;margin:12px 0 4px;padding:11px 14px;border:1px dashed rgba(217,184,120,.3);border-radius:4px;color:var(--ink-2);font-size:13.5px;text-align:left}
.kp-cta:hover{border-color:var(--gold);color:var(--gold-hi)}
.kp-cta .kp-br{width:22px;height:22px}
.kp-cta .kp-arr{margin-left:auto;color:var(--gold)}
.kp-my{margin:12px 0 4px;padding:12px 14px;border:1px solid rgba(217,184,120,.2);border-radius:4px;background:rgba(0,0,0,.25)}
.kp-myh{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.kp-myh .kp-br.md{margin:0}
.kp-myh div{display:flex;flex-direction:column;flex:1;line-height:1.35}
.kp-myh b{color:var(--kc);font-family:var(--f-cjk)}
.kp-myh span{font-size:12.5px;color:var(--gold)}
.kp-row{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid rgba(255,255,255,.06);font-size:13.5px}
.kp-row em{font-style:normal;color:var(--ink-3)}
.kp-row a{color:var(--gold)}
.kp-row.old{color:var(--ink-3);font-size:12.5px}
.kp-ok{color:var(--gold);font-size:13px;white-space:nowrap}
/* human check: a plain message and a retry button when it fails */
.ts-fail{margin:6px 0 0;font-size:13px;color:#e58a7a;text-align:center}
.ts-fail .link{font-size:13px}
/* music button: the same colour as the icons beside it; a slash when the music is off; no box */
.ibtn.mus,.ibtn.mus:hover,.ibtn.mus:active{background:none}
.ibtn.mus,.ibtn.mus[aria-pressed="true"],.ibtn.mus[aria-pressed="false"]{color:var(--ink-2)}
.ibtn.mus:hover{color:var(--ink)}
.ibtn.mus .mus-x{display:none}
.ibtn.mus[aria-pressed="false"] .mus-x{display:inline}
.ibtn.mus:focus:not(:focus-visible){outline:none}

/* ===== V3.10.1 ===== */
/* who wrote it: the place (country, or 地球公民) always shows; a long country name ends with … instead of disappearing */
.chead .czl,.chead.t1 .czl,.chead.t2 .czl,.stranger .who .czl,.stranger .who.t1 .czl,.cmt-h .czl,.cmt-h.t1 .czl{display:inline !important}
.chead .czb{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto}
.chead .czb .czl{color:var(--ink-3)}
.chead .czb .cz{color:var(--ink-2)}
/* language letter sits on the same line as the icons */
.ibtn.lang .lcode{display:block;line-height:1;height:auto;padding:0;margin:0}
html:lang(zh) .ibtn.lang .lcode,html:lang(ja) .ibtn.lang .lcode{transform:translateY(-1px)}

/* ===== V3.10.2: easier-to-read small text (about +1.5–2px on phones) ===== */
.chead,.chead .czb,.chead .time{font-size:13.5px !important}
.tr,.tr button,.trnote,.trnote button{font-size:13px !important}
.acts .act{font-size:14px !important}
#q-who,#q-who .czb{font-size:13.5px !important}
.src,.src span{font-size:13px !important}
.stat .l{font-size:14px !important}
.fsort button{font-size:14.5px !important}
.tv-by,.tv-by *{font-size:14px !important}
.tv-count{font-size:14px !important}
.tv-tool,.tv-mt .lg{font-size:14px !important}
.tv-tags .tag,.tag.gold{font-size:12.5px !important}
.tv-head p,.tv-intro{font-size:16px !important;line-height:1.6 !important}
.cmt-h,.cmt-h *{font-size:13.5px !important}
@container (max-width:470px){.tv-tool .lg{display:none}.tv-tool .sm{display:inline}}

/* ===== V3.10.2: easier to read on phones ===== */
/* the small text (who wrote it, time, translation note, counts) moves from 11–12 to 13.5–14; the sentences stay as they are */
.chead,.chead .czb,.chead .time{font-size:13.5px !important}
.tr,.tr button,.trnote,.trnote button{font-size:13px !important}
.acts .act{font-size:14px !important}
#q-who,#q-who .czb{font-size:13.5px !important}
.src,.src span{font-size:13px !important}
.stat .l{font-size:14px !important}
.fsort button{font-size:14.5px !important}
.tv-by,.tv-by *{font-size:14px !important}
.tv-tool,.tv-mt .lg,.tv-mt .sm{font-size:14px !important}
.tv-tags .tag,.tag.gold{font-size:12.5px !important}
.tv-intro{font-size:16px !important;line-height:1.6 !important}
.cmt-h,.cmt-h *{font-size:13.5px !important}
.cap-l{font-size:14px}
/* the answer tools switch to their short labels (＋ 背景图 · 规则) earlier, so nothing is cut off */
@container (max-width:470px){.tv-tool .lg{display:none}.tv-tool .sm{display:inline}}
/* large text: the reading areas grow by 15%, like a reading app's text-size setting */
html.fs-big #feed,html.fs-big #sheet-p > :not(.sheet-x):not(.tv-hero):not(.tv-top),html.fs-big .tv-hero .tv-txt{zoom:1.15}
html.fs-big .cbar{zoom:1.1}

/* ===== V3.11 ===== */
/* a pair of olive branches around a holder's number (left one leans in, right one mirrors it) */
.kpw{display:inline-flex;align-items:center;gap:.12em;white-space:nowrap;vertical-align:middle}
.kpw .kpb{height:1.35em;width:auto;flex:none;filter:drop-shadow(0 0 3px rgba(217,184,120,.25))}
.kpw .kpb.r{transform:scaleX(-1)}
.my-id h2 .kpw .kpb{height:1.25em}
.kp-br{height:1.2em;width:auto;vertical-align:-.2em;flex:none}
.kpc-top .kp-br{width:auto;height:46px}
.kp-sum .kp-br{width:auto;height:40px}
.kp-cta .kp-br{width:auto;height:24px}
.kp-myh .kp-br,.kp-myh .kp-br.md{width:auto;height:30px;margin:0}
.kp-br.lg{width:auto;height:84px}
/* the collectibles entry in the menu and footer stands out */
#pop-menu .m-keep,#foot-nav .m-keep{color:var(--gold-hi) !important;font-weight:600}
/* topic cards: places on their own line, the same pill whether full or open */
.topic .tp-cap{margin:8px 0 10px;display:flex}
.tag.capt{color:var(--ink-2);border-color:rgba(217,184,120,.28)}
.topic .tp-cap .tag{font-size:13px !important;padding:3px 10px;line-height:1.4}
/* nothing scrolls visibly behind the phone's status bar above the sticky tabs */
.rail::before{content:"";position:absolute;left:-1px;right:-1px;bottom:100%;height:env(safe-area-inset-top,0px);background:#070709}
/* long agreement lines wrap instead of pushing the page sideways (English) */
.check > span{white-space:normal;min-width:0}
.check .link{white-space:normal;text-align:left;display:inline}
/* large text on narrow phones: the action row tightens so the "…" button stays inside */
html.fs-big .acts{gap:0;margin-left:-6px}
html.fs-big .act{padding-left:6px;padding-right:6px}
#sheet-p .link,#sheet-p span:has(> .link){white-space:normal}
/* the smallest phones get a slightly smaller step for large text */
@media (max-width:360px){html.fs-big #feed,html.fs-big #sheet-p > :not(.sheet-x):not(.tv-hero):not(.tv-top),html.fs-big .tv-hero .tv-txt{zoom:1.08}}
@media (max-width:360px){html.fs-big .tv-foot{flex-wrap:wrap;row-gap:6px}html.fs-big .tv-foot .tv-mt{margin-left:auto}}
.tv-hero .trnote{color:rgba(240,232,214,.72);margin-top:6px;padding-left:0}
.tv-hero .trnote button{color:rgba(240,232,214,.86)}