@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap";:root{--bg:#FAF6F1;--surface:#FFFFFF;--surface-alt:#F5F0EB;--border:rgba(140,100,70,.1);--border-strong:rgba(140,100,70,.2);--accent:#DA7756;--accent-hover:#C4623F;--accent-glow:rgba(218,119,86,.25);--accent-light:#F2DDD4;--text:#2D1F14;--text-secondary:#7A6B5D;--text-muted:#A89888;--pad-bg:linear-gradient(145deg,#FFF7F2,#FFE8DB);--pad-hover:linear-gradient(145deg,#FFEEE4,#FFD9C8);--pad-playing:linear-gradient(145deg,#DA7756,#C4623F);--danger:#E54D2E;--danger-hover:#D13415;--success:#30A46C;--radius:12px;--radius-sm:8px;--shadow-sm:0 1px 3px rgba(45,31,20,.06);--shadow-md:0 4px 16px rgba(45,31,20,.08);--shadow-lg:0 8px 32px rgba(45,31,20,.1)}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--text);display:flex;flex-direction:column;align-items:center;gap:20px;padding:24px 16px;min-height:100vh}.header-wrap{width:min(1100px,95%);display:flex;align-items:center;justify-content:center}h1{font-size:48px;font-weight:900;color:var(--accent);letter-spacing:-1px;text-align:center}.panel{width:min(1100px,95%);background:var(--surface);border-radius:16px;padding:20px;border:1px solid var(--border);box-shadow:var(--shadow-md)}.ctrl-btn{background:var(--surface);color:var(--text);border:1px solid var(--border-strong);padding:8px 14px;border-radius:var(--radius-sm);font-weight:700;font-size:.85rem;cursor:pointer;transition:all .15s ease;font-family:inherit}.ctrl-btn:hover{background:var(--surface-alt);border-color:var(--accent);color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.ctrl-btn-red{background:var(--danger);color:#fff;border:none;padding:8px 14px;border-radius:var(--radius-sm);cursor:pointer;font-weight:700;font-size:.85rem;transition:all .15s ease;font-family:inherit}.ctrl-btn-red:hover{background:var(--danger-hover);transform:translateY(-1px)}.mode-btn{padding:6px 12px;border-radius:20px;border:1px solid var(--border-strong);background:var(--surface);font-weight:700;cursor:pointer;font-size:.8rem;transition:all .15s ease;font-family:inherit;color:var(--text-secondary)}.mode-btn:hover{border-color:var(--accent);color:var(--accent)}.mode-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 2px 8px var(--accent-glow)}.rec-btn{background:var(--surface);color:var(--text);border:1px solid var(--border-strong);padding:8px 12px;border-radius:var(--radius-sm);font-weight:700;cursor:pointer;transition:all .15s ease;font-family:inherit;font-size:.85rem}.rec-btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}.saver-toggle{padding:6px 14px;border-radius:20px;border:1px solid var(--accent);background:var(--accent);color:#fff;font-weight:700;font-size:.8rem;cursor:pointer;transition:all .15s ease;font-family:inherit;box-shadow:0 2px 8px var(--accent-glow)}.saver-toggle:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.saver-toggle.panel-open{background:var(--surface);color:var(--text-muted);border-color:var(--border-strong);box-shadow:none;cursor:default}.saver-toggle.panel-open:hover{background:var(--surface);transform:none}.looper-big-btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--accent),var(--accent-hover));color:#fff;padding:12px 24px;border-radius:var(--radius);font-weight:800;font-size:1rem;border:none;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 16px var(--accent-glow);font-family:inherit}.looper-big-btn:hover{transform:translateY(-2px);box-shadow:0 6px 24px var(--accent-glow)}.looper-big-btn.glow{animation:looperPulse 2s infinite alternate}@keyframes looperPulse{0%{box-shadow:0 4px 16px var(--accent-glow)}to{box-shadow:0 8px 32px #da775666;transform:translateY(-2px)}}.top-controls{display:flex;flex-direction:column;gap:12px;width:100%}.top-row{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:nowrap}.clock-alarm{display:flex;gap:12px;align-items:center}.clock-display{display:flex;gap:12px;align-items:center;flex-wrap:nowrap}.clock-full{font-weight:900;font-size:1.3rem;color:var(--text);background:var(--surface-alt);padding:8px 14px;border-radius:var(--radius-sm);border:1px solid var(--border);min-width:110px;text-align:center;font-variant-numeric:tabular-nums}.time-adjust{display:flex;gap:6px;align-items:center;background:var(--surface-alt);padding:6px;border-radius:var(--radius-sm);border:1px solid var(--border)}.time-box{display:flex;flex-direction:column;align-items:center;padding:2px 6px;font-size:.9rem}.adjust-btn{padding:4px 8px;border-radius:6px;border:1px solid var(--border);background:var(--surface);cursor:pointer;transition:all .1s ease;font-family:inherit}.adjust-btn:hover{background:var(--accent-light);border-color:var(--accent)}.alarm-state{font-weight:700;color:var(--text-secondary);font-size:.85rem}.mode-controls{display:flex;gap:4px;align-items:center}.mid-buttons{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:16px;flex-wrap:wrap}.looper-frame{margin-top:12px;border:1px solid var(--border);background:var(--surface-alt);padding:12px;border-radius:var(--radius);display:flex;gap:10px;align-items:center;justify-content:center}.col-headers{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:8px;align-items:center}.col-header{display:flex;flex-direction:column;align-items:center;gap:6px}.col-header label{font-size:.82rem;color:var(--text-secondary);font-weight:700}.col-checkbox{transform:scale(1.05);accent-color:var(--accent)}.seq-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.seq-cell{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-sm);padding:8px;min-height:72px;display:flex;flex-direction:column;align-items:stretch;position:relative;overflow:hidden;transition:all .15s ease}.seq-cell .cell-title{display:flex;gap:8px;align-items:center;justify-content:space-between;font-size:.8rem;font-weight:700;color:var(--text-secondary);margin-bottom:6px}.seq-cell .selected-summary{font-size:.82rem;color:var(--text);min-height:32px;overflow:auto;padding:6px;background:var(--surface-alt);border-radius:6px;border:1px solid var(--border)}.seq-cell.col-active{box-shadow:0 4px 20px var(--accent-glow);border-color:var(--accent)}.seq-cell.drop-target{outline:3px dashed var(--accent)}.drag-ghost{position:fixed;pointer-events:none;z-index:99999;background:var(--surface);padding:8px 14px;border-radius:var(--radius);border:1px solid var(--border-strong);box-shadow:var(--shadow-lg);transform:translate(-50%,-50%);font-weight:800;color:var(--text)}.timer-display{font-weight:800;font-size:.95rem;color:var(--text-secondary);text-align:center;min-width:160px;font-variant-numeric:tabular-nums}small.note{display:block;text-align:center;margin-top:10px;color:var(--text-muted);font-size:.82rem}.hidden{display:none}.soundboard{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;width:100%;margin-top:16px}.pad{background:linear-gradient(145deg,#fff7f2,#ffe8db);border-radius:var(--radius);padding:10px;height:72px;display:flex;align-items:center;justify-content:center;text-align:center;cursor:pointer;color:var(--text);font-weight:700;font-size:.85rem;line-height:1.2;transition:all .12s ease;border:1px solid var(--border);touch-action:none;user-select:none;font-family:inherit;width:100%;appearance:none;-webkit-appearance:none}.pad::-moz-focus-inner{border:0;padding:0;margin:0}.pad:focus{outline:2px solid var(--accent);outline-offset:2px}.pad:active{transform:scale(.97)}.pad:hover{background:linear-gradient(145deg,#ffeee4,#ffd9c8);transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--accent)}.pad.playing{background:var(--pad-playing);color:#fff;border-color:var(--accent);box-shadow:0 4px 20px var(--accent-glow);transform:scale(.97)}.saver-floating{position:fixed;z-index:100000;display:flex;flex-direction:column;align-items:stretch;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-lg);border-radius:var(--radius);padding:8px;overflow:visible;right:18px;bottom:18px}.saver-floating .saver-handle{cursor:grab;padding:4px 8px;border-radius:var(--radius-sm);background:transparent;color:var(--text);font-weight:800;display:flex;align-items:center;justify-content:space-between;gap:8px;height:32px}#saverCloseBtn:hover{color:var(--danger)!important}.saver-floating .saver-body{padding:0;min-width:220px;display:flex;flex-direction:column;gap:6px;align-items:stretch;overflow:visible}.saver-floating .looper-frame{padding:6px;border-radius:var(--radius-sm);display:flex;flex-direction:column;gap:6px;align-items:stretch;box-shadow:none;border:none;background:transparent;margin-top:0}.saver-floating #recTimer{order:-1;text-align:center;font-weight:900;color:var(--accent);font-variant-numeric:tabular-nums}.seo-section{width:min(1100px,95%)}details.seo-details{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-md)}details.seo-details summary{padding:14px 20px;cursor:pointer;font-weight:700;font-size:.95rem;color:var(--text-secondary);list-style:none;display:flex;align-items:center;gap:10px;border-radius:var(--radius);user-select:none;transition:color .15s}details.seo-details summary::-webkit-details-marker{display:none}details.seo-details summary:before{content:"▶";font-size:.7rem;transition:transform .2s ease;flex-shrink:0;color:var(--text-muted)}details.seo-details[open] summary:before{transform:rotate(90deg)}details.seo-details[open] summary{border-bottom:1px solid var(--border);border-radius:var(--radius) var(--radius) 0 0;color:var(--text)}details.seo-details summary:hover{color:var(--text)}.seo-content{padding:20px;display:flex;flex-direction:column;gap:0}.seo-item{padding:16px 0;border-bottom:1px solid var(--border)}.seo-item:first-child{padding-top:0}.seo-item:last-child{padding-bottom:0}.seo-item h3{font-size:.9rem;font-weight:700;color:var(--text);margin-bottom:6px;line-height:1.4}.seo-item p{font-size:.87rem;color:var(--text-secondary);line-height:1.65;margin-bottom:8px}.seo-item a{font-size:.83rem;color:var(--accent);text-decoration:none}.seo-item a:hover{text-decoration:underline}.hidden-seo{display:none}input[type=range]{-webkit-appearance:none;appearance:none;height:6px;background:var(--border-strong);border-radius:3px;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid white;box-shadow:0 1px 4px #00000026}footer .footer-wrap{color:var(--text-muted);font-size:.82rem;background:transparent!important}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media (min-width:641px){.soundboard{grid-template-columns:repeat(10,1fr);gap:8px}.pad{height:68px;font-size:.8rem;padding:6px}.seq-grid{grid-template-columns:repeat(10,1fr)}.saver-floating{width:auto;min-width:260px;max-width:420px}}@media (max-width:640px){body{padding:12px 8px;gap:12px}h1{font-size:36px}.top-controls .top-row{flex-direction:column;align-items:stretch;gap:10px}.top-controls .top-row>*{width:100%;display:flex;justify-content:center;align-items:center}.soundboard{grid-template-columns:repeat(5,1fr)!important;gap:6px}.pad{height:58px;font-size:.72rem;padding:4px}.ctrl-btn,.ctrl-btn-red,.mode-btn{padding:6px 8px;font-size:.8rem}.looper-big-btn{font-size:.9rem;padding:10px 18px}.rec-btn{padding:6px 8px;font-size:.85rem}.seq-cell{min-height:56px;padding:6px}.saver-floating{width:calc(100% - 32px);left:16px;right:auto;bottom:12px;border-radius:var(--radius)}}