/* Layout: full-bleed wabi-sabi wood diorama; HUD floats in the corners like paper placards */
:root{
  --panel:rgba(250,246,238,.92);
  --ink:#2b2622;
  --muted:#7a7066;
  --line:rgba(43,38,34,.12);
  --accent:#b5562f;
  --chip:#ece4d6;
  --chip-on:#2b2622;
  --chip-on-ink:#faf6ee;
  --scene:#dfe9ec;
  --font-display:"Huninn","Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --font-body:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  --font-mono:"DM Mono",ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --panel:rgba(30,27,24,.9);--ink:#f1ebe2;--muted:#b0a596;--line:rgba(255,255,255,.12);
  --accent:#e08a5e;--chip:#3a342e;--chip-on:#f1ebe2;--chip-on-ink:#1e1b18;--scene:#121726;color-scheme:dark}}
:root[data-theme="dark"]{
  --panel:rgba(30,27,24,.9);--ink:#f1ebe2;--muted:#b0a596;--line:rgba(255,255,255,.12);
  --accent:#e08a5e;--chip:#3a342e;--chip-on:#f1ebe2;--chip-on-ink:#1e1b18;--scene:#121726;color-scheme:dark}
[hidden]{display:none!important}
html,body{height:100%;touch-action:pan-x pan-y} /* the page itself never zooms: the scene has its own zoom */
body{background:var(--scene);color:var(--ink);font-family:var(--font-body);overflow:hidden;overscroll-behavior:none}
#app{position:fixed;inset:0}
#c{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
#c.dragging{cursor:grabbing}
#c.link{cursor:pointer}
.tip{position:fixed;left:0;top:0;z-index:7;pointer-events:none;padding:4px 9px;border-radius:7px;font-size:12px;line-height:1.4;white-space:nowrap;background:rgba(6,11,20,.9);color:#d8e6f5;border:1px solid #2a4a70;box-shadow:0 2px 8px rgba(0,0,0,.25)}
#labels{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;-webkit-user-select:none;user-select:none} /* its own layer: tags above zone labels, all of it under the cards */
.tag{position:absolute;left:0;top:0;white-space:nowrap;font-size:10px;font-weight:400;line-height:1.3;
  padding:1px 5px 1px 4px;border-radius:999px;background:rgba(250,246,238,.88);color:#2b2622;
  display:flex;align-items:center;gap:3px;will-change:transform;box-shadow:0 1px 3px rgba(40,30,20,.18);z-index:2}
.tag i{width:5px;height:5px;border-radius:50%;display:block;opacity:.8}
.tag .em{font-size:10px;line-height:1}
.tag.sel{opacity:1;background:var(--panel);color:var(--ink);outline:1.5px solid var(--accent)}
.tag.vip{background:rgba(246,220,138,.9);color:#4a360f;font-weight:500}
.zone{position:absolute;left:0;top:0;pointer-events:auto;cursor:pointer;touch-action:none;font-family:var(--font-display);font-size:11.5px;line-height:1.65;
  display:flex;align-items:stretch;padding:0 8px 0 0;border-radius:3px;background:rgba(48,38,31,.56);color:#fbf5ec;text-shadow:0 1px 2px rgba(0,0,0,.45);letter-spacing:.08em;white-space:nowrap;
  border:1px solid rgba(255,236,210,.18);box-shadow:0 1px 4px rgba(20,14,10,.18);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:1;transition:opacity .25s}
.zone.dim{opacity:.4} /* a person's name tag is passing over it */
.zone b{font-family:var(--font-mono);font-weight:500;font-size:10px;color:#fff;background:rgba(181,86,47,.72);letter-spacing:0;text-shadow:none;padding:0 5px;margin-right:6px;
  border-radius:2px 0 0 2px;display:flex;align-items:center}
.hud{position:absolute;inset:0;pointer-events:none;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr auto;gap:12px;
  padding-top:calc(14px + env(safe-area-inset-top,0px));padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
/* only the cards take the pointer; the empty parts of each HUD column let drags through to the scene */
.hud>*{pointer-events:none}
.hud .card{pointer-events:auto}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 6px 24px rgba(40,30,20,.12)}
.top-left{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap;align-self:start;min-width:0}
.brand{padding:10px 14px;display:flex;flex-direction:column;justify-content:center}
.brand h1{margin:0;font-family:var(--font-display);font-weight:400;font-size:22px;letter-spacing:.08em;color:var(--accent);line-height:1.1;display:flex;align-items:center;gap:5px}
.brand .info{font-family:var(--font-body);font-size:.62em;letter-spacing:0;color:var(--muted)}
.brand p{margin:2px 0 0;font-size:11px;color:var(--muted);letter-spacing:.08em}
.clock{padding:10px 14px;min-width:230px}
.clock .row{display:flex;align-items:baseline;gap:10px}
.clock .time{font-family:var(--font-mono);font-size:28px;line-height:1;font-variant-numeric:tabular-nums}
.phase{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700}
.phase i{width:8px;height:8px;border-radius:50%;display:block}
.clock .sub{font-size:11px;color:var(--muted);margin-top:4px}
.dayband{position:relative;height:8px;border-radius:4px;display:flex;margin-top:8px}
.dayband span{height:100%}
.db-pre{flex:3;background:#d9a066}.db-mkt{flex:4.5;background:#c4493a}.db-post{flex:2.5;background:#5a7fa8}.db-wrap{flex:2;background:#8a76a8}
#bHunger{background:#d39a3a}#bMood{background:#6f9a5a}
.dayband span:first-child{border-radius:4px 0 0 4px}.dayband span:nth-child(4){border-radius:0 4px 4px 0}
.daymark{position:absolute;top:-3px;width:3px;height:14px;border-radius:2px;background:var(--ink);transform:translateX(-1px)}
.daylabels{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:9px;color:var(--muted);margin-top:3px}
.top-right{display:flex;flex-direction:column;gap:8px;align-items:flex-end;align-self:start}
.toggles{display:flex;gap:4px;padding:5px}
.btn{font:inherit;font-size:12px;border:0;border-radius:8px;padding:6px 10px;background:var(--chip);color:var(--ink);cursor:pointer;white-space:nowrap}
.btn[aria-pressed="true"]{background:var(--chip-on);color:var(--chip-on-ink)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bottom-left{grid-column:1;grid-row:3;display:flex;flex-direction:column;gap:8px;align-self:end;min-width:0}
.controls{padding:6px;display:flex;flex-wrap:wrap;gap:4px;max-width:1120px}
.controls .sep{width:1px;background:var(--line);margin:2px 2px}
.person{padding:12px 14px;max-width:380px;display:flex;flex-direction:column;gap:6px}
.person .who{display:flex;align-items:center;gap:8px}
.person .who b{font-family:var(--font-display);font-weight:400;font-size:17px}
.person .dept{font-size:11px;padding:1px 8px;border-radius:999px;color:#fff}
.person .doing{font-size:13px}
.bars{display:grid;grid-template-columns:auto 1fr;gap:4px 8px;align-items:center;font-size:11px;color:var(--muted)}
.bar{height:6px;border-radius:3px;background:var(--chip);overflow:hidden}
.bar span{display:block;height:100%;border-radius:3px}
.person .x{margin-left:auto}
.bottom-right{grid-column:2;grid-row:3;align-self:end;justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:8px;min-width:0}
.log{width:330px;max-width:calc(100vw - 32px);padding:10px 12px}
.log h2{margin:0 0 6px;font-size:11px;letter-spacing:.14em;color:var(--muted);font-weight:500}
.log ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:12px;line-height:1.45}
.log li{display:flex;gap:8px;min-width:0}
.log time{font-family:var(--font-mono);color:var(--muted);font-size:11px;flex:none;padding-top:1px}
.log li span{min-width:0}
.toast{position:absolute;left:50%;top:calc(110px + env(safe-area-inset-top,0px));transform:translateX(-50%);padding:10px 14px;font-size:13px;max-width:min(420px,calc(100vw - 32px));text-align:center}
#logToggle{display:none}
.person .who{flex-wrap:wrap}
.fbtns{display:flex;gap:4px;margin-left:auto}
.fbtns .btn{padding:4px 8px;font-size:11.5px}
.fbtns+.x{margin-left:0}
.zinfo{padding:12px 14px;max-width:340px;display:flex;flex-direction:column;gap:9px;max-height:min(56vh,480px);overflow:auto}
.zinfo .who{display:flex;align-items:center;gap:8px}
.zinfo .who b{font-family:var(--font-display);font-weight:400;font-size:18px}
.zinfo .zno{font-family:var(--font-mono);font-size:11px;color:var(--accent)}
.zinfo .x{margin-left:auto}
.zinfo p{margin:0;font-size:13px;line-height:1.6}
.zinfo h3{margin:0 0 4px;font-size:11px;letter-spacing:.12em;color:var(--muted);font-weight:500}
.zinfo ul{margin:0;padding-left:18px;font-size:12.5px;line-height:1.65}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chip{font:inherit;font-size:12px;border:1px solid var(--line);background:var(--chip);color:var(--ink);border-radius:999px;padding:2px 9px;cursor:pointer}
.chip.off{opacity:.45}
.chip:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.brand{cursor:pointer}
.brand:hover h1 .nm{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.brand:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.about{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;width:min(660px,calc(100vw - 32px));max-height:min(82vh,760px);overflow:auto;
  padding:18px 20px 20px;display:flex;flex-direction:column;gap:0}
.about section{padding:14px 0;border-top:1px solid var(--line)}
.about section:last-child{padding-bottom:0}
.about .who{display:flex;align-items:center;gap:8px}
.about .who b{font-family:var(--font-display);font-weight:400;font-size:21px;color:var(--accent);letter-spacing:.06em}
.about .x{margin-left:auto}
.about h3{margin:0 0 8px;font-family:var(--font-display);font-size:17px;line-height:1.35;letter-spacing:.04em;color:var(--accent);font-weight:400}
.about p{margin:0;font-size:13px;line-height:1.75;color:var(--ink)}
.about p+p,.about p+div,.about div+p{margin-top:8px}
.about .vision{font-weight:700}
.about .note{color:var(--muted)}
.org,.projects{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.projects{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.org div,.projects div{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--chip)}
.org b,.projects b{font-size:13px;display:flex;align-items:center;gap:6px;font-weight:700;line-height:1.4}
.org b i{width:8px;height:8px;border-radius:50%;display:block;flex:none}
.org small,.projects small{display:block;font-size:12px;color:var(--muted);margin-top:4px;line-height:1.6}
.org small.names{color:var(--ink)}
.about .lead{margin:2px 0 14px;color:var(--muted);font-size:13px}
.org b{flex-wrap:wrap;row-gap:2px}
.org b .lead-by{margin-left:auto;font-weight:400;font-size:12px;color:var(--muted);white-space:nowrap}
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:10px 0}
.chain .step{font-size:12px;padding:3px 10px;border-radius:999px;background:var(--chip);border:1px solid var(--line)}
.chain .arrow{color:var(--accent);font-size:12px}
.daylist{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:13px;line-height:1.6}
.daylist span:nth-child(odd){font-family:var(--font-mono);color:var(--muted);white-space:nowrap}
@media (max-width:720px){
  .zone{font-size:9.5px;padding:0 4px 0 0;letter-spacing:.02em}
  .zone b{font-size:8px;padding:0 3px;margin-right:3px}
  .about{position:fixed;left:0;right:0;bottom:0;top:auto;transform:none;width:auto;max-height:78vh;border-radius:16px 16px 0 0;
    padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  .hud{grid-template-columns:1fr;grid-template-rows:auto 1fr auto auto;gap:8px}
  .top-right{grid-column:1;grid-row:2;flex-direction:row;align-self:start;justify-self:end}
  .bottom-right{grid-column:1;grid-row:3;justify-self:stretch;align-items:stretch}
  .bottom-left{grid-row:4}
  .brand h1{font-size:18px}
  .brand p{display:none}
  .brand,.clock{padding:8px 12px}
  .clock{min-width:0;flex:1}
  .clock .time{font-size:22px}
  .clock .sub{display:none}
  .log{width:auto;padding:8px 12px}
  .log h2{margin:0;display:flex;align-items:center;justify-content:space-between}
  .log[data-collapsed="false"] h2{margin-bottom:6px}
  .log[data-collapsed="true"] ol{display:none}
  #logToggle{display:inline-block}
  .person,.zinfo{max-width:none;position:fixed;left:0;right:0;bottom:0;z-index:5;border-radius:16px 16px 0 0;
    padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .zinfo{max-height:55vh}
  .controls{flex-wrap:nowrap;overflow-x:auto;max-width:none;scrollbar-width:none}
  .controls .btn{flex:none}
}

/* a phone held sideways (wide but short): the same compact cards as on a phone, so the scene is not buried under them */
@media (max-height:520px) and (min-width:721px){
  .zone{font-size:9.5px;padding:0 4px 0 0;letter-spacing:.02em}
  .zone b{font-size:8px;padding:0 3px;margin-right:3px}
  .hud{gap:6px}
  .brand h1{font-size:18px}
  .brand p{display:none}
  .brand,.clock{padding:6px 12px}
  .clock .time{font-size:22px}
  .clock .sub{display:none}
  .log{width:240px;padding:6px 12px}
  .log h2{margin:0;display:flex;align-items:center;justify-content:space-between}
  .log[data-collapsed="false"] h2{margin-bottom:6px}
  .log[data-collapsed="true"] ol{display:none}
  #logToggle{display:inline-block}
  .controls{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .controls .btn{flex:none}
  .person,.zinfo{max-height:80vh;overflow:auto}
}

/* phones (portrait, or held sideways): every card folds into one menu button, and the log floats in a corner without a box */
.menu-btn{display:none}
.feed{display:flex;flex-direction:column;align-items:flex-start;gap:3px;position:absolute;z-index:4;pointer-events:none}
.feed div{animation:feedLife 9s ease forwards;font-size:12px;line-height:1.35;color:#fff;text-shadow:0 1px 2px #000,0 0 4px rgba(0,0,0,.85)}
.feed div.hint{animation-duration:14s;color:#ffe7b8}
.feed div:not(:last-child) span{opacity:.55}
@media (max-width:720px), (max-height:520px){
  .menu-btn{display:flex;align-items:center;gap:6px;position:absolute;z-index:6;pointer-events:auto;cursor:pointer;font:inherit;color:var(--ink);
    top:calc(var(--bar,0px) + 10px + env(safe-area-inset-top,0px));right:max(12px,env(safe-area-inset-right,0px));height:40px;padding:0 14px;border-radius:999px}
  .menu-btn .mi{font-size:17px;line-height:1}
  .menu-btn #menuTime{font-family:var(--font-mono);font-size:13px}
  .hud[data-menu="closed"] .top-left,.hud[data-menu="closed"] .top-right,.hud[data-menu="closed"] .controls,.hud .log{display:none}
  .menu-btn[aria-expanded="true"]{width:40px;padding:0;justify-content:center} /* opened: only its ✕ stays where it stood */
  .menu-btn[aria-expanded="true"] #menuTime{display:none} /* the clock card shows the time */
  .hud[data-menu="open"] .top-left{margin-right:50px} /* the cards start on the button's line, clear of the ✕ */
  .feed{max-width:min(78vw,420px);left:max(12px,env(safe-area-inset-left,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .hud[data-menu="open"] ~ .feed{display:none}
  .toast{display:none!important}
}
/* held sideways the screen is short: opened, the cards, the clock and the toggles share one slim line left of the ✕, nothing below */
@media (max-height:520px) and (min-width:721px){
  .menu-btn{top:calc(var(--bar,0px) + 16px + env(safe-area-inset-top,0px))} /* level with the cards */
  .hud[data-menu="open"] .top-left{margin-right:0}
  .hud[data-menu="open"] .top-right{margin-right:50px}
  .daylabels{display:none}
  .dayband{margin-top:6px}
}
@keyframes feedLife{0%{opacity:0;transform:translateY(8px)}5%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0}}

/* a computer: the brand and the clock read as one slim strip, and the log folds to its title with new lines floating above it */
@media (min-width:721px) and (min-height:521px){
  .top-left{gap:0;flex-wrap:nowrap;justify-self:start;border-radius:12px;box-shadow:0 6px 24px rgba(40,30,20,.12)}
  .top-left>.card{box-shadow:none}
  .brand{border-radius:12px 0 0 12px;border-right:0;padding:6px 14px}
  .brand h1{font-size:18px}
  .brand p{display:none}
  .clock{border-radius:0 12px 12px 0;min-width:250px;padding:7px 14px 9px;position:relative}
  .clock .row{gap:8px}
  .clock .time{font-size:22px}
  .dayband{height:5px;margin-top:7px}
  .daymark{top:-3px;height:11px}
  .daylabels{display:none}
  .clock .sub{display:none;position:absolute;left:0;top:calc(100% + 6px);z-index:2;white-space:nowrap;margin:0;padding:6px 10px;font-size:11.5px;color:var(--ink);
    background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:0 4px 14px rgba(40,30,20,.16)}
  .clock:hover .sub{display:block}
  .log{width:auto;padding:5px 6px 5px 12px}
  .log h2{margin:0;display:flex;align-items:center;gap:10px}
  .log[data-collapsed="true"] ol{display:none}
  .log[data-collapsed="false"]{width:330px}
  .log[data-collapsed="false"] h2{margin-bottom:6px;justify-content:space-between}
  #logToggle{display:inline-block;padding:4px 9px}
  .feed{align-items:flex-start;max-width:min(40vw,440px);right:max(16px,env(safe-area-inset-right,0px));bottom:calc(62px + env(safe-area-inset-bottom,0px))}
  .feed div{font-size:13px;line-height:1.4}
  .hud:has(.log[data-collapsed="false"]) ~ .feed{display:none}
}

#pDoing{white-space:pre-line}

/* war room top bar: from 721 px wide the same bar as the war room's pages (app.css .v10-top), measure for measure */
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/IBMPlexMono-Regular.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/IBMPlexMono-Medium.woff2") format("woff2")}
/* the war room's page: at most 1680 px wide, centred, 16 px in; its pages scroll, so the room its scrollbar takes (--wr-sb, measured
   in office.js) is left on the right as well */
.wr-top{--wr-in:max(16px,env(safe-area-inset-left,0px),calc((100vw - var(--wr-sb,0px) - 1680px) / 2 + 16px));--wr-out:calc(var(--wr-in) + var(--wr-sb,0px));
  position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;gap:20px;min-width:0;
  padding:calc(14px + env(safe-area-inset-top,0px)) var(--wr-out) 14px var(--wr-in);border-bottom:1px solid transparent;
  background:#060b14} /* opaque and unblurred, the war room's page colour: a blurred layer turns Chrome's text to greyscale smoothing */
.wr-top::before{content:"";position:absolute;left:var(--wr-in);right:var(--wr-out);bottom:0;height:0;border-bottom:1px solid #1b3452} /* a border, so it is one device pixel like the war room's */
.wr-top::after{content:"";position:absolute;left:calc(var(--wr-in) + (100% - var(--wr-in) - var(--wr-out)) * .3);right:calc(var(--wr-out) + (100% - var(--wr-in) - var(--wr-out)) * .3);
  bottom:-1px;height:2px;background:linear-gradient(90deg,transparent,#45d4ff,transparent)}
.sb-probe{position:absolute;top:-200px;left:0;width:100px;height:100px;overflow:scroll;visibility:hidden}
.wr-brand{font-family:"Noto Serif TC","Songti TC","PMingLiU",serif;font-size:22px;font-weight:900;letter-spacing:.12em;color:#d8e6f5;text-decoration:none;line-height:1.25;white-space:nowrap}
.wr-brand small{display:block;font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace;font-size:10px;letter-spacing:.298em;margin-right:-.298em;color:#45d4ff;font-weight:500}
/* the subtitle's ends line up with the Chinese: (Chinese width - letters x 0.6em) / (letters - 1), and the spacing CSS adds after
   the last letter is taken back by the negative margin. 微魚創意投資公司 22px .12em over 22 letters: .298em */
.wr-brand .b-short{display:none}
.wr-tabs{display:flex;align-items:center;gap:4px;min-width:0;overflow-x:auto;scrollbar-width:none} /* centred: the lead tab is taller than the rest */
.wr-tabs a{font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;line-height:1.65;color:#7b90aa;text-decoration:none;padding:6px 14px;font-size:13px;white-space:nowrap;border:1px solid transparent}
.wr-tabs a:hover{color:#d8e6f5}
.wr-tabs a[aria-current="page"]{color:#d8e6f5;border-color:#27507a;background:linear-gradient(180deg,rgba(69,212,255,.12),transparent);clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.wr-tabs a:focus-visible{outline:2px solid #45d4ff;outline-offset:2px}
/* the war room group: 戰情室 leads, its three rooms hang off a lane drawn from the lead tab's lower right. The office is never one of
   them, so here the group always shows unlit */
.wr-fleet{display:flex;align-items:center;margin-left:10px}
/* 辦公室 and 戰情室 are one level: both take the war room's lead tab style, on the 13px tab's line box (13 x 1.65) so every tab is 34.59 tall */
.wr-tabs>a[href="/office"],.wr-tabs .wr-main{font-size:14px;font-weight:700;letter-spacing:.08em;line-height:21.45px}
.wr-tabs>a[href="/office"]:not([aria-current]),.wr-tabs .wr-main:not([aria-current]){color:#a9bdd4}
.wr-tabs>a[href="/office"]:not([aria-current]):hover,.wr-tabs .wr-main:not([aria-current]):hover{color:#d8e6f5}
.wr-subs{display:flex;align-items:center;position:relative;padding-left:12px}
.wr-subs::before{content:"";position:absolute;left:-8px;right:4px;bottom:3px;height:1px;background:linear-gradient(90deg,#2a4f78,#2a4f78 80%,transparent)}
.wr-tabs .wr-subs a{position:relative;font-size:12px;padding:6px 11px 6px 15px;color:#6f86a2;letter-spacing:.04em;line-height:21.45px}
.wr-tabs .wr-subs a:hover{color:#d8e6f5}
.wr-subs a::before{content:"";position:absolute;left:4px;bottom:1px;width:5px;height:5px;transform:rotate(45deg);background:#060b14;border:1px solid #2f5a86}
/* up to 1279 px the war room's bar would need a second line for the full name: 微魚創投, its subtitle spaced to it (22px .12em over
   8 letters: .6846em) */
@media (max-width:1279px){
  .wr-brand .b-full{display:none}
  .wr-brand span.b-short{display:inline}
  .wr-brand small.b-short{display:block;letter-spacing:.6846em;margin-right:-.6846em}
}
body.in-warroom .hud{padding-top:calc(85px + env(safe-area-inset-top,0px))}
body.in-warroom .toast{top:calc(179px + env(safe-area-inset-top,0px))}
body.in-warroom{--bar:69px} /* the menu button of a phone held sideways sits below it */
@media (min-width:721px){ body.in-warroom .about{top:calc(50% + var(--bar) / 2);max-height:min(760px,calc(100vh - var(--bar) - 72px))} } /* centred in the room below the bar, 16px clear of it above and the window below (the 40px of padding and border on top of max-height) (phones: a sheet from the bottom) */
/* phones: the war room's phone bar, 微魚創投 over WEIYU VC (14px .06em over 8 letters of 8px: .359em), all five tabs on one line at 360 px and up */
@media (max-width:720px){
  .wr-top{gap:8px;padding:calc(8px + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) 8px max(12px,env(safe-area-inset-left,0px));border-bottom-color:#1b3452}
  .wr-top::before,.wr-top::after{display:none}
  .wr-brand{font-family:inherit;font-size:14px;letter-spacing:.06em;line-height:1.2}
  .wr-brand small.b-short{font-size:8px;letter-spacing:.359em;margin-right:-.359em;line-height:1.1;margin-top:1px}
  .wr-tabs{gap:2px;overflow:visible}
  .wr-tabs a{font-family:inherit;line-height:15.8px;padding:5px 7px;font-size:12px} /* one line box for every tab, as the war room's: 26.95 tall */
  .wr-tabs a[aria-current="page"]{border-color:#2a4a70;background:linear-gradient(180deg,rgba(69,212,255,.14),transparent)}
  .wr-tabs>a[href="/office"],.wr-tabs .wr-main{font-size:12.5px;letter-spacing:.04em;line-height:15.8px}
  .wr-fleet{margin-left:4px}
  .wr-subs{padding-left:5px}
  .wr-subs::before{left:-6px;bottom:2px}
  .wr-tabs .wr-subs a{font-size:11.5px;padding:5px 5px 5px 10px;letter-spacing:0;line-height:15.8px}
  .wr-subs a::before{left:2px;bottom:0;width:4px;height:4px}
  body.in-warroom .hud{padding-top:calc(52px + env(safe-area-inset-top,0px))}
  body.in-warroom .toast{top:calc(160px + env(safe-area-inset-top,0px))}
  body.in-warroom{--bar:45px}
}
@media (max-width:370px){ .wr-tabs a{padding:5px 5px} .wr-tabs .wr-subs a{padding:5px 4px 5px 9px} }
@media (max-width:359px){ .wr-tabs{overflow-x:auto} } /* narrower than 360: the tabs scroll on their own line, the page never does */