:root{color-scheme:dark;--bg:#090a10;--surface:#11131d;--surface2:#171a27;--line:#2b3042;--muted:#858ba5;--text:#f3f5ff;--accent:#a98aff;--green:#a1f2a2;--red:#ff677b;--orange:#ffc583;--mono:ui-monospace,Consolas,monospace;--sans:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse at 80% -20%,#261b42 0,transparent 45%),var(--bg);color:var(--text);font-family:var(--sans);font-size:14px}button,input,select{font:inherit}button{cursor:pointer;color:inherit}button:disabled{opacity:.35;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}a{color:inherit;text-decoration:none}.app{min-height:100dvh}.mast{display:flex;align-items:center;justify-content:space-between;padding:16px clamp(14px,2.8vw,42px);border-bottom:1px solid var(--line);background:#0d0e16c9;gap:15px}.brand{display:flex;align-items:center;gap:11px}.brand strong{font-size:20px;letter-spacing:.13em}.brand small{display:block;color:var(--muted);font:10px var(--mono);letter-spacing:.16em}.brand-symbol{font-size:23px;font-weight:900;display:grid;place-items:center;border-radius:11px;background:#28203e;width:40px;height:40px;color:#e5d8ff}.brand-symbol span{color:var(--green)}.back{font-size:24px;color:var(--muted);transform:rotate(225deg)}.top-actions,.section-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.pill,.action,.toggle,.icon-button{border:1px solid var(--line);background:#1c1e2d;border-radius:9px;padding:10px 14px;font-size:12px;font-weight:700;white-space:nowrap;transition:background .15s,border-color .15s}.pill:hover,.action:hover,.toggle:hover,.icon-button:hover{background:#282b40;border-color:#596079}.pill{background:#22253a}.pill.secondary{background:transparent;color:var(--muted)}.dot,.activity-dot{display:inline-block;width:8px;height:8px;margin-right:7px;background:var(--green);border-radius:50%;box-shadow:0 0 12px #a1f2a263}.dot{background:#5e647d;box-shadow:none}.pill.ready .dot{background:var(--green);box-shadow:0 0 12px var(--green)}.transport{padding:15px clamp(14px,2.8vw,42px) 13px;background:#12141fc9;border-bottom:1px solid var(--line)}.transport-main{display:flex;align-items:center;gap:11px;flex-wrap:wrap}.transport-button{height:46px;width:46px;font-size:17px;font-weight:700;border-radius:11px;background:#222538;border:1px solid var(--line)}.transport-button.primary{background:var(--green);color:#102012;border-color:var(--green)}.transport-button.playing{background:var(--accent);color:#130f24}.clock{width:110px;display:flex;flex-direction:column;margin-right:5px}.clock strong{font:700 19px var(--mono);letter-spacing:.08em}.clock span{font:10px var(--mono);color:var(--muted);letter-spacing:.1em}.transport-field{display:flex;flex-direction:column;gap:3px}.transport-field label,.master-volume label{color:var(--muted);font:9px var(--mono);letter-spacing:.11em}.number-pair{display:flex;align-items:center;gap:4px}.number-pair span{font:10px var(--mono);color:var(--muted)}.transport-field input,.transport-field select{width:72px;height:28px;border:1px solid var(--line);border-radius:6px;background:#0c0e18;color:var(--text);padding:4px 7px;font:700 14px var(--mono)}.transport-field select{width:75px}.toggle[aria-pressed=true]{background:#41305d;border-color:var(--accent);color:#eadcff}.master-volume{min-width:130px;display:flex;flex-direction:column;gap:4px;margin-left:auto}.master-volume input{width:125px}.master-volume output{align-self:end;color:var(--muted);font:9px var(--mono)}input[type=range]{accent-color:var(--accent);cursor:pointer}.beat-row{display:flex;align-items:center;gap:13px;margin-top:12px}.beat-dots{display:flex;gap:5px}.beat-dots span{width:19px;height:8px;border-radius:3px;background:#333649;transition:background .07s}.beat-dots span.active{background:var(--accent);box-shadow:0 0 12px #a98aff8a}.beat-dots span.down{width:26px}.beat-dots span.down.active{background:var(--green)}.beat-progress{height:5px;flex:1;background:#292c3e;border-radius:99px;overflow:hidden}.beat-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--green))}.key-hint{font:10px var(--mono);color:#6e738c}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 294px;align-items:start}.main-area{min-width:0;padding:25px clamp(14px,2.8vw,42px) 20px}.section-top{display:flex;align-items:end;justify-content:space-between;flex-wrap:wrap;gap:15px;margin-bottom:21px}.eyebrow{font:10px var(--mono);letter-spacing:.17em;color:var(--accent);margin:0 0 6px}.section-top h1{font-size:clamp(22px,2.5vw,30px);letter-spacing:-.04em;margin:0 0 6px}.section-top h1 span{font:10px var(--mono);color:var(--muted);letter-spacing:0;margin-left:10px}.helper{margin:0;color:var(--muted);font-size:12px}.action{padding:10px 12px}.action.positive{background:var(--accent);border-color:var(--accent);color:#140d25}.action.positive:hover{background:#c1aaff}.action.danger{color:#ffa1af}.pad-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,195px),1fr));gap:13px}.pad{border:1px solid #32364b;border-radius:13px;background:#171a26;min-width:0;overflow:hidden;transition:border-color .15s,transform .15s}.pad.selected{border-color:var(--accent);box-shadow:0 0 0 1px #b598ff2d}.pad.recording{border-color:#ff5f80;box-shadow:0 0 22px #ff4c6c40}.pad-head{height:39px;display:flex;align-items:center;gap:5px;padding:0 9px}.pad-num{font:10px var(--mono);color:var(--accent)}.pad-name{font-weight:750;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.tiny{border:1px solid #3b4055;background:#25283a;border-radius:5px;padding:4px 7px;font:700 10px var(--mono)}.tiny.on{color:#0d1012;background:var(--green);border-color:var(--green)}.tiny.solo{color:#151018;background:var(--orange);border-color:var(--orange)}.pad-stage{height:clamp(120px,15vw,186px);position:relative;background:radial-gradient(ellipse at 50% 34%,#302443,#11131c 70%);overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}.pad-stage video{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.19) saturate(.75);pointer-events:none}.pad.armed .pad-stage video,.pad.recording .pad-stage video{filter:brightness(.92) saturate(.95)!important}
.pad-stage .fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;pointer-events:none;color:#9591b3}.fallback .big-wave{font-size:32px;letter-spacing:3px;color:#6c618b}.fallback span{font:10px var(--mono);letter-spacing:.06em}.pad-stage .record-overlay{position:absolute;inset:0;display:grid;place-items:center;background:#2c1423a8;pointer-events:none;opacity:0;transition:opacity .16s}.pad.armed .record-overlay{opacity:1}.pad.recording .record-overlay{background:#8d203988}.record-text{text-align:center;font:700 10px var(--mono);letter-spacing:.12em;color:white}.record-text b{display:block;font-size:23px;margin-bottom:6px}.pad-stage:active{cursor:crosshair}.stage-badge{position:absolute;top:8px;left:8px;background:#0b0c11cc;color:#c2c4d6;border-radius:5px;padding:4px 5px;font:9px var(--mono);pointer-events:none}.pad.recording .stage-badge{color:#fff;background:#b72c4d}.live-meter{position:absolute;bottom:0;left:0;right:0;height:5px;background:#0008;pointer-events:none}.live-meter span{display:block;height:100%;width:0;background:linear-gradient(90deg,#6153ad,#b4ffbe);transition:width .075s}.pad-foot{padding:10px}.pad-progress{height:3px;border-radius:4px;background:#31364b;overflow:hidden;margin-bottom:8px}.pad-progress span{height:100%;width:0;background:var(--accent);display:block}.pad-details{display:flex;justify-content:space-between;align-items:center;gap:6px;color:var(--muted);font:10px var(--mono)}.pad-control{display:flex;align-items:center;gap:7px;margin-top:9px}.pad-control button{flex:1}.pad-control .arm{border:1px solid #5d4559;background:#2e2130;border-radius:7px;padding:7px 8px;font:700 10px var(--mono);color:#ffc3ce}.pad-control .arm.active{background:var(--red);border-color:var(--red);color:#191019}.pad-control .edit{border:1px solid var(--line);border-radius:7px;padding:7px 8px;font:700 10px var(--mono);background:#272b3d}.bottom-bar{margin-top:22px;border-top:1px solid var(--line);padding-top:17px;display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--muted);font:11px var(--mono)}.bottom-bar>div{display:flex;align-items:center}.inspector{padding:27px 20px 40px;background:#141621;border-left:1px solid var(--line);min-height:calc(100dvh - 154px);position:sticky;top:0;max-height:100dvh;overflow:auto}.inspector-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.inspector-title h2,.mixer-heading h2{margin:0;font-size:20px;letter-spacing:-.04em}.empty-inspector{border:1px dashed #3a3d52;border-radius:12px;padding:25px 14px;text-align:center;color:var(--muted);font-size:12px;line-height:1.7}.wave-icon{font-size:30px;letter-spacing:.17em;color:var(--accent)}.hidden{display:none!important}.field-label,.range-wrap label{display:flex;justify-content:space-between;align-items:center;color:#a7abc4;font:10px var(--mono);letter-spacing:.06em;margin:11px 0 7px}.inspector input[type=text],.inspector input[type=number]{width:100%;height:36px;background:#0b0d17;color:var(--text);border:1px solid var(--line);border-radius:7px;padding:7px 9px}.two-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}.field-note{font:10px/1.5 var(--sans);color:#8488a3;margin:10px 0 15px}.range-wrap{margin:15px 0}.range-wrap input{width:100%;margin:0}.range-wrap output{color:var(--accent);font:11px var(--mono)}.fx-title{margin:27px 0 17px;display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:10px;font:700 10px var(--mono);letter-spacing:.1em}.small-link{border:0;background:transparent;color:var(--accent);font:10px var(--mono)}.inspector-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:23px}.inspector-actions button:first-child{grid-column:1/-1}.icon-button{padding:5px 11px;font-size:22px}.mobile-close{display:none}.mixer-panel{margin-top:26px;border:1px solid var(--line);background:#141622;border-radius:14px;padding:17px}.mixer-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.mixer-channels{display:flex;gap:10px;overflow-x:auto;scrollbar-width:thin;padding-bottom:8px}.channel{min-width:108px;width:108px;border:1px solid #35394e;background:#1c1f2d;border-radius:10px;padding:11px 9px;display:flex;flex-direction:column;align-items:center;gap:8px}.channel strong{font:11px var(--mono);width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-align:center}.channel .ch-buttons{display:flex;gap:4px}.channel .ch-buttons button{border:1px solid var(--line);background:#252839;color:#c2c5d5;border-radius:5px;padding:4px 6px;font-size:10px}.channel .ch-buttons button.on{background:var(--green);color:#18201a}.channel .ch-buttons button.solo{background:var(--orange);color:#161414}.fader-shell{height:138px;width:42px;display:flex;align-items:center;justify-content:center}.channel input[type=range]{width:124px;transform:rotate(-90deg)}.channel small{font:9px var(--mono);color:var(--muted)}.channel .ch-edit{width:100%;padding:6px;border:1px solid var(--line);background:#292d41;border-radius:6px;font:10px var(--mono)}.footer{display:flex;gap:12px;justify-content:space-between;padding:13px clamp(14px,2.8vw,42px);border-top:1px solid var(--line);font:10px var(--mono);color:#656c85}.toast{position:fixed;z-index:100;bottom:26px;left:50%;transform:translate(-50%,30px);background:#333453;border:1px solid #6b6794;border-radius:10px;padding:12px 16px;color:white;font-size:12px;box-shadow:0 12px 40px #000b;opacity:0;pointer-events:none;transition:.2s;max-width:min(90vw,480px)}.toast.show{opacity:1;transform:translate(-50%,0)}dialog{width:min(490px,calc(100vw - 30px));max-height:85dvh;overflow:auto;border:1px solid #51446a;border-radius:16px;background:#191b2a;color:var(--text);padding:25px;box-shadow:0 0 0 100vmax #0009}dialog::backdrop{background:#0009}.guide-head{display:flex;justify-content:space-between;align-items:start;gap:12px}.guide-head h2{margin:0;font-size:23px}.guide-head button{background:transparent}dialog li{line-height:1.6;margin:9px 0;color:#c6c8dc;font-size:13px}dialog ol{padding-left:22px}
@media(max-width:1120px){.workspace{grid-template-columns:1fr}.inspector{display:none;position:fixed;inset:0 0 0 auto;width:min(365px,100vw);z-index:50;box-shadow:-30px 0 70px #000c;min-height:0;max-height:none}.inspector.open{display:block}.mobile-close{display:block}.pad-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr))}}
@media(max-width:650px){.mast{padding:10px 12px}.brand strong{font-size:17px}.brand small{font-size:8px}.brand-symbol{height:32px;width:32px;font-size:18px}.back{font-size:20px}.top-actions{gap:4px}.top-actions .pill{padding:8px 7px;font-size:10px}.transport{padding:13px 12px}.transport-main{gap:8px}.transport-button{height:42px;width:42px}.clock{width:94px}.clock strong{font-size:16px}.toggle{padding:7px}.toggle span{display:none}.master-volume{margin-left:0;min-width:93px}.master-volume input{width:91px}.key-hint{display:none}.main-area{padding:19px 11px 25px}.section-top{align-items:start;margin-bottom:15px}.section-top h1{font-size:23px}.section-actions{width:100%;gap:6px}.section-actions button{flex:1;padding:9px 7px}.pad-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.pad-head{padding:0 6px;gap:3px;height:35px}.pad-name{font-size:11px}.tiny{padding:4px 5px}.pad-stage{height:clamp(125px,37vw,220px)}.pad-foot{padding:8px}.pad-details{font-size:9px}.bottom-bar{flex-wrap:wrap}.footer{flex-direction:column;font-size:9px}.inspector{padding:20px 16px 40px}.mixer-panel{padding:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}

/* v1.1: pads are the full-width stage; settings are an optional overlay. */
[hidden]{display:none!important}
.workspace{display:block;min-width:0;width:100%}
.main-area{width:100%;padding:14px clamp(10px,1.55vw,26px) 26px}
.section-top{margin-bottom:12px;align-items:center;gap:10px}
.section-top .eyebrow{margin-bottom:3px}
.section-top h1{font-size:clamp(20px,2vw,27px);margin-bottom:2px}
.section-top .helper{font-size:11px}
.pad-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;align-items:stretch;min-height:55vh}
.pad{display:flex;flex-direction:column;border-radius:10px;overflow:hidden;min-width:0;box-shadow:inset 0 1px 0 #ffffff08}
.pad-head{height:32px;flex:none}
.pad-stage{height:auto;aspect-ratio:4/3;min-height:0;flex:1;isolation:isolate}
.pad-foot{flex:none;padding:7px 8px 8px}
.pad-progress{margin-bottom:6px}
.pad-control{margin-top:6px;gap:5px}
.pad-control .arm,.pad-control .edit{padding:7px 4px}
.pad-details{font-size:9px}
.camera-tile{border:1px solid #7161a0;background:#151426}
.camera-tile .pad-head{color:#e6d8ff}
.camera-tile .pad-stage{background:radial-gradient(ellipse at center,#383055,#161322);position:relative}
.camera-tile .pad-stage video{object-fit:cover;filter:brightness(.96);transform:scaleX(-1)}
.camera-tile .camera-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:14px;pointer-events:none;color:#a79abb}
.camera-tile .camera-placeholder strong{font-size:31px;color:#c6b1ff}
.camera-tile .camera-placeholder span{font:10px/1.5 var(--mono)}
.camera-tile .camera-placeholder.on{display:none}
.camera-tile .camera-pill{position:absolute;left:8px;top:8px;background:#090a10c9;border:1px solid #4a4560;border-radius:5px;padding:4px 6px;font:9px var(--mono);color:#e5d9ff;pointer-events:none}
.camera-tile .camera-pill.live{color:#a1f2a2;border-color:#528968}
.camera-tile .camera-notice{font:10px/1.4 var(--mono);color:#aca6c3;min-height:30px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.camera-tile .camera-controls{display:flex;gap:5px}
.camera-tile .camera-controls button{padding:8px 3px;flex:1;font:700 10px var(--mono);border-radius:6px;border:1px solid #675884;background:#30264a;color:#edddff}
.camera-tile .camera-controls button:nth-child(2){flex:0 0 47px}
.inspector-shade{position:fixed;inset:0;background:#0009;backdrop-filter:blur(3px);z-index:60}
.inspector{display:block;position:fixed;right:0;top:0;bottom:0;left:auto;z-index:61;transform:translateX(102%);width:min(390px,100vw);max-height:100dvh;min-height:0;overflow:auto;background:#161824;border-left:1px solid #4c4863;box-shadow:-20px 0 60px #0009;visibility:hidden;transition:transform .19s ease,visibility .19s}
.inspector.open{display:block;transform:translateX(0);visibility:visible}
.mobile-close{display:block}
.transport{padding:9px clamp(10px,1.55vw,26px)}
.transport-main{gap:8px}
.transport-button{width:39px;height:39px}
.mast{padding:10px clamp(10px,1.55vw,26px)}
.brand-symbol{width:32px;height:32px;font-size:19px}
.brand strong{font-size:18px}
.brand small{font-size:9px}
.bottom-bar{margin-top:12px;padding-top:12px}
@media(max-width:1499px){.pad-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:1139px){.pad-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:799px){.pad-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:549px){
 .pad-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
 .main-area{padding:12px 8px 20px}
 .mast{padding:8px}
 .transport{padding:9px 8px}
 .brand strong{font-size:16px}
 .brand small{font-size:8px}
 .top-actions .pill{font-size:10px;padding:8px 6px}
 .section-top .eyebrow{display:none}
 .section-top h1{font-size:20px}
 .helper{font-size:10px!important}
 .pad-head{height:31px;padding:0 6px}
 .pad-stage{aspect-ratio:1/1}
 .pad-foot{padding:6px}
 .pad-control .arm,.pad-control .edit{font-size:10px}
 .camera-tile .camera-placeholder strong{font-size:26px}
 .camera-tile .camera-notice{font-size:9px;min-height:27px}
}
@media(max-width:359px){.pad-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.brand small{display:none}.top-actions .pill.secondary{display:none}}

/* v1.2: distinct camera dock and clear full-size video-loop grid */
.camera-dock{margin:0 0 12px;max-width:900px}
.camera-dock .camera-tile{display:grid;grid-template-columns:minmax(112px,172px) minmax(0,1fr);grid-template-rows:auto;align-items:center;gap:12px;min-height:100px;padding:8px 11px;border-radius:10px}
.camera-dock .camera-tile .pad-head{display:none}
.camera-dock .camera-tile .pad-stage{aspect-ratio:16/9;min-height:0;height:96px;overflow:hidden;border-radius:8px}
.camera-dock .camera-tile .pad-foot{padding:0;min-width:0}
.camera-dock .camera-tile .camera-placeholder{gap:4px;padding:5px}
.camera-dock .camera-tile .camera-placeholder strong{font-size:21px}
.camera-dock .camera-tile .camera-placeholder span{font-size:9px}
.camera-dock .camera-tile .camera-notice{min-height:20px;max-height:35px}
.camera-dock .camera-tile .camera-controls button{padding:9px 4px}
.pad-grid{grid-template-columns:repeat(5,minmax(0,1fr));min-height:0;gap:11px}
.pad-stage{aspect-ratio:4/3;min-height:145px;background:radial-gradient(ellipse at 50% 35%,#332844,#111421 72%)}
.pad .fallback strong{font:700 12px var(--mono);color:#d8c9ff;letter-spacing:.07em}
.pad .fallback span{font:9px/1.35 var(--mono);color:#a4a2bc;letter-spacing:0;text-align:center}
.pad .fallback .big-wave{font-size:29px;color:#9180c5}
.pad-details{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.pad-details button{min-width:0;border:1px solid #47445f;background:#212539;border-radius:6px;color:#ccc5e8;padding:6px 3px;font:10px var(--mono);white-space:nowrap}
.pad-details button:hover{border-color:var(--accent);color:white}
.pad-control .arm{background:#533040;border-color:#a3657a;color:#ffe6ed;font-size:11px}
.pad-control .arm.active{background:#ff678a}
.pad-control .edit{font-size:11px}
.pad.armed .pad-stage{outline:2px solid #ff7795;outline-offset:-2px}
@media(max-width:1200px){.pad-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:850px){.pad-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:590px){.pad-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.pad-stage{min-height:110px}.pad .fallback strong{font-size:10px}.pad .fallback span{font-size:8px}.pad-details button{font-size:9px;padding:5px 2px}.camera-dock .camera-tile{grid-template-columns:112px minmax(0,1fr);gap:8px}.camera-dock .camera-tile .pad-stage{height:75px}.camera-dock .camera-tile .camera-notice{font-size:9px}}