/* Orb Tabs — a dark bar with a soft notch; a glossy ceramic ball in it carries the chosen tab's icon */
:root { --sans: 'Geist', -apple-system, system-ui, sans-serif; --serif: 'Instrument Serif', Georgia, serif; }

/* Five palettes: every colour below comes from these variables (chosen with ?palette=… on the URL) */
[data-palette="midnight"] {           /* deep navy night, a coral-tangerine ball */
  --bg-a: #1B2350; --bg-b: #0B1030; --bg-c: #060818; --glow: rgba(255, 120, 90, .22);
  --bar-a: #2A3470; --bar-b: #161D46; --bar-c: #0D1230; --rim: rgba(170, 185, 255, .30);
  --ball-hi: #FFE1CF; --ball-1: #FF9A73; --ball-2: #FF5E4D; --ball-3: #C8324A; --ball-4: #8E1F3C;
  --icon-on: #FFFFFF; --bar-icon: #7E88C2; --caption: #FFB199;
  --ink: #F3F4FF; --ink-2: #8B93C7; --accent: #FF7A5C; --chip-text: #fff; --shade: rgba(0, 0, 0, .55);
}
[data-palette="snow"] {               /* all white, a black lacquer ball */
  --bg-a: #FFFFFF; --bg-b: #F1F1F3; --bg-c: #E4E4E8; --glow: rgba(0, 0, 0, .05);
  --bar-a: #FFFFFF; --bar-b: #F7F7F9; --bar-c: #ECECF0; --rim: rgba(255, 255, 255, 1);
  --ball-hi: #8A8A92; --ball-1: #3A3A42; --ball-2: #1B1B20; --ball-3: #0B0B0E; --ball-4: #000000;
  --icon-on: #FFFFFF; --bar-icon: #A2A2AC; --caption: #1B1B20;
  --ink: #111114; --ink-2: #7C7C86; --accent: #111114; --chip-text: #fff; --shade: rgba(20, 20, 40, .22);
}
[data-palette="cobalt"] {             /* electric cobalt stage, a white bar, a cobalt ball */
  --bg-a: #3D5BFF; --bg-b: #2442F0; --bg-c: #1A30C9; --glow: rgba(255, 255, 255, .20);
  --bar-a: #FFFFFF; --bar-b: #F4F6FF; --bar-c: #E6EAFF; --rim: rgba(255, 255, 255, 1);
  --ball-hi: #D6DEFF; --ball-1: #6F86FF; --ball-2: #2F4BFF; --ball-3: #1B2FC4; --ball-4: #111F8A;
  --icon-on: #FFFFFF; --bar-icon: #97A3E6; --caption: #1B2FC4;
  --ink: #FFFFFF; --ink-2: rgba(255, 255, 255, .72); --accent: #FFFFFF; --chip-text: #1B2FC4; --shade: rgba(10, 20, 120, .45);
}
[data-palette="volt"] {               /* black and graphite, an acid-lime ball */
  --bg-a: #1F2022; --bg-b: #111213; --bg-c: #080809; --glow: rgba(200, 255, 60, .12);
  --bar-a: #34363A; --bar-b: #202225; --bar-c: #151618; --rim: rgba(255, 255, 255, .16);
  --ball-hi: #FBFFE0; --ball-1: #E4FF7A; --ball-2: #C6F53C; --ball-3: #8FBF12; --ball-4: #5C8008;
  --icon-on: #1A2204; --bar-icon: #7D8086; --caption: #C6F53C;
  --ink: #F4F6EE; --ink-2: #83878C; --accent: #C6F53C; --chip-text: #1A2204; --shade: rgba(0, 0, 0, .6);
}
[data-palette="plum"] {               /* soft blush stage, a plum bar, a rose-pink ball */
  --bg-a: #FBEFF3; --bg-b: #F6E1EA; --bg-c: #EDCFDD; --glow: rgba(214, 90, 150, .14);
  --bar-a: #5B2A57; --bar-b: #3F1B3E; --bar-c: #2A1029; --rim: rgba(255, 210, 235, .28);
  --ball-hi: #FFE8F2; --ball-1: #FF9CC6; --ball-2: #F0609F; --ball-3: #C23A7C; --ball-4: #8C215A;
  --icon-on: #FFFFFF; --bar-icon: #B98BB6; --caption: #FFB7D6;
  --ink: #2A1029; --ink-2: #8E6A86; --accent: #D24C8C; --chip-text: #fff; --shade: rgba(60, 20, 60, .38);
}
.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: the palette's 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; }
.shade { position: absolute; left: 22px; right: 22px; top: 76px; height: 56px; border-radius: 40px; background: var(--shade); filter: blur(22px); }
.bar { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bar-rim { fill: none; stroke: var(--rim); stroke-width: 1.2; }

.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);
}
.orb .glint { position: absolute; top: 8px; left: 12px; width: 16px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .9); transform: rotate(-30deg); filter: blur(1px); }
.orb .caustic { position: absolute; bottom: 4px; left: 50%; width: 28px; height: 8px; margin-left: -14px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 240, 200, .6), rgba(255, 240, 200, 0)); }

.caption { position: absolute; top: 0; left: 0; margin: 0; transform: translate(-50%, -50%); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--caption); white-space: nowrap; pointer-events: none; z-index: 2; }
.caption i { display: inline-block; font-style: normal; animation: letter .45s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(var(--k2) * 26ms); }
@keyframes letter { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }

/* ---- the frame's footer ---- */
.tutorial {
  position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); margin: 0;
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  padding: 10px 18px 10px 11px; border-radius: 999px; font-size: 14px; font-weight: 600; color: #fff;
  background: var(--bar-b); box-shadow: 0 14px 28px -12px var(--shade); color: var(--caption);
}
.tutorial svg { width: 24px; height: 24px; padding: 5px; border-radius: 50%; fill: var(--icon-on); background: radial-gradient(circle at 34% 28%, var(--ball-hi), var(--ball-2) 55%, var(--ball-3)); }
.tutorial span { font-weight: 400; opacity: .6; }
.credits { position: absolute; left: 28px; right: 24px; bottom: 34px; display: flex; align-items: center; justify-content: space-between; }
.stack { margin: 0; font-size: 10.5px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-2); }
.stack i { font-style: normal; color: var(--accent); margin: 0 3px; }
.logo { margin: 0; display: flex; align-items: center; gap: 7px; }
.logo .avatar { width: 28px; height: 28px; border-radius: 50%; box-shadow: 0 0 0 1.2px var(--ink); }
.logo .lockup { height: 24px; width: auto; }
[data-palette="snow"] .logo .lockup, [data-palette="plum"] .logo .lockup { filter: invert(1) brightness(.3); }

/* ---- the touch circle ---- */
.touch {
  position: fixed; top: 0; left: 0; z-index: 10; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%; pointer-events: none; opacity: 0;
  border: 1.5px solid var(--ink); background: color-mix(in srgb, var(--ink) 12%, transparent); transition: opacity .12s;
}
.touch.is-on { opacity: 1; }

@media (prefers-reduced-motion: reduce) { .touch { transition: none; } .caption i { animation: none; } }