@font-face{font-family:"Open Sauce One";src:url(/assets/fonts/open-sauce-one-400.woff2) format("woff2");font-weight:400}
@font-face{font-family:"Open Sauce One";src:url(/assets/fonts/open-sauce-one-500.woff2) format("woff2");font-weight:500}
@font-face{font-family:"Open Sauce One";src:url(/assets/fonts/open-sauce-one-700.woff2) format("woff2");font-weight:700}
@font-face{font-family:"Open Sauce One";src:url(/assets/fonts/open-sauce-one-900.woff2) format("woff2");font-weight:900}
:root{--ink:#02060b;--teal:#3c919d;--tealbg:#eef6f7;--line:#e8e8e8;--mute:#5c5c5c;--ok:#2e8b57;--warn:#c2410c}
*{box-sizing:border-box}body{margin:0;font-family:"Open Sauce One",system-ui,sans-serif;color:var(--ink);background:#fff}
header{background:#000;color:#fff;padding:20px 40px;display:flex;align-items:center;gap:24px}
header img{height:32px}header .tag{font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#bbb}
header nav{margin-left:auto;display:flex;gap:8px}header nav a{color:#fff;text-decoration:none;font-weight:700;padding:8px 14px;border-radius:999px;font-size:14px}header nav a.on{background:var(--teal)}
main{max-width:1100px;margin:0 auto;padding:36px 40px 80px}
h1{font-weight:900;font-size:44px;letter-spacing:-.03em;margin:0 0 6px;line-height:1.05}h1 span,h2 span{color:var(--teal)}
h2{font-weight:900;letter-spacing:-.02em;margin:36px 0 12px;font-size:26px}
.sub{color:var(--mute);margin:0 0 24px}
button,.btn{font:inherit;font-weight:700;cursor:pointer;border:0;border-radius:999px;padding:10px 18px;background:var(--teal);color:#fff;text-decoration:none;display:inline-block;font-size:14px}
button.ghost,.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}button.sm{padding:5px 11px;font-size:12px}button:disabled{opacity:.5;cursor:default}
input,textarea,select{font:inherit;border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%}input:focus,textarea:focus,select:focus{outline:2px solid var(--teal);border-color:transparent}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.row>input{flex:1;min-width:180px;width:auto}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.card{border:1px solid var(--line);border-radius:16px;padding:18px;background:#fff}.card h3{margin:0 0 6px;font-weight:900;font-size:20px;letter-spacing:-.01em}
a.card{color:inherit;text-decoration:none;display:block}a.card:hover{border-color:var(--teal)}
.meta{color:var(--mute);font-size:13px}
.pill{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:4px 10px;border-radius:999px;background:#f1f1f1;color:var(--mute)}
.pill.in_review{background:#fff4d6;color:#8a6100}.pill.approved{background:#dcf2e6;color:#1d6b40}.pill.changes_requested{background:#fde4d6;color:#a3360b}
.share{display:flex;gap:8px;align-items:center;margin-top:10px}.share input{font-size:12px;padding:6px 10px;color:var(--mute)}
.wave-wrap{position:relative;background:#0b0f14;border-radius:16px;padding:18px 18px 30px}
#wave{position:relative}.markers{position:absolute;left:18px;right:18px;bottom:6px;height:20px}
.mk{position:absolute;transform:translateX(-50%);width:20px;height:20px;border-radius:50%;background:var(--teal);color:#fff;font-size:10px;font-weight:900;display:grid;place-items:center;cursor:pointer;border:2px solid #0b0f14}
.mk.res{background:#555}.mk:hover,.mk.hl{transform:translateX(-50%) scale(1.25)}
.ctrl{display:flex;align-items:center;gap:14px;margin:14px 0;flex-wrap:wrap}
.play{width:54px;height:54px;border-radius:50%;padding:0;font-size:20px;display:grid;place-items:center}
.time{font-variant-numeric:tabular-nums;font-weight:700}
.vers{display:flex;gap:6px;flex-wrap:wrap}.vers button{background:#fff;color:var(--ink);border:1px solid var(--line);padding:6px 14px}.vers button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.compose{border:1px solid var(--line);border-radius:16px;padding:14px;margin:16px 0}.compose textarea{border:0;padding:4px;min-height:54px;resize:vertical}.compose textarea:focus{outline:0}
.ts{font-weight:700;color:var(--teal);font-variant-numeric:tabular-nums;cursor:pointer;background:var(--tealbg);border-radius:6px;padding:2px 7px;font-size:13px}
.cm{border-top:1px solid var(--line);padding:14px 0}.cm.resolved>.cb{opacity:.5}.cm .who{font-weight:700}.cm .who em{font-style:normal;font-size:11px;color:var(--teal);margin-left:4px}
.cm .body{margin:4px 0 6px;white-space:pre-wrap}.cm .acts{display:flex;gap:6px;flex-wrap:wrap}
.replies{margin:8px 0 0 22px;border-left:3px solid var(--tealbg);padding-left:12px}.replies .cm{border-top:0;padding:8px 0}
.reply-box{margin-top:8px;display:flex;gap:8px}.reply-box input{flex:1}
.decide{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.decide .ok{background:var(--ok)}.decide .no{background:var(--warn)}
.flex{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.drop{display:block;border:2px dashed var(--line);border-radius:12px;padding:12px;text-align:center;color:var(--mute);font-size:13px;margin-top:10px;cursor:pointer}.drop.over{border-color:var(--teal);background:var(--tealbg)}
progress{width:100%;accent-color:var(--teal)}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 18px;border-radius:999px;font-weight:700;font-size:14px;z-index:9}
.modal{position:fixed;inset:0;background:#000a;display:grid;place-items:center;z-index:8;padding:20px}.modal .card{max-width:420px;width:100%}
@media(max-width:700px){header{padding:14px 18px;gap:12px}header img{height:24px}header .tag{display:none}main{padding:22px 16px 60px}h1{font-size:32px}.wave-wrap{padding:12px 10px 28px}.markers{left:10px;right:10px}}
main a{color:var(--teal);font-weight:700;text-decoration:none}main a:hover{text-decoration:underline}a.card h3 a,.card h3 a{color:inherit}