@font-face{font-family:Fredoka Variable;font-style:normal;font-display:swap;font-weight:300 700;src:url(/assets/fredoka-hebrew-wght-normal-DdnsCkLr.woff2) format("woff2-variations");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}@font-face{font-family:Fredoka Variable;font-style:normal;font-display:swap;font-weight:300 700;src:url(/assets/fredoka-latin-ext-wght-normal-CYrqKuxd.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Fredoka Variable;font-style:normal;font-display:swap;font-weight:300 700;src:url(/assets/fredoka-latin-wght-normal-DM6njrJ3.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:DM Sans Variable;font-style:normal;font-display:swap;font-weight:100 1000;src:url(/assets/dm-sans-latin-ext-wght-normal-BOFOeGcA.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:DM Sans Variable;font-style:normal;font-display:swap;font-weight:100 1000;src:url(/assets/dm-sans-latin-wght-normal-Xz1IZZA0.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--ink: #1e1b2e;--ink-2: #4a4560;--ink-3: #8a84a3;--paper: #fff4e0;--paper-2: #ffe9c4;--card: #ffffff;--line: 3px solid var(--ink);--radius: 22px;--radius-sm: 14px;--shadow: 0 6px 0 var(--ink);--shadow-sm: 0 4px 0 var(--ink);--font-display: "Fredoka Variable", "Fredoka", ui-rounded, system-ui, sans-serif;--font-body: "DM Sans Variable", "DM Sans", system-ui, -apple-system, sans-serif;--tile: 150px;--pink: #ff7eb6;--red: #ff6b6b;--orange: #ff9f43;--yellow: #ffd23f;--lime: #b8e986;--mint: #6ee7b7;--teal: #4fd1c5;--sky: #7dd3fc;--blue: #8fa8ff;--purple: #c3a1ff;--accent: #ff5c9e;color-scheme:light}.c-pink{--c: var(--pink)}.c-red{--c: var(--red)}.c-orange{--c: var(--orange)}.c-yellow{--c: var(--yellow)}.c-lime{--c: var(--lime)}.c-mint{--c: var(--mint)}.c-teal{--c: var(--teal)}.c-sky{--c: var(--sky)}.c-blue{--c: var(--blue)}.c-purple{--c: var(--purple)}*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{margin:0;min-height:100dvh;font-family:var(--font-body);font-size:16px;line-height:1.5;color:var(--ink);background-color:var(--paper);background-image:radial-gradient(rgba(30,27,46,.09) 1.5px,transparent 1.5px);background-size:22px 22px}h1,h2,h3,h4{font-family:var(--font-display);line-height:1.1;margin:0;font-weight:650;letter-spacing:-.01em}a{color:inherit}img{max-width:100%;display:block}button{font:inherit;color:inherit}:focus-visible{outline:3px solid var(--accent);outline-offset:3px}::selection{background:var(--yellow)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.container{width:100%;max-width:1200px;margin:0 auto;padding-inline:clamp(16px,4vw,32px)}.page{padding-block:28px 120px}.topbar{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);border-bottom:var(--line)}.topbar-inner{display:flex;align-items:center;gap:12px;height:68px}.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--font-display);font-weight:700;font-size:1.45rem;letter-spacing:-.02em}.logo-mark{display:grid;place-items:center;width:40px;height:40px;border:var(--line);border-radius:12px;background:var(--accent);box-shadow:0 3px 0 var(--ink);font-size:1.2rem;transition:transform .2s cubic-bezier(.3,1.8,.5,1)}.logo:hover .logo-mark{transform:rotate(-10deg) scale(1.08)}.topbar-spacer{flex:1}.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.stack{display:flex;flex-direction:column;gap:16px}.muted{color:var(--ink-2)}.faint{color:var(--ink-3)}.btn{--c: var(--card);display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border:var(--line);border-radius:999px;background:var(--c);box-shadow:var(--shadow-sm);font-family:var(--font-display);font-weight:600;font-size:1.02rem;text-decoration:none;cursor:pointer;user-select:none;white-space:nowrap;transition:transform .08s ease,box-shadow .08s ease,background-color .15s}.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--ink)}.btn:active,.btn[aria-pressed=true]{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:var(--shadow-sm)}.btn-primary{--c: var(--accent);color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.25)}.btn-yellow{--c: var(--yellow)}.btn-mint{--c: var(--mint)}.btn-sky{--c: var(--sky)}.btn-danger{--c: var(--red);color:#fff}.btn-ghost{--c: transparent;box-shadow:none;border-color:transparent}.btn-ghost:hover{--c: rgba(30, 27, 46, .07);box-shadow:none;transform:none}.btn-ghost:active{box-shadow:none;transform:scale(.97)}.btn-sm{min-height:38px;padding:0 14px;font-size:.93rem}.btn-lg{min-height:58px;padding:0 30px;font-size:1.2rem}.btn-icon{width:46px;padding:0}.btn-icon.btn-sm{width:38px}.btn-block{width:100%}.btn[aria-pressed=true]{--c: var(--yellow)}.card{background:var(--card);border:var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(18px,3vw,28px)}.field{display:flex;flex-direction:column;gap:6px}.label{font-family:var(--font-display);font-weight:600;font-size:.98rem}.hint{font-size:.85rem;color:var(--ink-2)}.input,.textarea,.select{width:100%;min-height:48px;padding:10px 14px;border:var(--line);border-radius:var(--radius-sm);background:#fff;font:inherit;color:var(--ink);transition:box-shadow .12s}.input:focus,.textarea:focus,.select:focus{outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 35%,transparent)}.textarea{resize:vertical;min-height:90px}.error-text{color:#c2185b;font-weight:600;font-size:.92rem}.form-error{padding:10px 14px;border:var(--line);border-radius:var(--radius-sm);background:#ffe1ea;font-weight:600}.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border:2px solid var(--ink);border-radius:999px;background:#fff;font-size:.8rem;font-weight:700;line-height:1.6;white-space:nowrap}.badge-public{background:var(--mint)}.badge-private{background:var(--paper-2)}.segmented{display:inline-flex;padding:4px;gap:4px;border:var(--line);border-radius:999px;background:#fff}.segmented button{border:0;background:transparent;padding:8px 16px;border-radius:999px;font-family:var(--font-display);font-weight:600;cursor:pointer;transition:background .15s}.segmented button[aria-pressed=true]{background:var(--ink);color:#fff}.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-weight:600;user-select:none}.switch input{appearance:none;width:50px;height:30px;border:var(--line);border-radius:999px;background:#e8e2d4;position:relative;cursor:pointer;transition:background .15s;flex-shrink:0;margin:0}.switch input:after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--ink);transition:transform .2s cubic-bezier(.3,1.6,.5,1)}.switch input:checked{background:var(--mint)}.switch input:checked:after{transform:translate(20px)}.swatches{display:flex;flex-wrap:wrap;gap:8px}.swatch{width:36px;height:36px;border-radius:50%;border:var(--line);background:var(--c);cursor:pointer;transition:transform .12s}.swatch:hover{transform:scale(1.1)}.swatch[aria-pressed=true]{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--ink)}.emoji-btn{width:58px;height:58px;font-size:1.8rem;border:var(--line);border-radius:var(--radius-sm);background:#fff;cursor:pointer;box-shadow:0 3px 0 var(--ink);flex-shrink:0}.emoji-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:4px;padding:10px;border:var(--line);border-radius:var(--radius-sm);background:#fff}.emoji-grid button{border:0;background:transparent;font-size:1.5rem;height:42px;border-radius:10px;cursor:pointer}.emoji-grid button:hover,.emoji-grid button[aria-pressed=true]{background:var(--paper-2)}.image-drop{position:relative;display:grid;place-items:center;aspect-ratio:16 / 9;border:3px dashed var(--ink);border-radius:var(--radius-sm);background:var(--paper);overflow:hidden;cursor:pointer;text-align:center;color:var(--ink-2);font-weight:600}.image-drop.square{aspect-ratio:1;max-width:180px}.image-drop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.image-drop.dragging{background:var(--yellow)}.modal-backdrop{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px;background:#1e1b2e73;backdrop-filter:blur(3px);animation:fade-in .15s ease;overflow-y:auto}.modal{width:100%;max-width:540px;margin:auto;animation:pop-in .28s cubic-bezier(.3,1.5,.5,1)}.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.modal-foot{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:22px}.toast-stack{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));transform:translate(-50%);z-index:200;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;width:max-content;max-width:calc(100vw - 32px)}.toast{padding:10px 18px;border:var(--line);border-radius:999px;background:var(--ink);color:#fff;font-weight:600;box-shadow:0 4px #00000040;animation:toast-in .3s cubic-bezier(.3,1.5,.5,1)}.toast.error{background:var(--red)}@keyframes fade-in{0%{opacity:0}}@keyframes pop-in{0%{opacity:0;transform:scale(.9) translateY(10px)}}@keyframes toast-in{0%{opacity:0;transform:translateY(20px) scale(.9)}}.spinner{width:22px;height:22px;border:3px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}@keyframes spin{to{transform:rotate(360deg)}}.center-screen{display:grid;place-items:center;min-height:60vh;text-align:center}.hero{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:48px;padding-block:clamp(32px,7vw,90px)}.hero h1{font-size:clamp(2.6rem,6.5vw,4.8rem);font-weight:700;letter-spacing:-.03em}.hl{display:inline-block;padding:0 .18em;background:var(--yellow);border:var(--line);border-radius:16px;transform:rotate(-2deg);box-shadow:var(--shadow-sm)}.hero p.lead{font-size:1.2rem;color:var(--ink-2);max-width:34ch;margin:22px 0 30px}.hero-pads{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;--tile: 1fr}.hero-pads .pad:nth-child(odd){transform:rotate(-2deg)}.hero-pads .pad:nth-child(3n){transform:rotate(2.5deg)}.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;padding-bottom:60px}.feature{padding:24px}.feature .icon{display:grid;place-items:center;width:56px;height:56px;margin-bottom:14px;border:var(--line);border-radius:16px;background:var(--c);font-size:1.7rem;box-shadow:0 3px 0 var(--ink)}.feature h3{font-size:1.3rem;margin-bottom:6px}.feature p{margin:0;color:var(--ink-2)}@media(max-width:820px){.hero{grid-template-columns:1fr}}.auth-wrap{display:grid;place-items:center;padding-block:clamp(24px,8vh,80px)}.auth-card{width:100%;max-width:440px}.auth-card h1{font-size:2.1rem;margin-bottom:4px}.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:28px}.page-head h1{font-size:clamp(2rem,4vw,2.8rem)}.board-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:24px}.board-card{display:flex;flex-direction:column;border:var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);overflow:hidden;text-decoration:none;transition:transform .15s cubic-bezier(.3,1.6,.5,1),box-shadow .15s}.board-card:hover{transform:translateY(-4px) rotate(-.6deg);box-shadow:0 10px 0 var(--ink)}.board-cover{position:relative;aspect-ratio:16 / 10;display:grid;place-items:center;background:var(--c);border-bottom:var(--line);font-size:4rem;overflow:hidden}.board-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.board-cover .badge{position:absolute;top:10px;right:10px}.board-card-body{padding:14px 18px 18px}.board-card-body h3{font-size:1.3rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.new-board-card{display:grid;place-items:center;gap:8px;min-height:250px;border:3px dashed var(--ink);border-radius:var(--radius);background:#ffffff80;font-family:var(--font-display);font-size:1.2rem;font-weight:600;cursor:pointer;transition:background .15s,transform .15s}.new-board-card:hover{background:var(--yellow);transform:rotate(.8deg)}.new-board-card .plus{display:grid;place-items:center;width:64px;height:64px;border:var(--line);border-radius:50%;background:#fff;font-size:2rem;box-shadow:var(--shadow-sm)}.empty{text-align:center;padding:48px 20px}.empty .big-emoji{font-size:4rem;display:inline-block;animation:wobble 2.4s ease-in-out infinite}@keyframes wobble{0%,to{transform:rotate(-8deg)}50%{transform:rotate(8deg) scale(1.05)}}.board-hero{display:flex;gap:22px;align-items:center;margin-bottom:22px}.board-avatar{position:relative;flex-shrink:0;display:grid;place-items:center;width:clamp(84px,14vw,120px);aspect-ratio:1;border:var(--line);border-radius:26px;background:var(--c);box-shadow:var(--shadow);font-size:clamp(2.4rem,6vw,3.6rem);overflow:hidden;transform:rotate(-3deg)}.board-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.board-hero h1{font-size:clamp(1.9rem,5vw,3rem);word-break:break-word}.board-hero .desc{margin:6px 0 8px;color:var(--ink-2);max-width:70ch;white-space:pre-line}.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:22px}.toolbar .search{flex:1 1 200px;max-width:320px;min-height:46px;border-radius:999px;padding-left:42px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%231e1b2e' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='9' cy='9' r='6'/%3E%3Cpath d='m14 14 4 4'/%3E%3C/svg%3E") no-repeat 14px center}.mode-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;margin-bottom:20px;border:var(--line);border-radius:var(--radius-sm);background:var(--yellow);box-shadow:var(--shadow-sm);font-weight:600}.mode-banner .grow{flex:1;min-width:200px}.sound-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--tile),1fr));gap:clamp(12px,2vw,20px)}.size-s{--tile: 112px}.size-m{--tile: 150px}.size-l{--tile: 200px}.pad{position:relative;display:flex;flex-direction:column;aspect-ratio:1;width:100%;padding:0;border:var(--line);border-radius:var(--radius);background:var(--c, var(--pink));box-shadow:var(--shadow);cursor:pointer;overflow:hidden;text-align:left;touch-action:manipulation;user-select:none;-webkit-user-select:none;transition:transform .07s ease,box-shadow .07s ease}.pad:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--ink)}.pad:active,.pad.pressed{transform:translateY(5px);box-shadow:0 1px 0 var(--ink);transition-duration:.02s}.pad-art{position:relative;flex:1;min-height:0;display:grid;place-items:center;font-size:calc(var(--tile-px, 150px) * .3);font-size:clamp(2rem,5vw,3.2rem);line-height:1}.size-s .pad-art{font-size:2rem}.size-l .pad-art{font-size:4rem}.pad-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}.pad-art .pad-emoji-overlay{position:absolute;left:8px;bottom:6px;font-size:1.5rem;filter:drop-shadow(0 2px 0 rgba(0,0,0,.3))}.pad-art .pad-emoji{transition:transform .2s cubic-bezier(.3,1.8,.5,1)}.pad:hover .pad-emoji{transform:scale(1.12) rotate(-6deg)}.pad-name{position:relative;padding:8px 10px 10px;border-top:var(--line);background:#fff;font-family:var(--font-display);font-weight:600;font-size:.98rem;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}.size-s .pad-name{font-size:.82rem;padding:5px 7px 6px}.size-l .pad-name{font-size:1.1rem}.pad-progress{position:absolute;left:0;right:0;bottom:0;height:100%;background:color-mix(in srgb,var(--c) 45%,transparent);transform-origin:left;transform:scaleX(0);pointer-events:none}.pad.playing .pad-progress{animation:progress linear forwards;animation-duration:var(--dur, 1s)}@keyframes progress{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.pad.playing{animation:pad-bump .35s cubic-bezier(.3,1.8,.5,1)}.pad.playing .pad-emoji{animation:dance .5s ease-in-out infinite alternate}@keyframes pad-bump{0%{scale:.94}60%{scale:1.04}to{scale:1}}@keyframes dance{0%{transform:rotate(-10deg) scale(1.05)}to{transform:rotate(10deg) scale(1.15)}}.pad .eq{position:absolute;top:8px;right:8px;display:none;gap:2px;align-items:flex-end;height:18px;padding:3px 5px;border:2px solid var(--ink);border-radius:8px;background:#fff}.pad.playing .eq{display:flex}.eq i{width:3px;background:var(--ink);border-radius:2px;animation:eq .5s ease-in-out infinite alternate}.eq i:nth-child(2){animation-delay:-.2s}.eq i:nth-child(3){animation-delay:-.35s}@keyframes eq{0%{height:3px}to{height:12px}}.keycap{position:absolute;top:8px;left:8px;z-index:2;min-width:28px;height:28px;padding:0 6px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:8px;background:#fff;box-shadow:0 2px 0 var(--ink);font-family:var(--font-display);font-weight:700;font-size:.9rem;line-height:1}.size-s .keycap{min-width:22px;height:22px;font-size:.75rem;top:5px;left:5px}.pad-dur{position:absolute;top:8px;right:8px;z-index:2;padding:1px 7px;border-radius:999px;background:#1e1b2ebf;color:#fff;font-size:.72rem;font-weight:700}.pad.playing .pad-dur,.size-s .pad-dur{display:none}.mapping .pad{animation:none}.mapping .pad.selected{outline:4px dashed var(--ink);outline-offset:4px;animation:jiggle .25s ease-in-out infinite alternate}.mapping .pad .keycap.empty{background:var(--paper-2);color:var(--ink-3)}@keyframes jiggle{0%{rotate:-1.5deg}to{rotate:1.5deg}}.editing .pad{cursor:grab}.editing .pad:active{cursor:grabbing}.pad-edit-badge{position:absolute;inset:auto 8px 8px auto;z-index:3;display:grid;place-items:center;width:32px;height:32px;border:2px solid var(--ink);border-radius:50%;background:var(--yellow);box-shadow:0 2px 0 var(--ink);font-size:.95rem}.sortable-dragging{z-index:10;opacity:.9;rotate:3deg}.add-pad{display:grid;place-items:center;align-content:center;gap:6px;aspect-ratio:1;border:3px dashed var(--ink);border-radius:var(--radius);background:#ffffff8c;font-family:var(--font-display);font-weight:600;text-decoration:none;cursor:pointer;transition:background .15s,transform .15s}.add-pad:hover{background:var(--yellow);transform:rotate(-1deg)}.add-pad .plus{font-size:2.2rem;line-height:1}.player-bar{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translate(-50%);z-index:50;display:flex;align-items:center;gap:10px;padding:8px 10px 8px 16px;border:var(--line);border-radius:999px;background:var(--card);box-shadow:var(--shadow);max-width:calc(100vw - 24px)}.player-bar .vol{display:flex;align-items:center;gap:8px}.player-bar .divider{width:2px;align-self:stretch;background:#1e1b2e26}input[type=range]{-webkit-appearance:none;appearance:none;width:110px;height:10px;border:2px solid var(--ink);border-radius:999px;background:linear-gradient(to right,var(--accent) var(--fill, 50%),#fff var(--fill, 50%));cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border:3px solid var(--ink);border-radius:50%;background:var(--yellow);box-shadow:0 2px 0 var(--ink)}input[type=range]::-moz-range-thumb{width:16px;height:16px;border:3px solid var(--ink);border-radius:50%;background:var(--yellow)}.stop-btn{--c: var(--red);color:#fff}.stop-btn.active{animation:pulse-stop .9s ease-in-out infinite}@keyframes pulse-stop{50%{box-shadow:0 4px 0 var(--ink),0 0 0 6px color-mix(in srgb,var(--red) 40%,transparent)}}.loading-bar{height:8px;border:2px solid var(--ink);border-radius:999px;overflow:hidden;background:#fff;margin-bottom:18px}.loading-bar>div{height:100%;background:var(--mint);transition:width .2s}@media(max-width:640px){.board-hero{align-items:flex-start}.player-bar .hide-mobile{display:none}.toolbar .search{max-width:none;order:10;flex-basis:100%}.size-m{--tile: 130px}}.add-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:24px;align-items:start}@media(max-width:900px){.add-layout{grid-template-columns:1fr}}.video-frame{position:relative;aspect-ratio:16 / 9;border:var(--line);border-radius:var(--radius);overflow:hidden;background:var(--ink);box-shadow:var(--shadow)}.video-frame>div,.video-frame iframe{position:absolute;inset:0;width:100%;height:100%}.url-row{display:flex;gap:10px}.url-row .input{border-radius:999px;padding-inline:20px}.trimmer{display:flex;flex-direction:column;gap:14px;user-select:none}.tr-track{position:relative;height:48px;border:var(--line);border-radius:var(--radius-sm);background:#fff;overflow:hidden;cursor:pointer;touch-action:none}.tr-track.zoom{height:96px;background:repeating-linear-gradient(90deg,transparent 0 calc(var(--tick, 20px) - 1px),rgba(30,27,46,.07) calc(var(--tick, 20px) - 1px) var(--tick, 20px)),#fff}.tr-wave{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.tr-sel{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--accent) 30%,transparent);border-inline:3px solid var(--accent);cursor:grab}.tr-sel:active{cursor:grabbing}.tr-handle{position:absolute;top:0;bottom:0;width:22px;margin-left:-11px;z-index:3;cursor:ew-resize;display:grid;place-items:center}.tr-handle:before{content:"";width:14px;height:60%;max-height:44px;border:3px solid var(--ink);border-radius:8px;background:var(--yellow);box-shadow:0 2px 0 var(--ink)}.tr-handle.end:before{background:var(--sky)}.tr-playhead{position:absolute;top:0;bottom:0;width:3px;margin-left:-1.5px;background:var(--ink);z-index:2;pointer-events:none}.tr-playhead:before{content:"";position:absolute;top:0;left:-5px;border:6.5px solid transparent;border-top:8px solid var(--ink)}.tr-labels{display:flex;justify-content:space-between;font-size:.78rem;font-weight:700;color:var(--ink-2);margin-top:4px;font-variant-numeric:tabular-nums}.tr-times{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:end}.tr-time-field{display:flex;flex-direction:column;gap:6px}.tr-time-field.end{align-items:flex-end}.tr-time-input{display:flex;align-items:center;gap:4px}.tr-time-input .input{width:110px;text-align:center;font-variant-numeric:tabular-nums;font-weight:700;min-height:40px;padding:6px}.tr-dur{text-align:center;font-family:var(--font-display);font-weight:700;font-size:1.4rem;padding-bottom:4px;font-variant-numeric:tabular-nums}.tr-dur small{display:block;font-size:.75rem;font-weight:600;color:var(--ink-2)}.kbd{display:inline-block;min-width:22px;padding:0 5px;border:2px solid var(--ink);border-bottom-width:3px;border-radius:6px;background:#fff;font-family:var(--font-display);font-size:.8rem;font-weight:700;text-align:center;line-height:1.4}.image-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.image-option{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:6px;border:var(--line);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-weight:600;font-size:.85rem;text-align:center}.image-option .thumb{aspect-ratio:1;border-radius:9px;background:var(--paper-2) center / cover no-repeat;display:grid;place-items:center;font-size:1.8rem;overflow:hidden}.image-option[aria-pressed=true]{background:var(--yellow);box-shadow:var(--shadow-sm)}.processing-overlay{position:fixed;inset:0;z-index:150;display:grid;place-items:center;background:#fff4e0d9;backdrop-filter:blur(4px);text-align:center;animation:fade-in .2s}.processing-overlay .scissors{font-size:4rem;display:inline-block;animation:snip .5s ease-in-out infinite alternate}@keyframes snip{0%{transform:rotate(-20deg) scale(1)}to{transform:rotate(15deg) scale(1.15)}}.drop-zone{display:grid;place-items:center;gap:10px;padding:48px 20px;border:3px dashed var(--ink);border-radius:var(--radius);background:#fff9;text-align:center;cursor:pointer;transition:background .15s}.drop-zone.dragging,.drop-zone:hover{background:var(--yellow)}.drop-zone .big{font-size:3rem}.pad-preview{width:150px}.menu{position:relative}.menu-pop{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;padding:8px;border:var(--line);border-radius:var(--radius-sm);background:#fff;box-shadow:var(--shadow);z-index:60;animation:pop-in .18s cubic-bezier(.3,1.5,.5,1)}.menu-pop a,.menu-pop button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;border-radius:10px;background:transparent;text-decoration:none;font-weight:600;cursor:pointer;text-align:left}.menu-pop a:hover,.menu-pop button:hover{background:var(--paper)}.menu-pop hr{border:0;border-top:2px solid rgba(30,27,46,.1);margin:6px 0}.avatar{display:grid;place-items:center;width:44px;height:44px;border:var(--line);border-radius:50%;background:var(--sky);font-family:var(--font-display);font-weight:700;font-size:1.1rem;cursor:pointer;box-shadow:0 3px 0 var(--ink);text-transform:uppercase}.footer{padding:30px 0 40px;text-align:center;color:var(--ink-3);font-size:.9rem}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.pad.playing .pad-progress{animation-duration:var(--dur, 1s)!important}}.admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}.feature-edit{padding:14px;border:var(--line);border-left:12px solid var(--c);border-radius:var(--radius-sm);background:#fff}.feature-icon{width:64px;font-size:1.6rem;text-align:center;padding:6px}.admin-savebar{position:sticky;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:5;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px;margin-top:8px;border:var(--line);border-radius:var(--radius-sm);background:var(--paper);box-shadow:var(--shadow-sm)}.admin-preview{border:3px dashed var(--ink);border-radius:var(--radius);background-color:var(--paper);background-image:radial-gradient(rgba(30,27,46,.09) 1.5px,transparent 1.5px);background-size:22px 22px;overflow:hidden;pointer-events:auto}.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px}.stat{padding:18px 20px;background:var(--c)}.stat-value{font-family:var(--font-display);font-size:2.4rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}.stat-label{margin-top:6px;font-weight:600}.table{width:100%;border-collapse:collapse;font-size:.95rem}.table th,.table td{padding:10px 12px;text-align:left;border-bottom:2px solid rgba(30,27,46,.08);white-space:nowrap}.table th{font-family:var(--font-display);font-weight:600;color:var(--ink-2)}.install-banner{position:relative;z-index:45;padding-top:env(safe-area-inset-top,0px);background:var(--yellow);border-bottom:var(--line);animation:slide-down .35s cubic-bezier(.3,1.4,.5,1)}.install-inner{display:flex;align-items:center;gap:12px;padding-block:8px}.install-icon{flex-shrink:0;border:2px solid var(--ink);border-radius:10px}.install-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25;font-size:.88rem}.install-text strong{font-family:var(--font-display);font-size:.98rem}.share-icon{display:inline-block;vertical-align:-3px;color:#0a84ff}.install-close{flex-shrink:0;width:32px;height:32px;border:0;border-radius:50%;background:transparent;font-size:1rem;cursor:pointer}.install-close:hover{background:#1e1b2e1a}@keyframes slide-down{0%{transform:translateY(-100%)}}@media(display-mode:standalone){.topbar{padding-top:env(safe-area-inset-top,0px)}}.toasty{--hold: .9s;position:fixed;right:0;bottom:0;z-index:300;width:min(42vw,280px);pointer-events:none;transform:translate(100%,100%);animation:toasty calc(var(--hold) + .5s) linear forwards}.toasty img{display:block;width:100%;height:auto}@keyframes toasty{0%{transform:translate(100%,100%);animation-timing-function:cubic-bezier(.2,1.4,.5,1)}25%{transform:translate(0)}80%{transform:translate(0);animation-timing-function:ease-in}to{transform:translate(100%,100%)}}@media(prefers-reduced-motion:reduce){.toasty{animation-duration:calc(var(--hold) + .5s)!important}}.site-footer{padding:8px 16px calc(28px + env(safe-area-inset-bottom,0px));text-align:center;font-size:.88rem;font-weight:600;color:var(--ink-3)}.site-footer.with-player{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}.site-footer a{color:var(--ink-2);text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:var(--accent)}.site-footer a:hover{color:var(--accent)}main:has(.player-bar) .page{padding-bottom:24px}.footer{padding-bottom:4px}.pad-art{position:relative}.pad-plays{position:absolute;right:8px;bottom:6px;z-index:2;padding:1px 7px;border:2px solid var(--ink);border-radius:999px;background:var(--yellow);color:var(--ink);font-size:.72rem;font-weight:800;line-height:1.35;font-variant-numeric:tabular-nums;pointer-events:none}.size-s .pad-plays{right:5px;font-size:.64rem;padding:0 5px}@font-face{font-family:Logo Bungee;src:url(/fonts/logo/bungee.woff2) format("woff2");font-display:block}@font-face{font-family:Logo Pacifico;src:url(/fonts/logo/pacifico.woff2) format("woff2");font-display:block}@font-face{font-family:Logo Press;src:url(/fonts/logo/press-start-2p.woff2) format("woff2");font-display:block}@font-face{font-family:Logo Monoton;src:url(/fonts/logo/monoton.woff2) format("woff2");font-display:block}@font-face{font-family:Logo Rubik;src:url(/fonts/logo/rubik-mono-one.woff2) format("woff2");font-display:block}@font-face{font-family:Logo Lobster;src:url(/fonts/logo/lobster.woff2) format("woff2");font-display:block}@font-face{font-family:Logo Bowlby;src:url(/fonts/logo/bowlby-one-sc.woff2) format("woff2");font-display:block}.wordmark{display:inline-flex;align-items:center;font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;line-height:1;cursor:default}.logo .wordmark{cursor:pointer}.wm-l{position:relative;display:inline-block}.wm-ghost{visibility:hidden}.wm-face{position:absolute;left:50%;top:50%;transform:translate(-50%,var(--wm-y, -52%));white-space:nowrap;animation:wm-pop .38s cubic-bezier(.3,1.8,.5,1)}@keyframes wm-pop{0%{transform:translate(-50%,var(--wm-y, -52%)) scale(.3) rotate(-25deg);opacity:.2}to{transform:translate(-50%,var(--wm-y, -52%)) scale(1) rotate(0);opacity:1}}.wm-bungee{font-family:"Logo Bungee",var(--font-display);font-weight:400;font-size:.86em}.wm-pacifico{font-family:"Logo Pacifico",var(--font-display);font-weight:400;font-size:.92em;--wm-y: -62%}.wm-press{font-family:"Logo Press",var(--font-display);font-weight:400;font-size:.6em}.wm-monoton{font-family:"Logo Monoton",var(--font-display);font-weight:400;font-size:.98em}.wm-rubik{font-family:"Logo Rubik",var(--font-display);font-weight:400;font-size:.74em}.wm-lobster{font-family:"Logo Lobster",var(--font-display);font-weight:400;font-size:1.06em}.wm-bowlby{font-family:"Logo Bowlby",var(--font-display);font-weight:400;font-size:.86em}@media(prefers-reduced-motion:reduce){.wm-face{animation:none}}.pad-plays{animation:plays-pop .4s cubic-bezier(.3,1.8,.5,1)}@keyframes plays-pop{0%{transform:scale(.6)}60%{transform:scale(1.25)}to{transform:scale(1)}}.top-sounds{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.top-sounds li{display:flex;align-items:center;gap:12px;padding:8px 10px;border:2px solid rgba(30,27,46,.1);border-radius:var(--radius-sm)}.top-rank{width:32px;text-align:center;font-family:var(--font-display);font-weight:700;font-size:1.2rem;flex-shrink:0}.top-thumb{width:44px;height:44px;flex-shrink:0;display:grid;place-items:center;border:2px solid var(--ink);border-radius:12px;background:var(--c);font-size:1.4rem;overflow:hidden}.top-thumb img{width:100%;height:100%;object-fit:cover}.top-info{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}.top-info>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.top-plays{flex-shrink:0;padding:2px 10px;border:2px solid var(--ink);border-radius:999px;background:var(--yellow);font-weight:800;font-variant-numeric:tabular-nums}.settings-list{display:flex;flex-direction:column;gap:10px}.settings-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px;border:2px solid rgba(30,27,46,.12);border-radius:var(--radius-sm)}.settings-icon{font-size:1.6rem}.site-footer{border-top:2px solid rgba(30,27,46,.08);margin-top:12px;padding-top:18px}.site-footer-inner{display:flex;align-items:center;justify-content:space-between;gap:10px 24px;flex-wrap:wrap}.footer-links{display:flex;gap:6px 18px;flex-wrap:wrap}.footer-links a{color:var(--ink-2);text-decoration:none}.footer-links a:hover{color:var(--accent);text-decoration:underline}@media(max-width:640px){.site-footer-inner{flex-direction:column;text-align:center}.footer-links{justify-content:center}}.terms-check{display:flex;align-items:flex-start;gap:10px;font-size:.9rem;line-height:1.4;cursor:pointer}.terms-check input{width:20px;height:20px;margin-top:1px;flex-shrink:0;accent-color:var(--accent)}.legal{line-height:1.65}.legal h1{font-size:clamp(1.9rem,4vw,2.5rem)}.legal h2{font-size:1.25rem;margin:28px 0 8px}.legal p,.legal li{color:var(--ink-2)}.legal ul{padding-left:22px}.legal li+li{margin-top:6px}.recorder{display:flex;align-items:center;gap:20px}.rec-button{flex-shrink:0;display:grid;place-items:center;width:88px;height:88px;border:var(--line);border-radius:50%;background:#fff;box-shadow:var(--shadow);cursor:pointer;transition:transform .08s}.rec-button:active{transform:translateY(4px);box-shadow:0 2px 0 var(--ink)}.rec-dot{width:40px;height:40px;border-radius:50%;background:var(--red);border:3px solid var(--ink)}.rec-stop{width:32px;height:32px;border-radius:8px;background:var(--ink)}.is-recording .rec-button{animation:rec-pulse 1s ease-in-out infinite}@keyframes rec-pulse{50%{box-shadow:var(--shadow),0 0 0 10px color-mix(in srgb,var(--red) 35%,transparent)}}.rec-status{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}.rec-time{font-family:var(--font-display);font-size:1.4rem;color:var(--red);font-variant-numeric:tabular-nums}.rec-meter{height:14px;border:2px solid var(--ink);border-radius:999px;overflow:hidden;background:#fff}.rec-meter>div{height:100%;background:linear-gradient(90deg,var(--mint),var(--yellow) 70%,var(--red));transform-origin:left;transform:scaleX(0);transition:transform .06s linear}@media(max-width:480px){.recorder{flex-direction:column;text-align:center}}