.app{background:#e8e4dc;display:flex;flex-direction:column;min-height:100vh}.play-app{background:radial-gradient(ellipse at 60% 10%,#d8d3c8 0,#b8b3a5 100%)}.cfg-header{background:#1a1a1a;padding:20px 32px}.cfg-header,.cfg-logo{align-items:center;display:flex}.cfg-logo{gap:14px}.cfg-logo__note{color:var(--accent);font-size:2.8rem;line-height:1}.cfg-logo__title{color:#fff;font-family:var(--font-display);font-size:1.6rem;letter-spacing:1px}.cfg-logo__sub{color:#888;font-size:.78rem;letter-spacing:1px;text-transform:uppercase}.cfg-main{animation:slide-in .35s ease-out;display:flex;flex-direction:column;gap:20px;margin:0 auto;max-width:820px;padding:28px 20px 64px;width:100%}.cfg-card{background:#fff;border-radius:18px;box-shadow:0 3px 14px #0000001a;padding:24px 26px}.cfg-card--row{align-items:center;display:flex;flex-wrap:wrap;gap:24px}.cfg-card__title{align-items:center;color:#1a1a1a;display:flex;font-family:var(--font-display);font-size:1.05rem;gap:10px;letter-spacing:.5px;margin-bottom:18px}.cfg-hint{color:#888;font-size:.8rem;margin-top:10px}.cfg-hint-inline{color:var(--accent);font-family:var(--font-ui);font-size:.8rem;font-weight:600}.tempo-row{display:flex;flex-direction:column;gap:12px}.tempo-big{align-items:baseline;display:flex;gap:6px}.tempo-num{color:#1a1a1a;font-size:3.4rem;line-height:1}.tempo-num,.tempo-unit{font-family:var(--font-mono)}.tempo-unit{color:#999;font-size:.9rem}.tempo-marks{color:#bbb;display:flex;font-size:.72rem;justify-content:space-between}.tempo-presets{display:flex;flex-wrap:wrap;gap:8px}.tpreset{background:#f2f0eb;border-radius:8px;color:#555;font-family:var(--font-mono);font-size:.82rem;padding:6px 14px;transition:all .15s}.tpreset--on,.tpreset:hover{background:#1a1a1a;color:#fff}.meter-layout{align-items:center;display:flex;flex-wrap:wrap;gap:32px}.meter-big{color:#1a1a1a;font-family:var(--font-display);font-size:4rem;line-height:1;min-width:80px}.meter-slash{color:#bbb;font-size:2.5rem;margin:0 4px}.meter-pickers{display:flex;flex-direction:column;gap:14px}.meter-picker-label{color:#999;font-size:.72rem;letter-spacing:1.5px;margin-bottom:7px;text-transform:uppercase}.meter-picker-row{display:flex;gap:7px}.mpick{background:#f2f0eb;border-radius:10px;color:#555;font-family:var(--font-mono);font-size:1.1rem;font-weight:700;height:42px;transition:all .15s;width:42px}.mpick--on,.mpick:hover{background:#1a1a1a;color:var(--accent)}.preset-grid{grid-gap:10px;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}.preset-tile{background:#f7f5f0;border:2px solid #0000;border-radius:12px;display:flex;flex-direction:column;gap:4px;padding:12px 14px;text-align:left;transition:all .15s}.preset-tile:hover{border-color:#ddd}.preset-tile--on{background:#fff;border-color:#1a1a1a}.pt-name{color:#1a1a1a;font-size:.85rem;font-weight:800}.pt-meter{color:#999;font-family:var(--font-mono);font-size:.75rem}.pt-notes{align-items:flex-end;display:flex;gap:2px;margin-top:4px}.palette-group{margin-bottom:14px}.palette-group__label{color:#aaa;font-size:.72rem;letter-spacing:1.5px;margin-bottom:8px;text-transform:uppercase}.palette-row{display:flex;flex-wrap:wrap;gap:8px}.pal-btn{align-items:center;background:#f7f5f0;border:2px solid #0000;border-radius:12px;display:flex;flex-direction:column;gap:3px;min-width:66px;padding:10px 10px 8px;transition:all .15s}.pal-btn:hover:not(.pal-btn--dis){background:#fff;border-color:#1a1a1a}.pal-btn--dis{cursor:not-allowed;opacity:.45}.pal-label{color:#777;font-size:.65rem}.custom-preview{align-items:flex-end;background:#f7f5f0;border-radius:12px;display:flex;flex-wrap:wrap;gap:8px;margin:14px 0;min-height:60px;padding:12px}.custom-empty{align-self:center;color:#ccc;font-size:.85rem}.custom-actions{display:flex;gap:10px}.cbtn{border-radius:10px;font-size:.85rem;font-weight:700;padding:8px 18px;transition:all .15s}.cbtn--del{background:#fff3f3;border:1.5px solid #fcc;color:#c44}.cbtn--del:hover:not(:disabled){background:#c44;color:#fff}.cbtn--clr{background:#f7f5f0;border:1.5px solid #ddd;color:#888}.cbtn--clr:hover:not(:disabled){background:#555;color:#fff}.cbtn:disabled{cursor:not-allowed;opacity:.4}.sound-opts{display:flex;flex-wrap:wrap;gap:28px}.sound-opt{align-items:center;color:#333;cursor:pointer;display:flex;font-size:.95rem;gap:10px}.start-btn{background:#1a1a1a;border-radius:50px;box-shadow:0 6px 24px #00000040;color:var(--accent);display:block;font-family:var(--font-display);font-size:1.35rem;letter-spacing:3px;margin:8px auto 0;padding:18px 48px;transition:all .2s}.start-btn:hover:not(:disabled){box-shadow:0 10px 30px #00000059;color:#fff;transform:translateY(-3px)}.start-btn:disabled{cursor:not-allowed;opacity:.35}.play-bar{align-items:center;background:#1a1a1a;display:flex;justify-content:space-between;padding:14px 24px}.play-back{background:#0000;border:1px solid #333;border-radius:8px;color:#888;font-size:.85rem;padding:7px 14px;transition:all .15s}.play-back:hover{border-color:#666;color:#fff}.play-bar__info{align-items:center;display:flex;gap:16px}.pbi-meter{color:#fff;font-family:var(--font-display);font-size:1.7rem}.pbi-tempo{color:var(--accent);font-family:var(--font-mono);font-size:.9rem}.play-bar__opts{display:flex;gap:8px}.play-opt{background:#2a2a2a;border:1.5px solid #333;border-radius:10px;color:#666;font-size:1rem;height:38px;transition:all .15s;width:38px}.play-opt--on{background:#333;border-color:var(--accent);color:#fff}.play-main{align-items:center;display:flex;flex:1 1;flex-direction:column;gap:24px;padding:28px 16px 40px}.beat-row{display:flex;gap:12px}.beat-pip{align-items:center;background:#fff;border:3px solid #d0ccc4;border-radius:50%;color:#bbb;display:flex;font-family:var(--font-mono);font-size:1.1rem;font-weight:700;height:50px;justify-content:center;transition:all .08s;width:50px}.beat-pip--one{border-color:#bbb}.beat-pip--on{animation:beat-pop .22s ease-out;background:var(--accent);border-color:var(--accent);color:#1a1a1a}.beat-pip--one.beat-pip--on{background:#e84040;border-color:#e84040;color:#fff}.play-figinfo{align-items:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#ffffffb3;border:1px solid #ffffff80;border-radius:40px;display:flex;gap:12px;padding:10px 22px}.pfi-label{color:#999;font-size:.75rem;letter-spacing:1.5px;text-transform:uppercase}.pfi-name{color:#1a1a1a;font-family:var(--font-display);font-size:1.1rem}.pfi-beats{border-left:1px solid #ddd;color:#888;font-family:var(--font-mono);font-size:.8rem;padding-left:12px}.play-controls{align-items:center;display:flex;gap:12px}.ctrl-btn{border-radius:50px;font-family:var(--font-display);font-size:1.1rem;letter-spacing:2px;padding:14px 36px;transition:all .2s}.ctrl-btn--play{background:#1a1a1a;box-shadow:0 4px 16px #0003;color:var(--accent)}.ctrl-btn--play:hover{box-shadow:0 8px 22px #0000004d;transform:translateY(-2px)}.ctrl-btn--stop{animation:pulse .8s ease-in-out infinite;background:#e84040;color:#fff}.ctrl-btn--restart{background:#ffffffb3;border:1px solid #ddd;color:#555}.ctrl-btn--restart:hover{background:#fff}.binder{max-width:720px;position:relative;width:100%}.binder__rings{display:flex;justify-content:space-evenly;margin-bottom:-8px;padding:0 54px;position:relative;z-index:3}.binder__body{background:linear-gradient(180deg,#232323,#1a1a1a 60%,#141414);border-radius:14px 14px 4px 4px;box-shadow:0 10px 40px #0000008c,inset 0 1px 0 #3a3a3a,inset 0 -2px 0 #0a0a0a;padding:22px 20px 18px;position:relative;z-index:2}.binder__deco{align-items:center;display:flex;justify-content:space-between;padding:10px 12px 2px}.binder__cards{display:flex;flex-wrap:nowrap;gap:12px;justify-content:center;overflow-x:auto;padding-bottom:4px}.binder__stand{background:linear-gradient(180deg,#111,#0a0a0a);border-radius:0 0 12px 12px;box-shadow:0 8px 24px #0006;-webkit-clip-path:polygon(0 0,100% 0,85% 100%,15% 100%);clip-path:polygon(0 0,100% 0,85% 100%,15% 100%);height:22px;margin:0 24px}.r-card{align-items:center;background:#fff;border:1.5px solid #e0e0e0;border-radius:10px 10px 8px 8px;box-shadow:0 4px 14px #00000047,inset 0 1px 0 #ffffffe6;display:flex;flex:1 1;flex-direction:column;max-width:160px;min-width:90px;padding:8px 7px 10px;position:relative;transition:transform .18s ease,box-shadow .18s ease}.r-card--active{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent),0 14px 34px #f5c51873,inset 0 1px 0 #ffffffe6;transform:translateY(-10px) scale(1.05)}.r-card__hole{background:#e8e4dc;border:1.5px solid #d0ccc5;border-radius:50%;box-shadow:inset 0 1px 3px #00000026;height:13px;margin-bottom:7px;width:13px}.r-card__note{align-items:center;display:flex;height:68px;justify-content:center;margin:2px 0}.r-card__label{color:#888;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.8px;margin-top:2px;text-align:center;text-transform:uppercase}.r-card__beat-row{display:flex;gap:3px;margin-top:6px}.r-card__x{color:#999;font-size:.75rem;line-height:1}.r-card__dot-strip{background:#f0ede8;border:1px solid #e0ddd8;border-radius:4px;display:flex;gap:4px;margin-top:5px;padding:4px 8px}.r-card__dot{background:#ccc;border-radius:50%;height:9px;transition:background .1s;width:9px}.r-card__dot--on{background:#f5a623;box-shadow:0 0 4px #f5a62399}.r-card__badge{align-items:center;background:#ddd;border-radius:50%;color:#1a1a1a;display:flex;font-family:var(--font-mono);font-size:.6rem;font-weight:700;height:18px;justify-content:center;position:absolute;right:7px;top:7px;width:18px}.r-card__badge--accent{background:var(--accent2);color:#fff}.r-card--accent{border-left:3px solid var(--accent)}.r-card--accent .r-card__badge{background:#e84040;color:#fff}.pal-beats{color:#aaa;font-size:.58rem;margin-top:1px}@media (max-width:600px){.cfg-main{gap:14px;padding:16px 12px 48px}.cfg-card{padding:18px 16px}.binder__body{padding:14px 10px 12px}.binder__cards{gap:7px}.r-card{min-width:72px;padding:6px 4px 8px}.r-card__note{height:56px}.r-card__label{font-size:.52rem}.beat-pip{font-size:.9rem;height:40px;width:40px}.ctrl-btn{font-size:.95rem;padding:12px 24px}.preset-grid{grid-template-columns:1fr 1fr}.binder__rings{padding:0 28px}}*,:after,:before{box-sizing:border-box;margin:0;padding:0}:root{--bg:#e8e4dc;--bg2:#d4cfc5;--binder-body:#1a1a1a;--binder-edge:#2d2d2d;--ring:#f5c518;--ring-dark:#c9a000;--card:#fff;--card-border:#ddd;--card-active-glow:#f5c518;--accent:#f5c518;--accent2:#e84040;--text-dark:#1a1a1a;--text-mid:#555;--text-light:#999;--font-display:"Playfair Display",serif;--font-mono:"DM Mono",monospace;--font-ui:"Nunito",sans-serif}body,html{background:#e8e4dc;background:var(--bg);font-family:Nunito,sans-serif;font-family:var(--font-ui);height:100%;overflow-x:hidden}#root{min-height:100vh}button{border:none;cursor:pointer;font-family:Nunito,sans-serif;font-family:var(--font-ui);outline:none}input[type=range]{-webkit-appearance:none;appearance:none;background:#0000;width:100%}input[type=range]::-webkit-slider-track{background:#c8c3b8;border-radius:3px;height:5px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:#f5c518;background:var(--accent);border-radius:50%;box-shadow:0 2px 6px #00000040;cursor:pointer;height:22px;margin-top:-9px;width:22px}@keyframes card-glow{0%,to{box-shadow:0 6px 20px #00000040}50%{box-shadow:0 0 0 4px #f5c518,0 8px 30px #f5c51880;box-shadow:0 0 0 4px var(--ring),0 8px 30px #f5c51880}}@keyframes beat-pop{0%{transform:scale(1)}40%{transform:scale(1.22)}to{transform:scale(1)}}@keyframes slide-in{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}
/*# sourceMappingURL=main.9e239e0d.css.map*/