:root { color-scheme: light; --line:var(--line-on-light); --panel:var(--white); --soft:var(--moss-050); --accent:var(--moss-green); --atmo-opacity:.3; }
:root[data-theme="dark"] { color-scheme:dark; --bg:var(--surface-dark-deep); --panel:var(--glass-dark); --bg-raised:var(--surface-dark-mid); --fg1:var(--mist-gray); --fg2:var(--fg-on-dark-2); --fg3:var(--moss-200); --line:var(--glass-line); --soft:var(--surface-dark-soft); --accent:var(--moss-200); --atmo-opacity:1; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { min-height:100%; background:var(--bg); }
body { margin:0; min-height:100dvh; display:flex; flex-direction:column; color:var(--fg1); font-family:var(--font-sans); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:clip; transition:color var(--motion-medium),background-color var(--motion-medium); }
button,input { font:inherit; }
button,a,input,summary { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; color:inherit; }
button { transition:transform var(--motion-medium) var(--ease-out),background var(--motion-medium),border-color var(--motion-medium),box-shadow var(--motion-medium),color var(--motion-medium); }
button:hover:not(:disabled) { transform:translateY(-2px); }
button:active:not(:disabled) { transform:scale(.98); }
button:disabled { cursor:default; opacity:.45; }
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
button i { display:inline-block; transition:transform var(--motion-medium) var(--ease-out); }
button:hover:not(:disabled) i { transform:translateY(-1px); }
p,h1,h2 { margin:0; }
a { color:inherit; }
.atmosphere { pointer-events:none; position:fixed; inset:-24px; z-index:-1; opacity:var(--atmo-opacity); transform:translate(var(--ambient-x,0px),var(--ambient-y,0px)); transition:transform 700ms var(--ease-fluid); background:radial-gradient(ellipse at 80% 8%,var(--glow-green),transparent 50%),radial-gradient(ellipse at 12% 76%,color-mix(in srgb,var(--golden-yellow) 8%,transparent),transparent 45%),linear-gradient(145deg,var(--bg),var(--soft)); }
.topbar { height:80px; width:100%; max-width:1440px; margin:0 auto; padding:0 var(--sp-7); display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5); border-bottom:1px solid var(--line); flex-shrink:0; }
.brand { display:flex; padding:var(--sp-4) 0; transition:opacity var(--motion-medium); }
.brand:hover { opacity:.7; }
.brand img { width:96px; height:auto; }
.logo-dark,[data-theme="dark"] .logo-light { display:none; }
[data-theme="dark"] .logo-dark { display:block; }
.header-actions { display:flex; gap:var(--sp-2); }
.icon-button { display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--line); border-radius:var(--r-pill); background:transparent; color:var(--fg2); font-size:24px; }
.icon-button:hover { background:var(--soft); border-color:var(--moss-200); color:var(--fg1); }
.theme-symbol { display:block; position:relative; width:24px; height:24px; transition:transform 520ms var(--ease-out); }
.theme-toggle .theme-symbol i { position:absolute; inset:0; line-height:1; transition:opacity 420ms var(--ease-out),transform 520ms var(--ease-fluid); }
.theme-toggle .theme-symbol .ph-moon { opacity:1; transform:rotate(0) scale(1); }
.theme-toggle .theme-symbol .ph-sun { opacity:0; transform:rotate(-90deg) scale(.6); }
[data-theme="dark"] .theme-toggle .theme-symbol .ph-moon { opacity:0; transform:rotate(90deg) scale(.6); }
[data-theme="dark"] .theme-toggle .theme-symbol .ph-sun { opacity:1; transform:rotate(0) scale(1); }
.theme-toggle:hover .theme-symbol { transform:rotate(-20deg); }
.theme-toggle:active:not(:disabled) { transform:scale(.93); }
main { width:100%; max-width:1248px; margin:auto; padding:var(--sp-5) var(--sp-6) 0; flex:1; }
.intro { text-align:center; margin-bottom:var(--sp-2); animation:reveal var(--motion-reveal) var(--ease-fluid) both; }



h1 { font-size:clamp(36px,4.5vw,48px); line-height:1.02; letter-spacing:-.03em; font-weight:900; margin:0 0 var(--sp-3); }
h1>span { color:var(--moss-400); }
.intro>p { color:var(--fg2); font-size:16px; font-weight:400; text-wrap:balance; }
.start-screen { display:flex; flex-direction:column; align-items:center; position:relative; }

.start-copy { width:100%; text-align:center; position:relative; padding:0; }
.step-label { display:flex; align-items:center; gap:var(--sp-3); font-size:12px; font-weight:600; color:var(--fg2); }
.step-label>span { display:grid; place-items:center; height:24px; width:24px; border:1px solid var(--line); border-radius:50%; font-size:12px; color:var(--accent); }

.start-copy>p { font-size:14px; color:var(--fg2); text-wrap:balance; }
.start-actions { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); margin:var(--sp-5) auto 0; width:min(100%,520px); }
.button { min-height:52px; display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-5); border-radius:var(--r-pill); border:1px solid transparent; font-size:14px; font-weight:600; }
.button i { font-size:24px; }
.button .trailing { margin-left:auto; }
.button:hover .trailing { transform:translate(2px,-2px); }
.primary { color:var(--mist-gray); background:var(--moss-green); }
.primary:hover:not(:disabled) { background:var(--moss-600); box-shadow:var(--shadow-md); }
[data-theme="dark"] .primary { color:var(--graphite-green); background:var(--golden-yellow); }
[data-theme="dark"] .primary:hover:not(:disabled) { background:var(--yellow-600); }
.secondary { border-color:var(--line); background:transparent; color:var(--fg1); }
.secondary:hover:not(:disabled) { background:var(--soft); border-color:var(--moss-200); }
.start-copy .drop-hint { font-size:12px; margin-top:var(--sp-4); color:var(--fg3); }
.text-button { display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2); font-size:14px; font-weight:500; background:transparent; border:0; border-radius:var(--r-pill); padding:var(--sp-2) 0; color:var(--accent); min-height:40px; }
.text-button:hover { color:var(--fg1); }
.text-button:hover i { transform:translateX(3px); }
.editor-nav { margin-bottom:var(--sp-3); }
#backButton { min-height:44px; }
#backButton:hover:not(:disabled) i { transform:translateX(-3px); }
#demoButton { margin-top:var(--sp-1); }
.start-art { position:relative; display:grid; place-items:center; width:min(360px,80vw); aspect-ratio:1; margin:var(--sp-2) auto; isolation:isolate; }
.start-art:before { content:""; position:absolute; inset:0; border-radius:50%; background:radial-gradient(ellipse,var(--glow-green),transparent 68%); opacity:.28; z-index:-1; pointer-events:none; }
[data-theme="dark"] .start-art:before { background:radial-gradient(ellipse,color-mix(in srgb,var(--mist-gray) 18%,transparent),transparent 70%); opacity:1; }
.juntos-art { display:block; position:relative; width:88%; height:auto; overflow:visible; }
.juntos-part { transform-box:fill-box; transform-origin:center; animation:illustration-enter 720ms var(--ease-fluid) both; }
.juntos-part.phone { --part-x:0px; --part-y:72px; animation-delay:80ms; }
.juntos-part.person-left { --part-x:-80px; --part-y:24px; animation-delay:220ms; }
.juntos-part.person-right { --part-x:80px; --part-y:24px; animation-delay:360ms; }
@keyframes illustration-enter { from { opacity:0; transform:translate(var(--part-x),var(--part-y)); } to { opacity:1; transform:translate(0,0); } }
.orbit { position:absolute; width:100%; height:100%; inset:0; margin:0; border:1px solid color-mix(in srgb,var(--moss-400) 24%,transparent); border-radius:50%; pointer-events:none; animation:orbit 84s linear infinite; }
.orbit b { width:8px; height:8px; background:var(--moss-400); border-radius:50%; position:absolute; top:14%; left:14%; box-shadow:0 0 0 6px color-mix(in srgb,var(--moss-400) 12%,transparent); }
.orbit-two { width:78%; height:78%; inset:11%; animation-direction:reverse; animation-duration:62s; border-style:dashed; }
.orbit-two b { background:var(--moss-200); }
.orbit-reactive { width:118%; height:118%; inset:-9%; animation:none; transform:rotate(var(--scroll-angle,0deg)); }









.checker { background-color:var(--white); background-image:conic-gradient(var(--mist-gray) 25%,transparent 0 50%,var(--mist-gray) 0 75%,transparent 0); background-size:20px 20px; }
.bottom-note { display:flex; gap:var(--sp-2); align-items:center; justify-content:center; color:var(--fg3); font-size:12px; padding:var(--sp-4) 0 var(--sp-5); }
.bottom-note i { font-size:16px; }.note-divider { height:3px; width:3px; border-radius:50%; background:var(--fg3); margin:0 var(--sp-2); }
footer { width:100%; max-width:1440px; margin:0 auto; display:flex; justify-content:space-between; gap:var(--sp-5); border-top:1px solid var(--line); padding:var(--sp-4) var(--sp-7); font-size:12px; color:var(--fg3); }
.dragging .start-actions { outline:3px solid var(--moss-400); outline-offset:8px; border-radius:var(--r-pill); } .dragging .canvas-frame { outline:3px solid var(--moss-400); outline-offset:4px; }
.editor { display:grid; grid-template-columns:minmax(0,1fr) 352px; gap:var(--sp-5); align-items:start; animation:reveal var(--motion-reveal) var(--ease-fluid); }
body.has-image main { padding-top:var(--sp-6); }
body.has-image .intro { margin-bottom:var(--sp-6); }
body.has-image .intro .eyebrow { display:none; }
body.has-image h1 { font-size:clamp(28px,3vw,40px); margin-top:0; }
body.has-image .intro>p { font-size:16px; }
.preview-panel { position:sticky; top:var(--sp-5); min-width:0; padding:var(--sp-5) var(--sp-5) var(--sp-5) 0; }
.preview-head { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-5); }
.segmented { display:flex; padding:4px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--bg); }
.segmented button { padding:var(--sp-2) var(--sp-3); min-height:36px; background:transparent; color:var(--fg2); font-size:12px; border:0; border-radius:var(--r-pill); }
.segmented button[aria-pressed="true"] { background:var(--panel); box-shadow:var(--shadow-sm); color:var(--fg1); }
.canvas-frame { width:100%; aspect-ratio:var(--image-ratio,1.5); max-height:540px; border-radius:var(--r-lg); position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; border:1px solid var(--line-on-light); }
.canvas-frame canvas { display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.canvas-frame.bg-dark { background:var(--graphite-green); }
.canvas-frame.bg-light { background:var(--white); }
.preview-foot { display:flex; justify-content:space-between; align-items:center; gap:var(--sp-3); margin-top:var(--sp-4); }
#imageInfo { font-size:12px; color:var(--fg2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.preview-background { display:flex; gap:var(--sp-2); flex-shrink:0; }
.mini-swatch { width:28px; height:28px; padding:0; border:1px solid var(--line); border-radius:50%; background-size:12px 12px; }
.mini-swatch[aria-pressed="true"] { outline:2px solid var(--accent); outline-offset:2px; }
.bg-light { background:var(--white); }.bg-dark { background:var(--graphite-green); }
.preview-note { color:var(--fg3); font-size:12px; margin-top:var(--sp-3); }
.control-panel { min-width:0; border-left:1px solid var(--line); }
.panel-section { padding:var(--sp-5); border-bottom:1px solid var(--line); }
.color-heading { margin:var(--sp-5) 0 var(--sp-4); display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); }
.color-heading h2 { font-size:16px; font-weight:600; }.color-heading span { font-size:12px; color:var(--fg3); }
.swatches { display:flex; gap:var(--sp-3); margin:var(--sp-2) 0 var(--sp-5); padding:4px; }
.swatch { width:40px; height:40px; border:4px solid var(--bg-raised); border-radius:50%; background:var(--swatch); box-shadow:0 0 0 1px var(--line); }
.swatch[aria-pressed="true"] { box-shadow:0 0 0 2px var(--accent); }
.swatch:hover { box-shadow:0 0 0 3px var(--moss-200); }
.custom-toggle { width:100%; min-height:44px; padding:var(--sp-2) var(--sp-4); }
.custom-toggle i { font-size:16px; }
.collapse { display:grid; grid-template-rows:0fr; transition:grid-template-rows 520ms var(--ease-fluid); }
.collapse.open { grid-template-rows:1fr; }.collapse-inner { overflow:hidden; min-height:0; }
.collapse:not(.open) { visibility:hidden; }.collapse.open { visibility:visible; }
[aria-expanded="true"] .ph-caret-down { transform:rotate(180deg); }
.color-picker { padding-top:var(--sp-5); }
.color-well { height:140px; position:relative; touch-action:none; border-radius:var(--r-md); background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),hsl(var(--hue,0) 100% 50%); cursor:crosshair; overflow:hidden; }
#colorCursor { width:16px; height:16px; border-radius:50%; border:2px solid white; box-shadow:0 0 0 1px black; position:absolute; top:100%; left:0; transform:translate(-50%,-50%); pointer-events:none; }
.range-label { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); font-size:12px; font-weight:600; color:var(--fg2); margin-top:var(--sp-5); margin-bottom:var(--sp-2); }
input[type="range"] { width:100%; margin:0; height:28px; appearance:none; background:transparent; cursor:pointer; accent-color:var(--moss-green); }
input[type="range"]::-webkit-slider-runnable-track { height:4px; background:var(--line); border-radius:var(--r-pill); }
input[type="range"]::-webkit-slider-thumb { appearance:none; width:20px; height:20px; margin-top:-8px; border:3px solid var(--bg-raised); border-radius:50%; background:var(--accent); box-shadow:var(--shadow-md); }
input[type="range"]::-moz-range-track { height:4px; background:var(--line); border-radius:var(--r-pill); }
input[type="range"]::-moz-range-thumb { width:14px; height:14px; border:3px solid var(--bg-raised); border-radius:50%; background:var(--accent); }
input.hue-range::-webkit-slider-runnable-track { height:8px; background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); }
input.hue-range::-moz-range-track { height:8px; background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); }
.color-values { margin-top:var(--sp-4); }.color-values>label { font-size:12px; color:var(--fg2); }
.hex-wrap { display:flex; align-items:center; border:1px solid var(--line); border-radius:var(--r-md); padding:0 var(--sp-3); margin-top:var(--sp-2); gap:var(--sp-2); }
#colorChip { width:20px; height:20px; background:#000; border-radius:50%; border:1px solid var(--line); flex:none; }
input[type="text"],input[type="number"] { min-width:0; width:100%; min-height:44px; border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-2); background:var(--bg-raised); color:var(--fg1); font-size:14px; }
.hex-wrap input { border:0; background:transparent; }
.rgb-fields,.level-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-2); margin-top:var(--sp-3); }
.rgb-fields label,.level-fields label { font-size:12px; color:var(--fg2); }.rgb-fields input,.level-fields input { display:block; margin-top:var(--sp-1); }
.field-error { font-size:12px; color:var(--fg2); margin-top:var(--sp-2); }.field-error:empty { display:none; }
.disclosure { display:flex; width:100%; align-items:center; justify-content:space-between; gap:var(--sp-2); padding:var(--sp-1) 0; border:0; background:none; min-height:32px; font-size:14px; font-weight:600; text-align:left; }
.disclosure>span { display:flex; gap:var(--sp-2); align-items:center; }.disclosure i { font-size:16px; }
.section-hint { font-size:12px; color:var(--fg3); margin-top:var(--sp-2); }
.range-ends { display:flex; justify-content:space-between; gap:var(--sp-2); color:var(--fg3); font-size:12px; }
.switch-row { position:relative; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); margin:var(--sp-5) 0 var(--sp-3); font-size:14px; cursor:pointer; }
.switch-row input { position:absolute; right:0; width:40px; height:24px; opacity:0; }
.switch { width:40px; height:24px; background:var(--line); border-radius:var(--r-pill); padding:4px; transition:background var(--motion-medium); }
.switch:after { content:""; display:block; height:16px; width:16px; border-radius:50%; background:var(--white); transition:transform var(--motion-medium) var(--ease-out); }
.switch-row input:checked+.switch { background:var(--moss-green); }.switch-row input:checked+.switch:after { transform:translateX(16px); }.switch-row input:focus-visible+.switch { outline:3px solid var(--focus-ring); outline-offset:3px; }
.technical { margin-top:var(--sp-3); font-size:12px; color:var(--fg3); }.technical summary { cursor:pointer; padding:var(--sp-2) 0; }.technical p { margin:var(--sp-3) 0; }.technical .small { font-size:12px; padding:var(--sp-2) var(--sp-3); min-height:40px; width:100%; margin-top:var(--sp-3); }
.export-section { padding:var(--sp-5); }.export-section>.button { width:100%; }.result-status { display:flex; gap:var(--sp-2); align-items:center; color:var(--accent); font-size:12px; margin-bottom:var(--sp-3); }.result-status i { font-size:16px; }.export-note { text-align:center; font-size:12px; color:var(--fg3); margin-top:var(--sp-2); }.replace-actions { display:flex; justify-content:center; gap:var(--sp-5); margin-top:var(--sp-4); }.replace-actions .text-button { font-size:12px; }
.notice { margin-top:var(--sp-5); border:1px solid var(--line); padding:var(--sp-4) var(--sp-5); border-radius:var(--r-lg); color:var(--fg2); font-size:14px; background:var(--panel); }
.busy { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:var(--sp-4); background:color-mix(in srgb,var(--mist-gray) 90%,transparent); color:var(--graphite-green); font-size:14px; }
.processing-ring { width:48px; height:48px; border:2px solid var(--line-on-light); border-top-color:var(--moss-green); border-radius:50%; animation:orbit 1s linear infinite; }
dialog { width:min(600px,calc(100% - 32px)); border:1px solid var(--line); border-radius:var(--r-card); background:var(--bg-raised); color:var(--fg1); padding:var(--sp-6); max-height:calc(100dvh - 32px); overflow:auto; }
dialog[open] { animation:reveal 520ms var(--ease-fluid); }dialog::backdrop { background:color-mix(in srgb,var(--graphite-green) 70%,transparent); backdrop-filter:blur(8px); }
.dialog-head { display:flex; gap:var(--sp-4); justify-content:space-between; align-items:center; margin-bottom:var(--sp-5); }.dialog-head h2 { font-size:24px; font-weight:600; letter-spacing:-.01em; }.dialog-head .icon-button { flex:none; }
.help-dialog ol { margin:0; padding-left:var(--sp-5); }.help-dialog li { padding-left:var(--sp-2); margin-bottom:var(--sp-5); }.help-dialog li::marker { color:var(--accent); }.help-dialog li p { color:var(--fg2); font-size:14px; margin-top:var(--sp-2); }.help-foot { color:var(--fg3); font-size:12px; margin:var(--sp-5) 0; }.help-dialog>.button { width:100%; }
.camera-dialog { width:min(840px,calc(100% - 32px)); }.camera-dialog #cameraMessage { font-size:14px; margin-bottom:var(--sp-4); color:var(--fg2); }.camera-stage { height:min(50vh,480px); background:var(--graphite-green); position:relative; border-radius:var(--r-lg); overflow:hidden; }.camera-stage video { height:100%; width:100%; object-fit:contain; }.camera-guide { position:absolute; inset:12%; border:1px dashed var(--moss-200); border-radius:var(--r-lg); pointer-events:none; }.camera-tip { margin:var(--sp-4) 0; font-size:12px; color:var(--fg3); text-align:center; }.camera-actions { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); }.camera-actions>.button { font-size:12px; }.shutter { border:2px solid var(--accent); border-radius:50%; width:64px; height:64px; background:transparent; padding:6px; flex:none; }.shutter span { display:block; height:100%; border-radius:50%; background:var(--accent); }
.toast { position:fixed; z-index:99; bottom:var(--sp-5); left:50%; transform:translateX(-50%); max-width:calc(100% - 32px); width:max-content; background:var(--graphite-green); color:var(--mist-gray); border:1px solid var(--glass-line); border-radius:var(--r-pill); padding:var(--sp-3) var(--sp-5); font-size:14px; box-shadow:var(--shadow-md); }
@keyframes orbit { to { transform:rotate(360deg); } }@keyframes reveal { from { opacity:0; transform:translateY(12px); }to { opacity:1; transform:translateY(0); } }
@media(min-width:1500px) {
  main { padding-top:var(--sp-6); }
  .start-art { width:400px; }
}
@media(min-width:761px) and (max-height:800px) {
  .intro h1 { font-size:40px; }
  .start-art { width:272px; margin:var(--sp-4) auto; }
  .start-actions { margin-top:var(--sp-4); }
  body.has-image main { padding-top:var(--sp-5); }
  .panel-section,.export-section { padding:var(--sp-4) var(--sp-5); }
  .color-heading { margin-top:var(--sp-4); }
  .swatches { margin-bottom:var(--sp-4); }
}
@media(max-width:1000px) {
  .topbar { padding:0 var(--sp-6); }
  .editor { grid-template-columns:minmax(0,1fr) 320px; gap:var(--sp-4); }
  .preview-panel { padding:var(--sp-4) var(--sp-4) var(--sp-4) 0; }
  .preview-head { gap:var(--sp-3); }
  .swatches { gap:var(--sp-2); }
}
@media(max-width:760px) {
  .topbar { height:72px; padding:0 var(--sp-5); }
  .brand img { width:80px; }
  main { padding:var(--sp-5) var(--sp-4) 0; }
  .intro { margin-bottom:var(--sp-2); }
  .intro>p { font-size:16px; max-width:360px; margin:auto; }
  .start-art { width:min(280px,76vw); margin:var(--sp-4) auto var(--sp-5); }
  .start-copy>p:not(.drop-hint) { max-width:340px; margin:auto; }
  .start-actions { grid-template-columns:1fr; width:min(100%,360px); margin-top:var(--sp-4); }
  .drop-hint { display:none; }
  #demoButton { margin-top:var(--sp-3); width:100%; }
  .bottom-note { flex-wrap:wrap; padding:var(--sp-4) 0 var(--sp-5); row-gap:var(--sp-1); }
  .bottom-note>span:last-child,.note-divider { display:none; }
  footer { padding:var(--sp-4); justify-content:center; }
  footer>span:last-child { display:none; }
  .editor { grid-template-columns:1fr; gap:0; }
  .preview-panel { position:relative; top:0; padding:var(--sp-4) 0 var(--sp-5); }
  .preview-head { margin-bottom:var(--sp-4); }
  .canvas-frame { height:auto; aspect-ratio:var(--image-ratio,1.5); min-height:200px; max-height:42vh; }
  .control-panel { border-left:0; border-top:1px solid var(--line); }
  .swatches { gap:var(--sp-4); }
  .color-heading { margin-top:var(--sp-4); }
  .panel-section,.export-section { padding:var(--sp-5) 0; }
  .control-panel .step-label { margin-bottom:var(--sp-4); }
  .preview-note { font-size:12px; }
  dialog { padding:var(--sp-5); }
  .camera-dialog { padding:var(--sp-4); }
  .camera-actions { flex-wrap:wrap; justify-content:center; }
  .camera-actions #nativeCamera { width:100%; order:3; }
  .camera-stage { height:45vh; }
}
@media(max-width:380px) {
  .preview-head { justify-content:center; }
  .swatches { gap:var(--sp-2); }
  .swatch { width:36px; height:36px; }
  .intro p { font-size:14px; }
  .start-art { width:224px; margin:var(--sp-4) auto; }
}
/* Abertura: composição própria, sem alterar a geometria do editor. */
.home-layout { display:contents; }
.home-break { display:none; }
.eyebrow { color:var(--accent); font-size:12px; font-weight:600; letter-spacing:.12em; margin-bottom:var(--sp-4); }
body:not(.has-image) .home-break { display:initial; }
body:not(.has-image) .description-line { white-space:nowrap; }
body:not(.has-image) .intro>p { text-wrap:initial; }
body:not(.has-image) .bottom-note { display:none; }
.start-privacy { display:flex; align-items:center; justify-content:center; gap:var(--sp-3); margin:var(--sp-4) 0 var(--sp-5); text-align:left; color:var(--fg2); font-size:12px; line-height:1.6; }
.start-privacy>i { display:grid; place-items:center; flex:none; width:40px; height:40px; border-radius:var(--r-pill); background:var(--soft); color:var(--accent); font-size:20px; }
.start-privacy strong { font-weight:500; color:var(--fg1); }
.start-copy .drop-hint { display:flex; align-items:center; justify-content:center; gap:var(--sp-3); margin-top:var(--sp-4); padding:var(--sp-4); border:1px dashed var(--line); border-radius:var(--r-lg); transition:border-color var(--motion-medium),background var(--motion-medium),box-shadow var(--motion-medium); }
.drop-hint>i { font-size:24px; color:var(--accent); }
.drop-hint strong { font-size:14px; font-weight:500; color:var(--fg2); }
.drop-hint p { margin-top:var(--sp-1); }
.dragging .start-copy .drop-hint { border-color:var(--accent); background:var(--soft); box-shadow:0 0 0 3px var(--focus-ring); }
@media(min-width:1001px) {
  body:not(.has-image) .topbar,body:not(.has-image) footer { max-width:1248px; padding-left:var(--sp-6); padding-right:var(--sp-6); }
  body:not(.has-image) main { padding-top:clamp(48px,8vh,88px); padding-bottom:var(--sp-7); }
  body:not(.has-image) .home-layout { display:grid; grid-template-columns:minmax(0,48fr) minmax(0,52fr); column-gap:var(--sp-7); align-items:center; }
  body:not(.has-image) .intro { grid-column:1; grid-row:1; align-self:end; text-align:left; margin:0 0 var(--sp-6); }
  body:not(.has-image) h1 { font-size:clamp(52px,4.5vw,64px); margin-bottom:var(--sp-5); }
  body:not(.has-image) .intro>p { font-size:clamp(18px,1.8vw,22px); line-height:1.5; }
  body:not(.has-image) .start-screen { display:contents; }
  body:not(.has-image) .start-art { grid-column:2; grid-row:1 / span 2; width:min(480px,86%); margin:0 auto; }
  body:not(.has-image) .start-copy { grid-column:1; grid-row:2; align-self:start; text-align:left; }
  .start-copy>p { max-width:420px; font-size:16px; text-wrap:initial; }
  .start-actions { width:100%; margin:var(--sp-5) 0 0; }
  .start-actions>.button { min-height:56px; padding-left:var(--sp-4); padding-right:var(--sp-4); }
  #demoButton { margin-top:var(--sp-3); }
  .start-privacy { justify-content:flex-start; margin-bottom:0; }
}
@media(min-width:761px) and (max-width:1000px) {
  body:not(.has-image) .intro { margin-bottom:var(--sp-5); }
  .start-copy .drop-hint { max-width:520px; margin-left:auto; margin-right:auto; }
}
@media(max-width:760px) {
  body:not(.has-image) .intro>p { font-size:clamp(13px,3.75vw,16px); max-width:none; line-height:1.6; }
  .eyebrow { font-size:10px; letter-spacing:.1em; margin-bottom:var(--sp-3); }
  .start-copy .drop-hint { display:none; }
}
/* Composição, movimento e temas — revisão 1.0.5. */
:root { --motion-reveal:1400ms; }
html { transition:background-color 900ms var(--ease-fluid); }
.theme-changing *, .theme-changing *::before, .theme-changing *::after { transition:color 900ms var(--ease-fluid),background-color 900ms var(--ease-fluid),border-color 900ms var(--ease-fluid),fill 900ms var(--ease-fluid),stroke 900ms var(--ease-fluid),opacity 900ms var(--ease-fluid),box-shadow 900ms var(--ease-fluid),transform 900ms var(--ease-fluid); }
.brand { display:grid; }
.brand .logo-light,.brand .logo-dark { display:block; grid-area:1 / 1; transition:opacity 900ms var(--ease-fluid); }
.brand .logo-dark { opacity:0; }
[data-theme="dark"] .brand .logo-light { opacity:0; }
[data-theme="dark"] .brand .logo-dark { opacity:1; }
.juntos-art [class^="juntos-color"] { transition:fill 900ms var(--ease-fluid),stroke 900ms var(--ease-fluid); }
/* Cores exatas do Artboard 1as.svg enviado pelo Daniel. */
[data-theme="dark"] .juntos-art .person-right .juntos-color-4, [data-theme="dark"] .juntos-art .person-left .juntos-color-4 { fill:var(--golden-yellow); }
[data-theme="dark"] .juntos-art .person-left .juntos-color-2 { fill:var(--moss-green); }
[data-theme="dark"] .orbit { border-color:color-mix(in srgb,var(--moss-200) 36%,transparent); }
.juntos-part { animation-duration:1600ms; }
.juntos-part.phone { animation-delay:180ms; }
.juntos-part.person-left { animation-delay:440ms; }
.juntos-part.person-right { animation-delay:700ms; }
.start-copy { animation:reveal 1400ms var(--ease-fluid) 200ms both; }
.start-guidance span { white-space:nowrap; }
.start-art:before,[data-theme="dark"] .start-art:before { background:radial-gradient(ellipse,color-mix(in srgb,var(--moss-200) 24%,transparent),transparent 68%); transition:opacity 900ms var(--ease-fluid); }
.start-art:before { opacity:.35; }
[data-theme="dark"] .start-art:before { opacity:.85; }
@property --gradient-shift-x { syntax:"<percentage>"; inherits:true; initial-value:0%; }
@property --gradient-shift-y { syntax:"<percentage>"; inherits:true; initial-value:0%; }
@property --gradient-shift-x-soft { syntax:"<percentage>"; inherits:true; initial-value:0%; }
@property --gradient-shift-y-soft { syntax:"<percentage>"; inherits:true; initial-value:0%; }
.atmosphere { inset:-120px; opacity:1; background:none; transform:none; transition:--gradient-shift-x 420ms var(--ease-fluid),--gradient-shift-y 420ms var(--ease-fluid),--gradient-shift-x-soft 560ms var(--ease-fluid),--gradient-shift-y-soft 560ms var(--ease-fluid); }
.atmosphere::before,.atmosphere::after { content:""; position:absolute; inset:0; pointer-events:none; transition:opacity 900ms var(--ease-fluid); animation:ambient-drift 52s ease-in-out infinite alternate; }
.atmosphere::before { opacity:1; background:radial-gradient(ellipse 50% 48% at calc(72% + var(--gradient-shift-x)) calc(24% + var(--gradient-shift-y)),color-mix(in srgb,var(--moss-400) 20%,transparent),transparent 74%),radial-gradient(ellipse 44% 38% at calc(24% - var(--gradient-shift-x-soft)) calc(78% - var(--gradient-shift-y-soft)),color-mix(in srgb,var(--golden-yellow) 9%,transparent),transparent 76%); }
.atmosphere::after { opacity:0; background:radial-gradient(ellipse 50% 48% at calc(72% + var(--gradient-shift-x)) calc(24% + var(--gradient-shift-y)),color-mix(in srgb,var(--moss-400) 44%,transparent),transparent 74%),radial-gradient(ellipse 44% 38% at calc(24% - var(--gradient-shift-x-soft)) calc(78% - var(--gradient-shift-y-soft)),color-mix(in srgb,var(--moss-green) 42%,transparent),transparent 76%); }
[data-theme="dark"] .atmosphere::before { opacity:0; }
[data-theme="dark"] .atmosphere::after { opacity:1; }
@keyframes ambient-drift { from { transform:translate(calc(-2% + var(--gradient-parallax-x,0px)),calc(-1% + var(--gradient-parallax-y,0px))) rotate(-2deg) scale(1.02); } to { transform:translate(calc(3% + var(--gradient-parallax-x,0px)),calc(2% + var(--gradient-parallax-y,0px))) rotate(1.5deg) scale(1.08); } }
.canvas-frame { --preview-height:min(66vh,680px); width:min(100%,calc(var(--preview-height) * var(--frame-ratio,1.5))); height:auto; min-height:0; max-height:none; aspect-ratio:var(--image-ratio,1.5); margin-inline:auto; }
.format-section h2 { font-size:14px; font-weight:600; }
#autoFormat { font-size:12px; margin:var(--sp-1) 0; }
#autoFormat[aria-pressed="true"] { text-decoration:underline; text-underline-offset:4px; }
.format-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-2); }
.format-options button { min-height:44px; border:1px solid var(--line); border-radius:var(--r-sm); font-size:12px; background:transparent; }
.format-options button:hover { background:var(--soft); border-color:var(--accent); }
.format-options button[aria-pressed="true"] { background:var(--soft); border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.export-section,.export-note { text-align:left; }
.replace-actions { justify-content:flex-start; }
.add-background { margin-top:var(--sp-4); }
.background-details { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); margin-top:var(--sp-2); font-size:12px; }
#backgroundName { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; color:var(--fg2); }
#removeBackground { font-size:12px; }
.level-fields input { cursor:ew-resize; touch-action:pan-y; appearance:textfield; }
.level-fields input::-webkit-inner-spin-button,.level-fields input::-webkit-outer-spin-button { appearance:none; margin:0; }
.level-fields input.is-scrubbing { user-select:none; border-color:var(--accent); }
.camera-actions { display:grid; grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr); }
#nativeCamera { justify-self:start; }
#captureButton { grid-column:2; justify-self:center; }
#flipCamera { grid-column:3; justify-self:end; }
@media(min-width:1001px) {
  body:not(.has-image) main { display:flex; flex-direction:column; justify-content:center; padding-top:var(--sp-7); padding-bottom:var(--sp-7); }
}
@media(max-width:1000px) {
  body:not(.has-image) .start-art { margin:64px auto; }
}
@media(max-width:760px) {
  body:not(.has-image) .start-art { margin:56px auto; }
  .editor-nav { text-align:center; }
  .canvas-frame { --preview-height:60vh; }
  .camera-actions #nativeCamera { grid-column:1 / -1; grid-row:2; justify-self:stretch; }
  #captureButton,#flipCamera { grid-row:1; }
}
@media(max-width:380px) {
  body:not(.has-image) .start-art { margin:48px auto; }
  .start-guidance { font-size:13px!important; }
}
/* Editor mobile: os mesmos controles, com resultado e download primeiro. */
.mobile-back-label,.mobile-only { display:none; }
.download-dock>.button { width:100%; }
@media(max-width:760px) {
  body.has-image { --download-dock-height:100px; padding-bottom:var(--download-dock-height); }
  body.has-image .topbar { height:72px; padding:0 16px; gap:8px; }
  .topbar>#backButton { display:none; }
  body.has-image .topbar>#backButton { display:inline-flex; color:var(--fg1); gap:8px; padding:0; min-width:0; }
  body.has-image .topbar .brand,body.has-image .desktop-back-label,body.has-image .intro,body.has-image #editorNav { display:none; }
  .mobile-back-label { display:inline; font-size:clamp(20px,5.8vw,26px); font-weight:900; letter-spacing:-.03em; white-space:nowrap; }
  .mobile-back-label>span { color:var(--moss-400); }
  #backButton>i { font-size:22px; }
  body.has-image .header-actions { gap:4px; flex:none; }
  body.has-image .icon-button { width:40px; height:40px; font-size:22px; }
  body.has-image main { padding:20px 16px 24px; margin:0 auto; }
  body.has-image .editor { animation:none; }
  body.has-image .preview-panel { padding:0 0 20px; }
  body.has-image .preview-head { display:flex; flex-direction:column; align-items:stretch; gap:14px; margin-bottom:16px; }
  body.has-image .step-label { font-size:16px; color:var(--fg1); gap:10px; }
  body.has-image .step-label>span { width:28px; height:28px; font-size:14px; flex:none; }
  body.has-image .segmented { width:100%; }
  body.has-image .segmented button { flex:1; min-height:40px; font-size:14px; }
  body.has-image .canvas-frame { --preview-height:60svh; }
  body.has-image .preview-foot { gap:6px; margin-top:12px; }
  body.has-image #imageInfo { font-size:11px; overflow:visible; text-overflow:clip; }
  body.has-image .preview-background { gap:4px; align-items:center; font-size:12px; color:var(--fg3); }
  body.has-image .mini-swatch { width:36px; height:36px; border:5px solid var(--bg); box-shadow:inset 0 0 0 1px var(--line); }
  body.has-image .mini-swatch[aria-pressed="true"] { outline-offset:-3px; }
  body.has-image .preview-note { margin-top:6px; }
  body.has-image .replace-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
  body.has-image .replace-actions .text-button { border:1px solid var(--line); padding:8px 12px; min-height:44px; color:var(--fg1); font-size:14px; }
  body.has-image .replace-actions i { font-size:20px; }
  body.has-image .panel-section { padding:20px 0; }
  body.has-image .color-heading { margin:16px 0 12px; }
  body.has-image .control-panel .step-label { margin-bottom:0; }
  body.has-image .swatches { justify-content:space-between; margin:0 0 16px; gap:12px; }
  body.has-image .swatch { width:44px; height:44px; flex:none; }
  body.has-image .custom-toggle { min-height:44px; }
  body.has-image .disclosure { min-height:44px; }
  body.has-image .section-hint { margin-top:4px; }
  body.has-image .mobile-only { display:inline; }
  body.has-image .desktop-only,body.has-image .bottom-note { display:none; }
  body.has-image .export-section { padding:16px 0 0; }
  body.has-image .add-background { margin-top:0; }
  body.has-image .result-status { margin-bottom:12px; }
  body.has-image .download-dock { position:fixed; z-index:20; left:0; right:0; bottom:0; padding:12px 16px calc(10px + env(safe-area-inset-bottom)); background:var(--bg); border-top:1px solid var(--line); }
  body.has-image .download-dock>.button { min-height:52px; }
  body.has-image .download-dock .export-note { text-align:center; margin-top:4px; font-size:11px; }
  body.has-image.keyboard-open .download-dock { visibility:hidden; pointer-events:none; }
  body.has-image input[type="text"],body.has-image input[type="number"] { font-size:16px; scroll-margin-bottom:120px; }
  body.has-image .toast { bottom:calc(var(--download-dock-height) + 12px); }
  body.has-image footer { padding-bottom:16px; }
}
/* Seleção e transformação proporcional da escrita sobre uma foto. */
.ink-selection { position:absolute; pointer-events:none; border:1px solid transparent; transform-origin:center; }
.ink-selection.selected { border-color:var(--moss-400); outline:1px solid var(--white); }
.ink-move { position:absolute; inset:0; width:100%; height:100%; min-height:24px; border:0; padding:0; background:transparent; pointer-events:auto; cursor:move; touch-action:none; }
.ink-move:focus-visible { outline:2px solid var(--moss-400); }
.ink-handle { position:absolute; display:none; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid var(--moss-400); border-radius:var(--r-pill); background:var(--panel); color:var(--fg1); pointer-events:auto; touch-action:none; padding:0; font-size:18px; }
.selected .ink-handle { display:flex; }
.ink-resize { right:-18px; bottom:-18px; cursor:nwse-resize; }
.ink-rotate { left:calc(50% - 18px); top:-42px; cursor:grab; }
.ink-rotate::after { content:""; position:absolute; width:1px; height:7px; background:var(--moss-400); top:35px; }
.ink-selection button:hover:not(:disabled),.ink-selection button:active:not(:disabled) { transform:none; }
.ink-selection button { transition:background-color var(--motion-medium),border-color var(--motion-medium); }
.transform-tools { padding:12px 0; border-bottom:1px solid var(--line); }
.transform-tools>p { font-size:12px; color:var(--fg2); }
.transform-tools .range-label { margin-top:12px; }
.transform-actions { display:flex; justify-content:space-between; gap:12px; }
.transform-actions .text-button { font-size:12px; min-height:44px; }
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .atmosphere,.orbit-reactive { transform:none!important; }
  button:hover:not(:disabled),button:hover i,.theme-toggle:hover .theme-symbol,#backButton:hover:not(:disabled) i { transform:none; }
}