:root{
  --sans:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Inter','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --bg:#f6f5f1;--surface:#fffefb;--ink:#16211c;--dim:#6f7a74;
  --line:rgba(22,33,28,.12);--line2:rgba(22,33,28,.26);
  --accent:#195d1a;--accent2:#2a7e2c;--accent-ink:#ffffff;--ok:#8db08d;
  --pop:#c2410c;

  --glass:rgba(255,254,251,.92);

  --ctl-bottom:66px;--ctl-h:150px;--above-ctl:calc(var(--ctl-bottom) + var(--ctl-h) + 16px);
}

.stage{position:relative;height:100vh;height:100dvh;min-height:0;overflow:hidden;background:var(--bg)}
#globe{position:absolute;inset:0}
.veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(246,245,241,.72) 0,transparent 16%,
    transparent 52%,rgba(246,245,241,.86) 100%)}

.hud{position:absolute;top:0;left:0;right:0;z-index:6;padding:20px 24px;
  display:flex;align-items:flex-start;gap:20px;pointer-events:none}
.mark{display:flex;align-items:center;gap:11px}
.mark img{height:44px;width:auto;display:block;flex:none}
.mark .wm{display:block}
.mark b{font:700 14px var(--sans);display:block}
.mark b em{font-style:normal;color:var(--accent)}
.mark .wm>span{display:block;font:500 14px var(--sans);
  color:var(--dim);margin-top:5px}
.hud .tally{margin-left:auto}

.controls{position:absolute;left:0;right:0;bottom:var(--ctl-bottom);z-index:8;pointer-events:none;
  padding:0 24px}
.ctlbox{pointer-events:auto;max-width:960px;margin:0 auto;background:var(--glass);
  backdrop-filter:blur(18px) saturate(140%);border:1px solid var(--line2);
  box-shadow:0 18px 44px rgba(22,33,28,.16)}
.searchrow{display:flex;border-bottom:1px solid var(--line);--search-h:58px}
.searchrow .go{height:var(--search-h)}
.sugg.up{top:auto;bottom:calc(100% + 1px)}

.below{max-width:1240px;margin:0 auto;padding:26px 24px 110px;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}

@media(max-width:900px){
  .stage{height:100dvh;min-height:0}
  .hud{padding:14px}
  .hud .tally{display:none}
  .controls{padding:0 12px}
  :root{--ctl-bottom:60px;--ctl-h:186px}
  .searchrow{flex-direction:column;--search-h:50px}
  .searchrow .go{width:100%}
  .below{grid-template-columns:1fr;padding:16px 12px 116px;gap:12px}
}