:root{color-scheme:dark;--bg:#101113;--panel:#191a1d;--line:#303135;--muted:#929398;--text:#f3f3ef;--accent:#c9ff61}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input,select{font:inherit}button,a,input,select{outline-offset:5px}button{cursor:pointer}button:disabled{cursor:wait;opacity:.5}header{height:86px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 4%}.brand{color:var(--text);text-decoration:none;font-size:25px;font-weight:750;letter-spacing:-1px;display:flex;align-items:center}.brand-icon{background:var(--accent);color:#111;font-size:27px;width:36px;height:36px;text-align:center;line-height:34px;border-radius:9px;margin-right:10px}.muted{color:#a3a49e;font-weight:400}.badge{border:1px solid #45463c;color:#b8bba7;font-size:9px;letter-spacing:1.2px;padding:3px 7px;border-radius:4px;margin-left:16px}.local{color:#a5a6a2;display:flex;align-items:center;gap:9px;font-size:12px}i{display:inline-block;background:var(--accent);width:6px;height:6px;border-radius:100%;margin-right:4px}.text-btn{color:#aeb0aa;border:0;background:none;font-size:12px;padding:5px 0}.local button{margin-left:25px}main{max-width:1536px;margin:auto;padding:42px 4% 0}.intro{display:flex;align-items:center;justify-content:space-between;margin-bottom:38px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:650;color:var(--accent);margin:0 0 10px}h1{font-size:clamp(27px,3vw,44px);font-weight:550;letter-spacing:-1.8px;margin:0}h1 span{color:var(--accent)}.sub{color:var(--muted);margin:10px 0 0;font-size:14px}.edition{text-align:right;font-size:9px;letter-spacing:1.5px;color:#85877d;line-height:2.2}.edition b{color:#c4c6bd;font-size:12px;letter-spacing:0;font-weight:400}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:28px}.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;gap:10px}.section-head h2{font-size:10px;color:#797c70;font-weight:400;margin:0;white-space:nowrap}.section-head h2 span{font-size:14px;color:#f1f2eb;margin-left:10px;font-weight:550}.section-head>span{font-size:8px;letter-spacing:1.2px;color:#75776f}.templates{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.template{background:#1a1b1e;border:1px solid #303135;border-radius:11px;padding:7px;text-align:left;color:var(--text);overflow:hidden;transition:border-color .2s}.template.selected{border-color:var(--accent);box-shadow:0 0 0 1px #c9ff6120}.template canvas{width:100%;aspect-ratio:16/9;border-radius:6px;display:block;background:#202125}.template>div{display:flex;align-items:center;justify-content:space-between;margin:12px 5px 0}.template strong{font-size:13px;font-weight:550}.tag{font-size:7px;letter-spacing:.7px;color:#969a8e;border:1px solid #41443b;border-radius:3px;padding:1px 4px}.template p{font-size:10px;color:#8f9287;margin:4px 5px 6px}.preview-head{margin-top:27px}.segmented{display:flex;background:#1c1d20;border-radius:6px;padding:3px}.segmented button{background:none;border:0;color:#8f9189;padding:5px 9px;font-size:10px;border-radius:4px}.segmented button.active{background:#353730;color:#eef1e5}.stage{position:relative;border-radius:11px;overflow:hidden;border:1px solid #3a3c35;background:#171c20}.stage canvas{width:100%;display:block;aspect-ratio:16/9}.stage-top{position:absolute;top:18px;left:20px;right:20px;display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.4px;pointer-events:none}.stage-top>span{background:#101113b0;border:1px solid #ffffff15;border-radius:4px;padding:5px 8px}.live-dot{color:var(--accent)}.stage-bottom{position:absolute;bottom:15px;left:20px;font-size:8px;color:#b8c0b1;letter-spacing:1px;background:#1118;padding:3px 5px}.transport{display:flex;gap:13px;align-items:center;padding:16px 0;color:#a0a397;font-size:10px}.play{width:30px;height:30px;border-radius:50%;background:#d9e1ca;color:#101113;border:none;font-size:13px}.transport input{flex:1;min-width:40px}.transport .text-btn{font-size:10px;white-space:nowrap}input[type=range]{accent-color:var(--accent);height:4px;cursor:pointer;width:100%;margin:8px 0}.metrics{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:8px;background:#17181a;padding:15px 0}.metrics div{padding:0 15px;border-right:1px solid var(--line)}.metrics div:last-child{border:0}.metrics span{display:block;font-size:8px;color:#82867b;letter-spacing:1px}.metrics b{font-size:11px;font-weight:500;color:#d1d6c8;display:block;margin-top:5px}aside{border:1px solid var(--line);border-radius:12px;padding:22px;background:#17181a;align-self:start}label{display:block;color:#c3c6bc;font-size:11px;margin:18px 0 7px}label span{font-size:7px;color:#73786a;float:right;letter-spacing:.7px}input[type=text],select{background:#222326;color:#e7e9e0;border:1px solid #383a34;border-radius:6px;width:100%;padding:10px 11px;font-size:12px}select{cursor:pointer}.colors{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.colors label{border:1px solid #383a34;background:#222326;border-radius:6px;margin:0;padding:7px;display:flex;align-items:center;gap:7px}.colors span{font-size:9px;letter-spacing:0;color:#afb3a7;float:none}.colors input{width:22px;height:22px;padding:0;border:0;background:none;cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:4px}.label-row{display:flex;justify-content:space-between;align-items:baseline;margin-top:13px}.label-row label{margin:5px 0}.label-row output{font-size:10px;color:#b0b7a3}.range-ends{display:flex;justify-content:space-between;font-size:8px;color:#73796a;margin-top:5px}.upload{border:1px dashed #45493d;border-radius:7px;padding:14px 5px;cursor:pointer;text-align:center;background:#1d1f1b}.upload span{float:none;display:block;color:#c4ceb5;letter-spacing:0;font-size:10px}.upload small{font-size:8px;color:#797f71;display:block;margin-top:5px}.file-input{position:absolute;width:1px;height:1px;opacity:0}.file-input:focus+button{outline:2px solid white}.export-panel{border-top:1px solid var(--line);margin-top:23px;padding-top:21px}.export-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:10px}.export-grid label{margin-top:0}.export-note{font-size:10px;color:#92998a;line-height:1.6;margin:9px 0 15px;min-height:48px}.export-button{width:100%;display:flex;justify-content:space-between;padding:13px 15px;border:none;border-radius:6px;background:var(--accent);color:#1b2510;font-weight:650;font-size:12px}.export-button span{font-size:17px;line-height:17px}#status{font-size:9px;color:#8f9882;text-align:center;margin:11px 0}#report{display:block;margin:auto;font-size:9px}progress{width:100%;accent-color:var(--accent);height:5px}.download{display:block;color:var(--accent);font-size:12px;text-align:center;margin:8px} [hidden]{display:none!important}footer{margin-top:42px;border-top:1px solid var(--line);padding:22px 0;display:flex;justify-content:space-between;color:#73786e;font-size:9px}footer b{color:#c0c7b5;font-weight:500}footer>span:last-child{letter-spacing:1px;font-size:8px}.footer-dot{color:var(--accent);margin-left:15px;font-size:17px}dialog{max-width:540px;background:#1c1e1a;color:#c6cebd;border:1px solid #525a46;border-radius:14px;padding:30px;line-height:1.8}dialog::backdrop{background:#000b}dialog h2{font-size:30px;line-height:1.2;color:#f0f6e9}dialog #closeHelp{float:right}@media(min-width:1500px){.workspace{grid-template-columns:minmax(0,1fr) 360px}}@media(max-width:1000px){.workspace{grid-template-columns:minmax(0,1fr) 290px;gap:18px}aside{padding:17px}.edition{display:none}.template strong{font-size:11px}.tag{display:none}.metrics div{padding:0 8px}}@media(max-width:760px){header{height:70px}.badge,.local{display:none}main{padding-top:28px}.workspace{grid-template-columns:1fr}.intro{margin-bottom:27px}h1{letter-spacing:-1px}.sub{font-size:12px}.template p{font-size:9px}.metrics b{font-size:10px}aside{padding:22px}.preview-head{margin-top:22px}footer>span:last-child{display:none}.stage-top{top:10px;left:10px;right:10px}.stage-top>span{font-size:6px}.section-head>span{font-size:7px}}

#resultVideo{width:100%;aspect-ratio:16/9;border-radius:10px;background:repeating-conic-gradient(#35383d 0% 25%,#22252a 0% 50%) 50% / 32px 32px;border:1px solid var(--line)}

.style-caption{padding:15px 0 0;display:grid;grid-template-columns:auto 1fr;gap:3px 12px;align-items:baseline}.style-caption strong{font-size:13px;color:#d6dfc8;font-weight:550}.style-caption p{font-size:11px;color:#9b9f94;margin:0}.style-caption>span{grid-column:2;font-size:9px;color:#6d7565}.palette-presets{display:flex;gap:5px;margin-bottom:10px}.palette-presets button{background:#242721;color:#b7bcae;border:1px solid #3a4032;border-radius:4px;padding:5px 7px;font-size:9px;flex:1}.palette-presets button::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--swatch);margin-right:5px}.template canvas{background:#1c2022}.template:hover{border-color:#9aab81}.templates{row-gap:14px}.preview-head{margin-top:23px}@media(max-width:760px){.style-caption{display:block}.style-caption p{margin:4px 0}.template p{line-height:1.5}.templates{gap:9px}.badge{display:none}}
[hidden]{display:none!important}.catalog-hero{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:65px 0 55px}.catalog-hero h1{font-size:clamp(40px,4.5vw,68px);line-height:1.05;letter-spacing:-3px;margin:20px 0}.catalog-hero em{color:#d8ff75;font-style:normal}.catalog-hero p{max-width:460px;color:#a7a9b1;line-height:1.7}.hero-pills{display:flex;gap:18px;font-size:12px;color:#c9cbbf;margin-top:28px}.featured{position:relative;overflow:hidden;text-align:left;padding:0;background:#171b20;border:1px solid #42474b;border-radius:18px;cursor:pointer}.featured canvas{display:block;width:100%;height:auto}.featured>span,.featured>div{display:block;padding:12px 22px}.catalog-tabs{display:flex;gap:9px;flex-wrap:wrap;padding:24px 0;border-top:1px solid #303238;border-bottom:1px solid #303238}.catalog-tabs button{background:transparent;border:1px solid transparent;color:#aaaeb7;border-radius:30px;padding:12px 19px;cursor:pointer}.catalog-tabs button.active{color:#d8ff75;background:#d8ff7514;border-color:#d8ff7540}.catalog-heading{display:flex;align-items:center;justify-content:space-between;gap:25px;margin:40px 0 25px}.catalog-heading h2{font-size:30px;margin:8px 0}.catalog-heading p{color:#999ea8}.catalog-heading input{max-width:270px}.catalog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}.design-card{border:1px solid #30343c;border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;background:#1b1e24;transition:transform .2s,border-color .2s}.design-card:hover{transform:translateY(-4px);border-color:#b8d971}.card-visual{position:relative}.card-visual canvas{display:block;width:100%;height:auto}.card-open{position:absolute;right:14px;bottom:14px;background:#111a;border:1px solid #ffffff30;padding:8px 12px;border-radius:20px;font-size:11px;color:#fff;opacity:0;transition:opacity .2s}.design-card:hover .card-open,.design-card:focus-visible .card-open{opacity:1}.card-copy{padding:20px}.card-copy small{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#c4d894}.card-copy h3{font-size:17px;margin:10px 0}.card-copy p{font-size:12px;color:#9a9faa;margin:0}.editor-breadcrumb{display:flex;gap:14px;font-size:12px;padding:30px 0 0;color:#9ba1ad}.editor-breadcrumb a{color:#d8ff75;text-decoration:none}.editor-breadcrumb b{color:#e6e7eb}footer{padding:45px 0;color:#7c828e;font-size:12px}#screenFields label,#followFields label{display:block;margin-top:16px}#screenFields input,#followFields input{width:100%;margin-top:8px}@media(max-width:900px){.catalog-hero{gap:25px}.catalog-grid{grid-template-columns:repeat(2,1fr)}.catalog-heading{align-items:flex-start;flex-direction:column}}@media(max-width:600px){.catalog-hero{grid-template-columns:1fr;padding-top:25px}.catalog-grid{grid-template-columns:1fr}.catalog-tabs{gap:2px}.catalog-tabs button{padding:10px 12px}.catalog-hero h1{letter-spacing:-2px}.editor-breadcrumb span{display:none}}
.featured>div{padding:20px 24px}.featured .new-tag{display:block;font-size:10px;letter-spacing:1.8px;color:#c8e1ed;margin-bottom:10px}.featured strong{display:block;font-size:25px;margin-bottom:8px}.featured>div>span:last-child{display:block;font-size:12px;color:#aeb6bd}.featured b{float:right;color:#e6f1f5}
#editor[data-kind="extras"] label[for="title"],#editor[data-kind="extras"] #title,#editor[data-kind="extras"] label[for="logo"],#editor[data-kind="extras"] #removeLogo,#editor[data-kind="follow"] label[for="title"],#editor[data-kind="follow"] #title,#editor[data-kind="follow"] .label-row:has(label[for="intensity"]),#editor[data-kind="follow"] #intensity{display:none}
.catalog-heading label{display:flex;flex-direction:column-reverse;gap:8px;font-size:11px;color:#9a9faa;letter-spacing:.3px}.catalog-heading input{width:270px;max-width:100%;padding:13px 16px;background:#1b1e24;color:#f0f2ed;border:1px solid #383d45;border-radius:9px;font:inherit;font-size:13px;outline:none}.catalog-heading input:focus{border-color:#c5e782}
#atmosphereFields label{display:block;margin:16px 0 8px}#atmosphereFields input{width:100%;padding:12px 14px;border:1px solid #363b43;border-radius:7px;background:#202329;color:#f0f1f2;font:inherit}#atmosphereFields small{display:block;color:#9298a2;margin:10px 0;font-size:11px}



.export-grid{grid-template-columns:1fr}

.catalog-hero{display:block;padding:70px 0 55px}.catalog-hero h1{max-width:900px}.catalog-hero p{max-width:680px}@media(max-width:600px){.catalog-hero{padding:35px 0}}
main:has(#catalog:not([hidden])){padding-top:12px}
.catalog-hero{text-align:center;padding:18px 0 28px}
.catalog-hero h1{font-size:clamp(36px,4vw,56px);margin:12px auto 14px;letter-spacing:-2px}
.catalog-hero p{margin:10px auto;line-height:1.55}
.catalog-hero .eyebrow{margin:0 auto 12px}
.hero-pills{justify-content:center;flex-wrap:wrap;margin-top:18px;gap:16px}
.catalog-tabs{padding:16px 0}
.catalog-heading{margin:24px 0 20px}
@media(max-width:600px){.catalog-hero{padding:14px 0 24px}.catalog-hero h1{font-size:36px}.hero-pills{gap:12px}.catalog-heading{gap:12px;margin-top:20px}}

#logoSizeControl{margin:18px 0 12px}#logoSizeControl input{width:100%}
/* Expanded collections */
.catalog-tabs{flex-wrap:wrap;gap:8px}.catalog-tabs button{white-space:nowrap}.card-visual canvas{display:block}.settings select{width:100%;background:#222326;color:#eee;border:1px solid #3c4038;border-radius:8px;padding:13px;font:inherit}.settings input[type=file]:not(.file-input){display:block;width:100%;font-size:13px;padding:12px;border:1px dashed #4b5141;border-radius:8px;color:#b7bdaf}.settings input[type=file]::file-selector-button{background:#33392c;color:#e4eadc;border:0;border-radius:4px;padding:8px;margin-right:10px}.settings small{display:block;color:#92998a;line-height:1.6;margin-top:10px}.settings label output{float:right;color:#c7d0b9}.catalog-tabs{overflow:visible}.design-card{min-width:0}
/* Keep the way back visible throughout the editor. */
.editing main{padding-top:14px}.editor-breadcrumb{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:24px;padding:16px 0;margin:0 0 22px;background:#101113f5;border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}.editor-breadcrumb .catalog-back{display:inline-flex;align-items:center;gap:10px;flex-shrink:0;min-height:46px;padding:10px 17px;border:1px solid #576242;border-radius:10px;background:#242b1b;color:#e1ffad;font-size:14px;font-weight:650}.catalog-back:hover{background:#354327;border-color:var(--accent)}.editor-breadcrumb .catalog-back span{display:inline;font-size:21px;line-height:1}.editor-location{min-width:0;flex:1}.editor-breadcrumb .editor-location span{display:block;color:#9b9f94;font-size:11px;margin-bottom:2px}.editor-location h1{font-size:20px;line-height:1.3;letter-spacing:-.4px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.editor-breadcrumb .browse-all-link{font-size:13px;color:#c1c6b8;white-space:nowrap;padding:12px}.editor-breadcrumb .browse-all-link span{display:inline}.editing .style-caption strong{display:none}.editing .style-caption p{margin:0}.editing .preview-head{margin-top:18px}@media(max-width:600px){.editor-breadcrumb{gap:12px;flex-wrap:wrap;padding:12px 0;margin-bottom:16px}.editor-location{flex-basis:calc(100% - 190px)}.editor-location h1{font-size:16px}.editor-breadcrumb .catalog-back{min-height:44px;font-size:12px;padding:10px 12px}.editor-breadcrumb .browse-all-link{display:none}}
.ending-filters{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:18px 0 0}.ending-filters>span{color:var(--muted);font-size:12px;margin-right:8px}.ending-filters button{border:1px solid #34382f;border-radius:8px;background:#191c17;color:#b5bbae;padding:9px 14px;font-size:13px}.ending-filters button.active{color:#d8ff75;background:#29301d;border-color:#69734d}.ending-filters button:hover{border-color:#8d9e67}
.reminder-check{display:flex!important;align-items:center;gap:10px;margin:14px 0!important;font-size:13px!important}.reminder-check input{width:18px;height:18px;accent-color:var(--accent)}#reminderOptions{border-top:1px solid var(--line);margin-top:22px;padding-top:4px}
#editor[data-kind="follow"] label[for="title"],#editor[data-kind="follow"] #title{display:block}.reminder-check[hidden]{display:none!important}

.brand-name{white-space:nowrap}.brand-icon{flex-shrink:0}@media(max-width:380px){.brand{font-size:22px}}

/* Match the parent studio wordmark at causewecan.dev. */
header .brand{display:block;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:18px;font-weight:550;letter-spacing:-.04em;color:#f6f3f5;line-height:1.5}header .brand span{display:block;font-size:9px;font-weight:550;letter-spacing:.16em;text-transform:uppercase;margin-top:5px;color:#b8b7c3}@media(max-width:750px){header .brand{font-size:14px}header .brand span{font-size:8px;letter-spacing:.1em}}

header .brand{display:flex;align-items:center;gap:12px}header .brand .studio-logo{display:block;width:72px;height:72px;object-fit:contain;flex-shrink:0}header .brand .studio-wordmark{margin:0;font-size:18px;letter-spacing:-.04em;text-transform:none;color:#f6f3f5}header .studio-wordmark>span{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#b8b7c3;margin-top:5px}@media(max-width:750px){header .brand{gap:8px}header .brand .studio-logo{width:56px;height:56px}header .brand .studio-wordmark{font-size:14px}header .studio-wordmark>span{font-size:8px}}
/* Keep the live preview beside the controls throughout desktop editing. */
@media(min-width:761px){
 .editing .studio{position:sticky;top:94px;align-self:start;min-width:0}
 .editing .studio .stage{display:flex;justify-content:center;background:#171c20}
 .editing .studio .stage canvas{width:100%;height:auto;max-height:calc(100dvh - 320px);object-fit:contain}
 .editing .studio .style-caption{padding-top:0}
 .editing .studio #encodedPreview{max-height:35vh;overflow:auto}
}
@media(min-width:761px) and (max-height:520px){
 .editing .studio{top:88px}
 .editing .studio .style-caption,.editing .studio .preview-head,.editing .studio .metrics{display:none}
 .editing .studio .stage canvas{max-height:calc(100dvh - 170px)}
}

.platform-shortcuts {margin:0 auto 2rem;padding:1.25rem;border:1px solid #373b40;border-radius:14px;background:#191c20}
.platform-shortcuts h2 {margin:0;font-size:clamp(1.15rem,2vw,1.5rem)}
.platform-shortcuts p {margin:.4rem 0 1rem;color:#bcc0c5}
.platform-shortcuts div {display:flex;flex-wrap:wrap;gap:.65rem}
.platform-shortcuts a {display:inline-block;padding:.6rem .85rem;border-radius:.5rem;background:#25292c;color:#d9ff74}

header .brand .studio-wordmark{display:flex;align-items:baseline;gap:20px;font:700 28px/1.2 Arial,sans-serif;letter-spacing:-1px;color:#f4f5ef;white-space:nowrap}header .brand .studio-wordmark>span{display:inline;margin:0;font:700 12px/1.2 Arial,sans-serif;letter-spacing:3px;color:#d9ff74;text-transform:uppercase}@media(max-width:750px){header .brand .studio-wordmark{font-size:23px;gap:15px}header .brand .studio-wordmark>span{font-size:10px}}