:root{font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,Yu Gothic,Meiryo,sans-serif;color:#f5f3ed;background:#121419;font-synthesis:none;text-rendering:optimizeLegibility;--surface: #1b1e24;--surface-raised: #242830;--line: #343943;--muted: #a1a7b2;--accent: #ff5a36;--radius: 14px}*{box-sizing:border-box}html{background:#121419;overscroll-behavior:none}body{margin:0;min-width:320px;min-height:100dvh;background:#121419}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible{outline:3px solid #ff8a70;outline-offset:3px}.app-shell{min-height:100dvh;padding:max(18px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) max(112px,calc(env(safe-area-inset-bottom) + 94px)) max(22px,env(safe-area-inset-left))}.topbar{max-width:1480px;margin:0 auto 22px;min-height:68px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px}.brand-block{display:flex;align-items:center;gap:13px}.brand-mark{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;color:#181a1f;background:var(--accent);box-shadow:inset 0 2px #ffffff47}.brand-mark svg{width:22px;height:22px}h1{font-size:19px;letter-spacing:.025em;margin:0;line-height:1.1}.brand-block p{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10px;color:var(--muted);letter-spacing:.15em;margin:5px 0 0}.status{justify-self:center;height:42px;display:flex;align-items:center;gap:10px;padding:0 16px;border:1px solid var(--line);background:#181b20;border-radius:12px;font-size:13px}.status>span:last-child{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--muted);font-size:11px;padding-left:9px;border-left:1px solid var(--line)}.status-light{width:8px;height:8px;border-radius:50%;background:#626975;box-shadow:inset 0 1px 1px #00000073}.status-light.is-live{background:#ff5a36;box-shadow:0 0 0 4px #ff5a3621}.top-actions{justify-self:end;display:flex;gap:8px}.utility-button,.icon-button{color:#e9e7e1;background:var(--surface);border:1px solid var(--line);border-radius:12px;cursor:pointer}.utility-button{min-width:78px;height:46px;padding:0 14px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:600}.utility-button svg{width:19px;height:19px}.utility-button.active{color:#17191e;background:#f2efe7;border-color:#f2efe7}.utility-button:active,.icon-button:active,.wide-button:active,.done-button:active{transform:translateY(1px)}.error-banner{max-width:1480px;margin:0 auto 16px;padding:12px 14px;display:flex;justify-content:space-between;align-items:center;gap:12px;background:#3a211e;border:1px solid #8c4133;border-radius:var(--radius);color:#ffd8ce;font-size:14px}.error-banner button{background:none;color:inherit;border:0;padding:4px;cursor:pointer}.deck{max-width:1480px;margin:0 auto}.pad-grid,.loading-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.pad,.add-pad,.loading-grid>div{min-height:clamp(128px,16vh,170px);border-radius:var(--radius)}.pad-grid-compact{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.pad-grid-compact .pad,.pad-grid-compact .add-pad{min-height:clamp(250px,48vh,390px)}.pad-grid-compact .pad-title{font-size:clamp(25px,2.6vw,38px)}.pad{position:relative;overflow:hidden;background:var(--pad-color);border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 2px #ffffff38,0 8px 22px #0506082e}.pad:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(145deg,rgba(255,255,255,.09),transparent 45%,rgba(0,0,0,.13))}.pad-coral{--pad-color: #cf4b31;--pad-ink: #fff8f3}.pad-amber{--pad-color: #b86d17;--pad-ink: #fff9ed}.pad-lime{--pad-color: #5c7e2a;--pad-ink: #f7ffe9}.pad-cyan{--pad-color: #247b85;--pad-ink: #edfdff}.pad-blue{--pad-color: #3763a8;--pad-ink: #f2f6ff}.pad-violet{--pad-color: #725198;--pad-ink: #fbf4ff}.pad-pink{--pad-color: #a7466d;--pad-ink: #fff2f7}.pad-silver{--pad-color: #59616d;--pad-ink: #f7f8fa}.pad-trigger{position:relative;z-index:1;width:100%;height:100%;min-height:inherit;padding:18px;display:flex;flex-direction:column;align-items:flex-start;text-align:left;color:var(--pad-ink);background:transparent;border:0;cursor:pointer;touch-action:manipulation}.pad-trigger:active{transform:scale(.985);filter:brightness(.9)}.pad-number{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;opacity:.72}.pad-title{margin:auto 0;max-width:100%;display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:clamp(19px,2vw,29px);line-height:1.25;font-weight:800;letter-spacing:-.025em;overflow-wrap:anywhere}.pad-state{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;letter-spacing:.09em;display:flex;align-items:center;gap:7px;opacity:.85}.pad-state svg{width:12px;height:12px}.pad.is-playing{box-shadow:inset 0 0 0 4px #f7f4ec,inset 0 2px #ffffff4d,0 10px 30px #05060859}.pad-stop{position:absolute;z-index:3;right:13px;bottom:13px;width:48px;height:48px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.45);border-radius:12px;background:#14161abf;color:#fff;cursor:pointer}.pad-stop svg{width:18px;height:18px}.level-bars{height:13px;display:flex;align-items:end;gap:2px}.level-bars i{width:3px;background:currentColor;border-radius:2px;animation:level .45s ease-in-out infinite alternate}.level-bars i:nth-child(1){height:55%}.level-bars i:nth-child(2){height:100%;animation-delay:-.25s}.level-bars i:nth-child(3){height:72%;animation-delay:-.1s}@keyframes level{to{height:25%}}.pad.is-editing{background:var(--surface);border-color:var(--line)}.pad-editor{position:relative;z-index:1;min-height:inherit;padding:13px;display:flex;flex-direction:column;gap:9px}.reorder-row{display:grid;grid-template-columns:38px 1fr 38px;align-items:center;gap:7px}.reorder-row span{text-align:center;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--muted);font-size:12px}.reorder-row button{height:32px;border:1px solid var(--line);border-radius:9px;color:#f2efe7;background:#2d323b;cursor:pointer}.reorder-row button:disabled{opacity:.3}.pad-editor label{display:grid;gap:5px}.pad-editor label span{font-size:11px;color:var(--muted)}.pad-editor input{width:100%;height:39px;padding:0 10px;color:#f4f1ea;background:#14171b;border:1px solid #464c57;border-radius:9px}.color-row{display:flex;gap:6px;justify-content:center}.color-chip{width:21px;height:21px;padding:0;border:2px solid transparent;border-radius:50%;background:var(--pad-color);cursor:pointer}.color-chip.selected{border-color:#f5f3ed;box-shadow:0 0 0 2px #1b1e24}.delete-button{margin-top:auto;height:32px;display:flex;justify-content:center;align-items:center;gap:6px;color:#ff927c;background:transparent;border:0;cursor:pointer;font-size:12px}.template-info{justify-content:center;align-items:center;text-align:center}.template-info strong{font-size:20px}.template-info>span:last-child{color:var(--muted);font-size:11px}.template-label{padding:5px 8px;border:1px solid #59616d;border-radius:8px;color:#d8dbe0;font-size:10px}.add-pad{border:2px dashed #424853;color:var(--muted);background:#181b20;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;cursor:pointer}.add-pad svg{width:30px;height:30px}.empty-state{width:100%;min-height:52vh;border:2px dashed #3d434e;border-radius:var(--radius);color:#f1eee7;background:#171a1f;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;cursor:pointer}.empty-state strong{font-size:23px}.empty-state>span:last-child{font-size:13px;color:var(--muted)}.empty-icon{width:70px;height:70px;display:grid;place-items:center;border-radius:var(--radius);color:#17191d;background:var(--accent)}.empty-icon svg{width:32px;height:32px}.loading-grid>div{background:linear-gradient(100deg,#1a1d22 20%,#252931,#1a1d22 60%);background-size:200% 100%;animation:shimmer 1.2s linear infinite}@keyframes shimmer{to{background-position-x:-200%}}.control-strip{position:fixed;z-index:10;left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));max-width:1440px;margin:0 auto;min-height:72px;padding:10px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;border:1px solid #3a404b;border-radius:var(--radius);background:#1c1f25f5;box-shadow:0 18px 55px #00000073,inset 0 1px #ffffff0f;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.stop-all{justify-self:start;height:52px;min-width:168px;padding:0 18px;display:flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:11px;color:#fff5f1;background:#b93925;font-weight:800;font-size:15px;cursor:pointer;box-shadow:inset 0 2px #ffffff29}.stop-all:disabled{color:#7d838d;background:#30343c;box-shadow:none;cursor:default}.mode-switch{justify-self:center;padding:4px;display:flex;background:#111317;border:1px solid #353a44;border-radius:11px}.mode-switch button{min-width:108px;height:40px;padding:0 13px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:12px;font-weight:700;cursor:pointer}.mode-switch button.selected{color:#181a1f;background:#ebe8e0;box-shadow:0 2px 8px #00000040}.volume-control{justify-self:end;display:flex;align-items:center;gap:11px}.icon-button{width:42px;height:42px;display:grid;place-items:center;cursor:pointer}.icon-button svg{width:21px;height:21px}.volume-control input{width:clamp(100px,13vw,190px);accent-color:var(--accent)}.volume-control output{width:40px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;color:var(--muted)}.modal-backdrop{position:fixed;z-index:30;inset:0;padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));display:grid;place-items:center;background:#07080ab8;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.settings-panel{width:min(520px,100%);max-height:92dvh;overflow-y:auto;padding:22px;border:1px solid #414752;border-radius:var(--radius);background:#1c1f25;box-shadow:0 28px 80px #00000080}.settings-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.settings-header h2{margin:0;font-size:25px}.settings-header p{margin:5px 0 0;color:var(--muted);font-size:12px}.setting-block{padding:18px 0;border-top:1px solid var(--line)}.setting-block h3{margin:0 0 12px;font-size:14px}.setting-block p{color:var(--muted);margin:10px 0 0;font-size:12px;line-height:1.6}.wide-button,.done-button{width:100%;min-height:48px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:11px;border:1px solid #4b515d;background:#f0ede5;color:#16181c;font-weight:700;cursor:pointer}.wide-button.secondary{background:#2b3038;color:#f1eee7}.storage-note{color:#ffd2c8}.storage-note p{color:#dcb5ad}.done-button{margin-top:8px;border-color:var(--accent);background:var(--accent);color:#17191e}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:900px){.app-shell{padding-left:14px;padding-right:14px}.topbar{grid-template-columns:1fr auto}.status{grid-column:1 / -1;grid-row:2;width:100%;justify-content:center}.pad-grid,.loading-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.pad-grid-compact{grid-template-columns:repeat(2,minmax(0,1fr))}.pad-grid-compact .pad,.pad-grid-compact .add-pad{min-height:220px}.control-strip{grid-template-columns:auto 1fr}.mode-switch{justify-self:end}.volume-control{display:none}}@media(min-width:901px)and (max-width:1100px){.pad-grid,.loading-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:640px){.brand-block p,.utility-button span{display:none}.utility-button{min-width:46px;padding:0}.pad-grid,.loading-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.pad,.add-pad,.loading-grid>div{min-height:145px}.control-strip{left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));gap:8px}.stop-all{min-width:0;padding:0 14px}.stop-all span{display:none}.mode-switch{width:100%}.mode-switch button{min-width:0;flex:1;padding:0 8px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}@media(prefers-reduced-transparency:reduce){.control-strip,.modal-backdrop{backdrop-filter:none;-webkit-backdrop-filter:none}.control-strip{background:#1c1f25}}