* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #000; }
body {
  color: #e8e4da; font-family: "Jost", system-ui, sans-serif;
  overflow: hidden; -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ===== stage: the tube, as big as the window allows, 4:3 ===== */
.stage {
  height: 100svh; width: 100vw;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  --m: clamp(6px, 2.2vmin, 28px);
}
.tube {
  --w: min(calc(100vw - var(--m) * 2), calc((100svh - var(--m) * 2) * 4 / 3));
  width: var(--w); aspect-ratio: 4 / 3;
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 4.2% / 5.6%;
  background: #030403;
  cursor: pointer;
  box-shadow: 0 0 0 1px #0c0d0c, 0 0 calc(var(--w) * .09) rgba(120, 170, 255, 0);
  transition: box-shadow 1.4s ease;
}
body.is-on .tube { box-shadow: 0 0 0 1px #0c0d0c, 0 0 calc(var(--w) * .09) var(--halo, rgba(120,170,255,.16)); }
.tube.degauss { animation: degauss .9s ease-out; }
@keyframes degauss {
  0% { filter: hue-rotate(0) saturate(1.6); transform: scale(1.012, .99) skewX(.6deg); }
  20% { filter: hue-rotate(70deg) saturate(1.8); transform: scale(.994, 1.006) skewX(-.5deg); }
  40% { filter: hue-rotate(-40deg); transform: scale(1.004, .998) skewX(.3deg); }
  70% { filter: hue-rotate(12deg); transform: scale(.999, 1.001); }
  100% { filter: none; transform: none; }
}

/* ===== the picture ===== */
.picture {
  position: absolute; inset: 0; overflow: hidden; z-index: 1;
  filter: saturate(1.18) contrast(1.1) brightness(1.04);
}
.picture iframe, .picture #player {
  position: absolute; top: 50%; left: 50%;
  height: 100%; width: 133.34%; /* 16:9 at full tube height, sides cut like an old set */
  transform: translate(-50%, -50%) scale(1.14); /* crops YouTube's edge furniture (title bar, More videos) */
  border: 0; pointer-events: none;
}
.shield { position: absolute; inset: 0; z-index: 2; }

/* ===== CRT layers ===== */
.crt > div { position: absolute; inset: 0; pointer-events: none; }
.crt { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.grille { /* aperture grille: faint RGB stripes */
  background: repeating-linear-gradient(90deg, rgba(255,0,60,.06) 0 1px, rgba(0,255,90,.05) 1px 2px, rgba(40,90,255,.06) 2px 3px);
  mix-blend-mode: multiply; opacity: .9;
}
.scan {
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.32) 0 1px, transparent 1px 3px);
  animation: flicker 5s infinite steps(50);
}
@keyframes flicker { 0%,100% { opacity: .95 } 47% { opacity: .85 } 49% { opacity: 1 } 73% { opacity: .9 } }
.roll { /* slow hum bar drifting down the tube */
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,.035) 45%, rgba(255,255,255,.06) 50%, rgba(255,255,255,.035) 55%, transparent 100%);
  height: 35%; inset: auto 0 auto 0; top: -35%;
  animation: roll 9s linear infinite;
  mix-blend-mode: screen;
}
@keyframes roll { to { transform: translateY(400%); } }
.vignette {
  background: radial-gradient(ellipse 72% 70% at 50% 50%, transparent 62%, rgba(0,0,0,.55) 100%);
  box-shadow: inset 0 0 calc(var(--w) * .05) rgba(0,0,0,.9), inset 0 0 calc(var(--w) * .012) rgba(0,0,0,1);
}
.glass {
  background:
    radial-gradient(ellipse 60% 40% at 28% 12%, rgba(255,255,255,.075), transparent 60%),
    radial-gradient(ellipse 40% 25% at 80% 92%, rgba(255,255,255,.025), transparent 70%);
}
body.is-off .roll, body.is-off .grille { opacity: 0; }

/* ===== power ===== */
.offscreen {
  position: absolute; inset: 0; z-index: 25;
  background: radial-gradient(ellipse at 45% 40%, #151a17 0%, #070807 60%, #030303 100%);
  display: grid; place-items: center;
  transition: opacity .25s;
}
body.is-on .offscreen { opacity: 0; pointer-events: none; }
.off-reflect {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 30% at 30% 18%, rgba(255,255,255,.06), transparent 70%),
    linear-gradient(115deg, transparent 40%, rgba(255,255,255,.025) 50%, transparent 60%);
}
.off-hint {
  font-family: "VT323", monospace; font-size: clamp(16px, calc(var(--w) * .03), 30px);
  letter-spacing: .35em; text-transform: uppercase; color: rgba(190, 220, 200, .22);
  animation: breathe 3.5s ease-in-out infinite;
}
@keyframes breathe { 50% { color: rgba(190, 220, 200, .4); } }
.flash {
  position: absolute; left: 0; right: 0; top: 50%; height: 100%; z-index: 30;
  transform: translateY(-50%) scaleY(0); background: #eef6ff; opacity: 0; pointer-events: none;
}
.flash.turnon { animation: turnon .6s ease-out forwards; }
.flash.turnoff { animation: turnoff .5s ease-in forwards; }
@keyframes turnon {
  0% { opacity: 1; transform: translateY(-50%) scaleY(.003) scaleX(.15); }
  30% { opacity: 1; transform: translateY(-50%) scaleY(.005) scaleX(1); }
  65% { opacity: .75; transform: translateY(-50%) scaleY(1) scaleX(1); }
  100% { opacity: 0; transform: translateY(-50%) scaleY(1) scaleX(1); }
}
@keyframes turnoff {
  0% { opacity: .2; transform: translateY(-50%) scaleY(1); }
  50% { opacity: 1; transform: translateY(-50%) scaleY(.005) scaleX(1); }
  85% { opacity: 1; transform: translateY(-50%) scaleY(.004) scaleX(.02); }
  100% { opacity: 0; transform: translateY(-50%) scaleY(.004) scaleX(0); }
}

/* ===== transition card: covers YouTube's start-of-video chrome ===== */
.cover {
  position: absolute; inset: 0; z-index: 13; background: #000;
  display: grid; place-items: center;
  opacity: 0; pointer-events: none; transition: opacity .45s ease;
}
.cover.on { opacity: 1; transition: opacity .12s ease; }
.cover-logo {
  font-family: "Rubik Mono One", sans-serif; font-size: calc(var(--w) * .085); line-height: 1;
  color: rgba(255,255,255,.9); letter-spacing: -.04em; display: flex; align-items: flex-end; gap: .06em;
  text-shadow: 0 0 calc(var(--w) * .03) rgba(255,255,255,.25);
  opacity: 0; transform: scale(.94);
}
.cover-logo small { font-size: .36em; letter-spacing: 0; padding-bottom: .1em; color: #ffe600; }
.cover.on .cover-logo { animation: logoin .5s .1s ease-out forwards; }
@keyframes logoin { to { opacity: 1; transform: none; } }
body.in-bumper .cover { opacity: 0; }
.bug { transition: opacity .4s; }
.cover.on ~ .gfx .bug { opacity: 0; }

/* ===== static (retired, kept for reference) ===== */
.static { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 12; opacity: 0; transition: opacity .1s; }
.static.on { opacity: 1; }

/* ===== color bars ===== */
.bars { position: absolute; inset: 0; z-index: 11; display: grid; grid-template-rows: 67% 8% 25%; opacity: 0; transition: opacity .2s; pointer-events: none; }
.bars.on { opacity: 1; }
.bars > div:not(.standby) { display: flex; } .bars i { flex: 1; }
.bars-low i:nth-child(-n+3) { flex: 1.25; } .bars-low i:nth-child(4) { flex: 2.6; }
.standby {
  position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%); text-align: center;
  font-family: "VT323", monospace; font-size: calc(var(--w) * .045); letter-spacing: .08em; line-height: 1.05;
  background: #000; color: #fff; padding: .25em .8em; white-space: nowrap;
}
.standby small { display: block; font-size: .6em; color: #bbb; }

/* ===== graphics (on top of the picture, under the glass) ===== */
.gfx { position: absolute; inset: 0; z-index: 15; pointer-events: none; }
.gfx > * { filter: blur(.35px); }
.credits {
  position: absolute; left: 7.5%; bottom: 10%; max-width: 64%;
  color: #fff; line-height: 1.14;
  text-shadow: 0 1px 1px rgba(0,0,0,.95), 0 0 calc(var(--w) * .008) rgba(0,0,0,.7), 0 0 calc(var(--w) * .02) rgba(255,255,255,.12);
  opacity: 0; transition: opacity .6s ease;
}
.credits.on { opacity: 1; }
.c-artist { font-weight: 600; font-size: max(14px, calc(var(--w) * .036)); }
.c-song { font-weight: 500; font-size: max(13px, calc(var(--w) * .032)); }
.c-label, .c-dir { font-weight: 400; font-size: max(11px, calc(var(--w) * .026)); opacity: .95; }
.c-label, .c-dir { display: none; } /* artist and song only: the extra credits weren't always right */
.c-new {
  display: inline-block; margin-left: .45em; vertical-align: .12em;
  font-family: "Rubik Mono One", sans-serif; font-size: .55em; letter-spacing: .05em;
  background: #ffe600; color: #000; padding: .12em .4em .05em; text-shadow: none;
}
.bug {
  position: absolute; right: 5.2%; bottom: 6.4%;
  font-family: "Rubik Mono One", sans-serif; font-size: max(13px, calc(var(--w) * .034)); line-height: .9;
  color: rgba(255,255,255,.34); mix-blend-mode: screen; letter-spacing: -.04em;
  display: flex; align-items: flex-end; gap: .08em;
}
.bug small { font-size: .38em; letter-spacing: 0; padding-bottom: .12em; }
body.in-bumper .bug { opacity: 0; }
.osd {
  position: absolute; right: 7%; top: 8%;
  font-family: "VT323", monospace; font-size: max(22px, calc(var(--w) * .062)); line-height: .95; text-align: right;
  color: #5cff70; text-shadow: 0 0 calc(var(--w) * .008) rgba(92,255,112,.7), .06em .06em 0 #000;
  opacity: 0; transition: opacity .12s;
}
.osd.on { opacity: 1; }
.osd small { display: block; font-size: .5em; }
.premiere {
  position: absolute; left: 7.5%; top: 8.5%;
  font-family: "Rubik Mono One", sans-serif; font-size: max(11px, calc(var(--w) * .03)); line-height: 1.05;
  background: #ffe600; color: #0a0a0a; padding: .45em .6em .35em;
  box-shadow: .18em .18em 0 #ff2d8a;
  opacity: 0; transform: translateX(-12px); transition: opacity .4s, transform .4s;
}
.premiere.on { opacity: 1; transform: none; animation: pblink 1.2s steps(2) infinite; }
@keyframes pblink { 50% { box-shadow: .18em .18em 0 #2de0ff; } }

/* guide, Prevue style: scroll it, tap a song */
.guide {
  position: absolute; left: 6%; right: 6%; top: 8%; bottom: 7%;
  background: linear-gradient(180deg, #2335a8 0%, #15207a 100%);
  border: max(2px, calc(var(--w) * .004)) solid #8fa4ff; border-radius: calc(var(--w) * .01);
  font-family: "Jost", sans-serif; color: #fff;
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateY(4%); transition: opacity .3s, transform .3s;
  filter: none !important; text-shadow: 0 1px 0 #000;
  pointer-events: none;
}
.guide.on { opacity: 1; transform: none; pointer-events: auto; }
.g-head {
  display: flex; gap: .8em; align-items: center;
  padding: .55em .9em; background: #0d1452; border-bottom: 2px solid #8fa4ff;
  font-family: "Rubik Mono One", sans-serif; font-size: max(10px, calc(var(--w) * .022));
}
.g-head span:first-child { flex: 1; }
.g-head span:nth-child(2) { color: #ffe600; }
.g-x { font-size: 1.1em; padding: 0 .2em; color: #cfd8ff; }
.g-rows {
  flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: #8fa4ff transparent;
}
.g-rows::-webkit-scrollbar { width: 8px; }
.g-rows::-webkit-scrollbar-thumb { background: #8fa4ff; border-radius: 4px; }
.g-row {
  width: 100%; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: 20% 1fr auto; gap: .6em; align-items: center;
  border-bottom: 1px solid rgba(143,164,255,.3);
  font-size: max(12px, calc(var(--w) * .024)); padding: .5em .9em; line-height: 1.15;
  text-shadow: 0 1px 0 #000;
}
.g-row:hover, .g-row:focus-visible { background: rgba(143,164,255,.18); outline: none; }
.g-row .g-time { font-weight: 600; color: #cfd8ff; }
.g-row .g-what { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-row .g-what b { font-weight: 600; }
.g-row .g-dur { font-size: .8em; color: #aab6ff; font-variant-numeric: tabular-nums; }
.g-row.past { opacity: .55; }
.g-row.now { background: rgba(255,230,0,.18); opacity: 1; }
.g-row.now .g-time { color: #ffe600; }
.g-empty { padding: 1.2em .9em; font-size: max(12px, calc(var(--w) * .026)); color: #cfd8ff; }
.g-foot {
  display: flex; justify-content: space-between; gap: .5em;
  padding: .5em .7em; background: #0d1452; border-top: 2px solid #8fa4ff;
}
.g-foot button {
  font-family: "VT323", monospace; font-size: max(16px, calc(var(--w) * .03)); letter-spacing: .06em;
  color: #fff; padding: .15em .7em; border-radius: 6px; border: 1px solid rgba(143,164,255,.6);
}
.g-foot button:hover { background: rgba(143,164,255,.2); }
#gLive.active { background: #ff2d4a; border-color: #ff2d4a; color: #fff; }
#gLive:not(.active) { color: #ffb3bd; }

/* ===== built in station IDs ===== */
.bumper { position: absolute; inset: 0; z-index: 10; opacity: 0; pointer-events: none; overflow: hidden; }
.bumper.on { opacity: 1; }
.bp { position: absolute; inset: 0; display: none; }
.bumper[data-v="0"] .bp-slam, .bumper[data-v="1"] .bp-vhs, .bumper[data-v="2"] .bp-glitch { display: block; }

/* slam */
.bp-slam { background: #0d0d0d; }
.slam-shapes i { position: absolute; display: block; }
.slam-shapes .s1 { width: 34%; aspect-ratio: 1; border-radius: 50%; background: #ff2d8a; left: -6%; top: 8%; }
.slam-shapes .s2 { width: 26%; height: 9%; background: #2de0ff; right: 6%; top: 14%; transform: rotate(-12deg); }
.slam-shapes .s3 { width: 0; height: 0; border-left: calc(var(--w) * .1) solid transparent; border-right: calc(var(--w) * .1) solid transparent; border-bottom: calc(var(--w) * .17) solid #ffe600; right: 12%; bottom: 8%; }
.slam-shapes .s4 { width: 22%; aspect-ratio: 1; border: calc(var(--w) * .014) dashed #7cff4f; border-radius: 50%; left: 9%; bottom: 20%; }
.bumper.play .slam-shapes .s1 { animation: pop .5s .05s both cubic-bezier(.3,1.7,.5,1), drift1 6s linear .5s; }
.bumper.play .slam-shapes .s2 { animation: pop .5s .2s both cubic-bezier(.3,1.7,.5,1), drift2 6s linear .7s; }
.bumper.play .slam-shapes .s3 { animation: pop .5s .35s both cubic-bezier(.3,1.7,.5,1); }
.bumper.play .slam-shapes .s4 { animation: pop .5s .5s both cubic-bezier(.3,1.7,.5,1), spin 4s linear 1s infinite; }
@keyframes pop { from { transform: scale(0) rotate(-40deg); } }
@keyframes drift1 { to { transform: translate(8%, 6%); } }
@keyframes drift2 { to { transform: translate(-12%, 4%) rotate(-12deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
.slam-dr {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  font-family: "Rubik Mono One", sans-serif; font-size: calc(var(--w) * .3); line-height: 1; letter-spacing: -.06em;
  color: #fff; text-shadow: .04em .04em 0 #000, .07em .07em 0 #ff2d8a; display: flex;
}
.bumper.play .slam-dr span:nth-child(1) { animation: dropin .55s .6s both cubic-bezier(.2,1.6,.4,1); }
.bumper.play .slam-dr span:nth-child(2) { animation: dropin .55s .8s both cubic-bezier(.2,1.6,.4,1); }
@keyframes dropin { from { transform: translateY(-140%) rotate(-14deg); } }
.slam-tv {
  position: absolute; left: 66%; top: 62%;
  font-family: "Rubik Mono One", sans-serif; font-size: calc(var(--w) * .09);
  background: #ffe600; color: #000; padding: 0 .18em; transform: rotate(-8deg);
}
.bumper.play .slam-tv { animation: stamp .35s 1.4s both cubic-bezier(.3,1.8,.5,1); }
@keyframes stamp { from { transform: rotate(-8deg) scale(3); opacity: 0; } }
.slam-tag {
  position: absolute; left: 0; right: 0; bottom: 9%; text-align: center;
  font-family: "Jost", sans-serif; font-weight: 700; letter-spacing: .5em; font-size: calc(var(--w) * .024); color: #fff;
}
.bumper.play .slam-tag { animation: fadeup .5s 2s both; }
@keyframes fadeup { from { opacity: 0; transform: translateY(40%); } }

/* vhs */
.bp-vhs { background: #0a14b8; font-family: "VT323", monospace; color: #fff; text-shadow: .05em .05em 0 rgba(0,0,0,.45); }
.vhs-top { position: absolute; left: 8%; right: 8%; top: 8%; display: flex; justify-content: space-between; font-size: calc(var(--w) * .055); }
.vhs-line1 { position: absolute; left: 0; right: 0; top: 34%; text-align: center; font-size: calc(var(--w) * .05); letter-spacing: .12em; overflow: hidden; white-space: nowrap; }
.vhs-logo { position: absolute; left: 0; right: 0; top: 44%; text-align: center; font-family: "Rubik Mono One", sans-serif; font-size: calc(var(--w) * .16); letter-spacing: -.02em; }
.vhs-bottom { position: absolute; left: 8%; bottom: 9%; font-size: calc(var(--w) * .05); }
.bumper.play .vhs-top span:first-child { animation: blink 1s steps(2) infinite; }
.bumper.play .vhs-line1 { animation: type 1.2s .3s steps(15) both; }
.bumper.play .vhs-logo { animation: vhsin .5s 1.6s both steps(4); }
@keyframes type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes vhsin { 0% { opacity: 0; transform: translateX(-6%) skewX(20deg); } 100% { opacity: 1; } }
@keyframes blink { 50% { opacity: 0; } }
.bumper.play .vhs-tick { animation: tick 1s steps(1) infinite; }
@keyframes tick { 50% { opacity: .2; } }
.bp-vhs::after { /* tracking wobble line */
  content: ""; position: absolute; left: 0; right: 0; height: 6%; top: 80%;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.35), transparent);
  filter: blur(2px);
}
.bumper.play .bp-vhs::after { animation: track 2.2s linear infinite; }
@keyframes track { from { top: 105%; } to { top: -10%; } }

/* glitch */
.bp-glitch { background: #000; }
.glitch-bars { position: absolute; inset: 0; display: flex; }
.glitch-bars i { flex: 1; }
.glitch-bars i:nth-child(1) { background: #c0c0c0; } .glitch-bars i:nth-child(2) { background: #c0c000; }
.glitch-bars i:nth-child(3) { background: #00c0c0; } .glitch-bars i:nth-child(4) { background: #00c000; }
.glitch-bars i:nth-child(5) { background: #c000c0; } .glitch-bars i:nth-child(6) { background: #c00000; }
.glitch-bars i:nth-child(7) { background: #0000c0; }
.bumper.play .glitch-bars { animation: barsout 1.4s both steps(6); }
@keyframes barsout {
  0% { clip-path: inset(0); } 40% { clip-path: inset(0); transform: translateX(3%); }
  60% { clip-path: inset(20% 0 35% 0); transform: translateX(-6%); } 80% { clip-path: inset(48% 0 46% 0); } 100% { clip-path: inset(50% 0 50% 0); }
}
.glitch-logo {
  position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%);
  font-family: "Rubik Mono One", sans-serif; font-size: calc(var(--w) * .34); line-height: 1; color: #fff; letter-spacing: -.06em;
}
.glitch-logo::before, .glitch-logo::after { content: attr(data-text); position: absolute; inset: 0; mix-blend-mode: screen; }
.glitch-logo::before { color: #ff004c; transform: translate(-3%, 0); }
.glitch-logo::after { color: #00e5ff; transform: translate(3%, 0); }
.bumper.play .glitch-logo { animation: gin .2s 1.3s both, shake .16s 1.5s 14 steps(2); }
.bumper.play .glitch-logo::before { animation: split 1.8s 1.4s infinite steps(3); }
@keyframes gin { from { opacity: 0; } }
@keyframes shake { 50% { transform: translate(-49%, -51%); } }
@keyframes split { 33% { clip-path: inset(10% 0 60% 0); } 66% { clip-path: inset(55% 0 15% 0); } }
.glitch-sub {
  position: absolute; left: 0; right: 0; bottom: 14%; text-align: center;
  font-family: "VT323", monospace; font-size: calc(var(--w) * .055); letter-spacing: .3em; color: #fff;
}
.bumper.play .glitch-sub { animation: blink .8s 2.2s steps(2) infinite both; }

/* ===== remote, appears on movement or tap ===== */
.remote {
  position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translate(-50%, 10px);
  display: flex; gap: 2px; padding: 4px;
  background: rgba(10, 12, 10, .78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(92,255,112,.18); border-radius: 10px; z-index: 50;
  opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s;
}
body.ui .remote, body.is-off .remote { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.remote button {
  font-family: "VT323", monospace; font-size: 20px; letter-spacing: .06em; color: #8dffa0;
  padding: 7px 12px; border-radius: 7px; white-space: nowrap;
}
.remote button:hover, .remote button:focus-visible { background: rgba(92,255,112,.12); color: #c8ffd2; outline: none; }
.remote button.active { color: #000; background: #5cff70; }
body.is-off .remote button:not(#bPower) { opacity: .35; }

.nowline {
  margin-top: 14px; max-width: 90vw; text-align: center;
  font-size: 13px; letter-spacing: .06em; color: rgba(232,228,218,.45);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.2em;
  transition: opacity .3s;
}
/* landscape: hide the line so the tube can be as big as possible */
@media (min-aspect-ratio: 4/3) { .nowline { display: none; } }
@media (max-width: 520px) {
  .remote button { font-size: 17px; padding: 7px 8px; }
}

/* phones held upright: the guide opens as a bigger panel instead of squeezing into the tube */
@media (max-width: 640px) and (orientation: portrait) {
  .guide { position: fixed; left: 8px; right: 8px; top: 28svh; bottom: 72px; z-index: 40; }
  .g-head { font-size: 12px; }
  .g-row { font-size: 15px; padding: .7em .8em; grid-template-columns: 4.6em 1fr auto; }
  .g-foot button { font-size: 18px; white-space: nowrap; padding: .15em .5em; }
  body.guide-open .crt { opacity: 0; }
}