/* Zett Tools: shared styles. Same brand as prompter.tryzett.com:
   Zett yellow #FFC400, black #111, system font, follows light/dark mode. */
:root{
  --y:#FFC400;--y-soft:rgba(255,196,0,.14);--ink:#111;--on-y:#111;
  --bg:#f7f7f7;--panel:#fff;--panel2:#f1f1f1;--text:#0b0b0b;--text2:#2e2e2e;--mute:#5c5c5c;
  --hair:rgba(0,0,0,.09);--hair2:rgba(0,0,0,.16);--link:#8a6300;--logo:#000;
  --ok:#1f8a4c;--warn:#a15c00;--bad:#c0392b;
  --r:14px;--r-sm:10px;--shadow:0 1px 2px rgba(0,0,0,.05),0 8px 28px rgba(0,0,0,.06);
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color-scheme:light
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#0b0c0e;--panel:#151618;--panel2:#1c1d20;--text:#f3f3f3;--text2:#c9cacd;--mute:#909297;
  --hair:#26272b;--hair2:#34363b;--link:#FFC400;--logo:#f3f3f3;--ink:#121314;--y-soft:rgba(255,196,0,.12);
  --ok:#3ccf7a;--warn:#f0a43a;--bad:#ff6b5b;--shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);
  color-scheme:dark}}
:root[data-theme=dark]{
  --bg:#0b0c0e;--panel:#151618;--panel2:#1c1d20;--text:#f3f3f3;--text2:#c9cacd;--mute:#909297;
  --hair:#26272b;--hair2:#34363b;--link:#FFC400;--logo:#f3f3f3;--ink:#121314;--y-soft:rgba(255,196,0,.12);
  --ok:#3ccf7a;--warn:#f0a43a;--bad:#ff6b5b;--shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);
  color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--link)}
:focus-visible{outline:2px solid var(--y);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px max(16px,env(safe-area-inset-left));background:color-mix(in srgb,var(--bg) 80%,transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid var(--hair)}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.brand span{padding-left:10px;border-left:1px solid var(--hair);color:var(--text2)}
.zlogo{height:20px;width:auto;display:block}.zlogo text{fill:var(--logo)}
.nav{display:flex;align-items:center;gap:4px}
.nav a.lnk{color:var(--text2);text-decoration:none;font-size:14px;font-weight:500;padding:8px 10px;border-radius:8px}
.nav a.lnk:hover{color:var(--text);background:var(--panel2)}
.nav a.lnk[aria-current=page]{color:var(--text)}
@media (max-width:620px){.nav a.lnk.hide-s{display:none}}

/* buttons */
.cta,.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:0 16px;border:0;border-radius:var(--r-sm);font:600 14px/1 inherit;font-family:inherit;text-decoration:none;cursor:pointer;transition:transform .1s ease-out,filter .15s,background .15s;white-space:nowrap}
.cta{background:var(--y);color:var(--on-y)}
.cta:hover{filter:brightness(1.05)}.cta:active,.btn:active{transform:scale(.97)}
.cta.big{min-height:46px;padding:0 22px;font-size:15px}
.btn{background:var(--panel);color:var(--text);box-shadow:inset 0 0 0 1px var(--hair2)}
.btn:hover{background:var(--panel2)}
.btn.ghost{background:transparent;box-shadow:none;color:var(--text2)}
.btn.ghost:hover{background:var(--panel2);color:var(--text)}
.btn.sm,.cta.sm{min-height:32px;padding:0 12px;font-size:13px}
.btn[disabled],.cta[disabled]{opacity:.45;pointer-events:none}
.btn svg,.cta svg{width:16px;height:16px;flex:none}

/* layout */
main{max-width:1080px;margin:0 auto;padding:40px max(16px,env(safe-area-inset-left)) 40px}
main.narrow{max-width:760px}
.crumbs{font-size:13px;color:var(--mute);margin-bottom:16px}.crumbs a{color:var(--mute)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:12px}
.eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--y);display:inline-block}
h1{margin:0 0 14px;font-size:clamp(32px,5.4vw,52px);line-height:1.04;letter-spacing:-.035em;text-wrap:balance}
h1 em{font-style:normal;background:linear-gradient(transparent 62%,var(--y-soft) 62%)}
.lede{margin:0 0 22px;font-size:clamp(17px,2.2vw,19px);line-height:1.5;color:var(--text2);max-width:640px}
h2{margin:48px 0 12px;font-size:24px;line-height:1.2;letter-spacing:-.02em}
h3{margin:0 0 6px;font-size:16px;letter-spacing:-.01em}
p,li{color:var(--text2)}li{margin:6px 0}b,strong{color:var(--text)}
.muted{color:var(--mute)}
.small{font-size:13px}
kbd,code{font-family:var(--mono);font-size:.88em;background:var(--panel2);border-radius:6px;padding:1px 6px}

/* hub cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:14px}
.card{position:relative;display:flex;flex-direction:column;gap:8px;padding:18px 18px 16px;border-radius:var(--r);background:var(--panel);box-shadow:inset 0 0 0 1px var(--hair);color:var(--text);text-decoration:none;min-height:188px;transition:box-shadow .15s ease-out,transform .1s ease-out;-webkit-tap-highlight-color:transparent}
.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:6px}
a.card:hover{box-shadow:inset 0 0 0 1px var(--y),var(--shadow)}
a.card:active{transform:scale(.985)}
.card .ico{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--panel2);flex:none}
.card .ico svg{width:21px;height:21px}
.card.is-live .ico{background:var(--y);color:#111}
.card h3{margin:0;font-size:17px;line-height:1.25;letter-spacing:-.015em;font-weight:650}
.card p{margin:0;font-size:14.5px;line-height:1.5;color:var(--text2)}
.card .meta{margin-top:auto;padding-top:12px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;color:var(--mute)}
.card .go{font-weight:600;color:var(--text);white-space:nowrap;transition:transform .15s ease-out}
a.card:hover .go{transform:translateX(2px)}
.card.soon{background:transparent;box-shadow:inset 0 0 0 1px var(--hair)}
.card.soon h3,.card.soon p{color:var(--mute)}
@media (prefers-reduced-motion:reduce){a.card:active,a.card:hover .go{transform:none}}
.badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.02em}
.badge.on{background:var(--y-soft);color:var(--link)}
.badge.new{background:var(--y);color:#111}
.badge.soon{background:var(--panel2);color:var(--mute)}
.card .badge{flex:none}

/* zett band */
.band{margin:56px 0 0;padding:28px;border-radius:20px;background:#111;color:#f5f5f3;display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:center}
.band h2{margin:0 0 8px;color:#fff;font-size:26px}
.band p{margin:0;color:#cfcfca}
.band b{color:#fff}
.band .steps{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.band .steps span{font-size:12.5px;padding:4px 10px;border-radius:999px;background:#1f1f1f;color:#e7e7e2;border:1px solid #2c2c2c}
.band .steps span:last-child{background:var(--y);color:#111;border-color:var(--y)}
@media (max-width:760px){.band{grid-template-columns:1fr;padding:22px}}

/* signup */
.signup{display:flex;flex-direction:column;gap:10px}
.signup .row{display:flex;gap:8px}
.signup input[type=email]{flex:1;min-width:0;height:44px;padding:0 14px;border-radius:var(--r-sm);border:1px solid #333;background:#1a1a1a;color:#fff;font:inherit;font-size:15px}
.signup input[type=email]::placeholder{color:#8d8d88}
.signup .consent{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.45;color:#a9a9a4}
.signup .consent input{margin-top:2px;accent-color:#FFC400}
.signup .done{font-size:14px;color:#fff}
@media (max-width:420px){.signup .row{flex-direction:column}}

/* tool layout */
.tool{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:900px){.tool{grid-template-columns:1fr}}
.panel{background:var(--panel);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--hair);padding:18px;min-width:0}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.panel-h h2{margin:0;font-size:15px;letter-spacing:-.01em}
.step{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--y);color:#111;font-size:12px;font-weight:800;margin-right:8px;vertical-align:-1px}
textarea.input{width:100%;min-height:300px;resize:vertical;padding:14px;border-radius:var(--r-sm);border:1px solid var(--hair2);background:var(--bg);color:var(--text);font:14.5px/1.55 var(--mono);tab-size:4}
textarea.input.prose{font:15px/1.55 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;min-height:200px}
textarea.input::placeholder{color:var(--mute)}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label,.lbl{font-size:12.5px;font-weight:600;color:var(--mute)}
select,input.txt{height:38px;padding:0 10px;border-radius:var(--r-sm);border:1px solid var(--hair2);background:var(--bg);color:var(--text);font:inherit;font-size:14px;min-width:0}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:12px}
.seg{display:inline-flex;padding:3px;border-radius:11px;background:var(--panel2);gap:2px;flex-wrap:wrap}
.seg button{border:0;background:transparent;color:var(--text2);font:600 13px/1 inherit;font-family:inherit;padding:8px 12px;border-radius:8px;cursor:pointer}
.seg button[aria-pressed=true]{background:var(--panel);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.12),inset 0 0 0 1px var(--hair)}
.row-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hint{font-size:13px;color:var(--mute);margin:10px 0 0}
.chk{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text2)}
.chk input{accent-color:#FFC400;width:16px;height:16px}

/* marker list */
.mlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:520px;overflow:auto;padding-right:2px}
.mitem{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:10px;align-items:start;padding:10px;border-radius:var(--r-sm);background:var(--bg);box-shadow:inset 0 0 0 1px var(--hair)}
.mitem .dot{width:12px;height:12px;border-radius:50%;margin-top:9px;border:0;cursor:pointer;padding:0}
.mitem .tc{font:600 13px/1 var(--mono);padding:8px 8px;border-radius:7px;background:var(--panel2);color:var(--text);border:1px solid transparent;width:112px}
.mitem .tc:focus{border-color:var(--y);outline:0}
.mitem .note{width:100%;border:1px solid transparent;background:transparent;color:var(--text);font:inherit;font-size:14px;line-height:1.45;padding:6px 6px;border-radius:7px;resize:none;overflow:hidden;min-height:32px}
.mitem .note:hover{border-color:var(--hair)}.mitem .note:focus{border-color:var(--y);outline:0;background:var(--panel)}
.mitem .who{display:block;font-size:12px;color:var(--mute);padding:0 6px}
.mitem .del{border:0;background:transparent;color:var(--mute);cursor:pointer;width:28px;height:28px;border-radius:7px;font-size:18px;line-height:1}
.mitem .del:hover{background:var(--panel2);color:var(--bad)}
.mitem.warn{box-shadow:inset 0 0 0 1px var(--warn)}
@media (max-width:520px){.mitem{grid-template-columns:auto minmax(0,1fr) auto}.mitem .tc{grid-column:2;width:auto}.mitem .notewrap{grid-column:1/-1}.mitem .del{grid-row:1;grid-column:3}}
.empty{display:grid;place-items:center;text-align:center;min-height:220px;border-radius:var(--r-sm);border:1px dashed var(--hair2);color:var(--mute);font-size:14px;padding:20px}
.stat{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--mute)}
.stat b{font-variant-numeric:tabular-nums}
.general{margin-top:14px;padding:12px;border-radius:var(--r-sm);background:var(--y-soft)}
.general h3{font-size:13px;margin-bottom:6px}
.general ul{margin:0;padding-left:18px;font-size:13.5px}
.export{margin-top:16px;padding-top:16px;border-top:1px solid var(--hair)}
.export .targets{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:10px 0 12px}
.target{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:var(--r-sm);background:var(--bg);box-shadow:inset 0 0 0 1px var(--hair);cursor:pointer;text-align:left;border:0;font:inherit;color:var(--text)}
.target b{font-size:14px}.target span{font-size:12px;color:var(--mute)}
.target[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--y);background:var(--y-soft)}
.howto{font-size:13.5px;margin:0 0 12px;padding:10px 12px;border-radius:var(--r-sm);background:var(--panel2);color:var(--text2)}
.howto ol{margin:4px 0 0;padding-left:18px}.howto li{margin:2px 0;color:var(--text2)}

/* translator */
.tnotes{display:flex;flex-direction:column;gap:10px}
.tnote{padding:14px;border-radius:var(--r-sm);background:var(--bg);box-shadow:inset 0 0 0 1px var(--hair)}
.tnote .q{font-size:13.5px;color:var(--mute);margin:0 0 8px;font-style:italic}
.tnote .q b{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--text);background:var(--panel2);padding:2px 6px;border-radius:6px;margin-right:6px}
.tnote .m{margin:0 0 8px;color:var(--text);font-weight:600;font-size:15px;line-height:1.4}
.tnote ul{margin:0 0 8px;padding-left:18px;font-size:14px}
.tnote .ask{font-size:13.5px;margin:0;color:var(--text2)}
.tnote .ask b{color:var(--link)}
.cat{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.reply{white-space:pre-wrap;font-size:14.5px;line-height:1.55;padding:14px;border-radius:var(--r-sm);background:var(--bg);box-shadow:inset 0 0 0 1px var(--hair);color:var(--text)}
.examples{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.examples button{border:0;background:var(--panel2);color:var(--text2);font:inherit;font-size:12.5px;padding:6px 10px;border-radius:999px;cursor:pointer}
.examples button:hover{color:var(--text);background:var(--y-soft)}
.mode{font-size:12px;color:var(--mute)}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(0,0,0,.2);border-top-color:#111;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* content below tool */
.content{max-width:760px}
.faq details{border-bottom:1px solid var(--hair)}.faq summary{cursor:pointer;padding:14px 0;font-weight:600;color:var(--text)}.faq p{margin:0 0 14px}
.related{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;list-style:none;padding:0}
.related a{display:block;padding:14px;border-radius:var(--r-sm);background:var(--panel);box-shadow:inset 0 0 0 1px var(--hair);color:var(--text);text-decoration:none;font-weight:600;font-size:14.5px}
.related a span{display:block;font-weight:400;font-size:13px;color:var(--mute);margin-top:2px}
.related a:hover{box-shadow:inset 0 0 0 1px var(--y)}

/* gate dialog */
dialog.gate{border:0;padding:0;border-radius:18px;background:var(--panel);color:var(--text);width:min(440px,calc(100vw - 32px));box-shadow:0 30px 80px rgba(0,0,0,.35)}
dialog.gate::backdrop{background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.gate form{padding:24px;display:flex;flex-direction:column;gap:12px}
.gate h2{margin:0;font-size:20px}
.gate p{margin:0;font-size:14.5px}
.gate input[type=email]{height:44px;padding:0 14px;border-radius:var(--r-sm);border:1px solid var(--hair2);background:var(--bg);color:var(--text);font:inherit}
.gate .consent{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.45;color:var(--mute)}
.gate .consent input{margin-top:2px;accent-color:#FFC400}
.gate .acts{display:flex;gap:8px;justify-content:flex-end;margin-top:4px}
.gate .err{color:var(--bad);font-size:13px;min-height:1em}

/* toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);opacity:0;background:#111;color:#fff;padding:10px 16px;border-radius:12px;font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.3);transition:.2s;pointer-events:none;z-index:50;max-width:calc(100vw - 32px)}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

footer{max-width:1080px;margin:0 auto;padding:24px max(16px,env(safe-area-inset-left)) 48px;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--mute)}
footer a{color:var(--mute);text-decoration:none}footer a:hover{color:var(--text)}
footer .grow{flex:1;min-width:220px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
[hidden]{display:none!important}
.mailbtn{border:0;background:none;padding:0;font:inherit;color:var(--link);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
textarea.input.drop{border-color:var(--y);background:var(--y-soft)}
.content table{width:100%;border-collapse:collapse;margin:12px 0;font-size:15px}
.content th,.content td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--hair);vertical-align:top}
.content th{color:var(--mute);font-weight:600;font-size:13px}
.content td:first-child{color:var(--text);font-weight:600;white-space:nowrap}
@media (max-width:560px){.content td:first-child{white-space:normal}}

/* ------------------------------------------------------------------ Live Notes */
.live{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:900px){.live{grid-template-columns:1fr}}
.live .panel{padding:18px}
.sessbar{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.sessbar input{flex:1;min-width:0;height:38px;border:1px solid transparent;background:transparent;color:var(--text);font:600 17px/1 inherit;font-family:inherit;padding:0 8px;border-radius:9px;letter-spacing:-.01em}
.sessbar input:hover{border-color:var(--hair)}.sessbar input:focus{border-color:var(--y);outline:0;background:var(--bg)}
.chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:999px;border:0;background:var(--panel2);color:var(--text2);font:600 12.5px/1 inherit;font-family:inherit;cursor:pointer;white-space:nowrap}
.chip:hover{color:var(--text)}
.clockrow{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 16px;border-radius:16px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--hair)}
.clock{font:700 clamp(38px,7.2vw,64px)/1 var(--mono);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--text)}
.status{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--mute);margin-top:6px;min-height:20px}
.rec-dot{width:9px;height:9px;border-radius:50%;background:#e2453c;box-shadow:0 0 0 4px rgba(226,69,60,.18);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
.gobtn{min-width:132px;min-height:56px;border:0;border-radius:16px;background:var(--y);color:#111;font:700 18px/1 inherit;font-family:inherit;cursor:pointer;transition:transform .1s ease-out,filter .15s;letter-spacing:-.01em}
.gobtn:active{transform:scale(.96)}
.gobtn.stop{background:#e2453c;color:#fff}
.meter{position:relative;height:6px;border-radius:6px;background:var(--panel2);overflow:hidden;margin-top:10px}
.meter i{position:absolute;inset:0;background:linear-gradient(90deg,#3fb43f 0 70%,#e8c02b 70% 90%,#e2453c 90%);transform-origin:left;transform:scaleX(0);transition:transform 60ms linear}
.meter.hot{box-shadow:0 0 0 1px #e2453c}
.strip{position:relative;height:18px;margin-top:12px;border-radius:6px;background:var(--panel2)}
.strip i{position:absolute;top:3px;bottom:3px;width:3px;margin-left:-1.5px;border-radius:2px}
.pads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:14px}
@media (max-width:560px){.pads{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pad{position:relative;min-height:72px;padding:12px;border-radius:14px;border:1px solid color-mix(in srgb,var(--pc) 45%,transparent);background:color-mix(in srgb,var(--pc) 15%,var(--panel));color:var(--text);font:600 14.5px/1.25 inherit;font-family:inherit;text-align:left;cursor:pointer;display:flex;align-items:flex-end;touch-action:manipulation;-webkit-user-select:none;user-select:none;transition:transform .1s ease-out,background .12s}
.pad::before{content:"";position:absolute;top:12px;left:12px;width:10px;height:10px;border-radius:50%;background:var(--pc)}
.pad kbd{position:absolute;top:9px;right:9px;font-size:11px;padding:1px 6px;background:color-mix(in srgb,var(--pc) 18%,var(--panel));color:var(--mute)}
.pad:active,.pad.hit{transform:scale(.96);background:color-mix(in srgb,var(--pc) 38%,var(--panel))}
.composer{display:flex;gap:8px;margin-top:12px}
.composer input{flex:1;min-width:0;height:48px;padding:0 14px;border-radius:12px;border:1px solid var(--hair2);background:var(--bg);color:var(--text);font:inherit;font-size:15.5px}
.composer input:focus{border-color:var(--y);outline:0}
.logwrap .panel-h{margin-bottom:8px}
.log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:560px;overflow:auto}
.log-empty{padding:28px 12px;text-align:center;color:var(--mute);font-size:14px;border:1px dashed var(--hair2);border-radius:12px}
.entry{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 8px 8px 10px;border-radius:12px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--hair)}
.entry.new{animation:flash 1.2s ease-out}
@keyframes flash{from{background:color-mix(in srgb,var(--pc) 26%,var(--bg))}}
.etc{font:600 12.5px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--text2)}
.echip{border:0;border-radius:999px;padding:5px 9px;background:color-mix(in srgb,var(--pc) 20%,var(--panel));color:var(--text);font:600 12px/1 inherit;font-family:inherit;cursor:pointer;white-space:nowrap;max-width:130px;overflow:hidden;text-overflow:ellipsis}
.etext{min-width:0;width:100%;border:1px solid transparent;background:transparent;color:var(--text);font:inherit;font-size:14px;padding:6px;border-radius:8px}
.etext:hover{border-color:var(--hair)}.etext:focus{border-color:var(--y);outline:0;background:var(--panel)}
.eact{display:flex;gap:2px;opacity:.55}.entry:hover .eact,.entry:focus-within .eact{opacity:1}
.eact button{border:0;background:transparent;color:var(--mute);font:600 11.5px/1 inherit;font-family:inherit;height:28px;min-width:28px;border-radius:7px;cursor:pointer}
.eact button:hover{background:var(--panel2);color:var(--text)}.eact .edel:hover{color:var(--bad)}
@media (max-width:560px){.entry{grid-template-columns:auto minmax(0,1fr) auto}.entry .etext{grid-column:1/-1;grid-row:2}.eact{opacity:1}}
.notice{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:12px;background:var(--y-soft);font-size:14px;margin-bottom:12px}
.undo{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;align-items:center;gap:12px;background:#111;color:#fff;padding:8px 8px 8px 16px;border-radius:12px;font-size:14px;z-index:40;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.undo button{border:0;background:var(--y);color:#111;font:700 13px/1 inherit;font-family:inherit;padding:9px 12px;border-radius:9px;cursor:pointer}
/* settings sheet */
dialog.sheet{border:0;padding:0;background:var(--panel);color:var(--text);width:min(560px,100vw);max-height:min(88vh,860px);border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
dialog.sheet::backdrop{background:rgba(0,0,0,.4);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
dialog.sheet[open]{animation:sheetin .32s cubic-bezier(.2,.9,.25,1)}
@keyframes sheetin{from{transform:translateY(24px);opacity:0}}
@media (max-width:620px){dialog.sheet{margin:auto 0 0;width:100vw;max-width:100vw;border-radius:20px 20px 0 0;max-height:92vh;padding-bottom:env(safe-area-inset-bottom,0px)}@keyframes sheetin{from{transform:translateY(100%)}}}
.sheet-h{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:color-mix(in srgb,var(--panel) 86%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--hair)}
.sheet-h h2{margin:0;font-size:17px}
.sheet-b{padding:6px 18px 22px;display:flex;flex-direction:column;gap:18px}
.sgroup h3{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin:12px 0 8px}
.sgroup p{margin:6px 0 0;font-size:13px;color:var(--mute)}
.srow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--hair)}
.srow:last-child{border-bottom:0}
.srow label{font-size:14.5px;color:var(--text)}
.toggle{appearance:none;-webkit-appearance:none;width:44px;height:26px;border-radius:999px;background:var(--hair2);position:relative;cursor:pointer;transition:background .2s;flex:none;margin:0}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .25s cubic-bezier(.2,.9,.25,1)}
.toggle:checked{background:#34c759}.toggle:checked::after{transform:translateX(18px)}
.padedit{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.padedit li{display:grid;grid-template-columns:14px 104px minmax(0,1fr) 44px 32px;gap:6px;align-items:center}
.padedit .sw{width:14px;height:14px;border-radius:50%}
.padedit select,.padedit .txt{height:34px;font-size:13.5px}
.padedit .key{text-align:center;font-family:var(--mono)}
input[type=range]{accent-color:#FFC400;width:100%}
body.is-live .top{border-bottom-color:rgba(226,69,60,.35)}

/* ------------------------------------------------------------------ Safe Zones */
.sz{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,420px);gap:20px;align-items:start}
@media (max-width:900px){.sz{grid-template-columns:1fr}}
.szstage{position:relative;display:grid;place-items:center;padding:16px;border-radius:var(--r);background:var(--panel2);box-shadow:inset 0 0 0 1px var(--hair)}
.szstage canvas{width:auto;height:min(72vh,760px);max-width:100%;aspect-ratio:9/16;border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.25);background:#000;object-fit:contain}
@media (max-width:560px){.szstage canvas{height:auto;width:100%}}
.szdrop{border:2px dashed var(--hair2);border-radius:var(--r-sm);padding:18px;text-align:center;font-size:14px;color:var(--mute)}
.szdrop.drop{border-color:var(--y);background:var(--y-soft)}
.szdrop b{color:var(--text)}
.szside{display:flex;flex-direction:column;gap:14px}
.szplat{display:flex;flex-wrap:wrap;gap:6px}
.szplat button{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--hair2);background:var(--panel);color:var(--text2);font:600 14px/1 inherit;font-family:inherit;cursor:pointer}
.szplat button i{width:10px;height:10px;border-radius:50%}
.szplat button[aria-pressed=true]{background:var(--text);color:var(--bg);border-color:var(--text)}
.sztable{width:100%;border-collapse:collapse;font-size:13.5px}
.sztable th,.sztable td{text-align:left;padding:7px 6px;border-bottom:1px solid var(--hair);font-variant-numeric:tabular-nums}
.sztable th{color:var(--mute);font-weight:600;font-size:12px}
.notice-s{font-size:13px;color:var(--mute);margin:0}

/* ------------------------------------------------------------------ Rate calculator */
.rc{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:20px;align-items:start}
@media (max-width:900px){.rc{grid-template-columns:1fr}}
.rc-sec{padding:16px 0;border-top:1px solid var(--hair)}
.rc-sec:first-child{border-top:0;padding-top:0}
.rc-sec h3{margin:0 0 10px;font-size:15px}
.rc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.rc-row{display:grid;grid-template-columns:minmax(0,1fr) 110px 80px 32px;gap:8px;margin-top:8px;align-items:center}
.rc-row.two{grid-template-columns:minmax(0,1fr) 110px 32px}
.rcout{position:sticky;top:76px}
.rcbig{font-size:clamp(34px,5vw,46px);font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.rclines{width:100%;border-collapse:collapse;font-size:13.5px;margin:12px 0}
.rclines td{padding:6px 0;border-bottom:1px solid var(--hair);vertical-align:top}
.rclines td:last-child{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;padding-left:10px}
.rclines tr.sec td{font-weight:700;color:var(--text);padding-top:12px}
.rclines tr:not(.sec) td{color:var(--text2);padding-left:10px}
.qform{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.qform .full{grid-column:1/-1}
#quote{display:none}
@media print{
  body.printing-quote > *{display:none!important}
  body.printing-quote #quote{display:block!important;position:static;color:#111;background:#fff;font:14px/1.5 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;padding:0}
  body.printing-quote main{display:block!important;padding:0;max-width:none}
  body.printing-quote main > *{display:none!important}
  body.printing-quote main > .rcquotewrap{display:block!important}
  .qhead{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:3px solid #FFC400;padding-bottom:16px;margin-bottom:20px}
  .qstudio{font-size:24px;font-weight:800}
  .qfor{text-align:right}
  .qtable{width:100%;border-collapse:collapse}.qtable td{padding:8px 0;border-bottom:1px solid #ddd}.qtable td:last-child{text-align:right}
  .qsum td{border-top:2px solid #111;font-weight:600}.qtotal td{font-size:18px;font-weight:800;border-bottom:0}
  .qterms{margin-top:22px;font-size:12.5px}.qfoot{margin-top:28px;font-size:11px;color:#777}
}

/* ------------------------------------------------------------------ Motion presets */
.mped{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,420px);gap:20px;align-items:start;margin-bottom:28px}
@media (max-width:900px){.mped{grid-template-columns:1fr}}
.mpstage{position:relative;border-radius:var(--r);overflow:hidden;background:#111;aspect-ratio:9/16;max-height:72vh;margin:0 auto;width:100%;max-width:calc(72vh * 9 / 16);box-shadow:0 12px 40px rgba(0,0,0,.25)}
.mpstage.wide{aspect-ratio:16/9;max-width:100%;max-height:none}
.mpstage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mpbar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.12)}
.mpbar i{display:block;height:100%;background:var(--y);transform-origin:left;transform:scaleX(0)}
.mpform{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mpform .full,.mpform .chk{grid-column:1/-1}
.mpform textarea.txt{height:auto;padding:8px 10px;font:inherit;font-size:14px;resize:vertical;border-radius:var(--r-sm);border:1px solid var(--hair2);background:var(--bg);color:var(--text)}
.mpform input[type=color]{width:100%;height:38px;padding:2px;border:1px solid var(--hair2);border-radius:var(--r-sm);background:var(--bg)}
.rng{display:flex;align-items:center;gap:8px}.rng output{font-size:12.5px;color:var(--mute);min-width:36px;text-align:right;font-variant-numeric:tabular-nums}
.mpgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.mpcard{display:flex;flex-direction:column;border:0;padding:0;border-radius:var(--r-sm);overflow:hidden;background:var(--panel);box-shadow:inset 0 0 0 1px var(--hair);cursor:pointer;text-align:left;color:var(--text);font:inherit;transition:transform .12s,box-shadow .15s}
.mpcard:hover{box-shadow:inset 0 0 0 1px var(--y)}.mpcard:active{transform:scale(.98)}
.mpcard.on{box-shadow:inset 0 0 0 2px var(--y)}
.mpthumb{aspect-ratio:9/12;background:#2a2c33;display:grid;place-items:center;overflow:hidden}
.mpthumb img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.mpthumb.wide img{object-fit:contain}
.mpmeta{display:flex;flex-direction:column;gap:1px;padding:8px 10px 10px}
.mpmeta b{font-size:13.5px}.mpmeta span{font-size:12px;color:var(--mute)}
.mpprog{margin-top:10px}.mpprog .progress{height:6px;border-radius:6px;background:var(--panel2);overflow:hidden}
.mpprog .progress i{display:block;height:100%;background:var(--y);transform-origin:left;transform:scaleX(0);transition:transform .15s}
.x{width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:var(--mute);font-size:20px;line-height:1;cursor:pointer}
.x:hover{color:var(--bad);background:var(--panel2)}
.rc-head{display:grid;grid-template-columns:minmax(0,1fr) 110px 80px 32px;gap:8px;margin-top:12px;font-size:12px;font-weight:600;color:var(--mute)}

/* Hum to Track */
main.wide{max-width:1240px}
.grow{flex:1}
.mu{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:18px;align-items:start;margin-top:8px}
@media (max-width:980px){.mu{grid-template-columns:1fr}}
.mucol{display:flex;flex-direction:column;gap:14px;min-width:0}
.muopt{font-size:11.5px;font-weight:600;color:var(--mute);background:var(--panel2);padding:2px 8px;border-radius:999px;margin-left:6px;vertical-align:1px}
.muslot{border-radius:12px;background:var(--panel2);padding:12px;margin-bottom:10px;transition:box-shadow .2s}
.muslot.rec{box-shadow:inset 0 0 0 2px #ff3b30}
.muslot.has{box-shadow:inset 0 0 0 1px var(--y)}
.muslot-h{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px;font-size:14px}
.muslot-h b{font-size:14px}
.muinfo{font-size:13px;color:var(--mute)}.muinfo b{color:var(--text)}
.mupreview{display:block;width:100%;height:56px;margin:4px 0 6px}
.muslot:not(.has):not(.rec) .mupreview{display:none}
.muslot:not(.has) .playtake,.muslot:not(.has) .cleartake{display:none}
.mumeter{height:4px;border-radius:2px;background:var(--hair);overflow:hidden;margin-bottom:10px;display:none}
.muslot.rec .mumeter{display:block}
.mumeter i{display:block;height:100%;background:#34c759;transform-origin:left;transform:scaleX(0);transition:transform .06s linear}
.recbtn .rdot{width:10px;height:10px;border-radius:50%;background:#c0392b;display:inline-block}
.recbtn[aria-pressed=true]{background:#ff3b30;color:#fff}
.recbtn[aria-pressed=true] .rdot{background:#fff;border-radius:2px;animation:mublink 1s steps(2) infinite}
@keyframes mublink{50%{opacity:.35}}
.mutime{font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums}
.muslot .row-actions label.btn{cursor:pointer}
.muvibes{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));width:100%;gap:3px}
.muvibes button{white-space:nowrap;padding:9px 8px}
.mugrid2{display:grid;grid-template-columns:1.3fr 1fr .8fr;gap:10px;margin-top:14px}
@media (max-width:460px){.mugrid2{grid-template-columns:1fr 1fr}.mugrid2 .field:first-child{grid-column:1/-1}}
.mulayers{display:flex;flex-wrap:wrap;gap:6px}
.chip.tog[aria-pressed=true]{background:var(--y);color:#111}
.chip.tog[aria-pressed=false]{text-decoration:line-through;opacity:.7}
.tline{position:relative;height:64px;margin:16px 6px 6px;touch-action:none;user-select:none;-webkit-user-select:none}
.tline .tbar{position:absolute;left:0;right:0;top:34px;height:8px;border-radius:4px;background:var(--panel2);box-shadow:inset 0 0 0 1px var(--hair)}
.tline .tk{position:absolute;top:48px;transform:translateX(-50%);font-size:11px;color:var(--mute);font-variant-numeric:tabular-nums}
.tline .tk:first-of-type{transform:none}.tline .tk:last-of-type{transform:translateX(-100%)}
.pin{position:absolute;top:0;transform:translateX(-50%);border:0;background:none;padding:0;cursor:grab;display:flex;flex-direction:column;align-items:center;min-width:44px;height:46px;touch-action:none}
.pin b{font-size:11px;font-weight:700;background:var(--c);color:#111;padding:3px 7px;border-radius:7px;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .12s}
.pin::after{content:"";width:2px;flex:1;background:var(--c)}
.pin.drag{cursor:grabbing}.pin.drag b,.pin:active b{transform:scale(1.08)}
.mumoments{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.murow{display:flex;align-items:center;gap:8px}
.murow i{width:10px;height:10px;border-radius:50%;flex:none}
.murow select{flex:1}.murow .mtime{width:86px;font-variant-numeric:tabular-nums}
.muadd{margin-top:12px}.muadd .lbl{margin-right:2px}
.mumake{width:100%}
.mumake.pulse{animation:mupulse 1.6s ease-in-out 2}
@keyframes mupulse{50%{box-shadow:0 0 0 6px var(--y-soft)}}
.muout{position:sticky;top:76px}
@media (max-width:980px){.muout{position:static}}
.muempty{text-align:left}
.muempty .muicon svg{width:34px;height:34px;color:var(--y)}
.muempty h2{margin:8px 0 6px;font-size:20px;letter-spacing:-.02em}
.muempty p{margin:0 0 10px;color:var(--text2)}
.muempty ul{margin:0;padding-left:18px;color:var(--mute);font-size:14px}
.mucards{display:flex;flex-direction:column;gap:12px}
.mucard{background:var(--panel);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--hair);padding:16px;transition:box-shadow .2s}
.mucard.on{box-shadow:inset 0 0 0 2px var(--y)}
.muhead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.muhead h3{margin:0;font-size:17px;letter-spacing:-.02em}
.mudesc{font-size:13px;color:var(--text2)}
.mumeta{margin:2px 0 10px;font-size:12.5px;color:var(--mute);font-variant-numeric:tabular-nums}
.muwave{position:relative;height:84px;border-radius:10px;overflow:hidden;background:var(--panel2);cursor:pointer;touch-action:none}
.muwave canvas{position:absolute;inset:0;width:100%;height:100%}
.muhead-line{position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--y);box-shadow:0 0 0 1px rgba(0,0,0,.15);will-change:transform}
.mubusy{position:absolute;inset:0;display:none;align-items:center;justify-content:center;gap:8px;font-size:13px;color:var(--mute)}
.mucard.busy .mubusy{display:flex}.mucard.busy .muhead-line{display:none}
.muctl{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.muplay{min-width:96px}
.mupos{font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums}
.muagain{margin-left:auto}
.mudl{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--hair)}
.muai{margin-left:auto}
.muaiout{margin-top:10px}
.muwait{background:var(--panel2);border-radius:12px;padding:12px}
.muwait p{margin:4px 0 10px;font-size:14px;color:var(--text2)}
.signup.light input[type=email]{background:var(--panel);color:var(--text);border-color:var(--hair2)}
.signup.light .consent{color:var(--mute)}
.muairow{display:flex;gap:8px;align-items:center;margin-bottom:6px}.muairow audio{flex:1;min-width:0;height:36px}
@media (prefers-reduced-motion:reduce){.mumake.pulse,.recbtn[aria-pressed=true] .rdot{animation:none}}
.mubusy .spin,.muaiout .spin{border-color:var(--hair2);border-top-color:var(--y);display:inline-block;vertical-align:-3px}
.muslot label.btn{font-size:14px;font-weight:600;line-height:1}
.muslot-h .mutime{margin-left:auto}
.muslot.rec .muinfo{display:none}
.muslot.has .muref-hint{display:none}