/* Nōmen Vault, app styles.
   Two themes off one token set. Optima for text (the Soveli face), a mono
   stack for anything that represents machine state, and the G2 card preview
   rendered as the glasses render it: monochrome green on black. */
:root{
  --f-body:'Optima','Optima Nova','URW Classico',Palatino,Georgia,serif;
  --f-mono:'SF Mono','Menlo','Fira Code','Cascadia Mono','Courier New',monospace;
  --gold:#C9A96E; --gold-dim:#9C8156; --hud:#86E070; --hud-dim:#4E8A42;
  --wine:#A02020; --amber:#D9A441;
  --r:10px; --rs:7px;
  --shadow:0 1px 2px rgba(0,0,0,.28), 0 8px 26px -12px rgba(0,0,0,.5);
  --sidebar:236px;
}
html[data-theme="dark"]{
  --bg:#0D0A08; --panel:#15100C; --panel2:#1C1611; --panel3:#241D16;
  --line:#2C241B; --line2:#3A3025;
  --text:#EDE6D8; --text2:#B6ABA0; --muted:#8B8177; --inv:#0D0A08;
  --ok:#86E070; --bad:#E58080;
}
html[data-theme="light"]{
  --bg:#FBF9F5; --panel:#FFFFFF; --panel2:#F5F1E9; --panel3:#EDE7DA;
  --line:#E2DACB; --line2:#CFC5B2;
  --text:#1A1613; --text2:#4A423A; --muted:#7C7369; --inv:#FFFFFF;
  --gold:#8A6D34; --gold-dim:#A98F5C;
  --ok:#2E7D32; --bad:#B3261E;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--f-body);
     font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--gold);text-decoration:none} a:hover{text-decoration:underline}
::selection{background:var(--gold);color:var(--inv)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}

/* ---------------------------------------------------------------- boot */
.boot{height:100vh;display:grid;place-items:center}
.boot-mark{font-size:46px;color:var(--gold);opacity:.25;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.18}50%{opacity:.5}}

/* ---------------------------------------------------------------- auth */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px}
.auth-card{width:100%;max-width:392px;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:30px 28px;box-shadow:var(--shadow)}
.auth-card h1{font-size:27px;margin:0 0 3px;font-weight:500;letter-spacing:.01em}
.auth-card .sub{color:var(--muted);font-size:13.5px;margin:0 0 22px;
  letter-spacing:.14em;text-transform:uppercase}
.auth-card .switch{margin-top:16px;font-size:13.5px;color:var(--muted);text-align:center}

/* ---------------------------------------------------------------- shell */
.shell{display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:100vh}
aside{background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:sticky;top:0;
  /* 100vh on a phone is the LARGEST viewport height -- the height the page
     would have if the browser's URL bar were hidden. With the bar showing,
     the bottom of this column (the .who row, which holds sign out) renders
     below the visible area, and because the drawer is position:fixed on
     mobile it cannot be scrolled to. 100dvh is the height actually on
     screen right now. The 100vh line stays first as a fallback for
     browsers older than Safari 15.4 / Chrome 108. */
  height:100vh;height:100dvh}
.brand{padding:20px 18px 17px;border-bottom:1px solid var(--line)}
.brand b{font-size:30px;font-weight:500;letter-spacing:.01em;line-height:1.1;display:block}
.brand span{font-size:13px;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);
  display:block;margin-top:4px}
nav.rail{padding:10px 9px;flex:1;overflow:auto}
nav.rail a{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:var(--rs);
  color:var(--text2);font-size:14.5px;text-decoration:none;margin-bottom:1px}
nav.rail a:hover{background:var(--panel2);color:var(--text);text-decoration:none}
nav.rail a.on{background:var(--gold);color:var(--inv);font-weight:600}
nav.rail a .ic{width:17px;text-align:center;opacity:.85;font-size:14px}
nav.rail a .n{margin-left:auto;font-family:var(--f-mono);font-size:11px;opacity:.6}
nav.rail .grp{font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);
  padding:15px 11px 6px}
.who{border-top:1px solid var(--line);padding:11px 13px;display:flex;align-items:center;gap:9px;
  /* Clears the home indicator and the bottom browser toolbar. */
  padding-bottom:calc(11px + env(safe-area-inset-bottom))}
.who .av{width:29px;height:29px;border-radius:50%;background:var(--panel3);color:var(--gold);
  display:grid;place-items:center;font-size:13px;flex:none}
.who .nm{font-size:13px;line-height:1.25;min-width:0}
.who .nm b{display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who .nm span{color:var(--muted);font-size:11px;letter-spacing:.09em;text-transform:uppercase}
.who button{margin-left:auto}
main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:30;background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(11px);border-bottom:1px solid var(--line);
  /* 22px, not 11: it puts the cap-top of the view title on the same line
     as the cap-top of the wordmark in the sidebar, measured rather than
     guessed. The mobile block below overrides this, where the sidebar is
     a drawer and there is nothing to align to. */
  padding:22px 22px 11px;display:flex;gap:12px;align-items:center}
.top h2{margin:0;font-size:24px;font-weight:500;letter-spacing:.01em;line-height:1.15}
.top .sp{flex:1}
.wrap{padding:20px 22px 60px;max-width:1400px;width:100%}
/* The view title is a direct child of .top on desktop, so .top-id is a
   pass-through there and only becomes a real box on a phone, where it stacks
   the wordmark above the title. */
.top-id{display:contents}
.top-brand{display:none}
.scrim{display:none}


/* ---------------------------------------------------------------- controls */
input,select,textarea{font-family:inherit;font-size:14.5px;background:var(--panel2);
  border:1px solid var(--line);color:var(--text);border-radius:var(--rs);padding:8px 11px;
  width:100%;transition:border-color .12s}
input:hover,select:hover{border-color:var(--line2)}
input::placeholder{color:var(--muted)}
textarea{resize:vertical;min-height:70px}
label.f{display:block;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin:0 0 5px}
.field{margin-bottom:13px}
.btn{font-family:inherit;font-size:14px;background:var(--panel2);border:1px solid var(--line);
  color:var(--text);border-radius:var(--rs);padding:8px 13px;cursor:pointer;width:auto;
  white-space:nowrap;transition:background .12s,border-color .12s}
.btn:hover{background:var(--panel3);border-color:var(--line2)}
.btn.primary{background:var(--gold);color:var(--inv);border-color:var(--gold);font-weight:600}
.btn.primary:hover{background:var(--gold-dim);border-color:var(--gold-dim)}
.btn.ghost{background:none;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{color:var(--text);background:var(--panel2)}
.btn.danger{border-color:#5A2020;color:var(--bad)}
.btn.sm{padding:5px 9px;font-size:13px}
.btn.icon{padding:6px 8px;line-height:1}
.btn[disabled]{opacity:.42;cursor:not-allowed}
.row{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:9px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
@media (max-width:900px){.grid2{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- cards */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 17px;margin-bottom:15px}
.card>h3{margin:0 0 13px;font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);font-weight:500;display:flex;align-items:center;gap:9px}
.card>h3 .sp{flex:1}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:9px;margin-bottom:16px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--rs);padding:10px 12px}
.stat b{display:block;font-size:22px;font-weight:500;color:var(--gold);line-height:1.15}
.stat span{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}

/* ---------------------------------------------------------------- prose */
/* Explanation paragraph at the top of a feature page. One house style, so a
   page that explains itself never looks like a different application. */
.lede{color:var(--text2);font-size:14.5px;line-height:1.62;margin:0 0 2px;max-width:74ch}
.card>h3+.lede{margin-top:-4px;margin-bottom:14px}
.lede.intro{margin-bottom:15px}   /* NOT .top: that class is the sticky page header */

/* The How to use page. Readable prose widths, not dashboard density. */
.guide{max-width:74ch}
.guide h4{font-size:16.5px;font-weight:500;letter-spacing:.01em;margin:0 0 7px;color:var(--text)}
.guide p{margin:0 0 11px;line-height:1.68;color:var(--text2);font-size:14.5px}
.guide p:last-child{margin-bottom:0}
.guide ol,.guide ul{margin:0 0 11px;padding-left:20px;line-height:1.68;
  color:var(--text2);font-size:14.5px}
.guide li{margin-bottom:7px}
.guide li:last-child{margin-bottom:0}
.guide b{color:var(--text);font-weight:500}
.guide kbd{font-family:var(--f-mono);font-size:11.5px;background:var(--panel2);
  border:1px solid var(--line2);border-radius:4px;padding:1px 5px;color:var(--text2)}
.guide .warn-note{border-left:2px solid var(--amber);padding:2px 0 2px 13px;margin:0 0 11px}
.guide .warn-note p{margin:0}

/* Contact us queue */
.msg{border:1px solid var(--line);border-radius:var(--rs);padding:12px 13px;margin-bottom:9px;
  background:var(--panel2)}
.msg.done{opacity:.6}
.msg .mh{display:flex;align-items:center;gap:9px;margin-bottom:6px;flex-wrap:wrap}
.msg .mh b{font-weight:500;font-size:14.5px}
.msg .bd{white-space:pre-wrap;font-size:14px;line-height:1.6;color:var(--text2);
  overflow-wrap:anywhere}

/* ---------------------------------------------------------------- table */
table{width:100%;border-collapse:collapse;font-size:14.5px}
th{text-align:left;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line);font-weight:500;
  white-space:nowrap;position:sticky;top:53px;background:var(--bg);z-index:5}
td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr.k{cursor:pointer}
tbody tr.k:hover{background:var(--panel)}
tbody tr.cur{background:var(--panel2);box-shadow:inset 3px 0 0 var(--gold)}
tbody tr.sel{background:color-mix(in srgb, var(--gold) 11%, transparent)}
td.tight{width:1%;white-space:nowrap}
input[type=checkbox]{width:15px;height:15px;accent-color:var(--gold);cursor:pointer}

/* ---------------------------------------------------------------- chips */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;letter-spacing:.06em;
  padding:2.5px 8px;border-radius:20px;border:1px solid var(--line2);color:var(--text2);
  background:var(--panel2);white-space:nowrap}
.chip.on{background:var(--gold);color:var(--inv);border-color:var(--gold);font-weight:600}
.chip.ok{color:var(--ok);border-color:var(--hud-dim)}
.chip.no{color:var(--bad);border-color:#5A2020}
.chip.warn{color:var(--amber);border-color:#7A5A20}
.chip button{background:none;border:none;color:inherit;cursor:pointer;padding:0;font-size:13px;
  line-height:1;opacity:.65}
.chip button:hover{opacity:1}
.chip.click{cursor:pointer}
.chip.click:hover{border-color:var(--gold)}
.pips{display:inline-flex;gap:3px}
.pip{width:7px;height:7px;border-radius:50%;background:var(--line2)}
.pip.on{background:var(--ok)}
.mono{font-family:var(--f-mono);font-size:12.5px}
.muted{color:var(--muted)}
.dim{color:var(--text2)}
.small{font-size:13px}
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}

/* ---------------------------------------------------------------- glass */
.glass{background:#000;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  position:relative}
.glass .screen{width:576px;height:288px;transform-origin:top left;position:relative;
  overflow:hidden;font-family:var(--f-mono);color:var(--hud);padding:20px 28px}
.glass .nm{font-size:27px;letter-spacing:.02em;margin-bottom:2px}
.glass .md{position:absolute;top:22px;right:28px;font-size:12px;color:var(--hud-dim);
  letter-spacing:.2em}
.glass .rl{height:1px;background:var(--hud-dim);opacity:.5;margin:8px 0 9px}
.glass .ln{font-size:16px;line-height:1.5;white-space:pre;overflow:hidden}
.glass .pr{position:absolute;left:28px;bottom:16px;font-size:14px;color:var(--hud-dim)}
.glass .empty{color:var(--hud-dim);font-size:15px}
.glass.mini .screen{padding:14px 18px}
.glass.mini .nm{font-size:20px}
.glass.mini .ln{font-size:12.5px;line-height:1.45}
.glass.mini .md{font-size:9px;top:15px;right:18px}
.glass.mini .pr{font-size:11px;bottom:11px;left:18px}

/* ---------------------------------------------------------------- person */
.person-grid{display:grid;grid-template-columns:minmax(0,1fr) 392px;gap:18px;align-items:start}
@media (max-width:1180px){.person-grid{grid-template-columns:1fr}}
.side-sticky{position:sticky;top:70px}
.phead{display:flex;gap:14px;align-items:flex-start;margin-bottom:15px}
.phead .av{width:52px;height:52px;border-radius:12px;background:var(--panel3);color:var(--gold);
  display:grid;place-items:center;font-size:22px;flex:none}
.phead h1{margin:0;font-size:26px;font-weight:500;letter-spacing:.01em}
.phead .sub{color:var(--text2);font-size:14.5px;margin-top:1px}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:15px;overflow:auto}
.tabs button{background:none;border:none;border-bottom:2px solid transparent;color:var(--muted);
  padding:9px 13px;cursor:pointer;font-family:inherit;font-size:14.5px;white-space:nowrap}
.tabs button:hover{color:var(--text)}
.tabs button.on{color:var(--text);border-bottom-color:var(--gold)}
.fact{display:grid;grid-template-columns:88px 1fr auto;gap:9px;align-items:center;
  padding:7px 0;border-bottom:1px solid var(--line)}
.fact:last-child{border-bottom:none}
.fact .k{font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.gal img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--rs);
  border:1px solid var(--line);background:var(--panel2);cursor:zoom-in;display:block}
/* The delete control sits on the thumbnail. It stays visible on touch, where
   there is no hover, and is 26px square so it clears the 24px minimum target. */
.ph{position:relative;margin:0}
.ph-del{position:absolute;top:4px;right:4px;width:26px;height:26px;line-height:1;
  border-radius:50%;border:1px solid var(--line);background:rgba(12,12,14,.72);
  color:#fff;font-size:16px;cursor:pointer;opacity:0;transition:opacity .12s}
.ph:hover .ph-del,.ph:focus-within .ph-del{opacity:1}
@media (hover:none){.ph-del{opacity:1}}
.rec{border:1px solid var(--line);border-radius:var(--rs);padding:12px;margin-bottom:11px;
  background:var(--panel2)}
audio{width:100%;height:34px;margin:9px 0}
.segs{max-height:290px;overflow:auto;border-top:1px solid var(--line);padding-top:8px}
.seg{display:grid;grid-template-columns:52px 40px 1fr;gap:8px;padding:5px 6px;border-radius:5px;
  cursor:pointer;font-size:14px;align-items:start}
.seg:hover{background:var(--panel3)}
.seg.now{background:color-mix(in srgb, var(--gold) 15%, transparent)}
.seg .t{font-family:var(--f-mono);font-size:11px;color:var(--muted);padding-top:2px}
.seg .s{font-family:var(--f-mono);font-size:11px;color:var(--gold-dim);padding-top:2px}
mark{background:color-mix(in srgb, var(--gold) 38%, transparent);color:inherit;
  border-radius:2px;padding:0 2px}

/* ---------------------------------------------------------------- import */
.drop{border:1.5px dashed var(--line2);border-radius:var(--r);padding:40px 24px;text-align:center;
  color:var(--muted);cursor:pointer;transition:border-color .12s,color .12s}
.drop:hover,.drop.over{border-color:var(--gold);color:var(--gold);background:var(--panel)}
.drop b{display:block;color:var(--text);font-size:17px;margin-bottom:6px}
.mapgrid{display:grid;grid-template-columns:1fr 190px 96px 1fr;gap:8px;align-items:center;
  padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
.mapgrid.head{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.steps{display:flex;gap:8px;align-items:center;margin-bottom:16px;font-size:13px}
.steps .s{display:flex;align-items:center;gap:7px;color:var(--muted)}
.steps .s b{width:21px;height:21px;border-radius:50%;background:var(--panel2);
  border:1px solid var(--line);display:grid;place-items:center;font-size:11px;font-weight:600}
.steps .s.on{color:var(--text)} .steps .s.on b{background:var(--gold);color:var(--inv);border-color:var(--gold)}
.steps .ar{color:var(--line2)}

/* ---------------------------------------------------------------- palette */
/* A class rule beats the user-agent [hidden] rule, so the overlay would stay
   in the layer and swallow every click on the page. Say it explicitly. */
[hidden]{display:none !important}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.62);z-index:100;display:grid;
  place-items:start center;padding:11vh 20px 20px;backdrop-filter:blur(3px)}
.modal .box{background:var(--panel);border:1px solid var(--line2);border-radius:13px;
  width:100%;max-width:560px;box-shadow:var(--shadow);overflow:hidden}
.modal .box.wide{max-width:760px}
.modal .hd{padding:15px 18px;border-bottom:1px solid var(--line);font-size:16px}
.modal .bd{padding:17px 18px;max-height:64vh;overflow:auto}
.modal .ft{padding:13px 18px;border-top:1px solid var(--line);display:flex;gap:9px;
  justify-content:flex-end;background:var(--panel2)}
.pal input{border:none;background:none;font-size:17px;padding:16px 18px;border-radius:0}
.pal input:focus{outline:none}
.pal .res{max-height:52vh;overflow:auto;border-top:1px solid var(--line)}
.pal .it{padding:10px 18px;cursor:pointer;display:flex;gap:11px;align-items:center;font-size:14.5px}
.pal .it:hover,.pal .it.cur{background:var(--panel2)}
.pal .it .ic{color:var(--gold);width:18px;text-align:center}
.pal .it .sub{color:var(--muted);font-size:12.5px;margin-left:auto}
kbd{font-family:var(--f-mono);font-size:11px;background:var(--panel3);border:1px solid var(--line2);
  border-bottom-width:2px;border-radius:4px;padding:1px 5px;color:var(--text2)}

/* ---------------------------------------------------------------- misc */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:200;
  background:var(--panel);border:1px solid var(--line2);border-radius:var(--rs);
  padding:11px 17px;box-shadow:var(--shadow);font-size:14px;max-width:640px}
.toast.bad{border-color:#5A2020;color:var(--bad)}
.toast.good{border-color:var(--hud-dim)}
.empty-state{text-align:center;padding:56px 20px;color:var(--muted)}
.empty-state b{display:block;color:var(--text);font-size:17px;margin-bottom:7px;font-weight:500}
.bulkbar{position:sticky;bottom:16px;z-index:20;margin-top:14px;background:var(--panel);
  border:1px solid var(--gold-dim);border-radius:var(--r);padding:10px 14px;
  display:flex;gap:9px;align-items:center;box-shadow:var(--shadow)}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:150;display:grid;
  place-items:center;cursor:zoom-out;padding:26px}
.lightbox img{max-width:100%;max-height:100%;border-radius:var(--rs)}
.bar{height:6px;background:var(--panel3);border-radius:3px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--gold)}
.hide{display:none !important}
@media (max-width:820px){
  /* Wide content scrolls inside its own card. The page itself must never
     scroll sideways, which is the single most common phone-layout bug. */
  body{overflow-x:hidden}
  .card{overflow-x:auto}
  .card>table{min-width:620px}
  th{position:static}
  .top{padding:9px 13px}
  .top h2{font-size:21px}
  .shell{grid-template-columns:1fr}
  /* top+bottom rather than a height: the drawer is then anchored to the
     bottom of the visible area on every engine, including ones with no
     dvh support, so the sign-out row cannot fall below the fold. */
  aside{position:fixed;left:0;top:0;bottom:0;height:auto;width:var(--sidebar);z-index:60;
    transform:translateX(-100%);transition:transform .16s ease}
  aside.open{transform:none;box-shadow:var(--shadow)}
  .wrap{padding:15px 13px 60px}
  th{top:49px}
  /* "Outside" needs something to be: the scrim covers everything the drawer
     does not, so a tap anywhere else dismisses it, which is what every phone
     has trained people to expect. It sits under the drawer and over the page. */
  .scrim{display:block;position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.45);
    opacity:0;pointer-events:none;transition:opacity .16s ease}
  .scrim.on{opacity:1;pointer-events:auto}
}
@media (min-width:821px){ .menu-btn{display:none} }

/* Portrait masthead. With the sidebar collapsed to a drawer there was nothing
   on screen naming the app -- just a hamburger and a view title. The wordmark
   now sits above the view name, and the actions align to the TOP of that
   block instead of drifting down beside the title. The row still wraps as a
   last resort on very narrow screens, so nothing can overflow sideways. */
@media (max-width:560px){
  /* 12px between five items costs 48px of a 349px header. At 8 the whole
     row fits on a 375pt phone instead of dropping the actions below. */
  /* justify-content only bites on a wrapped line: .sp eats all the free
     space on line one, so it changes nothing there, but if the actions
     do drop to line two on a very narrow screen they stay right-aligned
     instead of jumping to the left margin. */
  .top{flex-wrap:wrap;row-gap:7px;column-gap:8px;align-items:flex-start;
    justify-content:flex-end}
  .top-id{display:flex;flex-direction:column;gap:1px;min-width:0}
  .top-brand{display:block;font-size:15px;line-height:1.15;color:var(--gold);
    letter-spacing:.02em;white-space:nowrap}
  .top h2{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    line-height:1.2}
  .menu-btn{margin-top:2px}
  #topactions{flex-wrap:nowrap;gap:7px}
  #topactions .btn{white-space:nowrap}
  .top .btn.sm{padding:5px 7px}
  /* The keyboard hint means nothing on a phone, and the word costs more width
     than the header has, so the button becomes its icon. The glass is drawn
     rather than set in a glyph: U+2315 is not in Optima, so it would fall back
     to whatever the phone had and inherit that font's idea of the shape.
     currentColor keeps it correct in both themes. */
  #palette{font-size:0;padding:6px 9px;position:relative}
  #palette kbd{display:none}
  #palette::before{content:"";display:block;width:11px;height:11px;
    border:1.5px solid currentColor;border-radius:50%;margin:1px 2px 2px 1px}
  #palette::after{content:"";position:absolute;right:8px;bottom:7px;
    width:6px;height:1.5px;background:currentColor;border-radius:1px;
    transform:rotate(45deg);transform-origin:right center}
}