/* Orb Tabs — step 1: the bar, its round notch and the ball; they jump to the tab you tap */
/* Every colour below comes from these variables: change them to make it yours */
:root {
  --sans: 'Geist', -apple-system, system-ui, sans-serif; --serif: 'Instrument Serif', Georgia, serif;
  --bg-a: #1F2022; --bg-b: #111213; --bg-c: #080809; --glow: rgba(200, 255, 60, .12);
  --bar-a: #34363A; --bar-b: #202225; --bar-c: #151618;
  --ball-hi: #FBFFE0; --ball-1: #E4FF7A; --ball-2: #C6F53C; --ball-3: #8FBF12; --ball-4: #5C8008;
  --icon-on: #1A2204; --bar-icon: #7D8086;
  --ink: #F4F6EE; --ink-2: #83878C; --accent: #C6F53C; --chip-text: #1A2204; --shade: rgba(0, 0, 0, .6);
}
.bar-a { stop-color: var(--bar-a); } .bar-b { stop-color: var(--bar-b); } .bar-c { stop-color: var(--bar-c); }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--sans); color: var(--ink); background: var(--bg-b);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none; overflow: hidden;
}

/* ---- the stage: a dark gradient, a soft glow where the bar is ---- */
.stage {
  position: relative; height: 100dvh; display: grid; place-items: center;
  background:
    radial-gradient(46% 16% at 50% 58%, var(--glow), transparent 70%),
    linear-gradient(180deg, var(--bg-a) 0%, var(--bg-b) 55%, var(--bg-c) 100%);
}
.stage::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.frame { position: relative; width: 432px; height: 768px; flex: none; display: grid; place-items: center; transform: scale(var(--k, 1)); }

/* ---- the words ---- */
.title { position: absolute; top: 88px; left: 0; right: 0; text-align: center; }
.series {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 0 0 14px; font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-2);
}
.series b { display: inline-grid; place-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11px; letter-spacing: .04em; color: var(--chip-text); background: var(--accent); }
.title h1 { margin: 0; font-size: 80px; font-weight: 700; line-height: .9; letter-spacing: -.055em; }
.title h1 em { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 1.08em; letter-spacing: -.02em; color: var(--accent); }
.hint { margin: 16px 0 0; font-size: 15px; color: var(--ink-2); }

/* ---- the component: 372 × 140, the bar's top edge at y = 50 ---- */
.orbbar { position: relative; width: 372px; height: 140px; touch-action: none; }
.bar { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.tab {
  position: absolute; top: 0; left: 0; width: 52px; height: 52px; margin: -26px 0 0 -26px; z-index: 2;
  display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--bar-icon); border-radius: 50%;
}
.tab:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.icon { width: 24px; height: 24px; overflow: visible; will-change: transform; }
.icon .line { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon .line .dot, .icon .line .sun { fill: currentColor; stroke: none; }
.icon .fill { display: none; }

/* the orb: a solid, glossy ceramic ball (no glass, no blur), lit from the upper left */
.orb {
  position: absolute; top: 0; left: 0; width: 56px; height: 56px; margin: -28px 0 0 -28px; z-index: 1;
  border-radius: 50%; pointer-events: none; will-change: transform;
  background:
    radial-gradient(circle at 34% 28%, var(--ball-hi) 0%, var(--ball-1) 20%, var(--ball-2) 48%, var(--ball-3) 82%, var(--ball-4) 100%);
  box-shadow:
    inset -5px -8px 14px rgba(0, 0, 0, .3),
    inset 3px 4px 8px rgba(255, 255, 255, .3),
    0 14px 22px -8px var(--shade),
    0 4px 8px -3px rgba(0, 0, 0, .3);
}