/* White creative-tool interpretation; original styles and icons, not a copied theme. */
:root { --bg: #fff; --line: #e9eaed; --accent: #3864bd; --accent-pale: #f1f5fd; --accent-line: #becfee; }
body.marketing-page, body.studio-page { background: #fff; }
.ui-icon { display: inline-block; width: 22px; height: 22px; flex: 0 0 22px; vertical-align: middle; }
[data-ui-icon] { display: inline-flex; align-items: center; justify-content: center; }
button, a, summary { touch-action: manipulation; }
:focus-visible { outline: 3px solid #7296df; outline-offset: 3px; }
.site-header { height: 76px; background: #ffffffed; border-bottom-color: #f0f0f2; backdrop-filter: blur(14px); }
.brand-mark { border: 0; border-radius: 0; padding: 3px; background: transparent; }
.marketing-page .brand strong { font-size: 16px; }
.marketing-page .brand small { font-size: 10px; letter-spacing: .1em; }
.site-nav a { font-size: 15px; font-weight: 500; }
.prototype-ribbon { min-height: 32px; background: #fafafa; color: #666d77; border-bottom-color: #f0f0f2; font-size: 12px; font-weight: 400; }
.marketing-page .hero { min-height: 660px; padding-block: 82px 90px; gap: 56px; }
.hero-atmosphere { opacity: .48; }
.hero-atmosphere > span { display: none; }
.marketing-page .hero-copy h1 { font-weight: 650; font-size: clamp(38px,4vw,58px); line-height: 1.28; letter-spacing: -.045em; }
.hero-copy h1 em { color: #5b6470; background: none; -webkit-text-fill-color: currentColor; }
.marketing-page .hero-lead { font-size: 17px; line-height: 1.85; color: #646b75; margin-top: 22px; }
.marketing-page .eyebrow { font-weight: 550; font-size: 13px; letter-spacing: .08em; color: #727a84; }
.marketing-page .hero-actions { gap: 12px; }
.button { border-radius: 999px; min-height: 48px; padding-inline: 24px; font-size: 16px; font-weight: 550; }
.marketing-page .hero-actions .button-dark, .marketing-page .header-actions .button-dark,
.studio-page .generate-button, .studio-page .director-submit { color: #fff; background: #232429; border: 1px solid #232429; box-shadow: none; font-weight: 550; }
.marketing-page .hero-actions .button-dark:hover, .marketing-page .header-actions .button-dark:hover,
.studio-page .generate-button:hover, .studio-page .director-submit:hover { color: #fff; background: #3b3d45; border-color: #3b3d45; box-shadow: 0 4px 12px #20263112; }
.marketing-page .header-actions .button-dark { min-height: 40px; font-size: 14px; padding-inline: 20px; }
.button-light { background: #f5f6f8; border-color: transparent; }
.button-light:hover { background: #eaeef4; border-color: transparent; }
.motion-toggle { color: #66707b; border-color: #e7e9ed; }
.marketing-page .proof-list { margin-top: 25px; font-size: 13px; color: #6c7480; }
.proof-list li::before { color: #657187; background: #eef1f6; }
.motion-showcase { border: 1px solid #e5e7ec; background: #fff; border-radius: 22px; box-shadow: 0 16px 55px -20px #29344925; }
.showcase-top > span { font-size: 13px; letter-spacing: .04em; color: #4c5561; }
.showcase-top small { font-size: 12px; color: #737b86; }
.showcase-top i { display: none; }
.showcase-modes { border-radius: 999px; background: #f3f4f6; }
.showcase-modes button { font-size: 14px; border-radius: 999px; }
.showcase-modes button[aria-pressed="true"] { color: #283344; box-shadow: 0 1px 5px #26354b10; }
.showcase-kicker { font-size: 12px; margin-bottom: 16px; color: #697380; }
.showcase-rail article strong { font-size: 15px; }
.showcase-rail article small, .showcase-note { font-size: 12px; line-height: 1.65; color: #6a7380; }
.showcase-rail article > b { border: 0; background: #f2f4f7; color: #667386; }
.showcase-link { font-size: 13px; color: #435a7a; }
.showcase-bottom { font-size: 12px; color: #6b7380; }
.showcase-float { background: #fff; border: 1px solid #e4e8ef; box-shadow: 0 8px 22px #172a4510; }
.showcase-float > span { background: #f2f5fc; border: 0; color: #6c7faa; }
.showcase-float b { font-size: 13px; color: #424d5c; }
.showcase-float small { font-size: 11px; color: #727b87; }
.marketing-page .trust-strip { background: #fafbfc; border-block-color: #f0f1f4; font-size: 14px; }
.marketing-page .section { padding-block: 82px; }
.marketing-page .section-heading h2, .marketing-page .scene-copy h2, .marketing-page .security-card h2 { font-size: clamp(28px,3vw,40px); font-weight: 600; line-height: 1.35; }
.section-heading > p { font-size: 16px; }
.marketing-page .product-card { min-height: 525px; border-radius: 22px; background: #fff; border: 1px solid #e5e7eb; color: #232429; }
.marketing-page .product-card:hover { border-color: #c4cfdf; box-shadow: 0 12px 32px #2036510a; }
.marketing-page .product-card .product-number { color: #6c7583; }
.marketing-page .product-card .product-tag { font-size: 13px; background: #f1f3f6; color: #586476; font-weight: 500; }
.marketing-page .product-card .product-copy h3 { font-size: 26px; font-weight: 600; }
.marketing-page .product-card .product-copy p { font-size: 16px; line-height: 1.75; color: #636c79; }
.marketing-page .product-card .product-copy ul { color: #636c79; font-size: 14px; line-height: 1.5; max-width: 75%; }
.marketing-page .product-card .product-copy a { padding: 9px 16px; border: 1px solid #e0e4ea; border-radius: 999px; background: #fff; font-size: 14px; }
.section-tinted { background: #fafbfc; border-color: #f0f1f4; }
.steps-grid article { border: 1px solid #e8ebf0; background: #fff; }
.steps-grid p, .scene-list p { font-size: 16px; line-height: 1.75; }
.steps-grid b { font-size: 14px; }
.scene-list > article > span { color: #60708a; display: flex; justify-content: center; padding-top: 3px; }
.marketing-page .security-section { padding-top: 10px; }
.security-card { color: #292d35; background: #f8f9fb; border: 1px solid #e9ebf0; box-shadow: none; gap: 30px; }
.security-card > div > p:last-child { color: #68717d; font-size: 15px; }
.security-card ul { font-size: 14px; line-height: 1.65; color: #596575; }
.security-card li i { color: #6f7e94; }
.security-card .button { border: 1px solid #dce1e9; background: #fff; font-size: 15px; }
.studio-page .studio-header { background: #fff; border-color: #eceef2; }
.studio-page .studio-sidebar { background: #fafbfc; border-color: #eff0f3; }
.studio-page .studio-sidebar nav a { color: #646d79; font-weight: 450; border-radius: 12px; }
.studio-page .studio-sidebar nav a:hover { background: #f0f2f6; }
.studio-page .studio-sidebar nav .is-active { background: #eef2f8; color: #253a5d; font-weight: 600; }
.studio-page .studio-sidebar nav i { display: flex; align-items: center; color: inherit; }
.studio-page .studio-sidebar nav .is-active i { color: var(--accent); }
.studio-page .prototype-banner { border: 0; background: #f7f8fa; color: #666f7d; border-radius: 12px; }
.studio-page .prototype-banner strong { color: #4e5b70; }
.studio-page .studio-titlebar h1 { font-size: 20px; font-weight: 600; }
.studio-page .plain-action { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 999px; padding-inline: 16px; background: #fff; }
.plain-action .ui-icon { width: 18px; height: 18px; flex-basis: 18px; }
.studio-page .creation-panel, .scene-picker-card, .material-composer, .director-center-panel, .video-task-panel { border-color: #e6e9ef; border-radius: 20px; box-shadow: none; background: #fff; }
.studio-page .creation-panel:focus-within { border-color: #b7c9e9; box-shadow: 0 0 0 3px #7398d808; }
.current-skill-card { background: #fafbfc; border: 1px solid #e9edf3; border-radius: 16px; }
.skill-icon { background: #eef2f8; color: #536c91; border-radius: 13px; }
.skill-icon .ui-icon { width: 26px; height: 26px; }
.scene-tabs { border: 0; gap: 6px; }
.scene-tabs button { border: 0; background: #f5f6f8; border-radius: 999px; padding: 8px 14px; color: #606b7b; font-size: 13px; }
.scene-tabs button.is-active { background: #eaf0fb; color: #345b9f; }
.scene-toggle-label { color: #64748b; }
.scene-toggle-label > i { display: inline-flex; transform: none; }
.scene-picker-card[open] .scene-toggle-label > i { transform: rotate(180deg); }
.scene-picker-card:not([open]) .scene-toggle-label > i { transform: none; }
.scene-toggle-label .ui-icon { width: 18px; height: 18px; }
.studio-page .method-card { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; box-shadow: none; }
.studio-page .method-card:hover { background: #fafbfe; border-color: #c9d5e9; box-shadow: none; }
.studio-page .method-card.is-selected { background: #f4f7fd; border-color: #8ba9d8; box-shadow: inset 0 0 0 1px #8ba9d8; }
.studio-page .method-card > span { width: 30px; height: 30px; color: #6e7c90; background: #f1f4f8; border: 0; border-radius: 9px; }
.studio-page .method-card.is-selected > span { background: #e7eefb; color: #486eb3; border: 0; }
.studio-page .method-card em { color: #6a778c; font-weight: 400; }
.studio-page .method-card.is-selected em { color: #4c6ca5; }
.studio-page :is(.upload-area, .material-upload-grid button) { border: 1px dashed #cdd5e0; border-radius: 16px; background: #fafbfc; }
.studio-page :is(.upload-area, .material-upload-grid button):hover { background: #f4f7fc; border-color: #98b1d6; }
.studio-page .upload-area.is-dragging { background: #eef4fd; border-color: #7298d7; box-shadow: inset 0 0 0 1px #7298d7; }
.studio-page .upload-icon { border: 0; border-radius: 14px; background: #eef2f8; color: #617697; }
.studio-page .material-upload-grid i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: #edf1f7; color: #607698; }
.studio-page .upload-area button { border-radius: 999px; min-height: 44px; padding-inline: 24px; }
.studio-page :is(.truth-field input, .truth-field textarea, .settings-panel textarea) { border-color: #e5e8ef; background: #fafbfc; border-radius: 14px; }
.studio-page :is(.truth-field input, .truth-field textarea, .settings-panel textarea):focus { border-color: #8caadc; outline: 2px solid #a7bde52b; outline-offset: 2px; background: #fff; }
.studio-page .generate-button, .studio-page .director-submit { display: flex; align-items: center; justify-content: center; gap: 9px; border-radius: 999px; padding: 9px 16px; }
.lipsync-page .generate-button span:not([data-ui-icon]) { color: #c2c7d0; }
.studio-page .generate-button [data-ui-icon] { color: #fff; margin: 0; }
.select-like { display: flex; align-items: center; justify-content: center; gap: 8px; }
.select-like .ui-icon { width: 16px; height: 16px; }
.studio-page .ls-step { background: #f1f3f7; color: #606e82; border: 0; }
.studio-page .ls-audio-tabs { border-radius: 999px; }
.studio-page .ls-audio-tabs button, .studio-page .ls-audio-tabs::before { border-radius: 999px; }
.director-mark { color: #7084a7; border: 1px solid #e2e8f1; background: #f8faff; box-shadow: none; border-radius: 16px; }
.director-mark .ui-icon { width: 26px; height: 26px; }
.director-empty { background: #fff; }
.director-panel-top { border-color: #eceff4; }
.director-panel-top button { border-radius: 999px; }
.director-flow article { background: #fafbfc; border: 0; border-radius: 16px; }
.director-flow article > b { background: #eaf0f9; color: #647b9f; }
.queue-icon { background: #edf1f7; color: #6e7d95; }
.queue-list > button.is-current { background: #f6f8fc; border-color: #bfccdf; }
.studio-page .video-canvas { background: #f8f9fb; border-color: #eceff4; }
.studio-page .canvas-empty > span { background: #eef2f7; border: 0; color: #798ba5; }
.studio-page .material-note > i { color: #6c7c94; background: transparent; }
.material-note .ui-icon { width: 20px; height: 20px; }
@media (max-width: 1080px) {
  .marketing-page .hero { gap: 30px; }
  .showcase-body { grid-template-columns: 1fr 1fr; gap: 14px; }
}
@media (max-width: 760px) {
  .marketing-page .hero { padding-block: 50px 70px; gap: 36px; }
  .marketing-page .hero-copy h1 { font-size: 36px; }
  .marketing-page .hero-actions .button { padding-inline: 17px; font-size: 15px; }
  .marketing-page .hero-lead { font-size: 16px; }
  .showcase-body { gap: 12px; grid-template-columns: .88fr 1.12fr; }
  .showcase-rail article { gap: 6px; }
  .showcase-rail article > b { width: 24px; height: 24px; }
  .showcase-portrait { min-height: 360px; }
  .showcase-rail article small { font-size: 12px; }
  .showcase-note, .showcase-link { font-size: 12px; }
  .showcase-top > span, .showcase-top small { font-size: 12px; }
  .showcase-bottom { font-size: 11px; }
  .marketing-page .product-card { min-height: 620px; }
  .marketing-page .product-card .product-copy ul { max-width: 100%; }
  .studio-page .studio-titlebar h1 { font-size: 18px; }
  .studio-page .scene-tabs button { padding-inline: 11px; }
  .scene-toggle-label { gap: 3px; }
}