:root{color:#f7f8fb;font-synthesis:none;text-rendering:geometricprecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#202226;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:linear-gradient(135deg,#ff5c8a14,#0000 28%),linear-gradient(225deg,#4cc9f01a,#0000 30%),#202226;min-width:320px;min-height:100vh;margin:0}button{font:inherit}button:focus-visible{outline-offset:3px;outline:3px solid #fff}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.app-shell{flex-direction:column;min-height:100vh;display:flex}.app-header{background:#111317eb;border-bottom:1px solid #ffffff14;justify-content:space-between;align-items:center;gap:24px;padding:18px 24px;display:flex}.brand-group{align-items:center;gap:18px;min-width:0;display:flex}.brand-group h1{color:#fff;letter-spacing:0;margin:0;font-size:1.45rem}.preset-control{color:#d9dee8;white-space:nowrap;background:#ffffff0f;border:1px solid #ffffff29;border-radius:8px;align-items:center;gap:8px;min-height:38px;padding:0 8px 0 12px;display:inline-flex}.preset-control span{color:#aeb6c4;text-transform:uppercase;font-size:.78rem;font-weight:800}.preset-control select{color:#fff;min-height:30px;font:inherit;background:#242832;border:0;border-radius:6px;padding:0 28px 0 8px;font-weight:800}.preset-control select:focus-visible{outline-offset:2px;outline:2px solid #4cc9f0}.header-actions{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:12px;display:flex}.transport-controls,.navigation-controls,.file-controls,.project-links{align-items:center;gap:10px;display:flex}.project-links{min-height:40px}.project-links a{color:#d9dee8;background:#ffffff0d;border:1px solid #ffffff24;border-radius:8px;align-items:center;min-height:34px;padding:0 12px;font-size:.82rem;font-weight:900;text-decoration:none;transition:transform .16s,border-color .16s,background .16s;display:inline-flex}.project-links a:hover{background:#ffffff1a;border-color:#ffffff47;transform:translateY(-1px)}.project-links a:focus-visible{outline-offset:3px;border-color:#4cc9f0b8;outline:3px solid #fff}.file-input{clip:rect(0, 0, 0, 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.file-status,.audio-status{color:#d9dee8;background:#ffffff14;border:1px solid #ffffff29;border-radius:7px;min-height:28px;padding:5px 9px;font-size:.78rem;font-weight:900}.transport-button,.navigation-controls button,.file-controls button{color:#f7f8fb;cursor:pointer;background:#2d3036;border:1px solid #ffffff24;border-radius:8px;min-height:40px;padding:0 16px;transition:transform .16s,border-color .16s,background .16s}.transport-button:hover,.navigation-controls button:hover:not(:disabled),.file-controls button:hover{background:#383c44;border-color:#ffffff47;transform:translateY(-1px)}.transport-button:focus-visible,.navigation-controls button:focus-visible,.file-controls button:focus-visible,.rule-action-button:focus-visible{border-color:#80ed99db;box-shadow:0 0 0 4px #80ed992e}.transport-button.is-active{color:#111317;background:#80ed99;border-color:#80ed99b8}.navigation-controls button:disabled{opacity:.45;cursor:not-allowed}.workspace{flex:1;grid-template-columns:minmax(0,1fr) minmax(380px,.92fr);gap:20px;padding:22px 24px;display:grid}.rules-panel,.code-panel{background:#23262cdb;border:1px solid #ffffff1a;border-radius:8px;flex-direction:column;min-width:0;min-height:310px;padding:20px;display:flex;box-shadow:0 18px 48px #00000038}.panel-heading{justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:16px;display:flex}.panel-heading h2{color:#fff;letter-spacing:0;margin:0;font-size:1.05rem}.code-heading-row{align-items:flex-start}.code-heading-row>div:first-child{min-width:0}.code-actions{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;display:flex}.copy-code-button{color:#111317;cursor:pointer;background:#4cc9f0;border:1px solid #4cc9f06b;border-radius:7px;min-height:34px;padding:0 12px;font-weight:900}.copy-code-button:hover{background:#7bdcf6}.copy-code-button:focus-visible{outline-offset:3px;outline:3px solid #fff}.copy-status{color:#d9dee8;background:#ffffff14;border:1px solid #ffffff29;border-radius:7px;min-height:28px;padding:5px 9px;font-size:.78rem;font-weight:900}.copy-status-copied{color:#111317;background:#80ed99;border-color:#80ed99b8}.copy-status-empty,.copy-status-unsupported,.copy-status-failed{color:#ffe3a3;background:#ffd1661f;border-color:#ffd16657}.eyebrow{color:#9ea7b8;letter-spacing:0;text-transform:uppercase;margin:0;font-size:.78rem;font-weight:700}.rule-list{gap:12px;margin:0;padding:0;list-style:none;display:grid}.rule-block{background:linear-gradient(90deg,#4cc9f033,#0000),#2c3038;border:1px solid #ffffff1f;border-radius:8px;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:58px;padding:10px 12px;display:grid}.rule-index{color:#111317;background:#ffd166;border-radius:7px;justify-content:center;align-items:center;width:40px;height:36px;font-weight:800;display:inline-flex}.rule-copy{color:#dfe4ed;flex-wrap:wrap;align-items:center;gap:8px;min-width:0;font-weight:700;display:flex}.rule-copy strong{color:#80ed99}.rule-block.is-disabled{opacity:.62;background:linear-gradient(90deg,#9ea7b829,#0000),#2a2d34}.rule-block.is-focused{border-color:#80ed998f;box-shadow:0 0 0 2px #80ed991f}.rule-muted-label{color:#c5cad5;background:#ffffff14;border:1px solid #ffffff2e;border-radius:6px;align-items:center;min-height:24px;padding:0 8px;font-size:.74rem;font-weight:900;display:inline-flex}.rule-actions{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;display:flex}.rule-action-button{color:#f7f8fb;cursor:pointer;background:#ffffff14;border:1px solid #ffffff29;border-radius:7px;min-height:34px;padding:0 10px}.rule-action-button:hover:not(:disabled){background:#ffffff21;border-color:#ffffff4d}.rule-action-button:disabled{opacity:.38;cursor:not-allowed}.rule-action-button.is-icon{width:34px;padding:0;font-weight:900}.rule-action-button.is-selected{color:#111317;background:#80ed99;border-color:#80ed99b8}.rule-action-button.is-danger{color:#ffd7df;border-color:#ff5c8a47}.rule-action-button.is-danger:hover:not(:disabled){color:#fff;background:#ff5c8a33}.rule-detail{background:#14171cb8;border:1px solid #ffffff1f;border-radius:8px;gap:12px;margin-top:14px;padding:14px;display:grid}.rule-detail.is-disabled{opacity:.78}.rule-detail-header{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.rule-detail-header h3{color:#fff;letter-spacing:0;margin:4px 0 0;font-size:1rem}.rule-detail-route{color:#80ed99;margin:0;font-size:.88rem;font-weight:800}.rule-detail-copy-text{color:#d9dee8;margin:0;line-height:1.6}.rule-detail-code{color:#1d232c;background:#d9dde5;border-radius:8px;gap:8px;padding:12px;display:grid}.rule-detail-code span{color:#596170;text-transform:uppercase;font-size:.72rem;font-weight:900}.rule-detail-code code{overflow-wrap:anywhere;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:.88rem;font-weight:800}.rule-detail-code p,.rule-detail-note{margin:0;line-height:1.55}.rule-detail-code p{color:#3e4653;border-top:1px solid #20242b29;padding-top:8px;font-size:.84rem;font-weight:700}.rule-detail-note{color:#ffe3a3;background:#ffd16614;border:1px solid #ffd1663d;border-radius:7px;padding:9px 10px;font-size:.86rem;font-weight:800}.empty-rules{color:#aab2c2;text-align:center;border:1px dashed #ffffff29;border-radius:8px;flex:1;place-content:center;gap:8px;min-height:180px;display:grid}.empty-rules span{color:#ffd166;font-weight:800}.empty-rules strong{color:#f7f8fb;font-size:1.08rem}.empty-rules p{color:#aeb6c4;max-width:42ch;margin:0;line-height:1.6}.code-view{color:#20242b;white-space:pre-wrap;background:#d9dde5;border:1px solid #ffffff29;border-radius:8px;flex:1;min-height:0;margin:0;padding:14px;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:.93rem;line-height:1.65;overflow:auto}.code-line{border-radius:6px;min-height:1.65em;padding:0 4px;transition:background .12s,color .12s,box-shadow .12s;display:block}.code-line.is-active{color:#0f1720;background:#80ed99b8;box-shadow:inset 3px 0 #4cc9f0}.pad-dock{background:#121418f2;border-top:1px solid #ffffff17;gap:16px;padding:18px 24px 24px;display:grid}.dock-topline{justify-content:space-between;align-items:center;gap:18px;display:flex}.path-display{align-items:center;gap:12px;min-width:0;display:flex}.path-label{color:#9ea7b8;text-transform:uppercase;font-size:.82rem;font-weight:800}.path-display strong{color:#fff;text-overflow:ellipsis;white-space:nowrap;font-size:1.04rem;overflow:hidden}.pad-inspector{background:#23262ce6;border:1px solid #ffffff1f;border-radius:8px;grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);align-items:stretch;gap:16px;padding:14px 16px;display:grid}.inspector-main{min-width:0}.inspector-kicker{color:#9ea7b8;letter-spacing:0;text-transform:uppercase;margin:0 0 6px;font-size:.74rem;font-weight:800}.inspector-main h2{color:#fff;letter-spacing:0;margin:0;font-size:1rem}.inspector-main p{color:#d9dee8;margin:8px 0 0;line-height:1.6}.inspector-title-row{flex-wrap:wrap;align-items:center;gap:10px;min-width:0;display:flex}.inspector-route{font-size:.88rem;font-weight:800;color:#80ed99!important}.route-badge{color:#101217;background:#80ed99;border:1px solid #80ed9957;border-radius:6px;align-items:center;min-height:24px;padding:0 8px;font-size:.72rem;font-weight:900;display:inline-flex}.route-badge.is-prototype{color:#ffd166;background:#ffd1661a;border-color:#ffd16666}.todo-badge{color:#ffd166;background:#ffd1661a;border:1px solid #ffd16670;border-radius:6px;align-items:center;min-height:24px;padding:0 8px;font-size:.72rem;font-weight:900;display:inline-flex}.inspector-code{color:#1d232c;background:#d9dde5;border-radius:8px;align-content:center;gap:8px;min-width:0;padding:12px;display:grid}.inspector-code span{color:#596170;text-transform:uppercase;font-size:.74rem;font-weight:900}.inspector-code code{overflow-wrap:anywhere;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:.9rem;font-weight:800}.snippet-explanation{color:#3e4653;border-top:1px solid #20242b29;margin:0;padding-top:8px;font-size:.84rem;font-weight:700;line-height:1.55}.pad-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:12px;display:grid}.live-pad{--pad-color:#4cc9f0;aspect-ratio:1.08;min-height:92px;color:var(--pad-text-color,#101217);background:linear-gradient(180deg, #ffffff6b, #ffffff05), var(--pad-color);cursor:pointer;border:1px solid #ffffff29;border-radius:8px;align-content:space-between;gap:12px;padding:12px;transition:transform .16s,filter .16s,box-shadow .16s;display:grid;position:relative;overflow:hidden;box-shadow:inset 0 -10px 18px #0000002e,0 12px 22px #0000003d}.live-pad:hover{filter:saturate(1.12);transform:translateY(-3px);box-shadow:inset 0 -10px 18px #00000029,0 18px 28px #00000047}.live-pad:focus-visible{outline-offset:3px;outline:4px solid #fff;box-shadow:inset 0 -10px 18px #0000001f,0 0 0 6px #80ed9957,0 18px 28px #00000047}.live-pad:active{transform:translateY(0)}.live-pad.is-selected{outline-offset:-6px;outline:3px solid #fff}.pad-number{background:#ffffffb8;border-radius:6px;justify-content:center;align-items:center;width:30px;height:30px;font-weight:900;display:inline-flex}.pad-short-label{max-width:calc(100% - 58px);min-height:26px;color:var(--pad-text-color,#111317);overflow-wrap:anywhere;background:#ffffffbd;border-radius:6px;align-items:center;padding:0 8px;font-size:.74rem;font-weight:900;display:inline-flex;position:absolute;top:12px;right:12px}.pad-label{overflow-wrap:anywhere;text-align:left;font-size:.98rem;font-weight:900;line-height:1.28;display:block}@media (width<=1100px){.workspace{grid-template-columns:1fr}.pad-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.live-pad{aspect-ratio:1.55}}@media (width<=720px){.app-header,.dock-topline{flex-direction:column;align-items:stretch}.brand-group{flex-direction:column;align-items:flex-start;gap:10px}.transport-controls,.navigation-controls,.project-links{width:100%}.project-links a{flex:1;justify-content:center}.transport-button,.navigation-controls button{flex:1;padding:0 10px}.workspace,.pad-dock,.app-header{padding-left:14px;padding-right:14px}.panel-heading{flex-direction:column;align-items:flex-start;gap:6px}.pad-inspector{grid-template-columns:1fr}.rule-block{grid-template-columns:40px minmax(0,1fr)}.rule-actions{grid-column:2;justify-content:flex-start}.pad-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.live-pad{aspect-ratio:1.7;min-height:86px}}