/* Shared frontend frame extracted from the anime-to-real-life converter. */
.use-case-landing .atr-container { width:min(var(--sc-container,1180px),calc(100% - 40px)); margin-inline:auto; }
.use-case-landing .atr-hero-grid { display:grid; grid-template-columns:minmax(0,1fr); }
.use-case-landing .atr-hero h1 { margin-block:var(--sc-space-4) 0; }
.use-case-landing .atr-workspace-wrap { padding:0 0 var(--sc-space-16); }
#converter .atr-tool-grid { display:grid; }
#converter .atr-upload-side { display:flex; flex-direction:column; }
#converter .atr-presets { display:grid!important; }
#converter .atr-preset { display:flex; flex-direction:column; min-width:0; margin:0; overflow:hidden; }
/* Reference composer: upload and four visible choices, shared footer. */
#converter .atr-workspace { max-width:64rem; margin-inline:auto; padding:var(--sc-space-5); }
#converter .atr-tool-grid { grid-template-columns:minmax(0,1fr) minmax(0,1.8fr); padding:0; gap:var(--sc-space-6); align-items:start; }
#converter .atr-tool-grid > .atr-controls { display:block; }
#converter .atr-upload-side { gap:var(--sc-space-3); }
#converter :is(.atr-upload-side h3,.anime-effects > h3) { margin:0; min-height:0; padding:0; font-size:var(--sc-font-size-sm); line-height:1.5; }
#converter .atr-upload-board { width:100%; min-height:calc(23rem + var(--sc-space-3)); height:calc(23rem + var(--sc-space-3)); padding:var(--sc-space-4); }
#converter .atr-upload-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--sc-space-3); text-align:center; }
#converter .atr-upload-title { margin:0; font-size:1rem; font-weight:400; }
#converter .atr-upload-preview { width:100%; height:100%; }
#converter .atr-upload-preview img { width:100%; height:100%; max-height:100%; object-fit:contain; }
#converter .atr-samples { margin:0; gap:var(--sc-space-2); }
#converter .anime-effects { border:0; min-width:0; }
#converter .anime-effects > h3 { pointer-events:none; }
#converter .anime-effects > h3 :is(img,.option-summary-meta),#converter .anime-effects > h3::after { display:none; }
#converter .anime-effect-content { padding-top:var(--sc-space-3); }
#converter .atr-presets { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:11.5rem; height:auto; gap:var(--sc-space-3); overflow:visible; margin:0; }
#converter .atr-preset { padding:0; gap:0; border-width:1px; border-radius:var(--sc-radius-lg); justify-content:flex-start; }
#converter .atr-preset :is(.option-photo, .template-example) { display:block; width:100%; height:calc(11.5rem - 3.25rem); aspect-ratio:16/9; flex:none; }
#converter .atr-preset .template-example img { display:block; width:100%; height:100%; object-fit:cover; }
#converter .atr-preset :is(strong, .template-name) { display:block; padding:var(--sc-space-3); font-size:var(--sc-font-size-sm); color:var(--sc-color-ink); }
#converter .atr-preset .template-name { box-sizing:border-box; height:3.25rem; padding:var(--sc-space-2) var(--sc-space-3); line-height:1.2; }
#converter .atr-preset small { display:none; }
#converter .atr-preset:is(.active,.selected,:hover) { border-color:var(--sc-color-brand-600)!important; }
#converter .atr-preset:focus-visible { outline:2px solid var(--sc-color-focus); outline-offset:-3px; }
#converter .anime-preserve { margin:var(--sc-space-2) 0 0; }
#converter .atr-composer-footer { grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:var(--sc-space-2) var(--sc-space-4); }
#converter .anime-notes { grid-column:1 / -1; border:0; }
#converter #animeReadiness { grid-column:1 / -1; margin:0; }
#converter #animeCost { margin:0; }
#converter .atr-generate { margin:0; width:auto; min-height:var(--sc-control-height); }
#converter :is(.atr-fine-print,.atr-status) { grid-column:1 / -1; margin:0; }
#converter .atr-mobile-style { display:none; }
.atr-hero .atr-hero-grid { max-width:64rem; text-align:center; }
.atr-hero h1.sc-title-display { max-width:64rem; margin-inline:auto; font-size:clamp(2rem,3.5vw,3rem); line-height:1.15; letter-spacing:-.04em; text-wrap:balance; }
.atr-hero h1 .atr-heading-subtitle { display: block; margin-top: var(--sc-space-2); color: var(--sc-color-muted); font-size: clamp(var(--sc-font-size-xl), 2.2vw, 1.875rem); font-weight: 600; line-height: 1.35; letter-spacing: normal; }
.atr-hero .hero-subtitle { display: block; max-width: 64ch; margin: var(--sc-space-4) auto 0; font-size: var(--sc-font-size-md); line-height: var(--sc-leading-copy); }
.atr-hero { padding-block:var(--sc-space-6); }
#converter .model-workspace.atr-workspace { width:100%; }
#converter .atr-tool-grid > .creative-input { grid-column:1; grid-row:1 / span 2; }
#converter .atr-tool-grid > .creative-brief { grid-column:2; grid-row:1; }
#converter .atr-tool-grid > .creative-brief__fields { grid-column:2; grid-row:2; }
#converter .atr-tool-grid > :is(.creative-actions, .model-workspace__toolbar, .model-workspace__limit-status, .model-workspace__status) { grid-column:1 / -1; }
#converter .atr-tool-grid .creative-effects { border:0; padding:0; }
#converter .atr-tool-grid .creative-brief__choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
#converter .atr-tool-grid .creative-brief__choices button { min-width:0; }
#converter .atr-tool-grid .creative-brief__choices img { height:8rem; width:100%; object-fit:contain; }
#converter .atr-preset .option-photo { object-position:center 35%; }
@media(max-width:767px) {
  .atr-page .atr-hero { padding-block:var(--sc-space-2); }
  .atr-page .atr-hero h1.sc-title-display { font-size:1.75rem; }
  .atr-page .atr-hero h1 .atr-heading-subtitle { margin-top:var(--sc-space-1); font-size:1.125rem; }
  .atr-page .atr-hero .hero-subtitle { margin-top:var(--sc-space-1); }
  #converter .atr-workspace { padding:var(--sc-space-2); }
  #converter .atr-upload-side { gap:var(--sc-space-1); }
  #converter .atr-tool-grid { grid-template-columns:minmax(0,1fr); gap:var(--sc-space-5); }
  #converter .atr-tool-grid > :is(.creative-input, .creative-brief, .creative-brief__fields) { grid-column:1; grid-row:auto; }
  #converter .atr-upload-board { height:10rem; min-height:10rem; }
  #converter .anime-effects { display:none; }
  #converter .atr-mobile-style { display:grid; gap:var(--sc-space-3); min-width:0; }
  #converter .atr-mobile-style img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:var(--sc-radius-lg); }
  #converter .atr-composer-footer { grid-template-columns:minmax(0,1fr); }
  #converter .atr-generate { width:100%; }
}