.demo-app{--canvas:#fafbfc;--surface:#fff;--ink:#24313d;--ink-2:#364653;--ink-3:#5e6b75;--ink-4:#69747c;--line:#dce3e7;--line-strong:#bdc9d0;--accent:#e46a36;--accent-ink:#a8431c;--accent-line:#e6b59d;--accent-softer:#fff1e8;--on-accent:#141412;--font:Geist,Arial,sans-serif;--font-num:'Geist Mono',monospace;--err-soft:#fff0eb;--err-ink:#9c3520;--err-line:#d9a393;color:var(--ink);background:var(--canvas);font-family:var(--font);border:1px solid var(--line);border-radius:9px;overflow:hidden;max-width:1480px;margin:0 auto 70px;text-align:left;font-size:14px;line-height:1.5}.demo-app *{box-sizing:border-box}.demo-app button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}.demo-app button:disabled{cursor:default;opacity:.55}.demo-app input,.demo-app select,.demo-app textarea{font:inherit}.demo-app .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:11px 15px;border:1px solid var(--line-strong);border-radius:4px;min-height:44px;font-size:13px;font-weight:500;line-height:1.5}.demo-app .btn--primary{background:var(--accent);color:#141412;border-color:var(--accent)}.demo-app .btn--outline{background:transparent}.demo-app .btn:hover{filter:brightness(1.12)}.demo-app h2,.demo-app h3{color:var(--ink);font-weight:500;letter-spacing:-.045em}.demo-app p{color:var(--ink-3)}.demo-titlebar{padding:14px 22px;border-bottom:1px solid var(--line);background:var(--surface);display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:12px}.demo-titlebar>span{color:var(--ink-3)}.demo-titlebar b{font-weight:500}.demo-titlebar i{font-style:normal;color:var(--accent);margin-right:15px;letter-spacing:4px}.demo-nav{display:flex;align-items:center;gap:5px;padding:13px 20px;border-bottom:1px solid var(--line);overflow-x:auto}.demo-nav button{display:flex;align-items:center;gap:10px;padding:10px 16px;min-height:44px;white-space:nowrap;color:var(--ink-3);border:1px solid transparent;border-radius:4px}.demo-nav button[aria-current=page]{background:var(--surface);border-color:var(--line);color:var(--ink)}.demo-nav button[aria-current=page] span{color:var(--accent)}#demo-view{padding:27px;min-height:610px}.demo-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px}.demo-heading h2{font-size:32px;margin:8px 0;line-height:1.15}.demo-heading p{font-size:13px}.demo-text-button{font-size:12px!important;min-height:44px;color:var(--ink-3)!important;text-align:left}.demo-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid var(--line);margin-bottom:26px}.demo-kpis>div{padding:20px 18px;border-right:1px solid var(--line);min-width:0}.demo-kpis>div:first-child{padding-left:0}.demo-kpis>div:last-child{border:0}.demo-kpis>div>div{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:12px 0}.demo-kpis strong{font-size:34px;letter-spacing:-.05em;font-weight:500;white-space:nowrap}.demo-kpis svg{width:100px;color:var(--accent);max-width:40%}.demo-kpis small{font-size:11px;color:var(--ink-4)}.demo-accent{font-size:11px;color:var(--accent-ink)}.demo-floor{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:26px}.demo-section-label{display:flex;justify-content:space-between;gap:16px;margin-bottom:14px}.demo-app .v2-eyebrow{font:10px/1.6 var(--font-num);letter-spacing:.04em;color:var(--ink-4)}.demo-workspaces{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:stretch}.demo-app .demo-space{border:1px solid var(--line);border-radius:5px;background:var(--surface);overflow:hidden;text-align:left;padding:0;transition:border-color .2s;display:flex;flex-direction:column;min-width:0}.demo-app .demo-space:hover{border-color:var(--accent)}.demo-space-creative{grid-column:1/-1}.demo-card-label{display:flex;justify-content:space-between;font:11px var(--font-num);color:var(--ink-3);padding:12px 14px}.demo-products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:0 12px}.demo-products img{width:100%;height:160px;object-fit:cover;border-radius:3px}.demo-space footer{padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:auto}.demo-space footer b{font-size:12px;font-weight:450}.demo-space footer span{font-size:10px;color:var(--ink-4)}.demo-work-mini{padding:0 14px}.demo-work-mini>div{border-bottom:1px solid var(--line);padding:9px 0;display:grid;grid-template-columns:1fr auto;gap:4px}.demo-work-mini span{font-size:10px;color:var(--ink-4)}.demo-work-mini b{font-size:11px;font-weight:400;grid-column:1/-1;grid-row:2}.demo-work-mini i{font-size:10px;font-style:normal;color:var(--accent-ink)}.demo-space-log>strong{font-size:42px;font-weight:500;padding:0 16px}.demo-space-log>p{font-size:12px;padding:0 16px;margin-top:10px;max-width:210px}.demo-brain-strip{border:1px solid var(--line);background:var(--surface);margin-top:14px;padding:13px;display:flex;align-items:center;gap:14px}.demo-brain-strip>span{font:10px var(--font-num);color:var(--accent);white-space:nowrap}.demo-brain-strip p{font-size:10px}.demo-decision{background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:19px}.demo-decision>h2{font-size:26px;line-height:1.2;margin:7px 0 22px}.demo-choices{display:grid;gap:5px}.demo-choices>button{display:flex;align-items:center;gap:10px;text-align:left;border:1px solid var(--line);padding:11px 9px;min-height:60px;width:100%;border-radius:4px}.demo-choices>button[aria-pressed=true]{border-color:var(--accent-line);background:var(--accent-softer)}.demo-choices>button>span{font:10px var(--font-num);color:var(--accent)}.demo-choices>button>span:last-child{margin-left:auto}.demo-choices b{font-size:11px;font-weight:500;display:block}.demo-choices small{font-size:10px;color:var(--ink-4)}.demo-decision-detail{padding-top:24px}.demo-decision-detail h3{font-size:19px;line-height:1.3;margin:10px 0}.demo-decision-detail p{font-size:12px;line-height:1.7}.demo-decision-detail dl{font-size:10px;line-height:1.5;border-block:1px solid var(--line);padding:12px 0;margin:18px 0}.demo-decision-detail dt{color:var(--ink-4)}.demo-decision-detail dd{margin:4px 0 12px;color:var(--ink-2)}.demo-decision-detail dd:last-child{margin-bottom:0}.demo-decision-buttons{display:flex;gap:8px;margin-top:12px}.demo-decision-buttons>.btn:first-child{flex:1}.demo-decision-detail>small{display:block;margin-top:12px;color:var(--ink-4);font-size:10px}.demo-cleared{text-align:center;padding:40px 18px}.demo-cleared>span{font-size:40px;color:var(--accent)}.demo-cleared h3{font-size:25px;margin:15px 0}.demo-cleared p{max-width:450px;margin:0 auto 20px}.demo-task-list{display:grid;gap:15px}.demo-task-list article{background:var(--surface);padding:24px;border:1px solid var(--line);border-radius:6px;display:grid;grid-template-columns:1fr 200px;gap:30px}.demo-task-list h3{font-size:22px;margin:10px 0}.demo-task-list p{max-width:650px;font-size:14px;line-height:1.7}.demo-task-list small{display:block;font-size:11px;color:var(--ink-4);margin-top:16px}.demo-task-actions{display:flex;flex-direction:column;gap:10px;justify-content:center}.demo-status{color:var(--accent-ink);font-size:12px}.demo-history{border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:10px 22px}.demo-history article{display:flex;align-items:center;gap:15px;padding:20px 0;border-bottom:1px solid var(--line)}.demo-history article:last-child{border:0}.demo-history b{font-weight:450}.demo-history p{font-size:12px;margin-top:5px}.demo-history .btn,.demo-history .demo-status{margin-left:auto}.demo-event-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0}.demo-foot{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding:12px 22px;font:10px var(--font-num);color:var(--ink-4)}.demo-foot>span:first-child{color:var(--accent)}.demo-embedded .site-header,.demo-embedded .site-footer,.demo-embedded .page-hero,.demo-embedded>.skip-link{display:none}.demo-embedded body{background:#fafbfc}.demo-embedded .demo-app{border:0;border-radius:0;margin:0;max-width:none}:is(.page-demo,.page-advertenties-maken,.page-video-maken,.page-creators) #main>.page-hero{max-width:1480px;padding-bottom:35px;padding-top:45px}:is(.page-demo,.page-advertenties-maken,.page-video-maken,.page-creators) #main>.page-hero h1{font-size:clamp(2.5rem,5vw,4.5rem)}.demo-app [hidden]{display:none!important}.demo-announcement{font-size:12px;min-height:0;color:var(--accent-ink);padding:0 22px}.demo-announcement:empty{display:none}.demo-app .cf-studio{margin:0}.demo-app .cf-layout{grid-template-columns:170px minmax(0,1fr) 260px}.demo-app .cf-prompt{margin:20px 12px}.demo-app .cf-canvas-area{max-height:560px}.demo-app .cf-top{padding:15px}.demo-app .cf-error{color:var(--err-ink)}
@media(max-width:1050px){.demo-floor{grid-template-columns:minmax(0,1fr) 245px;gap:18px}.demo-workspaces{grid-template-columns:1fr}.demo-space-creative{grid-column:auto}.demo-products img{height:130px}.demo-space-log{display:none!important}.demo-brain-strip{align-items:flex-start;flex-direction:column;gap:5px}.demo-heading h2{font-size:28px}.demo-section-label>span:last-child{display:none}.demo-app .cf-layout{grid-template-columns:minmax(0,1fr) 220px}}
@media(max-width:700px){.demo-app{border-radius:0;margin:0 0 40px;border-inline:0}.demo-titlebar{padding:13px 16px;font-size:11px}.demo-titlebar>span{display:none}.demo-nav{padding:9px 12px;gap:2px;position:sticky;top:0;z-index:30;background:var(--canvas)}.demo-nav button{font-size:12px;padding:10px 12px;min-height:46px}.demo-nav button>span{display:none}#demo-view{padding:20px 16px}.demo-heading{align-items:flex-start;flex-direction:column;gap:8px;margin-bottom:20px}.demo-heading h2{font-size:29px}.demo-heading p{font-size:13px;line-height:1.7}.demo-kpis{grid-template-columns:1fr 1fr;gap:0;margin-bottom:22px}.demo-kpis>div{padding:15px 12px}.demo-kpis>div:nth-child(2){border:0}.demo-kpis>div:last-child{grid-column:1/-1;padding:14px 0;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}.demo-kpis>div:last-child>div{margin:0}.demo-kpis>div:last-child small{display:none}.demo-kpis>div:last-child strong{font-size:25px}.demo-kpis strong{font-size:30px}.demo-kpis svg{display:none}.demo-kpis .demo-accent{font-size:10px}.demo-kpis>div>div{gap:8px;align-items:baseline}.demo-kpis small{font-size:10px;line-height:1.6;display:block}.demo-floor{grid-template-columns:1fr;gap:20px}.demo-products img{height:auto;aspect-ratio:1}.demo-space footer{padding:14px}.demo-space footer b{font-size:13px}.demo-space footer span{font-size:11px}.demo-work-mini b{font-size:12px}.demo-brain-strip p{font-size:11px;line-height:1.6}.demo-decision{padding:20px}.demo-choices b{font-size:13px}.demo-choices small{font-size:11px}.demo-decision-detail p{font-size:14px}.demo-decision-detail dl,.demo-decision-detail>small{font-size:12px}.demo-decision-detail h3{font-size:23px}.demo-task-list article{grid-template-columns:1fr;padding:20px;gap:20px}.demo-task-actions{flex-flow:row wrap;justify-content:flex-start}.demo-task-actions>.btn{flex:1}.demo-task-actions>.demo-text-button{flex-basis:100%}.demo-history{padding:5px 16px}.demo-history article{flex-wrap:wrap}.demo-history article>div{flex:1;min-width:180px}.demo-history .btn{margin-left:20px}.demo-foot{padding:14px 16px;flex-direction:column;gap:5px;line-height:1.6}.demo-app .cf-layout{display:flex}.demo-app .cf-canvas-area{max-height:560px}.demo-app .cf-inspector{width:100%}.demo-app .cf-source{max-width:100%}.demo-app .cf-canvas-column{width:100%}.demo-app .cf-campaign-bar select{font-size:16px}.demo-app .cf-inspector input,.demo-app .cf-inspector select{font-size:16px}}
@media(prefers-reduced-motion:reduce){.demo-app *{scroll-behavior:auto!important;transition:none!important}}

/* Keep the phone navigation attached to the viewport during long studio sessions. */
@media(max-width:700px){.demo-app{overflow:visible}.demo-nav{top:0}.demo-embedded .demo-app{overflow:visible}}

/* An everyday work surface, using the AOP light palette. */
.demo-titlebar{background:#f0f4f6}.demo-titlebar i{color:#bac4cb}.demo-nav button[aria-current=page]{background:#eaf0f4;border-color:transparent;color:var(--ink)}.demo-decision{background:#f2f5f7}.demo-kpis{border-top:0}.demo-app .demo-space{border-radius:10px}.demo-choices>button{background:var(--surface);border-radius:7px}.demo-choices>button[aria-pressed=true]{background:var(--accent-softer)}.demo-app .v2-eyebrow{font-family:var(--font);letter-spacing:.03em;font-size:12px;font-weight:500}.demo-heading p,.demo-decision-detail p{font-size:14px}.demo-nav button{font-size:14px}.demo-foot{font-family:var(--font);font-size:12px}.demo-kpis small{font-size:12px}.demo-kpis .demo-accent{font-size:12px}@media(max-width:700px){.demo-nav button{font-size:13px}.demo-titlebar b{font-size:12px}.demo-kpis .demo-accent{font-size:11px}.demo-kpis strong{font-size:28px}.demo-kpis>div:last-child{flex-wrap:wrap}}

:is(.page-advertenties-maken,.page-video-maken,.page-creators) #main>.page-hero{padding-top:28px;padding-bottom:28px}:is(.page-advertenties-maken,.page-video-maken,.page-creators) #main>.page-hero h1{font-size:clamp(2.2rem,4vw,3.5rem);margin:18px 0}:is(.page-advertenties-maken,.page-video-maken,.page-creators) .page-hero-bottom{gap:28px}:is(.page-advertenties-maken,.page-video-maken,.page-creators) .page-hero-bottom>p{max-width:720px}

.demo-app .cf-dimensions{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-app .cf-dimensions>span{min-width:0;flex-direction:column;gap:5px;align-items:flex-start}.demo-app .cf-dimensions b{font-size:14px}

.studio-page-links{max-width:1480px;margin:0 auto 24px;padding:0 24px;display:flex;flex-wrap:wrap;gap:10px}.studio-page-links a{display:flex;align-items:center;gap:24px;border:1px solid #dce3e7;padding:12px 16px;border-radius:6px;font-size:14px;background:#fff;color:#24313d}.studio-page-links a[aria-current=page]{background:#24313d;color:white;border-color:#24313d}.demo-embedded .studio-page-links{display:none}.demo-motion-preview{position:relative;height:150px;margin:0 12px;background:#eaf0f4;border-radius:5px;overflow:hidden}.demo-motion-preview img{width:100%;height:100%;object-fit:contain}.demo-motion-preview>span{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:44px;height:44px;background:#24313dd9;color:white;border-radius:50%;display:grid;place-items:center;font-size:24px}.demo-cast-preview{display:flex;justify-content:center;gap:10px;padding:26px 14px 16px}.demo-cast-preview span{display:grid;place-items:center;border-radius:50%;width:48px;height:48px;background:#eaf0f4;font-size:15px;color:#364653}.demo-cast-preview span:nth-child(2){background:#fff1e8}.demo-cast-copy{font-size:12px;text-align:center;padding:0 14px 20px}@media(max-width:700px){.studio-page-links{padding:0 20px;gap:8px}.studio-page-links a{font-size:13px;gap:12px;padding:10px 12px}.demo-motion-preview{height:190px}}

/* Compact creative overview. Preview size does not change the exported artwork. */
.demo-app .cf-canvas-area{padding:18px 16px 22px;min-height:400px}
.demo-app .cf-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))!important;gap:16px 12px;align-items:stretch}
.demo-app .cf-artboard{border:1px solid var(--line);border-radius:5px;box-shadow:0 2px 8px #24313d0a;overflow:hidden;background:var(--surface)}
.demo-app .cf-artboard.is-selected{outline-offset:2px}
.demo-app .cf-artboard.is-selected:before,.demo-app .cf-artboard.is-selected:after{display:none}
.demo-app .cf-artboard-media{display:flex;align-items:center;justify-content:center;width:100%;height:180px;aspect-ratio:auto!important;padding:8px;background:#eef2f4;overflow:hidden}
.demo-app .cf-artboard-media canvas{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 1px 4px #24313d12}
.demo-app .cf-artboard-caption{position:static;display:block;padding:9px 8px;font-size:10px;line-height:1.4;letter-spacing:0;max-width:100%;background:var(--surface)}
.demo-app .cf-canvas-toolbar [data-cf-grid]{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 11px;border:1px solid var(--line);border-radius:4px;font-size:12px}
.demo-app .cf-canvas-toolbar [data-cf-grid][aria-pressed=true]{background:var(--accent-softer);border-color:var(--accent-line);color:var(--accent-ink)}
.demo-app .cf-studio[data-cf-density=large] .cf-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important;gap:18px 16px}
.demo-app .cf-studio[data-cf-density=large] .cf-artboard-media{height:280px}
.demo-app .cf-studio.is-editing .cf-canvas-toolbar [data-cf-grid]{display:none}
@media(max-width:700px){
 .demo-app .cf-canvas-area{padding:14px 12px 18px;min-height:360px}
 .demo-app .cf-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px 10px}
 .demo-app .cf-artboard-media{height:164px;padding:6px}
 .demo-app .cf-artboard-caption{font-size:10px;padding:9px 6px}
 .demo-app .cf-studio[data-cf-density=large] .cf-grid{grid-template-columns:1fr!important}
 .demo-app .cf-studio[data-cf-density=large] .cf-artboard-media{height:280px}
 .demo-app .cf-canvas-toolbar>div{width:100%}
 .demo-app .cf-canvas-toolbar #cf-open-editor{flex-basis:100%;margin-bottom:5px}
}
@media(max-width:380px){.demo-app .cf-artboard-media{height:145px}}