/* Product Studio — an original monochrome photography space inspired by Ascension. */
@font-face {
  font-family:'AaYuanWeiTuSi-2';
  src:url('/fonts/AaYuanWeiTuSi-2-web.woff2') format('woff2'),url('/fonts/AaYuanWeiTuSi-2-web.ttf') format('truetype');
  font-style:normal;
  font-weight:400;
  font-display:swap;
  unicode-range:U+3000-303F,U+3400-4DBF,U+4E00-9FFF,U+F900-FAFF,U+FE30-FE4F,U+FF00-FFEF;
}
:root {
  --bg:#080808; --surface:#141414; --ink:#ededeb; --muted:#a5a5a5;
  --line:#363636; --blue:#e5e7ee; --blue-hover:#fff; --blue-soft:#292a2e;
  --green:#c1d4c2; --error:#ffb5a9; --radius:4px; color-scheme:dark;
  --motion-ease:cubic-bezier(.2,.7,.2,1);
  --font:'AaYuanWeiTuSi-2','PingFang SC','Microsoft YaHei UI','Microsoft YaHei','Noto Sans SC',sans-serif;
}
html {scroll-padding-top:32px;}
body {font-size:14px; line-height:1.8; background:var(--bg);font-synthesis:none;}
body,button,a {cursor:auto;} button,a,summary {cursor:pointer;}
h1,h2,h3 {font-weight:700;}
.content-width {width:min(1344px,calc(100% - 80px));}
.site-header {height:92px;padding:0 40px;background:#080808;gap:26px;position:relative;z-index:10;border:0;}
.brand {font-size:24px;letter-spacing:.3px;color:var(--ink);line-height:1.1;gap:10px;font-weight:400;}
.brand-mark {display:block;flex-shrink:0;width:38px;height:38px;}
.brand-wordmark {display:block;}
.brand-name {width:108px;height:auto;}
.visually-hidden {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}
.hero-slogan {display:block;width:clamp(285px,28vw,390px);height:auto;}
.brand small {color:#ababab;font-family:Arial,sans-serif;font-size:9px;font-weight:500;letter-spacing:1px;margin-top:7px;}
.desktop-nav {font-size:12px;color:#bdbdbd;gap:35px;margin-left:auto;margin-right:auto;}
.desktop-nav a {min-height:44px;display:flex;align-items:center;}
.desktop-nav a:hover {color:#fff;}
.header-right {gap:21px;}
.demo-pill {font-size:10px;color:#aaa;}
.demo-pill>span:first-child {background:#dce4d8;width:4px;height:4px;}
.demo-pill .icon {width:13px;height:13px;}
.motion-toggle {background:none;border:0;color:#c8c8c8;padding:8px 0;min-height:40px;font-size:10px;display:flex;gap:9px;align-items:center;white-space:nowrap;}
.motion-toggle span {font-size:13px;}
.nav-toggle {display:none;}
.button {border-radius:3px;font-size:13px;min-height:46px;font-weight:600;padding:12px 20px;transition:background .2s,color .2s,border-color .2s;}
.button.primary {background:#ededed;color:#111;border-color:#ededed;}
.button.primary:hover:not(:disabled) {background:#fff;border-color:#fff;}
.button.secondary {background:transparent;color:#e4e4e4;border-color:#646464;}
.button.secondary:hover:not(:disabled) {background:#242424;border-color:#a3a3a3;}
.button.compact {min-height:40px;font-size:11px;padding:10px 15px;}
.text-link {color:#e4e4e4;min-height:40px;font-size:12px;text-underline-offset:5px;}
.text-link:hover {text-decoration:underline;}
.icon-button {border-radius:3px;}
.icon-button:hover {background:#333;}
.muted {color:#aaa;}
.skip-link {background:#eee;color:#111;}
#homeView {isolation:isolate;position:relative;}
#homeView::before {content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.6' filter='url(%23n)'/%3E%3C/svg%3E");background-size:180px;}
.cinema-hero {height:calc(100svh - 92px);min-height:628px;max-height:1050px;position:relative;overflow:hidden;perspective:1000px;--scene-progress:0;--pointer-x:0px;--pointer-y:0px;--pointer-rotate:0deg;}
.hero-scene {position:absolute;inset:0;pointer-events:none;}
.chrome-title {position:absolute;top:4px;left:50%;width:min(1450px,100%);height:auto;overflow:visible;transform:translateX(-50%) translateY(calc(var(--scene-progress) * -110px)) scale(calc(1 + var(--scene-progress) * .12));transform-origin:50% 35%;animation:chrome-entry 1.3s var(--motion-ease) both;will-change:transform;}
.portal-light {position:absolute;width:170px;height:270px;top:28%;left:50%;background:#b8bbc2;transform:translateX(-50%) perspective(500px) rotateX(-2deg);box-shadow:0 0 90px 25px #c5cbd122,inset 0 0 25px #fff5;opacity:.2;filter:blur(1px);}
.portal-light::after {content:"";position:absolute;inset:8px;background:linear-gradient(#b2b9c1,#f4f4ef);opacity:.5;}
.stage-floor {position:absolute;left:50%;top:65%;width:52%;height:10%;background:radial-gradient(ellipse,#b9bec32e,transparent 68%);transform:translateX(-50%) scale(calc(1 - var(--scene-progress) * .25));}
.product-drift {position:absolute;left:50%;top:25%;width:min(710px,57%);height:52%;transform:translateX(-50%) translate3d(var(--pointer-x),calc(var(--pointer-y) + var(--scene-progress) * 55px),0) rotate(var(--pointer-rotate));animation:product-entry 1.35s var(--motion-ease) both;will-change:transform;}
.hero-product {width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 30px #0008);animation:product-float 7s ease-in-out 1.4s infinite;}
.hero-product.product-fallback {border-radius:8px;}
.product-drift.product-photo {width:min(540px,43%);height:auto;aspect-ratio:1168/880;top:27%;}
.product-photo .hero-product {border-radius:12px;border:1px solid #787b84;object-fit:contain;box-shadow:0 14px 60px #0009;filter:none;}
.chrome-spark {position:absolute;width:32px;height:32px;background:#fff;clip-path:polygon(49% 0,55% 43%,100% 49%,56% 55%,51% 100%,44% 57%,0 51%,43% 44%);filter:drop-shadow(0 0 5px #fff);animation:spark-breathe 6s ease-in-out infinite;pointer-events:none;}
.spark-one {left:17%;top:21%;animation-delay:1s;}
.spark-two {left:59%;top:10%;width:26px;height:26px;animation-delay:3s;}
.spark-three {right:13%;top:28%;width:39px;height:39px;animation-delay:4.5s;}
.hero-spec {position:absolute;left:40px;right:40px;top:6px;display:flex;justify-content:space-between;color:#8f8f93;font-size:10px;letter-spacing:.3px;}
.hero-side-note {position:absolute;right:40px;top:51%;font-size:11px;color:#a3a3a5;line-height:1.8;text-align:right;}
.hero-scroll {position:absolute;left:40px;top:53%;font-size:11px;display:flex;align-items:center;gap:20px;color:#b7b7ba;}
.hero-scroll span {font-size:19px;}
.hero-bottom {position:absolute;left:0;right:0;bottom:58px;display:flex;justify-content:space-between;align-items:end;gap:30px;}
.hero-bottom h1 {font-size:clamp(28px,2.7vw,40px);font-weight:650;line-height:1.35;letter-spacing:-1.2px;}
.hero-bottom>div>p {font-size:12px;color:#a4a4a6;margin-top:13px;line-height:1.8;}
.hero-actions {width:282px;flex-shrink:0;border-radius:3px;}
.hero-upload {width:100%;min-height:57px;display:flex;justify-content:space-between;gap:30px;font-size:15px;padding:14px 20px;}
.hero-upload .icon {width:21px;height:21px;}
.hero-secondary {display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:7px;font-size:10px;color:#999;}
.hero-secondary .text-link {font-size:11px;min-height:34px;}
.hero-actions>p {font-size:9px!important;margin-top:3px!important;color:#939397!important;}
.hero-actions.dragging {outline:2px dashed #ddd;outline-offset:10px;background:#292929;}
.hero-footnote {position:absolute;bottom:16px;left:0;right:0;display:flex;justify-content:space-between;color:#8c8c91;font-size:9px;}
.comparison-section {padding-block:100px 80px;display:grid;grid-template-columns:.8fr 1.2fr;gap:7%;align-items:center;}
.comparison-intro {align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;padding-block:0 35px;}
.section-index {color:#a1a1a5;font-size:11px;display:block;}
.comparison-intro h2 {font-size:clamp(38px,4.5vw,64px);line-height:1.25;letter-spacing:-2px;font-weight:600;}
.comparison-intro p {font-size:13px;color:#aaa;line-height:1.9;margin-top:23px;}
.hero-visual {padding:0;min-width:0;}
.visual-header {color:#aaa;font-size:10px;display:flex;justify-content:space-between;gap:14px;margin-bottom:13px;}
.hero-comparison {border-radius:3px;aspect-ratio:1.5;background:#e5e6e8;border:1px solid #4c4c4c;overflow:hidden;}
.hero-comparison img {object-fit:contain;}
.hero-before {background:#bfc2c3;}
.hero-after {background:#e8edf0;}
.photo-label {top:14px;border:1px solid #ffffff2b;background:#101010d9;color:#eee;font-size:10px;border-radius:2px;padding:5px 9px;}
.photo-label.left {left:14px;}.photo-label.right {right:14px;}
.comparison-divider {border-color:#e9e9e9;}
.comparison-divider>span {width:34px;height:36px;left:-18px;border-radius:2px;background:#e9e9e9;color:#222;box-shadow:none;}
.visual-footer {margin:0;padding:9px 0;background:transparent;border:0;border-bottom:1px solid #373737;border-radius:0;gap:8px;}
.visual-footer .text-link {font-size:11px;min-height:40px;}
.hero-example-tabs {display:flex;gap:8px;}
.hero-example-tabs button {min-height:40px;padding:7px 10px;border:1px solid transparent;border-radius:3px;background:none;color:#aaa;font-size:11px;}
.hero-example-tabs button[aria-pressed=true] {border-color:#666;color:#eee;background:#202020;}
.asset-disclosure {font-size:10px;color:#999;margin-top:11px;line-height:1.8;}
.process-strip {border-color:#424242;padding:30px 0;margin-top:0;}
.process-strip>div {column-gap:16px;}
.process-strip>div>span {font:22px/1.2 var(--font);border:0;border-radius:0;color:#ccc;width:30px;height:40px;}
.process-strip strong {font-size:13px;font-weight:500;}
.process-strip small {color:#999;font-size:10px;margin-top:3px;}
.process-strip>.icon {color:#777;width:15px;}
.section-heading {margin-bottom:38px;gap:30px;align-items:end;}
.section-heading h2 {font-size:clamp(32px,3.5vw,49px);font-weight:600;letter-spacing:-1.5px;line-height:1.3;}
.section-kicker {font-size:11px;color:#aaa;letter-spacing:0;margin-bottom:21px;line-height:1.5;}
.section-heading>p,.section-heading>.small {font-size:12px;color:#aaa;text-align:right;line-height:1.9;}
.use-section {padding-block:100px;}
.use-grid {gap:0;border-top:1px solid #444;}
.use-item {border:0;padding:30px 25px 10px 0;gap:15px;flex-direction:column;position:relative;min-height:208px;}
.use-item+.use-item {padding-left:28px;border-left:1px solid #3b3b3b;}
.use-item>svg:first-child {color:#c5c5cb;width:27px;height:27px;margin-bottom:8px;}
.use-item>svg:last-child {color:#aaa;position:absolute;right:25px;top:31px;width:18px;}
.use-item h3 {font-size:19px;font-weight:550;margin-bottom:10px;}
.use-item p {font-size:12px;color:#a3a3a3;}
.use-item small {font-size:11px;color:#bbb;margin-top:20px;}
.examples-section {padding-block:10px 95px;}
.example-grid {gap:28px;}
.example-image {border-radius:3px;aspect-ratio:1.5;background:#e5e9eb;overflow:hidden;}
.example-image img {object-fit:contain;transition:transform .8s var(--motion-ease);}
.example-tile:hover img {transform:scale(1.025);}
.example-image>span {bottom:14px;left:14px;background:#141414e8;border-color:#777;color:#ddd;border-radius:2px;font-size:10px;}
.example-tile>div:last-child {padding-block:21px;border-bottom:1px solid #3d3d3d;}
.example-tile h3 {font-size:20px;font-weight:550;}
.example-tile p {font-size:12px;color:#aaa;margin-top:6px;}
.example-tile .icon {top:26px;color:#ddd;}
.principles-section {border-color:#3d3d3d;padding-block:65px;gap:10%;grid-template-columns:1fr 1fr;}
.principle-icon {background:none;border:1px solid #737373;border-radius:50%;width:43px;height:43px;color:#ddd;margin-bottom:26px;}
.principles-section h2 {font-size:36px;line-height:1.45;font-weight:550;letter-spacing:-1px;}
.principles-section>div>p {color:#aaa;font-size:13px;line-height:1.9;margin:20px 0 12px;}
.principle-list {gap:23px;}
.principle-list h3 {font-size:15px;font-weight:550;}
.principle-list p {font-size:12px;color:#aaa;max-width:460px;}
.principle-list article+article {border-color:#333;padding-top:21px;}
.guide-section {padding-block:100px 75px;}
.guide-table {background:#121212;border-color:#414141;border-radius:3px;}
.guide-table>div {padding:30px 26px;}
.guide-table>div+div {border-color:#414141;}
.guide-table strong {font-size:15px;}
.guide-table span {font-size:15px;color:#ddd;margin-top:18px;}
.guide-table p {font-size:12px;color:#aaa;margin-top:10px;}
.questions-section {display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;padding-block:10px 90px;}
.questions-section h2 {font-size:36px;font-weight:550;letter-spacing:-1px;}
.question-list details {border-bottom:1px solid #414141;}
.question-list details:first-child {border-top:1px solid #414141;}
.question-list summary {min-height:65px;display:flex;align-items:center;justify-content:space-between;list-style:none;cursor:pointer;font-size:13px;gap:20px;}
.question-list summary::-webkit-details-marker {display:none;}
.question-list summary span {font-size:23px;color:#bbb;}
.question-list details[open] summary span {transform:rotate(45deg);}
.question-list p {font-size:12px;color:#aaa;line-height:1.95;padding:0 20px 24px 0;}
.final-cta {padding:45px 0 70px;border-top:1px solid #444;display:flex;justify-content:space-between;align-items:end;gap:30px;}
.final-cta h2 {font-size:clamp(34px,4.5vw,64px);font-weight:550;letter-spacing:-2px;line-height:1.25;}
.final-cta .button {width:260px;justify-content:space-between;min-height:54px;}
.final-cta>div>p:last-child:not(.section-kicker) {font-size:11px;color:#999;margin-top:15px;}
.site-footer {border-color:#3a3a3a;padding-block:25px 35px;}
.site-footer .brand {font-size:18px;}.site-footer p,.site-footer .text-link {font-size:11px;color:#999;}
.brand-symbol {border-color:#ddd;border-radius:3px;}.brand-symbol i {border-color:#ddd;}.brand-symbol::before,.brand-symbol::after {background:#080808;}
/* Image work stays neutral and steady. Motion belongs to the presentation. */
body.in-studio .site-header {height:66px;padding-inline:24px;border-bottom:1px solid #333;}
body.in-studio .brand {font-size:21px;}body.in-studio .brand small {display:none;}
body.in-studio .brand-mark {width:30px;height:30px;}
body.in-studio .brand-name {width:94px;}
body.in-studio .header-right>a,body.in-studio .motion-toggle {display:none;}
body.in-studio .desktop-nav {font-size:11px;gap:28px;}
.studio-view {min-height:calc(100dvh - 66px);animation:workspace-in .35s var(--motion-ease) both;}
.studio-top {height:53px;padding-inline:24px;background:#121212;border-color:#343434;}
.project-name {font-size:12px;gap:12px;}.project-name>a,.project-name>span {color:#aaa;}
.session-label {border-color:#555;font-size:9px;border-radius:2px;}
.studio-steps {font-size:11px;gap:27px;}.studio-steps li {color:#999;}
.studio-steps li::before {border-color:#555;border-radius:3px;width:22px;height:22px;}
.studio-steps li.active::before {background:#ddd;color:#111;border-color:#ddd;}
.studio-steps li.done::before {color:#eee;background:#2c2c2c;border-color:#555;}
.studio-top-actions {gap:20px;}.studio-top-actions .text-link {font-size:10px;}
.studio-grid {height:calc(100dvh - 119px);min-height:0;grid-template-columns:200px minmax(0,1fr) 310px;}
.assets-panel {padding:22px 14px;background:#131313;border-color:#333;overflow:auto;}
.panel-heading {margin-bottom:16px;min-height:32px;}.panel-heading h2 {font-size:14px;}
.panel-heading h2>span {color:#aaa;font-size:11px;margin-left:5px;}.panel-heading .text-link {font-size:11px;}
.batch-label {font-size:10px;color:#aaa;margin-bottom:6px;}
select,input[type=number],textarea {background:#222;border-color:#505050;color:var(--ink);border-radius:3px;}
.assets-panel select {font-size:11px;min-height:39px;padding:8px;}
.add-images {margin:12px 0 21px;min-height:40px;font-size:11px;}
.asset-list {max-height:none;gap:10px;padding:2px;flex-shrink:0;}
.asset-item {grid-template-columns:49px minmax(0,1fr) 11px;padding:7px;gap:8px;min-height:71px;border-color:#454545;background:#1d1d1d;border-radius:3px;width:100%;}
.asset-item.active {border-color:#d1d1d1;box-shadow:none;background:#2c2c2c;}
.asset-item img {width:49px;height:49px;border-radius:1px;background:#aaa;}
.asset-item strong {font-size:11px;}.asset-item small {font-size:9px;color:#aaa;}
.asset-item .icon {color:#d3ded0;width:12px;}.asset-item.failed {border-color:#b47a70;}
.asset-remove {font-size:10px;min-height:30px;margin-top:2px;color:#aaa;}
.batch-section {margin-top:25px;padding-top:22px;border-color:#3e3e3e;}
.batch-section strong {font-size:12px;}.batch-section p {font-size:10px;color:#aaa;line-height:1.9;}
.batch-section .button {font-size:10px;min-height:39px;padding-inline:5px;}.batch-section .text-link {font-size:10px;}
.batch-section>.small,.session-note {font-size:10px;color:#a0a0a0;}.session-note {padding-top:30px;}
.preview-panel {background:#232323;padding:0 24px 12px;overflow:auto;}
.preview-toolbar {padding-block:10px 8px;gap:10px;position:sticky;top:0;z-index:6;background:#232323;}
.view-tabs {background:#141414;border-color:#505050;border-radius:4px;gap:1px;padding:3px;}
.view-tabs button {font-size:11px;color:#b3b3b3;min-height:36px;padding:7px 10px;border-radius:2px;}
.view-tabs button[aria-pressed=true] {background:#4b4b4b;color:#fff;box-shadow:none;}
.zoom-tools>.icon-button {width:28px;color:#ddd;}.zoom-reset {color:#ccc;font-size:10px;}
.preview-meta {font-size:10px;color:#bbb;padding-block:3px 9px;}
.preview-stage {border-color:#646464;background:#d9dcdf;border-radius:3px;height:clamp(240px,calc(100dvh - 500px),680px);min-height:240px;}
.stage-viewport {padding:24px 12px;}.preview-status {font-size:10px;color:#333;background:#f7f7f2ed;left:12px;top:12px;border-radius:2px;}
.preview-status.error {color:#802a20;background:#ffe9e2;}
.preview-status.busy::before {border-color:#aaa;border-top-color:#333;}
.image-stage[data-mode=side] {gap:9px;}.image-stage[data-mode=side] figure {background:#e1e3e5;}
.image-stage figcaption {color:#eee;background:#1d1d1de8;font-size:9px;border-radius:2px;}
.stage-divider {border-color:#ddd;}.stage-divider>span {background:#eee;color:#222;border-radius:2px;}
.drop-overlay {background:#242424ee;color:#eee;border-color:#ddd;}
.empty-preview {color:#5d5d5d;}.empty-preview h3 {color:#333;}.empty-preview p {font-size:12px;}
.result-description {padding-top:12px;}.result-description strong {font-size:14px;}.result-description p {font-size:11px;color:#bbb;}
.favorite-button[aria-pressed=true] {color:#fff;}.favorite-button[aria-pressed=true] svg {fill:#bbb7;}
.results-heading {margin-top:5px;font-size:11px;}.results-heading span {color:#aaa;}.results-heading .text-link {font-size:10px;}
.result-list {padding:5px 1px 10px;min-height:106px;height:106px;gap:10px;}
.result-card {border-color:#606060;border-radius:3px;background:#181818;min-width:125px;width:125px;padding:4px 4px 7px;}
.result-card[aria-pressed=true] {border-color:#eee;box-shadow:none;}
.result-card img {height:50px;background:#ddd;border-radius:1px;object-fit:contain;}
.result-card strong {font-size:10px;}.result-card>span {font-size:9px;color:#bbb;}
.preview-footer {margin-top:auto;border-color:#525252;padding:13px 0 4px;gap:8px;position:sticky;bottom:-12px;background:#232323;z-index:6;}
.preview-footer>span {font-size:9px;color:#b5b5b5;}.preview-footer .button {font-size:11px;min-height:41px;padding-inline:13px;}
.settings-panel {background:#151515;border-color:#333;padding:21px 20px 0;overflow:hidden;}
.settings-scroll {overflow:auto;min-height:0;padding:0 4px 18px 1px;scrollbar-width:thin;scrollbar-color:#656565 transparent;}
.settings-panel .panel-heading {margin-bottom:13px;}
.mode-tabs {background:#101010;border-color:#505050;border-radius:3px;}
.mode-tabs button {color:#b5b5b5;min-height:36px;font-size:12px;border-radius:2px;}
.mode-tabs button[aria-pressed=true] {background:#383838;color:#fff;border-color:#666;box-shadow:none;}
.setting-help {color:#aaa;font-size:10px;line-height:1.8;margin-top:9px;}.setting-help.warning {color:#e7c988;}
.settings-panel fieldset {margin-top:23px;}.settings-panel legend {font-size:12px;margin-bottom:12px;gap:9px;}
.step-number {border-color:#666;color:#ccc;border-radius:2px;width:20px;height:20px;font-size:10px;}
.usage-options {gap:6px;}.usage-options label>span {border-color:#505050;font-size:11px;min-height:39px;border-radius:3px;padding:8px 10px;}
.usage-options .icon {color:#bbb;}
.usage-options input:checked+span,.style-grid input:checked+span {color:#fff;background:#36383c;border-color:#c4c6cf;}
.usage-options input:checked+span .icon {color:#fff;}
.style-grid {gap:7px;}.style-grid label>span {font-size:11px;border-color:#505050;border-radius:3px;min-height:42px;padding:8px;gap:7px;}
.style-grid label:has(input:disabled) {opacity:.55;}.swatch {border-color:#aaa;border-radius:2px;width:19px;height:19px;}
.swatch.natural {background:#9aab94;}
.future-label,.local-label {background:#343434;color:#ccc;border-radius:2px;font-size:9px;padding:2px 5px;}
.custom-description {font-size:11px;}.custom-description textarea {font-size:12px;min-height:90px;}
.local-settings {border-block:1px solid #454545;margin-top:22px;}
.local-settings>summary {display:flex;align-items:center;justify-content:space-between;list-style:none;min-height:46px;cursor:pointer;font-size:12px;}
.local-settings>summary::-webkit-details-marker {display:none;}.local-settings>summary .icon {width:14px;height:14px;}
.local-settings[open]>summary .icon {transform:rotate(180deg);}
.local-settings fieldset {margin-top:2px;padding-bottom:10px;}
.local-settings legend {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
.range-setting {margin-block:14px 20px;}.range-setting label,.range-setting output {font-size:11px;}
.range-setting small {color:#aaa;font-size:10px;}.range-setting output {color:#bbb;}
.range-setting input {height:5px;margin-top:12px;}
.protected-text-label {font-size:11px;color:#ddd;margin-top:17px;}
.protected-text-label input {background:#252525;border-color:#656565;color:var(--ink);border-radius:3px;font-size:11px;min-height:41px;}
.protected-text-label>span {color:#aaa;font-size:10px;}
.protection {background:#252728;border-color:#60646a;border-radius:3px;padding:12px 10px;margin-top:18px;gap:9px;}
.protection strong {font-size:12px;}.protection>div>span {color:#b0b4ba;font-size:9px;}.protection>.icon {color:#ddd;}
.switch>span {width:33px;height:20px;background:#666;}.switch>span::after {width:14px;height:14px;background:#222;}
.switch input:checked+span::after {transform:translateX(13px);}
.advanced {border-color:#454545;margin-top:17px;}.advanced summary {min-height:46px;font-size:12px;}
.advanced>div,.advanced select {font-size:11px;}.advanced select {min-height:35px;}
.settings-message {background:#252525;color:#bbb;font-size:10px;border-radius:2px;padding:10px;margin-top:5px;}
.generate-area {background:#151515;border-color:#444;padding:15px 0 16px;}
.generate-area>div {font-size:10px;color:#bbb;}.generate-area>div strong {font-size:10px;color:#ccc;}
.generate-area .button {min-height:46px;font-size:13px;}.generate-area>p {font-size:9px;color:#aaa;}
.panel-scrim {background:#000b;backdrop-filter:blur(2px);}
/* Export and AI confirmations remain legible and predictable. */
dialog {background:#1b1b1b;color:#eee;border-color:#656565;border-radius:6px;padding:28px;box-shadow:0 24px 100px #0008;}
dialog::backdrop {background:#000b;backdrop-filter:blur(5px);}
.dialog-heading h2 {font-size:22px;line-height:1.4;}.dialog-heading p {color:#aaa;font-size:10px;}
.export-summary {background:#2b2b2b;border-color:#505050;border-radius:3px;}
.export-summary strong {font-size:12px;}.export-summary span,.export-summary small {font-size:10px;color:#bbb;}
.export-form-grid label,.quality-label,.print-check>label {font-size:12px;}
.export-form-grid select,.export-form-grid input {min-height:42px;font-size:12px;}
.export-help,.print-check>div {font-size:11px;color:#bbb;}.print-check .warn {color:#e8cb90;}.quality-label output {color:#bbb;}
.export-size {background:#2a2a2a;border-radius:3px;font-size:10px;color:#bbb;}.export-size>span:first-child {color:#ddd;}
.info-dialog>p,.info-dialog dd {color:#bbb;font-size:12px;}.info-dialog dt {color:#eee;font-size:12px;}
.review-confirm {background:#303237;border:1px solid #666a74;border-radius:3px;font-size:11px;}
.dialog-actions .button {font-size:12px;min-height:43px;}.inline-error {color:#ffd5ca;background:#54352c;}
.toast {background:#e4e4e4;color:#171717;border:1px solid #fff;border-radius:3px;font-size:12px;box-shadow:0 6px 30px #0005;}
/* Motion: one hero sequence, input-driven parallax, and a restrained editorial reveal. */
.motion-ready .reveal-line {opacity:.15;transform:translateY(24px);transition:opacity .8s var(--motion-ease),transform .8s var(--motion-ease);}
.motion-ready .reveal-line.is-visible {opacity:1;transform:none;}
.motion-paused *, .scene-idle .hero-scene * {animation-play-state:paused!important;}
.motion-paused .chrome-title {transform:translateX(-50%)!important;opacity:1!important;}
.motion-paused .product-drift {transform:translateX(-50%)!important;opacity:1!important;}
.motion-paused .hero-product {transform:none!important;}
.motion-paused .reveal-line {opacity:1;transform:none;transition:none;}
.motion-opt-in .chrome-title {animation:chrome-entry 1.3s var(--motion-ease) both!important;}
.motion-opt-in .product-drift {animation:product-entry 1.35s var(--motion-ease) both!important;}
.motion-opt-in .hero-product {animation:product-float 7s ease-in-out 1.4s infinite!important;}
.motion-opt-in .chrome-spark {animation:spark-breathe 6s ease-in-out infinite!important;}
.motion-opt-in .spark-one {animation-delay:1s!important;}.motion-opt-in .spark-two {animation-delay:3s!important;}.motion-opt-in .spark-three {animation-delay:4.5s!important;}
.motion-opt-in .reveal-line {transition:opacity .8s var(--motion-ease),transform .8s var(--motion-ease)!important;}
body.motion-paused .hero-scene *,body.scene-idle .hero-scene * {animation-play-state:paused!important;}
.hero-comparison:focus-within,.image-stage:focus-within {outline:3px solid #5e7be0;outline-offset:3px;}
@keyframes chrome-entry {from{opacity:0;filter:blur(10px);}to{opacity:1;filter:blur(0);}}
@keyframes product-entry {from{opacity:0;filter:blur(9px);}to{opacity:1;filter:blur(0);}}
@keyframes product-float {0%,100%{transform:translateY(0) rotate(-2deg);}50%{transform:translateY(-14px) rotate(1deg);}}
@keyframes spark-breathe {0%,100%{opacity:.25;transform:scale(.7) rotate(0);}50%{opacity:.9;transform:scale(1.08) rotate(8deg);}}
@keyframes workspace-in {from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@media(min-width:1600px) {
  .studio-grid {grid-template-columns:220px minmax(0,1fr) 340px;}.settings-panel {padding-inline:25px;}.preview-panel {padding-inline:32px;}
  .preview-stage {height:clamp(380px,calc(100dvh - 500px),780px);}
  .chrome-title {width:1480px;top:10px;}
}
@media(max-width:1180px) {
  .content-width {width:calc(100% - 64px);}.site-header {padding-inline:32px;gap:22px;height:84px;}
  .desktop-nav {gap:23px;font-size:11px;}.header-right {gap:17px;}.header-right .demo-pill {display:none;}
  .cinema-hero {height:calc(100svh - 84px);min-height:620px;}
  .hero-spec {left:32px;right:32px;}.hero-side-note {right:32px;}.hero-scroll {left:32px;}
  .chrome-title {top:20px;width:106%;}
  .product-drift {width:62%;top:24%;height:52%;}
  .hero-bottom h1 {font-size:30px;}.hero-bottom>div>p {font-size:11px;}
  .hero-actions {width:255px;}.hero-bottom {bottom:55px;}
  .comparison-section {gap:5%;padding-block:80px 65px;}
  .comparison-intro h2 {font-size:45px;}.comparison-intro p {font-size:12px;}
  .studio-grid {grid-template-columns:184px minmax(0,1fr) 288px;}.settings-panel {padding-inline:16px;}.preview-panel {padding-inline:18px;}
  .view-tabs button {font-size:10px;padding-inline:8px;}.zoom-tools>.icon-button {width:24px;}.zoom-reset {width:32px;}
  .studio-top-actions {gap:12px;}.studio-top-actions .text-link {font-size:9px;}.studio-steps {gap:20px;font-size:10px;}
  .asset-item {grid-template-columns:42px minmax(0,1fr) 9px;gap:7px;}.asset-item img {width:42px;height:47px;}.asset-item strong {font-size:10px;}
  .batch-section .button {font-size:9px;}#providerSummary {max-width:115px;}
}
@media(max-width:950px) {
  .site-header {gap:16px;}.desktop-nav {gap:18px;}.header-right .button {font-size:10px;padding-inline:12px;}
  .brand {font-size:22px;}.brand-mark {width:33px;height:33px;}.motion-toggle {font-size:10px;}
  .hero-bottom h1 {font-size:27px;}.hero-actions {width:225px;}
  .product-drift {width:70%;height:50%;top:25%;}.chrome-title {top:35px;width:110%;}
  .hero-spec {font-size:9px;}.hero-side-note {font-size:10px;}
  .comparison-section {grid-template-columns:1fr;gap:30px;}.comparison-intro {flex-direction:row;padding:0;gap:30px;}
  .comparison-intro>div {width:65%;}.comparison-intro h2 {font-size:42px;}.comparison-intro h2 br {display:none;}
  .comparison-intro p {margin-top:13px;}.comparison-intro p br {display:none;}
  .visual-header {font-size:11px;}.use-item {padding-right:20px;}.use-item+.use-item {padding-left:20px;}
  .process-strip small {font-size:9px;}.process-strip>div {column-gap:8px;}.process-strip>.icon {width:12px;}
  .studio-grid {grid-template-columns:minmax(0,1fr) 300px;}
  .assets-panel {position:fixed;inset:0 auto 0 0;width:290px;z-index:24;transform:translateX(-110%);}
  .assets-panel.open {transform:translateX(0);}
  .assets-panel .panel-heading .mobile-only,.preview-toolbar>.mobile-only {display:flex;}
  .studio-steps {display:none;}.preview-stage {height:400px;}
  .preview-toolbar {gap:5px;flex-wrap:wrap;}.view-tabs {flex:1;}.view-tabs button {flex:1;padding-inline:7px;}
  .zoom-tools {margin-left:auto;}.preview-footer>span {display:none;}
  .asset-item {grid-template-columns:55px minmax(0,1fr) 16px;}.asset-item img {width:55px;height:55px;}.asset-item strong {font-size:12px;}.asset-item small {font-size:10px;}
  .batch-section .button {font-size:11px;}.questions-section {gap:40px;}
}
@media(max-width:700px) {
  .content-width {width:calc(100% - 40px);}
  .site-header {height:74px;padding-inline:20px;gap:12px;}
  .brand {font-size:23px;letter-spacing:.3px;gap:8px;}.brand small {font-size:8px;margin-top:5px;display:block;letter-spacing:.8px;}
  .brand-mark {width:33px;height:33px;}
  .brand-name {width:100px;}
  .hero-slogan {width:min(310px,100%);height:auto;}
  .header-right {gap:14px;}.header-right>a.button {display:none;}.motion-toggle {font-size:9px;min-height:44px;}
  .nav-toggle {display:flex;width:34px;height:44px;flex-direction:column;gap:6px;padding:6px;border-color:#555;}
  .nav-toggle span {display:block;width:17px;height:1px;background:#ddd;}
  .nav-toggle[aria-expanded=true] span:first-child {transform:translateY(3.5px) rotate(45deg);}
  .nav-toggle[aria-expanded=true] span:last-child {transform:translateY(-3.5px) rotate(-45deg);}
  .desktop-nav {display:none;}
  .desktop-nav.open {display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;padding:10px 20px;background:#181818;border-block:1px solid #555;}
  .desktop-nav a {min-height:47px;font-size:13px;border-bottom:1px solid #383838;}.desktop-nav a:last-child {border:0;}
  .cinema-hero {height:calc(100svh - 74px);min-height:655px;max-height:800px;}
  .hero-spec {left:20px;right:20px;font-size:8px;top:8px;}
  .hero-spec>span:last-child {max-width:43%;text-align:right;}
  .chrome-title {top:58px;width:110%;max-width:none;}
  .portal-light {top:27%;height:185px;width:95px;box-shadow:0 0 60px #fff3;opacity:.2;}
  .product-drift {width:100%;height:37%;top:24%;max-width:520px;}
  .product-drift.product-photo {width:78%;height:auto;top:26%;max-width:430px;}
  .product-photo .hero-product {border-radius:9px;}
  .hero-product {animation-name:product-float-mobile;}
  .motion-opt-in .hero-product {animation-name:product-float-mobile!important;}
  .stage-floor {top:56%;width:86%;height:7%;}
  .chrome-spark {width:21px;height:21px;}.spark-one {left:14%;top:20%;}.spark-two {top:12%;left:69%;width:16px;height:16px;}.spark-three {top:27%;right:11%;width:23px;height:23px;}
  .hero-side-note {display:none;}
  .hero-scroll {left:auto;right:20px;top:56%;font-size:9px;gap:10px;}
  .hero-bottom {bottom:54px;display:block;width:calc(100% - 40px);}
  .hero-bottom h1 {font-size:28px;font-weight:550;letter-spacing:-.8px;line-height:1.4;}
  .hero-bottom h1 br {display:block;}
  .hero-bottom>div>p {font-size:11px;margin-top:9px;max-width:290px;}
  .hero-actions {width:100%;margin-top:23px;}
  .hero-upload {min-height:51px;font-size:14px;padding:13px 18px;}
  .hero-secondary {padding-top:6px;font-size:9px;}.hero-secondary .text-link {min-height:34px;font-size:11px;}
  .hero-actions>p {font-size:8px!important;}
  .hero-footnote {font-size:8px;bottom:16px;gap:15px;line-height:1.7;}.hero-footnote>span:last-child {text-align:right;max-width:45%;}
  .comparison-section {padding-block:55px 35px;gap:24px;}
  .comparison-intro {display:block;}.section-index {font-size:10px;margin-bottom:18px;}
  .comparison-intro>div {width:100%;}.comparison-intro h2 {font-size:35px;letter-spacing:-1px;}
  .comparison-intro p {font-size:12px;line-height:1.8;margin-top:14px;max-width:320px;}
  .visual-header {font-size:9px;margin-bottom:10px;gap:10px;}
  .photo-label {top:10px;font-size:9px;padding:4px 7px;}.photo-label.left {left:9px;}.photo-label.right {right:9px;}
  .visual-footer {padding:7px 0;}.hero-example-tabs {gap:2px;}.hero-example-tabs button {min-height:42px;font-size:11px;padding-inline:9px;}
  .visual-footer .text-link {min-height:42px;font-size:10px;}.asset-disclosure {font-size:9px;line-height:1.9;}
  .process-strip {display:grid;grid-template-columns:1fr 1fr;padding:22px 0;gap:24px 12px;}.process-strip>.icon {display:none;}
  .process-strip>div {column-gap:10px;}.process-strip>div>span {font-size:22px;width:24px;height:35px;}
  .process-strip strong {font-size:12px;}.process-strip small {font-size:9px;}
  .section-heading {display:flex;align-items:end;gap:15px;margin-bottom:26px;}.section-heading h2 {font-size:29px;letter-spacing:-.8px;line-height:1.4;}
  .section-kicker {font-size:10px;margin-bottom:16px;}.section-heading>p,.section-heading>.small {font-size:9px;max-width:43%;margin:0;}
  .use-section {padding-block:49px;}.use-grid {display:flex;flex-direction:column;gap:0;}
  .use-item,.use-item+.use-item {padding:24px 0;min-height:0;flex-direction:row;gap:16px;border-left:0;border-bottom:1px solid #393939;}
  .use-item>svg:first-child {width:23px;height:23px;margin-top:3px;}.use-item>svg:last-child {right:0;top:28px;width:17px;}
  .use-item h3 {font-size:17px;margin-bottom:7px;}.use-item p {font-size:11px;padding-right:10px;}.use-item small {font-size:10px;margin-top:11px;}
  .examples-section {padding-block:0 45px;}.example-grid {grid-template-columns:1fr;gap:25px;}
  .example-image {aspect-ratio:1.5;}.example-image>span {font-size:9px;bottom:10px;left:10px;}
  .example-tile>div:last-child {padding-block:15px;}.example-tile h3 {font-size:18px;}.example-tile p {font-size:11px;}.example-tile .icon {top:21px;}
  .principles-section {grid-template-columns:1fr;padding-block:37px;gap:29px;}
  .principles-section h2 {font-size:29px;}.principle-icon {width:37px;height:37px;margin-bottom:21px;}
  .principles-section>div>p {font-size:12px;margin-block:16px 8px;}.principle-list {gap:21px;}
  .principle-list h3 {font-size:14px;}.principle-list p {font-size:11px;}
  .guide-section {padding-block:47px 37px;}.guide-table {grid-template-columns:1fr;}.guide-table>div {padding:24px;}
  .guide-table>div+div {border-left:0;border-top:1px solid #414141;}.guide-table span {font-size:14px;margin-top:9px;}.guide-table p {font-size:11px;}
  .questions-section {grid-template-columns:1fr;gap:25px;padding-block:10px 42px;}.questions-section h2 {font-size:29px;}
  .question-list summary {font-size:12px;min-height:64px;}.question-list p {font-size:11px;}
  .final-cta {flex-direction:column;align-items:stretch;padding:34px 0 42px;gap:27px;}.final-cta h2 {font-size:35px;letter-spacing:-1px;}
  .final-cta .button {width:100%;}.final-cta>div>p:last-child:not(.section-kicker) {font-size:10px;}
  .site-footer {gap:10px;padding-block:22px 29px;}.site-footer .brand {font-size:16px;}.site-footer p {display:none;}.site-footer .text-link {font-size:10px;}
  body.in-studio .site-header {height:62px;padding-inline:16px;}body.in-studio .brand {font-size:20px;}
  body.in-studio .header-right .demo-pill {display:flex;}body.in-studio .header-right {gap:15px;}
  body.in-studio .desktop-nav {gap:0;}body.in-studio .desktop-nav a {font-size:12px;}#connectionLabel {font-size:9px;}
  .studio-top {height:49px;padding-inline:16px;gap:7px;}.project-name {font-size:11px;gap:8px;}
  .studio-top-actions {gap:12px;}.studio-top-actions .text-link {font-size:9px;}
  .studio-grid {display:block;height:auto;min-height:calc(100dvh - 111px);}
  .preview-panel {padding:0 14px 92px;overflow:visible;min-height:calc(100dvh - 111px);}
  .preview-toolbar {position:static;flex-wrap:wrap;gap:5px;padding-top:13px;}
  .preview-toolbar>.icon-button {height:42px;width:34px;padding:5px;}.view-tabs {flex:1;padding:2px;}
  .view-tabs button {font-size:10px;padding-inline:7px;min-height:38px;}.zoom-tools {margin-left:auto;}
  .zoom-tools>.icon-button,.zoom-reset {min-width:40px;min-height:40px;}
  .preview-meta {font-size:10px;padding-block:4px 10px;}
  .preview-stage {min-height:290px;height:clamp(290px,92vw,440px);border-radius:3px;}
  .stage-viewport {padding:28px 6px;}.preview-status {font-size:9px;top:10px;left:10px;}
  .result-description {padding-top:14px;}.result-description strong {font-size:13px;}.result-description p {font-size:10px;}
  .result-list {min-height:121px;height:121px;}.result-card img {height:60px;}
  .preview-footer {position:static;padding-block:13px;}.preview-footer>span {display:flex;font-size:9px;max-width:46%;}
  .preview-footer .button {font-size:10px;}.preview-footer>.button:last-child {display:none;}
  .mobile-actionbar {display:flex;background:#151515f5;border-color:#666;padding:11px 16px max(11px,env(safe-area-inset-bottom));}
  .mobile-actionbar .button {min-height:46px;font-size:12px;}
  .settings-panel {position:fixed;inset:auto 0 0;max-height:88dvh;z-index:25;border:1px solid #6b6b6b;border-bottom:0;border-radius:12px 12px 0 0;padding:16px 21px 0;transform:translateY(110%);box-shadow:0 -10px 40px #0005;}
  .settings-panel.open {transform:translateY(0);}.settings-panel .panel-heading {margin-bottom:12px;gap:8px;}.settings-panel .panel-heading h2 {font-size:15px;}
  .settings-panel .panel-heading .text-link {margin-left:auto;font-size:11px;}.settings-panel .panel-heading .mobile-only {display:flex;order:3;}
  .settings-panel .icon-button,.assets-panel .icon-button,.dialog-heading .icon-button {width:44px;height:44px;}
  .settings-scroll {padding-inline:2px;}.settings-panel fieldset {margin-top:21px;}.settings-panel legend {font-size:13px;}
  .mode-tabs button {font-size:12px;min-height:41px;}.setting-help {font-size:11px;}
  .usage-options {display:grid;grid-template-columns:repeat(3,1fr);gap:7px;}
  .usage-options label>span {flex-direction:column;justify-content:center;gap:6px;min-height:69px;font-size:10px;padding-inline:4px;}
  .usage-options input:checked+span::after {display:none;}.style-grid label>span {font-size:12px;min-height:46px;}
  .local-settings>summary {min-height:48px;font-size:12px;}.local-settings fieldset {margin-top:0;}.range-setting label,.range-setting output {font-size:12px;}
  .protected-text-label,.protected-text-label input {font-size:12px;}.protected-text-label input {min-height:44px;}
  .protection strong {font-size:12px;}.protection>div>span {font-size:10px;}
  .advanced summary {min-height:48px;}.advanced select {min-height:40px;font-size:12px;}.scratch-label {min-height:44px;}
  .settings-message {font-size:10px;}.generate-area {padding-block:13px max(16px,env(safe-area-inset-bottom));}
  .generate-area>div,.generate-area>div strong {font-size:10px;}.generate-area>p {font-size:9px;}
  .assets-panel {padding:20px 16px;width:min(300px,85vw);}.asset-remove {min-height:40px;}.asset-item {grid-template-columns:55px minmax(0,1fr) 16px;}
  .batch-section strong {font-size:12px;}.batch-section p,.batch-section .text-link {font-size:11px;}.session-note {font-size:10px;}
  dialog {padding:23px 19px;}.dialog-heading h2 {font-size:19px;}.dialog-heading {margin-bottom:18px;}.export-form-grid {gap:13px;}
  .export-form-grid label,.export-form-grid select {font-size:11px;}.export-size {font-size:9px;}
  .export-help,.print-check>div,.info-dialog dd {font-size:11px;}.dialog-actions .button {min-height:45px;padding-inline:15px;}.toast {bottom:86px;font-size:11px;}
}
@media(max-width:374px) {
  .site-header {padding-inline:16px;}.content-width {width:calc(100% - 32px);}.brand {font-size:21px;}
  .header-right {gap:12px;}.hero-bottom h1 {font-size:26px;}.hero-spec {font-size:7px;left:16px;right:16px;}
  .hero-actions {margin-top:18px;}.hero-footnote {font-size:7px;}
  .view-tabs button {padding-inline:5px;font-size:9px;}.visual-header {font-size:8px;}
}
@keyframes product-float-mobile {0%,100%{transform:translateY(0) rotate(-2deg);}50%{transform:translateY(-7px) rotate(0);}}
@media(prefers-reduced-motion:reduce) {
  html:has(body:not(.motion-opt-in)) {scroll-behavior:auto;}
  body:not(.motion-opt-in) *,body:not(.motion-opt-in) *::before,body:not(.motion-opt-in) *::after {animation:none!important;transition:none!important;}
  body:not(.motion-opt-in) .chrome-title {transform:translateX(-50%)!important;opacity:1!important;}
  body:not(.motion-opt-in) .product-drift {transform:translateX(-50%)!important;opacity:1!important;}
  body:not(.motion-opt-in) .hero-product {transform:none!important;}
  body:not(.motion-opt-in) .reveal-line {opacity:1!important;transform:none!important;}
}