:root{--bg:#fff;--bg-2:#fff;--panel:#f4f3f7;--panel-border:#281e371f;--text:#2b2535;--muted:#6f6680;--accent:#7c3aed;font-family:Nunito,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,system-ui,sans-serif}h1,h2,.brand-title{font-family:Fredoka,Nunito,system-ui,sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{background:var(--bg);height:100%;color:var(--text);overscroll-behavior:none;margin:0}#root{height:100%}button{cursor:pointer;font-family:inherit}.app{background:radial-gradient(120% 90% at 50% 0%, var(--bg-2), var(--bg) 70%);flex-direction:column;max-width:480px;height:100%;margin:0 auto;display:flex;position:relative;overflow:hidden}.screen{-webkit-overflow-scrolling:touch;padding:16px 16px calc(16px + env(safe-area-inset-bottom));flex:1;overflow-y:auto}.topbar{padding:calc(12px + env(safe-area-inset-top)) 18px 6px;justify-content:space-between;align-items:center;display:flex}.topbar h1{letter-spacing:.3px;margin:0;font-size:22px;font-weight:700}.topbar .accent{color:var(--accent)}.nav{border-top:1px solid var(--panel-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding-bottom:env(safe-area-inset-bottom);background:#fff9;display:flex}.nav button{color:var(--muted);background:0 0;border:none;flex-direction:column;flex:1;align-items:center;gap:4px;padding:12px 4px;font-size:11px;transition:color .15s;display:flex}.nav button .ico{width:24px;height:24px;display:block}.nav button.active{color:var(--accent)}.monitor{flex-direction:column;align-items:center;gap:6px;height:100%;display:flex}.db-readout{text-align:center;flex-direction:column;justify-content:center;align-items:center;height:88px;margin-top:2px;display:flex}.db-number{color:var(--accent);transform-origin:50%;will-change:transform;text-shadow:0 2px 0 #3f314740, 0 0 22px var(--glow,#7c3aed73);-webkit-text-stroke:1.5px #3f31478c;font-variant-numeric:tabular-nums;font-family:Fredoka,system-ui,sans-serif;font-size:62px;font-weight:700;line-height:1}.db-unit{color:var(--muted);letter-spacing:2px;margin-top:2px;font-size:16px;font-weight:600}.monster-stage{--lvl:0;aspect-ratio:1;justify-content:center;align-items:center;width:min(74vw,300px,38vh);display:flex;position:relative}.ring,.ring:after{border-radius:50%;position:absolute;inset:0;-webkit-mask:radial-gradient(circle,#0000 0 63%,#000 64%);mask:radial-gradient(circle,#0000 0 63%,#000 64%)}.ring{filter:saturate(1.1);background:conic-gradient(from 225deg,#22c55e 0deg,#84cc16 90deg,#facc15 135deg,#f97316 200deg,#ef4444 270deg,#ffffff0f 270deg 360deg)}.ring:after{content:"";background:conic-gradient(from 225deg, transparent 0 calc(var(--lvl) * 270deg), #ffffffd9 calc(var(--lvl) * 270deg) 270deg, transparent 270deg 360deg)}.alert-flash{opacity:0;pointer-events:none;background:radial-gradient(circle,#ef44448c,#0000 68%);border-radius:50%;position:absolute;inset:-12%}.alert-flash.flash{animation:.6s ease-out alert-flash}@keyframes alert-flash{0%{opacity:1;transform:scale(.85)}to{opacity:0;transform:scale(1.25)}}.threshold-tick{pointer-events:none;position:absolute;inset:0}.threshold-tick .tick{background:#3f3147;border-radius:2px;width:4px;height:16px;margin-left:-2px;position:absolute;top:1.5%;left:50%;box-shadow:0 0 4px #ffffffb3}.tick-num{color:#3f3147;font-variant-numeric:tabular-nums;pointer-events:none;text-shadow:0 0 4px #fff,0 0 4px #fff,0 0 3px #fff;font-size:12px;font-weight:800;position:absolute;transform:translate(-50%,-50%)}.last-danger{background:var(--panel);border:1px solid var(--panel-border);width:100%;max-width:340px;color:var(--text);text-align:center;border-radius:14px;flex-direction:column;align-items:center;gap:3px;padding:10px 16px;font-size:14px;transition:border-color .2s,box-shadow .2s;display:flex}.last-danger strong{color:#fca5a5;font-variant-numeric:tabular-nums}.last-danger .go{color:var(--muted);font-size:12px}.last-danger.ready{border-color:#ef444480;box-shadow:0 0 16px #ef444433}.last-danger.ready .go{color:#fca5a5}.last-danger.ready:active{transform:scale(.99)}.last-danger.empty{color:var(--muted);font-size:13px}.last-danger:disabled{cursor:default}.monster-inner{justify-content:center;align-items:center;width:74%;height:74%;display:flex;position:absolute}.monster{overflow:visible}.monster-img{width:100%;height:100%;animation:3s ease-in-out infinite idle-bob;position:relative}.monster-img img{object-fit:contain;-webkit-user-select:none;user-select:none;width:100%;height:100%;position:absolute;inset:0}.monster-img img.xfade-enter{animation:.3s both xfade-in}@keyframes xfade-in{0%{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}.monster-stage.intense .monster-img{animation:none}.monster .m-body{transform-box:fill-box;transform-origin:bottom;animation:3s ease-in-out infinite idle-bob}@keyframes idle-bob{0%,to{transform:translateY(0)scale(1)}50%{transform:translateY(-3px)scale(1.015)}}.monster-stage.intense .m-body{animation:none}.monster-stage.intense .monster-inner{animation:90ms linear infinite shake}@keyframes shake{0%{transform:translate(0)rotate(0)}25%{transform:translate(-3px,1px)rotate(-1.5deg)}50%{transform:translate(2px,-2px)rotate(1deg)}75%{transform:translate(-1px,2px)rotate(1.5deg)}to{transform:translate(2px)rotate(-1deg)}}.rec-badge{color:#fca5a5;background:#ef444426;border:1px solid #ef444480;border-radius:999px;align-items:center;gap:8px;height:32px;padding:6px 14px;font-size:13px;font-weight:600;display:inline-flex}.rec-badge .dot{background:#ef4444;border-radius:50%;width:10px;height:10px;animation:.8s steps(2,start) infinite blink}.rec-badge.idle{background:var(--panel);border-color:var(--panel-border);color:var(--muted)}.rec-badge.idle .dot{background:#475569;animation:none}@keyframes blink{50%{opacity:.2}}.start-overlay{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);text-align:center;background:#ffffffd9;border-radius:24px;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:20px;display:flex;position:absolute;inset:0}.start-overlay .hint{color:var(--text)}.btn{color:#fff;background:var(--accent);border:none;border-radius:999px;padding:14px 26px;font-size:16px;font-weight:700;box-shadow:0 8px 24px #7c3aed59}.btn.stop{color:#fff;background:#ef4444;box-shadow:0 8px 24px #ef444459}.btn.ghost{background:var(--panel);color:var(--text);border:1px solid var(--panel-border);box-shadow:none}.btn:active{transform:scale(.97)}.monitor-footer{flex-direction:column;align-items:center;gap:10px;width:100%;margin-top:auto;padding-bottom:4px;display:flex}.hint{color:var(--muted);text-align:center;max-width:280px;font-size:12px}.card{background:var(--panel);border:1px solid var(--panel-border);border-radius:16px;margin-bottom:14px;padding:16px}.card h2{margin:0 0 4px;font-size:17px;font-weight:600}.card .sub{color:var(--muted);margin:0 0 14px;font-size:12px}.field{margin-bottom:18px}.field:last-child{margin-bottom:0}.field .label{justify-content:space-between;margin-bottom:8px;font-size:14px;display:flex}.field .label .val{color:var(--accent);font-weight:700}input[type=range]{width:100%;accent-color:var(--accent);height:28px}.alert-head{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.switch{flex:none;width:48px;height:28px;display:inline-block;position:relative}.switch input{opacity:0;width:0;height:0}.switch .track{background:#3f314738;border-radius:999px;transition:background .15s;position:absolute;inset:0}.switch .track:before{content:"";background:#fff;border-radius:50%;width:22px;height:22px;transition:transform .15s;position:absolute;top:3px;left:3px}.switch input:checked+.track{background:var(--accent)}.switch input:checked+.track:before{transform:translate(20px)}.seg{border:1px solid var(--panel-border);background:#eae8f0;border-radius:12px;gap:4px;padding:4px;display:flex}.seg button{color:var(--muted);background:0 0;border:none;border-radius:9px;flex:1;padding:8px;font-size:13px;font-weight:600}.seg button.active{background:var(--accent);color:#fff}.text-input{border:1px solid var(--panel-border);width:100%;color:var(--text);background:#fff;border-radius:10px;padding:10px 12px;font-size:15px}.sound-grid{flex-wrap:wrap;gap:8px;display:flex}.sound-chip{border:1.5px solid var(--panel-border);color:var(--text);cursor:pointer;background:#fff;border-radius:999px;align-items:center;padding:8px 14px;font-size:13px;font-weight:700;display:inline-flex}.sound-chip.selected{border-color:var(--accent);color:var(--accent);background:#7c3aed1f}.sound-chip:has(.chip-main){padding:0;overflow:hidden}.sound-chip .chip-main{color:inherit;font:inherit;background:0 0;border:none;padding:8px 4px 8px 14px}.sound-chip .chip-x{color:var(--muted);background:0 0;border:none;padding:8px 12px 8px 6px;font-size:16px;line-height:1}.sound-chip.upload{color:var(--muted);border-style:dashed}.monster-grid{grid-template-columns:repeat(2,1fr);gap:12px;display:grid}.monster-card{background:var(--panel);border:2px solid var(--panel-border);border-radius:16px;flex-direction:column;align-items:center;gap:6px;padding:10px;display:flex}.monster-card.selected{border-color:var(--accent);background:#7c3aed1f}.monster-card .thumb{width:88px;height:88px}.monster-card .name{font-size:13px;font-weight:600}.clip{background:var(--panel);border:1px solid var(--panel-border);border-radius:14px;margin-bottom:12px;padding:12px 14px}.clip.highlight{animation:2s ease-out clip-highlight}@keyframes clip-highlight{0%,30%{border-color:#ef4444;box-shadow:0 0 0 2px #ef444480,0 0 22px #ef444459}to{border-color:var(--panel-border);box-shadow:none}}.clip .clip-head{justify-content:space-between;align-items:baseline;margin-bottom:8px;display:flex}.clip .clip-title{font-size:14px;font-weight:600}.clip .peak{color:#fca5a5;background:#ef44442e;border-radius:999px;padding:2px 8px;font-size:12px;font-weight:700}.clip .clip-meta{color:var(--muted);margin-bottom:10px;font-size:12px}.clip audio{width:100%;height:36px}.clip .clip-actions{gap:10px;margin-top:10px;display:flex}.clip .clip-actions a,.clip .clip-actions button{text-align:center;border:1px solid var(--panel-border);color:var(--text);background:#ffffff0a;border-radius:10px;flex:1;padding:8px;font-size:13px;text-decoration:none}.clip .clip-actions .danger{color:#fca5a5;border-color:#ef444466}.empty{text-align:center;color:var(--muted);padding:48px 20px}.empty .big{margin-bottom:8px;font-size:48px}