:root{
--bg:#090b0b;
--surface:#101413;
--line:#29312e;
--text:#e8eeea;
--muted:#8b9b91;
--cyan:#c9f568;
--ice:#65d8e6;
--coral:#ff947b;
--mint:#c9f568}

body{
font-family:var(--mono);
background:#090b0b}
button{
border-radius:2px}
button:hover:not(:disabled){
background:#252e28}
.sidebar{
background:#0c100e}
.brand{
font-size:14px}
.brand-mark{
border:0;
background:transparent;
color:var(--ice);
border-radius:0}
.brand-mark img{
display:block;
width:100%;
height:100%;
object-fit:contain}
.brand small{
font-size:8px;
color:#7f907f}
.nav-caption{
font-size:8px}
.sidebar nav a{
border-radius:2px;
font-size:11px}
.sidebar nav a[aria-current="page"]{
color:var(--cyan);
background:#c9f5680c;
border-color:#3c4b32;
box-shadow:inset 2px 0 var(--cyan)}
.sidebar nav a:hover{
background:#1b221d}
.sidebar-bottom p{
font-size:8px;
line-height:1.7}
.node-address{
font-size:10px;
line-height:2;
color:#b9c7bc}
.node-address>span{
font-size:8px;
color:#607769}
.topbar{
height:58px;
font-size:10px}
.topbar-right{
gap:12px}
.follow-x-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:7px;
min-height:34px;
padding:0 10px;
border:1px solid #405259;
border-radius:2px;
color:var(--ice);
font-size:10px;
white-space:nowrap;
flex-shrink:0;
transition:background .15s,border-color .15s}
.follow-x-btn svg{
width:14px;
height:14px}
.follow-x-btn:hover{
background:#16262a;
border-color:var(--ice)}
.topbar-right .local-badge{
display:flex;
align-items:center;
gap:8px}
.topbar-right .status-dot{
width:4px;
height:4px}
.separator{
color:#495b4e}
main{
padding-top:30px}
.page-heading{
margin-bottom:24px}
.eyebrow{
font-size:9px;
display:flex;
align-items:center;
gap:7px}
.eyebrow-square{
height:5px;
width:5px;
background:var(--cyan)}
h1{
font:600 28px/1.2 var(--mono)}
.heading-sub{
font:400 19px var(--mono);
color:#8f9b92}
.engine-state{
font-size:9px;
border:1px solid var(--line);
padding:9px 11px}
.engine-state .status-dot{
border-radius:0}
.engine-state .status-dot.running{
box-shadow:none}
.transport{
padding:13px 0;
gap:18px}
.play-btn{
background:var(--cyan);
color:#172109;
min-height:39px;
font-size:12px}
.play-btn:hover:not(:disabled){
background:#dcffa1}
.play-btn.is-playing{
background:var(--coral);
color:#26140d}
.save-btn{
font-size:11px;
border-color:#3c4c41;
font-weight:400}
.icon-btn{
color:#889c91}
.swing-control>label,.tempo-control>label{
font-size:8px}
.transport-divider{
height:24px}
.volume-control output{
font-size:9px}
.pipeline{
display:flex;
align-items:center;
gap:14px;
min-height:55px;
border-bottom:1px solid var(--line);
font-size:8px;
color:#9ba99f}
.pipeline>span{
display:flex;
align-items:center;
gap:7px;
white-space:nowrap}
.pipeline>span>svg{
width:13px;
height:13px;
color:#b5c0b6}
.pipeline>svg{
width:11px;
height:11px;
color:#506055}
.pipeline .pipeline-mode{
margin-left:auto;
color:#617267;
font-size:8px}
.pipeline #pipeline-output.running{
color:var(--cyan)}
.pipeline #pipeline-output.running svg{
color:var(--cyan)}
.runtime-grid{
display:grid;
grid-template-columns:minmax(0,1fr) 310px;
gap:28px;
padding-top:22px}
.runtime-main{
min-width:0}
.instrument-rack{
grid-template-columns:minmax(180px,.85fr) minmax(0,1.4fr);
min-height:304px}
.cartridge-stage{
padding-right:22px;
min-width:0}
.stage-label{
font-size:8px;
padding-top:0;
min-height:20px}
.cartridge-art{
height:225px;
position:relative;
margin:9px 0 2px;
background-image:linear-gradient(#27332b28 1px,transparent 1px),linear-gradient(90deg,#27332b28 1px,transparent 1px);
background-size:18px 18px}
.cartridge-art canvas{
width:100%;
height:100%;
display:block;
z-index:1}
.core-corner{
position:absolute;
width:11px;
height:11px;
border-color:#758a79;
z-index:2}
.corner-tl{
top:6px;
left:6px;
border-top:1px solid;
border-left:1px solid}
.corner-br{
bottom:6px;
right:6px;
border-bottom:1px solid;
border-right:1px solid}
.cartridge-meta{
padding-bottom:18px}
.cartridge-meta h2{
font-size:14px}
.cartridge-meta span{
font-size:8px}
.signal-stage{
padding-left:22px}
.coral-dot{
background:var(--ice)}
.scope-toolbar{
display:flex;
align-items:center;
justify-content:space-between;
margin-top:12px;
font-size:8px;
color:#718779;
min-height:29px}
.scope-modes{
display:flex;
border:1px solid var(--line);
padding:2px;
gap:2px}
.scope-modes button{
width:26px;
height:23px;
min-height:23px;
border-radius:0}
.scope-modes svg{
width:13px;
height:13px}
.scope-modes [aria-pressed="true"]{
background:#c9f5681a;
color:var(--cyan)}
.scope-wrap{
height:173px;
padding-top:9px}
.scope-labels{
font-size:7px}
.scope-labels>span:last-child{
color:var(--ice)}
.signal-meta{
padding:13px 0 18px;
gap:10px}
.metric-label{
font-size:7px;
color:#7e9284}
.signal-meta strong{
font-size:18px}
.signal-meta #pattern-name{
font-size:10px;
line-height:21px}
.signal-meta strong>span{
font-size:9px}
.channel-bus{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:12px;
border-bottom:1px solid var(--line);
padding:14px 0}
.channel-bus>div{
display:flex;
align-items:center;
justify-content:space-between;
gap:5px;
font-size:8px;
color:#809186}
.channel-led{
height:5px;
width:5px;
background:#35443a;
flex-shrink:0}
.channel-bus>div.active{
color:var(--text)}
.channel-bus>div.active .channel-led{
background:var(--ice)}
.channel-bus>div.muted{
opacity:.35}
.sequence-section{
padding-top:16px}
.section-heading h2{
font-size:11px;
gap:8px}
.section-heading h2>svg{
width:14px;
color:#a1b3a6}
.section-heading h2>span{
font-size:7px}
.sequence-actions .text-btn{
font-size:10px}
.sequencer{
grid-template-columns:100px repeat(16,minmax(24px,1fr));
min-width:580px;
gap:7px 4px}
.track-label{
padding-left:6px;
padding-right:7px;
gap:3px;
height:35px}
.track-label>span{
font-size:9px}
.track-label .icon-btn{
width:20px}
.track-label .icon-btn svg{
width:11px}
.step{
height:35px;
min-height:35px;
border-radius:1px;
background:#131b16;
border-color:#2a382e}
.step.bar-start{
background:#1b261e;
border-color:#3d4d40}
.step:hover:not(:disabled){
background:#344635;
border-color:#768c70}
.step[aria-pressed="true"]{
background:color-mix(in srgb,var(--track-color) 14%,#101612);
border-color:color-mix(in srgb,var(--track-color) 52%,#101612);
box-shadow:inset 0 -3px var(--track-color)}
.step[aria-pressed="true"]::after{
background:var(--track-color);
bottom:auto;
top:6px;
width:2px;
height:2px}
.step.current::before{
border-color:var(--text);
border-radius:1px;
inset:-2px}
.step.current{
background:#34442d}
.step-number{
font-size:7px}
.sequencer-footer{
font-size:7px;
padding-bottom:17px}
.console-section{
border-top:0;
border-left:1px solid var(--line);
padding:0 0 0 22px;
min-width:0;
display:flex;
flex-direction:column}
.console-section .section-heading{
min-height:28px;
margin-bottom:8px}
.console-section .section-heading h2{
font-size:11px}
.console-section h2>svg{
color:var(--cyan)}
.console-actions{
display:flex;
gap:2px}
.console-actions .icon-btn{
height:25px;
min-height:25px;
width:25px}
.console-actions svg{
width:13px}
.console-origin{
display:flex;
align-items:center;
gap:5px;
font-size:7px;
color:#a6b8a8;
flex-wrap:wrap;
border-bottom:1px solid var(--line);
padding:0 0 15px}
.console-origin .status-dot{
height:4px;
width:4px;
border-radius:0}
.console-origin>span:last-child{
margin-left:auto;
color:#597261;
font-size:6px}
.console-log{
height:368px;
flex:1;
min-height:230px;
padding:13px 0;
font-size:10px;
line-height:1.8;
max-height:495px}
.log-line{
grid-template-columns:49px 1fr;
gap:1px 6px;
padding:0 0 14px;
font-size:9px}
.log-line time{
font-size:8px;
color:#5f7867}
.log-line .log-type{
font-size:7px;
color:var(--cyan);
padding-top:0}
.log-line .log-text{
grid-column:1/-1;
color:#acbbb0;
overflow-wrap:anywhere}
.log-line.error .log-text{
color:var(--coral)}
.log-line.command .log-text{
color:var(--text)}
.console-input{
margin-top:auto;
gap:8px;
font-size:10px;
min-height:42px}
.console-input input{
height:39px}
.console-input .icon-btn{
width:27px}
.runtime-stats{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px 10px;
margin:18px 0 3px}
.runtime-stats>div{
display:flex;
align-items:center;
justify-content:space-between;
gap:6px}
.runtime-stats dt{
font-size:7px;
color:#718a79}
.runtime-stats dd{
font-size:11px;
color:#b8c6bb;
margin:0;
font-variant-numeric:tabular-nums}
.cartridge-library{
grid-template-columns:repeat(4,minmax(0,1fr));
gap:15px}
.library-card{
border-radius:2px;
background:#101510}
.library-art{
height:218px;
background-image:linear-gradient(#27332b26 1px,transparent 1px),linear-gradient(90deg,#27332b26 1px,transparent 1px);
background-size:18px 18px;
margin:14px 14px 10px}
.library-art canvas{
width:100%;
height:100%;
display:block}
.library-top{
font-size:8px;
padding:16px 14px 0}
.library-info{
padding:0 14px 16px}
.library-info h2{
font-size:15px}
.library-info p{
font-size:8px;
line-height:1.7;
min-height:26px}
.library-info button{
font-size:10px;
border-radius:1px;
gap:8px;
min-height:40px}
.library-info button>span{
text-align:left}
.library-card.loaded{
border-color:#69893d}
.system-summary h2{
font-size:20px}
.system-specs>div{
font-size:11px}
.system-note p{
font-size:11px}
.session-info h2{
font-size:12px}
.session-icon{
border-radius:2px;
color:var(--ice)}
.toast{
border-radius:2px;
background:#172016;
border-color:#536d43;
border-left-color:var(--cyan);
font-size:11px}
dialog{
background:#111712;
border-color:#46543f;
border-radius:2px}
.dialog-heading h2{
font-size:16px}
dialog input{
background:#090e0a;
border-color:#42513c;
border-radius:1px}
footer{
border-top:1px solid var(--line);
margin-top:16px;
padding:20px 0;
font-size:7px}
.footer-cross{
color:var(--cyan)}

@media(min-width:1600px){
.runtime-grid{
grid-template-columns:minmax(0,1fr) 340px;
gap:32px}
.instrument-rack{
min-height:350px}
.cartridge-art{
height:271px}
.scope-wrap{
height:219px}
.console-log{
height:395px;
max-height:550px}
.step,.track-label{
height:39px}
}

@media(max-width:1250px){
.runtime-grid{
grid-template-columns:minmax(0,1fr);
gap:12px}
.console-section{
border-left:0;
border-top:1px solid var(--line);
padding:16px 0 0;
display:grid;
grid-template-columns:minmax(0,1fr) 190px;
column-gap:28px}
.console-section>.section-heading,.console-origin{
grid-column:1/-1}
.console-log{
height:140px;
min-height:140px;
max-height:140px;
grid-column:1;
grid-row:3}
.log-line{
grid-template-columns:62px 43px minmax(0,1fr);
gap:10px;
padding-bottom:4px}
.log-line .log-text{
grid-column:auto}
.console-input{
grid-column:1;
grid-row:4}
.runtime-stats{
grid-column:2;
grid-row:3/5;
align-content:start;
grid-template-columns:1fr;
gap:22px;
padding-left:22px;
border-left:1px solid var(--line)}
.console-origin>span:last-child{
font-size:7px}
.cartridge-library{
grid-template-columns:repeat(2,minmax(0,1fr))}
.library-art{
height:245px}
.library-info h2{
font-size:19px}
.library-info p{
min-height:0}
.library-info button{
font-size:11px}
.signal-meta #pattern-name{
font-size:12px}
}

@media(max-width:1000px) and (min-width:761px){
.sidebar{
width:74px}
.shell{
margin-left:74px}
.pipeline{
gap:13px}
}

@media(max-width:760px){
.sidebar{
width:100%;
height:59px}
.sidebar nav a[aria-current="page"]{
box-shadow:none}
.brand>span:last-child{
font-size:12px}
.brand small{
font-size:7px}
.topbar{
height:45px}
.topbar-right .local-badge{
display:none}
.page-heading{
min-height:50px}
.eyebrow{
font-size:8px}
h1{
font-size:25px}
.engine-state{
font-size:8px;
padding:8px}
.transport{
gap:16px 18px}
.transport .play-btn{
min-height:40px}
.pipeline{
gap:8px;
min-height:47px;
justify-content:space-between}
.pipeline>span{
font-size:7px;
gap:5px}
.pipeline>span>svg{
width:11px;
height:11px}
.pipeline>svg{
width:9px}
.pipeline .pipeline-mode{
display:none}
.runtime-grid{
padding-top:18px}
.instrument-rack{
grid-template-columns:minmax(0,.9fr) minmax(0,1.15fr);
min-height:275px}
.cartridge-stage{
padding-right:16px}
.signal-stage{
padding-left:16px}
.cartridge-art{
height:200px}
.scope-toolbar{
margin-top:8px;
font-size:7px;
gap:7px}
.scope-wrap{
height:153px}
.signal-meta{
grid-template-columns:1fr 1fr;
padding-top:10px}
.signal-meta strong{
font-size:16px}
.channel-bus{
gap:10px 7px;
padding:13px 0}
.channel-bus>div{
font-size:7px}
.channel-led{
width:4px;
height:4px}
.section-heading h2{
font-size:11px}
.sequencer{
grid-template-columns:100px repeat(16,32px);
min-width:680px;
gap:7px 5px}
.step,.track-label{
height:38px;
min-height:38px}
.track-label>span{
font-size:9px}
.console-section{
grid-template-columns:minmax(0,1fr)}
.console-log{
height:145px;
min-height:145px;
max-height:145px}
.console-origin{
font-size:7px}
.console-input{
grid-row:4}
.runtime-stats{
grid-column:1;
grid-row:5;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:9px;
padding:0;
border-left:0;
margin:17px 0 4px}
.runtime-stats>div{
display:block}
.runtime-stats dt{
font-size:6px;
margin-bottom:8px}
.runtime-stats dd{
font-size:11px}
.log-line{
grid-template-columns:52px 34px minmax(0,1fr);
gap:8px;
font-size:9px}
.log-line time{
font-size:7px}
.log-line .log-type{
font-size:6px}
.cartridge-library{
gap:15px}
.library-art{
height:180px}
.library-info h2{
font-size:16px}
footer{
font-size:7px}
.node-address{
display:none}
.system-summary h2{
font-size:18px}
}

@media(max-width:420px){
.topbar-right{
gap:8px}
.separator{
margin-inline:7px}
.follow-x-btn{
font-size:9px;
padding-inline:8px;
gap:6px}
.topbar-right .local-badge{
display:none}
.transport{
gap:16px 12px}
.pipeline{
gap:5px}
.pipeline>span{
font-size:6px;
gap:4px}
.pipeline>span>svg{
width:10px;
height:10px}
.pipeline>svg{
width:8px}
.runtime-grid{
gap:5px}
.instrument-rack{
grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
min-height:255px}
.cartridge-stage{
padding-right:12px}
.signal-stage{
padding-left:12px}
.stage-label{
font-size:7px}
.cartridge-art{
height:180px}
.scope-toolbar>span{
font-size:6px}
.scope-modes{
gap:0}
.scope-modes button{
width:23px;
height:22px;
min-height:22px}
.scope-wrap{
height:133px}
.cartridge-meta h2{
font-size:12px}
.cartridge-meta span{
font-size:7px}
.signal-meta strong{
font-size:14px}
.signal-meta .metric-label{
font-size:6px}
.scope-labels{
font-size:6px}
.channel-bus{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:11px 24px;
padding:14px 0}
.channel-bus>div{
font-size:7px}
.cartridge-library{
grid-template-columns:1fr}
.library-art{
height:260px}
.library-info h2{
font-size:19px}
.log-line{
grid-template-columns:49px 31px minmax(0,1fr);
gap:5px}
.log-line .log-text{
font-size:8px}
.console-origin>span:last-child{
font-size:6px}
.runtime-stats dt{
font-size:6px}
.engine-state{
font-size:7px;
padding:7px}
.eyebrow{
font-size:7px}
}