:root{--bg: #05060f;--panel: #0c0f21;--panel-2: #11162e;--line: #232a4d;--ink: #eef1ff;--ink-dim: #a8b0d8;--accent: #6ee7ff;--accent-2: #b07bff;--danger: #ff9f9f;--radius: 14px;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--ink);font-family:Segoe UI,system-ui,-apple-system,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}.app{display:flex;flex-direction:column;height:100%;min-height:100dvh}.topbar{display:flex;align-items:center;justify-content:flex-start;gap:18px;padding:10px 210px 10px 18px;border-bottom:1px solid var(--line);background:#080a18e6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);flex-wrap:wrap}.wordmark{display:inline-flex;align-items:center;gap:10px;background:none;border:0;color:var(--ink);font-size:1.05rem;font-weight:700;letter-spacing:.02em;cursor:pointer;padding:8px;border-radius:10px}.wordmark .dot{width:12px;height:12px;border-radius:50%;background:linear-gradient(140deg,var(--accent),var(--accent-2));box-shadow:0 0 14px #6ee7ffcc;animation:pulse 2.6s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.6}}.topbar nav{display:flex;gap:6px}.navlink{background:none;border:1px solid transparent;color:var(--ink-dim);padding:10px 16px;min-height:44px;border-radius:999px;font-size:.95rem;cursor:pointer;transition:color .18s ease,background .18s ease,border-color .18s ease}.navlink:hover{color:var(--ink);background:#ffffff0d}.navlink.active{color:#06121a;background:var(--accent);font-weight:650}main{flex:1;min-height:0}:where(button,select,input,a,canvas):focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:10px}.screen.life{display:grid;grid-template-columns:minmax(0,1fr) 380px;height:100%;min-height:0}.stage{position:relative;min-height:320px;background:radial-gradient(circle at 50% 30%,#101637,#05060f 70%)}.stage canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}.stage canvas:active{cursor:grabbing}.stage-overlay{position:absolute;inset:auto 0 0 0;padding:16px;pointer-events:none;background:linear-gradient(to top,rgba(5,6,15,.85),transparent)}.readouts{display:flex;gap:12px;flex-wrap:wrap}.readout{background:#0a0d20b8;border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px;min-width:132px}.readout .label{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}.readout strong{display:block;font-size:1.3rem;font-variant-numeric:tabular-nums}.readout .sub{font-size:.9rem;color:var(--ink-dim)}.meter{margin-top:12px;height:8px;border-radius:999px;background:#ffffff17;overflow:hidden}.meter-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .14s linear}.wave-trace{margin-bottom:12px;padding:8px 12px 4px;border:1px solid var(--line);border-radius:var(--radius);background:#0a0d20b8}.wave-trace .label{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}.wave-trace canvas{display:block;width:100%;height:64px}@media (max-width: 900px){.wave-trace canvas{height:48px}}.panel{border-left:1px solid var(--line);background:var(--panel);padding:22px 20px 32px;overflow-y:auto}.panel-head h1{margin:0 0 8px;font-size:1.4rem;line-height:1.25}.panel-head p{margin:0 0 18px;color:var(--ink-dim);font-size:.95rem}.actions{display:flex;flex-direction:column;gap:10px}.btn{min-height:48px;padding:12px 18px;border-radius:12px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);font-size:1rem;font-weight:600;cursor:pointer;transition:transform .12s ease,filter .18s ease,background .18s ease}.btn:hover:not(:disabled){filter:brightness(1.18)}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.6;cursor:progress}.btn.primary{background:linear-gradient(120deg,var(--accent),var(--accent-2));border-color:transparent;color:#06121a}.btn.primary.listening{background:linear-gradient(120deg,#ff8ab5,#ffca7a);animation:breathe 2s ease-in-out infinite}@keyframes breathe{0%,to{box-shadow:0 0 #ff8ab580}50%{box-shadow:0 0 0 12px #ff8ab500}}.btn.ghost{background:transparent}.btn.tiny{min-height:36px;padding:6px 12px;font-size:.85rem}.btn.back{align-self:flex-start;margin-bottom:14px}.alert{margin:14px 0 0;padding:12px 14px;border-radius:12px;border:1px solid #6a2b3d;background:#6a2b3d59;color:var(--danger);font-size:.92rem}.hint{margin:14px 0 0;color:var(--accent);font-size:.92rem}.history{margin-top:26px;border-top:1px solid var(--line);padding-top:18px}.history-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.history h2{margin:0;font-size:1rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-dim)}.empty{margin:12px 0 0;padding:16px;border:1px dashed var(--line);border-radius:var(--radius);color:var(--ink-dim);font-size:.95rem}.session-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}.session-list li{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}.session-when{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.95rem}.tag{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:#6ee7ff2e;color:var(--accent)}.session-stats{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:4px;color:var(--ink-dim);font-size:.95rem}.screen.settings{height:100%;overflow-y:auto}.settings-inner{max-width:760px;margin:0 auto;padding:26px 18px 60px}.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px;margin-bottom:18px}.card h2{margin:0 0 14px;font-size:1.1rem}.field{display:block;margin-bottom:16px}.field>span{display:block;margin-bottom:8px;font-size:.95rem;color:var(--ink-dim)}.field>span strong{color:var(--ink)}select,input[type=range]{width:100%;min-height:48px;border-radius:12px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);padding:10px 12px;font-size:1rem}input[type=range]{padding:0;accent-color:var(--accent)}.note{margin:0 0 8px;color:var(--ink-dim);font-size:.95rem}.styles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}.style-card{display:flex;flex-direction:column;gap:6px;text-align:left;padding:14px;border-radius:14px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);cursor:pointer;transition:border-color .18s ease,transform .12s ease}.style-card:hover{transform:translateY(-2px)}.style-card.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}.style-card .blurb{color:var(--ink-dim);font-size:.95rem}.swatch{height:12px;border-radius:999px}.swatch.aurora{background:linear-gradient(90deg,#2f6bff,#6ee7ff,#b07bff)}.swatch.ember{background:linear-gradient(90deg,#7a1f1f,#ff7a3c,#ffd166)}.swatch.mono{background:linear-gradient(90deg,#2b3350,#7b88b5,#dde3ff)}.toggle{display:flex;align-items:center;gap:12px;min-height:48px;cursor:pointer}.toggle input{width:22px;height:22px;accent-color:var(--accent)}.save-row{flex-direction:row;flex-wrap:wrap}.save-row .btn{flex:1 1 220px}.saved-line{min-height:1.6em;margin:10px 0 0;color:var(--accent);font-size:.92rem}@media (max-width: 900px){.screen.life{grid-template-columns:1fr;grid-template-rows:minmax(300px,46vh) auto;height:auto}.panel{border-left:0;border-top:1px solid var(--line)}.stage{min-height:300px}.readouts{gap:8px;flex-wrap:nowrap}.readout{flex:1 1 0;min-width:0;padding:8px 10px}.readout:nth-child(4){display:none}.readout .label{font-size:.66rem;letter-spacing:.08em}.readout strong{font-size:1.05rem}.topbar{padding:8px 12px}.topbar nav{width:100%}.topbar nav .navlink{flex:1}.wordmark{font-size:1rem}.navlink{padding:10px 12px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}}