/* captify. Ink, grey, and one amber.
   The amber is the highlight a caption puts on the word being spoken, and it is
   the only colour on the site — everything else is the same near-black and the
   same three greys. A tool for making other people's video look good should not
   be shouting over the top of it. */

:root{
  --bg:#0e0f12; --panel:#16181d; --panel2:#1c1f25;
  --ink:#f2f3f5; --mid:#9aa0a9; --faint:#6b717a;
  --line:#262a31; --line2:#1e2128;
  --ac:#ffc93d; --acs:#ffd968; --acw:#2a2313; --acd:#8a6d1c;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
/* a class rule beats the browser's own [hidden] rule on specificity, so any
   element given display by a class stays visible while hidden. This is the
   whole bug, and it is invisible until something appears that should not. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:var(--mono);font-size:13.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  background:radial-gradient(1100px 420px at 50% -80px,rgba(255,201,61,.10),transparent 70%),
             var(--bg);background-attachment:fixed}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(900px 600px at 50% 0,#000,transparent 78%);
  mask-image:radial-gradient(900px 600px at 50% 0,#000,transparent 78%)}
body > *{position:relative;z-index:1}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--sans);font-weight:600;letter-spacing:-.03em;line-height:1.08}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--acw)}
.sp{flex:1}
.wrap{max-width:1220px;margin:0 auto;padding:0 clamp(16px,4vw,30px)}
.lab{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}

/* ----------------------------------------------------------------- header */
.appbar{position:sticky;top:0;z-index:60;display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:16px;padding:0 clamp(14px,3vw,24px);height:56px;
  background:rgba(14,15,18,.88);backdrop-filter:saturate(1.7) blur(14px);
  border-bottom:1px solid var(--line)}
.appbar .side.right{display:flex;align-items:center;gap:16px;justify-self:end}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.glyph{margin:0;font-family:var(--mono);font-size:3.6px;line-height:1.02;color:var(--ac);
  font-weight:700;white-space:pre}
.wm{font-family:var(--sans);font-weight:600;font-size:17px;letter-spacing:-.04em}
.tabs{display:flex;gap:2px;justify-self:center}
.tabs a{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mid);
  text-decoration:none;padding:7px 9px;border-radius:4px;white-space:nowrap}
.tabs a:hover{color:var(--ac);background:var(--acw)}
.tlink{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mid);
  text-decoration:none}
.tlink:hover{color:var(--ac)}
.ca{display:flex;align-items:center;gap:7px;min-width:0;color:var(--mid);
  text-decoration:none;border:1px solid var(--line);border-radius:5px;padding:5px 8px;
  transition:border-color .15s,color .15s}
.ca span{color:var(--ac);font-size:9px;font-weight:700;letter-spacing:.12em}
.ca code{max-width:112px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:10px;color:var(--faint)}
.ca:hover{border-color:var(--ac);color:var(--ink)}
.ca:hover code{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--ac);background:var(--ac);color:#151109;border-radius:6px;
  padding:9px 15px;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap;
  font-family:var(--sans);letter-spacing:-.01em;text-decoration:none;transition:opacity .15s}
.btn:hover{opacity:.88}
.btn:disabled{opacity:.4;cursor:default}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line);font-weight:600}
.btn.ghost:hover{border-color:var(--ac);color:var(--ac);opacity:1}
.btn.sm{padding:6px 11px;font-size:11.5px}
.btn.big{font-size:15.5px;padding:14px 26px;border-radius:8px}
.btn:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--acs);outline-offset:2px}
.link{background:0;border:0;padding:0;color:var(--ac);cursor:pointer;text-decoration:underline;
  text-underline-offset:2px;font:inherit}
@media (max-width:900px){
  .tabs{display:none}
  .appbar{grid-template-columns:1fr auto;height:52px}
  .glyph{font-size:2.9px}
  .ca code{max-width:92px}
}
@media (max-width:520px){.ca code{display:none}.ca{padding:5px 7px}}

/* ------------------------------------------------------------------- band */
/* Two <pre> on one origin: the waveform, and the part of it the playhead has
   reached plus the caption crawling underneath. They only line up because every
   row of both is padded to the same width and both are left-aligned from the
   same corner. */
.band{position:relative;overflow:hidden;background:#0b0c0e;
  border-bottom:1px solid var(--line);height:clamp(180px,18vw,230px)}
.canvas{position:absolute;inset:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.canvas pre{margin:0;position:absolute;left:50%;bottom:24px;transform:translateX(-50%);
  font-family:var(--mono);white-space:pre;text-align:left;line-height:1.05;
  font-size:9px;font-weight:700;pointer-events:none}
#wave{color:#31353d}
#lit{color:var(--ac)}
@media (min-width:1220px){.canvas pre{font-size:10px}}
@media (max-width:900px){.canvas pre{font-size:7px}}
@media (max-width:520px){.canvas pre{font-size:5.4px}}

/* ------------------------------------------------------------------ intro */
.intro{text-align:center;padding:clamp(48px,7vw,92px) 0 clamp(34px,5vw,60px);
  background:linear-gradient(#141519,var(--bg))}
.intro h1{margin:0 auto}
.hero-title{display:grid;gap:.06em;max-width:1180px;font-size:clamp(36px,7vw,88px);
  letter-spacing:-.075em;line-height:1;text-wrap:balance}
.hero-line{display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;
  column-gap:.22em;height:1em;min-height:1em;white-space:nowrap}
.hero-word{display:inline-flex;align-items:center;height:1em;line-height:1;
  color:var(--ink);font-family:var(--sans);font-weight:700;white-space:nowrap;
  transition:color .45s ease,background-color .45s ease,border-color .45s ease,
    font-size .45s ease,font-weight .45s ease,letter-spacing .45s ease,
    text-shadow .45s ease,transform .45s ease,opacity .45s ease;
  will-change:transform}
.hero-word[data-mode=clean]{font-family:var(--sans);font-weight:700}
.hero-word[data-mode=pop]{font-family:var(--sans);font-weight:900;letter-spacing:-.09em}
.hero-word[data-mode=marker]{position:relative;font-family:var(--sans);font-weight:800;
  letter-spacing:-.065em;z-index:0}
.hero-word[data-mode=marker]::after{content:"";position:absolute;z-index:-1;
  left:-.08em;right:-.08em;bottom:.04em;height:.18em;border-radius:.12em;
  background:var(--ac);opacity:.55;transform:rotate(-1deg)}
.hero-word[data-mode=terminal]{font-family:var(--mono);font-size:.76em;font-weight:700;
  letter-spacing:.025em;text-transform:uppercase;border-bottom:.055em solid var(--acd);
  padding-bottom:.06em}
.hero-word[data-mode=type]{font-family:Georgia,"Times New Roman",serif;font-style:italic;
  font-weight:700;letter-spacing:-.065em}
.hero-word[data-mode=block]{font-family:var(--sans);font-weight:850;
  background:var(--ink);color:var(--bg);padding:.015em .1em .04em;border-radius:.035em;
  letter-spacing:-.08em}
.hero-word[data-mode=outline]{font-family:var(--sans);font-weight:800;color:transparent;
  -webkit-text-stroke:max(1px,.018em) var(--ink);text-shadow:0 0 0 transparent}
.hero-word[data-mode=accent]{color:var(--ac);font-weight:800}
.hero-word.is-active{color:var(--ac);transform:translateY(-.025em)}
.hero-word[data-mode=marker].is-active::after{opacity:1}
.hero-word[data-mode=block].is-active{background:var(--ac);color:#17130a}
.hero-word[data-mode=outline].is-active{-webkit-text-stroke-color:var(--ac)}
.lede{margin:16px auto 0;font-size:clamp(13px,1.15vw,15px);color:var(--mid);line-height:1.7;
  max-width:60ch}
.lede b{color:var(--ink);font-weight:600}
.cta{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.rules3{margin:24px auto 0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.rules3 span{border:1px solid var(--line);background:var(--panel);border-radius:999px;
  padding:6px 14px;font-size:11.5px;color:var(--mid)}
.rules3 b{color:var(--ink);font-weight:600}

/* --------------------------------------------------------------- sections */
.sec{border-top:1px solid var(--line);padding:clamp(34px,4vw,54px) 0}
.head{margin-bottom:22px;text-align:center}
.head .n{font-size:10.5px;color:var(--ac);letter-spacing:.16em;margin-right:11px;
  vertical-align:2px}
.head h2{display:inline;font-size:clamp(20px,2.5vw,28px)}
.head .sub{display:block;max-width:70ch;margin:10px auto 0;font-size:12.5px;color:var(--faint);
  line-height:1.72}
.note{font-size:12.7px;color:var(--mid);line-height:1.8;max-width:78ch;text-align:center;
  margin:0 auto 14px;padding-top:14px;border-top:1px solid var(--line2)}
.note:first-of-type{border-top:0;padding-top:0}
.note b{color:var(--ink)}

/* ------------------------------------------------------------------- drop */
.drop{border:1px dashed #3a3f48;border-radius:16px;background:
  radial-gradient(480px 180px at 50% 12%,rgba(255,201,61,.08),transparent 70%),
  linear-gradient(145deg,#1b1e24,#14161a);padding:clamp(44px,7vw,76px) 24px;
  min-height:320px;display:grid;place-items:center;text-align:center;cursor:pointer;
  transition:border-color .15s,background .15s,transform .15s,box-shadow .15s}
.drop:hover,.drop.over{border-color:var(--ac);background:#191b21}
.drop:hover{transform:translateY(-2px);box-shadow:0 14px 35px rgba(0,0,0,.2)}
.dropart{margin:0 0 20px;font-family:var(--mono);font-size:clamp(12px,1.2vw,15px);line-height:1.05;
  color:var(--acd);font-weight:700;white-space:pre;display:inline-block;text-align:left}
.dropin b{display:block;font-family:var(--sans);font-size:20px;letter-spacing:-.025em}
.dropin span{display:block;margin-top:8px;font-size:13px;color:var(--mid)}
.dropin span::after{content:"  ·  MP4, MOV, WebM";color:var(--faint)}

/* ----------------------------------------------------------------- studio */
.studio{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:12px;align-items:start}
.stage{min-width:0}
.screen{position:relative;background:#000;border:1px solid var(--line);border-radius:12px;
  overflow:hidden;display:flex;align-items:center;justify-content:center;
  min-height:260px;max-height:62vh}
.screen video{display:none}
.screen canvas{max-width:100%;max-height:62vh;display:block}
.transport{display:flex;align-items:center;gap:10px;margin-top:10px}
.transport input[type=range]{flex:1}
.time{font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.editbar{margin-top:16px;border:1px solid var(--line);border-radius:10px;
  background:linear-gradient(180deg,#191b20,#15171b);padding:13px 14px}
.editbar-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.editbar-head div{display:flex;align-items:baseline;gap:9px}
.editbar-head strong{font-family:var(--sans);font-size:13px}
.trim-readout{font-size:11px;color:var(--ac);font-variant-numeric:tabular-nums;white-space:nowrap}
.trim-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.trim-sliders{display:grid;gap:3px;margin-top:7px}
.trim-sliders label{display:grid;grid-template-columns:22px 1fr;align-items:center;gap:7px;
  font-size:10px;color:var(--faint);text-transform:uppercase;letter-spacing:.12em}
.trim-sliders input{width:100%}
.trim-sliders input:disabled{opacity:.4}
.edit-hint{font-size:10.5px;color:var(--faint);margin-top:6px}
.status{margin-top:8px;font-size:12px;color:var(--faint);min-height:1.6em}
.status b{color:var(--ink)}
.status.bad{color:var(--acs)}
.acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.bar{position:relative;height:26px;margin-top:12px;border:1px solid var(--line);
  border-radius:6px;overflow:hidden;background:var(--panel)}
.bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--acw);
  border-right:1px solid var(--ac);transition:width .12s linear}
.bar span{position:relative;display:block;line-height:24px;padding:0 10px;font-size:11px;
  color:var(--mid)}
.done{display:block;margin-top:12px;border:1px solid var(--ac);border-radius:8px;
  background:var(--acw);padding:13px 16px;font-size:13px;text-decoration:none;color:var(--ink)}
.done b{color:var(--ac)}

.panel{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:16px;
  position:sticky;top:68px}
.looks{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.looks button{border:1px solid var(--line);background:var(--panel2);border-radius:7px;padding:0;
  cursor:pointer;overflow:hidden;display:block}
.looks button canvas{display:block;width:100%;height:auto}
.looks button.on{border-color:var(--ac)}
.looks button span{display:block;font-size:10px;color:var(--faint);padding:4px 6px;
  border-top:1px solid var(--line)}
.looks button.on span{color:var(--ac)}
.knobs{display:grid;gap:7px;margin-top:8px}
.knobs label{display:grid;grid-template-columns:56px 1fr;align-items:center;gap:8px;
  font-size:11px;color:var(--faint)}
input[type=range]{-webkit-appearance:none;appearance:none;height:18px;background:0;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:3px;background:var(--line);border-radius:2px}
input[type=range]::-moz-range-track{height:3px;background:var(--line);border-radius:2px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;
  border-radius:50%;background:var(--ac);margin-top:-5px}
input[type=range]::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;
  background:var(--ac)}
.swatches{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.swatches button{width:20px;height:20px;border-radius:50%;border:1px solid var(--line);
  cursor:pointer;padding:0}
.swatches button.on{outline:2px solid var(--ink);outline-offset:1px}
.check{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:11.5px;color:var(--mid)}
.check input{accent-color:var(--ac)}
.hint{float:right;text-transform:none;letter-spacing:0;color:var(--faint)}
textarea{width:100%;height:120px;margin-top:8px;background:var(--bg);border:1px solid var(--line);
  border-radius:8px;padding:10px;font-size:11.5px;line-height:1.7;resize:vertical;outline:0}
textarea:focus{border-color:var(--ac)}
#apply{margin-top:8px}
@media (max-width:980px){.studio{grid-template-columns:1fr}.panel{position:static}}
@media (max-width:520px){
  .hero-title{font-size:clamp(27px,8.4vw,44px);letter-spacing:-.08em}
  .hero-line{column-gap:.14em}
  .drop{min-height:270px;padding:38px 16px}
  .dropart{font-size:10px}
  .dropin b{font-size:18px}
  .editbar-head{display:block}
  .trim-readout{display:block;margin-top:4px}
}

/* ---------------------------------------------------------------- gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.gallery figure{margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:linear-gradient(145deg,#1c2027,#14161a);box-shadow:0 8px 24px rgba(0,0,0,.16);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;cursor:pointer}
.gallery figure:hover,.gallery figure:focus-visible{transform:translateY(-3px);border-color:#4b505a;
  box-shadow:0 14px 30px rgba(0,0,0,.28);outline:0}
.gallery figure:focus-visible{outline:2px solid var(--ac);outline-offset:3px}
.look-preview{position:relative;overflow:hidden;background:#20242b}
.look-preview::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.07),transparent 35%,transparent 70%,rgba(0,0,0,.2))}
.gallery canvas{display:block;width:100%;height:auto;aspect-ratio:16/9}
.live-badge{position:absolute;right:9px;top:9px;display:flex!important;align-items:center;gap:5px;
  margin:0!important;padding:4px 7px;border:1px solid rgba(255,255,255,.14);border-radius:999px;
  background:rgba(10,11,13,.68);backdrop-filter:blur(7px);color:#dce0e6!important;
  font-family:var(--sans);font-size:9px!important;letter-spacing:.08em;text-transform:uppercase}
.live-badge i{width:5px;height:5px;border-radius:50%;background:var(--ac);
  box-shadow:0 0 0 3px rgba(255,201,61,.13)}
.gallery figcaption{padding:11px 12px 12px;border-top:1px solid rgba(255,255,255,.07)}
.look-title{display:flex;align-items:center;justify-content:space-between;gap:8px}
.gallery b{font-family:var(--sans);font-size:13px;letter-spacing:-.02em}
.look-title small{font-size:9px;letter-spacing:.14em;color:var(--acd)}
.gallery figcaption > span{display:block;font-size:11px;color:var(--faint);margin-top:4px;line-height:1.5}

/* ------------------------------------------------------------------ cards */
.card{border:1px solid var(--line);border-radius:12px;
  background:linear-gradient(180deg,#1d2027,#16181d 60%)}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.step{padding:20px;text-align:center}
.step .sn{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--ac)}
.step h3{font-size:15px;margin-top:8px;letter-spacing:-.025em}
.step p{font-size:12.2px;color:var(--mid);margin:7px auto 0;line-height:1.72;max-width:34ch}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:12px;overflow:hidden}
.grid2 > div{background:linear-gradient(180deg,#1d2027,#16181d 60%);padding:22px;text-align:center}
.grid2 h3{font-size:14.5px;letter-spacing:-.025em}
.grid2 p{font-size:12.2px;color:var(--mid);margin:8px auto 0;line-height:1.75;max-width:46ch}
.grid2 b{color:var(--ink);font-weight:600}
.tiers{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:8px;overflow:hidden;margin-top:14px;text-align:left}
.tiers div{background:var(--panel);display:flex;gap:10px;padding:7px 11px;font-size:11.5px}
.tiers b{color:var(--ink);min-width:9ch}
.tiers span{color:var(--faint)}
@media (max-width:900px){.three{grid-template-columns:1fr}.grid2{grid-template-columns:1fr}}

footer{border-top:1px solid var(--line);padding:22px 0 40px;font-size:11.5px;color:var(--faint)}
footer .in{display:flex;flex-wrap:wrap;gap:13px;align-items:center;justify-content:center}
.wallet{display:flex;align-items:center;gap:8px}
.wallet input{background:var(--panel);border:1px solid var(--line);border-radius:6px;
  padding:6px 10px;font-size:11px;width:230px;outline:0}
.wallet input:focus{border-color:var(--ac)}
#tierNote{color:var(--ac)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}