/* Shared Paper Animators UI. Values and assets matched to motion-foundry/src/site-theme.css.
   Loaded after local component styles; never changes canvas output or media pixels. */
@font-face{font-family:'DM Sans';src:url('/assets/brand/DMSans-Variable.ttf') format('truetype');font-weight:100 1000;font-display:swap}
:root{--home-ink:#f1f2ec;--home-highlight:#cee6ac;--home-card:#1a1b19;--bg:#121311;--surface:#1b1d19;--border:#353831;--muted:#aab0a3;--accent:#d1eca9;--ink:var(--home-ink);--paper:var(--bg);--line:var(--border);--acid:var(--accent);--dark:#1a1d19;color:var(--home-ink);background:var(--bg);color-scheme:dark;font-family:'DM Sans',Arial,sans-serif}
:root[data-theme=light]{--home-ink:#252b22;--home-highlight:#657b42;--home-card:#fffdf6;--bg:#f5f3eb;--surface:#fffdf7;--border:#d7d8cd;--muted:#68705f;--accent:#657b42;color-scheme:light}
body{margin:0;font-family:'DM Sans',Arial,sans-serif;color:var(--home-ink);background-color:var(--bg);background-image:linear-gradient(#a4ae8c06 1px,transparent 1px),linear-gradient(90deg,#a4ae8c06 1px,transparent 1px),linear-gradient(#a4ae8c09 1px,transparent 1px),linear-gradient(90deg,#a4ae8c09 1px,transparent 1px);background-size:12px 12px,12px 12px,60px 60px,60px 60px}
:root[data-theme=light] body{background-image:linear-gradient(#3c49300a 1px,transparent 1px),linear-gradient(90deg,#3c49300a 1px,transparent 1px);background-size:12px 12px}
button,input,select,textarea{font-family:inherit}a,button{color:inherit}button{background:transparent;border-color:var(--border);border-radius:7px}button:hover{background:var(--surface)}button:disabled{opacity:.5;cursor:not-allowed}
:where(a,button,input,select,summary):focus-visible{outline:2px solid var(--accent);outline-offset:4px}
input::placeholder{color:var(--muted);opacity:.85}
.site-header{position:sticky;top:12px;z-index:50;max-width:1120px;width:calc(100% - 48px);height:63px;margin:12px auto 0;padding:0 19px;gap:23px;display:flex;flex-wrap:nowrap;align-items:center;border:1px solid var(--border);border-radius:17px;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(12px)}
.brand{font:800 22px/1.05 'DM Sans',Arial,sans-serif;letter-spacing:-.8px;display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--home-ink);white-space:nowrap}
.brand img{width:30px;height:30px;transform:none}.brand>span:not(.brand-icon){color:var(--home-ink)}.brand .brand-light{font-weight:750;color:#b8de85}
:root[data-theme=light] .brand .brand-light{color:#506f30}:root:not([data-theme=light]) .brand img{content:url('/assets/brand/logo-mark-dark.svg')}
.site-header nav{display:flex;flex-wrap:nowrap;gap:22px;margin-left:auto;width:auto;align-items:center}
.site-header nav a,.site-header nav button{font:500 12px 'DM Sans',sans-serif;text-decoration:none;padding:8px 0;border:0;border-radius:0;background:transparent;color:var(--muted);white-space:nowrap}
.site-header nav .active,.site-header nav a[aria-current=page],.site-header nav a:hover,.site-header nav button:hover{color:var(--home-ink);background:transparent}
.theme-toggle{display:grid;place-items:center;flex-shrink:0;width:30px;height:34px;font-size:22px;line-height:1;padding:0;border:0;color:var(--muted)}.theme-moon{display:none}:root[data-theme=light] .theme-moon{display:block}:root[data-theme=light] .theme-sun{display:none}
.header-cta{display:inline-flex;justify-content:center;align-items:center;white-space:nowrap;min-height:37px;padding:9px 15px;font-size:12px;font-weight:700;text-decoration:none;border:1px solid #fff;border-radius:7px;background:#f8f8f2;color:#181c15;box-shadow:0 2px 0 #aaa79a40}
main{max-width:1440px;padding:0 32px}.view{scroll-margin-top:110px}.eyebrow{color:var(--muted);font-size:10px;letter-spacing:1.6px;font-weight:700}
h1,h2,h3{font-family:'DM Sans',Arial,sans-serif;color:var(--home-ink)}em{font-family:inherit;font-style:normal;font-weight:inherit;color:var(--home-highlight)}
.intro{padding:42px 0 30px;gap:40px}.intro h1{font-weight:750;line-height:1.12;letter-spacing:-1.7px;font-size:clamp(32px,3.2vw,46px)}.intro>p{font-size:14px;max-width:410px}
.section-intro,.tools-intro{padding:58px 0 28px;max-width:900px;margin:auto;text-align:center;display:block}.section-intro h1,.tools-intro h1{font:800 clamp(36px,4.1vw,57px)/1.12 'DM Sans',sans-serif;letter-spacing:-2.1px;margin:0 auto 22px}.section-intro>p:last-child,.tools-intro p:not(.eyebrow){max-width:690px;margin:0 auto;font-size:16px;line-height:1.75}.section-intro>.eyebrow,.tools-intro .eyebrow{margin-bottom:20px}
.paper-heading{display:inline-block;position:relative;isolation:isolate;color:#181916;padding:2px 14px 6px;filter:drop-shadow(0 3px 3px #0004)}
.paper-heading:before{content:'';position:absolute;inset:0;z-index:-1;background:#f5f5ed;clip-path:polygon(0 9%,2% 4%,5% 7%,8% 1%,12% 5%,17% 1%,21% 6%,25% 3%,29% 6%,34% 1%,39% 4%,43% 0,48% 5%,53% 2%,58% 5%,63% 1%,68% 4%,73% 0,78% 5%,83% 1%,88% 6%,93% 1%,98% 5%,100% 11%,99% 22%,100% 36%,99% 49%,100% 61%,99% 77%,100% 91%,97% 97%,93% 94%,89% 99%,84% 95%,80% 100%,75% 96%,70% 99%,66% 94%,61% 98%,56% 95%,51% 100%,46% 95%,42% 99%,36% 95%,31% 100%,26% 96%,21% 99%,16% 95%,11% 99%,6% 95%,2% 99%,0 91%,1% 77%,0 66%,1% 51%,0 37%,1% 24%)}
.workspace{background:var(--bg);border-color:var(--border);grid-template-columns:210px minmax(320px,1fr) 290px;border-radius:10px}.catalog,.controls{background:var(--surface);border-color:var(--border)}.catalog{padding-top:24px}.effect-button.active{background:var(--bg);border-color:#6d7f59;box-shadow:none}.effect-button .saved{color:var(--accent)}.effect-button strong{font-size:12px}.effect-button small{font-size:10px}.rail-title{color:var(--muted)}.list-download{color:var(--home-ink)}
.editor{padding:26px 24px}.editor-heading h2{font-size:25px;letter-spacing:-.8px}.favorite{color:var(--muted)}.favorite[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--bg)}.stage{background:#1a1d19;border:1px solid #30352b}.stage-label{font-family:inherit;font-size:9px}.controls-heading{padding-bottom:22px;border-bottom:1px solid var(--border)}.controls h3{font-size:19px}.controls label{font-weight:500;font-size:12px}.control-pair{gap:10px}
label input:not([type=range]):not([type=color]),label select,.settings-panel select,.settings-panel input:not([type=checkbox]),.texture-search input{background:var(--bg);color:var(--home-ink);border-color:#606951;border-radius:6px;font-family:inherit}.hint,.effect-description,.use-note p{color:var(--muted)}.hint{font-size:11px}.transport input,input[type=range],.settings-panel .check-label input[type=checkbox]{accent-color:var(--accent)}.photo-slot{background:var(--bg)}
.primary,.settings-panel .primary,.texture-detail .texture-primary,.texture-actions a{background:#f8f8f2;color:#181c15;border:1px solid #fff;font-weight:700;box-shadow:0 2px 0 #aaa79a40}.primary:hover,.settings-panel .primary:hover,.texture-detail .texture-primary:hover,.texture-actions a:hover,.header-cta:hover{background:#e8ebdd;filter:none}.primary.ready{background:var(--accent);border-color:var(--accent);color:var(--bg)}.secondary{border-color:var(--border)}#status{font-size:11px;color:var(--muted)}#status.error{color:#f2ab95}:root[data-theme=light] #status.error{color:#9a3424}
.texture-toolbar{border-top:1px solid var(--border);padding-top:26px;margin-top:20px}.texture-search{font-size:12px;width:340px}.texture-filters button{border-radius:6px;background:var(--surface);color:var(--muted);border-color:var(--border);font-family:inherit;font-size:12px;padding:10px 14px}.texture-filters button:hover{background:var(--border);color:var(--home-ink)}.texture-filters button[aria-pressed=true]{background:#ededdf;color:#24291f;border-color:#ededdf}
.texture-card{background:var(--home-card);padding:7px 7px 0;border:1px solid var(--border);border-radius:9px;transition:border-color .2s}.texture-card:hover{border-color:#899477}.texture-preview-button{border-radius:4px;background:var(--surface)}#textureGrid .texture-card-details{padding:16px 9px 20px}#textureGrid h2{font-size:20px;font-weight:700}#textureGrid .texture-card-details>p:not(.eyebrow){font-size:11px}#textureGrid .texture-actions>*{font-size:11px}.texture-actions button{color:var(--home-ink)}
.texture-dialog{background:var(--surface);border-color:var(--border);color:var(--home-ink);border-radius:14px}.texture-dialog::backdrop{background:#080b08bd}.texture-full-preview{background:var(--bg)}.texture-empty,.texture-note{background:var(--surface);border-color:var(--border)}.texture-note h2{font-size:24px;font-weight:700}.texture-note p{font-size:14px}.texture-detail h2{font-size:32px}
.intro-stamp{display:none}.tools-strip{margin-top:22px;color:var(--muted);font-family:inherit;letter-spacing:1.5px}.tool-card{background:var(--home-card);border-color:var(--border);border-radius:9px}.tool-card:hover{border-color:#899477}.format-art{background:var(--bg);border-radius:5px;margin:14px -8px 4px;min-height:125px;padding:12px;gap:9px}.format-art span{background:#f0eee6;color:#24291f;border:1px solid #d7d8cd;border-radius:2px;font-size:12px}.format-art span:last-child{background:#d5e3b3;color:#1d2318}.format-art b{color:var(--muted)}.card-top{font-family:inherit}.tool-card h2{font-weight:700;font-size:21px}.tool-card p{font-size:14px}.open-tool{font-size:13px}.library-note{background:var(--surface);border:1px solid var(--border);color:var(--home-ink)}.library-note h2,.how-to h2,.related h2{font:700 28px/1.2 'DM Sans',sans-serif;letter-spacing:-.7px}.library-note p{color:var(--muted)}.library-note a{color:var(--accent)}
.converter-intro h1{font:750 clamp(34px,4vw,50px)/1.12 'DM Sans',sans-serif;letter-spacing:-1.6px}.converter-intro>p:last-child{font-size:16px;max-width:780px}.back-link{color:var(--muted)}.converter-layout{background:var(--bg);border-color:var(--border)}.settings-panel{background:var(--surface);border-color:var(--border)}.source-panel{background:var(--surface)}.drop-zone{background:var(--bg);border-color:#606951}.drop-zone.dragging{background:color-mix(in srgb,var(--accent) 15%,var(--bg))}.upload-symbol{background:transparent;color:var(--muted);border:0;font-family:inherit}.drop-zone strong{font-weight:600}.tip{border-color:var(--border)}.image-row{background:var(--bg)}.media-preview{background:#1a1d19;border-color:#30352b}.result-panel{background:var(--surface);border-color:#6d7f59}#outputSize{border-color:var(--border);color:var(--accent)}.related a{border-radius:6px;background:var(--surface)}.related a:hover{background:var(--border)}
.research-callout,.research-card{background:var(--surface);border:1px solid var(--border);color:var(--home-ink)}.research-card a{color:var(--accent)}.rank-row .keywords{background:var(--bg)}.tier{background:var(--bg);color:var(--accent)}.rank-number{color:var(--accent)}
.site-footer{max-width:1376px;margin:60px auto 0;padding:32px 0 28px;display:flex;justify-content:space-between;align-items:center;gap:28px;border-top:1px solid var(--border);font:13px 'DM Sans',sans-serif;letter-spacing:0}.site-footer .brand{font-size:22px}.site-footer p{font-size:12px;line-height:1.6;color:var(--muted)}.footer-links{display:flex;gap:22px;justify-content:flex-end;flex-wrap:wrap;max-width:540px}.footer-links a{color:var(--home-ink);text-decoration:none}.footer-links a:hover{text-decoration:underline}.footer-links small{width:100%;text-align:right;color:var(--muted);font-size:11px}
@media(min-width:1500px){.workspace{grid-template-columns:230px minmax(400px,1fr) 310px}}
@media(max-width:1440px){.site-footer{margin-left:32px;margin-right:32px}}
@media(max-width:1100px){.workspace{grid-template-columns:180px minmax(260px,1fr) 255px}.editor{padding:22px 16px}.controls{padding:22px 16px}.site-header{gap:16px}.site-header nav{gap:16px}.site-header .brand{font-size:20px}.effect-button strong{font-size:11px}.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.workspace{grid-template-columns:minmax(0,1fr) 270px}.catalog{grid-column:1/-1}.site-header .header-cta{display:none}.site-header nav{gap:18px}.intro>p{max-width:310px}}
@media(max-width:700px){.site-header{top:8px;margin-top:8px;width:calc(100% - 24px);height:auto;min-height:58px;padding:12px 14px 8px;gap:10px;border-radius:14px;flex-wrap:wrap}.site-header .brand{font-size:21px}.site-header .brand img{width:26px;height:26px}.site-header .theme-toggle{margin-left:auto;order:1}.site-header nav{order:2;flex-basis:100%;margin:0;justify-content:space-between;gap:8px;border-top:1px solid var(--border);padding-top:7px}.site-header nav a,.site-header nav button{font-size:12px;padding:8px 5px;min-height:34px}.site-header .header-cta{display:none}main{padding:0 18px}.intro{padding:30px 0 24px;display:block}.intro h1{font-size:36px}.intro>p{max-width:none;font-size:14px}.section-intro,.tools-intro{padding:38px 0 24px}.section-intro h1,.tools-intro h1{font-size:38px;letter-spacing:-1.5px}.section-intro>p:last-child,.tools-intro p:not(.eyebrow){font-size:14px;line-height:1.75}.paper-heading{padding:2px 10px 6px}.workspace{display:block}.controls{padding:24px;border-top:1px solid var(--border);border-left:0}.catalog{padding:14px}.stage{min-height:360px}.texture-toolbar{gap:14px}.texture-search{width:100%;font-size:11px}.texture-filters{gap:6px}.texture-filters button{font-size:11px;padding:9px 10px}#textureGrid .texture-card-details{padding:14px 5px}#textureGrid h2{font-size:18px}#textureGrid .texture-card-details>p:not(.eyebrow){font-size:10px}#textureGrid .texture-actions>*{font-size:11px}.texture-note{padding:22px}.texture-note h2{font-size:23px}.texture-note p{font-size:13px}.tools-strip{font-size:9px;letter-spacing:0}.tool-grid{gap:12px}.tool-card{padding:14px}.tool-card h2{font-size:19px}.tool-card p{font-size:13px}.format-art{margin:12px -5px 3px;min-height:100px;padding:8px;gap:6px}.format-art span{font-size:10px;padding:12px 6px}.converter-intro h1{font-size:36px}.converter-layout{grid-template-columns:1fr}.source-panel,.settings-panel{padding:22px}.site-footer{display:block;margin:42px 18px 0;padding:26px 0}.footer-links{justify-content:flex-start;gap:18px;margin-top:25px}.footer-links small{text-align:left}.site-footer .brand{font-size:21px}}
@media(max-width:380px){.tool-grid{grid-template-columns:1fr}.section-intro h1,.tools-intro h1{font-size:34px}.texture-toolbar{display:block}#textureCount{margin:14px 0 0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}.texture-card,.tool-card{transition:none}}
/* Five library destinations remain available on small screens. */
@media(max-width:700px){.site-header nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;align-items:stretch}.site-header nav a,.site-header nav button{white-space:normal;text-align:center;display:flex;align-items:center;justify-content:center;font-size:11px;line-height:1.35;padding:7px 3px;min-width:0;min-height:42px}}
/* Expanded creative-tool navigation and searchable effect catalogue. */
.site-header{max-width:1376px}.site-header nav{gap:12px}.site-header nav a,.site-header nav button{font-size:12px}.site-header .header-cta{display:none}.effect-search,.effect-filter{display:block;font-size:10px;margin-bottom:12px;color:var(--muted)}.effect-search input,.effect-filter select{display:block;width:100%;margin-top:7px;background:var(--bg);color:var(--home-ink);border:1px solid var(--border);padding:10px 8px;border-radius:5px;min-width:0;font:12px 'DM Sans'}.catalog #effects{max-height:760px;overflow-y:auto}.catalog #effectCount{font-size:10px;margin:10px 5px}.catalog .effect-button[hidden]{display:none!important}
@media(max-width:1100px){.site-header nav{gap:6px}.site-header nav a,.site-header nav button{font-size:11px}.site-header .brand{font-size:19px}}
@media(max-width:900px){.catalog #effects{max-height:230px}.effect-search,.effect-filter{display:inline-block;width:48%;margin-right:1%;vertical-align:top}}
@media(max-width:700px){.site-header nav{grid-template-columns:repeat(4,minmax(0,1fr))}.site-header nav a,.site-header nav button{font-size:10px;min-height:30px;padding:5px}.catalog #effects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-height:220px;overflow-x:hidden}.catalog .effect-button{min-width:0;width:100%;gap:8px}.catalog .effect-button strong{font-size:10px}.catalog .effect-button small{font-size:8px}.catalog .effect-button canvas{width:34px;height:38px;flex-shrink:0}.catalog .effect-button .saved{position:absolute;right:3px;top:1px}.view{scroll-margin-top:160px}}

/* Motion tool collections share the existing navigation. */
.site-header nav{flex-wrap:wrap;justify-content:flex-end}.new-motion+.workspace{margin-top:36px}