:root{
    color-scheme:dark;
    --bg:#1a1a1a;
    --panel:#242424;
    --card:#303030;
    --line:#555;
    --text:#f0f0f0;
    --muted:#a0a0a0;
    --accent:#e85b32;
    --glow:#ff7043;
    font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:var(--bg);
    color:var(--text)
}
*{
    box-sizing:border-box
}
body{
    margin:auto;
    max-width:1040px;
    min-height:100dvh;
    padding:env(safe-area-inset-top) 0 calc(92px + env(safe-area-inset-bottom));
    background:radial-gradient(ellipse at top left,#303030 0,transparent 39%),var(--bg)
}
button,select,input{
    font:inherit;
    color:inherit
}
button,select,input:not([type=range]){
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:9px;
    min-height:42px;
    padding:6px 10px
}
button{
    cursor:pointer;
    touch-action:manipulation
}
button:active{
    transform:scale(.97)
}
button:disabled{
    opacity:.38
}
button[aria-pressed=true],button.active{
    border-color:var(--accent);
    color:var(--glow)
}
input:focus,select:focus,button:focus-visible{
    outline:2px solid var(--glow);
    outline-offset:2px
}
header,main{
    padding:0 clamp(12px,3vw,30px)
}
header{
    height:59px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid #414141
}
.brand{
    display:flex;
    align-items:center;
    gap:10px
}
.brand i{
    width:13px;
    height:13px;
    background:var(--accent);
    border-radius:4px;
    box-shadow:0 0 16px #e85b323d
}
#wordmark{
    width:147px;
    height:10px
}
header button{
    font-size:12px;
    background:transparent;
    border-color:#484848;
    border-radius:20px
}
.transport{
    display:flex;
    align-items:center;
    gap:8px;
    padding:22px 0 18px
}
.transport>div{
    min-width:0;
    flex:1
}
#title{
    font-size:clamp(20px,5vw,33px);
    font-weight:600;
    letter-spacing:-.04em;
    background:transparent;
    border:0;
    padding:0;
    width:100%;
    min-height:32px
}
small{
    display:block;
    color:var(--muted);
    font-size:11px
}
#status.error{
    color:var(--glow)
}
.tempo{
    display:grid;
    justify-items:center;
    font:10px monospace;
    color:var(--muted);
    letter-spacing:.12em
}
#tempo{
    width:60px;
    color:var(--text);
    text-align:center;
    background:transparent;
    border:0;
    border-bottom:1px solid #555;
    border-radius:0;
    font:18px monospace;
    min-height:30px;
    padding:2px
}
#play{
    border-radius:50%;
    width:52px;
    height:52px;
    border:1px solid #ff885b;
    background:radial-gradient(at 32% 20%,#ff875d,var(--accent) 75%);
    color:#171717;
    font-size:19px;
    box-shadow:0 0 18px #e85b3229
}
nav{
    display:flex;
    gap:3px;
    padding:4px;
    background:#151515;
    border:1px solid #424242;
    border-radius:14px
}
nav button{
    flex:1;
    border:0;
    background:transparent;
    color:var(--muted);
    font-weight:550;
    font-size:13px
}
nav button.active{
    background:var(--card);
    color:var(--text);
    box-shadow:inset 0 -2px var(--accent)
}
.barline,.tools,.controls,.sheethead,.heading{
    display:flex;
    align-items:center;
    gap:7px
}
.barline{
    margin:15px 0
}
.barline>label{
    flex:1;
    min-width:0;
    display:flex;
    align-items:center;
    gap:8px
}
.barline span{
    max-width:110px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.barline select,.barline button{
    font-size:12px
}
.barline select{
    max-width:100px
}
h2,h3,p{
    margin:0
}
.heading,.sheethead{
    justify-content:space-between;
    gap:8px
}
.heading h2{
    font-size:20px;
    letter-spacing:-.035em
}
.heading small{
    font-family:monospace
}
.heading{
    margin-bottom:12px
}
.card{
    background:linear-gradient(120deg,#282828,#202020);
    border:1px solid #424242;
    border-radius:16px;
    padding:13px;
    margin:12px 0
}
.tools,.controls{
    flex-wrap:wrap;
    margin:10px 0
}
.tools button,.controls button,footer button{
    font-size:13px
}
.controls label,.field{
    display:flex;
    flex-direction:column;
    color:var(--muted);
    font-size:12px;
    gap:4px
}
.controls select,.controls input{
    max-width:134px;
    color:var(--text)
}
.tools button[aria-pressed=true]{
    background:#363636
}
.scroller{
    overflow:auto;
    overscroll-behavior:contain;
    border-radius:10px;
    border:1px solid #494949;
    background:#181818
}
.arr{
    display:grid;
    width:max-content;
    min-width:100%;
    position:relative;
    gap:1px;
    background:#414141
}
.arr button{
    border:0;
    border-radius:0;
    background:#242424;
    padding:3px 6px;
    overflow:hidden;
    min-width:0
}
.arr .section{
    color:#ddd;
    background:#303030;
    text-align:left;
    font-size:11px;
    letter-spacing:.05em
}
.arr .label{
    position:sticky;
    left:0;
    z-index:2;
    background:#282828;
    text-align:left;
    font-size:12px
}
.arr .barcell{
    font:12px monospace
}
.arr button.here{
    box-shadow:inset 0 -2px var(--accent)
}
.arr button.chosen{
    color:var(--glow)
}
.arr svg{
    display:block;
    width:100%;
    height:28px
}
.waterstrip{
    display:flex;
    gap:6px;
    overflow:auto;
    padding:6px 0
}
.pad{
    position:relative;
    flex:0 0 84px;
    height:58px;
    border:0;
    background:transparent;
    padding:0;
    color:#ddd
}
.pad svg{
    width:100%;
    height:100%;
    position:absolute;
    inset:0
}
.pad span{
    position:relative;
    font-weight:650
}
.pad.here span{
    color:#fff
}
.rollbox{
    height:clamp(235px,39dvh,420px);
    position:relative
}
.roll{
    display:block;
    user-select:none;
    -webkit-user-select:none
}
.roll.edit{
    touch-action:none
}
.lane{
    overflow:auto
}
.steps{
    border-collapse:separate;
    border-spacing:3px;
    width:max-content
}
.steps th{
    position:sticky;
    left:0;
    background:var(--panel);
    text-align:left;
    font-size:11px;
    z-index:1;
    padding:0 5px
}
.steps td{
    padding:0
}
.steps button{
    width:32px;
    min-height:36px;
    padding:0;
    border:1px solid #484848;
    border-radius:7px;
    background:var(--card)
}
.steps button.beat{
    border-left-color:#959595
}
.steps button.hit{
    background:var(--accent);
    border-color:var(--glow)
}
.steps button.sel{
    outline:2px solid #eee
}
.legend{
    font:12px/1.65 monospace;
    color:#ccc;
    margin-top:8px
}
.playline{
    position:absolute;
    pointer-events:none;
    width:2px;
    background:var(--glow);
    box-shadow:0 0 7px var(--accent);
    top:0;
    bottom:0
}
.field{
    margin:8px 0
}
.field input,.field select{
    width:100%;
    color:var(--text)
}
input[type=range]{
    accent-color:var(--accent)
}
footer{
    position:fixed;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    width:100%;
    max-width:1040px;
    display:flex;
    gap:6px;
    padding:9px max(12px,env(safe-area-inset-left)) calc(9px + env(safe-area-inset-bottom));
    background:#202020f5;
    border-top:1px solid var(--line);
    align-items:center;
    z-index:4
}
footer label{
    min-width:0;
    flex:1;
    font:9px monospace;
    letter-spacing:.1em;
    color:var(--muted)
}
footer select{
    width:100%;
    min-height:38px;
    color:var(--text);
    margin-top:2px;
    font:14px sans-serif
}
dialog{
    width:min(420px,94vw);
    max-height:84dvh;
    background:var(--panel);
    border:1px solid #666;
    border-radius:17px;
    color:var(--text);
    padding:18px
}
dialog::backdrop{
    background:#0009
}
.sheethead{
    margin-bottom:12px
}
.sheethead h2{
    font-size:20px
}
.sheethead button{
    font-size:22px
}
#sheetbody>.tools button{
    flex:1 0 40%
}
#sheetbody select,#sheetbody input{
    font-size:16px
}
#sheetbody p{
    font-size:13px;
    color:var(--muted);
    margin:8px 0
}
.readout{
    color:var(--glow)
}
@media(min-width:720px){
    main{
        padding-bottom:20px
    }
    .transport{
        padding:24px 0
    }
    .pad{
        flex-basis:110px;
        height:67px
    }
    .rollbox{
        height:43dvh
    }
}
@media(prefers-reduced-motion:reduce){
    *,*::after{
        animation:none!important;
        scroll-behavior:auto!important
    }
}
.watercard{
    position:relative;
    isolation:isolate;
    overflow:hidden
}
.watercard::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:url("./filaments.svg") center 6% / 135% auto no-repeat;
    opacity:.28
}
.pad.here svg{
    filter:drop-shadow(0 0 4px #e85b3245)
}
.waterstrip{
    scrollbar-width:thin;
    scrollbar-color:#555 transparent
}
.theory-key {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 8px 0;
    font-size: 11px;
    color: var(--muted);
}
.theory-key label { display: grid; gap: 2px; }
.theory-key select { min-width: 74px; min-height: 36px; color: var(--text); }
.theory-key > div { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.theory-key span { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }