/* Readable application typography. Video frames keep their authored fonts. */
:root{
  --castgood-ui-font:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
}

body:not(.renderonly){
  font-family:var(--castgood-ui-font);font-size:15px;line-height:1.62;
  letter-spacing:-.012em;text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
body:not(.renderonly) button,
body:not(.renderonly) input,
body:not(.renderonly) select,
body:not(.renderonly) textarea,
body:not(.renderonly) .button-link{font-family:var(--castgood-ui-font);font-size:14px}

/* The preview is also the video render source. Never change its visual typeface. */
body:not(.renderonly) #frame{
  font-family:'Pretendard',system-ui,-apple-system,sans-serif;
  font-size:initial;line-height:normal;letter-spacing:normal;
}

/* Main generator controls */
body:not(.renderonly) .panel h1{font-size:16.5px;line-height:1.35;letter-spacing:-.015em}
body:not(.renderonly) .ver{font-size:12px;line-height:1.65}
body:not(.renderonly) .sec>summary{min-height:44px;font-size:14px;line-height:1.4}
body:not(.renderonly) .sec>summary b{font-size:11.5px}
body:not(.renderonly) label.f>span{font-size:13.5px;line-height:1.45}
body:not(.renderonly) label.f>em{font-size:12.5px;line-height:1.62}
body:not(.renderonly) .hint{font-size:12.5px;line-height:1.68}
body:not(.renderonly) .stat{font-size:12.5px;line-height:1.7}
body:not(.renderonly) .chk{font-size:13px;line-height:1.5}
body:not(.renderonly) .chk em{font-size:12px;line-height:1.58}
body:not(.renderonly) .btn{font-size:13.5px;line-height:1.35}
body:not(.renderonly) .btn.sm{font-size:12.5px}
body:not(.renderonly) textarea{font-size:13.5px;line-height:1.65}
body:not(.renderonly) .ln{font-size:13px;line-height:1.55}
body:not(.renderonly) .ln u,
body:not(.renderonly) .ln .sl{font-size:11.5px}
body:not(.renderonly) .promptbox,
body:not(.renderonly) .upbox{font-size:13px;line-height:1.7}

/* Follow-along workspace */
body:not(.renderonly) .topbar{font-size:14px}
body:not(.renderonly) .brand{letter-spacing:0}
body:not(.renderonly) .job{font-size:14px;line-height:1.5}
body:not(.renderonly) .job span{font-size:12.5px}
body:not(.renderonly) .intro h1{font-size:32px;line-height:1.25;letter-spacing:-.025em}
body:not(.renderonly) .intro p{font-size:14px;line-height:1.65}
body:not(.renderonly) .eyebrow{font-size:11.5px}
body:not(.renderonly) .card{font-size:15px;line-height:1.62}
body:not(.renderonly) .card h2{font-size:20px;line-height:1.35}
body:not(.renderonly) .card h3{font-size:16px;line-height:1.4}
body:not(.renderonly) .setup-copy>p{font-size:14px;line-height:1.65}
body:not(.renderonly) .setup-steps span{font-size:13px;line-height:1.55}
body:not(.renderonly) .setup-details{font-size:12.5px;line-height:1.62}
body:not(.renderonly) .muted,
body:not(.renderonly) .original{font-size:14px;line-height:1.65}
body:not(.renderonly) .mini-grid label,
body:not(.renderonly) .mask-grid label{font-size:12.5px;line-height:1.45}

@media(max-width:600px){
  body:not(.renderonly){font-size:15px}
  body:not(.renderonly) button,
  body:not(.renderonly) input,
  body:not(.renderonly) select,
  body:not(.renderonly) textarea{font-size:16px}
  body:not(.renderonly) .intro h1{font-size:27px}
}