/* Previzion's tokens, as the client and the board use them. Accent for the main action and
   the Viz mark; selection is the white fill. */
/* Layout: conventional product site. Fixed nav, centered 1200 container, hero + app window, alternating feature rows, CTA, 4-column footer. Download, Board, Sign in and Account are pages of their own. */
:root{
  --bg:#151719; --panel:#1f2226; --card:#222428; --raised:#24272c; --input:#292d32; --seq:#191c1f; --bar:#18191c;
  --fg:#f0f2f1; --fg2:rgba(240,242,241,0.66); --fg3:rgba(240,242,241,0.45); --line:rgba(240,242,241,0.12); --line2:rgba(240,242,241,0.08);
  --accent:#50ffb0; --on-accent:#03190f; --camera:#c9a24a; --object:#5a8de0; --person:#b06ad0; --marker:#8a93a8; --danger:#e05252;
  --sans:'Instrument Sans',system-ui,-apple-system,sans-serif; --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-0.025em;text-wrap:balance;line-height:1.1}
p{margin:0}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding-inline:24px}
.mono{font-family:var(--mono);font-size:12px}
.muted{color:var(--fg2)}.faint{color:var(--fg3)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border-radius:8px;font-weight:600;font-size:15px;white-space:nowrap;border:1px solid transparent}
.btn.primary{background:var(--accent);color:var(--on-accent)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.secondary{background:var(--input);border-color:var(--line)}
.btn.secondary:hover{background:var(--raised)}
.btn.link{height:auto;padding:0;color:var(--fg2);font-weight:500}
.btn.link:hover{color:var(--fg)}
.btn.sm{height:36px;padding:0 14px;font-size:14px}
.btn.lg{height:50px;padding:0 24px;font-size:16px}
.btn[disabled]{opacity:0.35;cursor:not-allowed}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(21,23,25,0.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line2)}
.nav .in{display:flex;align-items:center;gap:32px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;letter-spacing:-0.01em}
.dia{width:10px;height:10px;background:var(--accent);transform:rotate(45deg);display:inline-block;flex:0 0 auto}
.nav nav{display:flex;gap:4px}
.nav nav a{padding:8px 12px;border-radius:6px;color:var(--fg2);font-size:15px;font-weight:500}
.nav nav a:hover,.nav nav a.on{color:var(--fg);background:rgba(240,242,241,0.06)}
.nav .right{margin-left:auto;display:flex;align-items:center;gap:10px}
.viz{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 12px 0 10px;border-radius:8px;background:var(--input);border:1px solid var(--line);font-weight:600;font-size:14px;font-variant-numeric:tabular-nums}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--object);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex:0 0 auto}
.menu-wrap{position:relative}
.menu-wrap summary{list-style:none;cursor:pointer;display:flex}
.menu-wrap summary::-webkit-details-marker{display:none}
.menu{position:absolute;right:0;top:44px;width:260px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,0.5);z-index:30}
.menu .who{display:flex;align-items:center;gap:10px;padding:10px 10px 12px;border-bottom:1px solid var(--line2);margin-bottom:6px}
.menu .who div{display:flex;flex-direction:column;min-width:0}
.menu .who small{color:var(--fg3);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu form{display:contents}
.menu button,.menu a{display:flex;align-items:center;justify-content:space-between;gap:10px;height:38px;padding:0 10px;border-radius:6px;font-size:14px;width:100%}
.menu button:hover,.menu a:hover{background:var(--raised)}
.burger{display:none;width:40px;height:40px;align-items:center;justify-content:center;border-radius:8px;border:1px solid var(--line)}
@media (max-width:1000px){.nav nav{display:none}.nav .in{gap:16px}.burger{display:inline-flex}.nav .right .btn.primary{display:none}}
.mobnav{display:none;flex-direction:column;border-top:1px solid var(--line2);padding:8px 0 12px}
.mobnav.on{display:flex}
.mobnav a{padding:12px 8px;font-size:16px;font-weight:500;color:var(--fg2)}

/* hero */
.hero{padding-block:88px 40px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.hero .eyebrow{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--input);font-size:13px;color:var(--fg2)}
.hero h1{font-size:clamp(38px,5.6vw,68px);max-width:16ch}
.hero p{font-size:19px;color:var(--fg2);max-width:56ch}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.hero .note{font-size:13px;color:var(--fg3)}
.hero .note a{color:var(--fg2);border-bottom:1px solid var(--line)}
.window{margin-top:16px;width:100%;background:#1c1e21;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,0.55)}
.window .bar{height:40px;background:var(--bar);border-bottom:1px solid var(--line2);display:flex;align-items:center;gap:8px;padding:0 14px;font-size:12px;color:var(--fg3)}
.window .bar i{width:10px;height:10px;border-radius:50%;background:#3a3d42;display:inline-block}
.window .bar span{margin-left:8px}
.window .scr{display:grid;grid-template-columns:200px minmax(0,1fr) 300px;aspect-ratio:16/9;background:var(--seq);max-width:100%}
.window .scr video{grid-column:2;width:100%;height:100%;object-fit:cover}
.pane{background:var(--panel);padding:14px 12px;font-size:12px;display:flex;flex-direction:column;gap:6px;text-align:left}
.pane .t{color:var(--fg3);font-weight:600;margin-bottom:4px}
.pane .row{display:flex;align-items:center;gap:8px;height:28px;padding:0 8px;border-radius:6px}
.pane .row.sel{background:rgba(240,242,241,0.16)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:0 0 auto}
.pane .f{display:flex;align-items:center;gap:8px;height:28px}
.pane .f span:first-child{flex:0 0 72px;color:var(--fg2)}
.pane .f b{flex:1;display:flex;align-items:center;justify-content:space-between;height:28px;padding:0 8px;background:var(--input);border:1px solid var(--line);border-radius:6px;font-weight:400}
.pane .f b i{color:var(--fg3);font-style:normal}
@media (max-width:900px){.window .scr{grid-template-columns:1fr}.pane{display:none}.window .scr video{grid-column:1}.hero{padding-block:56px 32px}}
.logos{display:flex;justify-content:center;gap:48px;flex-wrap:wrap;padding-block:36px 0;color:var(--fg3);font-size:14px}
.logos span{display:flex;align-items:center;gap:8px}

/* feature rows */
.feat{padding-block:120px 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;align-items:center}
.feat.rev .txt{order:2}
.feat .txt{display:flex;flex-direction:column;gap:16px;max-width:460px}
.feat .txt .k{font-size:13px;font-weight:600;color:var(--accent)}
.feat h2{font-size:clamp(28px,3.4vw,40px)}
.feat p{color:var(--fg2);font-size:17px}
.feat ul{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;color:var(--fg2)}
.feat li{display:flex;gap:10px;align-items:flex-start}
.feat li:before{content:"";width:6px;height:6px;margin-top:9px;background:var(--accent);transform:rotate(45deg);flex:0 0 auto}
.feat .vis{background:var(--panel);border:1px solid var(--line2);border-radius:12px;overflow:hidden;max-width:100%}
.feat .vis video{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}
@media (max-width:900px){.feat{grid-template-columns:1fr;gap:28px;padding-block:72px 0}.feat.rev .txt{order:0}}
.sb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:14px}
.sb .cut{aspect-ratio:16/9;border-radius:6px;background:var(--raised);position:relative;overflow:hidden}
.sb .cut video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sb .cut span{position:absolute;left:8px;bottom:6px;font-size:11px;font-weight:600;padding:2px 6px;background:rgba(20,23,25,0.75);border-radius:4px}
.sb .cut.gen{display:flex;align-items:center;justify-content:center;color:var(--fg3);font-size:12px;border:1px dashed var(--line)}
.bcard{padding:14px;display:flex;flex-direction:column;gap:12px}
.bcard .img{aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:var(--raised);position:relative}
.bcard .img video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bcard .meta{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px}
.ver{font-family:var(--mono);font-size:11px;padding:2px 6px;border-radius:4px;background:rgba(240,242,241,0.12)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding-block:120px 0}
.step{padding:22px;border:1px solid var(--line2);border-radius:12px;background:var(--panel);display:flex;flex-direction:column;gap:10px}
.step .n{font-family:var(--mono);font-size:12px;color:var(--accent)}
.step h3{font-size:18px}
.step p{color:var(--fg2);font-size:15px}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr));padding-block:72px 0}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* cta + footer */
.cta{margin-top:120px;padding-block:72px;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);background:var(--seq)}
.cta .in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.cta h2{font-size:clamp(30px,4vw,44px)}
.cta p{color:var(--fg2);font-size:17px}
@media (max-width:900px){.cta{margin-top:72px;padding-block:56px}}
footer{padding-block:56px 32px}
.fcols{display:grid;grid-template-columns:1.4fr repeat(4,minmax(0,1fr));gap:32px}
.fcols h4{margin:0 0 12px;font-size:13px;font-weight:600;color:var(--fg)}
.fcols a{display:block;font-size:14px;color:var(--fg2);padding:4px 0}
.fcols a:hover{color:var(--fg)}
.fcols p{font-size:14px;color:var(--fg3);max-width:28ch;margin-top:10px}
.fbot{margin-top:40px;padding-top:20px;border-top:1px solid var(--line2);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--fg3)}
@media (max-width:900px){.fcols{grid-template-columns:repeat(2,minmax(0,1fr))}.fcols .about{grid-column:1/-1}}

/* page heads */
.phead{padding-block:64px 32px;display:flex;flex-direction:column;gap:12px}
.phead h1{font-size:clamp(32px,4.4vw,52px)}
.phead p{color:var(--fg2);font-size:18px;max-width:60ch}
.phead .bar{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}

/* download page: Mac and Windows, the platform in big type */
.dlgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.dlc{background:var(--panel);border:1px solid var(--line2);border-radius:14px;padding:26px 26px 24px;display:flex;flex-direction:column;gap:14px;min-width:0}
.dlc.mac{border-color:rgba(80,255,176,0.35)}
.dlc .os{display:flex;align-items:center;justify-content:space-between}
.dlc .osname{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--fg2)}
.osic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.dlc .big{font-size:clamp(44px,5vw,64px);line-height:1;letter-spacing:-0.04em;font-weight:700;padding:6px 0 2px}
.dlc .who{font-size:15px;color:var(--fg2);min-height:46px}
.dlc .who b{color:var(--fg);font-weight:600}
.dlc ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--fg3)}
.dlc .btn{width:100%;margin-top:6px}
.dlc .meta{font-size:12px;color:var(--fg3)}
@media (max-width:900px){.dlgrid{grid-template-columns:1fr}.dlc .who{min-height:0}}
.which{margin-top:56px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:32px;align-items:start;padding:28px;border:1px solid var(--line2);border-radius:14px;background:var(--seq)}
.which h2{font-size:22px;margin-bottom:8px}
.which p{color:var(--fg2);font-size:15px}
.which p b{color:var(--fg);font-weight:600}
.wsteps{display:flex;flex-direction:column;gap:8px}
.wstep{display:grid;grid-template-columns:28px 1fr auto auto;align-items:center;gap:12px;padding:12px 14px;background:var(--panel);border:1px solid var(--line2);border-radius:10px;font-size:14px;color:var(--fg2)}
.wstep b{color:var(--fg);font-weight:600}
.wstep .n{width:24px;height:24px;border-radius:50%;background:var(--input);border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--fg)}
.wstep .arrow{color:var(--fg3)}
.wstep .pick{font-weight:600;color:var(--accent);white-space:nowrap}
.wstep.no .pick{color:var(--fg3)}
@media (max-width:900px){.which{grid-template-columns:1fr}}
/* sign in page */
.signin{min-height:70vh;display:flex;align-items:center;justify-content:center;padding-block:48px}
.scard{width:100%;max-width:420px;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.scard .top{aspect-ratio:16/8;background:var(--seq);position:relative;overflow:hidden}
.scard .top video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scard .in{padding:32px 32px 28px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.scard .in>*{width:100%}
.scard h1{font-size:24px;margin-top:6px;letter-spacing:-0.01em}
.scard p{color:var(--fg2);font-size:15px;margin:0 0 10px;text-wrap:balance}
.gbtn{display:flex;align-items:center;justify-content:center;gap:12px;height:48px;border-radius:8px;background:#fff;color:#1f1f1f;border:1px solid #dadce0;font-weight:600;font-size:15px;width:100%}
.gbtn:hover{background:#f6f6f6}
.scard .legal{font-size:12px;color:var(--fg3);line-height:1.6;margin-top:10px}
.scard .legal a{color:var(--fg2);border-bottom:1px solid var(--line)}
.scard .or{display:flex;align-items:center;gap:12px;margin-top:6px;font-size:12px;color:var(--fg3)}
.scard .or::before,.scard .or::after{content:"";flex:1;height:1px;background:var(--line)}
.scard .invite{display:flex;gap:8px}
.scard .invite input[name=code]{flex:1;min-width:0;height:48px;padding:0 12px;border-radius:8px;background:var(--input);border:1px solid var(--line);color:var(--fg);font-family:var(--mono);font-size:15px;letter-spacing:0.04em;text-transform:uppercase}
.scard .invite input[name=code]::placeholder{color:var(--fg3);text-transform:none}
.scard .invite .btn{height:48px;flex:0 0 auto}
.scard .notice{font-size:13px;color:var(--fg2);background:var(--input);border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:4px 0 0}

/* account */
.acct{max-width:860px;padding-block:56px 120px;display:flex;flex-direction:column;gap:28px}
.acct h1{font-size:clamp(30px,4vw,44px)}
.bal{display:flex;align-items:center;gap:24px;padding:24px;border:1px solid var(--line2);border-radius:12px;background:var(--panel);flex-wrap:wrap}
.bal .num{font-size:56px;line-height:1;letter-spacing:-0.04em;font-weight:600;display:flex;align-items:center;gap:12px;font-variant-numeric:tabular-nums}
.bal .what{color:var(--fg2);max-width:380px;font-size:15px}
.ledger div{display:grid;grid-template-columns:110px 1fr auto;gap:16px;padding:14px 0;border-bottom:1px solid var(--line2);align-items:center;font-size:14px}
.ledger .d{color:var(--fg3);font-family:var(--mono);font-size:12px}
.ledger .amt{font-variant-numeric:tabular-nums;font-weight:600}
.ledger .amt.plus{color:var(--accent)}
@media (max-width:620px){.ledger div{grid-template-columns:1fr auto}.ledger .d{display:none}}

/* logo */
.logo{width:28px;height:28px;display:block}
.logo.big{width:48px;height:48px;border-radius:12px;margin:0 auto}
.hero .eyebrow:hover{border-color:var(--fg3)}
.logos .lg{font-weight:700;letter-spacing:0.04em;color:var(--fg3)}
/* sections */
.sec{padding-block:120px 0}
.shead{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;max-width:640px;margin:0 auto 40px}
.shead .k{font-size:13px;font-weight:600;color:var(--accent)}
.shead h2{font-size:clamp(28px,3.6vw,42px)}
.shead p{color:var(--fg2);font-size:17px}
@media (max-width:900px){.sec{padding-block:72px 0}}
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.bcell{background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:16px 20px 22px;display:flex;flex-direction:column;gap:8px;min-width:0}
.bcell h3{font-size:17px;margin-top:6px}
.bcell p{color:var(--fg2);font-size:14px}
.mini{aspect-ratio:16/9;border-radius:8px;background:var(--seq);border:1px solid var(--line2);overflow:hidden;display:flex;align-items:center;justify-content:center;padding:12px}
.sb.sm{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:0;width:100%}
.mini-media{padding:0}
.mini-media img{width:100%;height:100%;display:block;object-fit:cover}
.mini-export{background:#23272a}
.mini-export img{width:100%;height:100%;display:block;object-fit:contain}
.bc{width:70%;background:var(--card);border:1px solid var(--line2);border-radius:8px;overflow:hidden;font-size:12px}
.bc .img{aspect-ratio:16/9;position:relative;background:var(--raised)}
.bc .img video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bc .meta{display:flex;justify-content:space-between;align-items:center;padding:8px 10px}
.vizbig{display:flex;align-items:center;gap:12px;font-size:28px;font-weight:600;letter-spacing:-0.03em}
@media (max-width:900px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.bento{grid-template-columns:1fr}}
.steps{padding-block:0}
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.quotes figure{margin:0;background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:22px;display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.quotes blockquote{margin:0;font-size:15px;line-height:1.6;color:var(--fg)}
.quotes figcaption{display:flex;align-items:center;gap:10px;font-size:13px}
.quotes figcaption span{display:flex;flex-direction:column}
.quotes figcaption small{color:var(--fg3);font-size:12px}
@media (max-width:900px){.quotes{grid-template-columns:1fr}}
.faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:8px}
.faq details{background:var(--panel);border:1px solid var(--line2);border-radius:10px;padding:0 18px}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 0;font-weight:600;font-size:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--fg3);font-weight:400;font-size:20px}
.faq details[open] summary:after{content:"–"}
.faq p{padding:0 0 16px;color:var(--fg2);font-size:15px}
.cta-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.social{display:flex;gap:14px;margin-top:14px}
.social a{font-size:13px;color:var(--fg3);padding:0}
.fbot .flinks{display:flex;gap:16px}
.fbot .flinks a{color:var(--fg3)}
.fack{margin-top:14px;font-size:12px;line-height:1.5;color:var(--fg3)}
.fack p{margin:0}
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:820px;margin:0 auto 120px}
.plan{background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:26px;display:flex;flex-direction:column;gap:8px}
.plan:first-child{border-color:var(--accent)}
.plan.soon{opacity:0.9}
.plan .pn{font-weight:600;font-size:15px;color:var(--fg2)}
.plan .pp{font-size:36px;font-weight:600;letter-spacing:-0.03em;line-height:1.1}
.plan ul{margin:14px 0 18px;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:15px;color:var(--fg2)}
.plan li{display:flex;gap:12px;align-items:flex-start;line-height:1.5}
.plan li:before{content:"✓";color:var(--accent);flex:0 0 auto;width:14px;text-align:center}
.plan .btn{margin-top:auto}
@media (max-width:900px){.plans{grid-template-columns:1fr}}
.usage{max-width:760px;margin:56px auto 120px;display:flex;flex-direction:column;gap:12px}
.usage table{width:100%;border-collapse:collapse;font-size:15px}
.usage th{text-align:left;padding:10px 0;border-bottom:1px solid var(--line);font-weight:600}
.usage th:last-child,.usage td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.usage td{padding:12px 0;border-bottom:1px solid var(--line2);color:var(--fg2)}
.usage td:last-child{color:var(--fg);font-weight:600}
/* demo sign-in form, legal pages */
.demo{display:flex;flex-direction:column;gap:10px;text-align:left}
.demo label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--fg2)}
.demo input{height:40px;padding:0 12px;border-radius:8px;background:var(--input);border:1px solid var(--line);color:var(--fg);font:inherit}
.btn[aria-disabled="true"]{opacity:0.35;cursor:not-allowed}
.legal a{color:var(--fg2);border-bottom:1px solid var(--line)}
.prose{max-width:720px;padding-block:48px 120px;display:flex;flex-direction:column;gap:14px;color:var(--fg2);font-size:16px}
.prose h1{color:var(--fg);font-size:clamp(28px,4vw,40px)}
.prose h2{color:var(--fg);font-size:20px;margin-top:16px}
.privacy h3{color:var(--fg);font-size:18px;margin-top:12px}
.privacy dl{margin:0;display:grid;gap:8px}
.privacy dt{font-weight:600;color:var(--fg);margin-top:8px}
.privacy dd{margin:0;overflow-wrap:anywhere}
.privacy a{text-decoration:underline;text-underline-offset:3px}
/* board, as Previzion-Web's user site lays it out */
.bhead{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;padding:40px 0 20px}
.bhead h1{font-size:26px;font-weight:600}
.bhead .count{color:var(--fg2);font-size:13px;padding-bottom:3px}
.bhead .spacer{flex:1}
.segment{display:inline-flex;padding:3px;gap:2px;background:var(--input);border:1px solid var(--line);border-radius:9px}
.segment a{padding:5px 12px;border-radius:6px;font-size:13px;color:var(--fg2);white-space:nowrap}
.segment a:hover{background:rgba(240,242,241,0.08);color:var(--fg)}
.segment a[aria-current="true"]{background:rgba(240,242,241,0.16);color:var(--fg)}
.demo-note{font-size:13px;color:var(--fg3);padding:0 0 16px}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,288px),1fr));gap:24px 20px;padding-bottom:96px}
.post{display:flex;flex-direction:column;gap:10px;min-width:0}
.thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#141719;border-radius:10px;border:1px solid var(--line2);max-width:100%}
.thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.thumb:hover{border-color:var(--line)}
.thumb .version{position:absolute;left:8px;top:8px}
.vchip{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;background:#141719;color:var(--fg2);font-size:12px;white-space:nowrap;vertical-align:middle}
.post .title{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.post .row{display:flex;align-items:center;gap:10px;min-width:0}
.post .who{display:flex;align-items:center;gap:6px;min-width:0;color:var(--fg2);font-size:13px}
.post .who a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.post .who a:hover{color:var(--fg)}
.post .stats{margin-left:auto;display:flex;align-items:center;gap:4px;color:var(--fg2);font-size:13px}
.stat{display:inline-flex;align-items:center;gap:5px;padding:0 6px;height:28px;border-radius:7px}
button.stat:hover{background:rgba(240,242,241,0.08);color:var(--fg)}
button.stat[aria-pressed="true"]{color:var(--fg)}
button.stat[aria-pressed="true"] svg,.btn[aria-pressed="true"] svg{fill:currentColor}
svg.ic{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.av{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:var(--input);border:1px solid var(--line);font-size:12px;font-weight:600;text-transform:uppercase;color:var(--fg)}
.av.large{width:36px;height:36px;font-size:15px}
.num{font-variant-numeric:tabular-nums}
.empty{padding:96px 16px;text-align:center;color:var(--fg2)}
.empty h2{font-size:16px;font-weight:600;color:var(--fg);margin-bottom:6px}
.pager{display:flex;justify-content:center;align-items:center;gap:12px;margin:-60px 0 96px;color:var(--fg2);font-size:13px}
.watch{padding-block:24px 96px;display:flex;flex-direction:column;gap:20px}
.watch-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.watch-head h1{font-size:24px;font-weight:600}
.watch-meta{display:flex;align-items:center;gap:6px;color:var(--fg2);font-size:13px;margin-top:8px;flex-wrap:wrap}
.watch-actions{display:flex;gap:8px;flex-wrap:wrap}
.player{aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;border:1px solid var(--line2);max-width:100%}
.player video{width:100%;height:100%;display:block}
.section-title{font-size:16px;font-weight:600;margin-top:16px}
/* sign-in, sign-up, account */
.demo label.check{flex-direction:row;align-items:center;gap:8px;font-size:14px;color:var(--fg)}
.demo label.check a{color:var(--fg2);border-bottom:1px solid var(--line)}
.err{color:var(--danger);font-size:14px}
.notice{padding:12px 14px;border-radius:8px;background:var(--input);border:1px solid var(--line);font-size:14px;color:var(--fg2)}
.abox{display:flex;flex-direction:column;gap:12px;padding:20px 22px;border-radius:12px;background:var(--panel);border:1px solid var(--line2)}
.abox .ah{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.abox h2{font-size:18px}
.dlrow{display:flex;gap:8px;flex-wrap:wrap}
.menu-wrap{position:relative}
.menu-wrap summary{list-style:none;cursor:pointer;display:flex}
.menu-wrap summary::-webkit-details-marker{display:none}
.menu form{display:contents}

/* sign-up hints, pricing spend table */
.demo label .hint{display:block;font-size:12px;color:var(--fg3);margin-top:6px;font-weight:400}
.demo label.check{display:flex;flex-direction:row;gap:10px;align-items:flex-start;font-size:13px;color:var(--fg2);line-height:1.5}
.demo label.check input{width:16px;height:16px;padding:0;margin:2px 0 0;flex:0 0 auto;accent-color:var(--accent)}
.demo label.check+label.check{margin-top:6px}
.demo .hint+*{margin-top:0}
.demo label.check:first-of-type{margin-top:10px}
.demo .btn{margin-top:8px}
.spend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:820px;margin:0 auto 24px}
.spend div{padding:22px 24px;border:1px solid var(--line2);border-radius:12px;background:var(--panel)}
.spend h2{font-size:16px;margin:0 0 12px}
.spend ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;color:var(--fg2);font-size:14px}
.spend li{display:flex;gap:10px}
.spend li:before{content:"";width:6px;height:6px;margin-top:7px;background:var(--accent);transform:rotate(45deg);flex:0 0 auto}
.spend div:last-child li:before{background:var(--fg3)}
@media (max-width:640px){.spend{grid-template-columns:1fr}}

/* Current client captures and the original storyboard sample. */
.sb .cut img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feat .vis img{width:100%;display:block;aspect-ratio:2400/1350;object-fit:cover}
.shotwide{padding-block:120px 0;display:flex;flex-direction:column;gap:40px}
.shotwide .shead{margin:0 auto;text-align:center;max-width:640px}
.shotwide img{width:100%;display:block;border-radius:12px;border:1px solid var(--line2);aspect-ratio:2400/1350;object-fit:cover;box-shadow:0 30px 80px rgba(0,0,0,0.45)}
.step .spends{display:block;margin-top:8px;font-size:12px;color:var(--accent)}
@media (max-width:900px){.shotwide{padding-block:72px 0;gap:24px}}

/* The hero plays a recording of the client; its poster is also the still fallback. */
.client-demo{position:relative;aspect-ratio:16/9;background:var(--seq)}
.client-demo video{display:block;width:100%;height:100%;object-fit:contain}
.demo-toggle{position:absolute;right:12px;bottom:12px;min-height:36px;padding:6px 12px;border:1px solid var(--line);border-radius:6px;background:rgba(21,23,25,.94);color:var(--fg);font:500 12px var(--sans);cursor:pointer}
.demo-toggle:hover{background:var(--raised)}
.demo-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.storyboard-sample{margin:0;background:#1c1e21;text-align:left}
.storyboard-sample figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line2);font-size:12px}
.storyboard-sample figcaption span{color:var(--fg2)}
.storyboard-sample p{margin:0;padding:12px 14px;font-size:12px;line-height:1.7;color:var(--fg2);border-bottom:1px solid var(--line2)}
.storyboard-cuts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:12px}
.storyboard-cuts>div{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:6px}
.feat .vis .storyboard-cuts img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
.storyboard-cuts span{position:absolute;left:6px;bottom:5px;font:9px var(--mono);padding:2px 5px;background:rgba(20,23,25,.85);border-radius:3px}
@media (max-width:640px){.storyboard-cuts{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-toggle{right:8px;bottom:8px;min-height:32px;font-size:11px}}

/* --- sign-up: the same card, short in words and generous in air (title / field / consents / button, each a group) --- */
.scard .in.signup{padding:40px 36px 32px;gap:6px}
.scard .in.signup h1{margin-top:0;font-size:24px}
.scard .in.signup>.faint{font-size:14px}
.scard .in.signup .demo{margin-top:28px;gap:0}
.scard .in.signup .demo label{font-size:14px;color:var(--fg);gap:8px}
.scard .in.signup .demo label .hint{margin-top:2px;font-size:13px;line-height:1.5}
.scard .in.signup .demo input{height:44px}
.scard .in.signup .demo label.check{font-size:14px;line-height:1.5;color:var(--fg2);gap:12px;align-items:flex-start}
.scard .in.signup .demo label.check input{width:18px;height:18px;margin-top:2px}
.scard .in.signup .demo label+label.check{margin-top:28px}
.scard .in.signup .demo label.check+label.check{margin-top:14px}
.scard .in.signup .demo .err{margin-top:14px}
.scard .in.signup .demo .btn{margin-top:28px;height:48px}
.scard .in.signup .legal{margin-top:18px;text-align:center;font-size:13px;line-height:1.6}
@media (max-width:480px){.scard .in.signup{padding:32px 24px 28px}}

/* --- Viz: the green gem that stands for what generation spends --- */
.gem{display:inline-block;vertical-align:-0.12em;flex:0 0 auto;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.35))}
.vizn{display:inline-flex;align-items:center;gap:5px}

/* --- pricing: Free, with the Viz as the gift --- */
.plan .pp{display:flex;align-items:baseline;gap:8px}
.plan .vizbox{display:flex;align-items:center;gap:14px;padding:14px 16px;margin:8px 0 10px;border-radius:10px;background:linear-gradient(135deg,rgba(80,255,176,0.14),rgba(80,255,176,0.05));border:1px solid rgba(80,255,176,0.35)}
.plan .vizbox .gem{filter:none}
.plan .vizbox b{display:block;font-size:17px;font-weight:600;color:var(--fg);line-height:20px}
.plan .vizbox span{display:block;font-size:13px;color:var(--fg2);line-height:18px}
.plan .gift{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;height:30px;padding:0 12px;border-radius:999px;background:rgba(80,255,176,0.12);border:1px solid rgba(80,255,176,0.4);color:var(--accent);font-weight:600;font-size:14px;margin-top:2px}
.plan li b{color:var(--fg)}

/* --- download: the visitor's own build is lit --- */
.dlc .you{font-size:12px;font-weight:600;color:var(--on-accent);background:var(--accent);padding:3px 9px;border-radius:999px}
.dlc.mac,.dlc.win{border-color:var(--line2);transition:border-color .2s,box-shadow .2s}
.dlc.you-build{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 24px 60px rgba(0,0,0,0.35)}
.dlc.other-build{opacity:0.72}
.dlc.other-build .btn.primary{background:var(--input);color:var(--fg);border-color:var(--line)}

/* --- help: the page list, the document and its contents, Korean text in Pretendard --- */
.wrap.help{max-width:1680px}
.help{display:grid;grid-template-columns:240px minmax(0,1fr) 200px;grid-template-areas:"side doc toc";gap:48px;padding-block:32px 96px;align-items:start;font-family:'Pretendard Variable',Pretendard,'Instrument Sans',-apple-system,'Apple SD Gothic Neo',sans-serif}
.help.en{font-family:var(--sans)}
.help.en .doc{word-break:normal}
.hside,.htoc{position:sticky;top:calc(64px + env(safe-area-inset-top,0px) + 24px)}
.hside{grid-area:side;display:flex;flex-direction:column;gap:18px}
.hsearch{position:relative;display:flex;align-items:center;margin:0}
.hsearch svg{position:absolute;left:11px;width:15px;height:15px;fill:none;stroke:var(--fg3);stroke-width:1.6;stroke-linecap:round;pointer-events:none}
.hsearch input{width:100%;height:38px;padding:0 12px 0 34px;border-radius:8px;background:var(--input);border:1px solid var(--line);color:var(--fg);font:inherit;font-size:14px}
.hsearch input::placeholder{color:var(--fg3)}
.hresults[hidden]{display:none}
.hresults{position:absolute;left:0;top:44px;z-index:30;width:min(420px,calc(100vw - 48px));max-height:60vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:6px;box-shadow:0 20px 60px rgba(0,0,0,0.5);display:flex;flex-direction:column;gap:2px}
.hresults a{display:flex;flex-direction:column;gap:2px;padding:9px 10px;border-radius:6px;font-size:13px}
.hresults a:hover,.hresults a.on{background:rgba(240,242,241,0.08)}
.hresults a b{font-weight:600;color:var(--fg)}
.hresults a b small{font-weight:500;color:var(--fg3);margin-left:6px}
.hresults a span{color:var(--fg2);font-size:12px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.hresults a mark{background:rgba(80,255,176,0.25);color:var(--fg);border-radius:2px}
.hresults .none{padding:10px;font-size:13px;color:var(--fg3)}
.hnav,.htoc{display:flex;flex-direction:column;gap:2px}
.hnav h4,.htoc h4{margin:14px 0 6px;padding:0 10px;font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--fg3)}
.hnav a{display:block;padding:7px 10px;border-radius:6px;font-size:14px;color:var(--fg2)}
.hnav a:hover{background:rgba(240,242,241,0.06);color:var(--fg)}
.hnav a[aria-current="page"]{background:rgba(240,242,241,0.16);color:var(--fg);font-weight:600}
.htoc{grid-area:toc}
.htoc h4{margin-top:0}
.htoc a{padding:5px 10px;border-left:2px solid var(--line2);font-size:13px;line-height:1.45;color:var(--fg3)}
.htoc a:hover{color:var(--fg)}
.htoc a.on{border-left-color:var(--accent);color:var(--fg)}

/* The document: running text keeps a reading measure; tables, pictures and cards take the column. */
.doc{grid-area:doc;max-width:1040px;min-width:0;font-size:16px;line-height:1.7;color:var(--fg2);word-break:keep-all;overflow-wrap:anywhere}
.doc>p,.doc>ul,.doc>ol,.doc>.admonition,.doc>details{max-width:46em}
.dhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.doc .k{font-size:13px;font-weight:600;color:var(--accent)}
.doc h1{color:var(--fg);font-size:clamp(28px,4vw,38px);line-height:1.2;margin-bottom:20px;letter-spacing:-0.02em}
.doc h2{color:var(--fg);font-size:22px;line-height:1.3;margin:48px 0 14px;padding-top:14px;border-top:1px solid var(--line2);letter-spacing:-0.01em;scroll-margin-top:96px}
.doc h3{color:var(--fg);font-size:17px;line-height:1.4;margin:28px 0 10px;scroll-margin-top:96px}
.doc h4{color:var(--fg);font-size:15px;font-weight:600;margin:0 0 8px}
.doc p{margin:0 0 14px}
.doc .lead{font-size:17px}
.doc .muted{color:var(--fg3);font-size:14px}
.doc ul,.doc ol{margin:0 0 16px;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.doc li>ul,.doc li>ol{margin:6px 0 0}
.doc li>p{margin:0}
.doc b,.doc strong{color:var(--fg);font-weight:600}
.doc a{color:var(--fg);border-bottom:1px solid var(--line);transition:border-color .15s}
.doc a:hover{border-color:var(--accent)}
.doc code{font-family:var(--mono);font-size:0.88em;padding:1px 6px;border-radius:4px;background:var(--input);color:var(--fg);border:1px solid var(--line2)}
.doc pre{margin:8px 0 4px;padding:12px 14px;border-radius:8px;background:#121416;border:1px solid var(--line2);overflow-x:auto}
.doc pre code{padding:0;border:0;background:none;font-size:13px}
.doc kbd{display:inline-block;font-family:var(--mono);font-size:12px;line-height:1;padding:4px 6px;border-radius:5px;background:var(--input);border:1px solid var(--line);border-bottom-width:2px;color:var(--fg);white-space:nowrap;vertical-align:baseline}
.doc .gem{margin-right:3px}
.doc .admonition{margin:16px 0 20px;padding:14px 16px 14px 18px;border-radius:10px;background:rgba(80,255,176,0.06);border:1px solid rgba(80,255,176,0.22);border-left:3px solid var(--accent);font-size:15px}
.doc .admonition.warning{background:rgba(201,162,74,0.08);border-color:rgba(201,162,74,0.3);border-left-color:var(--camera)}
.doc .admonition>*:last-child{margin-bottom:0}
.doc .admonition ul{gap:4px}
.doc figure{margin:8px 0 20px}
.doc figure img{display:block;max-width:100%;height:auto;border-radius:10px;border:1px solid var(--line2);background:#111}
.doc .cols{display:grid;grid-template-columns:minmax(0,46em) auto;gap:32px;align-items:start;margin-bottom:8px}
.doc .cols>*{margin-bottom:0}
.doc .cols figure{max-width:240px}
.doc .os{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0 0 16px}
.doc .os>div{padding:16px 18px 2px;border:1px solid var(--line2);border-radius:12px}
.doc table{width:100%;border-collapse:collapse;overflow-wrap:normal;font-size:14.5px;margin:0 0 20px;line-height:1.55}
.doc th{text-align:left;font-size:12px;font-weight:600;color:var(--fg3);letter-spacing:0.04em;padding:0 12px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.doc td{padding:10px 12px;border-bottom:1px solid var(--line2);vertical-align:top}
.doc th:first-child,.doc td:first-child{padding-left:0}
.doc td:first-child{color:var(--fg)}
.doc th:last-child,.doc td:last-child{padding-right:0}
.doc td[style*="right"]{white-space:nowrap}
.doc details{margin:0 0 8px;border:1px solid var(--line2);border-radius:10px;background:var(--panel);padding:0 16px}
.doc details summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 0;font-weight:600;color:var(--fg);font-size:15px}
.doc details summary::-webkit-details-marker{display:none}
.doc details summary:after{content:"+";color:var(--fg3);font-weight:400;font-size:20px;flex:0 0 auto}
.doc details[open] summary:after{content:"–"}
.doc details[open] summary{border-bottom:1px solid var(--line2)}
.doc details>*:not(summary){margin-top:12px}
.doc details>*:last-child{margin-bottom:14px}
.doc details:target{border-color:var(--accent)}
.doc .hcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin:0 0 16px}
.doc .hcards a{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:12px;border:1px solid var(--line2);font-size:13px;color:var(--fg3)}
.doc .hcards a:hover{background:var(--panel);border-color:var(--fg3)}
.doc .hcards b{font-size:15px}
.doc .hcards.numbered a{background:var(--panel);font-size:14px;color:var(--fg2)}
.doc .hcards.numbered b{font-size:16px}
.doc .hcards .n{font-family:var(--mono);font-size:12px;color:var(--accent)}
.doc .hpager{display:flex;justify-content:space-between;gap:12px;margin-top:48px;padding-top:20px;border-top:1px solid var(--line2)}
.doc .hpager a{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:10px;border:1px solid var(--line2);font-size:15px;color:var(--fg);font-weight:600;min-width:0}
.doc .hpager a small{font-size:12px;font-weight:500;color:var(--fg3)}
.doc .hpager a.next{margin-left:auto;text-align:right}
.doc .hpager a:hover{border-color:var(--fg3)}
.doc .hfoot{margin:28px 0 0;font-size:13px;color:var(--fg3)}
@media (max-width:1360px){.help{grid-template-columns:220px minmax(0,1fr);grid-template-areas:"side doc";gap:40px}.htoc{display:none}}
@media (max-width:900px){.help{grid-template-columns:1fr;grid-template-areas:"side" "doc";gap:20px;padding-block:20px 72px}.hside{position:static}.hnav{flex-direction:row;flex-wrap:wrap;gap:4px}.hnav h4{width:100%;margin:8px 0 2px}.hnav a{padding:6px 10px;font-size:13px;border:1px solid var(--line2);border-radius:999px}.doc h2{margin-top:36px}.doc .cols,.doc .os{grid-template-columns:1fr}}

/* --- one take: the movie beside its storyboard and scenario, as Previzion-Web lays it out --- */
.watch{max-width:1440px;container-type:inline-size}
.review{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;scroll-margin-top:76px}
.review [hidden]{display:none!important}
.review-viewer{min-width:0;display:block}
.review-viewer .shot-browser{margin-top:20px}
.review-video,.review-materials{min-width:0}
.review-materials{display:flex;flex-direction:column;gap:20px}
.material-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:32px;margin-bottom:10px}
.material-heading h2{font-size:15px;font-weight:600}
.material-heading .num{font-size:13px}
.material-board,.material-scenario{min-width:0}
.storyboard-image{aspect-ratio:16/9;max-height:200px;display:grid;place-items:center;background:#141719;border-radius:8px;overflow:hidden;border:1px solid var(--line2)}
.storyboard-image img{display:block;width:100%;height:100%;min-height:0;object-fit:contain}
.shot-title{margin-top:12px;max-width:calc(200px * 16 / 9);font-size:15px;font-weight:600;overflow-wrap:anywhere;padding:2px;letter-spacing:0}
.scenario-text{font-size:16px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere;max-width:72ch;max-height:clamp(320px,calc(35dvh + 80px),440px);overflow-y:auto;overscroll-behavior-y:contain;scrollbar-gutter:stable;scrollbar-color:var(--fg2) #141719;padding:2px 10px 2px 2px;color:var(--fg)}
.material-message{color:var(--fg2);font-size:14px;line-height:1.6;padding:12px 0}
.storyboard-image .material-message{padding:24px;text-align:center}
.shot-browser{grid-column:1/-1;border-top:1px solid var(--line);padding-top:14px;min-width:0}
.shot-stepper{display:flex;gap:6px}
.review button:disabled{opacity:0.5;cursor:default}
.shot-strip{display:flex;gap:12px;overflow-x:auto;padding:4px 3px 10px;scroll-padding:3px}
.shot-link{flex:0 0 144px;min-width:0;border-radius:8px;padding:5px;transition:background-color 160ms ease-out;display:block}
.shot-link:hover{background:rgba(240,242,241,0.08)}
.shot-link[aria-current="true"]{background:rgba(240,242,241,0.16)}
.shot-thumb{display:grid;place-items:center;width:100%;aspect-ratio:16/9;background:#141719;border-radius:5px;overflow:hidden}
.shot-thumb img{display:block;width:100%;height:100%;object-fit:contain}
.shot-thumb>span{color:var(--fg2);font-size:12px}
.shot-label{display:flex;align-items:baseline;gap:8px;padding:7px 2px 1px;font-size:12px;color:var(--fg2)}
.shot-label .num{color:var(--fg);font-weight:600}
.shot-label>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.review-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.material-tabs{width:max-content;max-width:100%}
.material-tabs button{border:0;padding:8px 14px;border-radius:6px;background:transparent;color:var(--fg2);cursor:pointer}
.material-tabs button[aria-selected="true"]{background:rgba(240,242,241,0.16);color:var(--fg)}
.material-tabs button:hover{color:var(--fg)}
@container (width > 900px){
  .review:has(.player) .review-materials{contain:size;min-height:0}
  .review:has(.player) .material-board,.review:has(.player) .material-scenario .material-heading{flex:none}
  .review:has(.player) .material-scenario{display:flex;flex-direction:column;flex:1;min-height:0}
  .review:has(.player) .scenario-text{flex:1;min-height:0;max-height:none}
}
@container (max-width: 900px){
  .review{grid-template-columns:minmax(0,1fr);gap:20px}
  .review-viewer{display:contents}
  .review-materials{gap:12px}
  .storyboard-image{max-height:none}
  .shot-title{max-width:none}
  .shot-link{flex-basis:128px}
  .shot-stepper .btn{min-height:40px}
}
@media (prefers-reduced-motion:reduce){.shot-link{transition:none}}

/* The same language control is available on desktop and mobile. */
.site-language{display:flex;flex-shrink:0;gap:2px;padding:3px;border:1px solid var(--line);border-radius:8px;font-size:12px;white-space:nowrap}
.site-language a{display:flex;align-items:center;justify-content:center;min-height:30px;padding:0 7px;border-radius:5px;color:var(--fg3)}
/* Fixed widths keep the switch still when the language changes: 한국어 falls back to another font on English
   pages, and the buttons to its right take their longer (English) label's width in both languages. */
.site-language a[lang=ko]{width:52px}
.site-language a[lang=en]{width:34px}
.nav .right>.btn.link{min-width:61px}
.nav .right>.btn.primary{min-width:98px}
.site-language a:hover{color:var(--fg)}
.site-language a[aria-current="true"]{background:var(--raised);color:var(--fg)}
html:lang(ko){--sans:'Pretendard Variable',Pretendard,'Instrument Sans',-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif}
html:lang(ko) body{word-break:keep-all;overflow-wrap:break-word}
html:lang(ko) h1,html:lang(ko) h2,html:lang(ko) h3{line-height:1.25}
html:lang(ko) .hero h1{max-width:18ch}
@media (max-width:480px){.nav .in{gap:8px}.nav .right{gap:4px}.nav .right>.btn.link{display:none}.site-language a{padding:0 6px}.site-language a[lang=ko]{width:48px}.site-language a[lang=en]{width:30px}.burger{width:36px;flex-shrink:0}}