* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Background patterns ---------- */

#bg-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #000;
}

.pattern {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
}

#bg-layer[data-pattern="aurora"] .pattern-aurora,
#bg-layer[data-pattern="ocean"] .pattern-ocean,
#bg-layer[data-pattern="neon"] .pattern-neon,
#bg-layer[data-pattern="nebula"] .pattern-nebula,
#bg-layer[data-pattern="sunset"] .pattern-sunset,
#bg-layer[data-pattern="smoke"] .pattern-smoke,
#bg-layer[data-pattern="deepsky"] .pattern-deepsky,
#bg-layer[data-pattern="lava"] .pattern-lava {
  opacity: 1;
}

.blob {
  position: absolute;
  top: var(--top);
  left: var(--left);
  width: var(--size);
  height: var(--size);
  background: radial-gradient(circle, var(--c) 0%, transparent 70%);
  border-radius: 50%;
  mix-blend-mode: screen;
  filter: blur(10px);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  will-change: transform;
}

@keyframes driftA {
  0%   { transform: translate3d(-8%, -6%, 0) scale(1); }
  100% { transform: translate3d(10%, 8%, 0) scale(1.15); }
}

@keyframes driftB {
  0%   { transform: translate3d(6%, -8%, 0) scale(1.1); }
  100% { transform: translate3d(-10%, 10%, 0) scale(0.95); }
}

@keyframes driftC {
  0%   { transform: translate3d(-6%, 8%, 0) scale(0.95); }
  100% { transform: translate3d(9%, -9%, 0) scale(1.1); }
}

.pattern-ocean .wave {
  position: absolute;
  top: var(--top);
  left: -20%;
  width: 140%;
  height: 30vh;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, var(--c) 0%, transparent 70%);
  filter: blur(20px);
  animation-name: waveDrift;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  will-change: transform;
}

@keyframes waveDrift {
  0%   { transform: translate3d(-4%, 0, 0) scaleY(1); }
  100% { transform: translate3d(4%, -2%, 0) scaleY(1.2); }
}

.pattern-neon .pulse {
  position: absolute;
  top: var(--top);
  left: var(--left);
  width: var(--size);
  height: var(--size);
  background: radial-gradient(circle, var(--c) 0%, transparent 65%);
  border-radius: 50%;
  mix-blend-mode: screen;
  filter: blur(10px);
  animation-name: neonPulse;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}

@keyframes neonPulse {
  0%, 100% { transform: scale(0.85); opacity: 0.55; }
  50%      { transform: scale(1.15); opacity: 1; }
}

.stars {
  position: absolute;
  inset: 0;
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #fff;
  border-radius: 50%;
  animation-name: twinkle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.15; }
  50%      { opacity: 0.9; }
}

.pattern-sunset {
  animation: hueDrift 60s linear infinite;
}

@keyframes hueDrift {
  0%   { filter: hue-rotate(0deg); }
  50%  { filter: hue-rotate(20deg); }
  100% { filter: hue-rotate(0deg); }
}

.pattern-smoke {
  filter: saturate(160%) brightness(1.15);
}

.pattern-smoke .smoke {
  position: absolute;
  top: var(--top);
  left: var(--left);
  width: var(--size);
  height: var(--size);
  background: radial-gradient(circle, var(--c) 0%, transparent 70%);
  border-radius: 42% 58% 60% 40% / 55% 45% 58% 42%;
  mix-blend-mode: screen;
  filter: blur(18px);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: transform, opacity, filter;
}

/* Each plume drifts gently in place, then gets "blown" clear across
   the screen by a sudden gust (fast cubic-bezier + large vw/vh
   displacement), dispersing (blur/scale up, opacity dip) as it
   travels before reforming and settling back to a slow drift. */

@keyframes gustA {
  0%   { transform: translate(-1vw, 0vh) scale(1) rotate(0deg); opacity: 0.95; filter: blur(18px); }
  28%  { transform: translate(2vw, -2vh) scale(1.02) rotate(2deg); opacity: 1; filter: blur(18px); animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.35); }
  38%  { transform: translate(48vw, 10vh) scale(1.3) rotate(16deg); opacity: 0.55; filter: blur(34px); animation-timing-function: ease-out; }
  58%  { transform: translate(52vw, 14vh) scale(1.1) rotate(12deg); opacity: 0.9; filter: blur(20px); }
  100% { transform: translate(-1vw, 0vh) scale(1) rotate(0deg); opacity: 0.95; filter: blur(18px); }
}

@keyframes gustB {
  0%   { transform: translate(2vw, 1vh) scale(1.02) rotate(0deg); opacity: 0.9; filter: blur(18px); }
  45%  { transform: translate(0vw, 3vh) scale(1.05) rotate(-2deg); opacity: 1; filter: blur(18px); animation-timing-function: cubic-bezier(0.6, 0, 0.85, 0.3); }
  55%  { transform: translate(-46vw, -12vh) scale(1.3) rotate(-15deg); opacity: 0.5; filter: blur(36px); animation-timing-function: ease-out; }
  75%  { transform: translate(-50vw, -16vh) scale(1.1) rotate(-10deg); opacity: 0.85; filter: blur(20px); }
  100% { transform: translate(2vw, 1vh) scale(1.02) rotate(0deg); opacity: 0.9; filter: blur(18px); }
}

@keyframes gustC {
  0%   { transform: translate(0vw, -1vh) scale(0.98) rotate(0deg); opacity: 0.85; filter: blur(18px); }
  55%  { transform: translate(2vw, 0vh) scale(1) rotate(3deg); opacity: 1; filter: blur(18px); animation-timing-function: cubic-bezier(0.6, 0, 0.88, 0.32); }
  65%  { transform: translate(6vw, 42vh) scale(1.28) rotate(18deg); opacity: 0.5; filter: blur(34px); animation-timing-function: ease-out; }
  82%  { transform: translate(8vw, 47vh) scale(1.08) rotate(13deg); opacity: 0.82; filter: blur(20px); }
  100% { transform: translate(0vw, -1vh) scale(0.98) rotate(0deg); opacity: 0.85; filter: blur(18px); }
}

@keyframes gustD {
  0%   { transform: translate(-1vw, 1vh) scale(1.03) rotate(0deg); opacity: 0.92; filter: blur(18px); }
  22%  { transform: translate(-2vw, 0vh) scale(1.02) rotate(-3deg); opacity: 1; filter: blur(18px); animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.35); }
  30%  { transform: translate(-44vw, -38vh) scale(1.3) rotate(-17deg); opacity: 0.5; filter: blur(36px); animation-timing-function: ease-out; }
  48%  { transform: translate(-48vw, -42vh) scale(1.1) rotate(-12deg); opacity: 0.88; filter: blur(20px); }
  100% { transform: translate(-1vw, 1vh) scale(1.03) rotate(0deg); opacity: 0.92; filter: blur(18px); }
}

.pattern-deepsky .sky-glow {
  position: absolute;
  inset: -10%;
  background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(150, 170, 255, 0.16) 0%, rgba(90, 70, 160, 0.08) 45%, transparent 75%);
  animation: skyBreathe 16s ease-in-out infinite;
}

@keyframes skyBreathe {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

.pattern-deepsky .milkyway {
  position: absolute;
  inset: -30%;
  background: linear-gradient(100deg,
    transparent 25%,
    rgba(180, 190, 255, 0.05) 38%,
    rgba(225, 215, 255, 0.16) 47%,
    rgba(255, 250, 240, 0.22) 50%,
    rgba(225, 215, 255, 0.16) 53%,
    rgba(180, 190, 255, 0.05) 62%,
    transparent 75%);
  transform: rotate(-22deg);
  filter: blur(6px);
  animation: milkywayDrift 100s linear infinite alternate;
}

@keyframes milkywayDrift {
  0%   { transform: rotate(-22deg) translateX(-3%); }
  100% { transform: rotate(-22deg) translateX(3%); }
}

.pattern-deepsky .star-bright {
  box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.8);
}

/* Warm translucent "liquid" tint instead of flat black, like a
   backlit lamp glass, plus a brighter glow pooling near the base. */

.pattern-lava .lava-glass {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 85% 90% at 50% 100%,
    rgba(150, 55, 12, 0.5) 0%,
    rgba(80, 30, 10, 0.55) 35%,
    rgba(30, 12, 5, 0.7) 65%,
    rgba(6, 3, 2, 0.88) 100%);
}

.pattern-lava .lava-glow {
  position: absolute;
  inset: -10%;
  background: radial-gradient(ellipse 55% 45% at 50% 105%, rgba(255, 150, 40, 0.4) 0%, rgba(150, 40, 15, 0.18) 45%, transparent 75%);
  animation: skyBreathe 18s ease-in-out infinite;
}

.pattern-lava .lava-blobs {
  position: absolute;
  inset: 0;
  filter: url(#lava-goo);
}

/* Glossy wax blobs shaded like a real lava lamp: a bright off-center
   highlight, a mid-tone body, and a darker rim, with a light blur so
   edges stay defined instead of a soft neon glow. The shared goo
   filter on .lava-blobs makes nearby blobs melt into one shape. */

.pattern-lava .lava-blob {
  position: absolute;
  top: var(--top);
  left: var(--left);
  width: var(--size);
  height: var(--size);
  background: radial-gradient(circle at 34% 26%, var(--hl) 0%, var(--mid) 38%, var(--mid) 58%, var(--dk) 88%, var(--dk) 100%);
  filter: blur(3px);
  box-shadow:
    inset -14px -18px 26px rgba(0, 0, 0, 0.5),
    inset 10px 12px 18px rgba(255, 255, 255, 0.12);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: transform;
}

/* Blobs rise/sink through large vh travel; scaleX/scaleY diverge in
   transit to stretch into a teardrop, then relax back toward round
   at the top/bottom of each run, like wax pinching and pooling. */

@keyframes lavaFloatA {
  0%   { transform: translate(-1vw, 24vh) scaleX(1) scaleY(1);        border-radius: 48% 52% 55% 45% / 55% 58% 42% 45%; }
  22%  { transform: translate(2vw, 2vh) scaleX(0.92) scaleY(1.22);    border-radius: 38% 62% 65% 35% / 65% 55% 45% 35%; }
  50%  { transform: translate(-2vw, -30vh) scaleX(1.06) scaleY(0.94); border-radius: 60% 40% 45% 55% / 40% 50% 60% 50%; }
  72%  { transform: translate(2vw, -8vh) scaleX(0.9) scaleY(1.25);    border-radius: 32% 68% 60% 40% / 68% 38% 55% 45%; }
  100% { transform: translate(-1vw, 24vh) scaleX(1) scaleY(1);        border-radius: 48% 52% 55% 45% / 55% 58% 42% 45%; }
}

@keyframes lavaFloatB {
  0%   { transform: translate(2vw, -24vh) scaleX(0.96) scaleY(1.06);  border-radius: 42% 58% 55% 45% / 60% 40% 55% 45%; }
  28%  { transform: translate(-2vw, -2vh) scaleX(0.88) scaleY(1.28);  border-radius: 62% 38% 40% 60% / 68% 42% 40% 60%; }
  58%  { transform: translate(3vw, 26vh) scaleX(1.08) scaleY(0.92);   border-radius: 50% 50% 60% 40% / 40% 45% 55% 50%; }
  84%  { transform: translate(-2vw, 6vh) scaleX(0.9) scaleY(1.2);     border-radius: 40% 60% 35% 65% / 62% 38% 60% 40%; }
  100% { transform: translate(2vw, -24vh) scaleX(0.96) scaleY(1.06);  border-radius: 42% 58% 55% 45% / 60% 40% 55% 45%; }
}

@keyframes lavaFloatC {
  0%   { transform: translate(-3vw, 10vh) scaleX(1.05) scaleY(0.96);  border-radius: 55% 45% 45% 55% / 50% 55% 45% 50%; }
  32%  { transform: translate(3vw, -16vh) scaleX(0.9) scaleY(1.24);   border-radius: 35% 65% 62% 38% / 66% 40% 60% 34%; }
  62%  { transform: translate(-3vw, -1vh) scaleX(1.1) scaleY(0.9);    border-radius: 62% 38% 42% 58% / 38% 62% 42% 58%; }
  100% { transform: translate(-3vw, 10vh) scaleX(1.05) scaleY(0.96);  border-radius: 55% 45% 45% 55% / 50% 55% 45% 50%; }
}

/* ---------- Clock ---------- */

#clock-container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  user-select: none;
}

#clock {
  color: #fff;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 20vw;
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  -webkit-text-stroke: 3px #000;
  paint-order: stroke fill;
  text-shadow:
    -2px -2px 0 #000,
     2px -2px 0 #000,
    -2px  2px 0 #000,
     2px  2px 0 #000,
     0 0 3px #000,
     0 0 30px rgba(0, 0, 0, 0.6);
}

#clock-ampm {
  display: inline-block;
  font-size: 4vw;
  letter-spacing: 0.05em;
  margin-left: 0.8vw;
  vertical-align: middle;
}

/* Hard blink when a countdown timer hits zero. */
@keyframes timerFlash {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

.timer-flash {
  animation: timerFlash 0.6s steps(1, end) infinite;
}

/* ---------- Digit color themes ---------- */
/* Each colored theme keeps the same black outline for legibility and
   throbs a colored glow (fade in/out) in an infinite loop instead of
   sitting static. Applied at the #clock-container level so both the
   time and the date pick up the same color + glow, via shared
   --glow-r/g/b custom properties consumed by two shared keyframe
   sets (one sized for the big clock digits, one for the small date
   text) instead of duplicating a keyframe per color. */

#clock-container.theme-cyan    { --glow-r: 0;   --glow-g: 234; --glow-b: 255; color: #00eaff; }
#clock-container.theme-magenta { --glow-r: 255; --glow-g: 43;  --glow-b: 214; color: #ff2bd6; }
#clock-container.theme-gold    { --glow-r: 255; --glow-g: 209; --glow-b: 102; color: #ffd166; }
#clock-container.theme-green   { --glow-r: 57;  --glow-g: 255; --glow-b: 136; color: #39ff88; }
#clock-container.theme-red     { --glow-r: 255; --glow-g: 59;  --glow-b: 59;  color: #ff3b3b; }

#clock-container.theme-cyan #clock,
#clock-container.theme-magenta #clock,
#clock-container.theme-gold #clock,
#clock-container.theme-green #clock,
#clock-container.theme-red #clock {
  color: inherit;
  animation: throbGlowClock 2.6s ease-in-out infinite alternate;
}

#clock-container.theme-cyan #date,
#clock-container.theme-magenta #date,
#clock-container.theme-gold #date,
#clock-container.theme-green #date,
#clock-container.theme-red #date {
  color: inherit;
  animation: throbGlowDate 2.6s ease-in-out infinite alternate;
}

@keyframes throbGlowClock {
  0% {
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 0 3px #000,
      0 0 10px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.35),
      0 0 26px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.22);
  }
  100% {
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 0 3px #000,
      0 0 16px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.95),
      0 0 46px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.65),
      0 0 80px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.35);
  }
}

@keyframes throbGlowDate {
  0% {
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8),
      0 0 4px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.35),
      0 0 10px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.22);
  }
  100% {
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8),
      0 0 7px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.95),
      0 0 18px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.65),
      0 0 32px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.35);
  }
}

#clock-container.theme-cyberpunk {
  --glow-a-r: 255; --glow-a-g: 43;  --glow-a-b: 214;
  --glow-b-r: 0;   --glow-b-g: 234; --glow-b-b: 255;
}

#clock-container.theme-cyberpunk #clock {
  animation: throbCyberpunkClock 3.4s ease-in-out infinite;
}

#clock-container.theme-cyberpunk #date {
  animation: throbCyberpunkDate 3.4s ease-in-out infinite;
}

@keyframes throbCyberpunkClock {
  0%, 100% {
    color: rgb(var(--glow-a-r), var(--glow-a-g), var(--glow-a-b));
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 0 3px #000,
      0 0 16px rgba(var(--glow-a-r), var(--glow-a-g), var(--glow-a-b), 0.95),
      0 0 46px rgba(var(--glow-a-r), var(--glow-a-g), var(--glow-a-b), 0.6),
      0 0 10px rgba(var(--glow-b-r), var(--glow-b-g), var(--glow-b-b), 0.2),
      0 0 30px rgba(var(--glow-b-r), var(--glow-b-g), var(--glow-b-b), 0.12);
  }
  50% {
    color: rgb(var(--glow-b-r), var(--glow-b-g), var(--glow-b-b));
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 0 3px #000,
      0 0 10px rgba(var(--glow-a-r), var(--glow-a-g), var(--glow-a-b), 0.2),
      0 0 30px rgba(var(--glow-a-r), var(--glow-a-g), var(--glow-a-b), 0.12),
      0 0 16px rgba(var(--glow-b-r), var(--glow-b-g), var(--glow-b-b), 0.95),
      0 0 46px rgba(var(--glow-b-r), var(--glow-b-g), var(--glow-b-b), 0.6);
  }
}

@keyframes throbCyberpunkDate {
  0%, 100% {
    color: rgb(var(--glow-a-r), var(--glow-a-g), var(--glow-a-b));
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8),
      0 0 7px rgba(var(--glow-a-r), var(--glow-a-g), var(--glow-a-b), 0.95),
      0 0 18px rgba(var(--glow-a-r), var(--glow-a-g), var(--glow-a-b), 0.6),
      0 0 4px rgba(var(--glow-b-r), var(--glow-b-g), var(--glow-b-b), 0.2),
      0 0 12px rgba(var(--glow-b-r), var(--glow-b-g), var(--glow-b-b), 0.12);
  }
  50% {
    color: rgb(var(--glow-b-r), var(--glow-b-g), var(--glow-b-b));
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8),
      0 0 4px rgba(var(--glow-a-r), var(--glow-a-g), var(--glow-a-b), 0.2),
      0 0 12px rgba(var(--glow-a-r), var(--glow-a-g), var(--glow-a-b), 0.12),
      0 0 7px rgba(var(--glow-b-r), var(--glow-b-g), var(--glow-b-b), 0.95),
      0 0 18px rgba(var(--glow-b-r), var(--glow-b-g), var(--glow-b-b), 0.6);
  }
}

#date {
  color: #fff;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 3vw;
  margin-top: 1.5vw;
  opacity: 0.85;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: opacity 0.2s ease;
  -webkit-text-stroke: 1px #000;
  paint-order: stroke fill;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}

#date.hidden {
  display: none;
}

#date.status-fade {
  opacity: 0;
  transition: opacity 1s ease;
}

/* ---------- Toolbar ---------- */

#toolbar {
  position: fixed;
  z-index: 2;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  gap: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

#toolbar.visible {
  opacity: 1;
  pointer-events: auto;
}

.toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.toolbar-btn[hidden],
.toolbar-btn svg[hidden] {
  display: none;
}

.toolbar-btn-text {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
}

.toolbar-btn:hover,
.toolbar-btn:focus {
  opacity: 1;
  background: rgba(255, 255, 255, 0.15);
}

.toolbar-btn.active {
  opacity: 1;
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.7);
}

.side-panel {
  position: fixed;
  z-index: 2;
  bottom: 76px;
  left: 0;
  transform: scale(0.96);
  transform-origin: bottom center;
  list-style: none;
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 6px;
  min-width: 170px;
  max-height: 40vh;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.side-panel.visible {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.side-panel li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}

.side-panel li:hover {
  background: rgba(255, 255, 255, 0.12);
}

.side-panel li.active {
  color: #000;
  background: #fff;
}

@media (max-width: 600px) {
  #clock {
    font-size: 16vw;
  }
  #clock-ampm {
    font-size: 3.4vw;
  }
  #date {
    font-size: 4vw;
  }
  #toolbar {
    bottom: 12px;
    gap: 8px;
  }
  .toolbar-btn {
    width: 40px;
    height: 40px;
  }
  .side-panel {
    bottom: 60px;
    max-width: 90vw;
  }
}