/* ---------- the Generator's three ways in ----------
   The three windows open over the page; the bar under the title switches mode at any time.
   In Modulator and Advanced the Composer takes the place of the sound types and their screens. */
:root { --c-out: #FF7B7B; }
body.gm-open { overflow: hidden; }
.gm-veil { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px 16px; background: rgba(4, 6, 18, 0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); overflow-y: auto; }
.gm-dlg { width: min(1060px, 100%); display: flex; flex-direction: column; gap: 18px; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7); }
.gm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.gm-kick { margin: 0 0 4px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.gm-head h2 { margin: 0; font-size: clamp(1.3rem, 2.6vw, 1.75rem); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.gm-x { flex: none; width: 40px; height: 40px; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; color: var(--muted); cursor: pointer; }
.gm-x:hover { color: var(--ink); border-color: var(--muted); }
.gm-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.gm-wins { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 760px) { .gm-wins { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gm-win { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 0 0 16px; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; color: var(--muted); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.gm-win:hover, .gm-win:focus-visible { border-color: var(--k); transform: translateY(-2px); box-shadow: 0 16px 40px -18px color-mix(in srgb, var(--k) 60%, transparent); outline: none; }
.gm-win[aria-pressed="true"] { border-color: color-mix(in srgb, var(--k) 70%, var(--line)); }
.gm-win > :not(.gm-chrome):not(.gm-art) { padding-inline: 16px; }
.gm-chrome { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.08em; color: var(--muted); }
.gm-chrome i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.gm-chrome i:first-child { background: var(--k); }
.gm-chrome span { margin-left: 6px; }
.gm-last { margin-left: auto; font-weight: 400; color: var(--k); text-transform: uppercase; letter-spacing: 0.1em; }
.gm-win strong { margin-top: 4px; font-size: 1.2rem; font-weight: 600; color: var(--ink); }
.gm-tag { margin-top: -6px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--k); }
.gm-desc { font-size: 0.9rem; line-height: 1.5; color: var(--muted); }
.gm-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; }
.gm-list span { padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.72rem; color: var(--ink); }
.gm-foot { margin: 0; font-size: 0.82rem; color: var(--muted); }

/* the bar under the title */
.gm-bar { position: relative; display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 18px; padding: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; }
.gm-bar button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: transparent; border: 0; border-radius: 9px; font: inherit; font-size: 0.9rem; color: var(--muted); cursor: pointer; }
.gm-bar button i { width: 8px; height: 8px; border-radius: 50%; background: var(--k); opacity: 0.5; }
.gm-bar button:hover { color: var(--ink); }
.gm-bar button[aria-pressed="true"] { background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k) 55%, transparent); }
.gm-bar button[aria-pressed="true"] i { opacity: 1; box-shadow: 0 0 8px var(--k); }

/* Modulator and Advanced: the Composer instead of the sound types */
body:is([data-gmode="mod"], [data-gmode="adv"]) .app > :is(.ktabs, #scr-gen, #scr-sf, #scr-in, #scr-bw, .tabname2),
body:is([data-gmode="mod"], [data-gmode="adv"]) .app .tabname { display: none !important; }
@media (min-width: 820px) {
  body:is([data-gmode="mod"], [data-gmode="adv"]) .app > header { grid-column: 1 / -1; }
  body:is([data-gmode="mod"], [data-gmode="adv"]) .app > header .lede { max-width: 72ch; }
  body:is([data-gmode="mod"], [data-gmode="adv"]) .app > #scr-co { grid-column: 1 / -1; grid-row: 2; margin-top: 26px; }
  body:is([data-gmode="mod"], [data-gmode="adv"]) .app > .fineprint { grid-row: 3; }
  body:is([data-gmode="mod"], [data-gmode="adv"]) .app > .legal { grid-row: 4; }
}

/* the cursor: one pill that slides to the chosen tab */
.gm-bar > .cur, #scr-co .idc-bar .idc-seg > .cur { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 9px; background: var(--surface-2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k, var(--accent)) 60%, transparent), 0 0 18px -6px var(--k, var(--accent)); transition: transform 0.28s cubic-bezier(.3,.7,.2,1), width 0.28s cubic-bezier(.3,.7,.2,1), opacity 0.2s; pointer-events: none; }
.gm-bar button, #scr-co .idc-bar .idc-seg button { position: relative; z-index: 1; }
.gm-bar button[aria-pressed="true"], #scr-co .idc-bar .idc-seg button[aria-pressed="true"] { background: transparent; box-shadow: none; }
#scr-co .idc-bar .idc-seg { position: relative; }

/* ---------- the three windows: one screen each, in the deep blue of the Sonik Labs mark ----------
   Same frame for all three: a perspective grid, two lines of readout, a faint scan, a thin line of the window's colour.
   Classic shows an oscilloscope, Modulator a session map with pulses travelling along its journeys, Advanced the synth.
   Colours stay quiet; the window you last used carries a slow light around its border. */
@property --gm-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.gm-win { position: relative; border: 1px solid color-mix(in srgb, var(--k) 22%, var(--line)); background: var(--bg); }
.gm-win[aria-pressed="true"] { border-color: transparent;
  background: linear-gradient(var(--bg), var(--bg)) padding-box,
              conic-gradient(from var(--gm-a), transparent 0deg, color-mix(in srgb, var(--k) 85%, transparent) 50deg, transparent 110deg, transparent 360deg) border-box,
              linear-gradient(color-mix(in srgb, var(--k) 25%, var(--line)), color-mix(in srgb, var(--k) 25%, var(--line))) border-box;
  animation: gmTurn 7s linear infinite; }
.gm-win:hover, .gm-win:focus-visible { box-shadow: 0 18px 46px -22px color-mix(in srgb, var(--k) 70%, transparent); }
.gm-chrome { background: linear-gradient(90deg, #0B2C5A, #0A2550 70%, #0E3466); border-bottom-color: rgba(77, 168, 255, 0.28); color: #9DB8DC; }
.gm-chrome i { background: rgba(157, 184, 220, 0.25); }
.gm-chrome i:first-child { background: var(--k); box-shadow: 0 0 6px color-mix(in srgb, var(--k) 70%, transparent); }
.gm-last { color: var(--k); }
.gm-pro { margin-left: 8px; padding: 0 6px; border: 1px solid color-mix(in srgb, var(--k) 60%, transparent); border-radius: 4px; font-style: normal; font-weight: 600; font-size: 0.56rem; letter-spacing: 0.18em; color: var(--k); }
.gm-tag { color: color-mix(in srgb, var(--k) 85%, var(--ink)); }
.gm-list span { border-color: rgba(77, 168, 255, 0.24); background: rgba(77, 168, 255, 0.05); color: #DCE6F7; }
.gm-win.adv .gm-list span:last-child { border-color: color-mix(in srgb, var(--k) 60%, transparent); color: #F7E7B5; }

.gm-art { display: block; width: 100%; height: 120px; padding: 0; background: #05142E; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.gm-art .grid path { stroke: #4DA8FF; stroke-opacity: 0.14; stroke-width: 0.5; }
.gm-art .scan { animation: gmScan 6s cubic-bezier(.45,.05,.55,.95) infinite; mix-blend-mode: screen; }
.gm-art .base { opacity: 0.6; }
.gm-art .hud { font: 600 6.2px var(--font-mono, monospace); letter-spacing: 0.14em; fill: #8FB9E6; stroke: none; }
.gm-art .hud.b { fill: #DCE6F7; opacity: 0.8; font-weight: 400; letter-spacing: 0.08em; }
.gm-art .hud.r { text-anchor: end; fill: var(--k); opacity: 0.85; }
.gm-art .drift { animation: gmDrift 9s linear infinite; }
.gm-art .tr { stroke: var(--k); stroke-width: 1.1; filter: drop-shadow(0 0 2.4px color-mix(in srgb, var(--k) 80%, transparent)); }
.gm-art .tr2 { stroke: var(--k); stroke-width: 0.6; opacity: 0.3; }
.gm-art .tr3 { stroke: #8FD0FF; stroke-width: 0.5; opacity: 0.22; }
/* Classic: the graticule of a scope */
.gm-art .grat path { stroke: #8FD0FF; stroke-opacity: 0.12; stroke-width: 0.5; }
.gm-art .ticks path { stroke: #8FD0FF; stroke-opacity: 0.35; stroke-width: 0.5; }
.gm-win.cls .drift { animation-duration: 12s; }
/* Modulator: the session map */
.gm-art .lanes path { stroke: #8FD0FF; stroke-opacity: 0.12; stroke-width: 0.5; stroke-dasharray: 1 3; }
.gm-art .lane { font: 600 4.6px var(--font-mono, monospace); letter-spacing: 0.16em; fill: #6F94C2; stroke: none; }
.gm-art .jl { stroke-width: 1; opacity: 0.85; }
.gm-art .jp { stroke-width: 2.2; opacity: 0.55; filter: blur(0.6px); animation: gmPulse 1.6s linear infinite; }
.gm-art .head { animation: gmHead 14s linear infinite; }
.gm-art .head path { stroke: #DCE6F7; stroke-width: 0.6; opacity: 0.7; }
.gm-art .head .hd { fill: #DCE6F7; stroke: none; }
/* Advanced: a calm spectrum under the trace */
.gm-art .eq { fill: url(#gmAdvBar); transform-box: fill-box; transform-origin: 50% 100%; animation: gmEq 2.2s cubic-bezier(.4,0,.2,1) infinite alternate; }
.gm-art .caps .cap { fill: #D6EAFF; opacity: 0.6; transform-box: view-box; animation: gmCap 2.2s cubic-bezier(.4,0,.2,1) infinite alternate; }
.gm-art .envf { fill: url(#gmAdvEnv); }
.gm-art .axis { stroke: #8FD0FF; stroke-opacity: 0.2; stroke-width: 0.5; stroke-dasharray: 1 3; }
@keyframes gmTurn { to { --gm-a: 360deg; } }
@keyframes gmEq { 0% { transform: scaleY(0.8); } 100% { transform: scaleY(1); } }
@keyframes gmCap { 0% { transform: translateY(5px); opacity: .3; } 100% { transform: translateY(0); opacity: .65; } }
@keyframes gmDrift { from { transform: translateX(0); } to { transform: translateX(-150px); } }
@keyframes gmPulse { to { stroke-dashoffset: -16; } }
@keyframes gmHead { from { transform: translateX(-10px); } to { transform: translateX(290px); } }
@keyframes gmScan { 0% { transform: translateX(0); } 100% { transform: translateX(400px); } }
@media (prefers-reduced-motion: reduce) {
  .gm-win, .gm-art .eq, .gm-art .drift, .gm-art .cap, .gm-art .jp, .gm-art .head, .gm-art .scan { animation: none; }
}
@media (max-width: 759px) { .gm-art { height: 146px; } }
.gm-chrome + .gm-art { margin-top: -10px; }