.keys-room{--keys-accent:#e8b76c;--accent:var(--keys-accent);max-width:1040px}.keys-room.keys-gm{--keys-accent:#98bfb1}.keys-header{display:flex;flex-wrap:wrap;align-items:center;gap:18px;padding:30px 0 20px}.keys-device{color:var(--muted);font-size:.68rem;margin-left:auto}.keys-intro{display:grid;grid-template-columns:1.2fr 1fr;align-items:flex-end;grid-gap:44px;gap:44px;padding:38px 0 30px}.keys-intro h1{font-size:clamp(2.4rem,6vw,4rem);line-height:1.05;letter-spacing:-.04em;margin-top:12px}.keys-intro h1 span{color:var(--keys-accent)}.keys-intro>p{color:var(--muted);font-size:1rem;max-width:34ch;line-height:1.65;padding-bottom:4px}.keys-engines{display:grid;grid-template-columns:1fr 1fr;grid-gap:12px;gap:12px}.keys-engine{text-align:left;cursor:pointer;border:1px solid var(--line);border-radius:12px;padding:20px 24px;background:#1c1c20;color:inherit;display:flex;flex-direction:column;gap:8px;transition:border-color .16s,background .16s;min-width:0}.keys-engine:hover{background:#252529}.keys-engine.selected{border-color:var(--keys-accent);background:linear-gradient(130deg,#302c24,#1c1c20 75%)}.keys-gm .keys-engine.selected{background:linear-gradient(130deg,#23332e,#1c1c20 75%)}.keys-engine-bottom,.keys-engine-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.62rem;color:var(--muted);letter-spacing:.06em}.keys-led{width:7px;height:7px;border-radius:50%;background:#565650;flex-shrink:0}.selected .keys-led{background:var(--keys-accent);box-shadow:0 0 9px #e8b76c50}.keys-engine>strong{font-family:Archivo,sans-serif;font-size:1.75rem;letter-spacing:-.03em;margin-top:16px}.keys-engine>span:not(.keys-engine-top):not(.keys-engine-bottom){color:var(--keys-accent);font-size:.82rem}.keys-engine p{font-size:.85rem;line-height:1.6;color:var(--muted);margin:4px 0 16px;flex:1 1}.keys-engine-bottom{border-top:1px solid var(--line);padding-top:14px}.keys-display{margin-top:24px;padding:26px 28px;color:#242820;background:#c7cdb9;border:5px solid #2c2d2a;border-radius:12px;box-shadow:inset 0 3px 12px #191e2330;display:flex;align-items:center;justify-content:space-between;gap:24px}.keys-display-main{min-width:0}.keys-display-main>span{font-size:.68rem;letter-spacing:.1em}.keys-display h2{font-family:IBM Plex Mono,monospace;font-weight:600;font-size:clamp(1.4rem,3vw,2rem);letter-spacing:-.06em;margin:12px 0;overflow-wrap:anywhere}.keys-playing{min-height:1.2em;font-size:.65rem;letter-spacing:.05em}.keys-power{display:flex;flex-direction:column;align-items:flex-end;gap:12px;flex-shrink:0}.keys-power>span{font-size:.6rem}.keys-power-button{cursor:pointer;border:1px solid #4b5343;border-radius:4px;background:#293222;padding:13px 16px;color:#ecf0e3;font-size:.65rem;font-weight:600}.keys-power-button:disabled{cursor:default;background:transparent;color:#39412f}.keys-library{margin-top:32px;border:1px solid var(--line);border-radius:12px;padding:24px}.keys-library-heading{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:22px}.keys-controller-title h2,.keys-library h2{font-size:1.15rem;letter-spacing:-.025em}.keys-controller-title p,.keys-library-heading p{margin-top:7px;color:var(--muted);font-size:.8rem;line-height:1.6}.keys-search{display:flex;flex-direction:column;gap:7px;min-width:200px}.keys-search>span{font-size:.6rem;color:var(--muted)}.keys-search input{min-width:0;width:100%;background:#0f0f12;color:#efeee7;padding:11px 12px;border-radius:5px;border:1px solid #404047;font:inherit;font-size:.8rem}.keys-groups{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}.keys-groups button{cursor:pointer;background:transparent;border:1px solid var(--line);color:#bcbcb5;border-radius:4px;padding:9px 10px;font-size:.65rem}.keys-groups button.selected{background:var(--keys-accent);color:#222320;border-color:var(--keys-accent)}.keys-presets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:7px;gap:7px}.keys-preset{min-width:0;cursor:pointer;display:flex;align-items:center;text-align:left;gap:12px;padding:16px 14px;background:#202025;border:1px solid transparent;border-radius:5px;color:#e1e0d8}.keys-preset:hover{background:#2a2a2f}.keys-preset.selected{border-color:var(--keys-accent)}.keys-preset>span:first-child{color:var(--muted);font-size:.65rem}.keys-preset strong{flex:1 1;font-weight:500;font-size:.88rem;overflow-wrap:anywhere}.keys-preset>span:last-child{color:var(--keys-accent);font-size:.7rem}.keys-empty{color:var(--muted);padding:20px 0}.keys-empty button{background:transparent;color:var(--keys-accent);text-decoration:underline;border:0;font:inherit;cursor:pointer}.keys-import{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;border-top:1px solid var(--line);margin-top:20px;padding-top:20px}.keys-import p{font-size:.78rem;color:var(--muted)}.keys-error{color:#ffc4ad;background:#3a2420;border:1px solid #805448;border-radius:6px;padding:12px 16px;margin-top:14px;font-size:.85rem;overflow-wrap:anywhere}.keys-controller-title{margin:32px 0 18px}.keys-notes{border-top:1px solid var(--line);padding-top:22px;margin-top:32px}.keys-notes p{max-width:85ch;color:var(--muted);font-size:.78rem;line-height:1.7}.keys-notes>div{display:flex;gap:20px;flex-wrap:wrap;margin-top:14px;font-size:.66rem}.keys-hub-link:focus-visible,.keys-room :is(button,input,a):focus-visible{outline:2px solid var(--keys-accent,#e8b76c);outline-offset:4px}.keys-hub-link{display:flex;justify-content:space-between;align-items:center;gap:24px;border:1px solid #85724e;background:linear-gradient(120deg,#302b22,#1b1b20);border-radius:12px;padding:26px;margin:8px 0 28px;text-decoration:none}.keys-hub-link .eyebrow{color:#e8b76c}.keys-hub-link h2{font-family:Archivo,sans-serif;font-size:1.7rem;margin:8px 0;letter-spacing:-.03em}.keys-hub-link p{font-size:.85rem;color:var(--muted);max-width:47ch}.keys-hub-link>span{color:#e8b76c;font-size:.74rem;white-space:nowrap}@media (max-width:640px){.keys-header{gap:10px 18px}.keys-device{margin-left:0;width:100%}.keys-intro{grid-template-columns:1fr;gap:18px;padding-top:26px}.keys-intro>p{max-width:44ch}.keys-engines{gap:8px}.keys-engine{padding:16px 12px}.keys-engine>strong{font-size:1.3rem}.keys-engine p{font-size:.76rem}.keys-engine-bottom,.keys-engine-top{font-size:.53rem;letter-spacing:0}.keys-engine-bottom>span{display:none}.keys-display{padding:20px 16px;flex-direction:column;align-items:stretch;gap:20px}.keys-power{align-items:center;flex-direction:row;justify-content:space-between;border-top:1px solid #87907a;padding-top:16px}.keys-library{padding:18px 12px}.keys-library-heading{align-items:stretch;flex-direction:column;gap:18px}.keys-presets{grid-template-columns:1fr}.keys-preset{padding:14px 12px}.keys-hub-link{flex-direction:column;align-items:flex-start;gap:18px;padding:22px}}@media (prefers-reduced-motion:reduce){.keys-engine{transition:none}}.keys-loop{margin:24px 0;padding:24px;border:1px solid #78694f;border-radius:9px;background:linear-gradient(120deg,#29251f,#1c1b1d)}.keys-loop-head{display:flex;justify-content:space-between;gap:24px}.keys-loop-eyebrow{color:var(--keys-accent);font-size:.64rem;letter-spacing:.1em}.keys-loop h2{margin:8px 0;font-family:Archivo,sans-serif;font-size:1.5rem}.keys-loop p{max-width:72ch;color:#bcb8b0;font-size:.82rem;line-height:1.6}.keys-loop-head>strong{flex-shrink:0;color:var(--keys-accent);font-size:.67rem;padding-top:6px}.keys-loop-progress{height:4px;margin:20px 0;background:#4a4339;border-radius:4px;overflow:hidden}.keys-loop-progress>span{display:block;height:100%;background:var(--keys-accent)}.keys-loop-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px}.keys-loop-controls :is(input,select),.keys-loop-controls button{background:#151517;color:#f2ede4;border:1px solid #676055;padding:10px 13px;border-radius:5px;font:inherit;font-size:.75rem}.keys-loop-controls button{cursor:pointer}.keys-loop-controls button:disabled{opacity:.45;cursor:default}.keys-loop-controls .keys-loop-record{background:#9c503e;border-color:#bc6a54;color:#fff}.keys-loop-controls label{display:flex;flex-direction:column;gap:4px;color:#bdb8af;font-size:.62rem}.keys-loop-controls input{width:68px}@media(max-width:640px){.keys-loop{padding:18px 14px}.keys-loop-head{flex-direction:column;gap:8px}.keys-loop-controls button{flex:1 1}}