/* Giga Desk. One console: the screen the manager works on.
   Flat graphic built to art/ref/reference-console.jpg: hairline frames, inverted chips,
   dotted rules, a status word in every panel head. Amber instead of the reference's phosphor. */

@font-face{font-family:"Tabular";src:url("/fonts/Tabular-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Tabular";src:url("/fonts/Tabular-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Intel One";src:url("/fonts/IntelOneMono-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Intel One";src:url("/fonts/IntelOneMono-Bold.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --bg:#0A0806;
  --bg2:#100C08;
  --bg3:#17110A;
  --line:#5A431B;
  --line2:#33250F;
  --amber:#F0A638;
  --hi:#FFC96B;
  --bone:#F2E9D8;
  --mute:#A68B58;
  --red:#E2502F;
  --pad:32px;
  --gap:14px;
  --display:"Tabular",ui-monospace,monospace;
  --mono:"Intel One",ui-monospace,"Cascadia Mono",monospace;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);scrollbar-gutter:stable}
body{
  margin:0;background:var(--bg);color:var(--amber);
  font:400 18px/1.5 var(--mono);font-synthesis:none;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}
/* even scan rows over the whole field, 1 px on 4, and the glass corners */
body::before{
  content:"";position:fixed;inset:0;z-index:60;pointer-events:none;
  background:
    radial-gradient(130% 100% at 50% 50%,rgba(0,0,0,0) 55%,rgba(0,0,0,.55) 100%),
    repeating-linear-gradient(to bottom,rgba(255,201,107,.035) 0 1px,rgba(0,0,0,0) 1px 4px);
}
img{display:block;max-width:100%;height:auto}
code,kbd{font-family:var(--mono)}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul{list-style:none;padding:0}
a{color:var(--amber);text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--hi);outline-offset:3px}
::selection{background:var(--amber);color:#120B03}

.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--amber);color:#120B03;padding:14px 20px}
.skip:focus{left:14px;top:14px}

/* ---------- the console frame ------------------------------------------- */
.deck{
  max-width:2040px;margin:0 auto;padding:18px 18px 28px;
  display:flex;flex-direction:column;gap:var(--gap);
}

/* a panel: double hairline, head with a status word, 28 px body */
.panel{border:1px solid var(--line);background:var(--bg2);position:relative;min-width:0}
.panel::after{content:"";position:absolute;inset:3px;border:1px solid var(--line2);pointer-events:none}
.panel__head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px var(--pad);border-bottom:1px solid var(--line);background:var(--bg3);
  position:relative;z-index:1;
}
.panel__label{font:400 16px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
.panel__state{font:400 16px/1.2 var(--mono);letter-spacing:.1em;color:var(--mute);text-align:right;max-width:52%}
.panel__state[data-on="live"]{color:#120B03;background:var(--hi);padding:11px 16px}
.panel__state[data-on="alert"]{color:var(--red)}
.panel__body{padding:var(--pad);position:relative;z-index:1}
.panel__foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px var(--pad);border-top:1px solid var(--line2);
  font:400 16px/1.2 var(--mono);letter-spacing:.08em;color:var(--mute);position:relative;z-index:1;
}

/* ---------- band 1: the three channels the money runs in ----------------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) 352px;gap:var(--gap)}
.split__cells{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.cell{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;
  border:1px solid var(--line);background:var(--bg2);padding:22px 32px;min-width:0;
}
.cell__n{font:700 40px/1 var(--display);color:var(--line);letter-spacing:.02em}
.cell__text{min-width:0}
.cell__name{font:400 18px/1.25 var(--mono);color:var(--bone);letter-spacing:.02em}
.cell__sub{font:400 16px/1.3 var(--mono);color:var(--mute);margin-top:4px}
.cell__right{text-align:right;display:flex;flex-direction:column;gap:4px;min-width:130px}
.cell__pct{font:700 28px/1 var(--display);color:var(--amber)}
.cell__val{font:500 16px/1.2 var(--display);color:var(--mute);white-space:nowrap}
.ident{
  border:1px solid var(--line);background:var(--bg3);padding:16px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0;
}
.ident__name{font:700 clamp(26px,2vw,34px)/1 var(--display);color:var(--bone);letter-spacing:.01em;white-space:nowrap}
.ident__tick{font:700 20px/1 var(--display);color:#120B03;background:var(--amber);padding:14px 20px;white-space:nowrap}

/* under 1680 the figure moves under the name: three cells and the ident do not
   fit side by side any other way without squeezing the text into its own padding */
@media (max-width:1680px){
  .cell{grid-template-columns:auto minmax(0,1fr);row-gap:10px}
  .cell__right{grid-column:2;flex-direction:row;align-items:baseline;gap:14px;text-align:left;min-width:0}
  .cell__val{white-space:normal}
}

/* ---------- band 2: what it is, and the shift ---------------------------- */
.premise{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px;
  border:1px solid var(--line);background:var(--bg2);padding:18px var(--pad);
}
.premise__line{font:400 18px/1.45 var(--mono);color:var(--bone);max-width:112ch}
.premise__state{display:flex;align-items:center;gap:12px;font:400 16px/1.2 var(--mono);letter-spacing:.1em;color:var(--mute);white-space:nowrap}
.dot{width:10px;height:10px;background:var(--line);flex:none;animation:idle 3.4s steps(2,end) infinite}
@keyframes idle{0%,70%{opacity:1}71%,100%{opacity:.3}}
.dot[data-on="live"]{background:var(--hi);animation:beat 2.2s steps(2,end) infinite}
@keyframes beat{0%,60%{opacity:1}61%,100%{opacity:.35}}

/* ---------- the three columns -------------------------------------------- */
.body{display:grid;grid-template-columns:318px minmax(0,1fr) 352px;gap:var(--gap);align-items:start}

/* channels */
.rail{display:flex;flex-direction:column;gap:var(--gap);position:sticky;top:18px}
.drawer-key{display:none}
.rail__list{display:flex;flex-direction:column;gap:var(--gap)}
.chan{
  display:grid;grid-template-columns:64px 1fr;grid-template-rows:auto auto auto;
  column-gap:20px;row-gap:2px;align-items:center;
  border:1px solid var(--line2);background:var(--bg2);padding:20px 24px;
}
.chan__sigil{grid-row:1/4;width:64px;height:64px;opacity:.7;image-rendering:auto}
.chan__code{font:400 16px/1.2 var(--mono);letter-spacing:.14em;color:#120B03;background:var(--line);padding:12px 16px;justify-self:start}
.chan__name{font:700 26px/1.1 var(--display);color:var(--bone)}
.chan__sub{font:400 16px/1.25 var(--mono);color:var(--mute);overflow-wrap:anywhere}
.chan:hover{border-color:var(--line);background:var(--bg3)}
.chan:hover .chan__sigil{opacity:1}
.chan[aria-current="page"]{border-color:var(--amber);background:var(--bg3)}
.chan[aria-current="page"] .chan__code{background:var(--amber)}
.chan[aria-current="page"] .chan__sigil{opacity:1}
.chan[aria-current="page"] .chan__name{color:var(--hi)}

/* stage */
.stage{display:flex;flex-direction:column;gap:var(--gap);min-width:0}

/* instruments */
.gauges{display:flex;flex-direction:column;gap:var(--gap)}
.gauge .panel__body{padding:22px var(--pad) var(--pad)}
.gauge__read{display:flex;align-items:baseline;gap:10px;margin-top:14px}
.gauge__big{font:700 34px/1 var(--display);color:var(--bone);font-variant-numeric:tabular-nums}
.gauge__unit{font:400 16px/1 var(--mono);letter-spacing:.14em;color:var(--mute)}
.gauge__note{font:400 16px/1.4 var(--mono);color:var(--mute);margin-top:12px}
canvas{display:block;width:100%}

/* ---------- the manager's own file --------------------------------------- */
.mfile{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) minmax(0,1fr);gap:0;
  border:1px solid var(--line);background:var(--bg2);
}
.mfile>*{padding:var(--pad);min-width:0}
.mfile__coin{border-left:1px solid var(--line2);border-right:1px solid var(--line2)}
.mfile__who{display:grid;grid-template-columns:132px 1fr;gap:24px;align-items:start}
.mfile__portrait{width:132px;height:132px;border:1px solid var(--line2)}
.mfile__role{font:400 16px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.mfile__name{font:700 40px/1.05 var(--display);color:var(--bone);margin:6px 0 10px}
.mfile__chip{display:inline-block;font:700 18px/1 var(--display);color:#120B03;background:var(--amber);padding:13px 18px}
.mfile__job{font:400 16px/1.45 var(--mono);color:var(--mute);margin-top:12px}
.field__label{display:block;font:400 16px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:12px}
.mint{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:stretch}
.mint__value--waiting::after{content:"";display:inline-block;width:10px;height:19px;margin-left:2px;background:var(--line);animation:caret 1.3s steps(2,end) infinite}
@keyframes caret{0%,50%{opacity:1}51%,100%{opacity:0}}
.mint__value{
  display:flex;align-items:center;min-width:0;min-height:52px;padding:10px 18px;
  border:1px solid var(--line2);background:#070503;color:var(--bone);
  font:400 17px/1.35 var(--mono);overflow-wrap:anywhere;user-select:all;
}
.links{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.mfile__risk{font:400 16px/1.4 var(--mono);color:var(--mute);margin-top:16px}
.say{font:400 18px/1.5 var(--mono);color:var(--bone);min-height:81px}
.say__wave{margin-top:12px;opacity:.85}

/* ---------- keys ---------------------------------------------------------- */
.key{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:12px 22px;border:1px solid var(--line);background:var(--bg3);
  color:var(--amber);font:400 17px/1.2 var(--mono);letter-spacing:.04em;text-align:center;cursor:pointer;
  transition:background .12s steps(2,end),color .12s steps(2,end);
}
.key:hover:not([disabled]):not([aria-disabled="true"]){background:var(--amber);color:#120B03;border-color:var(--amber)}
.key:hover:not([disabled]):not([aria-disabled="true"]) img{filter:invert(1)}
.key:active:not([disabled]):not([aria-disabled="true"]){background:var(--hi)}
.key[disabled],.key[aria-disabled="true"]{color:var(--line);border-color:var(--line2);cursor:not-allowed;background:var(--bg2)}
.key[disabled] img,.key[aria-disabled="true"] img{opacity:.3}
.key--primary{background:var(--amber);color:#120B03;border-color:var(--amber);font-weight:700;min-height:56px}
.key--primary:hover:not([disabled]){background:var(--hi)}
.key--primary[disabled]{background:var(--bg2);color:var(--line);font-weight:400}
.key--wide{width:100%}
.key img{flex:none}

/* ---------- parts used inside the stage ----------------------------------- */
.brief__top{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:18px}
.tag{display:inline-block;font:400 16px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#120B03;background:var(--amber);padding:13px 18px}
.tag--quiet{background:transparent;color:var(--mute);border:1px solid var(--line2)}
.tag--senior{background:var(--bone)}
.brief__title{font:700 clamp(32px,3.2vw,52px)/1.08 var(--display);color:var(--bone);letter-spacing:.005em}
.brief__text{font:400 18px/1.55 var(--mono);color:var(--amber);margin-top:18px;max-width:86ch}
.brief__text p+p{margin-top:12px}

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:1px;background:var(--line2);margin-top:26px;border:1px solid var(--line2)}
.fact{background:var(--bg2);padding:20px 26px;min-width:0}
.fact__k{display:block;font:400 16px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.fact__v{display:block;font:700 26px/1.15 var(--display);color:var(--bone);margin-top:8px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

/* the rubric and every other table: inverted head row, dotted rules */
.sheet{width:100%;border-collapse:collapse;font:400 17px/1.4 var(--mono)}
.sheet caption{text-align:left;font:400 16px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);padding-bottom:12px}
.sheet th{
  text-align:left;font-weight:400;font-size:16px;letter-spacing:.12em;text-transform:uppercase;
  color:#120B03;background:var(--amber);padding:10px 18px;white-space:nowrap;
}
.sheet th:last-child,.sheet td:last-child{text-align:right}
.sheet td{padding:14px 18px;border-bottom:1px dotted var(--line);color:var(--amber);vertical-align:top;overflow-wrap:anywhere}
.sheet tbody tr:last-child td{border-bottom:0}
.sheet .num{font-family:var(--display);font-weight:500;color:var(--bone);font-variant-numeric:tabular-nums;white-space:nowrap}
.sheet .who{font-family:var(--mono);color:var(--bone)}
.sheet tr[data-rank="1"] td{background:#171007}
.sheet tr[data-out="yes"] td{color:var(--red)}
.sheet__wrap{overflow-x:auto}

.field{margin-top:22px}
.field textarea,.field input[type=text],.field input[type=file]{
  width:100%;background:#070503;border:1px solid var(--line2);color:var(--bone);
  font:400 18px/1.5 var(--mono);padding:14px 18px;min-height:56px;
}
.field textarea{min-height:150px;resize:vertical}
.filepick{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.filepick input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.filepick input[type=file]:focus-visible+label{outline:2px solid var(--hi);outline-offset:3px}
.filepick__name{font:400 17px/1.3 var(--mono);color:var(--mute);overflow-wrap:anywhere;min-width:0}
.field__help{font:400 16px/1.4 var(--mono);color:var(--mute);margin-top:10px}
.form__keys{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.note{font:400 17px/1.5 var(--mono);color:var(--mute);margin-top:16px}
.note--alert{color:var(--red)}
.note--good{color:var(--hi)}

.empty{display:grid;grid-template-columns:148px minmax(0,1fr);gap:26px;align-items:center}
.empty img{width:148px;height:148px;opacity:.55}
.empty__t{font:700 28px/1.2 var(--display);color:var(--bone)}
.empty p{font:400 18px/1.5 var(--mono);color:var(--mute);margin-top:10px;max-width:70ch}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:1px;background:var(--line2);border:1px solid var(--line2)}
.step{background:var(--bg2);padding:32px;min-width:0}
.step__n{font:700 34px/1 var(--display);color:var(--line)}
.step__t{font:400 18px/1.3 var(--mono);color:var(--bone);margin-top:12px}
.step__d{font:400 16px/1.45 var(--mono);color:var(--mute);margin-top:8px}

.list{display:flex;flex-direction:column;gap:1px;background:var(--line2);border:1px solid var(--line2)}
.row{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px;align-items:center;
  background:var(--bg2);padding:18px 22px;min-width:0;width:100%;text-align:left;border:0;cursor:pointer;
}
a.row{cursor:pointer}
.row:hover{background:var(--bg3)}
.row__n{font:700 22px/1 var(--display);color:var(--line)}
.row__t{display:block;font:400 18px/1.3 var(--mono);color:var(--bone);overflow-wrap:anywhere}
.row__s{display:block;font:400 16px/1.35 var(--mono);color:var(--mute);margin-top:6px}
.row--kind{grid-template-columns:max-content minmax(0,1fr);cursor:default;align-items:start}
.row--kind:hover{background:var(--bg2)}
.row__r{text-align:right;white-space:nowrap}
.row__pay{font:700 20px/1 var(--display);color:var(--amber);font-variant-numeric:tabular-nums}
.row__when{display:block;font:400 16px/1.2 var(--mono);color:var(--mute);margin-top:6px}

.works{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:var(--gap)}
.work{border:1px solid var(--line2);background:var(--bg2);padding:20px}
.work__shot{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line2);background:#070503;margin-bottom:14px}
.work__who{font:400 17px/1.3 var(--mono);color:var(--bone);overflow-wrap:anywhere}
.work__score{font:700 22px/1 var(--display);color:var(--hi);margin-top:8px}
.work__say{font:400 16px/1.45 var(--mono);color:var(--mute);margin-top:10px}
.work__text{font:400 17px/1.5 var(--mono);color:var(--amber);margin-top:10px;white-space:pre-wrap;overflow-wrap:anywhere}

.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.pill{font:400 16px/1 var(--mono);letter-spacing:.06em;color:var(--mute);border:1px solid var(--line2);padding:12px 16px}
.pill[data-on="yes"]{color:#120B03;background:var(--amber);border-color:var(--amber)}

.bans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:1px;background:var(--line2);border:1px solid var(--line2);margin-top:4px}
.ban{background:var(--bg2);padding:20px 24px}
.ban__t{font:400 18px/1.3 var(--mono);color:var(--red)}
.ban__d{font:400 16px/1.45 var(--mono);color:var(--mute);margin-top:8px}

/* ---------- 1280 and down: the instruments go under the stage ------------- */
@media (max-width:1279px){
  .body{grid-template-columns:286px minmax(0,1fr)}
  .gauges{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr)}
  .split{grid-template-columns:1fr}
  .ident{order:-1}
  .mfile{grid-template-columns:1fr 1fr}
  .mfile__say{grid-column:1/-1;border-top:1px solid var(--line2)}
  .mfile__coin{border-right:0}
}

/* ---------- 900 and down: one column, the rail becomes a drawer ----------- */
@media (max-width:760px){
  .row--kind{grid-template-columns:1fr;gap:12px}
  .row--kind .tag{justify-self:start}
}
@media (max-width:640px){
  .panel__head{flex-wrap:wrap;gap:6px 16px}
  .panel__state{max-width:100%;text-align:left}
}

@media (max-width:899px){
  :root{--gap:10px}
  .deck{padding:12px 12px 22px}
  /* the phone reads it in the order a stranger needs: who, what, the brief, then the money */
  .split,.split__cells{display:contents}
  .ident{order:1}
  .premise{order:2}
  .body{order:3}
  .cell{order:4}
  .mfile{order:5}
  .cell{grid-template-columns:auto 1fr auto;gap:16px;padding:18px 32px}
  .cell__sub{display:none}
  .cell__n{font-size:24px}
  .cell__pct{font-size:24px}
  .cell__name{font-size:17px}
  .ident{padding:14px 28px}
  .ident__name{font-size:26px}
  .premise{grid-template-columns:1fr;gap:12px}
  .premise__state{white-space:normal}
  .mfile__who{grid-template-columns:1fr;gap:18px}
  .body{grid-template-columns:1fr}
  .rail{position:static}
  .drawer-key{
    display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px;width:100%;
    min-height:56px;padding:16px 26px;border:1px solid var(--line);background:var(--bg3);
    font:400 17px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);cursor:pointer;
  }
  .drawer-key__now{font:700 22px/1 var(--display);color:var(--bone);text-transform:none;letter-spacing:0}
  .drawer-key[aria-expanded="false"]+.rail__list{display:none}
  .gauges{grid-template-columns:1fr}
  .mfile{grid-template-columns:1fr}
  .mfile__coin{border-left:0;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
  .mfile__say{border-top:0}
  .links{grid-template-columns:1fr}
  .empty{grid-template-columns:1fr}
  .empty img{width:120px;height:120px}
}

@media (max-width:420px){
  .row{grid-template-columns:auto minmax(0,1fr);row-gap:10px}
  .row__r{grid-column:2;text-align:left;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
  .row__when{margin-top:0}
  .row.row--kind{grid-template-columns:1fr}
}

@media (max-width:359px){
  :root{--pad:26px}
  .gauge__big{font-size:26px}
  .mfile__name{font-size:26px}
  .brief__title{font-size:26px}
  .empty__t{font-size:24px}
  .step__n{font-size:26px}
  .fact__v{font-size:22px}
  .cell{grid-template-columns:1fr auto}
  .cell__n{display:none}
  .ident__name{font-size:24px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:0s!important;transition-duration:0s!important}
}

/* a five column table stacks earlier than the three column ones */
@media (max-width:1500px){
  .sheet--wide,.sheet--wide tbody,.sheet--wide tr,.sheet--wide td{display:block;width:100%}
  .sheet--wide thead{display:none}
  .sheet--wide tr{border-bottom:0;padding:10px 0}
  .sheet--wide tr::after{content:"";display:block;height:1px;margin-top:10px;background-image:repeating-linear-gradient(to right,var(--line) 0 2px,transparent 2px 6px)}
  .sheet--wide tbody tr:last-child::after{display:none}
  .sheet--wide td{border:0;display:grid;grid-template-columns:minmax(0,12ch) minmax(0,1fr);gap:16px;padding:7px 0;text-align:left}
  .sheet--wide td:last-child{text-align:left}
  .sheet--wide td::before{content:attr(data-k);font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
  .sheet--wide .num{text-align:left}
}

/* ---------- a table on a phone is a stack of labelled rows ---------------- */
@media (max-width:640px){
  .sheet__wrap{overflow-x:visible}
  .sheet,.sheet tbody,.sheet tr,.sheet td{display:block;width:100%}
  .sheet thead{display:none}
  .sheet tr{border-bottom:0;padding:10px 0}
  .sheet tr::after{content:"";display:block;height:1px;margin-top:10px;background-image:repeating-linear-gradient(to right,var(--line) 0 2px,transparent 2px 6px)}
  .sheet tbody tr:last-child::after{display:none}
  .sheet td{border:0;display:grid;grid-template-columns:minmax(0,10ch) minmax(0,1fr);gap:16px;padding:7px 0;text-align:left}
  .sheet td:last-child{text-align:left}
  .sheet td::before{content:attr(data-k);font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
  .sheet .num{text-align:left}
}