:root { --ink:#202a25; --muted:#718078; --paper:#f5f2ea; --panel:#fffdf8; --line:#e4e0d6; --accent:#d86643; --deep:#25382d; --warm:#f3e3c1; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:radial-gradient(circle at 12% 2%,#fffdf5 0,transparent 32%),var(--paper); font-family:"Plus Jakarta Sans","Noto Serif SC",sans-serif; min-height:100vh; }
.shell { width:min(1080px,calc(100% - 40px)); margin:0 auto; padding:34px 0 45px; } header { display:flex; justify-content:space-between; align-items:center; margin-bottom:54px; } .brand { display:flex; gap:10px; align-items:center; font-family:"Noto Serif SC",serif; font-size:19px; font-weight:700; letter-spacing:.06em; }.seal { display:grid; place-items:center; width:31px; height:31px; color:#fff; border-radius:4px; background:var(--accent); font-size:17px; }.dot { color:var(--accent); } header p { margin:0; color:var(--muted); font-size:13px; }
.upload-card { max-width:720px; margin:10vh auto 0; padding:62px 40px 52px; text-align:center; background:rgba(255,253,248,.72); border:1px dashed #c8c2b5; border-radius:18px; transition:.2s ease; }.upload-card.dragging { background:#fff9e9; border-color:var(--accent); transform:scale(1.01); }.upload-icon { width:52px; height:52px; display:grid; place-items:center; margin:0 auto 17px; border-radius:50%; background:#f7e8cf; color:var(--accent); font-size:34px; line-height:1; }.upload-card h1 { margin:0; font-family:"Noto Serif SC",serif; font-size:28px; font-weight:600; }.upload-card p { max-width:440px; margin:16px auto 22px; color:var(--muted); font-size:13px; line-height:1.8; }.primary { border:0; border-radius:7px; padding:12px 19px; background:var(--accent); color:white; font-family:inherit; font-size:14px; font-weight:600; cursor:pointer; box-shadow:0 6px 15px #d8664330; transition:.2s; }.primary:hover { transform:translateY(-1px); background:#c85737; }.drop-hint { display:block; color:#9a9f99; margin-top:14px; font-size:12px; }
.hidden { display:none; }.recording-bar,.export-bar { display:flex; align-items:center; justify-content:space-between; }.recording-bar { margin-bottom:18px; padding:0 4px; }.track-copy { display:flex; align-items:center; gap:11px; }.status-dot { width:8px; height:8px; border-radius:50%; background:#78a36a; box-shadow:0 0 0 4px #78a36a20; }.track-copy strong { display:block; font-size:14px; }.track-copy small { display:block; margin-top:4px; color:var(--muted); font-size:12px; }.text-button { border:0; background:none; color:var(--accent); font:inherit; font-size:13px; cursor:pointer; }
.editor-grid { display:grid; grid-template-columns:1.04fr .96fr; gap:18px; }.panel { border:1px solid var(--line); border-radius:14px; background:var(--panel); padding:27px; }.panel-title { display:flex; align-items:start; justify-content:space-between; }.eyebrow { color:var(--accent); font-size:11px; letter-spacing:.12em; font-weight:700; }.panel h2 { margin:7px 0 0; font-family:"Noto Serif SC",serif; font-size:20px; font-weight:600; }.duration { color:var(--muted); font-variant-numeric:tabular-nums; font-size:13px; }.wave-wrap { position:relative; overflow:hidden; height:141px; margin:30px 0 19px; border-radius:8px; background:#f4f0e6; } #waveform { width:100%; height:100%; }.playhead { display:none; position:absolute; top:0; bottom:0; width:1px; background:var(--accent); box-shadow:0 0 6px var(--accent); }.player-row { display:flex; gap:9px; align-items:center; }.listen-button { padding:9px 12px; color:#59635c; border:1px solid var(--line); background:#fffdf8; border-radius:6px; font:inherit; font-size:12px; cursor:pointer; }.listen-button.active { color:#fff; background:var(--deep); border-color:var(--deep); }.stop { border:0; background:transparent; color:#768078; font-size:12px; cursor:pointer; }.processing-note { min-height:39px; margin:20px 0 0; padding-top:16px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; line-height:1.65; }
.presets { display:flex; gap:7px; margin:28px 0 26px; }.preset { flex:1; padding:11px 5px 10px; border:1px solid var(--line); background:#fffdf8; border-radius:7px; color:#59635c; font-family:"Noto Serif SC",serif; font-size:13px; cursor:pointer; }.preset small { display:block; margin-top:4px; color:#9a9f99; font-family:"Plus Jakarta Sans",sans-serif; font-size:10px; }.preset.selected { color:var(--deep); border-color:var(--deep); background:#f1f5ec; box-shadow:inset 0 0 0 1px var(--deep); }.control { margin:20px 0; }.control-label { display:flex; justify-content:space-between; align-items:center; font-size:13px; font-weight:600; }.control output { color:var(--accent); font-size:12px; }.control p { margin:7px 0 0; color:var(--muted); font-size:11px; } input[type=range] { width:100%; margin:13px 0 0; accent-color:var(--accent); cursor:pointer; }.privacy { margin-top:25px; padding-top:17px; border-top:1px solid var(--line); color:#708373; font-size:12px; }.export-bar { margin-top:18px; padding:21px 25px; border-radius:13px; background:var(--deep); color:white; }.export-bar strong,.export-bar span { display:block; }.export-bar strong { font-family:"Noto Serif SC",serif; font-size:16px; }.export-bar span { margin-top:4px; color:#c5d0c5; font-size:12px; }.export-bar .primary { background:#e48657; }.toast { position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); padding:10px 16px; border-radius:6px; background:#28342d; color:#fff; font-size:13px; opacity:0; pointer-events:none; transition:.25s; }.toast.show { opacity:1; transform:translate(-50%,0); }
.upload-actions { display:flex; justify-content:center; gap:9px; }.secondary { border:1px solid #d7cbb9; border-radius:7px; padding:11px 15px; color:#735b4d; background:#fffaf0; font:600 13px inherit; cursor:pointer; }.secondary.recording { color:#fff; background:#a94436; border-color:#a94436; }.analysis-card { display:flex; align-items:flex-start; gap:13px; margin-top:18px; padding:18px 21px; border:1px solid #e6dac3; border-radius:12px; background:#fff8e9; }.analysis-mark { flex:0 0 27px; display:grid; place-items:center; width:27px; height:27px; border-radius:50%; color:#b66e30; background:#f4e4c6; }.analysis-card strong { display:block; margin:5px 0 3px; font-family:"Noto Serif SC",serif; font-size:15px; }.analysis-card p { margin:0; color:#7d756a; font-size:12px; line-height:1.65; }
.video-preview { width:100%; max-height:330px; margin:20px 0 0; border-radius:8px; background:#111; }.timeline-row { display:flex; align-items:center; gap:11px; margin-bottom:19px; }.timeline-row input { flex:1; margin:0; }.timeline-row output { min-width:37px; color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; text-align:right; }.export-actions { display:flex; gap:9px; }
@media (max-width:700px) { .shell { width:min(100% - 26px,600px); padding-top:20px; } header { margin-bottom:25px; } header p { display:none; } .upload-card { margin-top:7vh; padding:45px 22px; }.upload-card h1 { font-size:23px; }.editor-grid { grid-template-columns:1fr; }.panel { padding:21px; }.export-bar { align-items:flex-start; flex-direction:column; gap:16px; padding:18px; }.export-bar .primary { white-space:nowrap; }.export-actions { width:100%; }.export-actions .primary { flex:1; padding:12px 8px; }.presets { gap:5px; }.upload-actions { flex-direction:column; align-items:center; }.player-row { flex-wrap:wrap; } }