/* Kolmillo Labs identity: original logo + Mr. Trucho assets, Archivo and IBM Plex Mono. */
@font-face{font-family:Archivo;src:url('./assets/archivo-latin.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('./assets/ibm-plex-mono-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
:root{color-scheme:dark;--bg:#070c19;--paper:#10182b;--ink:#dee5ff;--muted:#a6b2d1;--line:#33405d;--mint:#b8ff66;--dark:#10182b;--red:#ff9685;--soft:#1a2641;--cobalt:#597eff;font-family:Archivo,system-ui,sans-serif}
body{background:var(--bg)}.shell{max-width:1440px;padding:0 54px}button,select,.panel,.pattern-panel,.record-card,.take,.notes textarea{border-radius:5px}button{min-height:44px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,.sequencer:focus-visible{outline-color:var(--cobalt)}select option{background:var(--paper);color:var(--ink)}.app-header{height:96px;gap:24px}.brand{display:block;line-height:0;flex-shrink:0}.brand-logo{width:215px;height:auto;display:block}.studio-label{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:1px;border-left:1px solid var(--line);padding-left:24px;color:var(--muted)}.local-badge>span{background:var(--mint)}.app-header>.quiet{font-size:11px;color:var(--ink)}.brand-scene{position:relative;display:grid;grid-template-columns:1.1fr 1fr;min-height:420px;isolation:isolate;overflow:hidden;border-bottom:1px solid var(--line)}.scene-copy{padding:45px 0 30px;position:relative;z-index:2;align-self:center}.scene-kicker{color:var(--muted);letter-spacing:2px;font-size:10px;margin-bottom:19px}.scene-copy h1{font-family:Archivo,sans-serif;font-size:76px;line-height:.95;font-weight:750;letter-spacing:-4.5px}.scene-copy h1 em{font-style:normal;color:var(--mint)}.scene-description{font-size:15px;line-height:1.5;margin:20px 0 23px;color:#bbc7e9}.scene-actions{display:flex;gap:20px;align-items:center}.scene-actions .primary{width:185px;background:var(--mint);color:#070c19;border-color:var(--mint);font-weight:600}.scene-actions .primary:hover{background:#d0ff9c}.scene-actions>span{font-size:11px;color:var(--muted);line-height:1.5}.scene-signature{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:1.4px;color:#8e9dc1;margin-top:28px}.trucho-scene{position:relative;margin:0;min-height:420px;align-self:stretch;overflow:hidden}.trucho-scene>img{position:absolute;top:-2%;left:0;width:100%;height:112%;object-fit:contain;object-position:center 25%;z-index:-1}.trucho-scene::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#070c19 0%,transparent 18%,transparent 88%,#070c19 100%),linear-gradient(0deg,#070c19 0%,transparent 24%);z-index:0;pointer-events:none}.trucho-scene figcaption{position:absolute;right:15px;bottom:26px;display:flex;gap:11px;align-items:center;color:var(--ink);z-index:1;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:1.3px}.identity-line{width:30px;height:1px;background:var(--mint)}.trucho-scene figcaption small{font-family:Archivo,sans-serif;display:block;margin-top:7px;font-size:11px;letter-spacing:0;color:var(--muted)}.scene-index{position:absolute;right:0;top:24px;font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:1px;color:#8292b8}.project-header{padding:31px 0 26px;gap:25px}.project-title{font-family:Archivo,sans-serif;font-size:30px;letter-spacing:-1px;font-weight:500}.eyebrow{font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:9px;letter-spacing:1.4px}.subtitle{color:var(--muted)}.workspace{gap:29px;grid-template-columns:minmax(0,1fr) 312px}h1,h2,h3{font-family:Archivo,sans-serif}.toolbar{margin-bottom:26px}.tempo-control input{font-family:'IBM Plex Mono',monospace;color:var(--ink)}.loop-badge strong{font-weight:400}.band-heading{font-size:25px;font-weight:550;letter-spacing:-.7px}.preset-label{color:var(--muted)}.instrument-tab{border:1px solid var(--line);background:transparent;border-radius:5px;color:var(--muted);padding:15px 13px}.instrument-tab .instrument-icon{color:var(--cobalt);font-size:23px}.instrument-tab[aria-pressed=true]{color:#070c19;background:var(--mint);border-color:var(--mint)}.instrument-tab[aria-pressed=true] .instrument-icon{color:#070c19}.pattern-panel{border-color:var(--line);background:linear-gradient(135deg,#111c32,#0c1426)}.pattern-heading h2{font-weight:500}.bar-switch button{border-radius:3px;min-height:34px;color:#b9c5e4;background:#1c2945}.bar-switch button[aria-pressed=true]{background:var(--cobalt);color:#fff}.step{background:#202d48;border-radius:3px}.step.beat{background:#2d3b59}.step:hover{background:#425479}.step[aria-pressed=true]{background:var(--cobalt)}.step[aria-pressed=true]::after{background:#f1f5ff}.step.current{box-shadow:inset 0 0 0 2px var(--mint)}.seq-ruler span{font-family:'IBM Plex Mono',monospace;color:#91a0c3}.seq-row .row-label{color:#aab8d8}.pattern-footer{border-color:#2a3955}.pattern-footer button{color:var(--mint)}.recording-heading h2{font-size:21px}.record-card{border-color:#475777;background:#0c1426}.mic-symbol{color:var(--cobalt)}.record-button{background:var(--mint);border-color:var(--mint);color:#070c19;font-weight:600}.record-button:hover{background:#d0ff9c}.record-button span{color:#263712}.record-button.recording{background:#ed8c7a;border-color:#ed8c7a}.input-meter{background:#25324d}.input-meter span{background:var(--mint)}.take-wave{color:var(--cobalt)}.take-header input{font-family:Archivo,sans-serif;color:var(--ink)}input[type=range]{accent-color:var(--cobalt)}.notes textarea{font-family:Archivo,sans-serif}.mixer.panel{--paper:#f6f7ff;--ink:#0d1730;--muted:#52607a;--line:#c9d2e8;--soft:#e2e8f7;background:#e7ecff;color:var(--ink);border-color:#e7ecff;border-radius:6px}.mixer h2{font-size:24px;font-weight:550}.mixer .round-icon{color:#3d5fc6;border-color:#abbcdd}.mixer .mute{min-height:30px;border-color:#a7b7d5;border-radius:3px}.mixer input[type=range]{accent-color:#3b5bc1}.mixer-track{padding:16px 0}.mixer-track-head{margin-bottom:14px}.mixer-track .track-name{font-size:12px}.mixer-track output{font-family:'IBM Plex Mono',monospace;font-size:10px}.master-effects .small{color:#52607a}.export-panel{background:#597eff;border-color:#597eff;color:#070c19;border-radius:6px;--muted:#182955;--line:#3559d0;--paper:#dce5ff;--ink:#070c19;--soft:#9fb6ff}.export-panel h2{font-weight:600;font-size:23px}.export-panel .eyebrow,.export-panel .small{color:#142650}.export-options select{background:#dce5ff;color:#070c19;border-color:transparent}.export-format{font-family:'IBM Plex Mono',monospace}.export-format small{color:#152650}.export-panel .primary{background:#070c19;color:#f2f5ff;border-color:#070c19;font-size:13px}.export-panel .primary:hover{background:#162545}.future-agent{gap:14px;padding:24px 2px}.agent-mark{width:33px;height:auto;flex-shrink:0}.future-agent .eyebrow{font-size:8px;color:var(--cobalt);line-height:1.7}.future-agent h3{font-size:14px;font-weight:500}.future-agent #trucho-tip{font-size:12px;line-height:1.7;color:var(--muted);margin-top:9px}.future-agent .quiet{color:var(--mint);font-size:11px}.future-agent p.agent-disclosure{font-size:10px;line-height:1.5;color:#8b9abb;margin-top:7px}.transport{background:#10182b;border:1px solid #33405d;border-radius:7px;box-shadow:0 12px 30px #0005;bottom:12px}.transport-project strong{font-family:Archivo,sans-serif}.transport-project span:last-child,.position span{color:#a6b2d1}.status-dot{background:#7084ad}.status-dot.playing{background:var(--mint)}.transport .icon-button:hover{background:#293a5d}.play-button{background:var(--mint);color:#070c19;min-height:44px}.play-button:hover{background:#d0ff9c}.position{font-family:'IBM Plex Mono',monospace}.position strong{font-size:18px}.timeline{background:#243351}.timeline span{background:var(--cobalt)}.metronome{color:#a6b2d1}.metronome input{accent-color:var(--cobalt)}footer{color:#8393ba;font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:.6px}.input-meter span{background:var(--mint)}#toast{background:#dee5ff;color:#070c19;border:1px solid #597eff}#toast.error{background:#5f2628;color:#ffe2df}dialog{background:#10182b;color:var(--ink);border-color:var(--line);border-radius:9px}dialog .primary{color:#070c19;background:var(--mint);border-color:var(--mint)}
@media(min-width:1250px){.brand-scene{min-height:440px}.scene-copy h1{font-size:88px;letter-spacing:-5px}.trucho-scene{min-height:440px}.scene-copy{padding-top:40px}.trucho-scene>img{width:105%;left:-4%}}
@media(max-width:1050px){.shell{padding:0 28px}.workspace{grid-template-columns:minmax(0,1fr) 272px;gap:20px}.brand-logo{width:185px}.app-header{gap:18px}.studio-label{padding-left:18px;font-size:9px}.scene-copy h1{font-size:64px;letter-spacing:-3px}.brand-scene,.trucho-scene{min-height:400px}.instrument-tab{padding:14px 7px;gap:8px}.band-heading{font-size:22px}.scene-actions{gap:12px}.scene-actions>span{font-size:10px}.project-title{font-size:29px}}
@media(max-width:800px){.workspace{grid-template-columns:1fr}.mix-column{gap:18px}.brand-scene{grid-template-columns:1.1fr 1fr;min-height:390px}.trucho-scene{min-height:390px}.trucho-scene>img{width:125%;max-width:none;left:-10%}.scene-copy h1{font-size:60px}.scene-actions>span{display:none}.scene-description{font-size:14px}.scene-kicker{font-size:9px;letter-spacing:1px}.scene-signature{font-size:7px}.local-badge{font-size:9px}.app-header{gap:12px}.studio-label{font-size:8px;padding-left:12px}.band-heading{font-size:25px}.instrument-tab{padding:15px}.scene-index{display:none}}
@media(max-width:520px){.shell{padding:0 17px}.app-header{height:76px;gap:11px}.brand-logo{width:148px}.studio-label{font-size:8px;letter-spacing:.5px;max-width:62px;padding-left:11px;line-height:1.6}.local-badge{font-size:8px;max-width:91px;line-height:1.6;gap:4px}.local-badge>span{width:4px;height:4px;flex-shrink:0}.brand-scene{display:flex;flex-direction:column;min-height:0;overflow:hidden}.scene-copy{padding:30px 0 0;width:100%;align-self:start}.scene-kicker{font-size:8px;letter-spacing:1.5px;margin-bottom:16px}.scene-copy h1{font-size:65px;letter-spacing:-3.5px;line-height:.95}.scene-description{margin:15px 0 19px;font-size:13px;line-height:1.6}.scene-actions .primary{width:185px;min-height:45px}.scene-actions>span{display:block;font-size:9px;max-width:125px}.scene-signature{margin-top:19px;font-size:7px;letter-spacing:.7px}.trucho-scene{height:285px;min-height:285px;width:100%;margin-top:7px}.trucho-scene>img{width:100%;height:130%;left:0;top:-9%;object-position:center 28%;z-index:-1}.trucho-scene::after{background:linear-gradient(90deg,#070c19,transparent 17%,transparent 86%,#070c19),linear-gradient(0deg,#070c19,transparent 35%)}.trucho-scene figcaption{bottom:18px;right:8px;font-size:8px;gap:9px}.trucho-scene figcaption small{font-size:10px}.project-header{padding:24px 0 22px;gap:12px}.project-title,#title{font-size:27px}.project-actions{gap:8px}.subtitle{font-size:11px}.band-heading{font-size:22px;max-width:152px;line-height:1.15}.instrument-tab{padding:13px 5px;gap:8px}.instrument-tab .instrument-icon{font-size:24px}.pattern-panel{padding:16px 12px}.sequencer .row-label{background:#101a2e;color:#aab8d8}.mobile-hint{color:#92a3ca}.bar-switch button{font-size:10px;min-height:40px}.recording-heading h2{font-size:19px;line-height:1.3}.mixer.panel{margin-top:0;padding:23px 20px}.mixer-track .mute{min-width:40px;min-height:36px}.master-effects input{height:8px}.export-panel{padding:23px 20px}.export-panel h2{font-size:25px}.export-panel .primary{min-height:48px}.future-agent{padding:8px 1px 5px;gap:14px}.future-agent .eyebrow{font-size:8px}.future-agent p.agent-disclosure{font-size:10px}.future-agent #trucho-tip{font-size:12px}.transport{bottom:8px;border-radius:6px;padding:14px 11px 19px;gap:6px}.transport-project strong{font-size:10px}.position strong{font-size:14px}.position span{font-size:8px}.transport-project span:last-child{font-size:9px}.play-controls{gap:4px}.play-button{min-width:44px}.transport .icon-button{min-width:29px}.metronome{font-size:10px}.position{flex:.65}.scene-actions{gap:14px}}
@media(max-width:360px){.brand-logo{width:135px}.studio-label{display:none}.scene-copy h1{font-size:60px}.scene-actions>span{font-size:8px}.scene-actions .primary{width:168px}.scene-signature{font-size:6.5px}.project-title,#title{font-size:25px}.band-heading{font-size:19px}.instrument-tab{font-size:10px}.local-badge{max-width:100px}.transport-project strong{max-width:75px}.transport-project span:last-child{max-width:75px}.position strong{font-size:13px}}