/* Shared by Motion Studio (index.html) and Fan Studio (fan.html): palette, glass, buttons, toast. */

:root {
  --bg: #edf0f4;
  --glass: rgba(255, 255, 255, .72);
  --text: #111318;
  --muted: #777b84;
  --line: rgba(18, 21, 29, .08);
  --shadow: 0 24px 72px rgba(28, 34, 48, .12), 0 5px 18px rgba(28, 34, 48, .06);
  --blue: #0a84ff;
  --green: #30b14f;
  --orange: #f08a12;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box }

body {
  background:
    radial-gradient(circle at 12% 0%, rgba(98, 181, 255, .16), transparent 28%),
    radial-gradient(circle at 87% 4%, rgba(171, 139, 255, .15), transparent 25%),
    var(--bg);
  color: var(--text);
}

button, input, select, textarea { font: inherit }

.glass {
  background: var(--glass);
  border: 1px solid rgba(255, 255, 255, .75);
  backdrop-filter: blur(28px) saturate(145%);
  -webkit-backdrop-filter: blur(28px) saturate(145%);
  box-shadow: var(--shadow);
}

/* The logo: two eyes that look around, the same pair the router draws on its own screen. */
.mark { width: 42px; height: 42px; border-radius: 14px; background: #111318; display: grid; place-items: center; overflow: hidden; flex: none }
.mark .pair { display: flex; gap: 6px; animation: botLook 6s ease-in-out infinite }
.mark .bot-eye {
  display: block; width: 8px; height: 13px; border-radius: 5px; background: #fff;
  box-shadow: 0 0 7px rgba(120, 190, 255, .75); animation: botBlink 5.3s infinite; transform-origin: center;
}
.mark .bot-eye:nth-child(2) { animation-delay: .04s }
@keyframes botLook {
  0%, 8% { transform: translate(0, 0) }
  14%, 28% { transform: translate(-7px, -2px) }
  36%, 50% { transform: translate(7px, 2px) }
  58%, 66% { transform: translate(0, -5px) }
  74%, 82% { transform: translate(-5px, 4px) }
  90%, 100% { transform: translate(0, 0) }
}
@keyframes botBlink { 0%, 88%, 100% { transform: scaleY(1) } 91%, 94% { transform: scaleY(.08) } }
/* A few pixels of motion, so it stays alive under reduced motion, only slower. */
@media (prefers-reduced-motion: reduce) {
  .mark .pair { animation-duration: 9s }
  .mark .bot-eye { animation-duration: 6s }
}

.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: 8px; font-weight: 800; color: var(--muted); margin-bottom: 3px }

.soft-btn, .dark-btn { border: 0; cursor: pointer; font-weight: 700; height: 36px; border-radius: 11px; padding: 0 14px; font-size: 9px }
.soft-btn { background: rgba(255, 255, 255, .65); box-shadow: inset 0 0 0 1px var(--line) }
.dark-btn { background: #111318; color: #fff; box-shadow: 0 7px 18px rgba(17, 19, 24, .15) }
.soft-btn:hover, .dark-btn:hover { transform: translateY(-1px) }
.soft-btn:disabled, .dark-btn:disabled { opacity: .45; cursor: default; transform: none }

/* Motion Studio and Fan Studio are one tool in two pages; this is how you get between them. */
.nav-slot { display: flex; flex: none }
.studio-nav { display: flex; gap: 3px; padding: 3px; border-radius: 12px; background: rgba(255, 255, 255, .56); box-shadow: inset 0 0 0 1px var(--line); flex: none }
.studio-nav a {
  text-decoration: none; color: var(--muted); font-size: 9px; font-weight: 750;
  padding: 7px 13px; border-radius: 10px; white-space: nowrap;
}
.studio-nav a.on { background: #fff; color: var(--text); box-shadow: 0 3px 10px rgba(20, 24, 34, .08) }

/* The walkthrough, shown once and reachable again from the ? button. */
.help-btn { width: 34px; padding: 0; border-radius: 50%; font-size: 13px; flex: none }
.guide-back {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 18px;
  background: rgba(16, 20, 28, .46); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.guide {
  width: min(760px, 100%); max-height: 100%; overflow: auto; border-radius: 24px; padding: 20px 22px 18px;
  background: var(--bg); box-shadow: 0 30px 90px rgba(18, 22, 32, .3);
}
/* Explicit, because Fan Studio styles its own h2 as a small uppercase label. */
.guide h2 { margin: 0; font-size: 17px; letter-spacing: -.02em; text-transform: none; color: var(--text) }
.guide > p { margin: 5px 0 0; font-size: 10px; color: var(--muted); line-height: 1.6 }
.guide-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; margin: 16px 0 14px }
@media (max-width: 720px) { .guide-steps { grid-template-columns: 1fr 1fr } }
@media (max-width: 420px) { .guide-steps { grid-template-columns: 1fr } }
.guide-step { background: rgba(255, 255, 255, .66); border-radius: 15px; padding: 11px; box-shadow: inset 0 0 0 1px var(--line) }
.guide-step figure { margin: 0 0 9px; border-radius: 10px; background: #111318; padding: 8px; display: grid; place-items: center }
.guide-step svg { width: 100%; height: 56px; display: block }
.guide-step b { display: block; font-size: 10.5px; margin-bottom: 3px }
.guide-step b i { font-style: normal; color: var(--blue); margin-right: 5px }
.guide-step small { display: block; font-size: 9px; color: var(--muted); line-height: 1.55 }
.guide-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.guide-foot small { font-size: 9px; color: var(--muted); line-height: 1.55; flex: 1; min-width: 180px }

.toast {
  position: fixed; left: 50%; bottom: 18px; z-index: 100; transform: translate(-50%, 18px); opacity: 0;
  background: rgba(17, 19, 24, .94); color: #fff; border-radius: 11px; padding: 9px 13px;
  font-size: 9px; font-weight: 750; pointer-events: none; transition: .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0) }

.hidden { display: none !important }