Binaural Beats

ENTRAINMENT ENGINE · USE HEADPHONES

\n\n {/* Module on/off */}\n

\n \n module {session.binauralOn ? \"active\" : \"disabled\"} — play from bottom toolbar\n

\n\n {/* Preset grid */}\n

\n {(Object.entries(PRESETS) as [PresetKey, any][]).map(([key, p]) => {\n const a = ACCENT[key];\n const active = preset === key;\n return (\n \n );\n })}\n

\n\n {preset !== \"custom\" && PRESETS[preset].desc && (\n

\n {PRESETS[preset].desc}\n

\n )}\n\n

\n { setPreset(\"custom\"); setSession((p:any)=>({...p,baseFreq:v})); }} unit=\"Hz\" />\n { setPreset(\"custom\"); setSession((p:any)=>({...p,beatFreq:v})); }} unit=\"Hz\" />\n

\n\n

\n {session.baseFreq}Hz L / {\" \"}\n {session.baseFreq + session.beatFreq}Hz R\n

\n );\n}\n\nfunction Slider({ label, value, min, max, onChange, unit, accent }: any) {\n const pct = ((value-min)/(max-min))*100;\n return (\n

\n {label}\n {value}{unit}\n

\n onChange(Number(e.target.value))} className=\"slider-thumb\"/>\n

\n );\n}\n",[],[235,242,249],{"_105":257,"_97":258,"_162":259,"_164":243,"_165":147,"_166":260,"_168":169,"_107":261,"_102":237,"_171":191,"_173":262,"_174":22,"_175":-5,"_176":263,"_100":264},"a07cba8c-1e71-11f1-ada8-42dde27851f2","ClockTab.tsx","ce4e0364-1e6f-11f1-813d-42dde27851f2",50,["D",1773360879767],"import React from \"react\";\n\ninterface Props { session: any; setSession: (fn: (p:any)=>any) => void; }\n\nexport function ClockTab({ session, setSession }: Props) {\n const bpm = Math.round(60000 / session.tickSpeed);\n\n return (\n

Polyrhythms

GENERATIVE TIMING ENGINE

\n\n

\n \n layered with master play\n

\n\n {/* BPM display */}\n

\n {bpm}\n

BPM

\n\n

\n setSession((p:any)=>({...p,tickSpeed:v}))} unit=\"ms\"/>\n setSession((p:any)=>({...p,polySpeed:v}))} unit=\"s\"/>\n

\n\n {/* Rhythm grid visualization */}\n

\n {Array.from({length: 16}).map((_,i) => (\n

\n ))}\n

\n\n

\n TICK {session.tickSpeed}ms\n · POLY {session.polySpeed}s\n

\n );\n}\n\nfunction Slider({ label, value, min, max, onChange, unit, accent }: any) {\n const pct = ((value-min)/(max-min))*100;\n return (\n

\n {label}\n {value}{unit}\n

\n onChange(Number(e.target.value))} className=\"slider-thumb\"/>\n

\n );\n}\n",[],[235,242,258],{"_105":266,"_97":267,"_162":268,"_164":243,"_165":147,"_166":269,"_168":169,"_107":270,"_102":33,"_171":191,"_173":271,"_174":22,"_175":-5,"_176":272,"_100":273},"6bed99aa-1e6f-11f1-a8bc-42dde27851f2","Icons.tsx","6bed9a5e-1e6f-11f1-a8bc-42dde27851f2",11,["D",1773359932602],"export const Icons = {\n Waves: () => (\n \n ),\n Clock: () => (\n \n ),\n Play: () => (\n \n ),\n Square: () => (\n \n ),\n Sliders: () => (\n \n ),\n Ocean: () => (\n \n ),\n Timeline: () => (\n \n ),\n Quote: () => (\n \n ),\n Trash: () => (\n \n ),\n Plus: () => (\n \n ),\n Edit: () => (\n \n ),\n Save: () => (\n \n ),\n Speaker: () => (\n \n ),\n};\n",[],[235,242,267],{"_105":275,"_97":276,"_162":277,"_164":243,"_165":147,"_166":278,"_168":169,"_107":279,"_102":244,"_171":191,"_173":280,"_174":22,"_175":-5,"_176":281,"_100":282},"e8cdb1aa-1e72-11f1-b559-42dde27851f2","NeumorphicSlider.tsx","701ac822-1e6f-11f1-a8bc-42dde27851f2",58,["D",1773361430584],"import React from \"react\";\n\ninterface Props {\n label: string;\n value: number;\n min: number;\n max: number;\n onChange: (v: number) => void;\n unit?: string;\n step?: number;\n accent?: string;\n}\n\nexport function NeumorphicSlider({ label, value, min, max, onChange, unit = \"\", step = 1, accent }: Props) {\n const pct = ((value - min) / (max - min)) * 100;\n const color = accent || \"var(--accent-blue)\";\n\n return (\n

\n {label}\n {value}{unit}\n

\n {/* Track background */}\n

\n {/* Fill */}\n

\n onChange(Number(e.target.value))}\n className=\"slider-thumb\"\n style={{\n position: \"absolute\",\n width: \"100%\",\n zIndex: 2,\n background: \"transparent\",\n cursor: \"pointer\",\n }}\n />\n

\n );\n}\n",[],[235,242,276],{"_105":284,"_97":285,"_162":286,"_164":243,"_165":147,"_166":287,"_168":169,"_107":288,"_102":237,"_171":191,"_173":289,"_174":22,"_175":-5,"_176":290,"_100":291},"96b06fb2-1e71-11f1-ada8-42dde27851f2","OceanPulseTab.tsx","93de9b62-1e6f-11f1-821a-42dde27851f2",49,["D",1773360863269],"import React from \"react\";\n\ninterface Props { session: any; setSession: (fn: (p:any)=>any) => void; }\n\nexport function OceanPulseTab({ session, setSession }: Props) {\n const bars = 20;\n const dur = (60 / session.breathRate).toFixed(1);\n\n return (\n

Ocean Pulse

BREATH-SYNCED AMPLITUDE MOD

\n\n

\n \n layered with master play\n

\n\n {/* Wave viz */}\n

\n {Array.from({ length: bars }).map((_, i) => (\n

\n ))}\n \n

\n\n

\n setSession((p:any)=>({...p,breathRate:v}))} unit=\"bpm\"/>\n

\n\n

\n WAVE PERIOD {dur}s · INHALE ↑ EXHALE ↓
\n Brown noise amplitude-modulated at breath rate\n

\n );\n}\n\nfunction Slider({ label, value, min, max, onChange, unit, accent }: any) {\n const pct = ((value-min)/(max-min))*100;\n return (\n

\n {label}\n {value}{unit}\n

\n onChange(Number(e.target.value))} className=\"slider-thumb\"/>\n

\n );\n}\n",[],[235,242,285],{"_105":293,"_97":294,"_162":295,"_164":243,"_165":147,"_166":146,"_168":169,"_107":296,"_102":244,"_171":191,"_173":297,"_174":22,"_175":-5,"_176":298,"_100":299},"971cd87e-1e98-11f1-9cfb-42dde27851f2","SessionTimelineView.tsx","e9480644-1e72-11f1-9e1e-42dde27851f2",["D",1773377614347],"import React, { useMemo } from \"react\";\n\nconst WAVE_HZ: Record = {\n delta: { start: 2, end: 4 },\n theta: { start: 5, end: 7 },\n alpha: { start: 9, end: 11 },\n beta: { start: 15, end: 20 },\n high_beta:{ start: 25, end: 30 },\n};\n\ninterface Segment { id: string; label: string; brainwave: string; durationMin: number; baseFreq: number; }\n\ninterface Props {\n segments: Segment[];\n sessionLengthMin?: number; // total min (default from segments or 6)\n tickSpeedMs?: number; // for clock tick density\n activeSegIdx?: number;\n playing?: boolean;\n clockOn?: boolean; // show ticks with accent when clock enabled\n elapsedSec?: number; // current playback position for playhead\n showPlayhead?: boolean; // show playhead when playing\n}\n\nexport function SessionTimelineView({\n segments,\n sessionLengthMin,\n tickSpeedMs = 1000,\n activeSegIdx = 0,\n playing = false,\n clockOn = false,\n elapsedSec = 0,\n showPlayhead = false,\n}: Props) {\n const totalMin = sessionLengthMin ?? (segments.length ? segments.reduce((s, seg) => s + seg.durationMin, 0) : 6);\n const width = 380;\n const height = 140;\n const padding = { t: 24, r: 12, b: 20, l: 28 };\n const plotW = width - padding.l - padding.r;\n const plotH = height - padding.t - padding.b;\n\n // Map minute to x: x = padding.l + (minute / totalMin) * plotW\n const minToX = (m: number) => padding.l + (totalMin > 0 ? (m / totalMin) * plotW : 0);\n\n // Time grid: vertical lines at each integer minute from 0 to floor(totalMin)\n const maxMin = Math.max(1, Math.floor(totalMin));\n const gridMinutes = Array.from({ length: maxMin + 1 }, (_, i) => i);\n\n // Clock tick marks — all shown, positioned by time, bigger when clock on\n const tickCount = Math.max(1, Math.floor((totalMin * 60 * 1000) / tickSpeedMs));\n const ticks = useMemo(() => {\n const n = tickCount;\n return Array.from({ length: n }, (_, i) => {\n const tMin = n > 1 ? (i / (n - 1)) * totalMin : 0;\n const x = padding.l + (totalMin > 0 ? (tMin / totalMin) * plotW : 0);\n const tickH = clockOn ? (i % 4 === 0 ? 14 : 8) : (i % 4 === 0 ? 10 : 6);\n return { x, height: tickH };\n });\n }, [tickCount, totalMin, plotW, padding.l, clockOn]);\n\n // Left (red) and Right (blue) freq curves over time\n const { leftPath, rightPath } = useMemo(() => {\n if (!segments.length) {\n const cx = padding.l + plotW / 2;\n const cy = padding.t + plotH / 2;\n const amp = plotH * 0.35;\n const pts = 60;\n const left: string[] = [`M ${padding.l} ${cy}`];\n const right: string[] = [`M ${padding.l} ${cy}`];\n for (let i = 1; i <= pts; i++) {\n const x = padding.l + (i / pts) * plotW;\n const t = (i / pts) * totalMin;\n const leftY = cy + Math.sin(t * 0.8) * amp * 0.7;\n const rightY = cy + Math.sin(t * 2.2 + 0.5) * amp * 0.6;\n left.push(`L ${x} ${leftY}`);\n right.push(`L ${x} ${rightY}`);\n }\n return { leftPath: left.join(\" \"), rightPath: right.join(\" \") };\n }\n\n let elapsed = 0;\n const leftPts: [number, number][] = [];\n const rightPts: [number, number][] = [];\n\n for (let i = 0; i < segments.length; i++) {\n const seg = segments[i];\n const hz = WAVE_HZ[seg.brainwave] ?? { start: 10, end: 10 };\n const startX = padding.l + (elapsed / totalMin) * plotW;\n const endX = padding.l + ((elapsed + seg.durationMin) / totalMin) * plotW;\n\n const baseY = padding.t + plotH / 2;\n const amp = plotH * 0.35;\n const freqNorm = (f: number) => (f - 80) / 420;\n const leftBase = seg.baseFreq;\n const rightStart = seg.baseFreq + hz.start;\n const rightEnd = seg.baseFreq + hz.end;\n\n const steps = Math.max(2, Math.floor(seg.durationMin * 4));\n for (let s = 0; s <= steps; s++) {\n const t = s / steps;\n const x = startX + (endX - startX) * t;\n const leftVal = freqNorm(leftBase);\n const rightVal = freqNorm(rightStart + (rightEnd - rightStart) * t);\n const leftY = baseY - leftVal * amp * 0.6 - Math.sin(t * Math.PI * 2) * amp * 0.2;\n const rightY = baseY - rightVal * amp * 0.6 + Math.sin(t * Math.PI * 3) * amp * 0.25;\n leftPts.push([x, leftY]);\n rightPts.push([x, rightY]);\n }\n elapsed += seg.durationMin;\n }\n\n const toPath = (pts: [number, number][]) => {\n if (!pts.length) return \"\";\n return pts.reduce((acc, [x, y], i) => (i === 0 ? `M ${x} ${y}` : `${acc} L ${x} ${y}`), \"\");\n };\n return { leftPath: toPath(leftPts), rightPath: toPath(rightPts) };\n }, [segments, totalMin, plotW, plotH, padding]);\n\n // Golden baseline\n const baselineY = padding.t + plotH - 4;\n const baselinePath = `M ${padding.l} ${baselineY} L ${padding.l + plotW - 8} ${baselineY} L ${padding.l + plotW} ${baselineY + 12}`;\n\n // Playhead position (clamp to plot bounds)\n const elapsedMin = elapsedSec / 60;\n const playheadX = showPlayhead && totalMin > 0\n ? Math.min(Math.max(padding.l, padding.l + (elapsedMin / totalMin) * plotW), padding.l + plotW)\n : null;\n\n return (\n

\n SESSION · {totalMin}min\n

\n \n

\n {showPlayhead && ▎ playhead}\n ▬ ticks\n ■ L Hz\n ■ R Hz\n ■ baseline\n

\n );\n}\n",[],[235,242,294],{"_105":301,"_97":302,"_162":303,"_164":243,"_165":147,"_166":304,"_168":169,"_107":305,"_102":218,"_171":191,"_173":306,"_174":22,"_175":-5,"_176":307,"_100":308},"7b064014-1e73-11f1-bdeb-42dde27851f2","TTSWisdomTab.tsx","c5330ea0-1e6f-11f1-8481-42dde27851f2",66,["D",1773361675907],"import React, { useState, useEffect } from \"react\";\nimport { Icons } from \"https://esm.town/v/all/brain/frontend/components/Icons.tsx\";\n\ninterface Quote { id: number; text: string; author: string; enabled: number; }\ninterface Props { session: any; setSession: (fn: (p: any) => any) => void; speakWisdom: (quotes: any[], voice: string) => Promise; }\n\n// Groq Orpheus valid voices: autumn, diana, hannah, austin, daniel, troy\nconst VOICES = [\n { value: \"troy\", label: \"TROY\" },\n { value: \"hannah\", label: \"HANNAH\" },\n { value: \"austin\", label: \"AUSTIN\" },\n { value: \"autumn\", label: \"AUTUMN\" },\n { value: \"diana\", label: \"DIANA\" },\n { value: \"daniel\", label: \"DANIEL\" },\n];\n\nexport function TTSWisdomTab({ session, setSession, speakWisdom }: Props) {\n const [quotes, setQuotes] = useState([]);\n const [loading, setLoading] = useState(true);\n const [adding, setAdding] = useState(false);\n const [newQ, setNewQ] = useState({ text: \"\", author: \"\" });\n\n async function loadQuotes() {\n setLoading(true);\n const r = await fetch(\"/api/quotes\");\n setQuotes(await r.json());\n setLoading(false);\n }\n useEffect(() => { loadQuotes(); }, []);\n\n async function addQuote() {\n if (!newQ.text.trim()) return;\n await fetch(\"/api/quotes\", { method: \"POST\", headers: { \"Content-Type\": \"application/json\" }, body: JSON.stringify(newQ) });\n setNewQ({ text: \"\", author: \"\" }); setAdding(false); loadQuotes();\n }\n async function toggleEnabled(q: Quote) {\n await fetch(`/api/quotes/${q.id}`, { method: \"PATCH\", headers: { \"Content-Type\": \"application/json\" }, body: JSON.stringify({ enabled: !q.enabled }) });\n loadQuotes();\n }\n\n function pickRandom(): Quote | null {\n const enabled = quotes.filter(q => q.enabled);\n if (!enabled.length) return null;\n return enabled[Math.floor(Math.random() * enabled.length)];\n }\n\n async function speakOne() {\n const q = pickRandom();\n if (q) speakWisdom([q], session.wisdomVoice);\n }\n\n const cardStyle = { borderRadius: 0, background: \"var(--bg2)\", border: \"1px solid var(--border2)\", outline: \"1px solid var(--border)\", outlineOffset: 2 };\n\n return (\n

Wisdom

VOICE QUOTES · MASTER PLAY

\n\n {/* Module toggle + status */}\n

\n \n \n {session.playing && session.wisdomOn ? \"Playing…\" : \"Press play from toolbar\"}\n \n

\n\n {/* Voice + interval — compact */}\n

VOICE

\n {VOICES.map(v => (\n \n ))}\n

\n INTERVAL\n {session.wisdomIntervalMin}min\n

\n setSession((p: any) => ({ ...p, wisdomIntervalMin: Number(e.target.value) }))}\n className=\"slider-thumb\" style={{ position: \"relative\", width: \"100%\" }} />\n

\n\n \n\n {/* Quote library header */}\n

\n QUOTES {quotes.filter(q => q.enabled).length}/{quotes.length}\n \n

\n\n {adding && (\n

setNewQ(p => ({ ...p, text: e.target.value }))} style={{ resize: \"none\", fontSize: 10 }} />\n          <div style={{ display: \"flex\", gap: 4 }}>\n            <button onClick={addQuote} style={{ flex: 1, ...cardStyle, padding: 6, cursor: \"pointer\", color: \"var(--accent-amber)\", fontSize: 9, fontWeight: 700 }}>SAVE</button>\n            <button onClick={() => setAdding(false)} style={{ flex: 1, ...cardStyle, padding: 6, cursor: \"pointer\", color: \"var(--text-dim)\", fontSize: 9 }}>CANCEL</button>\n          </div>\n        </div>\n      )}\n\n      {/* Quote list — compact: just quote + enable toggle, no edit/delete */}\n      {loading ? (\n        <div style={{ fontSize: 8, color: \"var(--text-dim)\", textAlign: \"center\", padding: 8 }}>LOADING…</div>\n      ) : (\n        <div style={{ display: \"flex\", flexDirection: \"column\", gap: 4 }}>\n          {quotes.map(q => (\n            <div key={q.id} style={{ ...cardStyle, padding: \"6px 8px\", opacity: q.enabled ? 1 : 0.45, display: \"flex\", alignItems: \"center\", gap: 6 }}>\n              <div style={{ flex: 1, fontSize: 9, color: \"var(--text)\", lineHeight: 1.4, fontStyle: \"italic\", minWidth: 0 }}>{q.text}</div>\n              <button onClick={() => toggleEnabled(q)}\n                style={{ background: \"none\", border: \"none\", fontFamily: \"inherit\", fontSize: 7, fontWeight: 700, cursor: \"pointer\", color: q.enabled ? \"var(--accent-green)\" : \"var(--text-dim)\", letterSpacing: \"0.06em\", flexShrink: 0 }}>\n                {q.enabled ? \"ON\" : \"OFF\"}\n              </button>\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n",[],[235,242,302],{"_105":310,"_97":311,"_162":312,"_164":243,"_165":147,"_166":313,"_168":169,"_107":314,"_102":315,"_171":191,"_173":316,"_174":22,"_175":-5,"_176":317,"_100":318},"9717d86a-1e98-11f1-88df-42dde27851f2","TimelineTab.tsx","ac2af6c0-1e6f-11f1-8d5a-42dde27851f2",82,["D",1773377614351],9,"import React, { useState, useEffect, useRef } from \"react\";\nimport { Icons } from \"https://esm.town/v/all/brain/frontend/components/Icons.tsx\";\nimport { SessionTimelineView } from \"https://esm.town/v/all/brain/frontend/components/SessionTimelineView.tsx\";\n\n// Flow presets — all layers on, wisdom every 1min\nconst FLOW_PRESETS = [\n  {\n    name: \"Deep Focus\",\n    desc: \"Beta · all layers · 1min wisdom\",\n    session: { binauralOn: true, oceanOn: true, clockOn: true, wisdomOn: true, wisdomIntervalMin: 1, baseFreq: 250, beatFreq: 16, breathRate: 6, tickSpeed: 800, polySpeed: 20, wisdomVoice: \"autumn\" },\n    segments: [{ id: \"f1\", label: \"Focus\", brainwave: \"beta\", durationMin: 15, baseFreq: 250 }],\n  },\n  {\n    name: \"Creative Flow\",\n    desc: \"Theta · all layers · 1min wisdom\",\n    session: { binauralOn: true, oceanOn: true, clockOn: true, wisdomOn: true, wisdomIntervalMin: 1, baseFreq: 300, beatFreq: 7, breathRate: 5, tickSpeed: 1000, polySpeed: 33, wisdomVoice: \"autumn\" },\n    segments: [\n      { id: \"c1\", label: \"Warm up\", brainwave: \"alpha\", durationMin: 3, baseFreq: 200 },\n      { id: \"c2\", label: \"Create\", brainwave: \"theta\", durationMin: 20, baseFreq: 300 },\n    ],\n  },\n  {\n    name: \"Wind Down\",\n    desc: \"Alpha→Theta · all layers · 1min wisdom\",\n    session: { binauralOn: true, oceanOn: true, clockOn: true, wisdomOn: true, wisdomIntervalMin: 1, baseFreq: 150, beatFreq: 6, breathRate: 4, tickSpeed: 1200, polySpeed: 45, wisdomVoice: \"autumn\" },\n    segments: [\n      { id: \"w1\", label: \"Relax\", brainwave: \"alpha\", durationMin: 5, baseFreq: 150 },\n      { id: \"w2\", label: \"Drift\", brainwave: \"theta\", durationMin: 15, baseFreq: 120 },\n    ],\n  },\n  {\n    name: \"Power Nap\",\n    desc: \"Delta · all layers · 1min wisdom\",\n    session: { binauralOn: true, oceanOn: true, clockOn: true, wisdomOn: true, wisdomIntervalMin: 1, baseFreq: 100, beatFreq: 2, breathRate: 3, tickSpeed: 1500, polySpeed: 60, wisdomVoice: \"autumn\" },\n    segments: [{ id: \"p1\", label: \"Deep rest\", brainwave: \"delta\", durationMin: 20, baseFreq: 100 }],\n  },\n  {\n    name: \"Morning Ritual\",\n    desc: \"Theta→Alpha · all layers · 1min wisdom\",\n    session: { binauralOn: true, oceanOn: true, clockOn: true, wisdomOn: true, wisdomIntervalMin: 1, baseFreq: 180, beatFreq: 8, breathRate: 6, tickSpeed: 1000, polySpeed: 25, wisdomVoice: \"autumn\" },\n    segments: [\n      { id: \"m1\", label: \"Meditate\", brainwave: \"theta\", durationMin: 5, baseFreq: 150 },\n      { id: \"m2\", label: \"Awaken\", brainwave: \"alpha\", durationMin: 5, baseFreq: 200 },\n    ],\n  },\n  {\n    name: \"Study Session\",\n    desc: \"Beta · all layers · 1min wisdom\",\n    session: { binauralOn: true, oceanOn: true, clockOn: true, wisdomOn: true, wisdomIntervalMin: 1, baseFreq: 220, beatFreq: 18, breathRate: 6, tickSpeed: 800, polySpeed: 18, wisdomVoice: \"autumn\" },\n    segments: [\n      { id: \"s1\", label: \"Focus\", brainwave: \"beta\", durationMin: 25, baseFreq: 220 },\n      { id: \"s2\", label: \"Break\", brainwave: \"alpha\", durationMin: 5, baseFreq: 180 },\n    ],\n  },\n  {\n    name: \"Full Spectrum\",\n    desc: \"δ→θ→α→β journey · all layers · 1min wisdom\",\n    session: { binauralOn: true, oceanOn: true, clockOn: true, wisdomOn: true, wisdomIntervalMin: 1, baseFreq: 200, beatFreq: 10, breathRate: 5, tickSpeed: 1000, polySpeed: 30, wisdomVoice: \"autumn\" },\n    segments: [\n      { id: \"fs1\", label: \"Deep\", brainwave: \"delta\", durationMin: 5, baseFreq: 100 },\n      { id: \"fs2\", label: \"Dream\", brainwave: \"theta\", durationMin: 8, baseFreq: 150 },\n      { id: \"fs3\", label: \"Calm\", brainwave: \"alpha\", durationMin: 7, baseFreq: 200 },\n      { id: \"fs4\", label: \"Active\", brainwave: \"beta\", durationMin: 10, baseFreq: 250 },\n    ],\n  },\n  {\n    name: \"Quick Reset\",\n    desc: \"10min · all layers · 1min wisdom\",\n    session: { binauralOn: true, oceanOn: true, clockOn: true, wisdomOn: true, wisdomIntervalMin: 1, baseFreq: 200, beatFreq: 10, breathRate: 6, tickSpeed: 1000, polySpeed: 33, wisdomVoice: \"autumn\" },\n    segments: [\n      { id: \"qr1\", label: \"Breathe\", brainwave: \"alpha\", durationMin: 5, baseFreq: 180 },\n      { id: \"qr2\", label: \"Refocus\", brainwave: \"beta\", durationMin: 5, baseFreq: 220 },\n    ],\n  },\n];\n\nconst WAVE_COLORS: Record<string, string> = {\n  delta:     \"var(--accent-violet)\",\n  theta:     \"var(--accent-blue)\",\n  alpha:     \"var(--accent-cyan)\",\n  beta:      \"var(--accent-green)\",\n  high_beta: \"var(--accent-amber)\",\n};\nconst WAVE_HZ: Record<string, { start: number; end: number }> = {\n  delta:    { start: 2,  end: 4  },\n  theta:    { start: 5,  end: 7  },\n  alpha:    { start: 9,  end: 11 },\n  beta:     { start: 15, end: 20 },\n  high_beta:{ start: 25, end: 30 },\n};\n\ninterface Segment { id: string; label: string; brainwave: string; durationMin: number; baseFreq: number; }\ninterface Timeline { id?: number; name: string; segments: Segment[]; }\n\nfunction uid() { return Math.random().toString(36).slice(2); }\n\ninterface TimelineTabProps { session?: any; setSession?: (fn: (p: any) => any) => void; masterPlaying?: boolean; masterPlay?: () => void; masterStop?: () => void; masterElapsedSec?: number; }\n\nexport function TimelineTab({ session = null, setSession, masterPlaying = false, masterPlay, masterStop, masterElapsedSec = 0 }: TimelineTabProps) {\n  const [timelines, setTimelines] = useState<Timeline[]>([]);\n  const [current, setCurrent] = useState<Timeline>({ name: \"New Session\", segments: [] });\n  const [saving, setSaving] = useState(false);\n  const [playing, setPlaying] = useState(false);\n  const [activeSegIdx, setActiveSegIdx] = useState(0);\n  const [localElapsedSec, setLocalElapsedSec] = useState(0);\n\n  const ctxRef = useRef<AudioContext | null>(null);\n  const segmentStartRef = useRef<number>(0);\n  const leftRef = useRef<OscillatorNode | null>(null);\n  const rightRef = useRef<OscillatorNode | null>(null);\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  async function load() {\n    const r = await fetch(\"/api/timeline\");\n    setTimelines(await r.json());\n  }\n  async function save() {\n    setSaving(true);\n    const method = current.id ? \"PUT\" : \"POST\";\n    const url = current.id ? `/api/timeline/${current.id}` : \"/api/timeline\";\n    const r = await fetch(url, { method, headers: { \"Content-Type\": \"application/json\" }, body: JSON.stringify(current) });\n    const data = await r.json();\n    setCurrent(data);\n    await load();\n    setSaving(false);\n  }\n  async function deleteTl(id: number) {\n    await fetch(`/api/timeline/${id}`, { method: \"DELETE\" });\n    await load();\n    if (current.id === id) setCurrent({ name: \"New Session\", segments: [] });\n  }\n\n  useEffect(() => { load(); }, []);\n\n  function addSegment() {\n    const seg: Segment = { id: uid(), label: \"Focus\", brainwave: \"beta\", durationMin: 5, baseFreq: 200 };\n    setCurrent(p => ({ ...p, segments: [...p.segments, seg] }));\n  }\n  function updateSeg(id: string, patch: Partial<Segment>) {\n    setCurrent(p => ({ ...p, segments: p.segments.map(s => s.id === id ? { ...s, ...patch } : s) }));\n  }\n  function removeSeg(id: string) {\n    setCurrent(p => ({ ...p, segments: p.segments.filter(s => s.id !== id) }));\n  }\n\n  function stopPlayback() {\n    leftRef.current?.stop(); leftRef.current?.disconnect();\n    rightRef.current?.stop(); rightRef.current?.disconnect();\n    leftRef.current = null; rightRef.current = null;\n    if (timerRef.current) clearTimeout(timerRef.current);\n    setPlaying(false); setActiveSegIdx(0); setLocalElapsedSec(0);\n  }\n  function startPlayback() {\n    if (!current.segments.length) return;\n    const Ctx = window.AudioContext || (window as any).webkitAudioContext;\n    if (!ctxRef.current) ctxRef.current = new Ctx();\n    const ctx = ctxRef.current;\n    if (ctx.state === \"suspended\") ctx.resume();\n    setPlaying(true);\n    runSegment(0, ctx);\n  }\n  function runSegment(idx: number, ctx: AudioContext) {\n    if (idx >= current.segments.length) { stopPlayback(); return; }\n    segmentStartRef.current = performance.now();\n    setActiveSegIdx(idx);\n    const seg = current.segments[idx];\n    const hz = WAVE_HZ[seg.brainwave] ?? { start: 10, end: 10 };\n    leftRef.current?.stop(); leftRef.current?.disconnect();\n    rightRef.current?.stop(); rightRef.current?.disconnect();\n    const left = ctx.createOscillator(), right = ctx.createOscillator();\n    const lp = ctx.createStereoPanner(), rp = ctx.createStereoPanner();\n    const gain = ctx.createGain();\n    lp.pan.value = -1; rp.pan.value = 1; gain.gain.value = 0.4;\n    left.connect(lp); right.connect(rp); lp.connect(gain); rp.connect(gain); gain.connect(ctx.destination);\n    left.frequency.value = seg.baseFreq;\n    right.frequency.setValueAtTime(seg.baseFreq + hz.start, ctx.currentTime);\n    right.frequency.linearRampToValueAtTime(seg.baseFreq + hz.end, ctx.currentTime + seg.durationMin * 60);\n    left.start(); right.start();\n    leftRef.current = left; rightRef.current = right;\n    timerRef.current = setTimeout(() => runSegment(idx + 1, ctx), seg.durationMin * 60 * 1000);\n  }\n\n  const totalMin = current.segments.reduce((s, seg) => s + seg.durationMin, 0);\n\n  useEffect(() => {\n    if (!playing || masterPlaying || !current.segments.length) return;\n    const tick = () => {\n      const completedSec = current.segments.slice(0, activeSegIdx).reduce((s, seg) => s + seg.durationMin * 60, 0);\n      const inSegSec = (performance.now() - segmentStartRef.current) / 1000;\n      setLocalElapsedSec(completedSec + inSegSec);\n    };\n    tick();\n    const id = setInterval(tick, 100);\n    return () => clearInterval(id);\n  }, [playing, masterPlaying, current.segments, activeSegIdx]);\n\n  const elapsedSec = masterPlaying ? masterElapsedSec : (playing ? localElapsedSec : 0);\n\n  function applyFlowPreset(preset: typeof FLOW_PRESETS[0]) {\n    if (setSession) setSession((p: any) => ({ ...p, ...preset.session }));\n    setCurrent({ name: preset.name, segments: preset.segments.map(s => ({ ...s, id: uid() })) });\n  }\n\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: 16, width: \"100%\" }}>\n      <div>\n        <div className=\"section-title\">Timeline</div>\n        <div className=\"section-sub\">SESSION BUILDER</div>\n      </div>\n\n      {/* Flow presets — all layers, wisdom 1min */}\n      <div>\n        <div className=\"label-key\" style={{ marginBottom: 8 }}>FLOW PRESETS · ALL LAYERS · WISDOM 1MIN</div>\n        <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(2, 1fr)\", gap: 6 }}>\n          {FLOW_PRESETS.map((preset) => (\n            <button\n              key={preset.name}\n              onClick={() => applyFlowPreset(preset)}\n              className=\"preset-btn\"\n              style={{ textAlign: \"left\", padding: \"8px 10px\" }}>\n              <span className=\"preset-name\">{preset.name}</span>\n              <span style={{ fontSize: 8, opacity: 0.7, display: \"block\", marginTop: 2 }}>{preset.desc}</span>\n            </button>\n          ))}\n        </div>\n      </div>\n\n      {/* Session timeline view — grid, beats, Hz curves, clock, playhead */}\n      <SessionTimelineView\n        segments={current.segments}\n        tickSpeedMs={session?.tickSpeed ?? 1000}\n        activeSegIdx={activeSegIdx}\n        playing={playing}\n        clockOn={session?.clockOn ?? false}\n        elapsedSec={elapsedSec}\n        showPlayhead={masterPlaying || playing}\n      />\n\n      {/* Timeline bar */}\n      {current.segments.length > 0 && (\n        <div style={{ width: \"100%\", height: 48, display: \"flex\", borderRadius: 8, overflow: \"hidden\", border: \"1px solid var(--border2)\", outline: \"1px solid var(--border)\", outlineOffset: 2 }}>\n          {current.segments.map((seg, i) => {\n            const w = totalMin > 0 ? (seg.durationMin / totalMin) * 100 : 100 / current.segments.length;\n            const col = WAVE_COLORS[seg.brainwave] ?? \"var(--text-dim)\";\n            const isActive = playing && i === activeSegIdx;\n            return (\n              <div key={seg.id} style={{\n                width: `${w}%`,\n                background: col,\n                opacity: playing ? (isActive ? 0.9 : 0.25) : 0.5,\n                display: \"flex\", alignItems: \"center\", justifyContent: \"center\",\n                fontSize: 8, fontWeight: 700, color: \"#fff\",\n                letterSpacing: \"0.05em\",\n                transition: \"opacity 0.3s\",\n                position: \"relative\",\n                overflow: \"hidden\",\n              }}>\n                {w > 10 && seg.label}\n                {isActive && <div style={{ position: \"absolute\", inset: 0, border: \"2px solid rgba(255,255,255,0.6)\", animation: \"pulse 1s infinite\" }} />}\n              </div>\n            );\n          })}\n        </div>\n      )}\n\n      {/* Name + controls row */}\n      <div style={{ display: \"flex\", gap: 8, alignItems: \"center\" }}>\n        <input\n          value={current.name}\n          onChange={e => setCurrent(p => ({ ...p, name: e.target.value }))}\n          style={{ flex: 1, fontWeight: 700, fontSize: 12 }}\n        />\n        <button onClick={save} disabled={saving} className=\"card-sm\" style={{ cursor: \"pointer\", color: saving ? \"var(--text-dim)\" : \"var(--accent-violet)\", border: \"1px solid var(--border2)\", display: \"flex\", alignItems: \"center\", padding: \"8px 10px\" }}>\n          <Icons.Save />\n        </button>\n        {current.segments.length > 0 && (\n          <button onClick={playing ? stopPlayback : startPlayback} className=\"card-sm\" style={{ cursor: \"pointer\", color: playing ? \"var(--accent-violet)\" : \"var(--text-dim)\", border: `1px solid ${playing ? \"var(--accent-violet)\" : \"var(--border2)\"}`, display: \"flex\", alignItems: \"center\", padding: \"8px 10px\" }}>\n            {playing ? <Icons.Square /> : <Icons.Play />}\n          </button>\n        )}\n      </div>\n\n      {/* Segments */}\n      <div style={{ display: \"flex\", flexDirection: \"column\", gap: 8 }}>\n        {current.segments.map((seg, i) => {\n          const col = WAVE_COLORS[seg.brainwave] ?? \"var(--text-dim)\";\n          const isActive = playing && i === activeSegIdx;\n          return (\n            <div key={seg.id} className=\"card\" style={{ borderColor: isActive ? col : \"var(--border2)\" }}>\n              <div style={{ display: \"flex\", gap: 8, alignItems: \"center\", marginBottom: 10 }}>\n                <div style={{ width: 8, height: 8, borderRadius: \"50%\", background: col, flexShrink: 0 }} />\n                <input value={seg.label} onChange={e => updateSeg(seg.id, { label: e.target.value })}\n                  style={{ flex: 1, fontSize: 11, fontWeight: 700, background: \"transparent\", border: \"none\", borderBottom: \"1px solid var(--border2)\", color: \"var(--text-bright)\", paddingBottom: 2, outline: \"none\", fontFamily: \"inherit\" }} />\n                <button onClick={() => removeSeg(seg.id)} style={{ background: \"none\", border: \"none\", cursor: \"pointer\", color: \"var(--text-dim)\" }}><Icons.Trash /></button>\n              </div>\n              <div style={{ display: \"grid\", gridTemplateColumns: \"1fr 1fr 1fr\", gap: 8 }}>\n                <div>\n                  <div className=\"label-key\" style={{ marginBottom: 4 }}>WAVE</div>\n                  <select value={seg.brainwave} onChange={e => updateSeg(seg.id, { brainwave: e.target.value })}>\n                    {Object.keys(WAVE_HZ).map(k => <option key={k} value={k}>{k}</option>)}\n                  </select>\n                </div>\n                <div>\n                  <div className=\"label-key\" style={{ marginBottom: 4 }}>MIN</div>\n                  <input type=\"number\" value={seg.durationMin} min={1} max={120} onChange={e => updateSeg(seg.id, { durationMin: Number(e.target.value) })} />\n                </div>\n                <div>\n                  <div className=\"label-key\" style={{ marginBottom: 4 }}>BASE Hz</div>\n                  <input type=\"number\" value={seg.baseFreq} min={80} max={500} step={10} onChange={e => updateSeg(seg.id, { baseFreq: Number(e.target.value) })} />\n                </div>\n              </div>\n            </div>\n          );\n        })}\n      </div>\n\n      <button onClick={addSegment} className=\"card-sm\" style={{ display: \"flex\", alignItems: \"center\", justifyContent: \"center\", gap: 8, color: \"var(--accent-violet)\", border: \"1px dashed var(--border2)\", cursor: \"pointer\", fontSize: 11, fontWeight: 700, letterSpacing: \"0.06em\" }}>\n        <Icons.Plus /> ADD SEGMENT\n      </button>\n\n      {/* Saved sessions */}\n      {timelines.length > 0 && (\n        <div style={{ marginTop: 8 }}>\n          <div className=\"label-key\" style={{ marginBottom: 8 }}>SAVED SESSIONS</div>\n          <div style={{ display: \"flex\", flexDirection: \"column\", gap: 6 }}>\n            {timelines.map(tl => (\n              <div key={tl.id} className=\"card-sm\" style={{ display: \"flex\", alignItems: \"center\", gap: 8 }}>\n                <button onClick={() => setCurrent(tl)} style={{ flex: 1, background: \"none\", border: \"none\", color: \"var(--text)\", fontFamily: \"inherit\", fontSize: 11, textAlign: \"left\", cursor: \"pointer\" }}>\n                  {tl.name} <span style={{ color: \"var(--text-dim)\", fontSize: 9 }}>· {tl.segments.length} segs · {tl.segments.reduce((s,g)=>s+g.durationMin,0)}min</span>\n                </button>\n                <button onClick={() => deleteTl(tl.id!)} style={{ background: \"none\", border: \"none\", color: \"var(--text-dim)\", cursor: \"pointer\" }}><Icons.Trash /></button>\n              </div>\n            ))}\n          </div>\n        </div>\n      )}\n\n      <div style={{ fontSize: 9, color: \"var(--text-dim)\", textAlign: \"center\", letterSpacing: \"0.06em\" }}>\n        TOTAL SESSION <span style={{ color: \"var(--accent-violet)\" }}>{totalMin}min</span>\n      </div>\n    </div>\n  );\n}\n",[],[235,242,311],{"_105":320,"_97":321,"_162":322,"_164":243,"_165":147,"_166":323,"_168":169,"_107":324,"_102":33,"_171":191,"_173":325,"_174":22,"_175":-5,"_176":326,"_100":327},"7a253c06-1e71-11f1-a3e4-42dde27851f2","Waveform.tsx","7a253cf6-1e71-11f1-a3e4-42dde27851f2",47,["D",1773360815448],"import React, { useRef, useEffect } from \"react\";\n\ninterface Props {\n  analyser: AnalyserNode | null;\n  playing: boolean;\n  accent: string;\n}\n\nexport function Waveform({ analyser, playing, accent }: Props) {\n  const canvasRef = useRef<HTMLCanvasElement>(null);\n  const rafRef = useRef<number>(0);\n\n  useEffect(() => {\n    const canvas = canvasRef.current;\n    if (!canvas) return;\n    const ctx = canvas.getContext(\"2d\")!;\n\n    // Resolve CSS variable to a real color\n    const resolveColor = (v: string) => {\n      if (v.startsWith(\"var(\")) {\n        const name = v.slice(4, -1).trim();\n        return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || \"#58a6ff\";\n      }\n      return v;\n    };\n\n    const draw = () => {\n      rafRef.current = requestAnimationFrame(draw);\n      const W = canvas.width;\n      const H = canvas.height;\n\n      ctx.clearRect(0, 0, W, H);\n      ctx.fillStyle = \"#161b22\";\n      ctx.fillRect(0, 0, W, H);\n\n      if (!analyser || !playing) {\n        // Flat idle line\n        ctx.strokeStyle = \"rgba(255,255,255,0.06)\";\n        ctx.lineWidth = 1;\n        ctx.beginPath();\n        ctx.moveTo(0, H / 2);\n        ctx.lineTo(W, H / 2);\n        ctx.stroke();\n        return;\n      }\n\n      const bufLen = analyser.fftSize;\n      const data = new Float32Array(bufLen);\n      analyser.getFloatTimeDomainData(data);\n\n      const color = resolveColor(accent);\n\n      // Glow pass\n      ctx.shadowBlur = 10;\n      ctx.shadowColor = color;\n      ctx.strokeStyle = color;\n      ctx.lineWidth = 1.5;\n      ctx.globalAlpha = 0.9;\n      ctx.beginPath();\n\n      const step = W / bufLen;\n      for (let i = 0; i < bufLen; i++) {\n        const x = i * step;\n        const y = (1 - (data[i] * 0.85 + 1) / 2) * H;\n        i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);\n      }\n      ctx.stroke();\n\n      // Second softer pass\n      ctx.shadowBlur = 0;\n      ctx.globalAlpha = 0.25;\n      ctx.lineWidth = 3;\n      ctx.stroke();\n\n      ctx.globalAlpha = 1;\n    };\n\n    draw();\n    return () => { cancelAnimationFrame(rafRef.current); };\n  }, [analyser, playing, accent]);\n\n  return (\n    <canvas\n      ref={canvasRef}\n      width={430}\n      height={56}\n      style={{ width: \"100%\", height: 56, display: \"block\", background: \"var(--bg2)\", borderBottom: \"1px solid var(--border2)\" }}\n    />\n  );\n}\n",[],[235,242,321],[235,242],{"_105":330,"_97":331,"_162":332,"_164":236,"_165":147,"_166":333,"_168":169,"_107":334,"_102":33,"_171":191,"_173":335,"_174":22,"_175":-5,"_176":336,"_100":337},"fc6fefec-1e73-11f1-a4d1-42dde27851f2","AdminQuotesPage.tsx","fc6ff0aa-1e73-11f1-a4d1-42dde27851f2",67,["D",1773361893038],"/**\n * Admin page for managing quotes — not linked from main app.\n * Navigate directly to /admin to access.\n */\nimport React, { useState, useEffect } from \"react\";\n\ninterface Quote { id: number; text: string; author: string; enabled: number; }\n\nexport default function AdminQuotesPage() {\n  const [quotes, setQuotes] = useState<Quote[]>([]);\n  const [loading, setLoading] = useState(true);\n  const [editingId, setEditingId] = useState<number | null>(null);\n  const [draft, setDraft] = useState({ text: \"\", author: \"\" });\n  const [adding, setAdding] = useState(false);\n  const [newQ, setNewQ] = useState({ text: \"\", author: \"\" });\n\n  async function loadQuotes() {\n    setLoading(true);\n    const r = await fetch(\"/api/quotes\");\n    setQuotes(await r.json());\n    setLoading(false);\n  }\n  useEffect(() => { loadQuotes(); }, []);\n\n  async function addQuote() {\n    if (!newQ.text.trim()) return;\n    await fetch(\"/api/quotes\", { method: \"POST\", headers: { \"Content-Type\": \"application/json\" }, body: JSON.stringify(newQ) });\n    setNewQ({ text: \"\", author: \"\" }); setAdding(false); loadQuotes();\n  }\n  async function saveEdit(id: number) {\n    await fetch(`/api/quotes/${id}`, { method: \"PATCH\", headers: { \"Content-Type\": \"application/json\" }, body: JSON.stringify(draft) });\n    setEditingId(null); loadQuotes();\n  }\n  async function deleteQuote(id: number) {\n    await fetch(`/api/quotes/${id}`, { method: \"DELETE\" });\n    loadQuotes();\n  }\n  async function toggleEnabled(q: Quote) {\n    await fetch(`/api/quotes/${q.id}`, { method: \"PATCH\", headers: { \"Content-Type\": \"application/json\" }, body: JSON.stringify({ enabled: !q.enabled }) });\n    loadQuotes();\n  }\n\n  return (\n    <div style={{ minHeight: \"100dvh\", background: \"#0d1117\", color: \"#c9d1d9\", fontFamily: \"'Space Mono','Courier New',monospace\", padding: 24 }}>\n      <style>{`\n        @import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');\n        *{box-sizing:border-box;margin:0;padding:0;}\n        .admin-card{background:#161b22;border:1px solid rgba(255,255,255,0.12);padding:16px;margin-bottom:12px;}\n        input,textarea{background:#0d1117;border:1px solid rgba(255,255,255,0.12);border-radius:6px;color:#c9d1d9;font-family:inherit;font-size:13px;padding:8px 10px;width:100%;outline:none;}\n      `}</style>\n\n      <div style={{ maxWidth: 560, margin: \"0 auto\" }}>\n        <h1 style={{ fontSize: 18, fontWeight: 700, marginBottom: 4, color: \"#f0f6fc\" }}>Admin · Quotes</h1>\n        <p style={{ fontSize: 11, color: \"#6e7681\", marginBottom: 20 }}>Edit and delete quotes. Not linked from main app.</p>\n\n        <a href=\"/\" style={{ display: \"inline-block\", fontSize: 11, color: \"#58a6ff\", marginBottom: 20, textDecoration: \"none\" }}>← Back to app</a>\n\n        {/* Add new */}\n        {adding ? (\n          <div className=\"admin-card\">\n            <textarea rows={3} placeholder=\"Quote text\" value={newQ.text} onChange={e => setNewQ(p => ({ ...p, text: e.target.value }))} style={{ marginBottom: 10, resize: \"vertical\" }} />\n            <input placeholder=\"Author\" value={newQ.author} onChange={e => setNewQ(p => ({ ...p, author: e.target.value }))} style={{ marginBottom: 10 }} />\n            <div style={{ display: \"flex\", gap: 8 }}>\n              <button onClick={addQuote} style={{ padding: \"8px 14px\", background: \"#238636\", border: \"none\", borderRadius: 6, color: \"#fff\", fontFamily: \"inherit\", fontSize: 12, fontWeight: 700, cursor: \"pointer\" }}>Save</button>\n              <button onClick={() => setAdding(false)} style={{ padding: \"8px 14px\", background: \"transparent\", border: \"1px solid rgba(255,255,255,0.2)\", borderRadius: 6, color: \"#8b949e\", fontFamily: \"inherit\", fontSize: 12, cursor: \"pointer\" }}>Cancel</button>\n            </div>\n          </div>\n        ) : (\n          <button onClick={() => setAdding(true)} style={{ padding: \"10px 16px\", background: \"#21262d\", border: \"1px dashed rgba(255,255,255,0.2)\", borderRadius: 8, color: \"#8b949e\", fontFamily: \"inherit\", fontSize: 12, cursor: \"pointer\", marginBottom: 20 }}>\n            + Add quote\n          </button>\n        )}\n\n        {/* Quote list */}\n        {loading ? (\n          <div style={{ color: \"#6e7681\", padding: 40, textAlign: \"center\" }}>Loading…</div>\n        ) : (\n          <div style={{ display: \"flex\", flexDirection: \"column\", gap: 12 }}>\n            {quotes.map(q => (\n              <div key={q.id} className=\"admin-card\" style={{ opacity: q.enabled ? 1 : 0.6 }}>\n                {editingId === q.id ? (\n                  <>\n                    <textarea rows={3} value={draft.text} onChange={e => setDraft(p => ({ ...p, text: e.target.value }))} style={{ marginBottom: 10, resize: \"vertical\" }} />\n                    <input value={draft.author} onChange={e => setDraft(p => ({ ...p, author: e.target.value }))} placeholder=\"Author\" style={{ marginBottom: 10 }} />\n                    <div style={{ display: \"flex\", gap: 8 }}>\n                      <button onClick={() => saveEdit(q.id)} style={{ padding: \"6px 12px\", background: \"#238636\", border: \"none\", borderRadius: 6, color: \"#fff\", fontFamily: \"inherit\", fontSize: 11, cursor: \"pointer\" }}>Save</button>\n                      <button onClick={() => setEditingId(null)} style={{ padding: \"6px 12px\", background: \"transparent\", border: \"1px solid rgba(255,255,255,0.2)\", borderRadius: 6, color: \"#8b949e\", fontFamily: \"inherit\", fontSize: 11, cursor: \"pointer\" }}>Cancel</button>\n                    </div>\n                  </>\n                ) : (\n                  <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"flex-start\", gap: 12 }}>\n                    <div style={{ flex: 1 }}>\n                      <div style={{ fontSize: 13, lineHeight: 1.5, fontStyle: \"italic\", marginBottom: 4 }}>{q.text}</div>\n                      {q.author && <div style={{ fontSize: 11, color: \"#8b949e\" }}>— {q.author}</div>}\n                    </div>\n                    <div style={{ display: \"flex\", gap: 6, flexShrink: 0 }}>\n                      <button onClick={() => toggleEnabled(q)} style={{ padding: \"4px 8px\", background: \"none\", border: \"1px solid rgba(255,255,255,0.2)\", borderRadius: 4, color: q.enabled ? \"#3fb950\" : \"#6e7681\", fontFamily: \"inherit\", fontSize: 10, cursor: \"pointer\" }}>\n                        {q.enabled ? \"ON\" : \"OFF\"}\n                      </button>\n                      <button onClick={() => { setEditingId(q.id); setDraft({ text: q.text, author: q.author }); }} style={{ padding: 4, background: \"none\", border: \"none\", color: \"#8b949e\", cursor: \"pointer\" }} title=\"Edit\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>\n                      </button>\n                      <button onClick={() => deleteQuote(q.id)} style={{ padding: 4, background: \"none\", border: \"none\", color: \"#f85149\", cursor: \"pointer\" }} title=\"Delete\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6\"/></svg>\n                      </button>\n                    </div>\n                  </div>\n                )}\n              </div>\n            ))}\n          </div>\n        )}\n\n        <div style={{ marginTop: 24, fontSize: 11, color: \"#6e7681\", textAlign: \"center\" }}>\n          {quotes.length} quote{quotes.length !== 1 ? \"s\" : \"\"}\n        </div>\n      </div>\n    </div>\n  );\n}\n",[],[235,331],{"_105":339,"_97":340,"_162":341,"_164":236,"_165":147,"_166":342,"_168":169,"_107":343,"_102":344,"_171":191,"_173":345,"_174":22,"_175":-5,"_176":346,"_100":347},"971068dc-1e98-11f1-8b1d-42dde27851f2","App.tsx","da8512bc-1e6f-11f1-b19f-42dde27851f2",81,["D",1773377614326],12,"import React, { useState, useRef, useEffect, useCallback } from \"react\";\nimport { BinauralTab } from \"https://esm.town/v/all/brain/frontend/components/BinauralTab.tsx\";\nimport { OceanPulseTab } from \"https://esm.town/v/all/brain/frontend/components/OceanPulseTab.tsx\";\nimport { TimelineTab } from \"https://esm.town/v/all/brain/frontend/components/TimelineTab.tsx\";\nimport { TTSWisdomTab } from \"https://esm.town/v/all/brain/frontend/components/TTSWisdomTab.tsx\";\nimport { ClockTab } from \"https://esm.town/v/all/brain/frontend/components/ClockTab.tsx\";\nimport { Icons } from \"https://esm.town/v/all/brain/frontend/components/Icons.tsx\";\nimport { Waveform } from \"https://esm.town/v/all/brain/frontend/components/Waveform.tsx\";\n\ntype Tab = \"timeline\" | \"ocean\" | \"wisdom\" | \"clock\" | \"binaural\";\n\n// ── MASTER SESSION STATE ────────────────────────────────────────────────────\nexport interface SessionState {\n  playing: boolean;\n  // binaural\n  binauralOn: boolean;\n  baseFreq: number;\n  beatFreq: number;\n  // ocean\n  oceanOn: boolean;\n  breathRate: number;\n  // clock\n  clockOn: boolean;\n  tickSpeed: number;\n  polySpeed: number;\n  // wisdom\n  wisdomOn: boolean;\n  wisdomIntervalMin: number;\n  wisdomVoice: string;\n  // active timeline segment info\n  activeSegment: { label: string; brainwave: string; color: string } | null;\n}\n\nconst defaultSession: SessionState = {\n  playing: false,\n  binauralOn: true,\n  baseFreq: 200,\n  beatFreq: 10,\n  oceanOn: false,\n  breathRate: 6,\n  clockOn: false,\n  tickSpeed: 1000,\n  polySpeed: 33,\n  wisdomOn: false,\n  wisdomIntervalMin: 10,\n  wisdomVoice: \"autumn\",\n  activeSegment: null,\n};\n\nexport default function App() {\n  const [tab, setTab] = useState<Tab>(\"timeline\");\n  const [session, setSession] = useState<SessionState>(defaultSession);\n\n  // Audio engine refs — shared across all tabs\n  const audioCtxRef = useRef<AudioContext | null>(null);\n  // Binaural\n  const leftOscRef = useRef<OscillatorNode | null>(null);\n  const rightOscRef = useRef<OscillatorNode | null>(null);\n  const binauralGainRef = useRef<GainNode | null>(null);\n  // Ocean\n  const oceanNoiseRef = useRef<AudioBufferSourceNode | null>(null);\n  const oceanLfoRef = useRef<OscillatorNode | null>(null);\n  const oceanGainRef = useRef<GainNode | null>(null);\n  // Clock\n  const clockTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const clockRunningRef = useRef(false);\n  const nextTickRef = useRef(0);\n  const nextPolyRef = useRef(0);\n  // Master analyser for waveform\n  const analyserRef = useRef<AnalyserNode | null>(null);\n  const masterGainRef = useRef<GainNode | null>(null);\n  // Wisdom timer\n  const wisdomTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);\n  const sessionStartRef = useRef<number | null>(null);\n\n  const [sessionElapsedSec, setSessionElapsedSec] = useState(0);\n\n  const getCtx = useCallback(() => {\n    if (!audioCtxRef.current) {\n      const Ctx = window.AudioContext || (window as any).webkitAudioContext;\n      audioCtxRef.current = new Ctx();\n    }\n    const ctx = audioCtxRef.current;\n    if (ctx.state === \"suspended\") ctx.resume();\n\n    // Setup master chain once — limiter gain so all layers mix without clipping\n    if (!analyserRef.current) {\n      const analyser = ctx.createAnalyser();\n      analyser.fftSize = 2048;\n      const limiter = ctx.createGain();\n      limiter.gain.value = 0.85;\n      const master = ctx.createGain();\n      master.gain.value = 1;\n      master.connect(limiter);\n      limiter.connect(analyser);\n      analyser.connect(ctx.destination);\n      analyserRef.current = analyser;\n      masterGainRef.current = master;\n    }\n    return ctx;\n  }, []);\n\n  // ── START BINAURAL ────────────────────────────────────────────────────────\n  const startBinaural = useCallback((ctx: AudioContext, s: SessionState) => {\n    if (leftOscRef.current) { leftOscRef.current.stop(); leftOscRef.current.disconnect(); }\n    if (rightOscRef.current) { rightOscRef.current.stop(); rightOscRef.current.disconnect(); }\n\n    const left = ctx.createOscillator();\n    const right = ctx.createOscillator();\n    const lp = ctx.createStereoPanner(); lp.pan.value = -1;\n    const rp = ctx.createStereoPanner(); rp.pan.value = 1;\n    const gain = ctx.createGain();\n    gain.gain.setValueAtTime(0, ctx.currentTime);\n    gain.gain.linearRampToValueAtTime(0.38, ctx.currentTime + 1.5);\n\n    left.connect(lp); right.connect(rp);\n    lp.connect(gain); rp.connect(gain);\n    gain.connect(masterGainRef.current!);\n\n    left.frequency.value = s.baseFreq;\n    right.frequency.value = s.baseFreq + s.beatFreq;\n    left.start(); right.start();\n    leftOscRef.current = left;\n    rightOscRef.current = right;\n    binauralGainRef.current = gain;\n  }, []);\n\n  const stopBinaural = useCallback(() => {\n    leftOscRef.current?.stop(); leftOscRef.current?.disconnect();\n    rightOscRef.current?.stop(); rightOscRef.current?.disconnect();\n    leftOscRef.current = null; rightOscRef.current = null;\n  }, []);\n\n  // ── START OCEAN ───────────────────────────────────────────────────────────\n  function makeBrown(ctx: AudioContext) {\n    const size = ctx.sampleRate * 4;\n    const buf = ctx.createBuffer(1, size, ctx.sampleRate);\n    const out = buf.getChannelData(0);\n    let last = 0;\n    for (let i = 0; i < size; i++) {\n      const w = Math.random() * 2 - 1;\n      out[i] = (last + 0.02 * w) / 1.02; last = out[i]; out[i] *= 3.5;\n    }\n    return buf;\n  }\n\n  const startOcean = useCallback((ctx: AudioContext, s: SessionState) => {\n    if (oceanNoiseRef.current) { oceanNoiseRef.current.stop(); oceanNoiseRef.current.disconnect(); }\n    if (oceanLfoRef.current) { oceanLfoRef.current.stop(); oceanLfoRef.current.disconnect(); }\n\n    const master = ctx.createGain(); master.gain.value = 0.42;\n    master.connect(masterGainRef.current!);\n\n    const waveGain = ctx.createGain(); waveGain.gain.value = 0.48;\n    waveGain.connect(master);\n\n    const lfo = ctx.createOscillator(); lfo.type = \"sine\";\n    lfo.frequency.value = s.breathRate / 60;\n    const lfoG = ctx.createGain(); lfoG.gain.value = 0.5;\n    lfo.connect(lfoG); lfoG.connect(waveGain.gain); lfo.start();\n\n    const noise = ctx.createBufferSource();\n    noise.buffer = makeBrown(ctx); noise.loop = true;\n    noise.connect(waveGain); noise.start();\n\n    oceanNoiseRef.current = noise;\n    oceanLfoRef.current = lfo;\n    oceanGainRef.current = master;\n  }, []);\n\n  const stopOcean = useCallback(() => {\n    oceanNoiseRef.current?.stop(); oceanNoiseRef.current?.disconnect();\n    oceanLfoRef.current?.stop(); oceanLfoRef.current?.disconnect();\n    oceanGainRef.current?.disconnect();\n    oceanNoiseRef.current = null; oceanLfoRef.current = null;\n  }, []);\n\n  // ── CLOCK SCHEDULER ───────────────────────────────────────────────────────\n  const sessionRef = useRef(session);\n  sessionRef.current = session;\n\n  const scheduleClock = useCallback(() => {\n    const ctx = audioCtxRef.current;\n    if (!ctx || !masterGainRef.current || !clockRunningRef.current) return;\n    const s = sessionRef.current;\n    const ahead = 0.1;\n\n    while (nextTickRef.current < ctx.currentTime + ahead) {\n      const t = nextTickRef.current;\n      const osc = ctx.createOscillator(); const g = ctx.createGain();\n      osc.connect(g); g.connect(masterGainRef.current);\n      osc.type = \"sine\"; osc.frequency.setValueAtTime(900, t); osc.frequency.exponentialRampToValueAtTime(0.01, t + 0.06);\n      g.gain.setValueAtTime(0.28, t); g.gain.exponentialRampToValueAtTime(0.001, t + 0.06);\n      osc.start(t); osc.stop(t + 0.07);\n      nextTickRef.current += s.tickSpeed / 1000;\n    }\n    while (nextPolyRef.current < ctx.currentTime + ahead) {\n      const t = nextPolyRef.current;\n      // Gong-like accent: fundamental + octave harmonic for metallic resonance\n      const osc1 = ctx.createOscillator(); const g1 = ctx.createGain();\n      const osc2 = ctx.createOscillator(); const g2 = ctx.createGain();\n      osc1.type = \"sine\"; osc1.frequency.setValueAtTime(180, t); osc1.frequency.exponentialRampToValueAtTime(120, t + 0.55);\n      osc2.type = \"sine\"; osc2.frequency.setValueAtTime(360, t); osc2.frequency.exponentialRampToValueAtTime(240, t + 0.3);\n      g1.gain.setValueAtTime(0.32, t); g1.gain.exponentialRampToValueAtTime(0.001, t + 0.6);\n      g2.gain.setValueAtTime(0.12, t); g2.gain.exponentialRampToValueAtTime(0.001, t + 0.35);\n      osc1.connect(g1); osc2.connect(g2); g1.connect(masterGainRef.current); g2.connect(masterGainRef.current);\n      osc1.start(t); osc1.stop(t + 0.6); osc2.start(t); osc2.stop(t + 0.35);\n      nextPolyRef.current += s.polySpeed;\n    }\n    if (clockRunningRef.current) clockTimerRef.current = setTimeout(scheduleClock, 25);\n  }, []);\n\n  const startClock = useCallback((ctx: AudioContext) => {\n    if (clockTimerRef.current) clearTimeout(clockTimerRef.current);\n    clockRunningRef.current = true;\n    nextTickRef.current = ctx.currentTime + 0.05;\n    nextPolyRef.current = ctx.currentTime + 0.05;\n    scheduleClock();\n  }, [scheduleClock]);\n\n  const stopClock = useCallback(() => {\n    clockRunningRef.current = false;\n    if (clockTimerRef.current) clearTimeout(clockTimerRef.current);\n    clockTimerRef.current = null;\n  }, []);\n\n  // ── WISDOM SPEAKER ────────────────────────────────────────────────────────\n  const speakWisdom = useCallback(async (quotes: any[], voice: string) => {\n    const enabled = quotes.filter((q: any) => q.enabled);\n    if (!enabled.length) return;\n    const q = enabled[Math.floor(Math.random() * enabled.length)];\n\n    try {\n      const r = await fetch(\"/api/tts\", {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify({ text: q.text, voice }),\n      });\n      if (!r.ok) return;\n      const blob = await r.blob();\n\n      // Apply reverb via Web Audio\n      const ctx = getCtx();\n      const arrayBuf = await blob.arrayBuffer();\n      const decoded = await ctx.decodeAudioData(arrayBuf);\n      const src = ctx.createBufferSource();\n      src.buffer = decoded;\n\n      // Convolver for reverb\n      const convolver = ctx.createConvolver();\n      const reverbLen = ctx.sampleRate * 2.5;\n      const reverbBuf = ctx.createBuffer(2, reverbLen, ctx.sampleRate);\n      for (let ch = 0; ch < 2; ch++) {\n        const d = reverbBuf.getChannelData(ch);\n        for (let i = 0; i < reverbLen; i++) d[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / reverbLen, 2);\n      }\n      convolver.buffer = reverbBuf;\n\n      const dryGain = ctx.createGain(); dryGain.gain.value = 0.6;\n      const wetGain = ctx.createGain(); wetGain.gain.value = 0.25;\n\n      src.connect(dryGain); dryGain.connect(masterGainRef.current!);\n      src.connect(convolver); convolver.connect(wetGain); wetGain.connect(masterGainRef.current!);\n      src.start();\n    } catch (e) { console.error(\"TTS error\", e); }\n  }, [getCtx]);\n\n  // ── MASTER PLAY / STOP ────────────────────────────────────────────────────\n  const masterPlay = useCallback(async () => {\n    const ctx = getCtx();\n    const s = sessionRef.current;\n\n    if (s.binauralOn) startBinaural(ctx, s);\n    if (s.oceanOn) startOcean(ctx, s);\n    if (s.clockOn) startClock(ctx);\n\n    if (s.wisdomOn) {\n      try {\n        const r = await fetch(\"/api/quotes\");\n        const quotes = await r.json();\n        speakWisdom(quotes, s.wisdomVoice);\n        wisdomTimerRef.current = setInterval(async () => {\n          const r2 = await fetch(\"/api/quotes\");\n          const q2 = await r2.json();\n          speakWisdom(q2, sessionRef.current.wisdomVoice);\n        }, s.wisdomIntervalMin * 60 * 1000);\n      } catch (e) { console.error(\"Wisdom fetch error\", e); }\n    }\n\n    sessionStartRef.current = performance.now();\n    setSession(prev => ({ ...prev, playing: true }));\n  }, [getCtx, startBinaural, startOcean, startClock, speakWisdom]);\n\n  const masterStop = useCallback(() => {\n    stopBinaural();\n    stopOcean();\n    stopClock();\n    if (wisdomTimerRef.current) clearInterval(wisdomTimerRef.current);\n    wisdomTimerRef.current = null;\n    sessionStartRef.current = null;\n    setSessionElapsedSec(0);\n    setSession(prev => ({ ...prev, playing: false }));\n  }, [stopBinaural, stopOcean, stopClock]);\n\n  useEffect(() => {\n    if (!session.playing || sessionStartRef.current == null) return;\n    const tick = () => {\n      const elapsed = (performance.now() - sessionStartRef.current!) / 1000;\n      setSessionElapsedSec(elapsed);\n    };\n    tick(); // initial\n    const id = setInterval(tick, 100);\n    return () => clearInterval(id);\n  }, [session.playing]);\n\n  const toggleMaster = useCallback(() => {\n    if (session.playing) masterStop();\n    else masterPlay();\n  }, [session.playing, masterPlay, masterStop]);\n\n  // Update binaural in real-time when params change while playing\n  useEffect(() => {\n    if (session.playing && session.binauralOn && leftOscRef.current && rightOscRef.current && audioCtxRef.current) {\n      const ctx = audioCtxRef.current;\n      leftOscRef.current.frequency.setTargetAtTime(session.baseFreq, ctx.currentTime, 0.1);\n      rightOscRef.current.frequency.setTargetAtTime(session.baseFreq + session.beatFreq, ctx.currentTime, 0.1);\n    }\n  }, [session.baseFreq, session.beatFreq]);\n\n  // Update ocean LFO in real-time\n  useEffect(() => {\n    if (session.playing && session.oceanOn && oceanLfoRef.current && audioCtxRef.current) {\n      oceanLfoRef.current.frequency.setTargetAtTime(session.breathRate / 60, audioCtxRef.current.currentTime, 0.5);\n    }\n  }, [session.breathRate]);\n\n  // Restart clock if speed changes while playing\n  useEffect(() => {\n    if (session.playing && session.clockOn && audioCtxRef.current) {\n      stopClock();\n      startClock(audioCtxRef.current);\n    }\n  }, [session.tickSpeed, session.polySpeed]);\n\n  // React to layer pills while playing — start/stop each layer independently\n  useEffect(() => {\n    if (!session.playing || !audioCtxRef.current) return;\n    if (session.clockOn) startClock(audioCtxRef.current);\n    else stopClock();\n  }, [session.clockOn]);\n\n  useEffect(() => {\n    if (!session.playing || !audioCtxRef.current) return;\n    if (session.binauralOn) startBinaural(audioCtxRef.current, sessionRef.current);\n    else stopBinaural();\n  }, [session.binauralOn]);\n\n  useEffect(() => {\n    if (!session.playing || !audioCtxRef.current) return;\n    if (session.oceanOn) startOcean(audioCtxRef.current, sessionRef.current);\n    else stopOcean();\n  }, [session.oceanOn]);\n\n  useEffect(() => {\n    if (!session.playing) return;\n    if (!session.wisdomOn) {\n      if (wisdomTimerRef.current) { clearInterval(wisdomTimerRef.current); wisdomTimerRef.current = null; }\n      return;\n    }\n    let cancelled = false;\n    const intervalMin = sessionRef.current.wisdomIntervalMin;\n    (async () => {\n      try {\n        const r = await fetch(\"/api/quotes\");\n        if (cancelled) return;\n        const quotes = await r.json();\n        if (cancelled) return;\n        speakWisdom(quotes, sessionRef.current.wisdomVoice);\n        if (cancelled) return;\n        wisdomTimerRef.current = setInterval(async () => {\n          if (!sessionRef.current.wisdomOn) return;\n          const r2 = await fetch(\"/api/quotes\");\n          const q2 = await r2.json();\n          speakWisdom(q2, sessionRef.current.wisdomVoice);\n        }, intervalMin * 60 * 1000);\n      } catch (e) { if (!cancelled) console.error(\"Wisdom fetch error\", e); }\n    })();\n    return () => { cancelled = true; if (wisdomTimerRef.current) clearInterval(wisdomTimerRef.current); wisdomTimerRef.current = null; };\n  }, [session.wisdomOn, session.wisdomIntervalMin]);\n\n  useEffect(() => () => { masterStop(); }, []);\n\n  const NAV: { id: Tab; label: string; accent: string; icon: keyof typeof Icons }[] = [\n    { id: \"timeline\", label: \"FLOW\",   accent: \"var(--accent-violet)\", icon: \"Timeline\" },\n    { id: \"binaural\", label: \"BEATS\",  accent: \"var(--accent-blue)\",   icon: \"Waves\"    },\n    { id: \"ocean\",    label: \"OCEAN\",  accent: \"var(--accent-cyan)\",   icon: \"Ocean\"    },\n    { id: \"wisdom\",   label: \"WISDOM\", accent: \"var(--accent-amber)\",  icon: \"Quote\"    },\n    { id: \"clock\",    label: \"CLOCK\",  accent: \"var(--accent-green)\",  icon: \"Clock\"    },\n  ];\n\n  const activeAccent = NAV.find(n => n.id === tab)?.accent ?? \"var(--accent-blue)\";\n\n  return (\n    <div className=\"app-root\">\n      <style>{`\n        @import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');\n        :root {\n          --bg:#0d1117; --bg2:#161b22; --bg3:#1c2330;\n          --border:rgba(255,255,255,0.06); --border2:rgba(255,255,255,0.12);\n          --text:#c9d1d9; --text-dim:#6e7681; --text-bright:#f0f6fc;\n          --accent-blue:#58a6ff; --accent-cyan:#39d0d8;\n          --accent-violet:#bc8cff; --accent-amber:#e3b341;\n          --accent-green:#3fb950; --accent-rose:#f85149;\n        }\n        *{box-sizing:border-box;margin:0;padding:0;}\n        body{background:var(--bg);color:var(--text);font-family:'Space Mono','Courier New',monospace;-webkit-font-smoothing:antialiased;}\n        .app-root{min-height:100dvh;display:flex;justify-content:center;align-items:center;background:var(--bg);padding:0;}\n        .app-shell{width:100%;max-width:430px;display:flex;flex-direction:column;min-height:100dvh;height:100dvh;border-left:1px solid var(--border2);border-right:1px solid var(--border2);}\n        @media (min-width:768px){\n          .app-root{background:linear-gradient(135deg,var(--bg) 0%,#0a0e14 50%,var(--bg) 100%);padding:32px 0;}\n          .app-shell{max-width:640px;width:90vw;height:min(92dvh,860px);min-height:680px;border-radius:20px;border:1px solid var(--border2);box-shadow:0 24px 48px rgba(0,0,0,0.4),0 0 1px rgba(255,255,255,0.05);overflow:hidden;}\n        }\n        .card{background:var(--bg2);border:1px solid var(--border2);outline:1px solid var(--border);outline-offset:3px;border-radius:14px;padding:16px;}\n        .card-sm{background:var(--bg2);border:1px solid var(--border2);outline:1px solid var(--border);outline-offset:2px;border-radius:10px;padding:10px 12px;}\n        @media (min-width:768px){.card{padding:24px;}.card-sm{padding:14px 18px;}}\n        .scroll-area{overflow-y:auto;}\n        .scroll-area::-webkit-scrollbar{width:2px;}\n        .scroll-area::-webkit-scrollbar-thumb{background:var(--border2);border-radius:1px;}\n        .nav-bar{display:flex;padding:6px;gap:3px;background:var(--bg2);border-top:1px solid var(--border2);}\n        @media (min-width:768px){.nav-bar{padding:14px 18px;gap:10px;border-radius:0 0 20px 20px;}.nav-btn{font-size:10px;padding:10px 4px;gap:6px;}.nav-btn svg{transform:scale(1.15);}}\n        .nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:7px 2px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--text-dim);font-family:inherit;font-size:8px;font-weight:700;letter-spacing:0.08em;cursor:pointer;transition:all 0.15s;}\n        .nav-btn.active{background:var(--bg3);border:1px solid var(--border2);outline:1px solid var(--border);outline-offset:1px;}\n        .nav-btn:not(.active):hover{color:var(--text);}\n        .preset-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;}\n        .preset-btn{background:var(--bg2);border:1px solid var(--border2);outline:1px solid var(--border);outline-offset:2px;border-radius:10px;padding:9px 8px;cursor:pointer;font-family:inherit;color:var(--text-dim);transition:all 0.15s;text-align:left;}\n        .preset-btn.active{background:var(--bg3);}\n        .preset-name{font-size:9px;font-weight:700;letter-spacing:0.07em;display:block;margin-bottom:3px;}\n        .preset-hz{font-size:9px;opacity:0.5;display:block;}\n        .preset-wave{font-size:8px;margin-top:2px;display:block;opacity:0.35;letter-spacing:0.04em;}\n        .noise-btn{background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:4px 10px;font-family:inherit;font-size:9px;font-weight:700;color:var(--text-dim);cursor:pointer;letter-spacing:0.06em;transition:all 0.15s;}\n        .label-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;}\n        .label-key{font-size:9px;font-weight:700;letter-spacing:0.1em;color:var(--text-dim);text-transform:uppercase;}\n        .label-val{font-size:11px;font-weight:700;}\n        .section-title{font-size:17px;font-weight:700;color:var(--text-bright);letter-spacing:-0.01em;}\n        .section-sub{font-size:9px;color:var(--text-dim);letter-spacing:0.08em;margin-top:2px;}\n        @media (min-width:768px){.section-title{font-size:22px;}.section-sub{font-size:11px;}.label-key{font-size:10px;}.label-val{font-size:13px;}.preset-name{font-size:10px;}.preset-hz{font-size:10px;}.preset-wave{font-size:9px;}.preset-btn{padding:12px 10px;}.app-header{padding:20px 24px 16px;}.app-header span:first-child{font-size:18px;}.app-header div{font-size:10px;line-height:1.5;}.app-main{padding:24px 22px 140px;}.waveform-wrap{height:72px;}.waveform-wrap canvas{height:72px!important;min-height:72px!important;}}\n        /* master play button — light/white, centered in toolbar */\n        .master-play{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.25);outline:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;transition:all 0.2s;font-family:inherit;flex-shrink:0;flex:0 0 56px;}\n        @media (min-width:768px){.master-play{width:68px;height:68px;flex:0 0 68px;}.master-play svg{transform:scale(1.2);}}\n        .master-play:hover{background:rgba(255,255,255,0.22);}\n        .master-play.active{background:var(--play-color);border-color:var(--play-color);color:#fff;box-shadow:0 0 20px color-mix(in srgb,var(--play-color) 50%,transparent);}\n        /* module toggle pill */\n        .mod-pill{display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:20px;border:1px solid var(--border);cursor:pointer;font-family:inherit;font-size:9px;font-weight:700;letter-spacing:0.07em;color:var(--text-dim);background:var(--bg2);transition:all 0.15s;white-space:nowrap;}\n        .mod-pill.on{border-color:var(--pill-color);color:var(--pill-color);}\n        .mod-dot{width:5px;height:5px;border-radius:50%;background:currentColor;}\n        select{background:var(--bg2);border:1px solid var(--border2);border-radius:6px;color:#f0f6fc;font-family:inherit;font-size:10px;padding:6px 8px;outline:none;width:100%;}\n        select option{background:var(--bg2);color:#f0f6fc;}\n        input[type=\"number\"],input[type=\"text\"],input:not([type]),textarea{background:var(--bg2)!important;border:1px solid var(--border2)!important;border-radius:6px;color:#f0f6fc!important;font-family:inherit;font-size:11px;padding:7px 9px;outline:none;width:100%;}\n        input::placeholder,textarea::placeholder{color:rgba(255,255,255,0.4);}\n        @media (min-width:768px){input[type=\"number\"],input[type=\"text\"],input:not([type]),textarea{font-size:13px!important;padding:10px 12px!important;border-radius:8px!important;}select{font-size:12px!important;padding:10px 12px!important;}.slider-wrap{height:22px;}.slider-thumb::-webkit-slider-thumb{width:18px;height:18px;}.slider-thumb::-moz-range-thumb{width:18px;height:18px;}}\n        .slider-wrap{position:relative;height:18px;display:flex;align-items:center;}\n        .slider-track{position:absolute;width:100%;height:3px;border-radius:2px;background:var(--bg3);border:1px solid var(--border);}\n        .slider-fill{position:absolute;height:3px;border-radius:2px;pointer-events:none;}\n        .slider-thumb{position:absolute;width:100%;z-index:2;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none;height:18px;}\n        .slider-thumb::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--bg2);border:1px solid var(--border2);outline:1px solid var(--border);outline-offset:2px;cursor:pointer;}\n        .slider-thumb::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--bg2);border:1px solid var(--border2);cursor:pointer;}\n        @keyframes pulse{0%,100%{opacity:1}50%{opacity:0.3}}\n        .live-dot{animation:pulse 2s ease-in-out infinite;}\n      `}</style>\n\n      <div className=\"app-shell\">\n        {/* ── HEADER ── */}\n        <header className=\"app-header\" style={{ padding:\"12px 16px 10px\", borderBottom:\"1px solid var(--border2)\", background:\"var(--bg2)\", flexShrink:0 }}>\n          <span style={{ fontSize:13, fontWeight:700, letterSpacing:\"0.14em\", color:\"var(--text-bright)\" }}>\n            <span style={{ color:\"var(--accent-blue)\" }}>brain</span>\n          </span>\n          <div style={{ fontSize:8, color:\"var(--text-dim)\", marginTop:4, letterSpacing:\"0.04em\", lineHeight:1.4 }}>\n            · Binaural beats for the token breather - Tomaso Valmax\n          </div>\n        </header>\n\n        {/* ── WAVEFORM ── */}\n        <div className=\"waveform-wrap\">\n          <Waveform analyser={analyserRef.current} playing={session.playing} accent={activeAccent} />\n        </div>\n\n        {/* ── ACTIVE SEGMENT BADGE ── */}\n        {session.activeSegment && session.playing && (\n          <div style={{ padding:\"4px 16px\", background:\"var(--bg2)\", borderBottom:\"1px solid var(--border)\", display:\"flex\", gap:8, alignItems:\"center\" }}>\n            <div style={{ width:6, height:6, borderRadius:\"50%\", background:session.activeSegment.color }} />\n            <span style={{ fontSize:9, letterSpacing:\"0.1em\", color:\"var(--text-dim)\" }}>\n              {session.activeSegment.label.toUpperCase()} · {session.activeSegment.brainwave.toUpperCase()}\n            </span>\n          </div>\n        )}\n\n        {/* ── MAIN CONTENT ── */}\n        <main className=\"scroll-area app-main\" style={{ flex:1, padding:\"16px 14px 120px\" }}>\n          {tab === \"timeline\"  && <TimelineTab session={session} setSession={setSession} masterPlaying={session.playing} masterPlay={masterPlay} masterStop={masterStop} masterElapsedSec={sessionElapsedSec} />}\n          {tab === \"binaural\"  && <BinauralTab session={session} setSession={setSession} />}\n          {tab === \"ocean\"     && <OceanPulseTab session={session} setSession={setSession} />}\n          {tab === \"wisdom\"    && <TTSWisdomTab session={session} setSession={setSession} speakWisdom={speakWisdom} />}\n          {tab === \"clock\"     && <ClockTab session={session} setSession={setSession} />}\n        </main>\n\n        {/* ── BOTTOM TOOLBAR (mobile) — play centered ── */}\n        <nav className=\"nav-bar\" style={{ position:\"absolute\", bottom:0, left:0, right:0, flexShrink:0, display:\"flex\", alignItems:\"center\", justifyContent:\"space-between\", padding:\"8px 6px\", gap:4 }}>\n          <div style={{ flex: 1, display: \"flex\", gap: 4 }}>\n            {NAV.slice(0, 2).map(({ id, label, accent, icon }) => {\n              const Icon = Icons[icon] as () => JSX.Element;\n              const active = tab === id;\n              return (\n                <button key={id} onClick={() => setTab(id)}\n                  className={`nav-btn${active ? \" active\" : \"\"}`}\n                  style={{ color: active ? accent : undefined, flex: 1 }}>\n                  <Icon />\n                  {label}\n                </button>\n              );\n            })}\n          </div>\n          <button\n            onClick={toggleMaster}\n            className={`master-play${session.playing ? \" active\" : \"\"}`}\n            style={{ \"--play-color\": \"var(--accent-green)\" } as React.CSSProperties}>\n            {session.playing\n              ? <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"2\"/></svg>\n              : <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"5 3 19 12 5 21 5 3\"/></svg>\n            }\n          </button>\n          <div style={{ flex: 1, display: \"flex\", gap: 4 }}>\n            {NAV.slice(2).map(({ id, label, accent, icon }) => {\n              const Icon = Icons[icon] as () => JSX.Element;\n              const active = tab === id;\n              return (\n                <button key={id} onClick={() => setTab(id)}\n                  className={`nav-btn${active ? \" active\" : \"\"}`}\n                  style={{ color: active ? accent : undefined, flex: 1 }}>\n                  <Icon />\n                  {label}\n                </button>\n              );\n            })}\n          </div>\n        </nav>\n      </div>\n    </div>\n  );\n}\n",[],[235,340],[235],{"_105":350,"_97":351,"_162":352,"_164":-5,"_165":147,"_166":353,"_168":169,"_107":354,"_102":33,"_171":355,"_173":356,"_174":22,"_175":-5,"_176":357,"_100":358},"e881aa1c-1e72-11f1-b7a2-42dde27851f2",".vtignore","e881aada-1e72-11f1-b7a2-42dde27851f2",54,["D",1773361430101],"file",".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[],[351],{"_105":360,"_97":361,"_162":362,"_164":-5,"_165":147,"_166":363,"_168":169,"_107":364,"_102":33,"_171":355,"_173":365,"_174":22,"_175":-5,"_176":366,"_100":367},"e88a36be-1e72-11f1-b49d-42dde27851f2","AGENTS.md","e88a3754-1e72-11f1-b49d-42dde27851f2",56,["D",1773361430125],"You are an advanced assistant specialized in generating Val Town code.\n\n## Core Guidelines\n\n- Ask clarifying questions when requirements are ambiguous\n- Provide complete, functional solutions rather than skeleton implementations\n- Test your logic against edge cases before presenting the final solution\n- Ensure all code follows Val Town's specific platform requirements\n- If a section of code that you're working on is getting too complex, consider refactoring it into subcomponents\n\n## Code Standards\n\n- Generate code in TypeScript or TSX\n- Add appropriate TypeScript types and interfaces for all data structures\n- Prefer official SDKs or libraries than writing API calls directly\n- Ask the user to supply API or library documentation if you are at all unsure about it\n- **Never bake in secrets into the code** - always use environment variables\n- Include comments explaining complex logic (avoid commenting obvious operations)\n- Follow modern ES6+ conventions and functional programming practices if possible\n\n## Types of triggers\n\n### 1. HTTP Trigger\n\n- Create web APIs and endpoints\n- Handle HTTP requests and responses\n- Example structure:\n\n```ts\nexport default async function (req: Request) {\n  return new Response(\"Hello World\");\n}\n```\n\nFiles that are HTTP triggers have http in their name like `foobar.http.tsx`\n\n### 2. Cron Triggers\n\n- Run on a schedule\n- Use cron expressions for timing\n- Example structure:\n\n```ts\nexport default async function () {\n  // Scheduled task code\n}\n```\n\nFiles that are Cron triggers have cron in their name like `foobar.cron.tsx`\n\n### 3. Email Triggers\n\n- Process incoming emails\n- Handle email-based workflows\n- Example structure:\n\n```ts\nexport default async function (email: Email) {\n  // Process email\n}\n```\n\nFiles that are Email triggers have email in their name like `foobar.email.tsx`\n\n\n## Val Town Standard Libraries\n\nVal Town provides several hosted services and utility functions.\n\n### Blob Storage\n\n```ts\nimport { blob } from \"https://esm.town/v/std/blob\";\nawait blob.setJSON(\"myKey\", { hello: \"world\" });\nlet blobDemo = await blob.getJSON(\"myKey\");\nlet appKeys = await blob.list(\"app_\");\nawait blob.delete(\"myKey\");\n```\n\n### SQLite\n\n```ts\nimport { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nconst TABLE_NAME = 'todo_app_users_2';\n// Create table - do this before usage and change table name when modifying schema\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (\n  id INTEGER PRIMARY KEY AUTOINCREMENT,\n  name TEXT NOT NULL\n)`);\n// Query data\nconst result = await sqlite.execute(`SELECT * FROM ${TABLE_NAME} WHERE id = ?`, [1]);\n```\n\nNote: When changing a SQLite table's schema, change the table's name (e.g., add _2 or _3) to create a fresh table.\n\n### OpenAI\n\n```ts\nimport { OpenAI } from \"https://esm.town/v/std/openai\";\nconst openai = new OpenAI();\nconst completion = await openai.chat.completions.create({\n  messages: [\n    { role: \"user\", content: \"Say hello in a creative way\" },\n  ],\n  model: \"gpt-4o-mini\",\n  max_tokens: 30,\n});\n```\n\n### Email\n\n```ts\nimport { email } from \"https://esm.town/v/std/email\";\n// By default emails the owner of the val\nawait email({ \n  subject: \"Hi\",  \n  text: \"Hi\", \n  html: \"<h1>Hi</h1>\"\n});\n```\n\n## Val Town Utility Functions\n\nVal Town provides several utility functions to help with common project tasks.\n\n### Importing Utilities\n\nAlways import utilities with version pins to avoid breaking changes:\n\n```ts\nimport { parseProject, readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n```\n\n### Available Utilities\n\n\n#### **serveFile** - Serve project files with proper content types\n\nFor example, in Hono:\n\n```ts\n// serve all files in frontend/ and shared/\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n```\n\n#### **readFile** - Read files from within the project:\n\n```ts\n// Read a file from the project\nconst fileContent = await readFile(\"/frontend/index.html\", import.meta.url);\n```\n\n#### **listFiles** - List all files in the project\n\n```ts\nconst files = await listFiles(import.meta.url);\n```\n\n#### **parseProject** - Extract information about the current project from import.meta.url\n\nThis is useful for including info for linking back to a val, ie in \"view source\" urls:\n\n```ts\nconst projectVal = parseProject(import.meta.url);\nconsole.log(projectVal.username); // Owner of the project\nconsole.log(projectVal.name);     // Project name\nconsole.log(projectVal.version);  // Version number\nconsole.log(projectVal.branch);   // Branch name\nconsole.log(projectVal.links.self.project); // URL to the project page\n```\n\nHowever, it's *extremely importing* to note that `parseProject` and other Standard Library utilities ONLY RUN ON THE SERVER.\nIf you need access to this data on the client, run it in the server and pass it to the client by splicing it into the HTML page\nor by making an API request for it.\n\n## Val Town Platform Specifics\n\n- **Redirects:** Use `return new Response(null, { status: 302, headers: { Location: \"/place/to/redirect\" }})` instead of `Response.redirect` which is broken\n- **Images:** Avoid external images or base64 images. Use emojis, unicode symbols, or icon fonts/libraries instead\n- **AI Image:** To inline generate an AI image use: `<img src=\"https://maxm-imggenurl.web.val.run/the-description-of-your-image\" />`\n- **Storage:** DO NOT use the Deno KV module for storage\n- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods\n- **Weather Data:** Use open-meteo for weather data (doesn't require API keys) unless otherwise specified\n- **View Source:** Add a view source link by importing & using `import.meta.url.replace(\"ems.sh\", \"val.town)\"` (or passing this data to the client) and include `target=\"_top\"` attribute\n- **Error Debugging:** Add `<script src=\"https://esm.town/v/std/catch\"></script>` to HTML to capture client-side errors\n- **Error Handling:** Only use try...catch when there's a clear local resolution; Avoid catches that merely log or return 500s. Let errors bubble up with full context\n- **Environment Variables:** Use `Deno.env.get('keyname')` when you need to, but generally prefer APIs that don't require keys\n- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser\n- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites\n- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and start the file with `/** @jsxImportSource https://esm.sh/react@18.2.0 */`\n- Ensure all React dependencies and sub-dependencies are pinned to the same version\n- **Styling:** Default to using TailwindCSS via `<script src=\"https://cdn.twind.style\" crossorigin></script>` unless otherwise specified\n\n## Project Structure and Design Patterns\n\n### Recommended Directory Structure\n```\n├── backend/\n│   ├── database/\n│   │   ├── migrations.ts    # Schema definitions\n│   │   ├── queries.ts       # DB query functions\n│   │   └── README.md\n│   └── routes/              # Route modules\n│       ├── [route].ts\n│       └── static.ts        # Static file serving\n│   ├── index.ts             # Main entry point\n│   └── README.md\n├── frontend/\n│   ├── components/\n│   │   ├── App.tsx\n│   │   └── [Component].tsx\n│   ├── favicon.svg\n│   ├── index.html           # Main HTML template\n│   ├── index.tsx            # Frontend JS entry point\n│   ├── README.md\n│   └── style.css\n├── README.md\n└── shared/\n    ├── README.md\n    └── utils.ts             # Shared types and functions\n```\n\n### Backend (Hono) Best Practices\n\n- Hono is the recommended API framework\n- Main entry point should be `backend/index.ts`\n- **Static asset serving:** Use the utility functions to read and serve project files:\n  ```ts\n  import { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n  \n  // serve all files in frontend/ and shared/\n  app.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n  app.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n  \n  // For index.html, often you'll want to bootstrap with initial data\n  app.get(\"/\", async c => {\n    let html = await readFile(\"/frontend/index.html\", import.meta.url);\n    \n    // Inject data to avoid extra round-trips\n    const initialData = await fetchInitialData();\n    const dataScript = `<script>\n      window.__INITIAL_DATA__ = ${JSON.stringify(initialData)};\n    </script>`;\n    \n    html = html.replace(\"</head>\", `${dataScript}</head>`);\n    return c.html(html);\n  });\n  ```\n- Create RESTful API routes for CRUD operations\n- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:\n  ```ts\n  // Unwrap Hono errors to see original error details\n  app.onError((err, c) => {\n    throw err;\n  });\n  ```\n\n### Database Patterns\n- Run migrations on startup or comment out for performance\n- Change table names when modifying schemas rather than altering\n- Export clear query functions with proper TypeScript typing\n\n## Common Gotchas and Solutions\n\n1. **Environment Limitations:** \n   - Val Town runs on Deno in a serverless context, not Node.js\n   - Code in `shared/` must work in both frontend and backend environments\n   - Cannot use `Deno` keyword in shared code\n   - Use `https://esm.sh` for imports that work in both environments\n\n2. **SQLite Peculiarities:**\n   - Limited support for ALTER TABLE operations\n   - Create new tables with updated schemas and copy data when needed\n   - Always run table creation before querying\n\n3. **React Configuration:**\n   - All React dependencies must be pinned to 18.2.0\n   - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files\n   - Rendering issues often come from mismatched React versions\n\n4. **File Handling:**\n   - Val Town only supports text files, not binary\n   - Use the provided utilities to read files across branches and forks\n   - For files in the project, use `readFile` helpers\n\n5. **API Design:**\n   - `fetch` handler is the entry point for HTTP vals\n   - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`\n\n",[],[361],{"_105":369,"_97":370,"_162":371,"_164":-5,"_165":147,"_166":372,"_168":169,"_107":373,"_102":33,"_171":355,"_173":374,"_174":22,"_175":-5,"_176":375,"_100":376},"e8e3f35c-1e72-11f1-afb6-42dde27851f2","deno.json","e8e3f438-1e72-11f1-afb6-42dde27851f2",59,["D",1773361430101],"{\n  \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/98f62cee78e85bfc47c62ed703777c6bc8794f1c/cli/schemas/config-file.v1.json\",\n  \"lock\": false,\n  \"compilerOptions\": {\n    \"noImplicitAny\": false,\n    \"strict\": true,\n    \"types\": [\"https://www.val.town/types/valtown.d.ts\"],\n    \"lib\": [\n      \"dom\",\n      \"dom.iterable\",\n      \"dom.asynciterable\",\n      \"deno.ns\",\n      \"deno.unstable\"\n    ]\n  },\n  \"lint\": {\n    \"include\": [\"deno:/https/esm.town/**/*\"],\n    \"rules\": {\n      \"exclude\": [\"no-explicit-any\"]\n    }\n  },\n  \"node_modules_dir\": false,\n  \"experimental\": {\n    \"unstable-node-globals\": true,\n    \"unstable-temporal\": true,\n    \"unstable-worker-options\": true,\n    \"unstable-sloppy-imports\": true\n  }\n}",[],[370],{"_105":378,"_97":379,"_162":380,"_164":-5,"_165":147,"_166":381,"_168":169,"_107":382,"_102":189,"_171":383,"_173":384,"_174":22,"_175":98,"_176":385,"_100":386},"47829688-1e74-11f1-9df1-42dde27851f2","main.ts","c1c5a18e-1e6e-11f1-9536-42dde27851f2",73,["D",1773362018986],"http","/**\n * brain — Main HTTP entry point · Tomaso Valmax\n * Routes:\n *   /api/*  → backend API handlers\n *   /*      → React SPA (HTML shell)\n */\nimport { handleAPI } from \"./backend/index.ts\";\n\nexport default async function handler(req: Request): Promise<Response> {\n  const url = new URL(req.url);\n\n  // --- API Routes ---\n  if (url.pathname.startsWith(\"/api/\")) {\n    const res = await handleAPI(req);\n    if (res) return res;\n    return new Response(JSON.stringify({ error: \"Not Found\" }), {\n      status: 404,\n      headers: { \"Content-Type\": \"application/json\" },\n    });\n  }\n\n  // --- Admin page (not linked from main app) ---\n  if (url.pathname === \"/admin\" || url.pathname === \"/admin/\") {\n    const ESM = \"https://esm.town/v/all/brain\";\n    const html = `<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\"/>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, viewport-fit=cover\"/>\n  <title>brain Admin</title>\n  <script type=\"importmap\">\n  {\"imports\":{\"react\":\"https://esm.sh/react@18\",\"react/\":\"https://esm.sh/react@18/\",\"react-dom\":\"https://esm.sh/react-dom@18\",\"react-dom/\":\"https://esm.sh/react-dom@18/\",\"react/jsx-runtime\":\"https://esm.sh/react@18/jsx-runtime\"}}\n  </script>\n  <style>*{box-sizing:border-box;margin:0;padding:0;}body{background:#0d1117;}</style>\n</head>\n<body>\n  <div id=\"root\"></div>\n  <script type=\"module\">\n    import { createRoot } from \"react-dom/client\";\n    import { createElement } from \"react\";\n    import AdminQuotesPage from \"${ESM}/frontend/AdminQuotesPage.tsx\";\n    createRoot(document.getElementById(\"root\")).render(createElement(AdminQuotesPage));\n  </script>\n</body>\n</html>`;\n    return new Response(html, { headers: { \"Content-Type\": \"text/html; charset=utf-8\" } });\n  }\n\n  // --- Frontend SPA Shell ---\n  // esm.town serves val .tsx files as JS modules with correct MIME type.\n  // An importmap is required so that bare specifiers like \"react/jsx-runtime\"\n  // (injected by the TSX→JS transform) resolve correctly in the browser.\n  const ESM = \"https://esm.town/v/all/brain\";\n\n  const html = `<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\"/>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, viewport-fit=cover\"/>\n  <title>brain · Tomaso Valmax</title>\n  <script src=\"https://cdn.tailwindcss.com\"></script>\n  \n  <script type=\"importmap\">\n  {\n    \"imports\": {\n      \"react\":             \"https://esm.sh/react@18\",\n      \"react/\":            \"https://esm.sh/react@18/\",\n      \"react-dom\":         \"https://esm.sh/react-dom@18\",\n      \"react-dom/\":        \"https://esm.sh/react-dom@18/\",\n      \"react/jsx-runtime\": \"https://esm.sh/react@18/jsx-runtime\"\n    }\n  }\n  </script>\n  <style>\n    *, *::before, *::after { box-sizing: border-box; }\n    body { margin: 0; background: #0d1117; color: #c9d1d9; font-family: 'Space Mono', 'Courier New', monospace; }\n    #root { height: 100dvh; display: flex; flex-direction: column; }\n  </style>\n</head>\n<body>\n  <div id=\"root\"></div>\n  <script type=\"module\">\n    import { createRoot } from \"react-dom/client\";\n    import { createElement } from \"react\";\n    import App from \"${ESM}/frontend/App.tsx\";\n    createRoot(document.getElementById(\"root\")).render(createElement(App));\n  </script>\n</body>\n</html>`;\n\n  return new Response(html, {\n    headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n  });\n}\n",[],[379],"files",[159,178,185,195,204,214,223,233,240,247,256,265,274,283,292,300,309,319,329,338,349,359,368,377],"counts",{"_391":33,"_392":393,"_394":33,"_395":396,"_399":400},"pulls","branches",1,"forks","envVars",{"_397":393,"_398":33},"count","emptyCount","connections",{"_397":33,"_401":33},"unfilledCount","contents",[],{"_105":339,"_165":147,"_162":341,"_97":340,"_173":345,"_171":191,"_102":344,"_164":236,"_107":405,"_166":342,"_175":-5,"_100":406},["D",1773377614326],[235,340],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.history_.$",{"_95":96,"_97":98,"_99":45,"_100":101,"_103":415,"_355":420,"_423":424,"_487":488,"_503":33,"_504":33,"_505":22},{"_105":106,"_97":98,"_107":416,"_109":-5,"_110":22,"_111":112,"_113":-5,"_114":-5,"_14":115,"_116":-5,"_117":22,"_118":-5,"_119":-5,"_120":33,"_16":121,"_122":123,"_124":125,"_126":-5,"_127":128,"_129":128,"_130":131,"_132":131,"_133":131,"_134":128,"_135":128,"_23":417,"_139":418,"_144":419,"_156":22},["D",1773359647109],{"_95":96,"_137":138},{"_95":96,"_141":138,"_14":115,"_142":143},{"_102":146,"_97":45,"_105":147,"_148":106,"_149":-5,"_150":-5,"_151":-5,"_152":-5,"_153":-5,"_154":98,"_155":96},{"_105":339,"_97":340,"_162":341,"_164":236,"_165":147,"_166":342,"_168":169,"_107":421,"_102":344,"_171":191,"_173":345,"_174":22,"_175":-5,"_100":422},["D",1773377614326],[235,340],"history",[425,427,432,437,442,447,452,457,462,467,472,477,482],{"_105":339,"_165":147,"_162":341,"_97":340,"_173":345,"_171":191,"_102":344,"_164":236,"_107":426,"_166":342,"_175":-5},["D",1773377614326],{"_105":428,"_165":147,"_162":341,"_97":340,"_173":429,"_171":191,"_102":269,"_164":236,"_107":430,"_166":431,"_175":-5},"4fe3fa6e-1e75-11f1-bef1-42dde27851f2","import React, { useState, useRef, useEffect, useCallback } from \"react\";\nimport { BinauralTab } from \"https://esm.town/v/all/brain/frontend/components/BinauralTab.tsx\";\nimport { OceanPulseTab } from \"https://esm.town/v/all/brain/frontend/components/OceanPulseTab.tsx\";\nimport { TimelineTab } from \"https://esm.town/v/all/brain/frontend/components/TimelineTab.tsx\";\nimport { TTSWisdomTab } from \"https://esm.town/v/all/brain/frontend/components/TTSWisdomTab.tsx\";\nimport { ClockTab } from \"https://esm.town/v/all/brain/frontend/components/ClockTab.tsx\";\nimport { Icons } from \"https://esm.town/v/all/brain/frontend/components/Icons.tsx\";\nimport { Waveform } from \"https://esm.town/v/all/brain/frontend/components/Waveform.tsx\";\n\ntype Tab = \"timeline\" | \"ocean\" | \"wisdom\" | \"clock\" | \"binaural\";\n\n// ── MASTER SESSION STATE ────────────────────────────────────────────────────\nexport interface SessionState {\n  playing: boolean;\n  // binaural\n  binauralOn: boolean;\n  baseFreq: number;\n  beatFreq: number;\n  // ocean\n  oceanOn: boolean;\n  breathRate: number;\n  // clock\n  clockOn: boolean;\n  tickSpeed: number;\n  polySpeed: number;\n  // wisdom\n  wisdomOn: boolean;\n  wisdomIntervalMin: number;\n  wisdomVoice: string;\n  // active timeline segment info\n  activeSegment: { label: string; brainwave: string; color: string } | null;\n}\n\nconst defaultSession: SessionState = {\n  playing: false,\n  binauralOn: true,\n  baseFreq: 200,\n  beatFreq: 10,\n  oceanOn: false,\n  breathRate: 6,\n  clockOn: false,\n  tickSpeed: 1000,\n  polySpeed: 33,\n  wisdomOn: false,\n  wisdomIntervalMin: 10,\n  wisdomVoice: \"troy\",\n  activeSegment: null,\n};\n\nexport default function App() {\n  const [tab, setTab] = useState<Tab>(\"timeline\");\n  const [session, setSession] = useState<SessionState>(defaultSession);\n\n  // Audio engine refs — shared across all tabs\n  const audioCtxRef = useRef<AudioContext | null>(null);\n  // Binaural\n  const leftOscRef = useRef<OscillatorNode | null>(null);\n  const rightOscRef = useRef<OscillatorNode | null>(null);\n  const binauralGainRef = useRef<GainNode | null>(null);\n  // Ocean\n  const oceanNoiseRef = useRef<AudioBufferSourceNode | null>(null);\n  const oceanLfoRef = useRef<OscillatorNode | null>(null);\n  const oceanGainRef = useRef<GainNode | null>(null);\n  // Clock\n  const clockTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const clockRunningRef = useRef(false);\n  const nextTickRef = useRef(0);\n  const nextPolyRef = useRef(0);\n  // Master analyser for waveform\n  const analyserRef = useRef<AnalyserNode | null>(null);\n  const masterGainRef = useRef<GainNode | null>(null);\n  // Wisdom timer\n  const wisdomTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);\n\n  const getCtx = useCallback(() => {\n    if (!audioCtxRef.current) {\n      const Ctx = window.AudioContext || (window as any).webkitAudioContext;\n      audioCtxRef.current = new Ctx();\n    }\n    const ctx = audioCtxRef.current;\n    if (ctx.state === \"suspended\") ctx.resume();\n\n    // Setup master chain once — limiter gain so all layers mix without clipping\n    if (!analyserRef.current) {\n      const analyser = ctx.createAnalyser();\n      analyser.fftSize = 2048;\n      const limiter = ctx.createGain();\n      limiter.gain.value = 0.85;\n      const master = ctx.createGain();\n      master.gain.value = 1;\n      master.connect(limiter);\n      limiter.connect(analyser);\n      analyser.connect(ctx.destination);\n      analyserRef.current = analyser;\n      masterGainRef.current = master;\n    }\n    return ctx;\n  }, []);\n\n  // ── START BINAURAL ────────────────────────────────────────────────────────\n  const startBinaural = useCallback((ctx: AudioContext, s: SessionState) => {\n    if (leftOscRef.current) { leftOscRef.current.stop(); leftOscRef.current.disconnect(); }\n    if (rightOscRef.current) { rightOscRef.current.stop(); rightOscRef.current.disconnect(); }\n\n    const left = ctx.createOscillator();\n    const right = ctx.createOscillator();\n    const lp = ctx.createStereoPanner(); lp.pan.value = -1;\n    const rp = ctx.createStereoPanner(); rp.pan.value = 1;\n    const gain = ctx.createGain();\n    gain.gain.setValueAtTime(0, ctx.currentTime);\n    gain.gain.linearRampToValueAtTime(0.38, ctx.currentTime + 1.5);\n\n    left.connect(lp); right.connect(rp);\n    lp.connect(gain); rp.connect(gain);\n    gain.connect(masterGainRef.current!);\n\n    left.frequency.value = s.baseFreq;\n    right.frequency.value = s.baseFreq + s.beatFreq;\n    left.start(); right.start();\n    leftOscRef.current = left;\n    rightOscRef.current = right;\n    binauralGainRef.current = gain;\n  }, []);\n\n  const stopBinaural = useCallback(() => {\n    leftOscRef.current?.stop(); leftOscRef.current?.disconnect();\n    rightOscRef.current?.stop(); rightOscRef.current?.disconnect();\n    leftOscRef.current = null; rightOscRef.current = null;\n  }, []);\n\n  // ── START OCEAN ───────────────────────────────────────────────────────────\n  function makeBrown(ctx: AudioContext) {\n    const size = ctx.sampleRate * 4;\n    const buf = ctx.createBuffer(1, size, ctx.sampleRate);\n    const out = buf.getChannelData(0);\n    let last = 0;\n    for (let i = 0; i < size; i++) {\n      const w = Math.random() * 2 - 1;\n      out[i] = (last + 0.02 * w) / 1.02; last = out[i]; out[i] *= 3.5;\n    }\n    return buf;\n  }\n\n  const startOcean = useCallback((ctx: AudioContext, s: SessionState) => {\n    if (oceanNoiseRef.current) { oceanNoiseRef.current.stop(); oceanNoiseRef.current.disconnect(); }\n    if (oceanLfoRef.current) { oceanLfoRef.current.stop(); oceanLfoRef.current.disconnect(); }\n\n    const master = ctx.createGain(); master.gain.value = 0.42;\n    master.connect(masterGainRef.current!);\n\n    const waveGain = ctx.createGain(); waveGain.gain.value = 0.48;\n    waveGain.connect(master);\n\n    const lfo = ctx.createOscillator(); lfo.type = \"sine\";\n    lfo.frequency.value = s.breathRate / 60;\n    const lfoG = ctx.createGain(); lfoG.gain.value = 0.5;\n    lfo.connect(lfoG); lfoG.connect(waveGain.gain); lfo.start();\n\n    const noise = ctx.createBufferSource();\n    noise.buffer = makeBrown(ctx); noise.loop = true;\n    noise.connect(waveGain); noise.start();\n\n    oceanNoiseRef.current = noise;\n    oceanLfoRef.current = lfo;\n    oceanGainRef.current = master;\n  }, []);\n\n  const stopOcean = useCallback(() => {\n    oceanNoiseRef.current?.stop(); oceanNoiseRef.current?.disconnect();\n    oceanLfoRef.current?.stop(); oceanLfoRef.current?.disconnect();\n    oceanGainRef.current?.disconnect();\n    oceanNoiseRef.current = null; oceanLfoRef.current = null;\n  }, []);\n\n  // ── CLOCK SCHEDULER ───────────────────────────────────────────────────────\n  const sessionRef = useRef(session);\n  sessionRef.current = session;\n\n  const scheduleClock = useCallback(() => {\n    const ctx = audioCtxRef.current;\n    if (!ctx || !masterGainRef.current || !clockRunningRef.current) return;\n    const s = sessionRef.current;\n    const ahead = 0.1;\n\n    while (nextTickRef.current < ctx.currentTime + ahead) {\n      const t = nextTickRef.current;\n      const osc = ctx.createOscillator(); const g = ctx.createGain();\n      osc.connect(g); g.connect(masterGainRef.current);\n      osc.type = \"sine\"; osc.frequency.setValueAtTime(900, t); osc.frequency.exponentialRampToValueAtTime(0.01, t + 0.06);\n      g.gain.setValueAtTime(0.28, t); g.gain.exponentialRampToValueAtTime(0.001, t + 0.06);\n      osc.start(t); osc.stop(t + 0.07);\n      nextTickRef.current += s.tickSpeed / 1000;\n    }\n    while (nextPolyRef.current < ctx.currentTime + ahead) {\n      const t = nextPolyRef.current;\n      const osc = ctx.createOscillator(); const g = ctx.createGain();\n      osc.connect(g); g.connect(masterGainRef.current);\n      osc.type = \"triangle\"; osc.frequency.setValueAtTime(260, t); osc.frequency.linearRampToValueAtTime(80, t + 0.4);\n      g.gain.setValueAtTime(0.38, t); g.gain.exponentialRampToValueAtTime(0.001, t + 0.4);\n      osc.start(t); osc.stop(t + 0.4);\n      nextPolyRef.current += s.polySpeed;\n    }\n    if (clockRunningRef.current) clockTimerRef.current = setTimeout(scheduleClock, 25);\n  }, []);\n\n  const startClock = useCallback((ctx: AudioContext) => {\n    if (clockTimerRef.current) clearTimeout(clockTimerRef.current);\n    clockRunningRef.current = true;\n    nextTickRef.current = ctx.currentTime + 0.05;\n    nextPolyRef.current = ctx.currentTime + 0.05;\n    scheduleClock();\n  }, [scheduleClock]);\n\n  const stopClock = useCallback(() => {\n    clockRunningRef.current = false;\n    if (clockTimerRef.current) clearTimeout(clockTimerRef.current);\n    clockTimerRef.current = null;\n  }, []);\n\n  // ── WISDOM SPEAKER ────────────────────────────────────────────────────────\n  const speakWisdom = useCallback(async (quotes: any[], voice: string) => {\n    const enabled = quotes.filter((q: any) => q.enabled);\n    if (!enabled.length) return;\n    const q = enabled[Math.floor(Math.random() * enabled.length)];\n\n    try {\n      const r = await fetch(\"/api/tts\", {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify({ text: q.text, voice }),\n      });\n      if (!r.ok) return;\n      const blob = await r.blob();\n\n      // Apply reverb via Web Audio\n      const ctx = getCtx();\n      const arrayBuf = await blob.arrayBuffer();\n      const decoded = await ctx.decodeAudioData(arrayBuf);\n      const src = ctx.createBufferSource();\n      src.buffer = decoded;\n\n      // Convolver for reverb\n      const convolver = ctx.createConvolver();\n      const reverbLen = ctx.sampleRate * 2.5;\n      const reverbBuf = ctx.createBuffer(2, reverbLen, ctx.sampleRate);\n      for (let ch = 0; ch < 2; ch++) {\n        const d = reverbBuf.getChannelData(ch);\n        for (let i = 0; i < reverbLen; i++) d[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / reverbLen, 2);\n      }\n      convolver.buffer = reverbBuf;\n\n      const dryGain = ctx.createGain(); dryGain.gain.value = 0.6;\n      const wetGain = ctx.createGain(); wetGain.gain.value = 0.25;\n\n      src.connect(dryGain); dryGain.connect(masterGainRef.current!);\n      src.connect(convolver); convolver.connect(wetGain); wetGain.connect(masterGainRef.current!);\n      src.start();\n    } catch (e) { console.error(\"TTS error\", e); }\n  }, [getCtx]);\n\n  // ── MASTER PLAY / STOP ────────────────────────────────────────────────────\n  const masterPlay = useCallback(async () => {\n    const ctx = getCtx();\n    const s = sessionRef.current;\n\n    if (s.binauralOn) startBinaural(ctx, s);\n    if (s.oceanOn) startOcean(ctx, s);\n    if (s.clockOn) startClock(ctx);\n\n    if (s.wisdomOn) {\n      try {\n        const r = await fetch(\"/api/quotes\");\n        const quotes = await r.json();\n        speakWisdom(quotes, s.wisdomVoice);\n        wisdomTimerRef.current = setInterval(async () => {\n          const r2 = await fetch(\"/api/quotes\");\n          const q2 = await r2.json();\n          speakWisdom(q2, sessionRef.current.wisdomVoice);\n        }, s.wisdomIntervalMin * 60 * 1000);\n      } catch (e) { console.error(\"Wisdom fetch error\", e); }\n    }\n\n    setSession(prev => ({ ...prev, playing: true }));\n  }, [getCtx, startBinaural, startOcean, startClock, speakWisdom]);\n\n  const masterStop = useCallback(() => {\n    stopBinaural();\n    stopOcean();\n    stopClock();\n    if (wisdomTimerRef.current) clearInterval(wisdomTimerRef.current);\n    wisdomTimerRef.current = null;\n    setSession(prev => ({ ...prev, playing: false }));\n  }, [stopBinaural, stopOcean, stopClock]);\n\n  const toggleMaster = useCallback(() => {\n    if (session.playing) masterStop();\n    else masterPlay();\n  }, [session.playing, masterPlay, masterStop]);\n\n  // Update binaural in real-time when params change while playing\n  useEffect(() => {\n    if (session.playing && session.binauralOn && leftOscRef.current && rightOscRef.current && audioCtxRef.current) {\n      const ctx = audioCtxRef.current;\n      leftOscRef.current.frequency.setTargetAtTime(session.baseFreq, ctx.currentTime, 0.1);\n      rightOscRef.current.frequency.setTargetAtTime(session.baseFreq + session.beatFreq, ctx.currentTime, 0.1);\n    }\n  }, [session.baseFreq, session.beatFreq]);\n\n  // Update ocean LFO in real-time\n  useEffect(() => {\n    if (session.playing && session.oceanOn && oceanLfoRef.current && audioCtxRef.current) {\n      oceanLfoRef.current.frequency.setTargetAtTime(session.breathRate / 60, audioCtxRef.current.currentTime, 0.5);\n    }\n  }, [session.breathRate]);\n\n  // Restart clock if speed changes while playing\n  useEffect(() => {\n    if (session.playing && session.clockOn && audioCtxRef.current) {\n      stopClock();\n      startClock(audioCtxRef.current);\n    }\n  }, [session.tickSpeed, session.polySpeed]);\n\n  // React to layer pills while playing — start/stop each layer independently\n  useEffect(() => {\n    if (!session.playing || !audioCtxRef.current) return;\n    if (session.clockOn) startClock(audioCtxRef.current);\n    else stopClock();\n  }, [session.clockOn]);\n\n  useEffect(() => {\n    if (!session.playing || !audioCtxRef.current) return;\n    if (session.binauralOn) startBinaural(audioCtxRef.current, sessionRef.current);\n    else stopBinaural();\n  }, [session.binauralOn]);\n\n  useEffect(() => {\n    if (!session.playing || !audioCtxRef.current) return;\n    if (session.oceanOn) startOcean(audioCtxRef.current, sessionRef.current);\n    else stopOcean();\n  }, [session.oceanOn]);\n\n  useEffect(() => {\n    if (!session.playing) return;\n    if (!session.wisdomOn) {\n      if (wisdomTimerRef.current) { clearInterval(wisdomTimerRef.current); wisdomTimerRef.current = null; }\n      return;\n    }\n    let cancelled = false;\n    const intervalMin = sessionRef.current.wisdomIntervalMin;\n    (async () => {\n      try {\n        const r = await fetch(\"/api/quotes\");\n        if (cancelled) return;\n        const quotes = await r.json();\n        if (cancelled) return;\n        speakWisdom(quotes, sessionRef.current.wisdomVoice);\n        if (cancelled) return;\n        wisdomTimerRef.current = setInterval(async () => {\n          if (!sessionRef.current.wisdomOn) return;\n          const r2 = await fetch(\"/api/quotes\");\n          const q2 = await r2.json();\n          speakWisdom(q2, sessionRef.current.wisdomVoice);\n        }, intervalMin * 60 * 1000);\n      } catch (e) { if (!cancelled) console.error(\"Wisdom fetch error\", e); }\n    })();\n    return () => { cancelled = true; if (wisdomTimerRef.current) clearInterval(wisdomTimerRef.current); wisdomTimerRef.current = null; };\n  }, [session.wisdomOn, session.wisdomIntervalMin]);\n\n  useEffect(() => () => { masterStop(); }, []);\n\n  const NAV: { id: Tab; label: string; accent: string; icon: keyof typeof Icons }[] = [\n    { id: \"timeline\", label: \"FLOW\",   accent: \"var(--accent-violet)\", icon: \"Timeline\" },\n    { id: \"binaural\", label: \"BEATS\",  accent: \"var(--accent-blue)\",   icon: \"Waves\"    },\n    { id: \"ocean\",    label: \"OCEAN\",  accent: \"var(--accent-cyan)\",   icon: \"Ocean\"    },\n    { id: \"wisdom\",   label: \"WISDOM\", accent: \"var(--accent-amber)\",  icon: \"Quote\"    },\n    { id: \"clock\",    label: \"CLOCK\",  accent: \"var(--accent-green)\",  icon: \"Clock\"    },\n  ];\n\n  const activeAccent = NAV.find(n => n.id === tab)?.accent ?? \"var(--accent-blue)\";\n\n  return (\n    <div className=\"app-root\">\n      <style>{`\n        @import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');\n        :root {\n          --bg:#0d1117; --bg2:#161b22; --bg3:#1c2330;\n          --border:rgba(255,255,255,0.06); --border2:rgba(255,255,255,0.12);\n          --text:#c9d1d9; --text-dim:#6e7681; --text-bright:#f0f6fc;\n          --accent-blue:#58a6ff; --accent-cyan:#39d0d8;\n          --accent-violet:#bc8cff; --accent-amber:#e3b341;\n          --accent-green:#3fb950; --accent-rose:#f85149;\n        }\n        *{box-sizing:border-box;margin:0;padding:0;}\n        body{background:var(--bg);color:var(--text);font-family:'Space Mono','Courier New',monospace;-webkit-font-smoothing:antialiased;}\n        .app-root{min-height:100dvh;display:flex;justify-content:center;align-items:center;background:var(--bg);padding:0;}\n        .app-shell{width:100%;max-width:430px;display:flex;flex-direction:column;min-height:100dvh;height:100dvh;border-left:1px solid var(--border2);border-right:1px solid var(--border2);}\n        @media (min-width:768px){\n          .app-root{background:linear-gradient(135deg,var(--bg) 0%,#0a0e14 50%,var(--bg) 100%);padding:32px 0;}\n          .app-shell{max-width:640px;width:90vw;height:min(92dvh,860px);min-height:680px;border-radius:20px;border:1px solid var(--border2);box-shadow:0 24px 48px rgba(0,0,0,0.4),0 0 1px rgba(255,255,255,0.05);overflow:hidden;}\n        }\n        .card{background:var(--bg2);border:1px solid var(--border2);outline:1px solid var(--border);outline-offset:3px;border-radius:14px;padding:16px;}\n        .card-sm{background:var(--bg2);border:1px solid var(--border2);outline:1px solid var(--border);outline-offset:2px;border-radius:10px;padding:10px 12px;}\n        @media (min-width:768px){.card{padding:24px;}.card-sm{padding:14px 18px;}}\n        .scroll-area{overflow-y:auto;}\n        .scroll-area::-webkit-scrollbar{width:2px;}\n        .scroll-area::-webkit-scrollbar-thumb{background:var(--border2);border-radius:1px;}\n        .nav-bar{display:flex;padding:6px;gap:3px;background:var(--bg2);border-top:1px solid var(--border2);}\n        @media (min-width:768px){.nav-bar{padding:14px 18px;gap:10px;border-radius:0 0 20px 20px;}.nav-btn{font-size:10px;padding:10px 4px;gap:6px;}.nav-btn svg{transform:scale(1.15);}}\n        .nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:7px 2px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--text-dim);font-family:inherit;font-size:8px;font-weight:700;letter-spacing:0.08em;cursor:pointer;transition:all 0.15s;}\n        .nav-btn.active{background:var(--bg3);border:1px solid var(--border2);outline:1px solid var(--border);outline-offset:1px;}\n        .nav-btn:not(.active):hover{color:var(--text);}\n        .preset-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;}\n        .preset-btn{background:var(--bg2);border:1px solid var(--border2);outline:1px solid var(--border);outline-offset:2px;border-radius:10px;padding:9px 8px;cursor:pointer;font-family:inherit;color:var(--text-dim);transition:all 0.15s;text-align:left;}\n        .preset-btn.active{background:var(--bg3);}\n        .preset-name{font-size:9px;font-weight:700;letter-spacing:0.07em;display:block;margin-bottom:3px;}\n        .preset-hz{font-size:9px;opacity:0.5;display:block;}\n        .preset-wave{font-size:8px;margin-top:2px;display:block;opacity:0.35;letter-spacing:0.04em;}\n        .noise-btn{background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:4px 10px;font-family:inherit;font-size:9px;font-weight:700;color:var(--text-dim);cursor:pointer;letter-spacing:0.06em;transition:all 0.15s;}\n        .label-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;}\n        .label-key{font-size:9px;font-weight:700;letter-spacing:0.1em;color:var(--text-dim);text-transform:uppercase;}\n        .label-val{font-size:11px;font-weight:700;}\n        .section-title{font-size:17px;font-weight:700;color:var(--text-bright);letter-spacing:-0.01em;}\n        .section-sub{font-size:9px;color:var(--text-dim);letter-spacing:0.08em;margin-top:2px;}\n        @media (min-width:768px){.section-title{font-size:22px;}.section-sub{font-size:11px;}.label-key{font-size:10px;}.label-val{font-size:13px;}.preset-name{font-size:10px;}.preset-hz{font-size:10px;}.preset-wave{font-size:9px;}.preset-btn{padding:12px 10px;}.app-header{padding:20px 24px 16px;}.app-header span:first-child{font-size:18px;}.app-header div{font-size:10px;line-height:1.5;}.app-main{padding:24px 22px 140px;}.waveform-wrap{height:72px;}.waveform-wrap canvas{height:72px!important;min-height:72px!important;}}\n        /* master play button — light/white, centered in toolbar */\n        .master-play{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.25);outline:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;transition:all 0.2s;font-family:inherit;flex-shrink:0;flex:0 0 56px;}\n        @media (min-width:768px){.master-play{width:68px;height:68px;flex:0 0 68px;}.master-play svg{transform:scale(1.2);}}\n        .master-play:hover{background:rgba(255,255,255,0.22);}\n        .master-play.active{background:var(--play-color);border-color:var(--play-color);color:#fff;box-shadow:0 0 20px color-mix(in srgb,var(--play-color) 50%,transparent);}\n        /* module toggle pill */\n        .mod-pill{display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:20px;border:1px solid var(--border);cursor:pointer;font-family:inherit;font-size:9px;font-weight:700;letter-spacing:0.07em;color:var(--text-dim);background:var(--bg2);transition:all 0.15s;white-space:nowrap;}\n        .mod-pill.on{border-color:var(--pill-color);color:var(--pill-color);}\n        .mod-dot{width:5px;height:5px;border-radius:50%;background:currentColor;}\n        select{background:var(--bg2);border:1px solid var(--border2);border-radius:6px;color:#f0f6fc;font-family:inherit;font-size:10px;padding:6px 8px;outline:none;width:100%;}\n        select option{background:var(--bg2);color:#f0f6fc;}\n        input[type=\"number\"],input[type=\"text\"],input:not([type]),textarea{background:var(--bg2)!important;border:1px solid var(--border2)!important;border-radius:6px;color:#f0f6fc!important;font-family:inherit;font-size:11px;padding:7px 9px;outline:none;width:100%;}\n        input::placeholder,textarea::placeholder{color:rgba(255,255,255,0.4);}\n        @media (min-width:768px){input[type=\"number\"],input[type=\"text\"],input:not([type]),textarea{font-size:13px!important;padding:10px 12px!important;border-radius:8px!important;}select{font-size:12px!important;padding:10px 12px!important;}.slider-wrap{height:22px;}.slider-thumb::-webkit-slider-thumb{width:18px;height:18px;}.slider-thumb::-moz-range-thumb{width:18px;height:18px;}}\n        .slider-wrap{position:relative;height:18px;display:flex;align-items:center;}\n        .slider-track{position:absolute;width:100%;height:3px;border-radius:2px;background:var(--bg3);border:1px solid var(--border);}\n        .slider-fill{position:absolute;height:3px;border-radius:2px;pointer-events:none;}\n        .slider-thumb{position:absolute;width:100%;z-index:2;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none;height:18px;}\n        .slider-thumb::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--bg2);border:1px solid var(--border2);outline:1px solid var(--border);outline-offset:2px;cursor:pointer;}\n        .slider-thumb::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--bg2);border:1px solid var(--border2);cursor:pointer;}\n        @keyframes pulse{0%,100%{opacity:1}50%{opacity:0.3}}\n        .live-dot{animation:pulse 2s ease-in-out infinite;}\n      `}</style>\n\n      <div className=\"app-shell\">\n        {/* ── HEADER ── */}\n        <header className=\"app-header\" style={{ padding:\"12px 16px 10px\", borderBottom:\"1px solid var(--border2)\", background:\"var(--bg2)\", flexShrink:0 }}>\n          <span style={{ fontSize:13, fontWeight:700, letterSpacing:\"0.14em\", color:\"var(--text-bright)\" }}>\n            <span style={{ color:\"var(--accent-blue)\" }}>brain</span>\n          </span>\n          <div style={{ fontSize:8, color:\"var(--text-dim)\", marginTop:4, letterSpacing:\"0.04em\", lineHeight:1.4 }}>\n            · Binaural beats for the token breather - Tomaso Valmax\n          </div>\n        </header>\n\n        {/* ── WAVEFORM ── */}\n        <div className=\"waveform-wrap\">\n          <Waveform analyser={analyserRef.current} playing={session.playing} accent={activeAccent} />\n        </div>\n\n        {/* ── ACTIVE SEGMENT BADGE ── */}\n        {session.activeSegment && session.playing && (\n          <div style={{ padding:\"4px 16px\", background:\"var(--bg2)\", borderBottom:\"1px solid var(--border)\", display:\"flex\", gap:8, alignItems:\"center\" }}>\n            <div style={{ width:6, height:6, borderRadius:\"50%\", background:session.activeSegment.color }} />\n            <span style={{ fontSize:9, letterSpacing:\"0.1em\", color:\"var(--text-dim)\" }}>\n              {session.activeSegment.label.toUpperCase()} · {session.activeSegment.brainwave.toUpperCase()}\n            </span>\n          </div>\n        )}\n\n        {/* ── MAIN CONTENT ── */}\n        <main className=\"scroll-area app-main\" style={{ flex:1, padding:\"16px 14px 120px\" }}>\n          {tab === \"timeline\"  && <TimelineTab session={session} setSession={setSession} masterPlaying={session.playing} masterPlay={masterPlay} masterStop={masterStop} />}\n          {tab === \"binaural\"  && <BinauralTab session={session} setSession={setSession} />}\n          {tab === \"ocean\"     && <OceanPulseTab session={session} setSession={setSession} />}\n          {tab === \"wisdom\"    && <TTSWisdomTab session={session} setSession={setSession} speakWisdom={speakWisdom} />}\n          {tab === \"clock\"     && <ClockTab session={session} setSession={setSession} />}\n        </main>\n\n        {/* ── BOTTOM TOOLBAR (mobile) — play centered ── */}\n        <nav className=\"nav-bar\" style={{ position:\"absolute\", bottom:0, left:0, right:0, flexShrink:0, display:\"flex\", alignItems:\"center\", justifyContent:\"space-between\", padding:\"8px 6px\", gap:4 }}>\n          <div style={{ flex: 1, display: \"flex\", gap: 4 }}>\n            {NAV.slice(0, 2).map(({ id, label, accent, icon }) => {\n              const Icon = Icons[icon] as () => JSX.Element;\n              const active = tab === id;\n              return (\n                <button key={id} onClick={() => setTab(id)}\n                  className={`nav-btn${active ? \" active\" : \"\"}`}\n                  style={{ color: active ? accent : undefined, flex: 1 }}>\n                  <Icon />\n                  {label}\n                </button>\n              );\n            })}\n          </div>\n          <button\n            onClick={toggleMaster}\n            className={`master-play${session.playing ? \" active\" : \"\"}`}\n            style={{ \"--play-color\": \"var(--accent-green)\" } as React.CSSProperties}>\n            {session.playing\n              ? <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"2\"/></svg>\n              : <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"5 3 19 12 5 21 5 3\"/></svg>\n            }\n          </button>\n          <div style={{ flex: 1, display: \"flex\", gap: 4 }}>\n            {NAV.slice(2).map(({ id, label, accent, icon }) => {\n              const Icon = Icons[icon] as () => JSX.Element;\n              const active = tab === id;\n              return (\n                <button key={id} onClick={() => setTab(id)}\n                  className={`nav-btn${active ? \" active\" : \"\"}`}\n                  style={{ color: active ? accent : undefined, flex: 1 }}>\n                  <Icon />\n                  {label}\n                </button>\n              );\n            })}\n          </div>\n        </nav>\n      </div>\n    </div>\n  );\n}\n",["D",1773362462546],76,{"_105":433,"_165":147,"_162":341,"_97":340,"_173":434,"_171":191,"_102":227,"_164":236,"_107":435,"_166":436,"_175":-5},"00fc6c74-1e75-11f1-b97d-42dde27851f2","import React, { useState, useRef, useEffect, useCallback } from \"react\";\nimport { BinauralTab } from \"https://esm.town/v/all/brain/frontend/components/BinauralTab.tsx\";\nimport { OceanPulseTab } from \"https://esm.town/v/all/brain/frontend/components/OceanPulseTab.tsx\";\nimport { TimelineTab } from \"https://esm.town/v/all/brain/frontend/components/TimelineTab.tsx\";\nimport { TTSWisdomTab } from \"https://esm.town/v/all/brain/frontend/components/TTSWisdomTab.tsx\";\nimport { ClockTab } from \"https://esm.town/v/all/brain/frontend/components/ClockTab.tsx\";\nimport { Icons } from \"https://esm.town/v/all/brain/frontend/components/Icons.tsx\";\nimport { Waveform } from \"https://esm.town/v/all/brain/frontend/components/Waveform.tsx\";\n\ntype Tab = \"timeline\" | \"ocean\" | \"wisdom\" | \"clock\" | \"binaural\";\n\n// ── MASTER SESSION STATE ────────────────────────────────────────────────────\nexport interface SessionState {\n  playing: boolean;\n  // binaural\n  binauralOn: boolean;\n  baseFreq: number;\n  beatFreq: number;\n  // ocean\n  oceanOn: boolean;\n  breathRate: number;\n  // clock\n  clockOn: boolean;\n  tickSpeed: number;\n  polySpeed: number;\n  // wisdom\n  wisdomOn: boolean;\n  wisdomIntervalMin: number;\n  wisdomVoice: string;\n  // active timeline segment info\n  activeSegment: { label: string; brainwave: string; color: string } | null;\n}\n\nconst defaultSession: SessionState = {\n  playing: false,\n  binauralOn: true,\n  baseFreq: 200,\n  beatFreq: 10,\n  oceanOn: false,\n  breathRate: 6,\n  clockOn: false,\n  tickSpeed: 1000,\n  polySpeed: 33,\n  wisdomOn: false,\n  wisdomIntervalMin: 10,\n  wisdomVoice: \"troy\",\n  activeSegment: null,\n};\n\nexport default function App() {\n  const [tab, setTab] = useState<Tab>(\"timeline\");\n  const [session, setSession] = useState<SessionState>(defaultSession);\n\n  // Audio engine refs — shared across all tabs\n  const audioCtxRef = useRef<AudioContext | null>(null);\n  // Binaural\n  const leftOscRef = useRef<OscillatorNode | null>(null);\n  const rightOscRef = useRef<OscillatorNode | null>(null);\n  const binauralGainRef = useRef<GainNode | null>(null);\n  // Ocean\n  const oceanNoiseRef = useRef<AudioBufferSourceNode | null>(null);\n  const oceanLfoRef = useRef<OscillatorNode | null>(null);\n  const oceanGainRef = useRef<GainNode | null>(null);\n  // Clock\n  const clockTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const clockRunningRef = useRef(false);\n  const nextTickRef = useRef(0);\n  const nextPolyRef = useRef(0);\n  // Master analyser for waveform\n  const analyserRef = useRef<AnalyserNode | null>(null);\n  const masterGainRef = useRef<GainNode | null>(null);\n  // Wisdom timer\n  const wisdomTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);\n\n  const getCtx = useCallback(() => {\n    if (!audioCtxRef.current) {\n      const Ctx = window.AudioContext || (window as any).webkitAudioContext;\n      audioCtxRef.current = new Ctx();\n    }\n    const ctx = audioCtxRef.current;\n    if (ctx.state === \"suspended\") ctx.resume();\n\n    // Setup master chain once — limiter gain so all layers mix without clipping\n    if (!analyserRef.current) {\n      const analyser = ctx.createAnalyser();\n      analyser.fftSize = 2048;\n      const limiter = ctx.createGain();\n      limiter.gain.value = 0.85;\n      const master = ctx.createGain();\n      master.gain.value = 1;\n      master.connect(limiter);\n      limiter.connect(analyser);\n      analyser.connect(ctx.destination);\n      analyserRef.current = analyser;\n      masterGainRef.current = master;\n    }\n    return ctx;\n  }, []);\n\n  // ── START BINAURAL ────────────────────────────────────────────────────────\n  const startBinaural = useCallback((ctx: AudioContext, s: SessionState) => {\n    if (leftOscRef.current) { leftOscRef.current.stop(); leftOscRef.current.disconnect(); }\n    if (rightOscRef.current) { rightOscRef.current.stop(); rightOscRef.current.disconnect(); }\n\n    const left = ctx.createOscillator();\n    const right = ctx.createOscillator();\n    const lp = ctx.createStereoPanner(); lp.pan.value = -1;\n    const rp = ctx.createStereoPanner(); rp.pan.value = 1;\n    const gain = ctx.createGain();\n    gain.gain.setValueAtTime(0, ctx.currentTime);\n    gain.gain.linearRampToValueAtTime(0.38, ctx.currentTime + 1.5);\n\n    left.connect(lp); right.connect(rp);\n    lp.connect(gain); rp.connect(gain);\n    gain.connect(masterGainRef.current!);\n\n    left.frequency.value = s.baseFreq;\n    right.frequency.value = s.baseFreq + s.beatFreq;\n    left.start(); right.start();\n    leftOscRef.current = left;\n    rightOscRef.current = right;\n    binauralGainRef.current = gain;\n  }, []);\n\n  const stopBinaural = useCallback(() => {\n    leftOscRef.current?.stop(); leftOscRef.current?.disconnect();\n    rightOscRef.current?.stop(); rightOscRef.current?.disconnect();\n    leftOscRef.current = null; rightOscRef.current = null;\n  }, []);\n\n  // ── START OCEAN ───────────────────────────────────────────────────────────\n  function makeBrown(ctx: AudioContext) {\n    const size = ctx.sampleRate * 4;\n    const buf = ctx.createBuffer(1, size, ctx.sampleRate);\n    const out = buf.getChannelData(0);\n    let last = 0;\n    for (let i = 0; i < size; i++) {\n      const w = Math.random() * 2 - 1;\n      out[i] = (last + 0.02 * w) / 1.02; last = out[i]; out[i] *= 3.5;\n    }\n    return buf;\n  }\n\n  const startOcean = useCallback((ctx: AudioContext, s: SessionState) => {\n    if (oceanNoiseRef.current) { oceanNoiseRef.current.stop(); oceanNoiseRef.current.disconnect(); }\n    if (oceanLfoRef.current) { oceanLfoRef.current.stop(); oceanLfoRef.current.disconnect(); }\n\n    const master = ctx.createGain(); master.gain.value = 0.42;\n    master.connect(masterGainRef.current!);\n\n    const waveGain = ctx.createGain(); waveGain.gain.value = 0.48;\n    waveGain.connect(master);\n\n    const lfo = ctx.createOscillator(); lfo.type = \"sine\";\n    lfo.frequency.value = s.breathRate / 60;\n    const lfoG = ctx.createGain(); lfoG.gain.value = 0.5;\n    lfo.connect(lfoG); lfoG.connect(waveGain.gain); lfo.start();\n\n    const noise = ctx.createBufferSource();\n    noise.buffer = makeBrown(ctx); noise.loop = true;\n    noise.connect(waveGain); noise.start();\n\n    oceanNoiseRef.current = noise;\n    oceanLfoRef.current = lfo;\n    oceanGainRef.current = master;\n  }, []);\n\n  const stopOcean = useCallback(() => {\n    oceanNoiseRef.current?.stop(); oceanNoiseRef.current?.disconnect();\n    oceanLfoRef.current?.stop(); oceanLfoRef.current?.disconnect();\n    oceanGainRef.current?.disconnect();\n    oceanNoiseRef.current = null; oceanLfoRef.current = null;\n  }, []);\n\n  // ── CLOCK SCHEDULER ───────────────────────────────────────────────────────\n  const sessionRef = useRef(session);\n  sessionRef.current = session;\n\n  const scheduleClock = useCallback(() => {\n    const ctx = audioCtxRef.current;\n    if (!ctx || !masterGainRef.current || !clockRunningRef.current) return;\n    const s = sessionRef.current;\n    const ahead = 0.1;\n\n    while (nextTickRef.current < ctx.currentTime + ahead) {\n      const t = nextTickRef.current;\n      const osc = ctx.createOscillator(); const g = ctx.createGain();\n      osc.connect(g); g.connect(masterGainRef.current);\n      osc.type = \"sine\"; osc.frequency.setValueAtTime(900, t); osc.frequency.exponentialRampToValueAtTime(0.01, t + 0.06);\n      g.gain.setValueAtTime(0.28, t); g.gain.exponentialRampToValueAtTime(0.001, t + 0.06);\n      osc.start(t); osc.stop(t + 0.07);\n      nextTickRef.current += s.tickSpeed / 1000;\n    }\n    while (nextPolyRef.current < ctx.currentTime + ahead) {\n      const t = nextPolyRef.current;\n      const osc = ctx.createOscillator(); const g = ctx.createGain();\n      osc.connect(g); g.connect(masterGainRef.current);\n      osc.type = \"triangle\"; osc.frequency.setValueAtTime(260, t); osc.frequency.linearRampToValueAtTime(80, t + 0.4);\n      g.gain.setValueAtTime(0.38, t); g.gain.exponentialRampToValueAtTime(0.001, t + 0.4);\n      osc.start(t); osc.stop(t + 0.4);\n      nextPolyRef.current += s.polySpeed;\n    }\n    if (clockRunningRef.current) clockTimerRef.current = setTimeout(scheduleClock, 25);\n  }, []);\n\n  const startClock = useCallback((ctx: AudioContext) => {\n    if (clockTimerRef.current) clearTimeout(clockTimerRef.current);\n    clockRunningRef.current = true;\n    nextTickRef.current = ctx.currentTime + 0.05;\n    nextPolyRef.current = ctx.currentTime + 0.05;\n    scheduleClock();\n  }, [scheduleClock]);\n\n  const stopClock = useCallback(() => {\n    clockRunningRef.current = false;\n    if (clockTimerRef.current) clearTimeout(clockTimerRef.current);\n    clockTimerRef.current = null;\n  }, []);\n\n  // ── WISDOM SPEAKER ────────────────────────────────────────────────────────\n  const speakWisdom = useCallback(async (quotes: any[], voice: string) => {\n    const enabled = quotes.filter((q: any) => q.enabled);\n    if (!enabled.length) return;\n    const q = enabled[Math.floor(Math.random() * enabled.length)];\n\n    try {\n      const r = await fetch(\"/api/tts\", {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify({ text: q.text, voice }),\n      });\n      if (!r.ok) return;\n      const blob = await r.blob();\n\n      // Apply reverb via Web Audio\n      const ctx = getCtx();\n      const arrayBuf = await blob.arrayBuffer();\n      const decoded = await ctx.decodeAudioData(arrayBuf);\n      const src = ctx.createBufferSource();\n      src.buffer = decoded;\n\n      // Convolver for reverb\n      const convolver = ctx.createConvolver();\n      const reverbLen = ctx.sampleRate * 2.5;\n      const reverbBuf = ctx.createBuffer(2, reverbLen, ctx.sampleRate);\n      for (let ch = 0; ch < 2; ch++) {\n        const d = reverbBuf.getChannelData(ch);\n        for (let i = 0; i < reverbLen; i++) d[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / reverbLen, 2);\n      }\n      convolver.buffer = reverbBuf;\n\n      const dryGain = ctx.createGain(); dryGain.gain.value = 0.6;\n      const wetGain = ctx.createGain(); wetGain.gain.value = 0.25;\n\n      src.connect(dryGain); dryGain.connect(masterGainRef.current!);\n      src.connect(convolver); convolver.connect(wetGain); wetGain.connect(masterGainRef.current!);\n      src.start();\n    } catch (e) { console.error(\"TTS error\", e); }\n  }, [getCtx]);\n\n  // ── MASTER PLAY / STOP ────────────────────────────────────────────────────\n  const masterPlay = useCallback(async () => {\n    const ctx = getCtx();\n    const s = sessionRef.current;\n\n    if (s.binauralOn) startBinaural(ctx, s);\n    if (s.oceanOn) startOcean(ctx, s);\n    if (s.clockOn) startClock(ctx);\n\n    if (s.wisdomOn) {\n      try {\n        const r = await fetch(\"/api/quotes\");\n        const quotes = await r.json();\n        speakWisdom(quotes, s.wisdomVoice);\n        wisdomTimerRef.current = setInterval(async () => {\n          const r2 = await fetch(\"/api/quotes\");\n          const q2 = await r2.json();\n          speakWisdom(q2, sessionRef.current.wisdomVoice);\n        }, s.wisdomIntervalMin * 60 * 1000);\n      } catch (e) { console.error(\"Wisdom fetch error\", e); }\n    }\n\n    setSession(prev => ({ ...prev, playing: true }));\n  }, [getCtx, startBinaural, startOcean, startClock, speakWisdom]);\n\n  const masterStop = useCallback(() => {\n    stopBinaural();\n    stopOcean();\n    stopClock();\n    if (wisdomTimerRef.current) clearInterval(wisdomTimerRef.current);\n    wisdomTimerRef.current = null;\n    setSession(prev => ({ ...prev, playing: false }));\n  }, [stopBinaural, stopOcean, stopClock]);\n\n  const toggleMaster = useCallback(() => {\n    if (session.playing) masterStop();\n    else masterPlay();\n  }, [session.playing, masterPlay, masterStop]);\n\n  // Update binaural in real-time when params change while playing\n  useEffect(() => {\n    if (session.playing && session.binauralOn && leftOscRef.current && rightOscRef.current && audioCtxRef.current) {\n      const ctx = audioCtxRef.current;\n      leftOscRef.current.frequency.setTargetAtTime(session.baseFreq, ctx.currentTime, 0.1);\n      rightOscRef.current.frequency.setTargetAtTime(session.baseFreq + session.beatFreq, ctx.currentTime, 0.1);\n    }\n  }, [session.baseFreq, session.beatFreq]);\n\n  // Update ocean LFO in real-time\n  useEffect(() => {\n    if (session.playing && session.oceanOn && oceanLfoRef.current && audioCtxRef.current) {\n      oceanLfoRef.current.frequency.setTargetAtTime(session.breathRate / 60, audioCtxRef.current.currentTime, 0.5);\n    }\n  }, [session.breathRate]);\n\n  // Restart clock if speed changes while playing\n  useEffect(() => {\n    if (session.playing && session.clockOn && audioCtxRef.current) {\n      stopClock();\n      startClock(audioCtxRef.current);\n    }\n  }, [session.tickSpeed, session.polySpeed]);\n\n  // React to layer pills while playing — start/stop each layer independently\n  useEffect(() => {\n    if (!session.playing || !audioCtxRef.current) return;\n    if (session.clockOn) startClock(audioCtxRef.current);\n    else stopClock();\n  }, [session.clockOn]);\n\n  useEffect(() => {\n    if (!session.playing || !audioCtxRef.current) return;\n    if (session.binauralOn) startBinaural(audioCtxRef.current, sessionRef.current);\n    else stopBinaural();\n  }, [session.binauralOn]);\n\n  useEffect(() => {\n    if (!session.playing || !audioCtxRef.current) return;\n    if (session.oceanOn) startOcean(audioCtxRef.current, sessionRef.current);\n    else stopOcean();\n  }, [session.oceanOn]);\n\n  useEffect(() => {\n    if (!session.playing) return;\n    if (!session.wisdomOn) {\n      if (wisdomTimerRef.current) { clearInterval(wisdomTimerRef.current); wisdomTimerRef.current = null; }\n      return;\n    }\n    let cancelled = false;\n    const intervalMin = sessionRef.current.wisdomIntervalMin;\n    (async () => {\n      try {\n        const r = await fetch(\"/api/quotes\");\n        if (cancelled) return;\n        const quotes = await r.json();\n        if (cancelled) return;\n        speakWisdom(quotes, sessionRef.current.wisdomVoice);\n        if (cancelled) return;\n        wisdomTimerRef.current = setInterval(async () => {\n          if (!sessionRef.current.wisdomOn) return;\n          const r2 = await fetch(\"/api/quotes\");\n          const q2 = await r2.json();\n          speakWisdom(q2, sessionRef.current.wisdomVoice);\n        }, intervalMin * 60 * 1000);\n      } catch (e) { if (!cancelled) console.error(\"Wisdom fetch error\", e); }\n    })();\n    return () => { cancelled = true; if (wisdomTimerRef.current) clearInterval(wisdomTimerRef.current); wisdomTimerRef.current = null; };\n  }, [session.wisdomOn, session.wisdomIntervalMin]);\n\n  useEffect(() => () => { masterStop(); }, []);\n\n  const NAV: { id: Tab; label: string; accent: string; icon: keyof typeof Icons }[] = [\n    { id: \"timeline\", label: \"FLOW\",   accent: \"var(--accent-violet)\", icon: \"Timeline\" },\n    { id: \"binaural\", label: \"BEATS\",  accent: \"var(--accent-blue)\",   icon: \"Waves\"    },\n    { id: \"ocean\",    label: \"OCEAN\",  accent: \"var(--accent-cyan)\",   icon: \"Ocean\"    },\n    { id: \"wisdom\",   label: \"WISDOM\", accent: \"var(--accent-amber)\",  icon: \"Quote\"    },\n    { id: \"clock\",    label: \"CLOCK\",  accent: \"var(--accent-green)\",  icon: \"Clock\"    },\n  ];\n\n  const activeAccent = NAV.find(n => n.id === tab)?.accent ?? \"var(--accent-blue)\";\n\n  return (\n    <div className=\"app-root\">\n      <style>{`\n        @import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');\n        :root {\n          --bg:#0d1117; --bg2:#161b22; --bg3:#1c2330;\n          --border:rgba(255,255,255,0.06); --border2:rgba(255,255,255,0.12);\n          --text:#c9d1d9; --text-dim:#6e7681; --text-bright:#f0f6fc;\n          --accent-blue:#58a6ff; --accent-cyan:#39d0d8;\n          --accent-violet:#bc8cff; --accent-amber:#e3b341;\n          --accent-green:#3fb950; --accent-rose:#f85149;\n        }\n        *{box-sizing:border-box;margin:0;padding:0;}\n        body{background:var(--bg);color:var(--text);font-family:'Space Mono','Courier New',monospace;-webkit-font-smoothing:antialiased;}\n        .app-root{min-height:100dvh;display:flex;justify-content:center;align-items:center;background:var(--bg);padding:0;}\n        .app-shell{width:100%;max-width:430px;display:flex;flex-direction:column;min-height:100dvh;height:100dvh;border-left:1px solid var(--border2);border-right:1px solid var(--border2);}\n        @media (min-width:768px){\n          .app-root{background:linear-gradient(135deg,var(--bg) 0%,#0a0e14 50%,var(--bg) 100%);padding:24px 0;}\n          .app-shell{max-width:480px;height:min(90dvh,720px);min-height:560px;border-radius:16px;border:1px solid var(--border2);box-shadow:0 24px 48px rgba(0,0,0,0.4),0 0 1px rgba(255,255,255,0.05);overflow:hidden;}\n        }\n        .card{background:var(--bg2);border:1px solid var(--border2);outline:1px solid var(--border);outline-offset:3px;border-radius:14px;padding:16px;}\n        .card-sm{background:var(--bg2);border:1px solid var(--border2);outline:1px solid var(--border);outline-offset:2px;border-radius:10px;padding:10px 12px;}\n        @media (min-width:768px){.card{padding:20px;}.card-sm{padding:12px 14px;}}\n        .scroll-area{overflow-y:auto;}\n        .scroll-area::-webkit-scrollbar{width:2px;}\n        .scroll-area::-webkit-scrollbar-thumb{background:var(--border2);border-radius:1px;}\n        .nav-bar{display:flex;padding:6px;gap:3px;background:var(--bg2);border-top:1px solid var(--border2);}\n        @media (min-width:768px){.nav-bar{padding:10px 12px;gap:6px;border-radius:0 0 16px 16px;}}\n        .nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:7px 2px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--text-dim);font-family:inherit;font-size:8px;font-weight:700;letter-spacing:0.08em;cursor:pointer;transition:all 0.15s;}\n        .nav-btn.active{background:var(--bg3);border:1px solid var(--border2);outline:1px solid var(--border);outline-offset:1px;}\n        .nav-btn:not(.active):hover{color:var(--text);}\n        .preset-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;}\n        .preset-btn{background:var(--bg2);border:1px solid var(--border2);outline:1px solid var(--border);outline-offset:2px;border-radius:10px;padding:9px 8px;cursor:pointer;font-family:inherit;color:var(--text-dim);transition:all 0.15s;text-align:left;}\n        .preset-btn.active{background:var(--bg3);}\n        .preset-name{font-size:9px;font-weight:700;letter-spacing:0.07em;display:block;margin-bottom:3px;}\n        .preset-hz{font-size:9px;opacity:0.5;display:block;}\n        .preset-wave{font-size:8px;margin-top:2px;display:block;opacity:0.35;letter-spacing:0.04em;}\n        .noise-btn{background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:4px 10px;font-family:inherit;font-size:9px;font-weight:700;color:var(--text-dim);cursor:pointer;letter-spacing:0.06em;transition:all 0.15s;}\n        .label-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;}\n        .label-key{font-size:9px;font-weight:700;letter-spacing:0.1em;color:var(--text-dim);text-transform:uppercase;}\n        .label-val{font-size:11px;font-weight:700;}\n        .section-title{font-size:17px;font-weight:700;color:var(--text-bright);letter-spacing:-0.01em;}\n        .section-sub{font-size:9px;color:var(--text-dim);letter-spacing:0.08em;margin-top:2px;}\n        @media (min-width:768px){.section-title{font-size:19px;}.section-sub{font-size:10px;}.app-header{padding:16px 20px 12px;}.app-header span:first-child{font-size:15px;}.app-header div{font-size:9px;}.app-main{padding:20px 18px 120px;}}\n        /* master play button — light/white, centered in toolbar */\n        .master-play{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.25);outline:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;transition:all 0.2s;font-family:inherit;flex-shrink:0;flex:0 0 56px;}\n        .master-play:hover{background:rgba(255,255,255,0.22);}\n        .master-play.active{background:var(--play-color);border-color:var(--play-color);color:#fff;box-shadow:0 0 20px color-mix(in srgb,var(--play-color) 50%,transparent);}\n        /* module toggle pill */\n        .mod-pill{display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:20px;border:1px solid var(--border);cursor:pointer;font-family:inherit;font-size:9px;font-weight:700;letter-spacing:0.07em;color:var(--text-dim);background:var(--bg2);transition:all 0.15s;white-space:nowrap;}\n        .mod-pill.on{border-color:var(--pill-color);color:var(--pill-color);}\n        .mod-dot{width:5px;height:5px;border-radius:50%;background:currentColor;}\n        select{background:var(--bg2);border:1px solid var(--border2);border-radius:6px;color:#f0f6fc;font-family:inherit;font-size:10px;padding:6px 8px;outline:none;width:100%;}\n        select option{background:var(--bg2);color:#f0f6fc;}\n        input[type=\"number\"],input[type=\"text\"],input:not([type]),textarea{background:var(--bg2)!important;border:1px solid var(--border2)!important;border-radius:6px;color:#f0f6fc!important;font-family:inherit;font-size:11px;padding:7px 9px;outline:none;width:100%;}\n        input::placeholder,textarea::placeholder{color:rgba(255,255,255,0.4);}\n        .slider-wrap{position:relative;height:18px;display:flex;align-items:center;}\n        .slider-track{position:absolute;width:100%;height:3px;border-radius:2px;background:var(--bg3);border:1px solid var(--border);}\n        .slider-fill{position:absolute;height:3px;border-radius:2px;pointer-events:none;}\n        .slider-thumb{position:absolute;width:100%;z-index:2;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none;height:18px;}\n        .slider-thumb::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--bg2);border:1px solid var(--border2);outline:1px solid var(--border);outline-offset:2px;cursor:pointer;}\n        .slider-thumb::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--bg2);border:1px solid var(--border2);cursor:pointer;}\n        @keyframes pulse{0%,100%{opacity:1}50%{opacity:0.3}}\n        .live-dot{animation:pulse 2s ease-in-out infinite;}\n      `}</style>\n\n      <div className=\"app-shell\">\n        {/* ── HEADER ── */}\n        <header className=\"app-header\" style={{ padding:\"12px 16px 10px\", borderBottom:\"1px solid var(--border2)\", background:\"var(--bg2)\", flexShrink:0 }}>\n          <span style={{ fontSize:13, fontWeight:700, letterSpacing:\"0.14em\", color:\"var(--text-bright)\" }}>\n            <span style={{ color:\"var(--accent-blue)\" }}>brain</span>\n          </span>\n          <div style={{ fontSize:8, color:\"var(--text-dim)\", marginTop:4, letterSpacing:\"0.04em\", lineHeight:1.4 }}>\n            Tomaso Valmax · Binaural beats for the token breather. Add wisdom, receive unto you the flow of tokens.\n          </div>\n        </header>\n\n        {/* ── WAVEFORM ── */}\n        <Waveform analyser={analyserRef.current} playing={session.playing} accent={activeAccent} />\n\n        {/* ── ACTIVE SEGMENT BADGE ── */}\n        {session.activeSegment && session.playing && (\n          <div style={{ padding:\"4px 16px\", background:\"var(--bg2)\", borderBottom:\"1px solid var(--border)\", display:\"flex\", gap:8, alignItems:\"center\" }}>\n            <div style={{ width:6, height:6, borderRadius:\"50%\", background:session.activeSegment.color }} />\n            <span style={{ fontSize:9, letterSpacing:\"0.1em\", color:\"var(--text-dim)\" }}>\n              {session.activeSegment.label.toUpperCase()} · {session.activeSegment.brainwave.toUpperCase()}\n            </span>\n          </div>\n        )}\n\n        {/* ── MAIN CONTENT ── */}\n        <main className=\"scroll-area app-main\" style={{ flex:1, padding:\"16px 14px 120px\" }}>\n          {tab === \"timeline\"  && <TimelineTab session={session} setSession={setSession} masterPlaying={session.playing} masterPlay={masterPlay} masterStop={masterStop} />}\n          {tab === \"binaural\"  && <BinauralTab session={session} setSession={setSession} />}\n          {tab === \"ocean\"     && <OceanPulseTab session={session} setSession={setSession} />}\n          {tab === \"wisdom\"    && <TTSWisdomTab session={session} setSession={setSession} speakWisdom={speakWisdom} />}\n          {tab === \"clock\"     && <ClockTab session={session} setSession={setSession} />}\n        </main>\n\n        {/* ── BOTTOM TOOLBAR (mobile) — play centered ── */}\n        <nav className=\"nav-bar\" style={{ position:\"absolute\", bottom:0, left:0, right:0, flexShrink:0, display:\"flex\", alignItems:\"center\", justifyContent:\"space-between\", padding:\"8px 6px\", gap:4 }}>\n          <div style={{ flex: 1, display: \"flex\", gap: 4 }}>\n            {NAV.slice(0, 2).map(({ id, label, accent, icon }) => {\n              const Icon = Icons[icon] as () => JSX.Element;\n              const active = tab === id;\n              return (\n                <button key={id} onClick={() => setTab(id)}\n                  className={`nav-btn${active ? \" active\" : \"\"}`}\n                  style={{ color: active ? accent : undefined, flex: 1 }}>\n                  <Icon />\n                  {label}\n                </button>\n              );\n            })}\n          </div>\n          <button\n            onClick={toggleMaster}\n            className={`master-play${session.playing ? \" active\" : \"\"}`}\n            style={{ \"--play-color\": \"var(--accent-green)\" } as React.CSSProperties}>\n            {session.playing\n              ? <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"2\"/></svg>\n              : <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"5 3 19 12 5 21 5 3\"/></svg>\n            }\n          </button>\n          <div style={{ flex: 1, display: \"flex\", gap: 4 }}>\n            {NAV.slice(2).map(({ id, label, accent, icon }) => {\n              const Icon = Icons[icon] as () => JSX.Element;\n              const active = tab === id;\n              return (\n                <button key={id} onClick={() => setTab(id)}\n                  className={`nav-btn${active ? \" active\" : \"\"}`}\n                  style={{ color: active ? accent : undefined, flex: 1 }}>\n                  <Icon />\n                  {label}\n                </button>\n              );\n            })}\n          </div>\n        </nav>\n      </div>\n    </div>\n  );\n}\n",["D",1773362330159],75,{"_105":438,"_165":147,"_162":341,"_97":340,"_173":439,"_171":191,"_102":315,"_164":236,"_107":440,"_166":441,"_175":-5},"478bae62-1e74-11f1-b084-42dde27851f2","import React, { useState, useRef, useEffect, useCallback } from \"react\";\nimport { BinauralTab } from \"https://esm.town/v/all/brain/frontend/components/BinauralTab.tsx\";\nimport { OceanPulseTab } from \"https://esm.town/v/all/brain/frontend/components/OceanPulseTab.tsx\";\nimport { TimelineTab } from \"https://esm.town/v/all/brain/frontend/components/TimelineTab.tsx\";\nimport { TTSWisdomTab } from \"https://esm.town/v/all/brain/frontend/components/TTSWisdomTab.tsx\";\nimport { ClockTab } from \"https://esm.town/v/all/brain/frontend/components/ClockTab.tsx\";\nimport { Icons } from \"https://esm.town/v/all/brain/frontend/components/Icons.tsx\";\nimport { Waveform } from \"https://esm.town/v/all/brain/frontend/components/Waveform.tsx\";\n\ntype Tab = \"timeline\" | \"ocean\" | \"wisdom\" | \"clock\" | \"binaural\";\n\n// ── MASTER SESSION STATE ────────────────────────────────────────────────────\nexport interface SessionState {\n  playing: boolean;\n  // binaural\n  binauralOn: boolean;\n  baseFreq: number;\n  beatFreq: number;\n  // ocean\n  oceanOn: boolean;\n  breathRate: number;\n  // clock\n  clockOn: boolean;\n  tickSpeed: number;\n  polySpeed: number;\n  // wisdom\n  wisdomOn: boolean;\n  wisdomIntervalMin: number;\n  wisdomVoice: string;\n  // active timeline segment info\n  activeSegment: { label: string; brainwave: string; color: string } | null;\n}\n\nconst defaultSession: SessionState = {\n  playing: false,\n  binauralOn: true,\n  baseFreq: 200,\n  beatFreq: 10,\n  oceanOn: false,\n  breathRate: 6,\n  clockOn: false,\n  tickSpeed: 1000,\n  polySpeed: 33,\n  wisdomOn: false,\n  wisdomIntervalMin: 10,\n  wisdomVoice: \"troy\",\n  activeSegment: null,\n};\n\nexport default function App() {\n  const [tab, setTab] = useState<Tab>(\"timeline\");\n  const [session, setSession] = useState<SessionState>(defaultSession);\n\n  // Audio engine refs — shared across all tabs\n  const audioCtxRef = useRef<AudioContext | null>(null);\n  // Binaural\n  const leftOscRef = useRef<OscillatorNode | null>(null);\n  const rightOscRef = useRef<OscillatorNode | null>(null);\n  const binauralGainRef = useRef<GainNode | null>(null);\n  // Ocean\n  const oceanNoiseRef = useRef<AudioBufferSourceNode | null>(null);\n  const oceanLfoRef = useRef<OscillatorNode | null>(null);\n  const oceanGainRef = useRef<GainNode | null>(null);\n  // Clock\n  const clockTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const clockRunningRef = useRef(false);\n  const nextTickRef = useRef(0);\n  const nextPolyRef = useRef(0);\n  // Master analyser for waveform\n  const analyserRef = useRef<AnalyserNode | null>(null);\n  const masterGainRef = useRef<GainNode | null>(null);\n  // Wisdom timer\n  const wisdomTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);\n\n  const getCtx = useCallback(() => {\n    if (!audioCtxRef.current) {\n      const Ctx = window.AudioContext || (window as any).webkitAudioContext;\n      audioCtxRef.current = new Ctx();\n    }\n    const ctx = audioCtxRef.current;\n    if (ctx.state === \"suspended\") ctx.resume();\n\n    // Setup master chain once — limiter gain so all layers mix without clipping\n    if (!analyserRef.current) {\n      const analyser = ctx.createAnalyser();\n      analyser.fftSize = 2048;\n      const limiter = ctx.createGain();\n      limiter.gain.value = 0.85;\n      const master = ctx.createGain();\n      master.gain.value = 1;\n      master.connect(limiter);\n      limiter.connect(analyser);\n      analyser.connect(ctx.destination);\n      analyserRef.current = analyser;\n      masterGainRef.current = master;\n    }\n    return ctx;\n  }, []);\n\n  // ── START BINAURAL ────────────────────────────────────────────────────────\n  const startBinaural = useCallback((ctx: AudioContext, s: SessionState) => {\n    if (leftOscRef.current) { leftOscRef.current.stop(); leftOscRef.current.disconnect(); }\n    if (rightOscRef.current) { rightOscRef.current.stop(); rightOscRef.current.disconnect(); }\n\n    const left = ctx.createOscillator();\n    const right = ctx.createOscillator();\n    const lp = ctx.createStereoPanner(); lp.pan.value = -1;\n    const rp = ctx.createStereoPanner(); rp.pan.value = 1;\n    const gain = ctx.createGain();\n    gain.gain.setValueAtTime(0, ctx.currentTime);\n    gain.gain.linearRampToValueAtTime(0.38, ctx.currentTime + 1.5);\n\n    left.connect(lp); right.connect(rp);\n    lp.connect(gain); rp.connect(gain);\n    gain.connect(masterGainRef.current!);\n\n    left.frequency.value = s.baseFreq;\n    right.frequency.value = s.baseFreq + s.beatFreq;\n    left.start(); right.start();\n    leftOscRef.current = left;\n    rightOscRef.current = right;\n    binauralGainRef.current = gain;\n  }, []);\n\n  const stopBinaural = useCallback(() => {\n    leftOscRef.current?.stop(); leftOscRef.current?.disconnect();\n    rightOscRef.current?.stop(); rightOscRef.current?.disconnect();\n    leftOscRef.current = null; rightOscRef.current = null;\n  }, []);\n\n  // ── START OCEAN ───────────────────────────────────────────────────────────\n  function makeBrown(ctx: AudioContext) {\n    const size = ctx.sampleRate * 4;\n    const buf = ctx.createBuffer(1, size, ctx.sampleRate);\n    const out = buf.getChannelData(0);\n    let last = 0;\n    for (let i = 0; i < size; i++) {\n      const w = Math.random() * 2 - 1;\n      out[i] = (last + 0.02 * w) / 1.02; last = out[i]; out[i] *= 3.5;\n    }\n    return buf;\n  }\n\n  const startOcean = useCallback((ctx: AudioContext, s: SessionState) => {\n    if (oceanNoiseRef.current) { oceanNoiseRef.current.stop(); oceanNoiseRef.current.disconnect(); }\n    if (oceanLfoRef.current) { oceanLfoRef.current.stop(); oceanLfoRef.current.disconnect(); }\n\n    const master = ctx.createGain(); master.gain.value = 0.42;\n    master.connect(masterGainRef.current!);\n\n    const waveGain = ctx.createGain(); waveGain.gain.value = 0.48;\n    waveGain.connect(master);\n\n    const lfo = ctx.createOscillator(); lfo.type = \"sine\";\n    lfo.frequency.value = s.breathRate / 60;\n    const lfoG = ctx.createGain(); lfoG.gain.value = 0.5;\n    lfo.connect(lfoG); lfoG.connect(waveGain.gain); lfo.start();\n\n    const noise = ctx.createBufferSource();\n    noise.buffer = makeBrown(ctx); noise.loop = true;\n    noise.connect(waveGain); noise.start();\n\n    oceanNoiseRef.current = noise;\n    oceanLfoRef.current = lfo;\n    oceanGainRef.current = master;\n  }, []);\n\n  const stopOcean = useCallback(() => {\n    oceanNoiseRef.current?.stop(); oceanNoiseRef.current?.disconnect();\n    oceanLfoRef.current?.stop(); oceanLfoRef.current?.disconnect();\n    oceanGainRef.current?.disconnect();\n    oceanNoiseRef.current = null; oceanLfoRef.current = null;\n  }, []);\n\n  // ── CLOCK SCHEDULER ───────────────────────────────────────────────────────\n  const sessionRef = useRef(session);\n  sessionRef.current = session;\n\n  const scheduleClock = useCallback(() => {\n    const ctx = audioCtxRef.current;\n    if (!ctx || !masterGainRef.current || !clockRunningRef.current) return;\n    const s = sessionRef.current;\n    const ahead = 0.1;\n\n    while (nextTickRef.current < ctx.currentTime + ahead) {\n      const t = nextTickRef.current;\n      const osc = ctx.createOscillator(); const g = ctx.createGain();\n      osc.connect(g); g.connect(masterGainRef.current);\n      osc.type = \"sine\"; osc.frequency.setValueAtTime(900, t); osc.frequency.exponentialRampToValueAtTime(0.01, t + 0.06);\n      g.gain.setValueAtTime(0.28, t); g.gain.exponentialRampToValueAtTime(0.001, t + 0.06);\n      osc.start(t); osc.stop(t + 0.07);\n      nextTickRef.current += s.tickSpeed / 1000;\n    }\n    while (nextPolyRef.current < ctx.currentTime + ahead) {\n      const t = nextPolyRef.current;\n      const osc = ctx.createOscillator(); const g = ctx.createGain();\n      osc.connect(g); g.connect(masterGainRef.current);\n      osc.type = \"triangle\"; osc.frequency.setValueAtTime(260, t); osc.frequency.linearRampToValueAtTime(80, t + 0.4);\n      g.gain.setValueAtTime(0.38, t); g.gain.exponentialRampToValueAtTime(0.001, t + 0.4);\n      osc.start(t); osc.stop(t + 0.4);\n      nextPolyRef.current += s.polySpeed;\n    }\n    if (clockRunningRef.current) clockTimerRef.current = setTimeout(scheduleClock, 25);\n  }, []);\n\n  const startClock = useCallback((ctx: AudioContext) => {\n    if (clockTimerRef.current) clearTimeout(clockTimerRef.current);\n    clockRunningRef.current = true;\n    nextTickRef.current = ctx.currentTime + 0.05;\n    nextPolyRef.current = ctx.currentTime + 0.05;\n    scheduleClock();\n  }, [scheduleClock]);\n\n  const stopClock = useCallback(() => {\n    clockRunningRef.current = false;\n    if (clockTimerRef.current) clearTimeout(clockTimerRef.current);\n    clockTimerRef.current = null;\n  }, []);\n\n  // ── WISDOM SPEAKER ────────────────────────────────────────────────────────\n  const speakWisdom = useCallback(async (quotes: any[], voice: string) => {\n    const enabled = quotes.filter((q: any) => q.enabled);\n    if (!enabled.length) return;\n    const q = enabled[Math.floor(Math.random() * enabled.length)];\n\n    try {\n      const r = await fetch(\"/api/tts\", {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify({ text: q.text, voice }),\n      });\n      if (!r.ok) return;\n      const blob = await r.blob();\n\n      // Apply reverb via Web Audio\n      const ctx = getCtx();\n      const arrayBuf = await blob.arrayBuffer();\n      const decoded = await ctx.decodeAudioData(arrayBuf);\n      const src = ctx.createBufferSource();\n      src.buffer = decoded;\n\n      // Convolver for reverb\n      const convolver = ctx.createConvolver();\n      const reverbLen = ctx.sampleRate * 2.5;\n      const reverbBuf = ctx.createBuffer(2, reverbLen, ctx.sampleRate);\n      for (let ch = 0; ch < 2; ch++) {\n        const d = reverbBuf.getChannelData(ch);\n        for (let i = 0; i < reverbLen; i++) d[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / reverbLen, 2);\n      }\n      convolver.buffer = reverbBuf;\n\n      const dryGain = ctx.createGain(); dryGain.gain.value = 0.6;\n      const wetGain = ctx.createGain(); wetGain.gain.value = 0.25;\n\n      src.connect(dryGain); dryGain.connect(masterGainRef.current!);\n      src.connect(convolver); convolver.connect(wetGain); wetGain.connect(masterGainRef.current!);\n      src.start();\n    } catch (e) { console.error(\"TTS error\", e); }\n  }, [getCtx]);\n\n  // ── MASTER PLAY / STOP ────────────────────────────────────────────────────\n  const masterPlay = useCallback(async () => {\n    const ctx = getCtx();\n    const s = sessionRef.current;\n\n    if (s.binauralOn) startBinaural(ctx, s);\n    if (s.oceanOn) startOcean(ctx, s);\n    if (s.clockOn) startClock(ctx);\n\n    if (s.wisdomOn) {\n      try {\n        const r = await fetch(\"/api/quotes\");\n        const quotes = await r.json();\n        speakWisdom(quotes, s.wisdomVoice);\n        wisdomTimerRef.current = setInterval(async () => {\n          const r2 = await fetch(\"/api/quotes\");\n          const q2 = await r2.json();\n          speakWisdom(q2, sessionRef.current.wisdomVoice);\n        }, s.wisdomIntervalMin * 60 * 1000);\n      } catch (e) { console.error(\"Wisdom fetch error\", e); }\n    }\n\n    setSession(prev => ({ ...prev, playing: true }));\n  }, [getCtx, startBinaural, startOcean, startClock, speakWisdom]);\n\n  const masterStop = useCallback(() => {\n    stopBinaural();\n    stopOcean();\n    stopClock();\n    if (wisdomTimerRef.current) clearInterval(wisdomTimerRef.current);\n    wisdomTimerRef.current = null;\n    setSession(prev => ({ ...prev, playing: false }));\n  }, [stopBinaural, stopOcean, stopClock]);\n\n  const toggleMaster = useCallback(() => {\n    if (session.playing) masterStop();\n    else masterPlay();\n  }, [session.playing, masterPlay, masterStop]);\n\n  // Update binaural in real-time when params change while playing\n  useEffect(() => {\n    if (session.playing && session.binauralOn && leftOscRef.current && rightOscRef.current && audioCtxRef.current) {\n      const ctx = audioCtxRef.current;\n      leftOscRef.current.frequency.setTargetAtTime(session.baseFreq, ctx.currentTime, 0.1);\n      rightOscRef.current.frequency.setTargetAtTime(session.baseFreq + session.beatFreq, ctx.currentTime, 0.1);\n    }\n  }, [session.baseFreq, session.beatFreq]);\n\n  // Update ocean LFO in real-time\n  useEffect(() => {\n    if (session.playing && session.oceanOn && oceanLfoRef.current && audioCtxRef.current) {\n      oceanLfoRef.current.frequency.setTargetAtTime(session.breathRate / 60, audioCtxRef.current.currentTime, 0.5);\n    }\n  }, [session.breathRate]);\n\n  // Restart clock if speed changes while playing\n  useEffect(() => {\n    if (session.playing && session.clockOn && audioCtxRef.current) {\n      stopClock();\n      startClock(audioCtxRef.current);\n    }\n  }, [session.tickSpeed, session.polySpeed]);\n\n  // React to layer pills while playing — start/stop each layer independently\n  useEffect(() => {\n    if (!session.playing || !audioCtxRef.current) return;\n    if (session.clockOn) startClock(audioCtxRef.current);\n    else stopClock();\n  }, [session.clockOn]);\n\n  useEffect(() => {\n    if (!session.playing || !audioCtxRef.current) return;\n    if (session.binauralOn) startBinaural(audioCtxRef.current, sessionRef.current);\n    else stopBinaural();\n  }, [session.binauralOn]);\n\n  useEffect(() => {\n    if (!session.playing || !audioCtxRef.current) return;\n    if (session.oceanOn) startOcean(audioCtxRef.current, sessionRef.current);\n    else stopOcean();\n  }, [session.oceanOn]);\n\n  useEffect(() => {\n    if (!session.playing) return;\n    if (!session.wisdomOn) {\n      if (wisdomTimerRef.current) { clearInterval(wisdomTimerRef.current); wisdomTimerRef.current = null; }\n      return;\n    }\n    let cancelled = false;\n    const intervalMin = sessionRef.current.wisdomIntervalMin;\n    (async () => {\n      try {\n        const r = await fetch(\"/api/quotes\");\n        if (cancelled) return;\n        const quotes = await r.json();\n        if (cancelled) return;\n        speakWisdom(quotes, sessionRef.current.wisdomVoice);\n        if (cancelled) return;\n        wisdomTimerRef.current = setInterval(async () => {\n          if (!sessionRef.current.wisdomOn) return;\n          const r2 = await fetch(\"/api/quotes\");\n          const q2 = await r2.json();\n          speakWisdom(q2, sessionRef.current.wisdomVoice);\n        }, intervalMin * 60 * 1000);\n      } catch (e) { if (!cancelled) console.error(\"Wisdom fetch error\", e); }\n    })();\n    return () => { cancelled = true; if (wisdomTimerRef.current) clearInterval(wisdomTimerRef.current); wisdomTimerRef.current = null; };\n  }, [session.wisdomOn, session.wisdomIntervalMin]);\n\n  useEffect(() => () => { masterStop(); }, []);\n\n  const NAV: { id: Tab; label: string; accent: string; icon: keyof typeof Icons }[] = [\n    { id: \"timeline\", label: \"FLOW\",   accent: \"var(--accent-violet)\", icon: \"Timeline\" },\n    { id: \"binaural\", label: \"BEATS\",  accent: \"var(--accent-blue)\",   icon: \"Waves\"    },\n    { id: \"ocean\",    label: \"OCEAN\",  accent: \"var(--accent-cyan)\",   icon: \"Ocean\"    },\n    { id: \"wisdom\",   label: \"WISDOM\", accent: \"var(--accent-amber)\",  icon: \"Quote\"    },\n    { id: \"clock\",    label: \"CLOCK\",  accent: \"var(--accent-green)\",  icon: \"Clock\"    },\n  ];\n\n  const activeAccent = NAV.find(n => n.id === tab)?.accent ?? \"var(--accent-blue)\";\n\n  return (\n    <div className=\"app-root\">\n      <style>{`\n        @import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');\n        :root {\n          --bg:#0d1117; --bg2:#161b22; --bg3:#1c2330;\n          --border:rgba(255,255,255,0.06); --border2:rgba(255,255,255,0.12);\n          --text:#c9d1d9; --text-dim:#6e7681; --text-bright:#f0f6fc;\n          --accent-blue:#58a6ff; --accent-cyan:#39d0d8;\n          --accent-violet:#bc8cff; --accent-amber:#e3b341;\n          --accent-green:#3fb950; --accent-rose:#f85149;\n        }\n        *{box-sizing:border-box;margin:0;padding:0;}\n        body{background:var(--bg);color:var(--text);font-family:'Space Mono','Courier New',monospace;-webkit-font-smoothing:antialiased;}\n        .app-root{min-height:100dvh;display:flex;justify-content:center;background:var(--bg);}\n        .app-shell{width:100%;max-width:430px;display:flex;flex-direction:column;height:100dvh;border-left:1px solid var(--border2);border-right:1px solid var(--border2);}\n        .card{background:var(--bg2);border:1px solid var(--border2);outline:1px solid var(--border);outline-offset:3px;border-radius:14px;padding:16px;}\n        .card-sm{background:var(--bg2);border:1px solid var(--border2);outline:1px solid var(--border);outline-offset:2px;border-radius:10px;padding:10px 12px;}\n        .scroll-area{overflow-y:auto;}\n        .scroll-area::-webkit-scrollbar{width:2px;}\n        .scroll-area::-webkit-scrollbar-thumb{background:var(--border2);border-radius:1px;}\n        .nav-bar{display:flex;padding:6px;gap:3px;background:var(--bg2);border-top:1px solid var(--border2);}\n        .nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:7px 2px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--text-dim);font-family:inherit;font-size:8px;font-weight:700;letter-spacing:0.08em;cursor:pointer;transition:all 0.15s;}\n        .nav-btn.active{background:var(--bg3);border:1px solid var(--border2);outline:1px solid var(--border);outline-offset:1px;}\n        .nav-btn:not(.active):hover{color:var(--text);}\n        .preset-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;}\n        .preset-btn{background:var(--bg2);border:1px solid var(--border2);outline:1px solid var(--border);outline-offset:2px;border-radius:10px;padding:9px 8px;cursor:pointer;font-family:inherit;color:var(--text-dim);transition:all 0.15s;text-align:left;}\n        .preset-btn.active{background:var(--bg3);}\n        .preset-name{font-size:9px;font-weight:700;letter-spacing:0.07em;display:block;margin-bottom:3px;}\n        .preset-hz{font-size:9px;opacity:0.5;display:block;}\n        .preset-wave{font-size:8px;margin-top:2px;display:block;opacity:0.35;letter-spacing:0.04em;}\n        .noise-btn{background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:4px 10px;font-family:inherit;font-size:9px;font-weight:700;color:var(--text-dim);cursor:pointer;letter-spacing:0.06em;transition:all 0.15s;}\n        .label-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;}\n        .label-key{font-size:9px;font-weight:700;letter-spacing:0.1em;color:var(--text-dim);text-transform:uppercase;}\n        .label-val{font-size:11px;font-weight:700;}\n        .section-title{font-size:17px;font-weight:700;color:var(--text-bright);letter-spacing:-0.01em;}\n        .section-sub{font-size:9px;color:var(--text-dim);letter-spacing:0.08em;margin-top:2px;}\n        /* master play button — light/white, centered in toolbar */\n        .master-play{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.25);outline:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;transition:all 0.2s;font-family:inherit;flex-shrink:0;flex:0 0 56px;}\n        .master-play:hover{background:rgba(255,255,255,0.22);}\n        .master-play.active{background:var(--play-color);border-color:var(--play-color);color:#fff;box-shadow:0 0 20px color-mix(in srgb,var(--play-color) 50%,transparent);}\n        /* module toggle pill */\n        .mod-pill{display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:20px;border:1px solid var(--border);cursor:pointer;font-family:inherit;font-size:9px;font-weight:700;letter-spacing:0.07em;color:var(--text-dim);background:var(--bg2);transition:all 0.15s;white-space:nowrap;}\n        .mod-pill.on{border-color:var(--pill-color);color:var(--pill-color);}\n        .mod-dot{width:5px;height:5px;border-radius:50%;background:currentColor;}\n        select{background:var(--bg2);border:1px solid var(--border2);border-radius:6px;color:#f0f6fc;font-family:inherit;font-size:10px;padding:6px 8px;outline:none;width:100%;}\n        select option{background:var(--bg2);color:#f0f6fc;}\n        input[type=\"number\"],input[type=\"text\"],input:not([type]),textarea{background:var(--bg2)!important;border:1px solid var(--border2)!important;border-radius:6px;color:#f0f6fc!important;font-family:inherit;font-size:11px;padding:7px 9px;outline:none;width:100%;}\n        input::placeholder,textarea::placeholder{color:rgba(255,255,255,0.4);}\n        .slider-wrap{position:relative;height:18px;display:flex;align-items:center;}\n        .slider-track{position:absolute;width:100%;height:3px;border-radius:2px;background:var(--bg3);border:1px solid var(--border);}\n        .slider-fill{position:absolute;height:3px;border-radius:2px;pointer-events:none;}\n        .slider-thumb{position:absolute;width:100%;z-index:2;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none;height:18px;}\n        .slider-thumb::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--bg2);border:1px solid var(--border2);outline:1px solid var(--border);outline-offset:2px;cursor:pointer;}\n        .slider-thumb::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--bg2);border:1px solid var(--border2);cursor:pointer;}\n        @keyframes pulse{0%,100%{opacity:1}50%{opacity:0.3}}\n        .live-dot{animation:pulse 2s ease-in-out infinite;}\n      `}</style>\n\n      <div className=\"app-shell\">\n        {/* ── HEADER ── */}\n        <header style={{ padding:\"12px 16px 10px\", borderBottom:\"1px solid var(--border2)\", background:\"var(--bg2)\", flexShrink:0 }}>\n          <span style={{ fontSize:13, fontWeight:700, letterSpacing:\"0.14em\", color:\"var(--text-bright)\" }}>\n            <span style={{ color:\"var(--accent-blue)\" }}>brain</span>\n          </span>\n          <div style={{ fontSize:8, color:\"var(--text-dim)\", marginTop:4, letterSpacing:\"0.04em\", lineHeight:1.4 }}>\n            Tomaso Valmax · Binaural beats for the token breather. Add wisdom, receive unto you the flow of tokens.\n          </div>\n        </header>\n\n        {/* ── WAVEFORM ── */}\n        <Waveform analyser={analyserRef.current} playing={session.playing} accent={activeAccent} />\n\n        {/* ── ACTIVE SEGMENT BADGE ── */}\n        {session.activeSegment && session.playing && (\n          <div style={{ padding:\"4px 16px\", background:\"var(--bg2)\", borderBottom:\"1px solid var(--border)\", display:\"flex\", gap:8, alignItems:\"center\" }}>\n            <div style={{ width:6, height:6, borderRadius:\"50%\", background:session.activeSegment.color }} />\n            <span style={{ fontSize:9, letterSpacing:\"0.1em\", color:\"var(--text-dim)\" }}>\n              {session.activeSegment.label.toUpperCase()} · {session.activeSegment.brainwave.toUpperCase()}\n            </span>\n          </div>\n        )}\n\n        {/* ── MAIN CONTENT ── */}\n        <main className=\"scroll-area\" style={{ flex:1, padding:\"16px 14px 120px\" }}>\n          {tab === \"timeline\"  && <TimelineTab session={session} setSession={setSession} masterPlaying={session.playing} masterPlay={masterPlay} masterStop={masterStop} />}\n          {tab === \"binaural\"  && <BinauralTab session={session} setSession={setSession} />}\n          {tab === \"ocean\"     && <OceanPulseTab session={session} setSession={setSession} />}\n          {tab === \"wisdom\"    && <TTSWisdomTab session={session} setSession={setSession} speakWisdom={speakWisdom} />}\n          {tab === \"clock\"     && <ClockTab session={session} setSession={setSession} />}\n        </main>\n\n        {/* ── BOTTOM TOOLBAR (mobile) — play centered ── */}\n        <nav className=\"nav-bar\" style={{ position:\"absolute\", bottom:0, left:0, right:0, flexShrink:0, display:\"flex\", alignItems:\"center\", justifyContent:\"space-between\", padding:\"8px 6px\", gap:4 }}>\n          <div style={{ flex: 1, display: \"flex\", gap: 4 }}>\n            {NAV.slice(0, 2).map(({ id, label, accent, icon }) => {\n              const Icon = Icons[icon] as () => JSX.Element;\n              const active = tab === id;\n              return (\n                <button key={id} onClick={() => setTab(id)}\n                  className={`nav-btn${active ? \" active\" : \"\"}`}\n                  style={{ color: active ? accent : undefined, flex: 1 }}>\n                  <Icon />\n                  {label}\n                </button>\n              );\n            })}\n          </div>\n          <button\n            onClick={toggleMaster}\n            className={`master-play${session.playing ? \" active\" : \"\"}`}\n            style={{ \"--play-color\": \"var(--accent-green)\" } as React.CSSProperties}>\n            {session.playing\n              ? <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"2\"/></svg>\n              : <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"5 3 19 12 5 21 5 3\"/></svg>\n            }\n          </button>\n          <div style={{ flex: 1, display: \"flex\", gap: 4 }}>\n            {NAV.slice(2).map(({ id, label, accent, icon }) => {\n              const Icon = Icons[icon] as () => JSX.Element;\n              const active = tab === id;\n              return (\n                <button key={id} onClick={() => setTab(id)}\n                  className={`nav-btn${active ? \" active\" : \"\"}`}\n                  style={{ color: active ? accent : undefined, flex: 1 }}>\n                  <Icon />\n                  {label}\n                </button>\n              );\n            })}\n          </div>\n        </nav>\n      </div>\n    </div>\n  );\n}\n",["D",1773362018993],74,{"_105":443,"_165":147,"_162":341,"_97":340,"_173":444,"_171":191,"_102":199,"_164":236,"_107":445,"_166":446,"_175":-5},"1b377936-1e74-11f1-a939-42dde27851f2","import React, { useState, useRef, useEffect, useCallback } from \"react\";\nimport { BinauralTab } from \"https://esm.town/v/all/brain/frontend/components/BinauralTab.tsx\";\nimport { OceanPulseTab } from \"https://esm.town/v/all/brain/frontend/components/OceanPulseTab.tsx\";\nimport { TimelineTab } from \"https://esm.town/v/all/brain/frontend/components/TimelineTab.tsx\";\nimport { TTSWisdomTab } from \"https://esm.town/v/all/brain/frontend/components/TTSWisdomTab.tsx\";\nimport { ClockTab } from \"https://esm.town/v/all/brain/frontend/components/ClockTab.tsx\";\nimport { Icons } from \"https://esm.town/v/all/brain/frontend/components/Icons.tsx\";\nimport { Waveform } from \"https://esm.town/v/all/brain/frontend/components/Waveform.tsx\";\n\ntype Tab = \"timeline\" | \"ocean\" | \"wisdom\" | \"clock\" | \"binaural\";\n\n// ── MASTER SESSION STATE ────────────────────────────────────────────────────\nexport interface SessionState {\n  playing: boolean;\n  // binaural\n  binauralOn: boolean;\n  baseFreq: number;\n  beatFreq: number;\n  // ocean\n  oceanOn: boolean;\n  breathRate: number;\n  // clock\n  clockOn: boolean;\n  tickSpeed: number;\n  polySpeed: number;\n  // wisdom\n  wisdomOn: boolean;\n  wisdomIntervalMin: number;\n  wisdomVoice: string;\n  // active timeline segment info\n  activeSegment: { label: string; brainwave: string; color: string } | null;\n}\n\nconst defaultSession: SessionState = {\n  playing: false,\n  binauralOn: true,\n  baseFreq: 200,\n  beatFreq: 10,\n  oceanOn: false,\n  breathRate: 6,\n  clockOn: false,\n  tickSpeed: 1000,\n  polySpeed: 33,\n  wisdomOn: false,\n  wisdomIntervalMin: 10,\n  wisdomVoice: \"troy\",\n  activeSegment: null,\n};\n\nexport default function App() {\n  const [tab, setTab] = useState<Tab>(\"timeline\");\n  const [session, setSession] = useState<SessionState>(defaultSession);\n\n  // Audio engine refs — shared across all tabs\n  const audioCtxRef = useRef<AudioContext | null>(null);\n  // Binaural\n  const leftOscRef = useRef<OscillatorNode | null>(null);\n  const rightOscRef = useRef<OscillatorNode | null>(null);\n  const binauralGainRef = useRef<GainNode | null>(null);\n  // Ocean\n  const oceanNoiseRef = useRef<AudioBufferSourceNode | null>(null);\n  const oceanLfoRef = useRef<OscillatorNode | null>(null);\n  const oceanGainRef = useRef<GainNode | null>(null);\n  // Clock\n  const clockTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const clockRunningRef = useRef(false);\n  const nextTickRef = useRef(0);\n  const nextPolyRef = useRef(0);\n  // Master analyser for waveform\n  const analyserRef = useRef<AnalyserNode | null>(null);\n  const masterGainRef = useRef<GainNode | null>(null);\n  // Wisdom timer\n  const wisdomTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);\n\n  const getCtx = useCallback(() => {\n    if (!audioCtxRef.current) {\n      const Ctx = window.AudioContext || (window as any).webkitAudioContext;\n      audioCtxRef.current = new Ctx();\n    }\n    const ctx = audioCtxRef.current;\n    if (ctx.state === \"suspended\") ctx.resume();\n\n    // Setup master chain once — limiter gain so all layers mix without clipping\n    if (!analyserRef.current) {\n      const analyser = ctx.createAnalyser();\n      analyser.fftSize = 2048;\n      const limiter = ctx.createGain();\n      limiter.gain.value = 0.85;\n      const master = ctx.createGain();\n      master.gain.value = 1;\n      master.connect(limiter);\n      limiter.connect(analyser);\n      analyser.connect(ctx.destination);\n      analyserRef.current = analyser;\n      masterGainRef.current = master;\n    }\n    return ctx;\n  }, []);\n\n  // ── START BINAURAL ────────────────────────────────────────────────────────\n  const startBinaural = useCallback((ctx: AudioContext, s: SessionState) => {\n    if (leftOscRef.current) { leftOscRef.current.stop(); leftOscRef.current.disconnect(); }\n    if (rightOscRef.current) { rightOscRef.current.stop(); rightOscRef.current.disconnect(); }\n\n    const left = ctx.createOscillator();\n    const right = ctx.createOscillator();\n    const lp = ctx.createStereoPanner(); lp.pan.value = -1;\n    const rp = ctx.createStereoPanner(); rp.pan.value = 1;\n    const gain = ctx.createGain();\n    gain.gain.setValueAtTime(0, ctx.currentTime);\n    gain.gain.linearRampToValueAtTime(0.38, ctx.currentTime + 1.5);\n\n    left.connect(lp); right.connect(rp);\n    lp.connect(gain); rp.connect(gain);\n    gain.connect(masterGainRef.current!);\n\n    left.frequency.value = s.baseFreq;\n    right.frequency.value = s.baseFreq + s.beatFreq;\n    left.start(); right.start();\n    leftOscRef.current = left;\n    rightOscRef.current = right;\n    binauralGainRef.current = gain;\n  }, []);\n\n  const stopBinaural = useCallback(() => {\n    leftOscRef.current?.stop(); leftOscRef.current?.disconnect();\n    rightOscRef.current?.stop(); rightOscRef.current?.disconnect();\n    leftOscRef.current = null; rightOscRef.current = null;\n  }, []);\n\n  // ── START OCEAN ───────────────────────────────────────────────────────────\n  function makeBrown(ctx: AudioContext) {\n    const size = ctx.sampleRate * 4;\n    const buf = ctx.createBuffer(1, size, ctx.sampleRate);\n    const out = buf.getChannelData(0);\n    let last = 0;\n    for (let i = 0; i < size; i++) {\n      const w = Math.random() * 2 - 1;\n      out[i] = (last + 0.02 * w) / 1.02; last = out[i]; out[i] *= 3.5;\n    }\n    return buf;\n  }\n\n  const startOcean = useCallback((ctx: AudioContext, s: SessionState) => {\n    if (oceanNoiseRef.current) { oceanNoiseRef.current.stop(); oceanNoiseRef.current.disconnect(); }\n    if (oceanLfoRef.current) { oceanLfoRef.current.stop(); oceanLfoRef.current.disconnect(); }\n\n    const master = ctx.createGain(); master.gain.value = 0.42;\n    master.connect(masterGainRef.current!);\n\n    const waveGain = ctx.createGain(); waveGain.gain.value = 0.48;\n    waveGain.connect(master);\n\n    const lfo = ctx.createOscillator(); lfo.type = \"sine\";\n    lfo.frequency.value = s.breathRate / 60;\n    const lfoG = ctx.createGain(); lfoG.gain.value = 0.5;\n    lfo.connect(lfoG); lfoG.connect(waveGain.gain); lfo.start();\n\n    const noise = ctx.createBufferSource();\n    noise.buffer = makeBrown(ctx); noise.loop = true;\n    noise.connect(waveGain); noise.start();\n\n    oceanNoiseRef.current = noise;\n    oceanLfoRef.current = lfo;\n    oceanGainRef.current = master;\n  }, []);\n\n  const stopOcean = useCallback(() => {\n    oceanNoiseRef.current?.stop(); oceanNoiseRef.current?.disconnect();\n    oceanLfoRef.current?.stop(); oceanLfoRef.current?.disconnect();\n    oceanGainRef.current?.disconnect();\n    oceanNoiseRef.current = null; oceanLfoRef.current = null;\n  }, []);\n\n  // ── CLOCK SCHEDULER ───────────────────────────────────────────────────────\n  const sessionRef = useRef(session);\n  sessionRef.current = session;\n\n  const scheduleClock = useCallback(() => {\n    const ctx = audioCtxRef.current;\n    if (!ctx || !masterGainRef.current || !clockRunningRef.current) return;\n    const s = sessionRef.current;\n    const ahead = 0.1;\n\n    while (nextTickRef.current < ctx.currentTime + ahead) {\n      const t = nextTickRef.current;\n      const osc = ctx.createOscillator(); const g = ctx.createGain();\n      osc.connect(g); g.connect(masterGainRef.current);\n      osc.type = \"sine\"; osc.frequency.setValueAtTime(900, t); osc.frequency.exponentialRampToValueAtTime(0.01, t + 0.06);\n      g.gain.setValueAtTime(0.28, t); g.gain.exponentialRampToValueAtTime(0.001, t + 0.06);\n      osc.start(t); osc.stop(t + 0.07);\n      nextTickRef.current += s.tickSpeed / 1000;\n    }\n    while (nextPolyRef.current < ctx.currentTime + ahead) {\n      const t = nextPolyRef.current;\n      const osc = ctx.createOscillator(); const g = ctx.createGain();\n      osc.connect(g); g.connect(masterGainRef.current);\n      osc.type = \"triangle\"; osc.frequency.setValueAtTime(260, t); osc.frequency.linearRampToValueAtTime(80, t + 0.4);\n      g.gain.setValueAtTime(0.38, t); g.gain.exponentialRampToValueAtTime(0.001, t + 0.4);\n      osc.start(t); osc.stop(t + 0.4);\n      nextPolyRef.current += s.polySpeed;\n    }\n    if (clockRunningRef.current) clockTimerRef.current = setTimeout(scheduleClock, 25);\n  }, []);\n\n  const startClock = useCallback((ctx: AudioContext) => {\n    if (clockTimerRef.current) clearTimeout(clockTimerRef.current);\n    clockRunningRef.current = true;\n    nextTickRef.current = ctx.currentTime + 0.05;\n    nextPolyRef.current = ctx.currentTime + 0.05;\n    scheduleClock();\n  }, [scheduleClock]);\n\n  const stopClock = useCallback(() => {\n    clockRunningRef.current = false;\n    if (clockTimerRef.current) clearTimeout(clockTimerRef.current);\n    clockTimerRef.current = null;\n  }, []);\n\n  // ── WISDOM SPEAKER ────────────────────────────────────────────────────────\n  const speakWisdom = useCallback(async (quotes: any[], voice: string) => {\n    const enabled = quotes.filter((q: any) => q.enabled);\n    if (!enabled.length) return;\n    const q = enabled[Math.floor(Math.random() * enabled.length)];\n\n    try {\n      const r = await fetch(\"/api/tts\", {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify({ text: q.text, voice }),\n      });\n      if (!r.ok) return;\n      const blob = await r.blob();\n\n      // Apply reverb via Web Audio\n      const ctx = getCtx();\n      const arrayBuf = await blob.arrayBuffer();\n      const decoded = await ctx.decodeAudioData(arrayBuf);\n      const src = ctx.createBufferSource();\n      src.buffer = decoded;\n\n      // Convolver for reverb\n      const convolver = ctx.createConvolver();\n      const reverbLen = ctx.sampleRate * 2.5;\n      const reverbBuf = ctx.createBuffer(2, reverbLen, ctx.sampleRate);\n      for (let ch = 0; ch < 2; ch++) {\n        const d = reverbBuf.getChannelData(ch);\n        for (let i = 0; i < reverbLen; i++) d[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / reverbLen, 2);\n      }\n      convolver.buffer = reverbBuf;\n\n      const dryGain = ctx.createGain(); dryGain.gain.value = 0.6;\n      const wetGain = ctx.createGain(); wetGain.gain.value = 0.25;\n\n      src.connect(dryGain); dryGain.connect(masterGainRef.current!);\n      src.connect(convolver); convolver.connect(wetGain); wetGain.connect(masterGainRef.current!);\n      src.start();\n    } catch (e) { console.error(\"TTS error\", e); }\n  }, [getCtx]);\n\n  // ── MASTER PLAY / STOP ────────────────────────────────────────────────────\n  const masterPlay = useCallback(async () => {\n    const ctx = getCtx();\n    const s = sessionRef.current;\n\n    if (s.binauralOn) startBinaural(ctx, s);\n    if (s.oceanOn) startOcean(ctx, s);\n    if (s.clockOn) startClock(ctx);\n\n    if (s.wisdomOn) {\n      try {\n        const r = await fetch(\"/api/quotes\");\n        const quotes = await r.json();\n        speakWisdom(quotes, s.wisdomVoice);\n        wisdomTimerRef.current = setInterval(async () => {\n          const r2 = await fetch(\"/api/quotes\");\n          const q2 = await r2.json();\n          speakWisdom(q2, sessionRef.current.wisdomVoice);\n        }, s.wisdomIntervalMin * 60 * 1000);\n      } catch (e) { console.error(\"Wisdom fetch error\", e); }\n    }\n\n    setSession(prev => ({ ...prev, playing: true }));\n  }, [getCtx, startBinaural, startOcean, startClock, speakWisdom]);\n\n  const masterStop = useCallback(() => {\n    stopBinaural();\n    stopOcean();\n    stopClock();\n    if (wisdomTimerRef.current) clearInterval(wisdomTimerRef.current);\n    wisdomTimerRef.current = null;\n    setSession(prev => ({ ...prev, playing: false }));\n  }, [stopBinaural, stopOcean, stopClock]);\n\n  const toggleMaster = useCallback(() => {\n    if (session.playing) masterStop();\n    else masterPlay();\n  }, [session.playing, masterPlay, masterStop]);\n\n  // Update binaural in real-time when params change while playing\n  useEffect(() => {\n    if (session.playing && session.binauralOn && leftOscRef.current && rightOscRef.current && audioCtxRef.current) {\n      const ctx = audioCtxRef.current;\n      leftOscRef.current.frequency.setTargetAtTime(session.baseFreq, ctx.currentTime, 0.1);\n      rightOscRef.current.frequency.setTargetAtTime(session.baseFreq + session.beatFreq, ctx.currentTime, 0.1);\n    }\n  }, [session.baseFreq, session.beatFreq]);\n\n  // Update ocean LFO in real-time\n  useEffect(() => {\n    if (session.playing && session.oceanOn && oceanLfoRef.current && audioCtxRef.current) {\n      oceanLfoRef.current.frequency.setTargetAtTime(session.breathRate / 60, audioCtxRef.current.currentTime, 0.5);\n    }\n  }, [session.breathRate]);\n\n  // Restart clock if speed changes while playing\n  useEffect(() => {\n    if (session.playing && session.clockOn && audioCtxRef.current) {\n      stopClock();\n      startClock(audioCtxRef.current);\n    }\n  }, [session.tickSpeed, session.polySpeed]);\n\n  // React to layer pills while playing — start/stop each layer independently\n  useEffect(() => {\n    if (!session.playing || !audioCtxRef.current) return;\n    if (session.clockOn) startClock(audioCtxRef.current);\n    else stopClock();\n  }, [session.clockOn]);\n\n  useEffect(() => {\n    if (!session.playing || !audioCtxRef.current) return;\n    if (session.binauralOn) startBinaural(audioCtxRef.current, sessionRef.current);\n    else stopBinaural();\n  }, [session.binauralOn]);\n\n  useEffect(() => {\n    if (!session.playing || !audioCtxRef.current) return;\n    if (session.oceanOn) startOcean(audioCtxRef.current, sessionRef.current);\n    else stopOcean();\n  }, [session.oceanOn]);\n\n  useEffect(() => {\n    if (!session.playing) return;\n    if (!session.wisdomOn) {\n      if (wisdomTimerRef.current) { clearInterval(wisdomTimerRef.current); wisdomTimerRef.current = null; }\n      return;\n    }\n    let cancelled = false;\n    const intervalMin = sessionRef.current.wisdomIntervalMin;\n    (async () => {\n      try {\n        const r = await fetch(\"/api/quotes\");\n        if (cancelled) return;\n        const quotes = await r.json();\n        if (cancelled) return;\n        speakWisdom(quotes, sessionRef.current.wisdomVoice);\n        if (cancelled) return;\n        wisdomTimerRef.current = setInterval(async () => {\n          if (!sessionRef.current.wisdomOn) return;\n          const r2 = await fetch(\"/api/quotes\");\n          const q2 = await r2.json();\n          speakWisdom(q2, sessionRef.current.wisdomVoice);\n        }, intervalMin * 60 * 1000);\n      } catch (e) { if (!cancelled) console.error(\"Wisdom fetch error\", e); }\n    })();\n    return () => { cancelled = true; if (wisdomTimerRef.current) clearInterval(wisdomTimerRef.current); wisdomTimerRef.current = null; };\n  }, [session.wisdomOn, session.wisdomIntervalMin]);\n\n  useEffect(() => () => { masterStop(); }, []);\n\n  const NAV: { id: Tab; label: string; accent: string; icon: keyof typeof Icons }[] = [\n    { id: \"timeline\", label: \"FLOW\",   accent: \"var(--accent-violet)\", icon: \"Timeline\" },\n    { id: \"binaural\", label: \"BEATS\",  accent: \"var(--accent-blue)\",   icon: \"Waves\"    },\n    { id: \"ocean\",    label: \"OCEAN\",  accent: \"var(--accent-cyan)\",   icon: \"Ocean\"    },\n    { id: \"wisdom\",   label: \"WISDOM\", accent: \"var(--accent-amber)\",  icon: \"Quote\"    },\n    { id: \"clock\",    label: \"CLOCK\",  accent: \"var(--accent-green)\",  icon: \"Clock\"    },\n  ];\n\n  const activeAccent = NAV.find(n => n.id === tab)?.accent ?? \"var(--accent-blue)\";\n\n  return (\n    <div className=\"app-root\">\n      <style>{`\n        @import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');\n        :root {\n          --bg:#0d1117; --bg2:#161b22; --bg3:#1c2330;\n          --border:rgba(255,255,255,0.06); --border2:rgba(255,255,255,0.12);\n          --text:#c9d1d9; --text-dim:#6e7681; --text-bright:#f0f6fc;\n          --accent-blue:#58a6ff; --accent-cyan:#39d0d8;\n          --accent-violet:#bc8cff; --accent-amber:#e3b341;\n          --accent-green:#3fb950; --accent-rose:#f85149;\n        }\n        *{box-sizing:border-box;margin:0;padding:0;}\n        body{background:var(--bg);color:var(--text);font-family:'Space Mono','Courier New',monospace;-webkit-font-smoothing:antialiased;}\n        .app-root{min-height:100dvh;display:flex;justify-content:center;background:var(--bg);}\n        .app-shell{width:100%;max-width:430px;display:flex;flex-direction:column;height:100dvh;border-left:1px solid var(--border2);border-right:1px solid var(--border2);}\n        .card{background:var(--bg2);border:1px solid var(--border2);outline:1px solid var(--border);outline-offset:3px;border-radius:14px;padding:16px;}\n        .card-sm{background:var(--bg2);border:1px solid var(--border2);outline:1px solid var(--border);outline-offset:2px;border-radius:10px;padding:10px 12px;}\n        .scroll-area{overflow-y:auto;}\n        .scroll-area::-webkit-scrollbar{width:2px;}\n        .scroll-area::-webkit-scrollbar-thumb{background:var(--border2);border-radius:1px;}\n        .nav-bar{display:flex;padding:6px;gap:3px;background:var(--bg2);border-top:1px solid var(--border2);}\n        .nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:7px 2px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--text-dim);font-family:inherit;font-size:8px;font-weight:700;letter-spacing:0.08em;cursor:pointer;transition:all 0.15s;}\n        .nav-btn.active{background:var(--bg3);border:1px solid var(--border2);outline:1px solid var(--border);outline-offset:1px;}\n        .nav-btn:not(.active):hover{color:var(--text);}\n        .preset-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;}\n        .preset-btn{background:var(--bg2);border:1px solid var(--border2);outline:1px solid var(--border);outline-offset:2px;border-radius:10px;padding:9px 8px;cursor:pointer;font-family:inherit;color:var(--text-dim);transition:all 0.15s;text-align:left;}\n        .preset-btn.active{background:var(--bg3);}\n        .preset-name{font-size:9px;font-weight:700;letter-spacing:0.07em;display:block;margin-bottom:3px;}\n        .preset-hz{font-size:9px;opacity:0.5;display:block;}\n        .preset-wave{font-size:8px;margin-top:2px;display:block;opacity:0.35;letter-spacing:0.04em;}\n        .noise-btn{background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:4px 10px;font-family:inherit;font-size:9px;font-weight:700;color:var(--text-dim);cursor:pointer;letter-spacing:0.06em;transition:all 0.15s;}\n        .label-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;}\n        .label-key{font-size:9px;font-weight:700;letter-spacing:0.1em;color:var(--text-dim);text-transform:uppercase;}\n        .label-val{font-size:11px;font-weight:700;}\n        .section-title{font-size:17px;font-weight:700;color:var(--text-bright);letter-spacing:-0.01em;}\n        .section-sub{font-size:9px;color:var(--text-dim);letter-spacing:0.08em;margin-top:2px;}\n        /* master play button — light/white, centered in toolbar */\n        .master-play{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.25);outline:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;transition:all 0.2s;font-family:inherit;flex-shrink:0;flex:0 0 56px;}\n        .master-play:hover{background:rgba(255,255,255,0.22);}\n        .master-play.active{background:var(--play-color);border-color:var(--play-color);color:#fff;box-shadow:0 0 20px color-mix(in srgb,var(--play-color) 50%,transparent);}\n        /* module toggle pill */\n        .mod-pill{display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:20px;border:1px solid var(--border);cursor:pointer;font-family:inherit;font-size:9px;font-weight:700;letter-spacing:0.07em;color:var(--text-dim);background:var(--bg2);transition:all 0.15s;white-space:nowrap;}\n        .mod-pill.on{border-color:var(--pill-color);color:var(--pill-color);}\n        .mod-dot{width:5px;height:5px;border-radius:50%;background:currentColor;}\n        select{background:var(--bg);border:1px solid var(--border2);border-radius:6px;color:var(--text);font-family:inherit;font-size:10px;padding:6px 8px;outline:none;width:100%;}\n        select option{background:var(--bg2);}\n        input[type=\"number\"],input[type=\"text\"],textarea{background:var(--bg);border:1px solid var(--border2);border-radius:6px;color:var(--text);font-family:inherit;font-size:11px;padding:7px 9px;outline:none;width:100%;}\n        input::placeholder,textarea::placeholder{color:var(--text-dim);}\n        .slider-wrap{position:relative;height:18px;display:flex;align-items:center;}\n        .slider-track{position:absolute;width:100%;height:3px;border-radius:2px;background:var(--bg3);border:1px solid var(--border);}\n        .slider-fill{position:absolute;height:3px;border-radius:2px;pointer-events:none;}\n        .slider-thumb{position:absolute;width:100%;z-index:2;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none;height:18px;}\n        .slider-thumb::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--bg2);border:1px solid var(--border2);outline:1px solid var(--border);outline-offset:2px;cursor:pointer;}\n        .slider-thumb::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--bg2);border:1px solid var(--border2);cursor:pointer;}\n        @keyframes pulse{0%,100%{opacity:1}50%{opacity:0.3}}\n        .live-dot{animation:pulse 2s ease-in-out infinite;}\n      `}</style>\n\n      <div className=\"app-shell\">\n        {/* ── HEADER ── */}\n        <header style={{ padding:\"12px 16px 10px\", borderBottom:\"1px solid var(--border2)\", background:\"var(--bg2)\", flexShrink:0 }}>\n          <span style={{ fontSize:13, fontWeight:700, letterSpacing:\"0.14em\", color:\"var(--text-bright)\" }}>\n            <span style={{ color:\"var(--accent-blue)\" }}>brain</span>\n          </span>\n          <div style={{ fontSize:8, color:\"var(--text-dim)\", marginTop:4, letterSpacing:\"0.04em\", lineHeight:1.4 }}>\n            Tomaso Valmax · Binaural beats for the token breather. Add wisdom, receive unto you the flow of tokens.\n          </div>\n        </header>\n\n        {/* ── WAVEFORM ── */}\n        <Waveform analyser={analyserRef.current} playing={session.playing} accent={activeAccent} />\n\n        {/* ── ACTIVE SEGMENT BADGE ── */}\n        {session.activeSegment && session.playing && (\n          <div style={{ padding:\"4px 16px\", background:\"var(--bg2)\", borderBottom:\"1px solid var(--border)\", display:\"flex\", gap:8, alignItems:\"center\" }}>\n            <div style={{ width:6, height:6, borderRadius:\"50%\", background:session.activeSegment.color }} />\n            <span style={{ fontSize:9, letterSpacing:\"0.1em\", color:\"var(--text-dim)\" }}>\n              {session.activeSegment.label.toUpperCase()} · {session.activeSegment.brainwave.toUpperCase()}\n            </span>\n          </div>\n        )}\n\n        {/* ── MAIN CONTENT ── */}\n        <main className=\"scroll-area\" style={{ flex:1, padding:\"16px 14px 120px\" }}>\n          {tab === \"timeline\"  && <TimelineTab session={session} setSession={setSession} masterPlaying={session.playing} masterPlay={masterPlay} masterStop={masterStop} />}\n          {tab === \"binaural\"  && <BinauralTab session={session} setSession={setSession} />}\n          {tab === \"ocean\"     && <OceanPulseTab session={session} setSession={setSession} />}\n          {tab === \"wisdom\"    && <TTSWisdomTab session={session} setSession={setSession} speakWisdom={speakWisdom} />}\n          {tab === \"clock\"     && <ClockTab session={session} setSession={setSession} />}\n        </main>\n\n        {/* ── BOTTOM TOOLBAR (mobile) — play centered ── */}\n        <nav className=\"nav-bar\" style={{ position:\"absolute\", bottom:0, left:0, right:0, flexShrink:0, display:\"flex\", alignItems:\"center\", justifyContent:\"space-between\", padding:\"8px 6px\", gap:4 }}>\n          <div style={{ flex: 1, display: \"flex\", gap: 4 }}>\n            {NAV.slice(0, 2).map(({ id, label, accent, icon }) => {\n              const Icon = Icons[icon] as () => JSX.Element;\n              const active = tab === id;\n              return (\n                <button key={id} onClick={() => setTab(id)}\n                  className={`nav-btn${active ? \" active\" : \"\"}`}\n                  style={{ color: active ? accent : undefined, flex: 1 }}>\n                  <Icon />\n                  {label}\n                </button>\n              );\n            })}\n          </div>\n          <button\n            onClick={toggleMaster}\n            className={`master-play${session.playing ? \" active\" : \"\"}`}\n            style={{ \"--play-color\": \"var(--accent-green)\" } as React.CSSProperties}>\n            {session.playing\n              ? <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"2\"/></svg>\n              : <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"5 3 19 12 5 21 5 3\"/></svg>\n            }\n          </button>\n          <div style={{ flex: 1, display: \"flex\", gap: 4 }}>\n            {NAV.slice(2).map(({ id, label, accent, icon }) => {\n              const Icon = Icons[icon] as () => JSX.Element;\n              const active = tab === id;\n              return (\n                <button key={id} onClick={() => setTab(id)}\n                  className={`nav-btn${active ? \" active\" : \"\"}`}\n                  style={{ color: active ? accent : undefined, flex: 1 }}>\n                  <Icon />\n                  {label}\n                </button>\n              );\n            })}\n          </div>\n        </nav>\n      </div>\n    </div>\n  );\n}\n",["D",1773361944669],72,{"_105":448,"_165":147,"_162":341,"_97":340,"_173":449,"_171":191,"_102":189,"_164":236,"_107":450,"_166":451,"_175":-5},"fc7551bc-1e73-11f1-bf1d-42dde27851f2","import React, { useState, useRef, useEffect, useCallback } from \"react\";\nimport { BinauralTab } from \"https://esm.town/v/all/brain/frontend/components/BinauralTab.tsx\";\nimport { OceanPulseTab } from \"https://esm.town/v/all/brain/frontend/components/OceanPulseTab.tsx\";\nimport { TimelineTab } from \"https://esm.town/v/all/brain/frontend/components/TimelineTab.tsx\";\nimport { TTSWisdomTab } from \"https://esm.town/v/all/brain/frontend/components/TTSWisdomTab.tsx\";\nimport { ClockTab } from \"https://esm.town/v/all/brain/frontend/components/ClockTab.tsx\";\nimport { Icons } from \"https://esm.town/v/all/brain/frontend/components/Icons.tsx\";\nimport { Waveform } from \"https://esm.town/v/all/brain/frontend/components/Waveform.tsx\";\n\ntype Tab = \"timeline\" | \"ocean\" | \"wisdom\" | \"clock\" | \"binaural\";\n\n// ── MASTER SESSION STATE ────────────────────────────────────────────────────\nexport interface SessionState {\n  playing: boolean;\n  // binaural\n  binauralOn: boolean;\n  baseFreq: number;\n  beatFreq: number;\n  // ocean\n  oceanOn: boolean;\n  breathRate: number;\n  // clock\n  clockOn: boolean;\n  tickSpeed: number;\n  polySpeed: number;\n  // wisdom\n  wisdomOn: boolean;\n  wisdomIntervalMin: number;\n  wisdomVoice: string;\n  // active timeline segment info\n  activeSegment: { label: string; brainwave: string; color: string } | null;\n}\n\nconst defaultSession: SessionState = {\n  playing: false,\n  binauralOn: true,\n  baseFreq: 200,\n  beatFreq: 10,\n  oceanOn: false,\n  breathRate: 6,\n  clockOn: false,\n  tickSpeed: 1000,\n  polySpeed: 33,\n  wisdomOn: false,\n  wisdomIntervalMin: 10,\n  wisdomVoice: \"troy\",\n  activeSegment: null,\n};\n\nexport default function App() {\n  const [tab, setTab] = useState<Tab>(\"timeline\");\n  const [session, setSession] = useState<SessionState>(defaultSession);\n\n  // Audio engine refs — shared across all tabs\n  const audioCtxRef = useRef<AudioContext | null>(null);\n  // Binaural\n  const leftOscRef = useRef<OscillatorNode | null>(null);\n  const rightOscRef = useRef<OscillatorNode | null>(null);\n  const binauralGainRef = useRef<GainNode | null>(null);\n  // Ocean\n  const oceanNoiseRef = useRef<AudioBufferSourceNode | null>(null);\n  const oceanLfoRef = useRef<OscillatorNode | null>(null);\n  const oceanGainRef = useRef<GainNode | null>(null);\n  // Clock\n  const clockTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const clockRunningRef = useRef(false);\n  const nextTickRef = useRef(0);\n  const nextPolyRef = useRef(0);\n  // Master analyser for waveform\n  const analyserRef = useRef<AnalyserNode | null>(null);\n  const masterGainRef = useRef<GainNode | null>(null);\n  // Wisdom timer\n  const wisdomTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);\n\n  const getCtx = useCallback(() => {\n    if (!audioCtxRef.current) {\n      const Ctx = window.AudioContext || (window as any).webkitAudioContext;\n      audioCtxRef.current = new Ctx();\n    }\n    const ctx = audioCtxRef.current;\n    if (ctx.state === \"suspended\") ctx.resume();\n\n    // Setup master chain once — limiter gain so all layers mix without clipping\n    if (!analyserRef.current) {\n      const analyser = ctx.createAnalyser();\n      analyser.fftSize = 2048;\n      const limiter = ctx.createGain();\n      limiter.gain.value = 0.85;\n      const master = ctx.createGain();\n      master.gain.value = 1;\n      master.connect(limiter);\n      limiter.connect(analyser);\n      analyser.connect(ctx.destination);\n      analyserRef.current = analyser;\n      masterGainRef.current = master;\n    }\n    return ctx;\n  }, []);\n\n  // ── START BINAURAL ────────────────────────────────────────────────────────\n  const startBinaural = useCallback((ctx: AudioContext, s: SessionState) => {\n    if (leftOscRef.current) { leftOscRef.current.stop(); leftOscRef.current.disconnect(); }\n    if (rightOscRef.current) { rightOscRef.current.stop(); rightOscRef.current.disconnect(); }\n\n    const left = ctx.createOscillator();\n    const right = ctx.createOscillator();\n    const lp = ctx.createStereoPanner(); lp.pan.value = -1;\n    const rp = ctx.createStereoPanner(); rp.pan.value = 1;\n    const gain = ctx.createGain();\n    gain.gain.setValueAtTime(0, ctx.currentTime);\n    gain.gain.linearRampToValueAtTime(0.38, ctx.currentTime + 1.5);\n\n    left.connect(lp); right.connect(rp);\n    lp.connect(gain); rp.connect(gain);\n    gain.connect(masterGainRef.current!);\n\n    left.frequency.value = s.baseFreq;\n    right.frequency.value = s.baseFreq + s.beatFreq;\n    left.start(); right.start();\n    leftOscRef.current = left;\n    rightOscRef.current = right;\n    binauralGainRef.current = gain;\n  }, []);\n\n  const stopBinaural = useCallback(() => {\n    leftOscRef.current?.stop(); leftOscRef.current?.disconnect();\n    rightOscRef.current?.stop(); rightOscRef.current?.disconnect();\n    leftOscRef.current = null; rightOscRef.current = null;\n  }, []);\n\n  // ── START OCEAN ───────────────────────────────────────────────────────────\n  function makeBrown(ctx: AudioContext) {\n    const size = ctx.sampleRate * 4;\n    const buf = ctx.createBuffer(1, size, ctx.sampleRate);\n    const out = buf.getChannelData(0);\n    let last = 0;\n    for (let i = 0; i < size; i++) {\n      const w = Math.random() * 2 - 1;\n      out[i] = (last + 0.02 * w) / 1.02; last = out[i]; out[i] *= 3.5;\n    }\n    return buf;\n  }\n\n  const startOcean = useCallback((ctx: AudioContext, s: SessionState) => {\n    if (oceanNoiseRef.current) { oceanNoiseRef.current.stop(); oceanNoiseRef.current.disconnect(); }\n    if (oceanLfoRef.current) { oceanLfoRef.current.stop(); oceanLfoRef.current.disconnect(); }\n\n    const master = ctx.createGain(); master.gain.value = 0.42;\n    master.connect(masterGainRef.current!);\n\n    const waveGain = ctx.createGain(); waveGain.gain.value = 0.48;\n    waveGain.connect(master);\n\n    const lfo = ctx.createOscillator(); lfo.type = \"sine\";\n    lfo.frequency.value = s.breathRate / 60;\n    const lfoG = ctx.createGain(); lfoG.gain.value = 0.5;\n    lfo.connect(lfoG); lfoG.connect(waveGain.gain); lfo.start();\n\n    const noise = ctx.createBufferSource();\n    noise.buffer = makeBrown(ctx); noise.loop = true;\n    noise.connect(waveGain); noise.start();\n\n    oceanNoiseRef.current = noise;\n    oceanLfoRef.current = lfo;\n    oceanGainRef.current = master;\n  }, []);\n\n  const stopOcean = useCallback(() => {\n    oceanNoiseRef.current?.stop(); oceanNoiseRef.current?.disconnect();\n    oceanLfoRef.current?.stop(); oceanLfoRef.current?.disconnect();\n    oceanGainRef.current?.disconnect();\n    oceanNoiseRef.current = null; oceanLfoRef.current = null;\n  }, []);\n\n  // ── CLOCK SCHEDULER ───────────────────────────────────────────────────────\n  const sessionRef = useRef(session);\n  sessionRef.current = session;\n\n  const scheduleClock = useCallback(() => {\n    const ctx = audioCtxRef.current;\n    if (!ctx || !masterGainRef.current || !clockRunningRef.current) return;\n    const s = sessionRef.current;\n    const ahead = 0.1;\n\n    while (nextTickRef.current < ctx.currentTime + ahead) {\n      const t = nextTickRef.current;\n      const osc = ctx.createOscillator(); const g = ctx.createGain();\n      osc.connect(g); g.connect(masterGainRef.current);\n      osc.type = \"sine\"; osc.frequency.setValueAtTime(900, t); osc.frequency.exponentialRampToValueAtTime(0.01, t + 0.06);\n      g.gain.setValueAtTime(0.28, t); g.gain.exponentialRampToValueAtTime(0.001, t + 0.06);\n      osc.start(t); osc.stop(t + 0.07);\n      nextTickRef.current += s.tickSpeed / 1000;\n    }\n    while (nextPolyRef.current < ctx.currentTime + ahead) {\n      const t = nextPolyRef.current;\n      const osc = ctx.createOscillator(); const g = ctx.createGain();\n      osc.connect(g); g.connect(masterGainRef.current);\n      osc.type = \"triangle\"; osc.frequency.setValueAtTime(260, t); osc.frequency.linearRampToValueAtTime(80, t + 0.4);\n      g.gain.setValueAtTime(0.38, t); g.gain.exponentialRampToValueAtTime(0.001, t + 0.4);\n      osc.start(t); osc.stop(t + 0.4);\n      nextPolyRef.current += s.polySpeed;\n    }\n    if (clockRunningRef.current) clockTimerRef.current = setTimeout(scheduleClock, 25);\n  }, []);\n\n  const startClock = useCallback((ctx: AudioContext) => {\n    if (clockTimerRef.current) clearTimeout(clockTimerRef.current);\n    clockRunningRef.current = true;\n    nextTickRef.current = ctx.currentTime + 0.05;\n    nextPolyRef.current = ctx.currentTime + 0.05;\n    scheduleClock();\n  }, [scheduleClock]);\n\n  const stopClock = useCallback(() => {\n    clockRunningRef.current = false;\n    if (clockTimerRef.current) clearTimeout(clockTimerRef.current);\n    clockTimerRef.current = null;\n  }, []);\n\n  // ── WISDOM SPEAKER ────────────────────────────────────────────────────────\n  const speakWisdom = useCallback(async (quotes: any[], voice: string) => {\n    const enabled = quotes.filter((q: any) => q.enabled);\n    if (!enabled.length) return;\n    const q = enabled[Math.floor(Math.random() * enabled.length)];\n\n    try {\n      const r = await fetch(\"/api/tts\", {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify({ text: q.text, voice }),\n      });\n      if (!r.ok) return;\n      const blob = await r.blob();\n\n      // Apply reverb via Web Audio\n      const ctx = getCtx();\n      const arrayBuf = await blob.arrayBuffer();\n      const decoded = await ctx.decodeAudioData(arrayBuf);\n      const src = ctx.createBufferSource();\n      src.buffer = decoded;\n\n      // Convolver for reverb\n      const convolver = ctx.createConvolver();\n      const reverbLen = ctx.sampleRate * 2.5;\n      const reverbBuf = ctx.createBuffer(2, reverbLen, ctx.sampleRate);\n      for (let ch = 0; ch < 2; ch++) {\n        const d = reverbBuf.getChannelData(ch);\n        for (let i = 0; i < reverbLen; i++) d[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / reverbLen, 2);\n      }\n      convolver.buffer = reverbBuf;\n\n      const dryGain = ctx.createGain(); dryGain.gain.value = 0.6;\n      const wetGain = ctx.createGain(); wetGain.gain.value = 0.25;\n\n      src.connect(dryGain); dryGain.connect(masterGainRef.current!);\n      src.connect(convolver); convolver.connect(wetGain); wetGain.connect(masterGainRef.current!);\n      src.start();\n    } catch (e) { console.error(\"TTS error\", e); }\n  }, [getCtx]);\n\n  // ── MASTER PLAY / STOP ────────────────────────────────────────────────────\n  const masterPlay = useCallback(async () => {\n    const ctx = getCtx();\n    const s = sessionRef.current;\n\n    if (s.binauralOn) startBinaural(ctx, s);\n    if (s.oceanOn) startOcean(ctx, s);\n    if (s.clockOn) startClock(ctx);\n\n    if (s.wisdomOn) {\n      try {\n        const r = await fetch(\"/api/quotes\");\n        const quotes = await r.json();\n        speakWisdom(quotes, s.wisdomVoice);\n        wisdomTimerRef.current = setInterval(async () => {\n          const r2 = await fetch(\"/api/quotes\");\n          const q2 = await r2.json();\n          speakWisdom(q2, sessionRef.current.wisdomVoice);\n        }, s.wisdomIntervalMin * 60 * 1000);\n      } catch (e) { console.error(\"Wisdom fetch error\", e); }\n    }\n\n    setSession(prev => ({ ...prev, playing: true }));\n  }, [getCtx, startBinaural, startOcean, startClock, speakWisdom]);\n\n  const masterStop = useCallback(() => {\n    stopBinaural();\n    stopOcean();\n    stopClock();\n    if (wisdomTimerRef.current) clearInterval(wisdomTimerRef.current);\n    wisdomTimerRef.current = null;\n    setSession(prev => ({ ...prev, playing: false }));\n  }, [stopBinaural, stopOcean, stopClock]);\n\n  const toggleMaster = useCallback(() => {\n    if (session.playing) masterStop();\n    else masterPlay();\n  }, [session.playing, masterPlay, masterStop]);\n\n  // Update binaural in real-time when params change while playing\n  useEffect(() => {\n    if (session.playing && session.binauralOn && leftOscRef.current && rightOscRef.current && audioCtxRef.current) {\n      const ctx = audioCtxRef.current;\n      leftOscRef.current.frequency.setTargetAtTime(session.baseFreq, ctx.currentTime, 0.1);\n      rightOscRef.current.frequency.setTargetAtTime(session.baseFreq + session.beatFreq, ctx.currentTime, 0.1);\n    }\n  }, [session.baseFreq, session.beatFreq]);\n\n  // Update ocean LFO in real-time\n  useEffect(() => {\n    if (session.playing && session.oceanOn && oceanLfoRef.current && audioCtxRef.current) {\n      oceanLfoRef.current.frequency.setTargetAtTime(session.breathRate / 60, audioCtxRef.current.currentTime, 0.5);\n    }\n  }, [session.breathRate]);\n\n  // Restart clock if speed changes while playing\n  useEffect(() => {\n    if (session.playing && session.clockOn && audioCtxRef.current) {\n      stopClock();\n      startClock(audioCtxRef.current);\n    }\n  }, [session.tickSpeed, session.polySpeed]);\n\n  // React to layer pills while playing — start/stop each layer independently\n  useEffect(() => {\n    if (!session.playing || !audioCtxRef.current) return;\n    if (session.clockOn) startClock(audioCtxRef.current);\n    else stopClock();\n  }, [session.clockOn]);\n\n  useEffect(() => {\n    if (!session.playing || !audioCtxRef.current) return;\n    if (session.binauralOn) startBinaural(audioCtxRef.current, sessionRef.current);\n    else stopBinaural();\n  }, [session.binauralOn]);\n\n  useEffect(() => {\n    if (!session.playing || !audioCtxRef.current) return;\n    if (session.oceanOn) startOcean(audioCtxRef.current, sessionRef.current);\n    else stopOcean();\n  }, [session.oceanOn]);\n\n  useEffect(() => {\n    if (!session.playing) return;\n    if (!session.wisdomOn) {\n      if (wisdomTimerRef.current) { clearInterval(wisdomTimerRef.current); wisdomTimerRef.current = null; }\n      return;\n    }\n    let cancelled = false;\n    const intervalMin = sessionRef.current.wisdomIntervalMin;\n    (async () => {\n      try {\n        const r = await fetch(\"/api/quotes\");\n        if (cancelled) return;\n        const quotes = await r.json();\n        if (cancelled) return;\n        speakWisdom(quotes, sessionRef.current.wisdomVoice);\n        if (cancelled) return;\n        wisdomTimerRef.current = setInterval(async () => {\n          if (!sessionRef.current.wisdomOn) return;\n          const r2 = await fetch(\"/api/quotes\");\n          const q2 = await r2.json();\n          speakWisdom(q2, sessionRef.current.wisdomVoice);\n        }, intervalMin * 60 * 1000);\n      } catch (e) { if (!cancelled) console.error(\"Wisdom fetch error\", e); }\n    })();\n    return () => { cancelled = true; if (wisdomTimerRef.current) clearInterval(wisdomTimerRef.current); wisdomTimerRef.current = null; };\n  }, [session.wisdomOn, session.wisdomIntervalMin]);\n\n  useEffect(() => () => { masterStop(); }, []);\n\n  const NAV: { id: Tab; label: string; accent: string; icon: keyof typeof Icons }[] = [\n    { id: \"timeline\", label: \"FLOW\",   accent: \"var(--accent-violet)\", icon: \"Timeline\" },\n    { id: \"binaural\", label: \"BEATS\",  accent: \"var(--accent-blue)\",   icon: \"Waves\"    },\n    { id: \"ocean\",    label: \"OCEAN\",  accent: \"var(--accent-cyan)\",   icon: \"Ocean\"    },\n    { id: \"wisdom\",   label: \"WISDOM\", accent: \"var(--accent-amber)\",  icon: \"Quote\"    },\n    { id: \"clock\",    label: \"CLOCK\",  accent: \"var(--accent-green)\",  icon: \"Clock\"    },\n  ];\n\n  const activeAccent = NAV.find(n => n.id === tab)?.accent ?? \"var(--accent-blue)\";\n\n  return (\n    <div className=\"app-root\">\n      <style>{`\n        @import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');\n        :root {\n          --bg:#0d1117; --bg2:#161b22; --bg3:#1c2330;\n          --border:rgba(255,255,255,0.06); --border2:rgba(255,255,255,0.12);\n          --text:#c9d1d9; --text-dim:#6e7681; --text-bright:#f0f6fc;\n          --accent-blue:#58a6ff; --accent-cyan:#39d0d8;\n          --accent-violet:#bc8cff; --accent-amber:#e3b341;\n          --accent-green:#3fb950; --accent-rose:#f85149;\n        }\n        *{box-sizing:border-box;margin:0;padding:0;}\n        body{background:var(--bg);color:var(--text);font-family:'Space Mono','Courier New',monospace;-webkit-font-smoothing:antialiased;}\n        .app-root{min-height:100dvh;display:flex;justify-content:center;background:var(--bg);}\n        .app-shell{width:100%;max-width:430px;display:flex;flex-direction:column;height:100dvh;border-left:1px solid var(--border2);border-right:1px solid var(--border2);}\n        .card{background:var(--bg2);border:1px solid var(--border2);outline:1px solid var(--border);outline-offset:3px;border-radius:14px;padding:16px;}\n        .card-sm{background:var(--bg2);border:1px solid var(--border2);outline:1px solid var(--border);outline-offset:2px;border-radius:10px;padding:10px 12px;}\n        .scroll-area{overflow-y:auto;}\n        .scroll-area::-webkit-scrollbar{width:2px;}\n        .scroll-area::-webkit-scrollbar-thumb{background:var(--border2);border-radius:1px;}\n        .nav-bar{display:flex;padding:6px;gap:3px;background:var(--bg2);border-top:1px solid var(--border2);}\n        .nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:7px 2px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--text-dim);font-family:inherit;font-size:8px;font-weight:700;letter-spacing:0.08em;cursor:pointer;transition:all 0.15s;}\n        .nav-btn.active{background:var(--bg3);border:1px solid var(--border2);outline:1px solid var(--border);outline-offset:1px;}\n        .nav-btn:not(.active):hover{color:var(--text);}\n        .preset-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;}\n        .preset-btn{background:var(--bg2);border:1px solid var(--border2);outline:1px solid var(--border);outline-offset:2px;border-radius:10px;padding:9px 8px;cursor:pointer;font-family:inherit;color:var(--text-dim);transition:all 0.15s;text-align:left;}\n        .preset-btn.active{background:var(--bg3);}\n        .preset-name{font-size:9px;font-weight:700;letter-spacing:0.07em;display:block;margin-bottom:3px;}\n        .preset-hz{font-size:9px;opacity:0.5;display:block;}\n        .preset-wave{font-size:8px;margin-top:2px;display:block;opacity:0.35;letter-spacing:0.04em;}\n        .noise-btn{background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:4px 10px;font-family:inherit;font-size:9px;font-weight:700;color:var(--text-dim);cursor:pointer;letter-spacing:0.06em;transition:all 0.15s;}\n        .label-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;}\n        .label-key{font-size:9px;font-weight:700;letter-spacing:0.1em;color:var(--text-dim);text-transform:uppercase;}\n        .label-val{font-size:11px;font-weight:700;}\n        .section-title{font-size:17px;font-weight:700;color:var(--text-bright);letter-spacing:-0.01em;}\n        .section-sub{font-size:9px;color:var(--text-dim);letter-spacing:0.08em;margin-top:2px;}\n        /* master play button — light/white, centered in toolbar */\n        .master-play{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.25);outline:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;transition:all 0.2s;font-family:inherit;flex-shrink:0;flex:0 0 56px;}\n        .master-play:hover{background:rgba(255,255,255,0.22);}\n        .master-play.active{background:var(--play-color);border-color:var(--play-color);color:#fff;box-shadow:0 0 20px color-mix(in srgb,var(--play-color) 50%,transparent);}\n        /* module toggle pill */\n        .mod-pill{display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:20px;border:1px solid var(--border);cursor:pointer;font-family:inherit;font-size:9px;font-weight:700;letter-spacing:0.07em;color:var(--text-dim);background:var(--bg2);transition:all 0.15s;white-space:nowrap;}\n        .mod-pill.on{border-color:var(--pill-color);color:var(--pill-color);}\n        .mod-dot{width:5px;height:5px;border-radius:50%;background:currentColor;}\n        select{background:var(--bg);border:1px solid var(--border2);border-radius:6px;color:var(--text);font-family:inherit;font-size:10px;padding:6px 8px;outline:none;width:100%;}\n        select option{background:var(--bg2);}\n        input[type=\"number\"],input[type=\"text\"],textarea{background:var(--bg);border:1px solid var(--border2);border-radius:6px;color:var(--text);font-family:inherit;font-size:11px;padding:7px 9px;outline:none;width:100%;}\n        input::placeholder,textarea::placeholder{color:var(--text-dim);}\n        .slider-wrap{position:relative;height:18px;display:flex;align-items:center;}\n        .slider-track{position:absolute;width:100%;height:3px;border-radius:2px;background:var(--bg3);border:1px solid var(--border);}\n        .slider-fill{position:absolute;height:3px;border-radius:2px;pointer-events:none;}\n        .slider-thumb{position:absolute;width:100%;z-index:2;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none;height:18px;}\n        .slider-thumb::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--bg2);border:1px solid var(--border2);outline:1px solid var(--border);outline-offset:2px;cursor:pointer;}\n        .slider-thumb::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--bg2);border:1px solid var(--border2);cursor:pointer;}\n        @keyframes pulse{0%,100%{opacity:1}50%{opacity:0.3}}\n        .live-dot{animation:pulse 2s ease-in-out infinite;}\n      `}</style>\n\n      <div className=\"app-shell\">\n        {/* ── HEADER ── */}\n        <header style={{ padding:\"12px 16px 10px\", borderBottom:\"1px solid var(--border2)\", background:\"var(--bg2)\", flexShrink:0 }}>\n          <span style={{ fontSize:13, fontWeight:700, letterSpacing:\"0.14em\", color:\"var(--text-bright)\" }}>\n            <span style={{ color:\"var(--accent-blue)\" }}>brain</span>\n          </span>\n          <div style={{ fontSize:8, color:\"var(--text-dim)\", marginTop:4, letterSpacing:\"0.06em\" }}>\n            Tomaso Valmax · Toggle layers in each tab\n          </div>\n        </header>\n\n        {/* ── WAVEFORM ── */}\n        <Waveform analyser={analyserRef.current} playing={session.playing} accent={activeAccent} />\n\n        {/* ── ACTIVE SEGMENT BADGE ── */}\n        {session.activeSegment && session.playing && (\n          <div style={{ padding:\"4px 16px\", background:\"var(--bg2)\", borderBottom:\"1px solid var(--border)\", display:\"flex\", gap:8, alignItems:\"center\" }}>\n            <div style={{ width:6, height:6, borderRadius:\"50%\", background:session.activeSegment.color }} />\n            <span style={{ fontSize:9, letterSpacing:\"0.1em\", color:\"var(--text-dim)\" }}>\n              {session.activeSegment.label.toUpperCase()} · {session.activeSegment.brainwave.toUpperCase()}\n            </span>\n          </div>\n        )}\n\n        {/* ── MAIN CONTENT ── */}\n        <main className=\"scroll-area\" style={{ flex:1, padding:\"16px 14px 120px\" }}>\n          {tab === \"timeline\"  && <TimelineTab session={session} setSession={setSession} masterPlaying={session.playing} masterPlay={masterPlay} masterStop={masterStop} />}\n          {tab === \"binaural\"  && <BinauralTab session={session} setSession={setSession} />}\n          {tab === \"ocean\"     && <OceanPulseTab session={session} setSession={setSession} />}\n          {tab === \"wisdom\"    && <TTSWisdomTab session={session} setSession={setSession} speakWisdom={speakWisdom} />}\n          {tab === \"clock\"     && <ClockTab session={session} setSession={setSession} />}\n        </main>\n\n        {/* ── BOTTOM TOOLBAR (mobile) — play centered ── */}\n        <nav className=\"nav-bar\" style={{ position:\"absolute\", bottom:0, left:0, right:0, flexShrink:0, display:\"flex\", alignItems:\"center\", justifyContent:\"space-between\", padding:\"8px 6px\", gap:4 }}>\n          <div style={{ flex: 1, display: \"flex\", gap: 4 }}>\n            {NAV.slice(0, 2).map(({ id, label, accent, icon }) => {\n              const Icon = Icons[icon] as () => JSX.Element;\n              const active = tab === id;\n              return (\n                <button key={id} onClick={() => setTab(id)}\n                  className={`nav-btn${active ? \" active\" : \"\"}`}\n                  style={{ color: active ? accent : undefined, flex: 1 }}>\n                  <Icon />\n                  {label}\n                </button>\n              );\n            })}\n          </div>\n          <button\n            onClick={toggleMaster}\n            className={`master-play${session.playing ? \" active\" : \"\"}`}\n            style={{ \"--play-color\": \"var(--accent-green)\" } as React.CSSProperties}>\n            {session.playing\n              ? <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"2\"/></svg>\n              : <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"5 3 19 12 5 21 5 3\"/></svg>\n            }\n          </button>\n          <div style={{ flex: 1, display: \"flex\", gap: 4 }}>\n            {NAV.slice(2).map(({ id, label, accent, icon }) => {\n              const Icon = Icons[icon] as () => JSX.Element;\n              const active = tab === id;\n              return (\n                <button key={id} onClick={() => setTab(id)}\n                  className={`nav-btn${active ? \" active\" : \"\"}`}\n                  style={{ color: active ? accent : undefined, flex: 1 }}>\n                  <Icon />\n                  {label}\n                </button>\n              );\n            })}\n          </div>\n        </nav>\n      </div>\n    </div>\n  );\n}\n",["D",1773361893052],68,{"_105":453,"_165":147,"_162":341,"_97":340,"_173":454,"_171":191,"_102":218,"_164":236,"_107":455,"_166":456,"_175":-5},"7af16f18-1e73-11f1-970f-42dde27851f2","import React, { useState, useRef, useEffect, useCallback } from \"react\";\nimport { BinauralTab } from \"https://esm.town/v/all/brain/frontend/components/BinauralTab.tsx\";\nimport { OceanPulseTab } from \"https://esm.town/v/all/brain/frontend/components/OceanPulseTab.tsx\";\nimport { TimelineTab } from \"https://esm.town/v/all/brain/frontend/components/TimelineTab.tsx\";\nimport { TTSWisdomTab } from \"https://esm.town/v/all/brain/frontend/components/TTSWisdomTab.tsx\";\nimport { ClockTab } from \"https://esm.town/v/all/brain/frontend/components/ClockTab.tsx\";\nimport { Icons } from \"https://esm.town/v/all/brain/frontend/components/Icons.tsx\";\nimport { Waveform } from \"https://esm.town/v/all/brain/frontend/components/Waveform.tsx\";\n\ntype Tab = \"timeline\" | \"ocean\" | \"wisdom\" | \"clock\" | \"binaural\";\n\n// ── MASTER SESSION STATE ────────────────────────────────────────────────────\nexport interface SessionState {\n  playing: boolean;\n  // binaural\n  binauralOn: boolean;\n  baseFreq: number;\n  beatFreq: number;\n  // ocean\n  oceanOn: boolean;\n  breathRate: number;\n  // clock\n  clockOn: boolean;\n  tickSpeed: number;\n  polySpeed: number;\n  // wisdom\n  wisdomOn: boolean;\n  wisdomIntervalMin: number;\n  wisdomVoice: string;\n  // active timeline segment info\n  activeSegment: { label: string; brainwave: string; color: string } | null;\n}\n\nconst defaultSession: SessionState = {\n  playing: false,\n  binauralOn: true,\n  baseFreq: 200,\n  beatFreq: 10,\n  oceanOn: false,\n  breathRate: 6,\n  clockOn: false,\n  tickSpeed: 1000,\n  polySpeed: 33,\n  wisdomOn: false,\n  wisdomIntervalMin: 10,\n  wisdomVoice: \"troy\",\n  activeSegment: null,\n};\n\nexport default function App() {\n  const [tab, setTab] = useState<Tab>(\"timeline\");\n  const [session, setSession] = useState<SessionState>(defaultSession);\n\n  // Audio engine refs — shared across all tabs\n  const audioCtxRef = useRef<AudioContext | null>(null);\n  // Binaural\n  const leftOscRef = useRef<OscillatorNode | null>(null);\n  const rightOscRef = useRef<OscillatorNode | null>(null);\n  const binauralGainRef = useRef<GainNode | null>(null);\n  // Ocean\n  const oceanNoiseRef = useRef<AudioBufferSourceNode | null>(null);\n  const oceanLfoRef = useRef<OscillatorNode | null>(null);\n  const oceanGainRef = useRef<GainNode | null>(null);\n  // Clock\n  const clockTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const clockRunningRef = useRef(false);\n  const nextTickRef = useRef(0);\n  const nextPolyRef = useRef(0);\n  // Master analyser for waveform\n  const analyserRef = useRef<AnalyserNode | null>(null);\n  const masterGainRef = useRef<GainNode | null>(null);\n  // Wisdom timer\n  const wisdomTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);\n\n  const getCtx = useCallback(() => {\n    if (!audioCtxRef.current) {\n      const Ctx = window.AudioContext || (window as any).webkitAudioContext;\n      audioCtxRef.current = new Ctx();\n    }\n    const ctx = audioCtxRef.current;\n    if (ctx.state === \"suspended\") ctx.resume();\n\n    // Setup master chain once — limiter gain so all layers mix without clipping\n    if (!analyserRef.current) {\n      const analyser = ctx.createAnalyser();\n      analyser.fftSize = 2048;\n      const limiter = ctx.createGain();\n      limiter.gain.value = 0.85;\n      const master = ctx.createGain();\n      master.gain.value = 1;\n      master.connect(limiter);\n      limiter.connect(analyser);\n      analyser.connect(ctx.destination);\n      analyserRef.current = analyser;\n      masterGainRef.current = master;\n    }\n    return ctx;\n  }, []);\n\n  // ── START BINAURAL ────────────────────────────────────────────────────────\n  const startBinaural = useCallback((ctx: AudioContext, s: SessionState) => {\n    if (leftOscRef.current) { leftOscRef.current.stop(); leftOscRef.current.disconnect(); }\n    if (rightOscRef.current) { rightOscRef.current.stop(); rightOscRef.current.disconnect(); }\n\n    const left = ctx.createOscillator();\n    const right = ctx.createOscillator();\n    const lp = ctx.createStereoPanner(); lp.pan.value = -1;\n    const rp = ctx.createStereoPanner(); rp.pan.value = 1;\n    const gain = ctx.createGain();\n    gain.gain.setValueAtTime(0, ctx.currentTime);\n    gain.gain.linearRampToValueAtTime(0.38, ctx.currentTime + 1.5);\n\n    left.connect(lp); right.connect(rp);\n    lp.connect(gain); rp.connect(gain);\n    gain.connect(masterGainRef.current!);\n\n    left.frequency.value = s.baseFreq;\n    right.frequency.value = s.baseFreq + s.beatFreq;\n    left.start(); right.start();\n    leftOscRef.current = left;\n    rightOscRef.current = right;\n    binauralGainRef.current = gain;\n  }, []);\n\n  const stopBinaural = useCallback(() => {\n    leftOscRef.current?.stop(); leftOscRef.current?.disconnect();\n    rightOscRef.current?.stop(); rightOscRef.current?.disconnect();\n    leftOscRef.current = null; rightOscRef.current = null;\n  }, []);\n\n  // ── START OCEAN ───────────────────────────────────────────────────────────\n  function makeBrown(ctx: AudioContext) {\n    const size = ctx.sampleRate * 4;\n    const buf = ctx.createBuffer(1, size, ctx.sampleRate);\n    const out = buf.getChannelData(0);\n    let last = 0;\n    for (let i = 0; i < size; i++) {\n      const w = Math.random() * 2 - 1;\n      out[i] = (last + 0.02 * w) / 1.02; last = out[i]; out[i] *= 3.5;\n    }\n    return buf;\n  }\n\n  const startOcean = useCallback((ctx: AudioContext, s: SessionState) => {\n    if (oceanNoiseRef.current) { oceanNoiseRef.current.stop(); oceanNoiseRef.current.disconnect(); }\n    if (oceanLfoRef.current) { oceanLfoRef.current.stop(); oceanLfoRef.current.disconnect(); }\n\n    const master = ctx.createGain(); master.gain.value = 0.42;\n    master.connect(masterGainRef.current!);\n\n    const waveGain = ctx.createGain(); waveGain.gain.value = 0.48;\n    waveGain.connect(master);\n\n    const lfo = ctx.createOscillator(); lfo.type = \"sine\";\n    lfo.frequency.value = s.breathRate / 60;\n    const lfoG = ctx.createGain(); lfoG.gain.value = 0.5;\n    lfo.connect(lfoG); lfoG.connect(waveGain.gain); lfo.start();\n\n    const noise = ctx.createBufferSource();\n    noise.buffer = makeBrown(ctx); noise.loop = true;\n    noise.connect(waveGain); noise.start();\n\n    oceanNoiseRef.current = noise;\n    oceanLfoRef.current = lfo;\n    oceanGainRef.current = master;\n  }, []);\n\n  const stopOcean = useCallback(() => {\n    oceanNoiseRef.current?.stop(); oceanNoiseRef.current?.disconnect();\n    oceanLfoRef.current?.stop(); oceanLfoRef.current?.disconnect();\n    oceanGainRef.current?.disconnect();\n    oceanNoiseRef.current = null; oceanLfoRef.current = null;\n  }, []);\n\n  // ── CLOCK SCHEDULER ───────────────────────────────────────────────────────\n  const sessionRef = useRef(session);\n  sessionRef.current = session;\n\n  const scheduleClock = useCallback(() => {\n    const ctx = audioCtxRef.current;\n    if (!ctx || !masterGainRef.current || !clockRunningRef.current) return;\n    const s = sessionRef.current;\n    const ahead = 0.1;\n\n    while (nextTickRef.current < ctx.currentTime + ahead) {\n      const t = nextTickRef.current;\n      const osc = ctx.createOscillator(); const g = ctx.createGain();\n      osc.connect(g); g.connect(masterGainRef.current);\n      osc.type = \"sine\"; osc.frequency.setValueAtTime(900, t); osc.frequency.exponentialRampToValueAtTime(0.01, t + 0.06);\n      g.gain.setValueAtTime(0.28, t); g.gain.exponentialRampToValueAtTime(0.001, t + 0.06);\n      osc.start(t); osc.stop(t + 0.07);\n      nextTickRef.current += s.tickSpeed / 1000;\n    }\n    while (nextPolyRef.current < ctx.currentTime + ahead) {\n      const t = nextPolyRef.current;\n      const osc = ctx.createOscillator(); const g = ctx.createGain();\n      osc.connect(g); g.connect(masterGainRef.current);\n      osc.type = \"triangle\"; osc.frequency.setValueAtTime(260, t); osc.frequency.linearRampToValueAtTime(80, t + 0.4);\n      g.gain.setValueAtTime(0.38, t); g.gain.exponentialRampToValueAtTime(0.001, t + 0.4);\n      osc.start(t); osc.stop(t + 0.4);\n      nextPolyRef.current += s.polySpeed;\n    }\n    if (clockRunningRef.current) clockTimerRef.current = setTimeout(scheduleClock, 25);\n  }, []);\n\n  const startClock = useCallback((ctx: AudioContext) => {\n    if (clockTimerRef.current) clearTimeout(clockTimerRef.current);\n    clockRunningRef.current = true;\n    nextTickRef.current = ctx.currentTime + 0.05;\n    nextPolyRef.current = ctx.currentTime + 0.05;\n    scheduleClock();\n  }, [scheduleClock]);\n\n  const stopClock = useCallback(() => {\n    clockRunningRef.current = false;\n    if (clockTimerRef.current) clearTimeout(clockTimerRef.current);\n    clockTimerRef.current = null;\n  }, []);\n\n  // ── WISDOM SPEAKER ────────────────────────────────────────────────────────\n  const speakWisdom = useCallback(async (quotes: any[], voice: string) => {\n    const enabled = quotes.filter((q: any) => q.enabled);\n    if (!enabled.length) return;\n    const q = enabled[Math.floor(Math.random() * enabled.length)];\n\n    try {\n      const r = await fetch(\"/api/tts\", {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify({ text: q.text, voice }),\n      });\n      if (!r.ok) return;\n      const blob = await r.blob();\n\n      // Apply reverb via Web Audio\n      const ctx = getCtx();\n      const arrayBuf = await blob.arrayBuffer();\n      const decoded = await ctx.decodeAudioData(arrayBuf);\n      const src = ctx.createBufferSource();\n      src.buffer = decoded;\n\n      // Convolver for reverb\n      const convolver = ctx.createConvolver();\n      const reverbLen = ctx.sampleRate * 2.5;\n      const reverbBuf = ctx.createBuffer(2, reverbLen, ctx.sampleRate);\n      for (let ch = 0; ch < 2; ch++) {\n        const d = reverbBuf.getChannelData(ch);\n        for (let i = 0; i < reverbLen; i++) d[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / reverbLen, 2);\n      }\n      convolver.buffer = reverbBuf;\n\n      const dryGain = ctx.createGain(); dryGain.gain.value = 0.6;\n      const wetGain = ctx.createGain(); wetGain.gain.value = 0.25;\n\n      src.connect(dryGain); dryGain.connect(masterGainRef.current!);\n      src.connect(convolver); convolver.connect(wetGain); wetGain.connect(masterGainRef.current!);\n      src.start();\n    } catch (e) { console.error(\"TTS error\", e); }\n  }, [getCtx]);\n\n  // ── MASTER PLAY / STOP ────────────────────────────────────────────────────\n  const masterPlay = useCallback(async () => {\n    const ctx = getCtx();\n    const s = sessionRef.current;\n\n    if (s.binauralOn) startBinaural(ctx, s);\n    if (s.oceanOn) startOcean(ctx, s);\n    if (s.clockOn) startClock(ctx);\n\n    if (s.wisdomOn) {\n      try {\n        const r = await fetch(\"/api/quotes\");\n        const quotes = await r.json();\n        speakWisdom(quotes, s.wisdomVoice);\n        wisdomTimerRef.current = setInterval(async () => {\n          const r2 = await fetch(\"/api/quotes\");\n          const q2 = await r2.json();\n          speakWisdom(q2, sessionRef.current.wisdomVoice);\n        }, s.wisdomIntervalMin * 60 * 1000);\n      } catch (e) { console.error(\"Wisdom fetch error\", e); }\n    }\n\n    setSession(prev => ({ ...prev, playing: true }));\n  }, [getCtx, startBinaural, startOcean, startClock, speakWisdom]);\n\n  const masterStop = useCallback(() => {\n    stopBinaural();\n    stopOcean();\n    stopClock();\n    if (wisdomTimerRef.current) clearInterval(wisdomTimerRef.current);\n    wisdomTimerRef.current = null;\n    setSession(prev => ({ ...prev, playing: false }));\n  }, [stopBinaural, stopOcean, stopClock]);\n\n  const toggleMaster = useCallback(() => {\n    if (session.playing) masterStop();\n    else masterPlay();\n  }, [session.playing, masterPlay, masterStop]);\n\n  // Update binaural in real-time when params change while playing\n  useEffect(() => {\n    if (session.playing && session.binauralOn && leftOscRef.current && rightOscRef.current && audioCtxRef.current) {\n      const ctx = audioCtxRef.current;\n      leftOscRef.current.frequency.setTargetAtTime(session.baseFreq, ctx.currentTime, 0.1);\n      rightOscRef.current.frequency.setTargetAtTime(session.baseFreq + session.beatFreq, ctx.currentTime, 0.1);\n    }\n  }, [session.baseFreq, session.beatFreq]);\n\n  // Update ocean LFO in real-time\n  useEffect(() => {\n    if (session.playing && session.oceanOn && oceanLfoRef.current && audioCtxRef.current) {\n      oceanLfoRef.current.frequency.setTargetAtTime(session.breathRate / 60, audioCtxRef.current.currentTime, 0.5);\n    }\n  }, [session.breathRate]);\n\n  // Restart clock if speed changes while playing\n  useEffect(() => {\n    if (session.playing && session.clockOn && audioCtxRef.current) {\n      stopClock();\n      startClock(audioCtxRef.current);\n    }\n  }, [session.tickSpeed, session.polySpeed]);\n\n  // React to layer pills while playing — start/stop each layer independently\n  useEffect(() => {\n    if (!session.playing || !audioCtxRef.current) return;\n    if (session.clockOn) startClock(audioCtxRef.current);\n    else stopClock();\n  }, [session.clockOn]);\n\n  useEffect(() => {\n    if (!session.playing || !audioCtxRef.current) return;\n    if (session.binauralOn) startBinaural(audioCtxRef.current, sessionRef.current);\n    else stopBinaural();\n  }, [session.binauralOn]);\n\n  useEffect(() => {\n    if (!session.playing || !audioCtxRef.current) return;\n    if (session.oceanOn) startOcean(audioCtxRef.current, sessionRef.current);\n    else stopOcean();\n  }, [session.oceanOn]);\n\n  useEffect(() => {\n    if (!session.playing) return;\n    if (!session.wisdomOn) {\n      if (wisdomTimerRef.current) { clearInterval(wisdomTimerRef.current); wisdomTimerRef.current = null; }\n      return;\n    }\n    let cancelled = false;\n    const intervalMin = sessionRef.current.wisdomIntervalMin;\n    (async () => {\n      try {\n        const r = await fetch(\"/api/quotes\");\n        if (cancelled) return;\n        const quotes = await r.json();\n        if (cancelled) return;\n        speakWisdom(quotes, sessionRef.current.wisdomVoice);\n        if (cancelled) return;\n        wisdomTimerRef.current = setInterval(async () => {\n          if (!sessionRef.current.wisdomOn) return;\n          const r2 = await fetch(\"/api/quotes\");\n          const q2 = await r2.json();\n          speakWisdom(q2, sessionRef.current.wisdomVoice);\n        }, intervalMin * 60 * 1000);\n      } catch (e) { if (!cancelled) console.error(\"Wisdom fetch error\", e); }\n    })();\n    return () => { cancelled = true; if (wisdomTimerRef.current) clearInterval(wisdomTimerRef.current); wisdomTimerRef.current = null; };\n  }, [session.wisdomOn, session.wisdomIntervalMin]);\n\n  useEffect(() => () => { masterStop(); }, []);\n\n  const NAV: { id: Tab; label: string; accent: string; icon: keyof typeof Icons }[] = [\n    { id: \"timeline\", label: \"FLOW\",   accent: \"var(--accent-violet)\", icon: \"Timeline\" },\n    { id: \"binaural\", label: \"BEATS\",  accent: \"var(--accent-blue)\",   icon: \"Waves\"    },\n    { id: \"ocean\",    label: \"OCEAN\",  accent: \"var(--accent-cyan)\",   icon: \"Ocean\"    },\n    { id: \"wisdom\",   label: \"WISDOM\", accent: \"var(--accent-amber)\",  icon: \"Quote\"    },\n    { id: \"clock\",    label: \"CLOCK\",  accent: \"var(--accent-green)\",  icon: \"Clock\"    },\n  ];\n\n  const activeAccent = NAV.find(n => n.id === tab)?.accent ?? \"var(--accent-blue)\";\n\n  return (\n    <div className=\"app-root\">\n      <style>{`\n        @import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');\n        :root {\n          --bg:#0d1117; --bg2:#161b22; --bg3:#1c2330;\n          --border:rgba(255,255,255,0.06); --border2:rgba(255,255,255,0.12);\n          --text:#c9d1d9; --text-dim:#6e7681; --text-bright:#f0f6fc;\n          --accent-blue:#58a6ff; --accent-cyan:#39d0d8;\n          --accent-violet:#bc8cff; --accent-amber:#e3b341;\n          --accent-green:#3fb950; --accent-rose:#f85149;\n        }\n        *{box-sizing:border-box;margin:0;padding:0;}\n        body{background:var(--bg);color:var(--text);font-family:'Space Mono','Courier New',monospace;-webkit-font-smoothing:antialiased;}\n        .app-root{min-height:100dvh;display:flex;justify-content:center;background:var(--bg);}\n        .app-shell{width:100%;max-width:430px;display:flex;flex-direction:column;height:100dvh;border-left:1px solid var(--border2);border-right:1px solid var(--border2);}\n        .card{background:var(--bg2);border:1px solid var(--border2);outline:1px solid var(--border);outline-offset:3px;border-radius:14px;padding:16px;}\n        .card-sm{background:var(--bg2);border:1px solid var(--border2);outline:1px solid var(--border);outline-offset:2px;border-radius:10px;padding:10px 12px;}\n        .scroll-area{overflow-y:auto;}\n        .scroll-area::-webkit-scrollbar{width:2px;}\n        .scroll-area::-webkit-scrollbar-thumb{background:var(--border2);border-radius:1px;}\n        .nav-bar{display:flex;padding:6px;gap:3px;background:var(--bg2);border-top:1px solid var(--border2);}\n        .nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:7px 2px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--text-dim);font-family:inherit;font-size:8px;font-weight:700;letter-spacing:0.08em;cursor:pointer;transition:all 0.15s;}\n        .nav-btn.active{background:var(--bg3);border:1px solid var(--border2);outline:1px solid var(--border);outline-offset:1px;}\n        .nav-btn:not(.active):hover{color:var(--text);}\n        .preset-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;}\n        .preset-btn{background:var(--bg2);border:1px solid var(--border2);outline:1px solid var(--border);outline-offset:2px;border-radius:10px;padding:9px 8px;cursor:pointer;font-family:inherit;color:var(--text-dim);transition:all 0.15s;text-align:left;}\n        .preset-btn.active{background:var(--bg3);}\n        .preset-name{font-size:9px;font-weight:700;letter-spacing:0.07em;display:block;margin-bottom:3px;}\n        .preset-hz{font-size:9px;opacity:0.5;display:block;}\n        .preset-wave{font-size:8px;margin-top:2px;display:block;opacity:0.35;letter-spacing:0.04em;}\n        .noise-btn{background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:4px 10px;font-family:inherit;font-size:9px;font-weight:700;color:var(--text-dim);cursor:pointer;letter-spacing:0.06em;transition:all 0.15s;}\n        .label-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;}\n        .label-key{font-size:9px;font-weight:700;letter-spacing:0.1em;color:var(--text-dim);text-transform:uppercase;}\n        .label-val{font-size:11px;font-weight:700;}\n        .section-title{font-size:17px;font-weight:700;color:var(--text-bright);letter-spacing:-0.01em;}\n        .section-sub{font-size:9px;color:var(--text-dim);letter-spacing:0.08em;margin-top:2px;}\n        /* master play button — light/white, centered in toolbar */\n        .master-play{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.25);outline:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;transition:all 0.2s;font-family:inherit;flex-shrink:0;flex:0 0 56px;}\n        .master-play:hover{background:rgba(255,255,255,0.22);}\n        .master-play.active{background:var(--play-color);border-color:var(--play-color);color:#fff;box-shadow:0 0 20px color-mix(in srgb,var(--play-color) 50%,transparent);}\n        /* module toggle pill */\n        .mod-pill{display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:20px;border:1px solid var(--border);cursor:pointer;font-family:inherit;font-size:9px;font-weight:700;letter-spacing:0.07em;color:var(--text-dim);background:var(--bg2);transition:all 0.15s;white-space:nowrap;}\n        .mod-pill.on{border-color:var(--pill-color);color:var(--pill-color);}\n        .mod-dot{width:5px;height:5px;border-radius:50%;background:currentColor;}\n        select{background:var(--bg);border:1px solid var(--border2);border-radius:6px;color:var(--text);font-family:inherit;font-size:10px;padding:6px 8px;outline:none;width:100%;}\n        select option{background:var(--bg2);}\n        input[type=\"number\"],input[type=\"text\"],textarea{background:var(--bg);border:1px solid var(--border2);border-radius:6px;color:var(--text);font-family:inherit;font-size:11px;padding:7px 9px;outline:none;width:100%;}\n        input::placeholder,textarea::placeholder{color:var(--text-dim);}\n        .slider-wrap{position:relative;height:18px;display:flex;align-items:center;}\n        .slider-track{position:absolute;width:100%;height:3px;border-radius:2px;background:var(--bg3);border:1px solid var(--border);}\n        .slider-fill{position:absolute;height:3px;border-radius:2px;pointer-events:none;}\n        .slider-thumb{position:absolute;width:100%;z-index:2;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none;height:18px;}\n        .slider-thumb::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--bg2);border:1px solid var(--border2);outline:1px solid var(--border);outline-offset:2px;cursor:pointer;}\n        .slider-thumb::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--bg2);border:1px solid var(--border2);cursor:pointer;}\n        @keyframes pulse{0%,100%{opacity:1}50%{opacity:0.3}}\n        .live-dot{animation:pulse 2s ease-in-out infinite;}\n      `}</style>\n\n      <div className=\"app-shell\">\n        {/* ── HEADER ── */}\n        <header style={{ padding:\"12px 16px 10px\", borderBottom:\"1px solid var(--border2)\", background:\"var(--bg2)\", flexShrink:0 }}>\n          <span style={{ fontSize:13, fontWeight:700, letterSpacing:\"0.14em\", color:\"var(--text-bright)\" }}>\n            NEURO<span style={{ color:\"var(--accent-blue)\" }}>SYNC</span>\n          </span>\n          <div style={{ fontSize:8, color:\"var(--text-dim)\", marginTop:4, letterSpacing:\"0.06em\" }}>\n            Toggle layers in each tab\n          </div>\n        </header>\n\n        {/* ── WAVEFORM ── */}\n        <Waveform analyser={analyserRef.current} playing={session.playing} accent={activeAccent} />\n\n        {/* ── ACTIVE SEGMENT BADGE ── */}\n        {session.activeSegment && session.playing && (\n          <div style={{ padding:\"4px 16px\", background:\"var(--bg2)\", borderBottom:\"1px solid var(--border)\", display:\"flex\", gap:8, alignItems:\"center\" }}>\n            <div style={{ width:6, height:6, borderRadius:\"50%\", background:session.activeSegment.color }} />\n            <span style={{ fontSize:9, letterSpacing:\"0.1em\", color:\"var(--text-dim)\" }}>\n              {session.activeSegment.label.toUpperCase()} · {session.activeSegment.brainwave.toUpperCase()}\n            </span>\n          </div>\n        )}\n\n        {/* ── MAIN CONTENT ── */}\n        <main className=\"scroll-area\" style={{ flex:1, padding:\"16px 14px 120px\" }}>\n          {tab === \"timeline\"  && <TimelineTab session={session} setSession={setSession} masterPlaying={session.playing} masterPlay={masterPlay} masterStop={masterStop} />}\n          {tab === \"binaural\"  && <BinauralTab session={session} setSession={setSession} />}\n          {tab === \"ocean\"     && <OceanPulseTab session={session} setSession={setSession} />}\n          {tab === \"wisdom\"    && <TTSWisdomTab session={session} setSession={setSession} speakWisdom={speakWisdom} />}\n          {tab === \"clock\"     && <ClockTab session={session} setSession={setSession} />}\n        </main>\n\n        {/* ── BOTTOM TOOLBAR (mobile) — play centered ── */}\n        <nav className=\"nav-bar\" style={{ position:\"absolute\", bottom:0, left:0, right:0, flexShrink:0, display:\"flex\", alignItems:\"center\", justifyContent:\"space-between\", padding:\"8px 6px\", gap:4 }}>\n          <div style={{ flex: 1, display: \"flex\", gap: 4 }}>\n            {NAV.slice(0, 2).map(({ id, label, accent, icon }) => {\n              const Icon = Icons[icon] as () => JSX.Element;\n              const active = tab === id;\n              return (\n                <button key={id} onClick={() => setTab(id)}\n                  className={`nav-btn${active ? \" active\" : \"\"}`}\n                  style={{ color: active ? accent : undefined, flex: 1 }}>\n                  <Icon />\n                  {label}\n                </button>\n              );\n            })}\n          </div>\n          <button\n            onClick={toggleMaster}\n            className={`master-play${session.playing ? \" active\" : \"\"}`}\n            style={{ \"--play-color\": \"var(--accent-green)\" } as React.CSSProperties}>\n            {session.playing\n              ? <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"2\"/></svg>\n              : <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"5 3 19 12 5 21 5 3\"/></svg>\n            }\n          </button>\n          <div style={{ flex: 1, display: \"flex\", gap: 4 }}>\n            {NAV.slice(2).map(({ id, label, accent, icon }) => {\n              const Icon = Icons[icon] as () => JSX.Element;\n              const active = tab === id;\n              return (\n                <button key={id} onClick={() => setTab(id)}\n                  className={`nav-btn${active ? \" active\" : \"\"}`}\n                  style={{ color: active ? accent : undefined, flex: 1 }}>\n                  <Icon />\n                  {label}\n                </button>\n              );\n            })}\n          </div>\n        </nav>\n      </div>\n    </div>\n  );\n}\n",["D",1773361675768],65,{"_105":458,"_165":147,"_162":341,"_97":340,"_173":459,"_171":191,"_102":244,"_164":236,"_107":460,"_166":461,"_175":-5},"e8fe9054-1e72-11f1-9eb7-42dde27851f2","import React, { useState, useRef, useEffect, useCallback } from \"react\";\nimport { BinauralTab } from \"https://esm.town/v/all/brain/frontend/components/BinauralTab.tsx\";\nimport { OceanPulseTab } from \"https://esm.town/v/all/brain/frontend/components/OceanPulseTab.tsx\";\nimport { TimelineTab } from \"https://esm.town/v/all/brain/frontend/components/TimelineTab.tsx\";\nimport { TTSWisdomTab } from \"https://esm.town/v/all/brain/frontend/components/TTSWisdomTab.tsx\";\nimport { ClockTab } from \"https://esm.town/v/all/brain/frontend/components/ClockTab.tsx\";\nimport { Icons } from \"https://esm.town/v/all/brain/frontend/components/Icons.tsx\";\nimport { Waveform } from \"https://esm.town/v/all/brain/frontend/components/Waveform.tsx\";\n\ntype Tab = \"timeline\" | \"ocean\" | \"wisdom\" | \"clock\" | \"binaural\";\n\n// ── MASTER SESSION STATE ────────────────────────────────────────────────────\nexport interface SessionState {\n  playing: boolean;\n  // binaural\n  binauralOn: boolean;\n  baseFreq: number;\n  beatFreq: number;\n  // ocean\n  oceanOn: boolean;\n  breathRate: number;\n  // clock\n  clockOn: boolean;\n  tickSpeed: number;\n  polySpeed: number;\n  // wisdom\n  wisdomOn: boolean;\n  wisdomIntervalMin: number;\n  wisdomVoice: string;\n  // active timeline segment info\n  activeSegment: { label: string; brainwave: string; color: string } | null;\n}\n\nconst defaultSession: SessionState = {\n  playing: false,\n  binauralOn: true,\n  baseFreq: 200,\n  beatFreq: 10,\n  oceanOn: false,\n  breathRate: 6,\n  clockOn: false,\n  tickSpeed: 1000,\n  polySpeed: 33,\n  wisdomOn: false,\n  wisdomIntervalMin: 10,\n  wisdomVoice: \"troy\",\n  activeSegment: null,\n};\n\nexport default function App() {\n  const [tab, setTab] = useState<Tab>(\"timeline\");\n  const [session, setSession] = useState<SessionState>(defaultSession);\n\n  // Audio engine refs — shared across all tabs\n  const audioCtxRef = useRef<AudioContext | null>(null);\n  // Binaural\n  const leftOscRef = useRef<OscillatorNode | null>(null);\n  const rightOscRef = useRef<OscillatorNode | null>(null);\n  const binauralGainRef = useRef<GainNode | null>(null);\n  // Ocean\n  const oceanNoiseRef = useRef<AudioBufferSourceNode | null>(null);\n  const oceanLfoRef = useRef<OscillatorNode | null>(null);\n  const oceanGainRef = useRef<GainNode | null>(null);\n  // Clock\n  const clockTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const clockRunningRef = useRef(false);\n  const nextTickRef = useRef(0);\n  const nextPolyRef = useRef(0);\n  // Master analyser for waveform\n  const analyserRef = useRef<AnalyserNode | null>(null);\n  const masterGainRef = useRef<GainNode | null>(null);\n  // Wisdom timer\n  const wisdomTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);\n\n  const getCtx = useCallback(() => {\n    if (!audioCtxRef.current) {\n      const Ctx = window.AudioContext || (window as any).webkitAudioContext;\n      audioCtxRef.current = new Ctx();\n    }\n    const ctx = audioCtxRef.current;\n    if (ctx.state === \"suspended\") ctx.resume();\n\n    // Setup master chain once — limiter gain so all layers mix without clipping\n    if (!analyserRef.current) {\n      const analyser = ctx.createAnalyser();\n      analyser.fftSize = 2048;\n      const limiter = ctx.createGain();\n      limiter.gain.value = 0.85;\n      const master = ctx.createGain();\n      master.gain.value = 1;\n      master.connect(limiter);\n      limiter.connect(analyser);\n      analyser.connect(ctx.destination);\n      analyserRef.current = analyser;\n      masterGainRef.current = master;\n    }\n    return ctx;\n  }, []);\n\n  // ── START BINAURAL ────────────────────────────────────────────────────────\n  const startBinaural = useCallback((ctx: AudioContext, s: SessionState) => {\n    if (leftOscRef.current) { leftOscRef.current.stop(); leftOscRef.current.disconnect(); }\n    if (rightOscRef.current) { rightOscRef.current.stop(); rightOscRef.current.disconnect(); }\n\n    const left = ctx.createOscillator();\n    const right = ctx.createOscillator();\n    const lp = ctx.createStereoPanner(); lp.pan.value = -1;\n    const rp = ctx.createStereoPanner(); rp.pan.value = 1;\n    const gain = ctx.createGain();\n    gain.gain.setValueAtTime(0, ctx.currentTime);\n    gain.gain.linearRampToValueAtTime(0.38, ctx.currentTime + 1.5);\n\n    left.connect(lp); right.connect(rp);\n    lp.connect(gain); rp.connect(gain);\n    gain.connect(masterGainRef.current!);\n\n    left.frequency.value = s.baseFreq;\n    right.frequency.value = s.baseFreq + s.beatFreq;\n    left.start(); right.start();\n    leftOscRef.current = left;\n    rightOscRef.current = right;\n    binauralGainRef.current = gain;\n  }, []);\n\n  const stopBinaural = useCallback(() => {\n    leftOscRef.current?.stop(); leftOscRef.current?.disconnect();\n    rightOscRef.current?.stop(); rightOscRef.current?.disconnect();\n    leftOscRef.current = null; rightOscRef.current = null;\n  }, []);\n\n  // ── START OCEAN ───────────────────────────────────────────────────────────\n  function makeBrown(ctx: AudioContext) {\n    const size = ctx.sampleRate * 4;\n    const buf = ctx.createBuffer(1, size, ctx.sampleRate);\n    const out = buf.getChannelData(0);\n    let last = 0;\n    for (let i = 0; i < size; i++) {\n      const w = Math.random() * 2 - 1;\n      out[i] = (last + 0.02 * w) / 1.02; last = out[i]; out[i] *= 3.5;\n    }\n    return buf;\n  }\n\n  const startOcean = useCallback((ctx: AudioContext, s: SessionState) => {\n    if (oceanNoiseRef.current) { oceanNoiseRef.current.stop(); oceanNoiseRef.current.disconnect(); }\n    if (oceanLfoRef.current) { oceanLfoRef.current.stop(); oceanLfoRef.current.disconnect(); }\n\n    const master = ctx.createGain(); master.gain.value = 0.42;\n    master.connect(masterGainRef.current!);\n\n    const waveGain = ctx.createGain(); waveGain.gain.value = 0.48;\n    waveGain.connect(master);\n\n    const lfo = ctx.createOscillator(); lfo.type = \"sine\";\n    lfo.frequency.value = s.breathRate / 60;\n    const lfoG = ctx.createGain(); lfoG.gain.value = 0.5;\n    lfo.connect(lfoG); lfoG.connect(waveGain.gain); lfo.start();\n\n    const noise = ctx.createBufferSource();\n    noise.buffer = makeBrown(ctx); noise.loop = true;\n    noise.connect(waveGain); noise.start();\n\n    oceanNoiseRef.current = noise;\n    oceanLfoRef.current = lfo;\n    oceanGainRef.current = master;\n  }, []);\n\n  const stopOcean = useCallback(() => {\n    oceanNoiseRef.current?.stop(); oceanNoiseRef.current?.disconnect();\n    oceanLfoRef.current?.stop(); oceanLfoRef.current?.disconnect();\n    oceanGainRef.current?.disconnect();\n    oceanNoiseRef.current = null; oceanLfoRef.current = null;\n  }, []);\n\n  // ── CLOCK SCHEDULER ───────────────────────────────────────────────────────\n  const sessionRef = useRef(session);\n  sessionRef.current = session;\n\n  const scheduleClock = useCallback(() => {\n    const ctx = audioCtxRef.current;\n    if (!ctx || !masterGainRef.current || !clockRunningRef.current) return;\n    const s = sessionRef.current;\n    const ahead = 0.1;\n\n    while (nextTickRef.current < ctx.currentTime + ahead) {\n      const t = nextTickRef.current;\n      const osc = ctx.createOscillator(); const g = ctx.createGain();\n      osc.connect(g); g.connect(masterGainRef.current);\n      osc.type = \"sine\"; osc.frequency.setValueAtTime(900, t); osc.frequency.exponentialRampToValueAtTime(0.01, t + 0.06);\n      g.gain.setValueAtTime(0.28, t); g.gain.exponentialRampToValueAtTime(0.001, t + 0.06);\n      osc.start(t); osc.stop(t + 0.07);\n      nextTickRef.current += s.tickSpeed / 1000;\n    }\n    while (nextPolyRef.current < ctx.currentTime + ahead) {\n      const t = nextPolyRef.current;\n      const osc = ctx.createOscillator(); const g = ctx.createGain();\n      osc.connect(g); g.connect(masterGainRef.current);\n      osc.type = \"triangle\"; osc.frequency.setValueAtTime(260, t); osc.frequency.linearRampToValueAtTime(80, t + 0.4);\n      g.gain.setValueAtTime(0.38, t); g.gain.exponentialRampToValueAtTime(0.001, t + 0.4);\n      osc.start(t); osc.stop(t + 0.4);\n      nextPolyRef.current += s.polySpeed;\n    }\n    if (clockRunningRef.current) clockTimerRef.current = setTimeout(scheduleClock, 25);\n  }, []);\n\n  const startClock = useCallback((ctx: AudioContext) => {\n    if (clockTimerRef.current) clearTimeout(clockTimerRef.current);\n    clockRunningRef.current = true;\n    nextTickRef.current = ctx.currentTime + 0.05;\n    nextPolyRef.current = ctx.currentTime + 0.05;\n    scheduleClock();\n  }, [scheduleClock]);\n\n  const stopClock = useCallback(() => {\n    clockRunningRef.current = false;\n    if (clockTimerRef.current) clearTimeout(clockTimerRef.current);\n    clockTimerRef.current = null;\n  }, []);\n\n  // ── WISDOM SPEAKER ────────────────────────────────────────────────────────\n  const speakWisdom = useCallback(async (quotes: any[], voice: string) => {\n    const enabled = quotes.filter((q: any) => q.enabled);\n    if (!enabled.length) return;\n    const q = enabled[Math.floor(Math.random() * enabled.length)];\n\n    try {\n      const r = await fetch(\"/api/tts\", {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify({ text: q.text, voice }),\n      });\n      if (!r.ok) return;\n      const blob = await r.blob();\n\n      // Apply reverb via Web Audio\n      const ctx = getCtx();\n      const arrayBuf = await blob.arrayBuffer();\n      const decoded = await ctx.decodeAudioData(arrayBuf);\n      const src = ctx.createBufferSource();\n      src.buffer = decoded;\n\n      // Convolver for reverb\n      const convolver = ctx.createConvolver();\n      const reverbLen = ctx.sampleRate * 2.5;\n      const reverbBuf = ctx.createBuffer(2, reverbLen, ctx.sampleRate);\n      for (let ch = 0; ch < 2; ch++) {\n        const d = reverbBuf.getChannelData(ch);\n        for (let i = 0; i < reverbLen; i++) d[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / reverbLen, 2);\n      }\n      convolver.buffer = reverbBuf;\n\n      const dryGain = ctx.createGain(); dryGain.gain.value = 0.6;\n      const wetGain = ctx.createGain(); wetGain.gain.value = 0.25;\n\n      src.connect(dryGain); dryGain.connect(masterGainRef.current!);\n      src.connect(convolver); convolver.connect(wetGain); wetGain.connect(masterGainRef.current!);\n      src.start();\n    } catch (e) { console.error(\"TTS error\", e); }\n  }, [getCtx]);\n\n  // ── MASTER PLAY / STOP ────────────────────────────────────────────────────\n  const masterPlay = useCallback(async () => {\n    const ctx = getCtx();\n    const s = sessionRef.current;\n\n    if (s.binauralOn) startBinaural(ctx, s);\n    if (s.oceanOn) startOcean(ctx, s);\n    if (s.clockOn) startClock(ctx);\n\n    if (s.wisdomOn) {\n      try {\n        const r = await fetch(\"/api/quotes\");\n        const quotes = await r.json();\n        speakWisdom(quotes, s.wisdomVoice);\n        wisdomTimerRef.current = setInterval(async () => {\n          const r2 = await fetch(\"/api/quotes\");\n          const q2 = await r2.json();\n          speakWisdom(q2, sessionRef.current.wisdomVoice);\n        }, s.wisdomIntervalMin * 60 * 1000);\n      } catch (e) { console.error(\"Wisdom fetch error\", e); }\n    }\n\n    setSession(prev => ({ ...prev, playing: true }));\n  }, [getCtx, startBinaural, startOcean, startClock, speakWisdom]);\n\n  const masterStop = useCallback(() => {\n    stopBinaural();\n    stopOcean();\n    stopClock();\n    if (wisdomTimerRef.current) clearInterval(wisdomTimerRef.current);\n    wisdomTimerRef.current = null;\n    setSession(prev => ({ ...prev, playing: false }));\n  }, [stopBinaural, stopOcean, stopClock]);\n\n  const toggleMaster = useCallback(() => {\n    if (session.playing) masterStop();\n    else masterPlay();\n  }, [session.playing, masterPlay, masterStop]);\n\n  // Update binaural in real-time when params change while playing\n  useEffect(() => {\n    if (session.playing && session.binauralOn && leftOscRef.current && rightOscRef.current && audioCtxRef.current) {\n      const ctx = audioCtxRef.current;\n      leftOscRef.current.frequency.setTargetAtTime(session.baseFreq, ctx.currentTime, 0.1);\n      rightOscRef.current.frequency.setTargetAtTime(session.baseFreq + session.beatFreq, ctx.currentTime, 0.1);\n    }\n  }, [session.baseFreq, session.beatFreq]);\n\n  // Update ocean LFO in real-time\n  useEffect(() => {\n    if (session.playing && session.oceanOn && oceanLfoRef.current && audioCtxRef.current) {\n      oceanLfoRef.current.frequency.setTargetAtTime(session.breathRate / 60, audioCtxRef.current.currentTime, 0.5);\n    }\n  }, [session.breathRate]);\n\n  // Restart clock if speed changes while playing\n  useEffect(() => {\n    if (session.playing && session.clockOn && audioCtxRef.current) {\n      stopClock();\n      startClock(audioCtxRef.current);\n    }\n  }, [session.tickSpeed, session.polySpeed]);\n\n  // React to layer pills while playing — start/stop each layer independently\n  useEffect(() => {\n    if (!session.playing || !audioCtxRef.current) return;\n    if (session.clockOn) startClock(audioCtxRef.current);\n    else stopClock();\n  }, [session.clockOn]);\n\n  useEffect(() => {\n    if (!session.playing || !audioCtxRef.current) return;\n    if (session.binauralOn) startBinaural(audioCtxRef.current, sessionRef.current);\n    else stopBinaural();\n  }, [session.binauralOn]);\n\n  useEffect(() => {\n    if (!session.playing || !audioCtxRef.current) return;\n    if (session.oceanOn) startOcean(audioCtxRef.current, sessionRef.current);\n    else stopOcean();\n  }, [session.oceanOn]);\n\n  useEffect(() => {\n    if (!session.playing) return;\n    if (!session.wisdomOn) {\n      if (wisdomTimerRef.current) { clearInterval(wisdomTimerRef.current); wisdomTimerRef.current = null; }\n      return;\n    }\n    let cancelled = false;\n    const intervalMin = sessionRef.current.wisdomIntervalMin;\n    (async () => {\n      try {\n        const r = await fetch(\"/api/quotes\");\n        if (cancelled) return;\n        const quotes = await r.json();\n        if (cancelled) return;\n        speakWisdom(quotes, sessionRef.current.wisdomVoice);\n        if (cancelled) return;\n        wisdomTimerRef.current = setInterval(async () => {\n          if (!sessionRef.current.wisdomOn) return;\n          const r2 = await fetch(\"/api/quotes\");\n          const q2 = await r2.json();\n          speakWisdom(q2, sessionRef.current.wisdomVoice);\n        }, intervalMin * 60 * 1000);\n      } catch (e) { if (!cancelled) console.error(\"Wisdom fetch error\", e); }\n    })();\n    return () => { cancelled = true; if (wisdomTimerRef.current) clearInterval(wisdomTimerRef.current); wisdomTimerRef.current = null; };\n  }, [session.wisdomOn, session.wisdomIntervalMin]);\n\n  useEffect(() => () => { masterStop(); }, []);\n\n  const NAV: { id: Tab; label: string; accent: string; icon: keyof typeof Icons }[] = [\n    { id: \"timeline\", label: \"FLOW\",   accent: \"var(--accent-violet)\", icon: \"Timeline\" },\n    { id: \"binaural\", label: \"BEATS\",  accent: \"var(--accent-blue)\",   icon: \"Waves\"    },\n    { id: \"ocean\",    label: \"OCEAN\",  accent: \"var(--accent-cyan)\",   icon: \"Ocean\"    },\n    { id: \"wisdom\",   label: \"WISDOM\", accent: \"var(--accent-amber)\",  icon: \"Quote\"    },\n    { id: \"clock\",    label: \"CLOCK\",  accent: \"var(--accent-green)\",  icon: \"Clock\"    },\n  ];\n\n  const activeAccent = NAV.find(n => n.id === tab)?.accent ?? \"var(--accent-blue)\";\n\n  return (\n    <div className=\"app-root\">\n      <style>{`\n        @import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');\n        :root {\n          --bg:#0d1117; --bg2:#161b22; --bg3:#1c2330;\n          --border:rgba(255,255,255,0.06); --border2:rgba(255,255,255,0.12);\n          --text:#c9d1d9; --text-dim:#6e7681; --text-bright:#f0f6fc;\n          --accent-blue:#58a6ff; --accent-cyan:#39d0d8;\n          --accent-violet:#bc8cff; --accent-amber:#e3b341;\n          --accent-green:#3fb950; --accent-rose:#f85149;\n        }\n        *{box-sizing:border-box;margin:0;padding:0;}\n        body{background:var(--bg);color:var(--text);font-family:'Space Mono','Courier New',monospace;-webkit-font-smoothing:antialiased;}\n        .app-root{min-height:100dvh;display:flex;justify-content:center;background:var(--bg);}\n        .app-shell{width:100%;max-width:430px;display:flex;flex-direction:column;height:100dvh;border-left:1px solid var(--border2);border-right:1px solid var(--border2);}\n        .card{background:var(--bg2);border:1px solid var(--border2);outline:1px solid var(--border);outline-offset:3px;border-radius:14px;padding:16px;}\n        .card-sm{background:var(--bg2);border:1px solid var(--border2);outline:1px solid var(--border);outline-offset:2px;border-radius:10px;padding:10px 12px;}\n        .scroll-area{overflow-y:auto;}\n        .scroll-area::-webkit-scrollbar{width:2px;}\n        .scroll-area::-webkit-scrollbar-thumb{background:var(--border2);border-radius:1px;}\n        .nav-bar{display:flex;padding:6px;gap:3px;background:var(--bg2);border-top:1px solid var(--border2);}\n        .nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:7px 2px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--text-dim);font-family:inherit;font-size:8px;font-weight:700;letter-spacing:0.08em;cursor:pointer;transition:all 0.15s;}\n        .nav-btn.active{background:var(--bg3);border:1px solid var(--border2);outline:1px solid var(--border);outline-offset:1px;}\n        .nav-btn:not(.active):hover{color:var(--text);}\n        .preset-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;}\n        .preset-btn{background:var(--bg2);border:1px solid var(--border2);outline:1px solid var(--border);outline-offset:2px;border-radius:10px;padding:9px 8px;cursor:pointer;font-family:inherit;color:var(--text-dim);transition:all 0.15s;text-align:left;}\n        .preset-btn.active{background:var(--bg3);}\n        .preset-name{font-size:9px;font-weight:700;letter-spacing:0.07em;display:block;margin-bottom:3px;}\n        .preset-hz{font-size:9px;opacity:0.5;display:block;}\n        .preset-wave{font-size:8px;margin-top:2px;display:block;opacity:0.35;letter-spacing:0.04em;}\n        .noise-btn{background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:4px 10px;font-family:inherit;font-size:9px;font-weight:700;color:var(--text-dim);cursor:pointer;letter-spacing:0.06em;transition:all 0.15s;}\n        .label-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;}\n        .label-key{font-size:9px;font-weight:700;letter-spacing:0.1em;color:var(--text-dim);text-transform:uppercase;}\n        .label-val{font-size:11px;font-weight:700;}\n        .section-title{font-size:17px;font-weight:700;color:var(--text-bright);letter-spacing:-0.01em;}\n        .section-sub{font-size:9px;color:var(--text-dim);letter-spacing:0.08em;margin-top:2px;}\n        /* master play button */\n        .master-play{width:56px;height:56px;border-radius:50%;background:var(--bg2);border:1px solid var(--border2);outline:1px solid var(--border);outline-offset:3px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-dim);transition:all 0.2s;font-family:inherit;flex-shrink:0;}\n        .master-play.active{border-color:var(--play-color);outline-color:color-mix(in srgb,var(--play-color) 30%,transparent);color:var(--play-color);box-shadow:0 0 20px color-mix(in srgb,var(--play-color) 20%,transparent);}\n        /* module toggle pill */\n        .mod-pill{display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:20px;border:1px solid var(--border);cursor:pointer;font-family:inherit;font-size:9px;font-weight:700;letter-spacing:0.07em;color:var(--text-dim);background:var(--bg2);transition:all 0.15s;white-space:nowrap;}\n        .mod-pill.on{border-color:var(--pill-color);color:var(--pill-color);}\n        .mod-dot{width:5px;height:5px;border-radius:50%;background:currentColor;}\n        select{background:var(--bg);border:1px solid var(--border2);border-radius:6px;color:var(--text);font-family:inherit;font-size:10px;padding:6px 8px;outline:none;width:100%;}\n        select option{background:var(--bg2);}\n        input[type=\"number\"],input[type=\"text\"],textarea{background:var(--bg);border:1px solid var(--border2);border-radius:6px;color:var(--text);font-family:inherit;font-size:11px;padding:7px 9px;outline:none;width:100%;}\n        input::placeholder,textarea::placeholder{color:var(--text-dim);}\n        .slider-wrap{position:relative;height:18px;display:flex;align-items:center;}\n        .slider-track{position:absolute;width:100%;height:3px;border-radius:2px;background:var(--bg3);border:1px solid var(--border);}\n        .slider-fill{position:absolute;height:3px;border-radius:2px;pointer-events:none;}\n        .slider-thumb{position:absolute;width:100%;z-index:2;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none;height:18px;}\n        .slider-thumb::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--bg2);border:1px solid var(--border2);outline:1px solid var(--border);outline-offset:2px;cursor:pointer;}\n        .slider-thumb::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--bg2);border:1px solid var(--border2);cursor:pointer;}\n        @keyframes pulse{0%,100%{opacity:1}50%{opacity:0.3}}\n        .live-dot{animation:pulse 2s ease-in-out infinite;}\n      `}</style>\n\n      <div className=\"app-shell\">\n        {/* ── HEADER ── */}\n        <header style={{ padding:\"12px 16px 10px\", borderBottom:\"1px solid var(--border2)\", background:\"var(--bg2)\", flexShrink:0 }}>\n          <span style={{ fontSize:13, fontWeight:700, letterSpacing:\"0.14em\", color:\"var(--text-bright)\" }}>\n            NEURO<span style={{ color:\"var(--accent-blue)\" }}>SYNC</span>\n          </span>\n          <div style={{ fontSize:8, color:\"var(--text-dim)\", marginTop:4, letterSpacing:\"0.06em\" }}>\n            Toggle layers in each tab\n          </div>\n        </header>\n\n        {/* ── WAVEFORM ── */}\n        <Waveform analyser={analyserRef.current} playing={session.playing} accent={activeAccent} />\n\n        {/* ── ACTIVE SEGMENT BADGE ── */}\n        {session.activeSegment && session.playing && (\n          <div style={{ padding:\"4px 16px\", background:\"var(--bg2)\", borderBottom:\"1px solid var(--border)\", display:\"flex\", gap:8, alignItems:\"center\" }}>\n            <div style={{ width:6, height:6, borderRadius:\"50%\", background:session.activeSegment.color }} />\n            <span style={{ fontSize:9, letterSpacing:\"0.1em\", color:\"var(--text-dim)\" }}>\n              {session.activeSegment.label.toUpperCase()} · {session.activeSegment.brainwave.toUpperCase()}\n            </span>\n          </div>\n        )}\n\n        {/* ── MAIN CONTENT ── */}\n        <main className=\"scroll-area\" style={{ flex:1, padding:\"16px 14px 120px\" }}>\n          {tab === \"timeline\"  && <TimelineTab session={session} setSession={setSession} masterPlaying={session.playing} masterPlay={masterPlay} masterStop={masterStop} />}\n          {tab === \"binaural\"  && <BinauralTab session={session} setSession={setSession} />}\n          {tab === \"ocean\"     && <OceanPulseTab session={session} setSession={setSession} />}\n          {tab === \"wisdom\"    && <TTSWisdomTab session={session} setSession={setSession} speakWisdom={speakWisdom} />}\n          {tab === \"clock\"     && <ClockTab session={session} setSession={setSession} />}\n        </main>\n\n        {/* ── BOTTOM TOOLBAR (mobile) — play centered ── */}\n        <nav className=\"nav-bar\" style={{ position:\"absolute\", bottom:0, left:0, right:0, flexShrink:0, display:\"flex\", alignItems:\"center\", padding:\"8px 6px\", gap:4 }}>\n          {NAV.slice(0, 2).map(({ id, label, accent, icon }) => {\n            const Icon = Icons[icon] as () => JSX.Element;\n            const active = tab === id;\n            return (\n              <button key={id} onClick={() => setTab(id)}\n                className={`nav-btn${active ? \" active\" : \"\"}`}\n                style={{ color: active ? accent : undefined, flex: 1 }}>\n                <Icon />\n                {label}\n              </button>\n            );\n          })}\n          {/* Big play button — center */}\n          <button\n            onClick={toggleMaster}\n            className={`master-play${session.playing ? \" active\" : \"\"}`}\n            style={{ \"--play-color\": \"var(--accent-green)\", width: 56, height: 56, flexShrink: 0 } as React.CSSProperties}>\n            {session.playing\n              ? <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"2\"/></svg>\n              : <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"5 3 19 12 5 21 5 3\"/></svg>\n            }\n          </button>\n          {NAV.slice(2).map(({ id, label, accent, icon }) => {\n            const Icon = Icons[icon] as () => JSX.Element;\n            const active = tab === id;\n            return (\n              <button key={id} onClick={() => setTab(id)}\n                className={`nav-btn${active ? \" active\" : \"\"}`}\n                style={{ color: active ? accent : undefined, flex: 1 }}>\n                <Icon />\n                {label}\n              </button>\n            );\n          })}\n        </nav>\n      </div>\n    </div>\n  );\n}\n",["D",1773361430272],62,{"_105":463,"_165":147,"_162":341,"_97":340,"_173":464,"_171":191,"_102":237,"_164":236,"_107":465,"_166":466,"_175":-5},"71c6325e-1e71-11f1-b4fd-42dde27851f2","import React, { useState, useRef, useEffect, useCallback, useReducer } from \"react\";\nimport { BinauralTab } from \"https://esm.town/v/all/brain/frontend/components/BinauralTab.tsx\";\nimport { OceanPulseTab } from \"https://esm.town/v/all/brain/frontend/components/OceanPulseTab.tsx\";\nimport { TimelineTab } from \"https://esm.town/v/all/brain/frontend/components/TimelineTab.tsx\";\nimport { TTSWisdomTab } from \"https://esm.town/v/all/brain/frontend/components/TTSWisdomTab.tsx\";\nimport { ClockTab } from \"https://esm.town/v/all/brain/frontend/components/ClockTab.tsx\";\nimport { Icons } from \"https://esm.town/v/all/brain/frontend/components/Icons.tsx\";\nimport { Waveform } from \"https://esm.town/v/all/brain/frontend/components/Waveform.tsx\";\n\ntype Tab = \"timeline\" | \"ocean\" | \"wisdom\" | \"clock\" | \"binaural\";\n\n// ── MASTER SESSION STATE ────────────────────────────────────────────────────\nexport interface SessionState {\n  playing: boolean;\n  // binaural\n  binauralOn: boolean;\n  baseFreq: number;\n  beatFreq: number;\n  // ocean\n  oceanOn: boolean;\n  breathRate: number;\n  // clock\n  clockOn: boolean;\n  tickSpeed: number;\n  polySpeed: number;\n  // wisdom\n  wisdomOn: boolean;\n  wisdomIntervalMin: number;\n  wisdomVoice: string;\n  // active timeline segment info\n  activeSegment: { label: string; brainwave: string; color: string } | null;\n}\n\nconst defaultSession: SessionState = {\n  playing: false,\n  binauralOn: true,\n  baseFreq: 200,\n  beatFreq: 10,\n  oceanOn: false,\n  breathRate: 6,\n  clockOn: false,\n  tickSpeed: 1000,\n  polySpeed: 33,\n  wisdomOn: false,\n  wisdomIntervalMin: 10,\n  wisdomVoice: \"leo\",\n  activeSegment: null,\n};\n\nexport default function App() {\n  const [tab, setTab] = useState<Tab>(\"timeline\");\n  const [session, setSession] = useState<SessionState>(defaultSession);\n\n  // Audio engine refs — shared across all tabs\n  const audioCtxRef = useRef<AudioContext | null>(null);\n  // Binaural\n  const leftOscRef = useRef<OscillatorNode | null>(null);\n  const rightOscRef = useRef<OscillatorNode | null>(null);\n  const binauralGainRef = useRef<GainNode | null>(null);\n  // Ocean\n  const oceanNoiseRef = useRef<AudioBufferSourceNode | null>(null);\n  const oceanLfoRef = useRef<OscillatorNode | null>(null);\n  const oceanGainRef = useRef<GainNode | null>(null);\n  // Clock\n  const clockTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const nextTickRef = useRef(0);\n  const nextPolyRef = useRef(0);\n  // Master analyser for waveform\n  const analyserRef = useRef<AnalyserNode | null>(null);\n  const masterGainRef = useRef<GainNode | null>(null);\n  // Wisdom timer\n  const wisdomTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);\n  const audioElRef = useRef<HTMLAudioElement | null>(null);\n\n  const getCtx = useCallback(() => {\n    if (!audioCtxRef.current) {\n      const Ctx = window.AudioContext || (window as any).webkitAudioContext;\n      audioCtxRef.current = new Ctx();\n    }\n    const ctx = audioCtxRef.current;\n    if (ctx.state === \"suspended\") ctx.resume();\n\n    // Setup master chain once\n    if (!analyserRef.current) {\n      const analyser = ctx.createAnalyser();\n      analyser.fftSize = 2048;\n      const master = ctx.createGain();\n      master.gain.value = 1;\n      master.connect(analyser);\n      analyser.connect(ctx.destination);\n      analyserRef.current = analyser;\n      masterGainRef.current = master;\n    }\n    return ctx;\n  }, []);\n\n  // ── START BINAURAL ────────────────────────────────────────────────────────\n  const startBinaural = useCallback((ctx: AudioContext, s: SessionState) => {\n    if (leftOscRef.current) { leftOscRef.current.stop(); leftOscRef.current.disconnect(); }\n    if (rightOscRef.current) { rightOscRef.current.stop(); rightOscRef.current.disconnect(); }\n\n    const left = ctx.createOscillator();\n    const right = ctx.createOscillator();\n    const lp = ctx.createStereoPanner(); lp.pan.value = -1;\n    const rp = ctx.createStereoPanner(); rp.pan.value = 1;\n    const gain = ctx.createGain();\n    gain.gain.setValueAtTime(0, ctx.currentTime);\n    gain.gain.linearRampToValueAtTime(0.45, ctx.currentTime + 1.5);\n\n    left.connect(lp); right.connect(rp);\n    lp.connect(gain); rp.connect(gain);\n    gain.connect(masterGainRef.current!);\n\n    left.frequency.value = s.baseFreq;\n    right.frequency.value = s.baseFreq + s.beatFreq;\n    left.start(); right.start();\n    leftOscRef.current = left;\n    rightOscRef.current = right;\n    binauralGainRef.current = gain;\n  }, []);\n\n  const stopBinaural = useCallback(() => {\n    leftOscRef.current?.stop(); leftOscRef.current?.disconnect();\n    rightOscRef.current?.stop(); rightOscRef.current?.disconnect();\n    leftOscRef.current = null; rightOscRef.current = null;\n  }, []);\n\n  // ── START OCEAN ───────────────────────────────────────────────────────────\n  function makeBrown(ctx: AudioContext) {\n    const size = ctx.sampleRate * 4;\n    const buf = ctx.createBuffer(1, size, ctx.sampleRate);\n    const out = buf.getChannelData(0);\n    let last = 0;\n    for (let i = 0; i < size; i++) {\n      const w = Math.random() * 2 - 1;\n      out[i] = (last + 0.02 * w) / 1.02; last = out[i]; out[i] *= 3.5;\n    }\n    return buf;\n  }\n\n  const startOcean = useCallback((ctx: AudioContext, s: SessionState) => {\n    if (oceanNoiseRef.current) { oceanNoiseRef.current.stop(); oceanNoiseRef.current.disconnect(); }\n    if (oceanLfoRef.current) { oceanLfoRef.current.stop(); oceanLfoRef.current.disconnect(); }\n\n    const master = ctx.createGain(); master.gain.value = 0.55;\n    master.connect(masterGainRef.current!);\n\n    const waveGain = ctx.createGain(); waveGain.gain.value = 0.5;\n    waveGain.connect(master);\n\n    const lfo = ctx.createOscillator(); lfo.type = \"sine\";\n    lfo.frequency.value = s.breathRate / 60;\n    const lfoG = ctx.createGain(); lfoG.gain.value = 0.5;\n    lfo.connect(lfoG); lfoG.connect(waveGain.gain); lfo.start();\n\n    const noise = ctx.createBufferSource();\n    noise.buffer = makeBrown(ctx); noise.loop = true;\n    noise.connect(waveGain); noise.start();\n\n    oceanNoiseRef.current = noise;\n    oceanLfoRef.current = lfo;\n    oceanGainRef.current = master;\n  }, []);\n\n  const stopOcean = useCallback(() => {\n    oceanNoiseRef.current?.stop(); oceanNoiseRef.current?.disconnect();\n    oceanLfoRef.current?.stop(); oceanLfoRef.current?.disconnect();\n    oceanGainRef.current?.disconnect();\n    oceanNoiseRef.current = null; oceanLfoRef.current = null;\n  }, []);\n\n  // ── CLOCK SCHEDULER ───────────────────────────────────────────────────────\n  const scheduleClockRef = useRef<(() => void) | null>(null);\n  const sessionRef = useRef(session);\n  sessionRef.current = session;\n\n  const scheduleClock = useCallback(() => {\n    const ctx = audioCtxRef.current;\n    if (!ctx || !masterGainRef.current) return;\n    const s = sessionRef.current;\n    const ahead = 0.1;\n\n    while (nextTickRef.current < ctx.currentTime + ahead) {\n      const t = nextTickRef.current;\n      const osc = ctx.createOscillator(); const g = ctx.createGain();\n      osc.connect(g); g.connect(masterGainRef.current);\n      osc.type = \"sine\"; osc.frequency.setValueAtTime(900, t); osc.frequency.exponentialRampToValueAtTime(0.01, t + 0.06);\n      g.gain.setValueAtTime(0.35, t); g.gain.exponentialRampToValueAtTime(0.001, t + 0.06);\n      osc.start(t); osc.stop(t + 0.07);\n      nextTickRef.current += s.tickSpeed / 1000;\n    }\n    while (nextPolyRef.current < ctx.currentTime + ahead) {\n      const t = nextPolyRef.current;\n      const osc = ctx.createOscillator(); const g = ctx.createGain();\n      osc.connect(g); g.connect(masterGainRef.current);\n      osc.type = \"triangle\"; osc.frequency.setValueAtTime(260, t); osc.frequency.linearRampToValueAtTime(80, t + 0.4);\n      g.gain.setValueAtTime(0.5, t); g.gain.exponentialRampToValueAtTime(0.001, t + 0.4);\n      osc.start(t); osc.stop(t + 0.4);\n      nextPolyRef.current += s.polySpeed;\n    }\n    clockTimerRef.current = setTimeout(scheduleClock, 25);\n  }, []);\n\n  scheduleClockRef.current = scheduleClock;\n\n  const startClock = useCallback((ctx: AudioContext) => {\n    if (clockTimerRef.current) clearTimeout(clockTimerRef.current);\n    nextTickRef.current = ctx.currentTime + 0.05;\n    nextPolyRef.current = ctx.currentTime + 0.05;\n    scheduleClock();\n  }, [scheduleClock]);\n\n  const stopClock = useCallback(() => {\n    if (clockTimerRef.current) clearTimeout(clockTimerRef.current);\n    clockTimerRef.current = null;\n  }, []);\n\n  // ── WISDOM SPEAKER ────────────────────────────────────────────────────────\n  const speakWisdom = useCallback(async (quotes: any[], voice: string) => {\n    const enabled = quotes.filter((q: any) => q.enabled);\n    if (!enabled.length) return;\n    const q = enabled[Math.floor(Math.random() * enabled.length)];\n\n    try {\n      const r = await fetch(\"/api/tts\", {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify({ text: `${q.text}${q.author ? ` — ${q.author}` : \"\"}`, voice }),\n      });\n      if (!r.ok) return;\n      const blob = await r.blob();\n      const url = URL.createObjectURL(blob);\n\n      // Apply reverb via Web Audio\n      const ctx = getCtx();\n      const arrayBuf = await blob.arrayBuffer();\n      const decoded = await ctx.decodeAudioData(arrayBuf);\n      const src = ctx.createBufferSource();\n      src.buffer = decoded;\n\n      // Convolver for reverb\n      const convolver = ctx.createConvolver();\n      const reverbLen = ctx.sampleRate * 2.5;\n      const reverbBuf = ctx.createBuffer(2, reverbLen, ctx.sampleRate);\n      for (let ch = 0; ch < 2; ch++) {\n        const d = reverbBuf.getChannelData(ch);\n        for (let i = 0; i < reverbLen; i++) d[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / reverbLen, 2);\n      }\n      convolver.buffer = reverbBuf;\n\n      const dryGain = ctx.createGain(); dryGain.gain.value = 0.7;\n      const wetGain = ctx.createGain(); wetGain.gain.value = 0.35;\n\n      src.connect(dryGain); dryGain.connect(masterGainRef.current!);\n      src.connect(convolver); convolver.connect(wetGain); wetGain.connect(masterGainRef.current!);\n      src.start();\n    } catch (e) { console.error(\"TTS error\", e); }\n  }, [getCtx]);\n\n  // ── MASTER PLAY / STOP ────────────────────────────────────────────────────\n  const masterPlay = useCallback(async () => {\n    const ctx = getCtx();\n    const s = sessionRef.current;\n\n    if (s.binauralOn) startBinaural(ctx, s);\n    if (s.oceanOn) startOcean(ctx, s);\n    if (s.clockOn) startClock(ctx);\n\n    if (s.wisdomOn) {\n      try {\n        const r = await fetch(\"/api/quotes\");\n        const quotes = await r.json();\n        speakWisdom(quotes, s.wisdomVoice);\n        wisdomTimerRef.current = setInterval(async () => {\n          const r2 = await fetch(\"/api/quotes\");\n          const q2 = await r2.json();\n          speakWisdom(q2, sessionRef.current.wisdomVoice);\n        }, s.wisdomIntervalMin * 60 * 1000);\n      } catch (e) { console.error(\"Wisdom fetch error\", e); }\n    }\n\n    setSession(prev => ({ ...prev, playing: true }));\n  }, [getCtx, startBinaural, startOcean, startClock, speakWisdom]);\n\n  const masterStop = useCallback(() => {\n    stopBinaural();\n    stopOcean();\n    stopClock();\n    if (wisdomTimerRef.current) clearInterval(wisdomTimerRef.current);\n    audioElRef.current?.pause();\n    setSession(prev => ({ ...prev, playing: false }));\n  }, [stopBinaural, stopOcean, stopClock]);\n\n  const toggleMaster = useCallback(() => {\n    if (session.playing) masterStop();\n    else masterPlay();\n  }, [session.playing, masterPlay, masterStop]);\n\n  // Update binaural in real-time when params change while playing\n  useEffect(() => {\n    if (session.playing && session.binauralOn && leftOscRef.current && rightOscRef.current && audioCtxRef.current) {\n      const ctx = audioCtxRef.current;\n      leftOscRef.current.frequency.setTargetAtTime(session.baseFreq, ctx.currentTime, 0.1);\n      rightOscRef.current.frequency.setTargetAtTime(session.baseFreq + session.beatFreq, ctx.currentTime, 0.1);\n    }\n  }, [session.baseFreq, session.beatFreq]);\n\n  // Update ocean LFO in real-time\n  useEffect(() => {\n    if (session.playing && session.oceanOn && oceanLfoRef.current && audioCtxRef.current) {\n      oceanLfoRef.current.frequency.setTargetAtTime(session.breathRate / 60, audioCtxRef.current.currentTime, 0.5);\n    }\n  }, [session.breathRate]);\n\n  // Restart clock if speed changes while playing\n  useEffect(() => {\n    if (session.playing && session.clockOn && audioCtxRef.current) {\n      stopClock();\n      startClock(audioCtxRef.current);\n    }\n  }, [session.tickSpeed, session.polySpeed]);\n\n  useEffect(() => () => { masterStop(); }, []);\n\n  const NAV: { id: Tab; label: string; accent: string; icon: keyof typeof Icons }[] = [\n    { id: \"timeline\", label: \"FLOW\",   accent: \"var(--accent-violet)\", icon: \"Timeline\" },\n    { id: \"binaural\", label: \"BEATS\",  accent: \"var(--accent-blue)\",   icon: \"Waves\"    },\n    { id: \"ocean\",    label: \"OCEAN\",  accent: \"var(--accent-cyan)\",   icon: \"Ocean\"    },\n    { id: \"wisdom\",   label: \"WISDOM\", accent: \"var(--accent-amber)\",  icon: \"Quote\"    },\n    { id: \"clock\",    label: \"CLOCK\",  accent: \"var(--accent-green)\",  icon: \"Clock\"    },\n  ];\n\n  const activeAccent = NAV.find(n => n.id === tab)?.accent ?? \"var(--accent-blue)\";\n\n  return (\n    <div className=\"app-root\">\n      <style>{`\n        @import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');\n        :root {\n          --bg:#0d1117; --bg2:#161b22; --bg3:#1c2330;\n          --border:rgba(255,255,255,0.06); --border2:rgba(255,255,255,0.12);\n          --text:#c9d1d9; --text-dim:#6e7681; --text-bright:#f0f6fc;\n          --accent-blue:#58a6ff; --accent-cyan:#39d0d8;\n          --accent-violet:#bc8cff; --accent-amber:#e3b341;\n          --accent-green:#3fb950; --accent-rose:#f85149;\n        }\n        *{box-sizing:border-box;margin:0;padding:0;}\n        body{background:var(--bg);color:var(--text);font-family:'Space Mono','Courier New',monospace;-webkit-font-smoothing:antialiased;}\n        .app-root{min-height:100dvh;display:flex;justify-content:center;background:var(--bg);}\n        .app-shell{width:100%;max-width:430px;display:flex;flex-direction:column;height:100dvh;border-left:1px solid var(--border2);border-right:1px solid var(--border2);}\n        .card{background:var(--bg2);border:1px solid var(--border2);outline:1px solid var(--border);outline-offset:3px;border-radius:14px;padding:16px;}\n        .card-sm{background:var(--bg2);border:1px solid var(--border2);outline:1px solid var(--border);outline-offset:2px;border-radius:10px;padding:10px 12px;}\n        .scroll-area{overflow-y:auto;}\n        .scroll-area::-webkit-scrollbar{width:2px;}\n        .scroll-area::-webkit-scrollbar-thumb{background:var(--border2);border-radius:1px;}\n        .nav-bar{display:flex;padding:6px;gap:3px;background:var(--bg2);border-top:1px solid var(--border2);}\n        .nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:7px 2px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--text-dim);font-family:inherit;font-size:8px;font-weight:700;letter-spacing:0.08em;cursor:pointer;transition:all 0.15s;}\n        .nav-btn.active{background:var(--bg3);border:1px solid var(--border2);outline:1px solid var(--border);outline-offset:1px;}\n        .nav-btn:not(.active):hover{color:var(--text);}\n        .preset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;}\n        .preset-btn{background:var(--bg2);border:1px solid var(--border2);outline:1px solid var(--border);outline-offset:2px;border-radius:10px;padding:9px 8px;cursor:pointer;font-family:inherit;color:var(--text-dim);transition:all 0.15s;text-align:left;}\n        .preset-btn.active{background:var(--bg3);}\n        .preset-name{font-size:9px;font-weight:700;letter-spacing:0.07em;display:block;margin-bottom:3px;}\n        .preset-hz{font-size:9px;opacity:0.5;display:block;}\n        .preset-wave{font-size:8px;margin-top:2px;display:block;opacity:0.35;letter-spacing:0.04em;}\n        .noise-btn{background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:4px 10px;font-family:inherit;font-size:9px;font-weight:700;color:var(--text-dim);cursor:pointer;letter-spacing:0.06em;transition:all 0.15s;}\n        .label-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;}\n        .label-key{font-size:9px;font-weight:700;letter-spacing:0.1em;color:var(--text-dim);text-transform:uppercase;}\n        .label-val{font-size:11px;font-weight:700;}\n        .section-title{font-size:17px;font-weight:700;color:var(--text-bright);letter-spacing:-0.01em;}\n        .section-sub{font-size:9px;color:var(--text-dim);letter-spacing:0.08em;margin-top:2px;}\n        /* master play button */\n        .master-play{width:56px;height:56px;border-radius:50%;background:var(--bg2);border:1px solid var(--border2);outline:1px solid var(--border);outline-offset:3px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-dim);transition:all 0.2s;font-family:inherit;flex-shrink:0;}\n        .master-play.active{border-color:var(--play-color);outline-color:color-mix(in srgb,var(--play-color) 30%,transparent);color:var(--play-color);box-shadow:0 0 20px color-mix(in srgb,var(--play-color) 20%,transparent);}\n        /* module toggle pill */\n        .mod-pill{display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:20px;border:1px solid var(--border);cursor:pointer;font-family:inherit;font-size:9px;font-weight:700;letter-spacing:0.07em;color:var(--text-dim);background:var(--bg2);transition:all 0.15s;white-space:nowrap;}\n        .mod-pill.on{border-color:var(--pill-color);color:var(--pill-color);}\n        .mod-dot{width:5px;height:5px;border-radius:50%;background:currentColor;}\n        select{background:var(--bg);border:1px solid var(--border2);border-radius:6px;color:var(--text);font-family:inherit;font-size:10px;padding:6px 8px;outline:none;width:100%;}\n        select option{background:var(--bg2);}\n        input[type=\"number\"],input[type=\"text\"],textarea{background:var(--bg);border:1px solid var(--border2);border-radius:6px;color:var(--text);font-family:inherit;font-size:11px;padding:7px 9px;outline:none;width:100%;}\n        input::placeholder,textarea::placeholder{color:var(--text-dim);}\n        .slider-wrap{position:relative;height:18px;display:flex;align-items:center;}\n        .slider-track{position:absolute;width:100%;height:3px;border-radius:2px;background:var(--bg3);border:1px solid var(--border);}\n        .slider-fill{position:absolute;height:3px;border-radius:2px;pointer-events:none;}\n        .slider-thumb{position:absolute;width:100%;z-index:2;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none;height:18px;}\n        .slider-thumb::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--bg2);border:1px solid var(--border2);outline:1px solid var(--border);outline-offset:2px;cursor:pointer;}\n        .slider-thumb::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--bg2);border:1px solid var(--border2);cursor:pointer;}\n        @keyframes pulse{0%,100%{opacity:1}50%{opacity:0.3}}\n        .live-dot{animation:pulse 2s ease-in-out infinite;}\n      `}</style>\n\n      <div className=\"app-shell\">\n        {/* ── HEADER ── */}\n        <header style={{ padding:\"12px 16px 10px\", display:\"flex\", justifyContent:\"space-between\", alignItems:\"center\", borderBottom:\"1px solid var(--border2)\", background:\"var(--bg2)\", gap:12, flexShrink:0 }}>\n          <span style={{ fontSize:13, fontWeight:700, letterSpacing:\"0.14em\", color:\"var(--text-bright)\", flexShrink:0 }}>\n            NEURO<span style={{ color:\"var(--accent-blue)\" }}>SYNC</span>\n          </span>\n\n          {/* Module pills */}\n          <div style={{ display:\"flex\", gap:5, overflowX:\"auto\", flexShrink:1 }}>\n            {[\n              { key:\"binauralOn\",  label:\"BEATS\", color:\"var(--accent-blue)\"   },\n              { key:\"oceanOn\",     label:\"OCEAN\", color:\"var(--accent-cyan)\"   },\n              { key:\"clockOn\",     label:\"CLOCK\", color:\"var(--accent-green)\"  },\n              { key:\"wisdomOn\",    label:\"VOICE\", color:\"var(--accent-amber)\"  },\n            ].map(({ key, label, color }) => {\n              const on = session[key as keyof SessionState] as boolean;\n              return (\n                <button key={key}\n                  onClick={() => setSession(p => ({ ...p, [key]: !on }))}\n                  className={`mod-pill${on ? \" on\" : \"\"}`}\n                  style={{ \"--pill-color\": color } as React.CSSProperties}>\n                  <span className=\"mod-dot\" />\n                  {label}\n                </button>\n              );\n            })}\n          </div>\n\n          {/* Master play */}\n          <button\n            onClick={toggleMaster}\n            className={`master-play${session.playing ? \" active\" : \"\"}`}\n            style={{ \"--play-color\": \"var(--accent-green)\" } as React.CSSProperties}>\n            {session.playing\n              ? <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"2\"/></svg>\n              : <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"5 3 19 12 5 21 5 3\"/></svg>\n            }\n          </button>\n        </header>\n\n        {/* ── WAVEFORM ── */}\n        <Waveform analyser={analyserRef.current} playing={session.playing} accent={activeAccent} />\n\n        {/* ── ACTIVE SEGMENT BADGE ── */}\n        {session.activeSegment && session.playing && (\n          <div style={{ padding:\"4px 16px\", background:\"var(--bg2)\", borderBottom:\"1px solid var(--border)\", display:\"flex\", gap:8, alignItems:\"center\" }}>\n            <div style={{ width:6, height:6, borderRadius:\"50%\", background:session.activeSegment.color }} />\n            <span style={{ fontSize:9, letterSpacing:\"0.1em\", color:\"var(--text-dim)\" }}>\n              {session.activeSegment.label.toUpperCase()} · {session.activeSegment.brainwave.toUpperCase()}\n            </span>\n          </div>\n        )}\n\n        {/* ── MAIN CONTENT ── */}\n        <main className=\"scroll-area\" style={{ flex:1, padding:\"16px 14px 120px\" }}>\n          {tab === \"timeline\"  && <TimelineTab session={session} setSession={setSession} masterPlaying={session.playing} masterPlay={masterPlay} masterStop={masterStop} />}\n          {tab === \"binaural\"  && <BinauralTab session={session} setSession={setSession} />}\n          {tab === \"ocean\"     && <OceanPulseTab session={session} setSession={setSession} />}\n          {tab === \"wisdom\"    && <TTSWisdomTab session={session} setSession={setSession} speakWisdom={speakWisdom} />}\n          {tab === \"clock\"     && <ClockTab session={session} setSession={setSession} />}\n        </main>\n\n        {/* ── NAV ── */}\n        <nav className=\"nav-bar\" style={{ position:\"absolute\", bottom:0, left:0, right:0, flexShrink:0 }}>\n          {NAV.map(({ id, label, accent, icon }) => {\n            const Icon = Icons[icon] as () => JSX.Element;\n            const active = tab === id;\n            return (\n              <button key={id} onClick={() => setTab(id)}\n                className={`nav-btn${active ? \" active\" : \"\"}`}\n                style={{ color: active ? accent : undefined }}>\n                <Icon />\n                {label}\n              </button>\n            );\n          })}\n        </nav>\n      </div>\n    </div>\n  );\n}\n",["D",1773360801404],46,{"_105":468,"_165":147,"_162":341,"_97":340,"_173":469,"_171":191,"_102":182,"_164":236,"_107":470,"_166":471,"_175":-5},"ac9f95e2-1e70-11f1-b5a6-42dde27851f2","import React, { useState } from \"react\";\nimport { BinauralTab } from \"https://esm.town/v/all/brain/frontend/components/BinauralTab.tsx\";\nimport { OceanPulseTab } from \"https://esm.town/v/all/brain/frontend/components/OceanPulseTab.tsx\";\nimport { TimelineTab } from \"https://esm.town/v/all/brain/frontend/components/TimelineTab.tsx\";\nimport { TTSWisdomTab } from \"https://esm.town/v/all/brain/frontend/components/TTSWisdomTab.tsx\";\nimport { ClockTab } from \"https://esm.town/v/all/brain/frontend/components/ClockTab.tsx\";\nimport { Icons } from \"https://esm.town/v/all/brain/frontend/components/Icons.tsx\";\n\ntype Tab = \"binaural\" | \"ocean\" | \"timeline\" | \"wisdom\" | \"clock\";\n\nconst NAV: { id: Tab; label: string; accent: string; icon: keyof typeof Icons }[] = [\n  { id: \"binaural\", label: \"BEATS\",  accent: \"var(--accent-blue)\",   icon: \"Waves\"    },\n  { id: \"ocean\",    label: \"OCEAN\",  accent: \"var(--accent-cyan)\",   icon: \"Ocean\"    },\n  { id: \"timeline\", label: \"FLOW\",   accent: \"var(--accent-violet)\", icon: \"Timeline\" },\n  { id: \"wisdom\",   label: \"WISDOM\", accent: \"var(--accent-amber)\",  icon: \"Quote\"    },\n  { id: \"clock\",    label: \"CLOCK\",  accent: \"var(--accent-green)\",  icon: \"Clock\"    },\n];\n\nexport default function App() {\n  const [tab, setTab] = useState<Tab>(\"binaural\");\n\n  return (\n    <div className=\"app-root\">\n      <style>{`\n        @import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');\n\n        :root {\n          --bg:           #0d1117;\n          --bg2:          #161b22;\n          --bg3:          #1c2330;\n          --border:       rgba(255,255,255,0.07);\n          --border2:      rgba(255,255,255,0.13);\n          --text:         #c9d1d9;\n          --text-dim:     #6e7681;\n          --text-bright:  #f0f6fc;\n          --accent-blue:  #58a6ff;\n          --accent-cyan:  #39d0d8;\n          --accent-violet:#bc8cff;\n          --accent-amber: #e3b341;\n          --accent-green: #3fb950;\n          --accent-rose:  #f85149;\n          --glow-blue:    rgba(88,166,255,0.18);\n          --glow-cyan:    rgba(57,208,216,0.18);\n          --glow-violet:  rgba(188,140,255,0.18);\n          --glow-amber:   rgba(227,179,65,0.18);\n          --glow-green:   rgba(63,185,80,0.18);\n        }\n\n        * { box-sizing: border-box; margin: 0; padding: 0; }\n\n        body {\n          background: var(--bg);\n          color: var(--text);\n          font-family: 'Space Mono', 'Courier New', monospace;\n          -webkit-font-smoothing: antialiased;\n        }\n\n        .app-root {\n          min-height: 100dvh;\n          display: flex;\n          justify-content: center;\n          background: var(--bg);\n        }\n\n        .app-shell {\n          width: 100%;\n          max-width: 430px;\n          display: flex;\n          flex-direction: column;\n          height: 100dvh;\n          position: relative;\n          border-left: 1px solid var(--border2);\n          border-right: 1px solid var(--border2);\n        }\n\n        /* ── DOUBLE-BORDER CARD ── */\n        .card {\n          background: var(--bg2);\n          border: 1px solid var(--border2);\n          outline: 1px solid var(--border);\n          outline-offset: 3px;\n          border-radius: 14px;\n          padding: 18px;\n        }\n        .card-sm {\n          background: var(--bg2);\n          border: 1px solid var(--border2);\n          outline: 1px solid var(--border);\n          outline-offset: 2px;\n          border-radius: 10px;\n          padding: 12px 14px;\n        }\n\n        /* ── INSET / SUNKEN ── */\n        .inset {\n          background: var(--bg);\n          border: 1px solid var(--border);\n          outline: 1px solid var(--border2);\n          outline-offset: 2px;\n          border-radius: 10px;\n        }\n\n        /* ── SLIDER ── */\n        .slider-thumb {\n          -webkit-appearance: none;\n          appearance: none;\n          width: 100%;\n          height: 4px;\n          border-radius: 2px;\n          background: linear-gradient(to right, var(--accent-blue), var(--bg3));\n          outline: none;\n          cursor: pointer;\n        }\n        .slider-thumb::-webkit-slider-thumb {\n          -webkit-appearance: none;\n          width: 16px; height: 16px;\n          border-radius: 50%;\n          background: var(--bg2);\n          border: 1px solid var(--border2);\n          outline: 1px solid var(--border);\n          outline-offset: 2px;\n          cursor: pointer;\n          box-shadow: 0 0 8px var(--glow-blue);\n        }\n        .slider-thumb::-moz-range-thumb {\n          width: 16px; height: 16px;\n          border-radius: 50%;\n          background: var(--bg2);\n          border: 1px solid var(--border2);\n          cursor: pointer;\n        }\n\n        /* ── SCROLLBAR ── */\n        .scroll-area { overflow-y: auto; }\n        .scroll-area::-webkit-scrollbar { width: 3px; }\n        .scroll-area::-webkit-scrollbar-track { background: transparent; }\n        .scroll-area::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }\n\n        /* ── NAV ── */\n        .nav-bar {\n          background: var(--bg2);\n          border-top: 1px solid var(--border2);\n          outline-top: 1px solid var(--border);\n          display: flex;\n          padding: 8px;\n          gap: 4px;\n        }\n        .nav-btn {\n          flex: 1;\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          justify-content: center;\n          gap: 4px;\n          padding: 8px 4px;\n          border-radius: 8px;\n          border: 1px solid transparent;\n          background: transparent;\n          color: var(--text-dim);\n          font-family: inherit;\n          font-size: 8px;\n          font-weight: 700;\n          letter-spacing: 0.08em;\n          cursor: pointer;\n          transition: all 0.18s ease;\n        }\n        .nav-btn.active {\n          background: var(--bg3);\n          border: 1px solid var(--border2);\n          outline: 1px solid var(--border);\n          outline-offset: 1px;\n          color: var(--active-color, var(--accent-blue));\n        }\n        .nav-btn:not(.active):hover { color: var(--text); }\n\n        /* ── PLAY BUTTON ── */\n        .play-btn {\n          width: 100px; height: 100px;\n          border-radius: 50%;\n          background: var(--bg2);\n          border: 1px solid var(--border2);\n          outline: 1px solid var(--border);\n          outline-offset: 4px;\n          display: flex; align-items: center; justify-content: center;\n          cursor: pointer;\n          color: var(--text-dim);\n          transition: all 0.2s ease;\n          font-family: inherit;\n        }\n        .play-btn.active {\n          background: var(--bg3);\n          border-color: var(--active-color, var(--accent-blue));\n          outline-color: color-mix(in srgb, var(--active-color, var(--accent-blue)) 30%, transparent);\n          color: var(--active-color, var(--accent-blue));\n          box-shadow: 0 0 24px color-mix(in srgb, var(--active-color, var(--accent-blue)) 25%, transparent);\n        }\n        .play-btn:not(.active):hover {\n          color: var(--text);\n          border-color: var(--border2);\n        }\n\n        /* ── PRESETS GRID ── */\n        .preset-grid {\n          display: grid;\n          grid-template-columns: repeat(3, 1fr);\n          gap: 8px;\n        }\n        .preset-btn {\n          background: var(--bg2);\n          border: 1px solid var(--border2);\n          outline: 1px solid var(--border);\n          outline-offset: 2px;\n          border-radius: 10px;\n          padding: 10px 8px;\n          cursor: pointer;\n          font-family: inherit;\n          color: var(--text-dim);\n          transition: all 0.18s ease;\n          text-align: left;\n        }\n        .preset-btn:hover { color: var(--text); border-color: var(--border2); }\n        .preset-btn.active {\n          background: var(--bg3);\n          border-color: var(--active-color, var(--accent-blue));\n          outline-color: color-mix(in srgb, var(--active-color, var(--accent-blue)) 25%, transparent);\n          color: var(--active-color, var(--accent-blue));\n        }\n        .preset-name {\n          font-size: 10px;\n          font-weight: 700;\n          letter-spacing: 0.06em;\n          display: block;\n          margin-bottom: 4px;\n        }\n        .preset-hz {\n          font-size: 9px;\n          opacity: 0.55;\n          display: block;\n          line-height: 1.3;\n        }\n        .preset-wave {\n          font-size: 8px;\n          margin-top: 3px;\n          display: block;\n          opacity: 0.4;\n          letter-spacing: 0.04em;\n        }\n\n        /* ── NOISE PILLS ── */\n        .noise-btn {\n          background: var(--bg2);\n          border: 1px solid var(--border);\n          border-radius: 6px;\n          padding: 4px 10px;\n          font-family: inherit;\n          font-size: 9px;\n          font-weight: 700;\n          color: var(--text-dim);\n          cursor: pointer;\n          letter-spacing: 0.06em;\n          transition: all 0.15s;\n        }\n        .noise-btn.active {\n          border-color: var(--accent-blue);\n          color: var(--accent-blue);\n          background: var(--bg3);\n        }\n\n        /* ── MISC ── */\n        .label-row {\n          display: flex;\n          justify-content: space-between;\n          align-items: baseline;\n          margin-bottom: 6px;\n        }\n        .label-key {\n          font-size: 9px;\n          font-weight: 700;\n          letter-spacing: 0.1em;\n          color: var(--text-dim);\n          text-transform: uppercase;\n        }\n        .label-val {\n          font-size: 11px;\n          font-weight: 700;\n          color: var(--accent-blue);\n        }\n        .section-title {\n          font-size: 18px;\n          font-weight: 700;\n          color: var(--text-bright);\n          letter-spacing: -0.01em;\n        }\n        .section-sub {\n          font-size: 10px;\n          color: var(--text-dim);\n          letter-spacing: 0.06em;\n          margin-top: 2px;\n        }\n        .dim { color: var(--text-dim); }\n        .bright { color: var(--text-bright); }\n        .mono { font-family: 'Space Mono', monospace; }\n\n        select {\n          background: var(--bg);\n          border: 1px solid var(--border2);\n          border-radius: 6px;\n          color: var(--text);\n          font-family: inherit;\n          font-size: 10px;\n          padding: 6px 8px;\n          outline: none;\n          width: 100%;\n        }\n        select option { background: var(--bg2); }\n\n        input[type=\"number\"] {\n          background: var(--bg);\n          border: 1px solid var(--border2);\n          border-radius: 6px;\n          color: var(--text);\n          font-family: inherit;\n          font-size: 11px;\n          padding: 6px 8px;\n          outline: none;\n          width: 100%;\n        }\n        input[type=\"text\"], textarea {\n          background: var(--bg);\n          border: 1px solid var(--border2);\n          border-radius: 6px;\n          color: var(--text);\n          font-family: inherit;\n          font-size: 11px;\n          padding: 8px 10px;\n          outline: none;\n          width: 100%;\n        }\n        input::placeholder, textarea::placeholder { color: var(--text-dim); }\n\n        /* live dot */\n        @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }\n        .live-dot { animation: pulse 2s ease-in-out infinite; }\n      `}</style>\n\n      <div className=\"app-shell\">\n        {/* Header */}\n        <header style={{\n          padding: \"16px 20px 12px\",\n          display: \"flex\",\n          justifyContent: \"space-between\",\n          alignItems: \"center\",\n          borderBottom: \"1px solid var(--border)\",\n          background: \"var(--bg2)\",\n        }}>\n          <span style={{ fontSize: 15, fontWeight: 700, letterSpacing: \"0.12em\", color: \"var(--text-bright)\" }}>\n            NEURO<span style={{ color: \"var(--accent-blue)\" }}>SYNC</span>\n          </span>\n          <span style={{ fontSize: 9, letterSpacing: \"0.1em\", color: \"var(--text-dim)\", display: \"flex\", alignItems: \"center\", gap: 6 }}>\n            <span className=\"live-dot\" style={{ width: 6, height: 6, borderRadius: \"50%\", background: \"var(--accent-green)\", display: \"inline-block\" }} />\n            LIVE\n          </span>\n        </header>\n\n        {/* Main */}\n        <main className=\"scroll-area\" style={{ flex: 1, padding: \"20px 16px 120px\" }}>\n          {tab === \"binaural\"  && <BinauralTab />}\n          {tab === \"ocean\"     && <OceanPulseTab />}\n          {tab === \"timeline\"  && <TimelineTab />}\n          {tab === \"wisdom\"    && <TTSWisdomTab />}\n          {tab === \"clock\"     && <ClockTab />}\n        </main>\n\n        {/* Nav */}\n        <nav className=\"nav-bar\" style={{ position: \"absolute\", bottom: 0, left: 0, right: 0 }}>\n          {NAV.map(({ id, label, accent, icon }) => {\n            const Icon = Icons[icon] as () => JSX.Element;\n            const active = tab === id;\n            return (\n              <button\n                key={id}\n                onClick={() => setTab(id)}\n                className={`nav-btn${active ? \" active\" : \"\"}`}\n                style={{ \"--active-color\": accent } as React.CSSProperties}\n              >\n                <Icon />\n                {label}\n              </button>\n            );\n          })}\n        </nav>\n      </div>\n    </div>\n  );\n}\n",["D",1773360470639],38,{"_105":473,"_165":147,"_162":341,"_97":340,"_173":474,"_171":191,"_102":167,"_164":236,"_107":475,"_166":476,"_175":-5},"73eb6d66-1e70-11f1-9285-42dde27851f2","import React, { useState } from \"react\";\nimport { BinauralTab } from \"https://esm.town/v/all/brain/frontend/components/BinauralTab.tsx\";\nimport { OceanPulseTab } from \"https://esm.town/v/all/brain/frontend/components/OceanPulseTab.tsx\";\nimport { TimelineTab } from \"https://esm.town/v/all/brain/frontend/components/TimelineTab.tsx\";\nimport { TTSWisdomTab } from \"https://esm.town/v/all/brain/frontend/components/TTSWisdomTab.tsx\";\nimport { ClockTab } from \"https://esm.town/v/all/brain/frontend/components/ClockTab.tsx\";\nimport { Icons } from \"https://esm.town/v/all/brain/frontend/components/Icons.tsx\";\n\ntype Tab = \"binaural\" | \"ocean\" | \"timeline\" | \"wisdom\" | \"clock\";\n\nconst NAV: { id: Tab; label: string; color: string; icon: keyof typeof Icons }[] = [\n  { id: \"binaural\", label: \"BEATS\", color: \"text-blue-500\", icon: \"Waves\" },\n  { id: \"ocean\",    label: \"OCEAN\", color: \"text-cyan-500\",  icon: \"Ocean\" },\n  { id: \"timeline\", label: \"FLOW\",  color: \"text-violet-500\",icon: \"Timeline\" },\n  { id: \"wisdom\",   label: \"WISDOM\",color: \"text-amber-500\", icon: \"Quote\" },\n  { id: \"clock\",    label: \"CLOCK\", color: \"text-emerald-500\",icon: \"Clock\" },\n];\n\nexport default function App() {\n  const [tab, setTab] = useState<Tab>(\"binaural\");\n\n  return (\n    <div className=\"min-h-screen bg-[#e0e5ec] text-[#4a5568] font-sans selection:bg-blue-200 flex justify-center\">\n      <style>{`\n        .neo-bg   { background-color: #e0e5ec; }\n        .neo-shadow { box-shadow: 8px 8px 16px #a3b1c6, -8px -8px 16px #ffffff; }\n        .neo-shadow-sm { box-shadow: 4px 4px 8px #a3b1c6, -4px -4px 8px #ffffff; }\n        .neo-inset { box-shadow: inset 5px 5px 10px #a3b1c6, inset -5px -5px 10px #ffffff; }\n        .slider-thumb::-webkit-slider-thumb { appearance:none; width:24px; height:24px; border-radius:50%; background:#e0e5ec; box-shadow:3px 3px 6px #a3b1c6,-3px -3px 6px #ffffff; cursor:pointer; }\n        .slider-thumb::-moz-range-thumb { width:24px; height:24px; border-radius:50%; background:#e0e5ec; box-shadow:3px 3px 6px #a3b1c6,-3px -3px 6px #ffffff; cursor:pointer; border:none; }\n        .hide-scrollbar::-webkit-scrollbar { display:none; }\n        .hide-scrollbar { -ms-overflow-style:none; scrollbar-width:none; }\n        select option { background: #e0e5ec; color: #4a5568; }\n      `}</style>\n\n      <div className=\"w-full max-w-md flex flex-col h-screen relative shadow-2xl overflow-hidden\">\n        {/* Header */}\n        <header className=\"px-6 pt-5 pb-3 flex justify-between items-center z-10 neo-bg\">\n          <h1 className=\"text-xl font-bold tracking-wider text-[#4a5568]\">\n            NEURO<span className=\"text-[#8ba3c7]\">SYNC</span>\n          </h1>\n          <div className=\"flex items-center gap-1 text-[10px] font-bold text-[#a3b1c6] uppercase tracking-widest\">\n            <span className=\"w-2 h-2 rounded-full bg-emerald-400 animate-pulse inline-block mr-1\" />\n            LIVE\n          </div>\n        </header>\n\n        {/* Main scroll area */}\n        <main className=\"flex-1 overflow-y-auto px-6 pb-28 pt-2 hide-scrollbar neo-bg\">\n          {tab === \"binaural\"  && <BinauralTab />}\n          {tab === \"ocean\"     && <OceanPulseTab />}\n          {tab === \"timeline\"  && <TimelineTab />}\n          {tab === \"wisdom\"    && <TTSWisdomTab />}\n          {tab === \"clock\"     && <ClockTab />}\n        </main>\n\n        {/* Bottom Nav */}\n        <nav className=\"absolute bottom-0 w-full px-4 pb-4 pt-2 neo-bg z-20\">\n          <div className=\"flex justify-around items-center rounded-2xl p-2 neo-shadow\">\n            {NAV.map(({ id, label, color, icon }) => {\n              const Icon = Icons[icon] as () => JSX.Element;\n              const active = tab === id;\n              return (\n                <button key={id} onClick={() => setTab(id)}\n                  className={`flex-1 py-2 px-1 rounded-xl flex flex-col items-center justify-center transition-all duration-200 gap-1\n                    ${active ? `neo-inset ${color}` : \"text-[#6b7c93] hover:text-[#4a5568]\"}`}>\n                  <Icon />\n                  <span className=\"text-[9px] font-bold tracking-wider\">{label}</span>\n                </button>\n              );\n            })}\n          </div>\n        </nav>\n      </div>\n    </div>\n  );\n}\n",["D",1773360375507],31,{"_105":478,"_165":147,"_162":341,"_97":340,"_173":479,"_171":191,"_102":393,"_164":236,"_107":480,"_166":481,"_175":-5},"151a5540-1e70-11f1-99a8-42dde27851f2","import React, { useState } from \"https://esm.sh/react@18\";\nimport { BinauralTab } from \"https://esm.town/v/all/brain/frontend/components/BinauralTab.tsx\";\nimport { OceanPulseTab } from \"https://esm.town/v/all/brain/frontend/components/OceanPulseTab.tsx\";\nimport { TimelineTab } from \"https://esm.town/v/all/brain/frontend/components/TimelineTab.tsx\";\nimport { TTSWisdomTab } from \"https://esm.town/v/all/brain/frontend/components/TTSWisdomTab.tsx\";\nimport { ClockTab } from \"https://esm.town/v/all/brain/frontend/components/ClockTab.tsx\";\nimport { Icons } from \"https://esm.town/v/all/brain/frontend/components/Icons.tsx\";\n\ntype Tab = \"binaural\" | \"ocean\" | \"timeline\" | \"wisdom\" | \"clock\";\n\nconst NAV: { id: Tab; label: string; color: string; icon: keyof typeof Icons }[] = [\n  { id: \"binaural\", label: \"BEATS\", color: \"text-blue-500\", icon: \"Waves\" },\n  { id: \"ocean\",    label: \"OCEAN\", color: \"text-cyan-500\",  icon: \"Ocean\" },\n  { id: \"timeline\", label: \"FLOW\",  color: \"text-violet-500\",icon: \"Timeline\" },\n  { id: \"wisdom\",   label: \"WISDOM\",color: \"text-amber-500\", icon: \"Quote\" },\n  { id: \"clock\",    label: \"CLOCK\", color: \"text-emerald-500\",icon: \"Clock\" },\n];\n\nexport default function App() {\n  const [tab, setTab] = useState<Tab>(\"binaural\");\n\n  return (\n    <div className=\"min-h-screen bg-[#e0e5ec] text-[#4a5568] font-sans selection:bg-blue-200 flex justify-center\">\n      <style>{`\n        .neo-bg   { background-color: #e0e5ec; }\n        .neo-shadow { box-shadow: 8px 8px 16px #a3b1c6, -8px -8px 16px #ffffff; }\n        .neo-shadow-sm { box-shadow: 4px 4px 8px #a3b1c6, -4px -4px 8px #ffffff; }\n        .neo-inset { box-shadow: inset 5px 5px 10px #a3b1c6, inset -5px -5px 10px #ffffff; }\n        .slider-thumb::-webkit-slider-thumb { appearance:none; width:24px; height:24px; border-radius:50%; background:#e0e5ec; box-shadow:3px 3px 6px #a3b1c6,-3px -3px 6px #ffffff; cursor:pointer; }\n        .slider-thumb::-moz-range-thumb { width:24px; height:24px; border-radius:50%; background:#e0e5ec; box-shadow:3px 3px 6px #a3b1c6,-3px -3px 6px #ffffff; cursor:pointer; border:none; }\n        .hide-scrollbar::-webkit-scrollbar { display:none; }\n        .hide-scrollbar { -ms-overflow-style:none; scrollbar-width:none; }\n        select option { background: #e0e5ec; color: #4a5568; }\n      `}</style>\n\n      <div className=\"w-full max-w-md flex flex-col h-screen relative shadow-2xl overflow-hidden\">\n        {/* Header */}\n        <header className=\"px-6 pt-5 pb-3 flex justify-between items-center z-10 neo-bg\">\n          <h1 className=\"text-xl font-bold tracking-wider text-[#4a5568]\">\n            NEURO<span className=\"text-[#8ba3c7]\">SYNC</span>\n          </h1>\n          <div className=\"flex items-center gap-1 text-[10px] font-bold text-[#a3b1c6] uppercase tracking-widest\">\n            <span className=\"w-2 h-2 rounded-full bg-emerald-400 animate-pulse inline-block mr-1\" />\n            LIVE\n          </div>\n        </header>\n\n        {/* Main scroll area */}\n        <main className=\"flex-1 overflow-y-auto px-6 pb-28 pt-2 hide-scrollbar neo-bg\">\n          {tab === \"binaural\"  && <BinauralTab />}\n          {tab === \"ocean\"     && <OceanPulseTab />}\n          {tab === \"timeline\"  && <TimelineTab />}\n          {tab === \"wisdom\"    && <TTSWisdomTab />}\n          {tab === \"clock\"     && <ClockTab />}\n        </main>\n\n        {/* Bottom Nav */}\n        <nav className=\"absolute bottom-0 w-full px-4 pb-4 pt-2 neo-bg z-20\">\n          <div className=\"flex justify-around items-center rounded-2xl p-2 neo-shadow\">\n            {NAV.map(({ id, label, color, icon }) => {\n              const Icon = Icons[icon] as () => JSX.Element;\n              const active = tab === id;\n              return (\n                <button key={id} onClick={() => setTab(id)}\n                  className={`flex-1 py-2 px-1 rounded-xl flex flex-col items-center justify-center transition-all duration-200 gap-1\n                    ${active ? `neo-inset ${color}` : \"text-[#6b7c93] hover:text-[#4a5568]\"}`}>\n                  <Icon />\n                  <span className=\"text-[9px] font-bold tracking-wider\">{label}</span>\n                </button>\n              );\n            })}\n          </div>\n        </nav>\n      </div>\n    </div>\n  );\n}\n",["D",1773360216418],22,{"_105":483,"_165":147,"_162":341,"_97":340,"_173":484,"_171":191,"_102":33,"_164":236,"_107":485,"_166":486,"_175":-5},"da8511f4-1e6f-11f1-b19f-42dde27851f2","import React, { useState } from \"https://esm.sh/react@18\";\nimport { BinauralTab } from \"./components/BinauralTab.tsx\";\nimport { OceanPulseTab } from \"./components/OceanPulseTab.tsx\";\nimport { TimelineTab } from \"./components/TimelineTab.tsx\";\nimport { TTSWisdomTab } from \"./components/TTSWisdomTab.tsx\";\nimport { ClockTab } from \"./components/ClockTab.tsx\";\nimport { Icons } from \"./components/Icons.tsx\";\n\ntype Tab = \"binaural\" | \"ocean\" | \"timeline\" | \"wisdom\" | \"clock\";\n\nconst NAV: { id: Tab; label: string; color: string; icon: keyof typeof Icons }[] = [\n  { id: \"binaural\", label: \"BEATS\", color: \"text-blue-500\", icon: \"Waves\" },\n  { id: \"ocean\",    label: \"OCEAN\", color: \"text-cyan-500\",  icon: \"Ocean\" },\n  { id: \"timeline\", label: \"FLOW\",  color: \"text-violet-500\",icon: \"Timeline\" },\n  { id: \"wisdom\",   label: \"WISDOM\",color: \"text-amber-500\", icon: \"Quote\" },\n  { id: \"clock\",    label: \"CLOCK\", color: \"text-emerald-500\",icon: \"Clock\" },\n];\n\nexport default function App() {\n  const [tab, setTab] = useState<Tab>(\"binaural\");\n\n  return (\n    <div className=\"min-h-screen bg-[#e0e5ec] text-[#4a5568] font-sans selection:bg-blue-200 flex justify-center\">\n      <style>{`\n        .neo-bg   { background-color: #e0e5ec; }\n        .neo-shadow { box-shadow: 8px 8px 16px #a3b1c6, -8px -8px 16px #ffffff; }\n        .neo-shadow-sm { box-shadow: 4px 4px 8px #a3b1c6, -4px -4px 8px #ffffff; }\n        .neo-inset { box-shadow: inset 5px 5px 10px #a3b1c6, inset -5px -5px 10px #ffffff; }\n        .slider-thumb::-webkit-slider-thumb { appearance:none; width:24px; height:24px; border-radius:50%; background:#e0e5ec; box-shadow:3px 3px 6px #a3b1c6,-3px -3px 6px #ffffff; cursor:pointer; }\n        .slider-thumb::-moz-range-thumb { width:24px; height:24px; border-radius:50%; background:#e0e5ec; box-shadow:3px 3px 6px #a3b1c6,-3px -3px 6px #ffffff; cursor:pointer; border:none; }\n        .hide-scrollbar::-webkit-scrollbar { display:none; }\n        .hide-scrollbar { -ms-overflow-style:none; scrollbar-width:none; }\n        select option { background: #e0e5ec; color: #4a5568; }\n      `}</style>\n\n      <div className=\"w-full max-w-md flex flex-col h-screen relative shadow-2xl overflow-hidden\">\n        {/* Header */}\n        <header className=\"px-6 pt-5 pb-3 flex justify-between items-center z-10 neo-bg\">\n          <h1 className=\"text-xl font-bold tracking-wider text-[#4a5568]\">\n            NEURO<span className=\"text-[#8ba3c7]\">SYNC</span>\n          </h1>\n          <div className=\"flex items-center gap-1 text-[10px] font-bold text-[#a3b1c6] uppercase tracking-widest\">\n            <span className=\"w-2 h-2 rounded-full bg-emerald-400 animate-pulse inline-block mr-1\" />\n            LIVE\n          </div>\n        </header>\n\n        {/* Main scroll area */}\n        <main className=\"flex-1 overflow-y-auto px-6 pb-28 pt-2 hide-scrollbar neo-bg\">\n          {tab === \"binaural\"  && <BinauralTab />}\n          {tab === \"ocean\"     && <OceanPulseTab />}\n          {tab === \"timeline\"  && <TimelineTab />}\n          {tab === \"wisdom\"    && <TTSWisdomTab />}\n          {tab === \"clock\"     && <ClockTab />}\n        </main>\n\n        {/* Bottom Nav */}\n        <nav className=\"absolute bottom-0 w-full px-4 pb-4 pt-2 neo-bg z-20\">\n          <div className=\"flex justify-around items-center rounded-2xl p-2 neo-shadow\">\n            {NAV.map(({ id, label, color, icon }) => {\n              const Icon = Icons[icon] as () => JSX.Element;\n              const active = tab === id;\n              return (\n                <button key={id} onClick={() => setTab(id)}\n                  className={`flex-1 py-2 px-1 rounded-xl flex flex-col items-center justify-center transition-all duration-200 gap-1\n                    ${active ? `neo-inset ${color}` : \"text-[#6b7c93] hover:text-[#4a5568]\"}`}>\n                  <Icon />\n                  <span className=\"text-[9px] font-bold tracking-wider\">{label}</span>\n                </button>\n              );\n            })}\n          </div>\n        </nav>\n      </div>\n    </div>\n  );\n}\n",["D",1773360118140],18,"versions",[489,491,492,493,494,495,496,497,498,499,500,501,502],{"_355":425,"_490":427},"previous",{"_355":427,"_490":432},{"_355":432,"_490":437},{"_355":437,"_490":442},{"_355":442,"_490":447},{"_355":447,"_490":452},{"_355":452,"_490":457},{"_355":457,"_490":462},{"_355":462,"_490":467},{"_355":467,"_490":472},{"_355":472,"_490":477},{"_355":477,"_490":482},{"_355":482,"_490":-5},"versionNumber","page","hasNext","actionData","errors"]
</article></body></html>

all

brain

History for App.tsx