:root{--tp-body:#1c1b19;--tp-plate:#26241f;--tp-line:#ece5d31f;--tp-text:#ece5d3;--tp-text-2:#ece5d39e;--tp-red:#e1362c;--tp-orange:#f08a1c;--tp-yellow:#f4d03a;--tp-white:#ece5d3}.trap-body{background:#0b0b0c}.trappola{color:var(--paper);margin:0 auto;padding:0 clamp(6px,1vw,16px) 10vh}.trappola .section-head--page{position:relative}.trappola .section-head--page>.stamp{position:absolute;top:22vh;right:0;rotate:7deg}@media (width<=760px){.trappola .section-head--page>.stamp{margin-top:1rem;display:inline-flex;position:static}}.tp__chapter{max-width:1200px;padding-inline:calc(var(--gutter) - clamp(6px, 1vw, 16px));margin-inline:auto}.tp__notice .mono{color:var(--paper-3);font-size:11px;line-height:1.7}.tp{background:linear-gradient(180deg, #ffffff0a, transparent 40%), var(--tp-body);max-width:1400px;box-shadow:0 0 0 1px var(--tp-line), 0 40px 90px -40px #000000e6, inset 0 1px 0 #ffffff0f;color:var(--tp-text);font:13px/1.4 var(--f-mono);border-radius:10px;margin:4vh auto 9vh;padding:clamp(14px,2vw,26px);position:relative}.tp button,.tp select,.tp input{font:inherit;color:inherit}.tp :focus-visible{outline:2px solid var(--tp-yellow);outline-offset:2px}.tp__top{border-bottom:1px solid var(--tp-line);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;padding-bottom:14px;display:flex}.tp__brand{align-items:baseline;gap:12px;display:flex}.tp__logo{font:italic 600 30px/1 var(--f-display);color:var(--tp-white)}.tp__model{letter-spacing:.08em;color:var(--tp-orange);text-transform:uppercase;font-size:10.5px}.tp__transport{flex-wrap:wrap;align-items:center;gap:10px 20px;display:flex}.tp__play{background:var(--tp-red);letter-spacing:.06em;cursor:pointer;border:0;border-radius:6px;min-width:110px;height:42px;padding:0 18px;transition:transform .1s,box-shadow .1s;box-shadow:0 3px #8a1d17;color:#fff!important;font-weight:700!important}.tp__play:active{transform:translateY(2px);box-shadow:0 1px #8a1d17}.tp__play[aria-pressed=true]{background:var(--tp-yellow);box-shadow:0 3px #9a7f12;color:#1c1b19!important}.tp__bpm,.tp__small{color:var(--tp-text-2);gap:4px;font-size:10.5px;display:grid}.tp__bpm b{color:var(--tp-white);font-size:20px}.tp__bpm input{width:200px}.tp input[type=range]{accent-color:var(--tp-orange)}.tp__gen{flex-wrap:wrap;align-items:end;gap:10px 14px;padding:14px 0 6px;display:flex}.tp__field{color:var(--tp-text-2);gap:4px;font-size:10.5px;display:grid}.tp select{border:1px solid var(--tp-line);background:var(--tp-plate);border-radius:5px;height:34px;padding:0 8px}.tp__btn{border:1px solid var(--tp-line);background:var(--tp-plate);cursor:pointer;border-radius:5px;height:34px;padding:0 14px;transition:background .15s,border-color .15s}.tp__btn:hover{border-color:var(--tp-orange)}.tp__btn--hot{background:var(--tp-orange);border-color:var(--tp-orange);color:#1c1b19!important;font-weight:700!important}.tp__btn[aria-pressed=true]{background:var(--tp-red);border-color:var(--tp-red);color:#fff!important}.tp__chords{background:var(--tp-plate);color:var(--tp-yellow);border-radius:5px;margin:0 0 0 auto;padding:6px 10px;font-size:13px}.tp__stylenote{max-width:90ch;font:italic 15px/1.45 var(--f-text);color:var(--tp-text-2);margin:4px 0 14px}.tp__gridwrap{padding-bottom:6px;overflow-x:auto}.tp__grid{gap:4px;min-width:920px;display:grid}.tp__row{grid-template-columns:86px repeat(32,minmax(0,1fr));align-items:center;gap:3px;display:grid}.tp__row--head{margin-bottom:2px}.tp__num{text-align:center;color:var(--tp-text-2);border-bottom:3px solid var(--c);padding-bottom:3px;font-size:9px}.tp__num.is-now{color:var(--tp-white)}[data-beat="0"]{--c:var(--tp-red)}[data-beat="1"]{--c:var(--tp-orange)}[data-beat="2"]{--c:var(--tp-yellow)}[data-beat="3"]{--c:var(--tp-white)}.tp__lane{text-align:left;height:34px;color:var(--tp-text);cursor:pointer;white-space:nowrap;background:0 0;border:0;border-radius:4px;padding:0 8px;font-size:11px}button.tp__lane:hover{background:var(--tp-plate)}.tp__row.is-muted .tp__lane{color:var(--tp-text-2);text-decoration:line-through}.tp__row.is-muted .tp__cell{opacity:.35}.tp__cell{min-width:0;height:34px;box-shadow:inset 0 -3px 0 color-mix(in srgb, var(--c) 40%, transparent), inset 0 1px 0 #ffffff0d;color:#1c1b19;cursor:pointer;background:#2b2925;border:0;border-radius:3px;padding:0;font-size:9.5px;font-weight:700;transition:background 80ms;position:relative;overflow:hidden}.tp__cell:hover{background:#36332d}.tp__cell--bar{margin-left:6px}.tp__cell.is-on{background:color-mix(in srgb, var(--c) calc(55% + var(--vel,1) * 45%), #2b2925);box-shadow:0 0 10px -2px color-mix(in srgb, var(--c) 60%, transparent), inset 0 1px 0 #ffffff4d}.tp__cell i{margin-left:1px;font-style:normal}.tp__cell.is-now{outline-offset:-2px;outline:2px solid #ffffffd9}.tp__cell.is-now.is-on{filter:brightness(1.25)}.tp__hint{color:var(--tp-text-2);margin:8px 0 16px;font-size:10.5px;line-height:1.6}.tp__knobs{border-top:1px solid var(--tp-line);grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px 18px;padding:14px 0;display:grid}.tp__knob{color:var(--tp-text-2);gap:4px;font-size:10.5px;display:grid}.tp__out{flex-wrap:wrap;gap:8px;display:flex}.tp__toast{background:var(--tp-white);color:#1c1b19;font:13px var(--f-text);border-radius:6px;margin:0;padding:8px 14px;position:absolute;bottom:16px;left:50%;translate:-50%;box-shadow:0 10px 30px #00000080}.tp__radio{border-top:1px solid var(--tp-line);margin-top:18px;padding-top:16px}.tp__radiohead{flex-wrap:wrap;align-items:baseline;gap:10px 20px;margin-bottom:10px;display:flex}.tp__radiotitle{font:italic 600 24px/1 var(--f-display);color:var(--tp-white);margin:0}.tp__tabs{gap:4px;display:flex}.tp__tabs button{border:1px solid var(--tp-line);cursor:pointer;background:0 0;border-radius:5px;height:30px;padding:0 12px;font-size:12px}.tp__tabs button[aria-selected=true]{background:var(--tp-white);color:#1c1b19!important}.tp__radionote{max-width:85ch;font:15px/1.5 var(--f-text);color:var(--tp-text-2);margin:0 0 12px}.tp__radionote a{color:var(--tp-yellow)}.tp__decades{flex-wrap:wrap;gap:4px;margin-bottom:10px;display:flex}.tp__decades button{border:1px solid var(--tp-line);background:var(--tp-plate);cursor:pointer;border-radius:5px;height:32px;padding:0 12px}.tp__decades button[aria-checked=true]{background:var(--tp-orange);border-color:var(--tp-orange);color:#1c1b19!important;font-weight:700!important}.tp__find{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px;display:flex}.tp__file{align-items:center;display:inline-flex}.tp__records{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px;max-height:260px;margin-bottom:10px;display:grid;overflow:auto}.tp__rec{border:1px solid var(--tp-line);background:var(--tp-plate);text-align:left;cursor:pointer;border-radius:6px;gap:2px;padding:8px 10px;display:grid}.tp__rec:hover,.tp__rec.is-on{border-color:var(--tp-orange)}.tp__rec b{font:600 14px/1.25 var(--f-text);color:var(--tp-white)}.tp__rec span{color:var(--tp-text-2);font-size:10.5px}.tp__player,.tp__sample{background:var(--tp-plate);border-radius:8px;gap:8px;margin-bottom:10px;padding:12px;display:grid}.tp__player audio{width:100%}.tp__now{font:italic 15px/1.4 var(--f-text);color:var(--tp-white);margin:0}.tp__knobs--sample{border-top:0;padding:4px 0}.tp__check{align-items:center;gap:8px;display:flex}.tp__tap{flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:12px;display:flex}.tp__tapbtn{min-width:120px;font-size:16px;height:46px!important}.tp__frame{background:var(--tp-plate);border-radius:8px;place-items:center;gap:6px;min-height:120px;display:grid}.tp__frame iframe{background:#000;border:0;border-radius:8px;width:100%;height:min(78vh,760px)}@media (prefers-reduced-motion:reduce){.tp__play,.tp__cell{transition:none}}
