:root { --ink:#18253c; --paper:#fffaf0; --blue:#4c8dff; --coral:#ff7165; --yellow:#ffc93d; --mint:#66d4b0; --shadow:0 8px 0 rgba(24,37,60,.14); font-family: ui-rounded, "Nunito", system-ui, sans-serif; color:var(--ink); background:#dff5ff; }
* { box-sizing:border-box } body { margin:0; min-height:100vh; } button,input { font:inherit } button { cursor:pointer; border:0; color:var(--ink) } #app { min-height:100vh; padding:clamp(12px,2vw,28px); }
.card { background:var(--paper); border-radius:28px; box-shadow:var(--shadow); padding:clamp(18px,3vw,36px); }
.lock { max-width:430px; margin:12vh auto; text-align:center }.mascot { font-size:5rem } h1 { font-size:clamp(2rem,5vw,3rem); margin:.15em } p { font-size:1.2rem }.lock form { display:grid; gap:16px }.lock input { width:100%; text-align:center; font-size:2rem; letter-spacing:.3em; padding:14px; border:3px solid #bcd3e5; border-radius:18px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px }.topbar-actions { display:flex; align-items:center; gap:10px }.brand { font-weight:900; font-size:clamp(1.5rem,4vw,2.5rem) }.icon,.big { min-height:58px; border-radius:18px; font-weight:800; box-shadow:0 4px 0 rgba(24,37,60,.15); }.icon { min-width:58px; font-size:1.6rem; background:white }.icon.stop-action { background:var(--blue); color:white }.primary { background:var(--blue); color:white }.danger { background:var(--coral); color:white }.mint { background:var(--mint) }.yellow { background:var(--yellow) }
.set-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:20px; max-width:1000px; margin:auto }.set-card { min-height:160px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px; font-weight:900; font-size:1.5rem; text-align:center }.set-card span { font-size:3.5rem }.new-set { border:4px dashed #7aa5c3; background:#f4fbff }
.board { display:grid; grid-template-columns:repeat(5,minmax(110px,1fr)); gap:clamp(10px,2vw,22px); max-width:1250px; margin:auto }.tile { min-height:clamp(130px,22vw,220px); border-radius:28px; background:var(--paper); box-shadow:var(--shadow); padding:10px; position:relative; display:flex; align-items:center; justify-content:center; font-size:clamp(3.4rem,9vw,7rem); transition:transform .08s }.tile:active { transform:translateY(5px); box-shadow:0 3px 0 rgba(24,37,60,.14) }.tile.empty { background:#edf5f8; filter:saturate(.65) }.tile.preloading::after { content:""; position:absolute; right:14px; bottom:14px; width:18px; height:18px; border:4px solid #c9e4f2; border-top-color:var(--blue); border-radius:50%; animation:spin .8s linear infinite }.tile .edit { position:absolute; top:9px; right:9px; min-height:46px; min-width:46px; border-radius:15px; background:rgba(255,255,255,.92); font-size:1.25rem }.tile .loop { position:absolute; bottom:9px; left:9px; min-height:46px; min-width:46px; border-radius:15px; background:rgba(255,255,255,.92); font-size:1.15rem }.tile.looping { outline:6px solid var(--yellow) } @keyframes spin { to { transform:rotate(360deg) } }
.volume { max-width:850px; margin:20px auto; display:flex; gap:16px; align-items:center; justify-content:center; background:var(--paper); padding:14px 20px; border-radius:20px; font-size:1.5rem; font-weight:800 }.volume input,.range input { flex:1; min-width:100px; accent-color:var(--blue); min-height:32px }
dialog { border:0; padding:0; border-radius:28px; max-width:min(720px,96vw); width:100%; background:transparent } dialog::backdrop { background:rgba(24,37,60,.45) }.modal { position:relative; max-height:92vh; overflow:auto; padding-bottom:100px }.modal h2 { margin-top:0; padding-right:58px }.modal-close { position:absolute; top:16px; right:16px; z-index:5; width:48px; height:48px; padding:0; border-radius:15px; background:#eaf6fc; color:var(--ink); box-shadow:0 3px 0 rgba(24,37,60,.15); font-family:Arial,sans-serif; font-size:2rem; line-height:1; font-weight:700 }.actions { display:flex; flex-wrap:wrap; gap:12px; margin:16px 0 }.actions .big { padding:0 18px }.audio-actions button,.floating-listen { display:inline-flex; align-items:center; justify-content:center; gap:10px }.button-symbol { display:inline-block; font-family:Arial,sans-serif; font-size:1.35em; line-height:1 }.record-action { background:var(--coral); color:white }.stop-action { background:var(--blue); color:white }.listen-action { background:var(--mint); color:var(--ink) }.audio-actions button:disabled { opacity:.38; filter:saturate(.45); cursor:default; box-shadow:none }.grid-emojis { display:grid; grid-template-columns:repeat(8,1fr); gap:8px }.emoji-choice { min-height:54px; border-radius:15px; font-size:1.8rem; background:#eaf6fc }.emoji-choice.selected { outline:4px solid var(--blue) }.no-icon-choice { font-size:1.5rem; font-weight:900; color:#587088 }.range { display:flex; align-items:center; gap:10px; margin:16px 0; font-size:1.1rem; font-weight:800 }.effects { display:grid; grid-template-columns:1fr; gap:12px; }.effect { min-height:82px; display:grid; grid-template-columns:3.6rem minmax(0,1fr); align-items:center; gap:12px; background:#eaf6fc; padding:13px; border-radius:16px }.effect-icon { font-size:2.7rem; line-height:1; text-align:center }.effect label,.effect-action { display:flex; justify-content:space-between; gap:12px; align-items:center; font-weight:800 }.effect label { width:100% }.effect label span,.effect-action b { font-size:1.1rem }.effect-value { min-width:3.5rem; text-align:center; font-weight:900; color:#315a77 }.effect label input[type="range"] { flex:1; min-width:100px }.effect label input[type="checkbox"] { width:28px; height:28px; accent-color:var(--blue) }.effect button { min-width:126px; min-height:45px; background:var(--mint); border-radius:13px; font-weight:800 }.advanced-effects { border:3px solid #c9e4f2; border-radius:18px; padding:0 12px 12px }.advanced-effects summary { cursor:pointer; padding:16px 4px; font-size:1.1rem; font-weight:900 }.advanced-effects .hint { margin-top:0 }.advanced-effect-list { display:grid; gap:12px }.floating-listen { position:fixed; right:max(4vw,calc((100vw - 720px)/2 + 22px)); bottom:6vh; z-index:20; min-height:58px; padding:0 22px; border-radius:18px; box-shadow:0 6px 0 rgba(24,37,60,.2); font-size:1.1rem; font-weight:900 }.floating-listen:disabled { display:none }.hint { color:#587088; font-size:.95rem }.message { color:#b2362d; min-height:1.2em } audio { width:100%; margin:10px 0 }
@media (max-width:650px) { .board { grid-template-columns:repeat(2,1fr) }.topbar .brand { font-size:1.45rem }.grid-emojis { grid-template-columns:repeat(4,1fr) } }

.trim-editor { margin:12px 0 22px; padding:14px; border-radius:18px; background:#eaf6fc }.trim-editor.disabled { opacity:.6 }.trim-waveform { display:block; width:100%; height:120px; border-radius:12px; background:#f5fbfe; cursor:crosshair }.trim-reset { display:block; margin:10px 0 0 auto; min-height:38px; padding:0 13px; border-radius:12px; background:var(--yellow); font-weight:800 }.trim-controls { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:14px }.trim-controls label { display:grid; grid-template-columns:auto auto; align-items:center; gap:8px; font-weight:800 }.trim-controls output { text-align:right; color:#587088 }.trim-controls input { grid-column:1 / -1; width:100%; accent-color:var(--blue); min-height:32px }
@media (max-width:650px) { .trim-controls { grid-template-columns:1fr } }