@font-face{font-family:Barlow;font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/barlow-800.ttf) format("truetype")}@font-face{font-family:Barlow Condensed;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/barlow-condensed-600.ttf) format("truetype")}@font-face{font-family:Barlow Condensed;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/barlow-condensed-700.ttf) format("truetype")}:root{font-family:Barlow Condensed,sans-serif;color:#e0eaf6;background:#102a50;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--rubber-top: #d9534d;--rubber-face: #c13a36;--rubber-bottom: #a7292c;--pad-radius: 14px;--press-duration: 65ms;--material-texture: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23ffffff' filter='url(%23n)' opacity='.5' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}*{box-sizing:border-box}body{margin:0}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;font:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible{outline:3px solid #f9d28a;outline-offset:4px}::selection{background:#f9d28a;color:#142f55}.soundboard{position:relative;min-height:100svh;padding:calc(22px + env(safe-area-inset-top,0px)) calc(17px + env(safe-area-inset-right,0px)) calc(30px + env(safe-area-inset-bottom,0px)) calc(17px + env(safe-area-inset-left,0px));border:3px solid #122f57;border-radius:18px;background:radial-gradient(ellipse at 20% 0%,#5076ac38,transparent 60%),linear-gradient(115deg,#28578e,#224c80 45%,#193e70);box-shadow:inset 0 2px 3px #8baacd70,inset 3px 0 5px #7190b930,inset -5px -8px 10px #081e4390,inset 0 0 0 7px #16345c50,inset 0 -12px 5px #0c264b60;isolation:isolate}.soundboard:before{content:"";position:absolute;top:10px;right:10px;bottom:10px;left:10px;z-index:-1;border-radius:13px;pointer-events:none;opacity:.09;background-image:var(--material-texture)}.board-header{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px}.identity h1{margin:0;font-family:Barlow,sans-serif;font-size:34px;font-weight:800;line-height:1;letter-spacing:-.03em;color:#e0eaf6;text-shadow:0 2px 2px #0c2b51}.brand-dot{color:#ec7467}.control-label{font-weight:600;letter-spacing:.1em;font-size:11px;color:#c1d5eb}.edit-control{display:flex;gap:10px;align-items:center}.edit-switch{width:64px;height:44px;border:1px solid #14345d;border-radius:8px;padding:3px;background:linear-gradient(#2d5685,#204574);color:#e0eaf6;font-size:18px;font-weight:700;box-shadow:inset 0 1px 2px #90abc14d,0 3px 5px #081e4370;cursor:pointer}.edit-switch:active,.edit-switch[aria-pressed=true]{background:#16365e;box-shadow:inset 0 2px 4px #051a36,0 1px 1px #5476a16b}.edit-switch[aria-pressed=true]{color:#f9d28a}.board-workspace{margin:29px 0 0}.pad-field{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:12px;row-gap:24px}.sound-pad{position:relative;width:100%;min-width:0;aspect-ratio:1;padding:0;border:0;border-radius:var(--pad-radius);background:linear-gradient(90deg,#742123,#9c2d2c 25%,#922829 80%,#6a1c22);box-shadow:0 8px 5px #081b3799,0 15px 18px #081c3970,0 3px 3px #0a2449;cursor:pointer;transition:box-shadow var(--press-duration) ease-out}.pad-surface{display:flex;align-items:center;justify-content:center;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:radial-gradient(ellipse at 30% 0%,#f48a7540,transparent 70%),linear-gradient(155deg,var(--rubber-top),var(--rubber-face) 48%,var(--rubber-bottom));box-shadow:inset 0 2px 2px #ffaca480,inset 2px 0 3px #f67c6c50,inset -2px -3px 5px #701b264d,0 7px 1px #872629;transform:translateY(-7px);transition:transform var(--press-duration) cubic-bezier(.2,.8,.3,1),box-shadow var(--press-duration) ease-out}.pad-surface:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none;background-image:var(--material-texture);opacity:.055}.pad-label{position:relative;max-width:100%;padding:0 7px;overflow-wrap:anywhere;line-height:1.12;text-align:center;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;color:#fff4e9;font-size:clamp(14px,3.8vw,20px);font-weight:700;letter-spacing:.015em;text-shadow:0 1px 2px #731d24}@media(hover:hover){.sound-pad:not(:disabled):hover .pad-surface{filter:brightness(1.035)}.edit-switch:hover,.sheet-button:not(:disabled):hover{filter:brightness(1.06)}}.sound-pad:not(:disabled):active{box-shadow:0 3px 3px #081b3799,0 5px 9px #081c3960}.sound-pad:not(:disabled):active .pad-surface{transform:translateY(-1px) scale(.985);box-shadow:inset 0 2px 2px #ffaca460,inset 2px 0 3px #f67c6c40,inset -2px -3px 5px #701b2660,0 1px 1px #872629}.add-sound{min-width:0}.add-sound-button{background:linear-gradient(90deg,#112e54,#1b3e69 40%,#122e52)}.add-sound-button .pad-surface{flex-direction:column;gap:5px;color:#c1d5eb;background:linear-gradient(150deg,#3d6593,#2a507e 48%,#214370);box-shadow:inset 0 2px 2px #9cb9d04d,inset -2px -3px 5px #102b4e60,0 7px 1px #16375f}.add-sound-button .control-label{position:relative;font-size:clamp(10px,2.65vw,12px);letter-spacing:.04em}.add-sound-button:not(:disabled):active .pad-surface{box-shadow:inset 0 2px 2px #9cb9d030,inset -2px -3px 5px #102b4e60,0 1px 1px #16375f}.add-sound-button:disabled{cursor:wait;opacity:.65}.empty-state{margin:23px 0 0;font-size:16px;color:#c1d5eb}.import-status{margin:22px 0 0;font-size:16px;line-height:1.4;color:#d9e6f5;overflow-wrap:anywhere}.import-status:empty{margin:0}.enclosure-screw{position:absolute;width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#6482a4,#28476e);box-shadow:0 1px 2px #061b39,inset 0 1px 1px #9fb4cb66}.enclosure-screw:after{content:"";position:absolute;width:5px;height:1px;background:#163456;top:3px;left:1.5px;transform:rotate(-35deg)}.screw-top-left{top:10px;left:11px}.screw-top-right{top:10px;right:11px}.screw-bottom-left{bottom:10px;left:11px}.screw-bottom-right{bottom:10px;right:11px}.pad-edit-mark{position:absolute;width:16px;height:16px;top:7px;right:7px;fill:none;stroke:#fff4e9;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.editable-pad .pad-surface{outline:1px solid #f9d28a99;outline-offset:-3px}.editable-pad .pad-label{padding-top:14px}.edit-sheet{position:fixed;inset:auto 0 var(--sheet-bottom, 0px);margin:0 auto;width:min(100%,460px);max-height:calc(var(--sheet-height, 100dvh) - 20px);overflow-y:auto;overscroll-behavior:contain;padding:22px max(22px,env(safe-area-inset-right,0px)) calc(18px + env(safe-area-inset-bottom,0px)) max(22px,env(safe-area-inset-left,0px));border:2px solid #496b96;border-radius:18px 18px 0 0;color:#e0eaf6;background:linear-gradient(120deg,#28578e,#193e70);box-shadow:inset 0 2px 3px #7190b970,inset 0 -5px 8px #081e4360,0 -8px 28px #081e43a6}.edit-sheet::backdrop{background:#06162bb3}.sheet-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.sheet-header h2{margin:0;font-size:28px}.sheet-sound-name{margin:14px 0 22px;font-size:20px;line-height:1.25;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}.edit-sheet label{display:block;margin-bottom:8px;font-size:18px}.edit-sheet input:not([hidden]){width:100%;min-height:48px;padding:10px 12px;border:1px solid #7190b9;border-radius:8px;color:#e0eaf6;background:#102e53;box-shadow:inset 0 2px 4px #051a36;font:inherit;font-size:18px;caret-color:#f9d28a}.edit-sheet input:focus-visible{outline:3px solid #f9d28a;outline-offset:2px}.sheet-button{min-height:48px;padding:10px 16px;border:1px solid #143058;border-radius:8px;color:#e0eaf6;background:linear-gradient(#355b89,#234674);box-shadow:inset 0 1px 2px #7f9cb448,0 3px 1px #102f58,0 5px 8px #0a224664;font-size:18px;font-weight:700;cursor:pointer;transition:transform var(--press-duration) ease-out}.sheet-button:not(:disabled):active{transform:translateY(2px)}.sheet-button:disabled{opacity:.65;cursor:wait}.sheet-button.danger{color:#ffe4df;background:linear-gradient(#87372f,#662822)}.rename-button{width:100%;margin-top:12px}.sheet-actions{display:flex;gap:12px;margin-top:22px}.sheet-actions>button{flex:1;min-width:0}.sheet-description{font-size:18px;line-height:1.4}.sheet-status{margin:18px 0 0;font-size:16px;line-height:1.4;overflow-wrap:anywhere}.sheet-status:empty{margin:0}@media(max-height:540px){.edit-sheet{padding-top:12px}.sheet-sound-name{margin:8px 0 12px;-webkit-line-clamp:2}.sheet-actions{margin-top:14px}}@media(min-width:700px){.soundboard{max-width:560px;margin:0 auto}}@media(display-mode:standalone){:root{background:#183d72}.soundboard{min-height:100dvh}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important}}.cloud-controls{display:flex;gap:16px;margin-top:12px}.quiet-button{min-height:44px;padding:8px 4px;border:0;background:transparent;color:#c1d5eb;font-size:16px;cursor:pointer}.quiet-button:disabled,.edit-switch:disabled{opacity:.6;cursor:wait}.sound-pad:disabled:not(.add-sound-button){opacity:.5;cursor:default}.unlock-form{width:min(100%,340px);margin:clamp(36px,12svh,100px) auto 24px}.unlock-form h2{margin:0 0 28px;font-size:28px;font-weight:600}.unlock-form label{display:block;margin-bottom:8px;font-size:18px}.unlock-form input{display:block;width:100%;min-height:50px;padding:12px;border:1px solid #7190b9;border-radius:8px;color:#e0eaf6;background:#102e53;box-shadow:inset 0 2px 4px #051a36;font:inherit;font-size:18px;caret-color:#f9d28a}.unlock-form input:focus-visible{outline:3px solid #f9d28a;outline-offset:2px}.unlock-button{width:100%;margin-top:18px;background:linear-gradient(#cf4d44,#a72e2c);border-color:#752527;box-shadow:inset 0 1px 2px #ffa69d66,0 3px 1px #772325,0 5px 8px #0a224664}@media(max-height:540px){.unlock-form{margin-top:24px}.unlock-form h2{margin-bottom:18px}}