:root{
  --jade:#3D6B5A; --jade-d:#33604F; --jade-dd:#2A5243; --chalk:#F1F6EE; --mute:#BFD2C6; --wire:rgba(241,246,238,.34);
  --wire-s:rgba(241,246,238,.16); --lime:#D4FF4F; --lime-ink:#1E3328; --rose:#FFB8A8;
  --disp:"ZCOOL QingKe HuangYou","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  --txt:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --rail:46px;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{background:var(--jade)}
body{
  background-color:var(--jade); color:var(--chalk); font:400 15px/1.55 var(--txt);
  background-image:linear-gradient(var(--wire-s) 1px,transparent 1px),linear-gradient(90deg,var(--wire-s) 1px,transparent 1px);
  background-size:28px 28px; background-position:-1px -1px;
  padding:12px 12px 32px calc(var(--rail) + 12px); min-height:100vh; overflow-x:hidden;
}
a{color:inherit}
code{font-family:var(--mono)}

/* ---------- the CA rail: fixed on the left edge at every width ---------- */
.qun-rail{
  position:fixed; left:0; top:150px; width:var(--rail); z-index:30;
  display:flex; flex-direction:column; align-items:center; gap:8px; padding:8px 0 10px;
  background:var(--jade-dd); border:1px dashed var(--lime); border-left:0; border-radius:0 12px 12px 0;
}
.qun-rail-k{font:400 15px/1 var(--disp); color:var(--lime); writing-mode:vertical-rl; letter-spacing:.2em}
.qun-rail-addr{writing-mode:vertical-rl; font:600 10.5px/1 var(--mono); color:var(--chalk); user-select:all; word-break:keep-all; white-space:nowrap; letter-spacing:.01em}
.qun-rail-copy{
  writing-mode:vertical-rl; background:var(--lime); color:var(--lime-ink); border:0; border-radius:8px;
  padding:9px 6px; font:700 11px/1 var(--txt); letter-spacing:.12em; cursor:pointer;
}
.qun-rail-copy:disabled{background:transparent; color:var(--mute); border:1px dashed var(--wire); cursor:default}
.qun-rail-copy.is-done{background:var(--chalk)}
.qun-rail-say{display:none}
.qun-rail-gm{display:none}

/* ---------- the group title ---------- */
.qun-title{margin-bottom:10px}
.qun-title-row{display:flex; align-items:center; gap:8px; height:34px; border-bottom:1px solid var(--wire); padding-bottom:4px}
.qun-title-ava{width:26px; height:26px; border-radius:7px; border:1px solid var(--wire)}
.qun-title-name{font:500 14px/1 var(--txt); white-space:nowrap}
.qun-title-name i{font-style:normal; color:var(--lime); font-family:var(--mono); font-size:12px}
.qun-title-nav{margin-left:auto; display:flex; gap:10px; font-size:12px}
.qun-title-nav a{text-decoration:none; color:var(--mute); padding:3px 0; border-bottom:1px solid transparent}
.qun-title-nav a.is-on{color:var(--chalk); border-color:var(--lime)}
.qun-h1{font:400 28px/1.1 var(--disp); margin-top:10px; letter-spacing:.02em}

/* ---------- the jar ---------- */
.qun-room{display:grid; gap:12px}
.qun-jarcard{border:1px solid var(--wire); border-radius:14px; padding:12px; background:rgba(42,82,67,.55)}
.qun-jarhead{display:flex; justify-content:space-between; font:500 13px/1 var(--txt); color:var(--mute)}
.qun-jarhead span:first-child{font:400 18px/1 var(--disp); color:var(--chalk)}
.qun-jarwrap{display:grid; grid-template-columns:1.25fr 1fr; align-items:center; gap:6px; margin-top:6px}
.qun-jar{width:100%; height:auto; display:block}
.qun-jar .jw{fill:none; stroke:var(--chalk); stroke-width:1.4; opacity:.85}
.qun-jar .jw-d{fill:none; stroke:var(--wire); stroke-width:1; stroke-dasharray:4 4}
.qun-jar .js{fill:transparent; stroke:var(--wire); stroke-width:1.2}
.qun-jar .js-on{fill:var(--lime); stroke:var(--lime)}
.qun-jar .js-next{fill:transparent; stroke:var(--lime); stroke-width:2; stroke-dasharray:3 3; animation:qunBlink 1.2s steps(2) infinite}
.qun-jar .js-new{animation:qunPop .7s ease-out}
.qun-jar .jn{font:600 9px var(--mono); fill:var(--mute); text-anchor:middle; dominant-baseline:central}
.qun-jar .jn-on{fill:var(--lime-ink)}
.qun-jar .jn-next{fill:var(--lime)}
@keyframes qunBlink{50%{opacity:.25}}
@keyframes qunPop{0%{transform-box:fill-box; transform-origin:center; transform:scale(.3)}100%{transform-box:fill-box; transform-origin:center; transform:scale(1)}}
.qun-pot{display:flex; flex-direction:column; align-items:flex-start}
.qun-pot b{font:600 30px/1 var(--mono); color:var(--lime); letter-spacing:-.02em}
.qun-pot span{font:500 12px/1.4 var(--mono); color:var(--mute)}
.qun-line{font:500 15px/1.5 var(--txt); margin-top:8px}
.qun-line em{font-style:normal; color:var(--lime); font-family:var(--mono)}
.qun-meter{height:6px; border:1px solid var(--wire); border-radius:6px; margin-top:8px; overflow:hidden}
.qun-meter i{display:block; height:100%; width:0; background:var(--lime); transition:width .6s ease}

/* ---------- the chat ---------- */
.qun-pane{border:1px solid var(--wire); border-radius:14px; background:rgba(42,82,67,.55); display:flex; flex-direction:column; min-width:0}
.qun-pane-head{display:flex; align-items:baseline; gap:8px; padding:10px 12px; border-bottom:1px dashed var(--wire)}
.qun-pane-head b{font:400 18px/1 var(--disp)}
.qun-pane-head span{font-size:12px; color:var(--mute)}
.qun-feed{list-style:none; padding:10px 12px; display:flex; flex-direction:column; gap:10px; max-height:460px; overflow-y:auto}
.qun-msg{display:grid; grid-template-columns:30px 1fr; gap:8px; animation:qunIn .35s ease-out}
@keyframes qunIn{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
.qun-ava{width:30px; height:30px; border-radius:8px; display:grid; place-items:center; font:600 10px/1 var(--mono); color:var(--lime-ink)}
.qun-who{font:500 11px/1.2 var(--mono); color:var(--mute); margin-bottom:3px}
.qun-who a{text-decoration:none}
.qun-bub{display:inline-block; max-width:100%; background:var(--chalk); color:var(--lime-ink); border-radius:4px 12px 12px 12px; padding:7px 10px; font-size:14px; line-height:1.45; word-break:break-word}
.qun-bub b{font-family:var(--mono)}
.qun-bub.is-off{background:transparent; color:var(--mute); border:1px dashed var(--wire)}
.qun-sys{align-self:center; text-align:center; max-width:94%; font-size:12px; line-height:1.5; color:var(--chalk); border:1px solid var(--wire); border-radius:10px; padding:6px 10px; background:var(--jade-dd)}
.qun-sys.is-win{border-color:var(--lime); color:var(--lime)}
.qun-sys code{font-size:10.5px; color:var(--mute); word-break:break-all}
.qun-sys a{color:var(--mute)}
.qun-panebody{padding:12px; font-size:14px}
.qun-composer{display:flex; gap:8px; align-items:center; padding:10px 12px; border-top:1px dashed var(--wire)}
.qun-composer-in{flex:1; font-size:12px; color:var(--mute); border:1px solid var(--wire); border-radius:18px; padding:8px 12px; line-height:1.4}
.qun-composer-go{background:var(--lime); color:var(--lime-ink); text-decoration:none; font-weight:700; font-size:13px; border-radius:18px; padding:8px 14px; white-space:nowrap}

/* ---------- lists in the pane (jars, rules, wallet) ---------- */
.qun-jarrow{border:1px solid var(--wire); border-radius:10px; padding:10px; margin-bottom:10px}
.qun-jarrow h3{font:400 18px/1.2 var(--disp); margin-bottom:4px}
.qun-jarrow p{font-size:13px; color:var(--mute); word-break:break-all}
.qun-jarrow p b{color:var(--chalk); font-family:var(--mono)}
.qun-jarrow ol{list-style:none; display:grid; grid-template-columns:repeat(6,1fr); gap:3px; margin-top:8px}
.qun-jarrow li{font:500 9.5px/1 var(--mono); border:1px solid var(--wire-s); border-radius:4px; padding:4px 2px; text-align:center; color:var(--mute); overflow:hidden}
.qun-jarrow li.is-win{border-color:var(--lime); color:var(--lime-ink); background:var(--lime)}
.qun-rule{margin-bottom:12px}
.qun-rule h3{font:400 20px/1.2 var(--disp); color:var(--lime); margin-bottom:4px}
.qun-rule p{color:var(--chalk); font-size:14px}
.qun-empty{color:var(--mute); font-size:13px; border:1px dashed var(--wire); border-radius:10px; padding:12px}

/* ---------- the worked example ---------- */
.qun-ex{border:1px dashed var(--wire); border-radius:14px; padding:12px}
.qun-ex h2{font:400 20px/1.2 var(--disp); margin-bottom:6px}
.qun-ex p{font-size:14px; color:var(--chalk)}
.qun-ex-f{font:500 12px/1.5 var(--mono)!important; color:var(--lime)!important; margin-top:8px; word-break:break-word}
.qun-ex-s{font-size:12px!important; color:var(--mute)!important; margin-top:6px}

/* ---------- footer ---------- */
.qun-foot{margin-top:18px; border-top:1px solid var(--wire); padding-top:12px; font-size:12px; color:var(--mute); display:grid; gap:6px}
.qun-foot span{display:inline-block; min-width:64px}
.qun-foot code{font-size:11px; word-break:break-all; color:var(--chalk)}
.qun-foot-links{display:flex; gap:14px}
.qun-toast{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); background:var(--lime); color:var(--lime-ink); font-weight:700; font-size:13px; padding:8px 16px; border-radius:18px; z-index:40}

/* ---------- 720–1000: one column, wider measure, larger object ---------- */
@media (min-width:720px){
  :root{--rail:54px}
  body{padding:22px 28px 40px calc(var(--rail) + 28px); font-size:16px}
  .qun-rail{top:190px}
  .qun-rail-addr{font-size:12px}
  .qun-h1{font-size:40px}
  .qun-title-name{font-size:16px}
  .qun-title-nav{font-size:14px; gap:16px}
  .qun-jarcard{padding:18px}
  .qun-jarwrap{grid-template-columns:1.3fr 1fr; gap:18px}
  .qun-pot b{font-size:52px}
  .qun-line{font-size:18px}
  .qun-feed{max-height:520px}
  .qun-room,.qun-title,.qun-foot{max-width:860px}
}

/* ---------- ≥1000: rail becomes a full-height column; jar left, chat right ---------- */
@media (min-width:1000px){
  :root{--rail:270px}
  body{padding:28px 40px 48px calc(var(--rail) + 40px)}
  .qun-rail{
    top:0; bottom:0; height:100vh; width:var(--rail); border:0; border-right:1px dashed var(--lime); border-radius:0;
    align-items:stretch; justify-content:center; gap:14px; padding:28px 24px;
  }
  .qun-rail-k,.qun-rail-addr,.qun-rail-copy{writing-mode:horizontal-tb}
  .qun-rail-k{font-size:26px; letter-spacing:.1em}
  .qun-rail-addr{white-space:normal; word-break:break-all; font-size:15px; line-height:1.45; border:1px solid var(--wire); border-radius:10px; padding:12px}
  .qun-rail-addr.is-wait{word-break:normal; color:var(--mute)}
  .qun-rail-copy{padding:12px; font-size:14px; letter-spacing:.06em}
  .qun-rail-say{display:block; font:400 20px/1.3 var(--disp); color:var(--chalk)}
  .qun-rail-gm{display:block; font-size:13px; color:var(--mute)}
  .qun-rail-gm[hidden]{display:none!important}
  .qun-title,.qun-room,.qun-foot{max-width:1180px}
  .qun-h1{font-size:44px}
  .qun-room{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); grid-template-areas:"jar pane" "ex pane"; grid-template-rows:auto 1fr; align-items:start; gap:20px}
  .qun-jarcard{grid-area:jar}
  .qun-pane{grid-area:pane; position:sticky; top:20px; max-height:calc(100vh - 40px)}
  .qun-feed{max-height:none; flex:1; min-height:360px}
  .qun-ex{grid-area:ex}
  .qun-pot b{font-size:58px}
}
@media (min-width:1400px){
  .qun-h1{font-size:50px}
  .qun-jarwrap{gap:28px}
}