:root{--radius:12px;--shadow:0 4px 24px rgba(0,0,0,.45)}*,*::before,*::after{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background:radial-gradient(1200px 700px at 20% 0%,#141621 0%,var(--bg) 55%);color:var(--text);font-family:var(--font-body);font-size:var(--font-body-size,14px);font-weight:var(--font-body-weight,400)}h1,h2,h3{font-family:var(--font-head);font-weight:var(--font-head-weight,700)}.top{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:14px 18px;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}.top h1{margin:0;font-size:clamp(20px,3vw,34px);letter-spacing:.2px}.top p{margin:4px 0 0;color:var(--muted)}.muted{color:var(--muted)}nav{display:flex;gap:8px;flex-wrap:wrap}nav a{display:inline-flex;align-items:center;color:var(--muted);text-decoration:none;font-weight:700;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 12px}nav a:hover{color:var(--text);border-color:var(--accent)}.wrap{width:100%;max-width:1120px;margin:0 auto;padding:16px}.card{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:var(--radius);padding:clamp(16px,3vw,28px);box-shadow:var(--shadow);margin-bottom:16px}.recorder{max-width:720px;margin:0 auto 18px}.max{margin-bottom:12px;color:var(--muted);font-size:13px}.stage{border:1px solid rgba(255,255,255,.07);border-radius:10px;background:#000;min-height:360px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}.stage:before{content:"";position:absolute;inset:0;background:radial-gradient(500px 260px at 50% 20%,rgba(124,140,248,.22),transparent 65%);pointer-events:none}.mic{width:84px;height:84px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:var(--accent);color:white;font-size:32px;box-shadow:0 0 0 18px rgba(255,255,255,.04),0 0 0 42px rgba(255,255,255,.025);transition:.2s;position:relative;z-index:1}.mic.active{animation:pulse 1s infinite;background:var(--danger)}@keyframes pulse{50%{box-shadow:0 0 0 30px rgba(251,113,133,.22),0 0 0 64px rgba(251,113,133,.08)}}.timer{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:44px;font-weight:900;letter-spacing:2px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:10px 22px;margin-top:58px;position:relative;z-index:1}.status{color:var(--muted);margin-top:14px;position:relative;z-index:1}.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.actions .primary{grid-column:1/3}button,input,select,textarea{font:inherit}button,.primary{border:0;border-radius:8px;padding:12px 18px;background:var(--panel2);border:1px solid var(--line);color:var(--text);font-weight:800;cursor:pointer;transition:opacity .2s,border-color .2s,transform .2s}.primary{background:var(--accent);border-color:var(--accent);color:#fff}button:hover,.primary:hover{opacity:.88;border-color:var(--accent)}button:disabled{opacity:.45;cursor:not-allowed;transform:none}audio{width:100%;margin-top:12px;filter:drop-shadow(0 4px 14px rgba(0,0,0,.35))}label{display:block;color:var(--muted);font-weight:700;margin-bottom:14px;font-size:13px}input{width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:11px 14px;margin-top:7px;outline:none}input:focus{border-color:var(--accent)}.clips{display:grid;gap:10px}.clip{display:grid;grid-template-columns:minmax(210px,1fr) 2fr;gap:14px;align-items:center;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:10px;padding:14px}.clip strong{display:block;font-family:var(--font-head);font-weight:var(--font-head-weight,700)}.clip span{display:block;color:var(--muted);font-size:12px;margin-top:5px}.like-btn{display:inline-flex;align-items:center;gap:6px;margin-top:10px;border-radius:999px;padding:8px 12px;font-size:12px;line-height:1;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--text)}.like-btn:hover{border-color:var(--accent)}.like-btn.liked,.like-btn:disabled.liked{background:color-mix(in srgb,var(--accent) 22%,transparent);border-color:var(--accent);opacity:1;cursor:default}.clip-meta{min-width:0}@media(max-width:700px){.top{display:block}.top nav{margin-top:12px}.clip{grid-template-columns:1fr}.stage{min-height:300px}.timer{font-size:34px}.actions{grid-template-columns:1fr}.actions .primary{grid-column:auto}}
/* External embed layout support */
body.embed-mode{min-height:auto;background:transparent;overflow-x:hidden}.embed-wrap{max-width:760px;padding:0;margin:0 auto}.embed-mode .card{margin:0;border-radius:12px}.embed-mode .recorder{max-width:none}.embed-mode .stage{min-height:300px}.embed-mode .submit{margin-top:12px}.embed-mode audio{max-width:100%}@media(max-width:520px){.embed-wrap{padding:0}.embed-mode .card{padding:14px;border-radius:10px}.embed-mode .stage{min-height:260px}.embed-mode .mic{width:72px;height:72px}.embed-mode .timer{font-size:30px;margin-top:42px}.embed-mode button{padding:11px 12px}}