@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root { color-scheme: dark; --ink:#e9f4ee; --muted:#82969a; --line:rgba(180,220,211,.14); --panel:rgba(15,30,36,.82); --mint:#9df4cd; --mint-deep:#54d2a4; --coral:#ff967e; }
* { box-sizing:border-box; }
html, body { margin:0; min-width:320px; min-height:100%; background:#071118; }
body { color:var(--ink); font-family:'DM Sans',system-ui,sans-serif; background-image:radial-gradient(ellipse at 72% -15%, rgba(35,126,126,.20), transparent 45%), linear-gradient(180deg,#071118 0%,#08141a 100%); }
button { font:inherit; }
.shell { max-width:1440px; margin:0 auto; padding:0 48px 32px; }
.topbar { height:92px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand-lockup,.top-actions,.connection,.card-heading,.feed-title,.feed-footer,.section-heading,.toggle-row,.stats div,.footer { display:flex; align-items:center; }
.brand-lockup { gap:13px; }
.brand-mark { width:28px; height:28px; display:flex; align-items:center; justify-content:center; gap:2px; transform:rotate(-16deg); }
.brand-mark span { width:6px; border-radius:6px; background:var(--mint); box-shadow:0 0 14px rgba(157,244,205,.5); }
.brand-mark span:nth-child(1){height:13px;opacity:.55}.brand-mark span:nth-child(2){height:22px}.brand-mark span:nth-child(3){height:16px;opacity:.7}
.brand { font:700 17px 'Space Grotesk',sans-serif; letter-spacing:.21em; }.tagline { color:var(--muted); font-size:11px; margin-top:2px; letter-spacing:.02em; }
.top-actions { gap:22px; }.connection { gap:9px; color:var(--muted); font:12px 'DM Mono',monospace; }.dot { width:7px; height:7px; border-radius:50%; background:#68777b; }.dot.live { background:var(--mint-deep); box-shadow:0 0 12px var(--mint-deep); }.dot.error { background:var(--coral); }
.source-picker{display:flex;align-items:center;gap:8px;color:var(--muted);font:9px 'DM Mono',monospace;letter-spacing:.12em}.source-picker select{appearance:none;border:1px solid var(--line);border-radius:5px;background:#0b1a20;color:#c9d8d5;padding:8px 27px 8px 10px;font:10px 'DM Mono',monospace;background-image:linear-gradient(45deg,transparent 50%,var(--mint) 50%),linear-gradient(135deg,var(--mint) 50%,transparent 50%);background-position:calc(100% - 13px) 12px,calc(100% - 9px) 12px;background-size:4px 4px,4px 4px;background-repeat:no-repeat;cursor:pointer}
.button { border:0; border-radius:6px; padding:12px 16px; color:#061017; font-weight:700; cursor:pointer; transition:transform .15s ease,filter .15s ease,opacity .15s ease; }.button:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.08)}.button:disabled{cursor:default;opacity:.45}.button-primary{background:var(--mint);font-size:12px}.button-primary span{font-size:15px;margin-left:8px}
.intro { display:flex; align-items:end; justify-content:space-between; padding:58px 0 44px; }.eyebrow { color:var(--mint-deep); font:500 10px 'DM Mono',monospace; letter-spacing:.16em; }.intro h1 { margin:12px 0 0; font:600 clamp(46px,6vw,78px)/.92 'Space Grotesk',sans-serif; letter-spacing:-.06em; }.intro h1 em{font-style:normal;color:var(--mint)}.intro-copy { width:300px; margin:0 7% 5px 0; color:var(--muted); font-size:14px; line-height:1.65; }
.workspace { display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:16px; }.card { background:var(--panel); border:1px solid var(--line); border-radius:10px; box-shadow:0 22px 70px rgba(0,0,0,.18); }.feed-card{padding:16px}.card-heading{justify-content:space-between;height:26px}.feed-title{gap:10px;font:600 11px 'DM Mono',monospace;letter-spacing:.1em}.live-pill{color:var(--coral);font-size:10px}.live-pill span{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--coral);margin:0 6px 1px 0;box-shadow:0 0 8px var(--coral)}.source-label{color:var(--muted);font:10px 'DM Mono',monospace}.source-label span{color:var(--mint-deep);font-size:15px;margin-left:4px}
.feed-stage { position:relative; overflow:hidden; margin-top:12px; min-height:500px; aspect-ratio:16/9; border-radius:6px; background:#061015; border:1px solid rgba(157,244,205,.09); }.feed-stage video,.feed-stage #youtubeFeed,.feed-stage #youtubeFeed iframe,.feed-stage canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.feed-stage video,.feed-stage #youtubeFeed{z-index:1;border:0;opacity:0;pointer-events:none;transition:opacity .4s ease}.feed-stage video.visible,.feed-stage #youtubeFeed.visible{opacity:1}.feed-stage #youtubeFeed iframe{border:0}.feed-stage canvas{z-index:2;pointer-events:none}.feed-empty{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:9px;color:var(--muted);font-size:12px}.feed-empty strong{color:var(--ink);font-size:14px;font-weight:500}.empty-orbit{height:50px;width:50px;position:relative;border:1px solid rgba(157,244,205,.23);border-radius:50%;margin-bottom:8px}.empty-orbit:before,.empty-orbit:after{content:'';position:absolute;inset:8px;border:1px solid rgba(157,244,205,.22);border-radius:50%;transform:rotate(54deg) scaleX(.45)}.empty-orbit:after{transform:rotate(-54deg) scaleX(.45)}.empty-orbit span{position:absolute;left:21px;top:21px;width:7px;height:7px;background:var(--mint);border-radius:50%;box-shadow:0 0 15px var(--mint)}.feed-corner{z-index:4;position:absolute;color:var(--muted);font:10px 'DM Mono',monospace;letter-spacing:.07em;background:rgba(3,12,16,.65);padding:6px 8px}.feed-corner span{color:var(--mint);margin-left:5px}.feed-corner-tl{top:12px;left:12px}.feed-corner-br{right:12px;bottom:12px}.feed-footer{gap:10px;padding:12px 2px 1px;color:var(--muted);font:10px 'DM Mono',monospace}.feed-footer a{color:#b2c6c4;text-decoration:none}.feed-footer a:hover{color:var(--mint)}.feed-footer-spacer{flex:1}
.instrument{padding:21px 22px;min-height:100%;display:flex;flex-direction:column}.signal-icon{color:var(--mint);font-size:24px;line-height:1}.number-label{margin-top:42px;color:var(--muted);font:10px 'DM Mono',monospace;letter-spacing:.15em}.number-display{height:94px;margin-top:4px;color:var(--ink);font:500 86px/.98 'Space Grotesk',sans-serif;letter-spacing:-.09em}.number-range{color:var(--muted);font:11px 'DM Mono',monospace}.number-range b{color:var(--mint);font-weight:400}.toggle-row{justify-content:space-between;color:#b4c2c1;font-size:12px}.toggle-row input{display:none}.toggle-row i{width:34px;height:19px;border-radius:20px;background:#24383b;position:relative;cursor:pointer}.toggle-row i:after{content:'';position:absolute;top:3px;left:3px;width:13px;height:13px;border-radius:50%;background:#6a7e80;transition:transform .2s,background .2s}.toggle-row input:checked+i{background:rgba(84,210,164,.3)}.toggle-row input:checked+i:after{transform:translateX(15px);background:var(--mint)}.rule{height:1px;background:var(--line);margin:24px 0 15px}.stats{display:flex;flex-direction:column;gap:12px}.stats div{justify-content:space-between;font:11px 'DM Mono',monospace}.stats span{color:var(--muted)}.stats b{font-weight:400;color:#c9d8d5}.sample-heading,.mix-heading,.parameter-row,.detection-item{display:flex;align-items:center;justify-content:space-between}.sample-heading,.mix-heading{color:var(--muted);font:10px 'DM Mono',monospace;letter-spacing:.15em}.sample-heading b,.mix-heading b{color:var(--mint);font-weight:400;letter-spacing:0}.parameters{display:flex;flex-direction:column;gap:10px;margin-top:18px}.parameter-row{gap:12px;font:10px 'DM Mono',monospace}.parameter-row span{color:var(--muted)}.parameter-row b{color:#c9d8d5;font-weight:400;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.parameter-row.hash b{max-width:145px;color:#88bba8;font-size:9px}.detection-details{margin-top:17px;color:var(--muted);font:10px 'DM Mono',monospace}.detection-details summary{cursor:pointer;display:flex;justify-content:space-between;color:#b4c2c1}.detection-list{display:flex;flex-direction:column;gap:7px;padding-top:10px}.detection-item{justify-content:flex-start;gap:6px;font-size:9px;color:#88bba8}.detection-item span{color:var(--muted)}.detection-empty{padding-top:10px;color:#708285;font-size:9px}.instrument-note{margin-top:24px;padding-top:0;color:#708285;font-size:11px;line-height:1.55}
.events-section{padding-top:61px}.section-heading{justify-content:space-between}.section-heading h2{margin:8px 0 0;font:500 25px 'Space Grotesk',sans-serif;letter-spacing:-.03em}.event-count{color:var(--muted);font:11px 'DM Mono',monospace}.event-count span{color:var(--mint);margin-right:5px}.event-log{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:21px}.event,.empty-event{min-height:75px;border:1px solid var(--line);border-radius:6px;background:rgba(15,30,36,.6);padding:13px}.event{position:relative;overflow:hidden}.event:before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--mint-deep)}.event-top{display:flex;justify-content:space-between;color:var(--muted);font:10px 'DM Mono',monospace}.event-id{color:var(--mint)}.event-body{margin-top:9px;color:#bac9c7;font-size:11px}.event-body b{color:var(--ink);font-weight:500}.empty-event{grid-column:1/-1;color:var(--muted);font:11px 'DM Mono',monospace;text-align:center;padding:24px}.footer{justify-content:space-between;margin-top:64px;padding-top:16px;border-top:1px solid var(--line);color:#587073;font:9px 'DM Mono',monospace;letter-spacing:.08em}
@media (max-width: 900px){.shell{padding:0 22px 26px}.topbar{height:auto;padding:20px 0;align-items:flex-start;gap:18px}.top-actions{flex-direction:column;align-items:flex-end;gap:12px}.connection{font-size:10px}.intro{padding:42px 0 34px;display:block}.intro-copy{margin:24px 0 0;width:auto;max-width:440px}.workspace{grid-template-columns:minmax(0,1fr)}.feed-stage{min-height:0}.instrument{min-height:0}.instrument-note{margin-top:30px}.event-log{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 560px){.shell{padding:0 14px 22px}.topbar{flex-direction:column;align-items:stretch}.top-actions{align-items:flex-start;gap:8px}.brand{font-size:14px}.button-primary{padding:10px}.intro h1{font-size:48px}.feed-stage{min-height:0}.source-label{display:none}.event-log{grid-template-columns:1fr}.footer{display:block;line-height:1.8}.footer span{display:block}.footer span+span{margin-top:5px}}