/* AGAIN — a warm second chance for a photo. The older free studio keeps its room. */
.again-product { --ink-on-dark:#354335; --ink-on-dark-soft:#7b806e; background:#f4efe4; }
.product-screen { background:#f4efe4; color:#354335; }
.product-header { height:80px; flex:0 0 80px; padding:0 42px; display:flex; justify-content:space-between; align-items:center; gap:24px; border-bottom:1px solid #dcdccf; }
.product-brand { border:0; background:none; padding:0; color:#354335; display:flex; align-items:center; gap:10px; font:600 22px var(--sans); cursor:pointer; white-space:nowrap; }
.product-brand small { font-size:9px; font-weight:500; letter-spacing:.23em; margin-left:4px; }
.brand-icon { display:grid; place-items:center; width:30px; height:30px; background:#405544; color:#f4efe4; border-radius:50%; font-size:25px; font-weight:400; }
.quiet-button { background:transparent; border:0; color:inherit; font:inherit; font-size:12px; padding:9px 10px; cursor:pointer; border-radius:4px; }
.quiet-button:hover { background:#4055440c; }
.quiet-button:disabled { opacity:.35; cursor:default; }
.action-button { display:flex; align-items:center; justify-content:center; gap:16px; background:#405544; color:#faf4e9; border:1px solid #405544; padding:16px 25px; min-height:51px; border-radius:5px; font:500 14px var(--sans); cursor:pointer; transition:background .2s,transform .2s; }
.action-button:hover { background:#304536; transform:translateY(-1px); }
.action-button:disabled { opacity:.4; transform:none; cursor:default; }
.product-screen button:focus-visible,.product-screen input:focus-visible,.product-screen select:focus-visible { outline:2px solid #b96642; outline-offset:4px; }
.product-kicker { font-size:10px; letter-spacing:.16em; color:#838773; }
.home-header-note { font-size:11px; letter-spacing:.04em; color:#888975; }
.again-home { overflow-y:auto; align-items:stretch; justify-content:flex-start; text-align:left; padding:0; }
.again-home-content { max-width:1360px; width:100%; margin:auto; padding:30px 60px 25px; }
.again-hero { display:grid; grid-template-columns:1.1fr 1fr; min-height:390px; align-items:center; gap:36px; padding:10px 0 32px; }
.again-hero-copy h1 { white-space:pre-line; font:600 clamp(48px,5.2vw,79px)/1.22 var(--sans); letter-spacing:-.045em; margin:20px 0; }
.again-hero-copy p { font-size:13px; color:#7b806e; line-height:1.9; margin:0 0 27px; }
.home-upload { width:max-content; min-width:250px; }
.home-upload-note { margin:12px 0 0; font-size:10px; display:flex; align-items:center; gap:9px; color:#898c77; }
.home-upload-note i { font-size:7px; color:#b96642; font-style:normal; }
.again-hero-art { position:relative; height:370px; }
.hero-orbit { position:absolute; left:0; top:80px; color:#dedcca; font-size:200px; font-family:Georgia,serif; line-height:1; transform:rotate(-35deg); }
.hero-photo { position:absolute; margin:0; width:245px; padding:11px 11px 0; background:#fffaf0; box-shadow:0 20px 40px #37412c24; }
.hero-photo img { width:100%; height:250px; display:block; object-fit:cover; }
.hero-photo figcaption { text-align:center; color:#6d7361; font-size:9px; padding:14px 3px 16px; }
.hero-photo--back { left:15%; top:13px; transform:rotate(-9deg); }
.hero-photo--back img { filter:saturate(.78) brightness(.86); }
.hero-photo--film { left:43%; top:65px; transform:rotate(9deg); }
.hero-tag { position:absolute; top:1px; right:17px; letter-spacing:.12em; font-size:9px; padding:8px 12px; background:#dfc197; color:#6e5c40; transform:rotate(6deg); }
.hero-spark { position:absolute; left:7%; bottom:25px; font-size:34px; color:#b96642; }
.mode-section-heading { display:flex; justify-content:space-between; align-items:center; margin:12px 0 18px; }
.mode-section-heading h2 { font-size:18px; font-weight:500; }
.mode-section-heading>span { font-size:10px; color:#93947f; }
.again-mode-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; width:100%; max-width:none; margin:0; }
.again-mode-card { display:block; width:100%; min-height:174px; padding:20px 22px; background:#f8f3e9; color:#465542; border:1px solid #d6d8c8; text-align:left; border-radius:7px; cursor:pointer; }
.again-mode-card:hover { background:#eeeddf; transform:translateY(-2px); }
.again-mode-card.is-on { border-color:#52664b; background:#e8eddf; }
.again-home .again-mode-card { border:1px solid #d6d8c8; }
.again-home .again-mode-card.is-on { border-color:#52664b; }
.again-home .again-mode-card:hover { padding-left:var(--card-pad,22px); }
.mode-card-top { display:flex; justify-content:space-between; font-size:10px; letter-spacing:.1em; color:#939882; }
.mode-card-top>span { font-size:20px; line-height:1; color:#7b876c; }
.again-mode-card h3 { font-size:21px; font-weight:500; margin:15px 0 7px; }
.again-mode-card p { font-size:11px; line-height:1.7; color:#898d79; margin:0; }
.mode-card-bottom { display:flex; justify-content:space-between; align-items:center; font-size:10px; color:#7e886f; margin-top:19px; }
.mode-card-bottom b { font-weight:400; font-size:19px; }
.home-secondary { display:flex; justify-content:space-between; align-items:center; margin-top:17px; font-size:10px; color:#8d927e; }
.again-samples { display:flex; gap:10px; margin:8px 0 0; color:#8d927e; font-size:10px; }
.again-samples button { color:#65765a; border-color:#c7ccb9; background:none; border-radius:3px; }
.home-resume { width:100%; padding:12px 16px; margin-bottom:20px; border:1px solid #d3d9c6; background:#e8eddf; color:#52644c; }
.home-resume .entry__label { font:500 12px var(--sans); }.home-resume .entry__sub { font-size:10px; color:#8c967e; }
.again-home .home__drop { background:#e8eddfed; color:#405544; border-color:#6e8261; }
.product-modes { display:flex; align-items:center; gap:4px; }
.mode-tab { border:0; background:none; font:inherit; font-size:12px; color:#818875; cursor:pointer; padding:10px 15px; border-radius:20px; }
.mode-tab.is-on { background:#e6eadc; color:#405544; }
.product-header-actions { display:flex; gap:8px; }
.product-workspace { display:grid; grid-template-columns:minmax(0,1fr) 345px; min-height:0; flex:1; }
.film-style-panel { margin:20px 0 5px; color:#69765d; }
.film-style-panel h2 { margin:0 0 10px; font-size:11px; }
.film-switch { display:flex; gap:5px; padding:4px; border:1px solid #d2d8c5; border-radius:4px; }
.film-switch-button { flex:1; padding:8px; background:none; border:0; color:inherit; font:inherit; font-size:11px; cursor:pointer; border-radius:3px; }
.film-switch-button.is-on { background:#e0e7d5; color:#3e5337; }
.film-options { display:flex; flex-direction:column; gap:12px; margin-top:13px; }
.film-options select { background:#f6f2e8; padding:8px; border:1px solid #d2d8c5; color:#69765d; font:inherit; font-size:11px; }
.film-options label { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:10px; }.film-options input { width:72%; accent-color:#6c7e59; }
.film-hint { font-size:9px; color:#939c84; line-height:1.7; margin:9px 0 0; }
.coloring-screen.is-film .coloring-color { filter:grayscale(1); }
.image-comparison { --split:50%; position:relative; aspect-ratio:4 / 3; width:100%; overflow:hidden; background:#e7e5d8; }
.compare-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; display:block; }
.compare-image--after { clip-path:inset(0 0 0 var(--split)); }
.compare-label { position:absolute; top:15px; padding:5px 9px; background:#f6f2e5dd; color:#56634b; font-size:9px; pointer-events:none; letter-spacing:.08em; }
.compare-label--before { left:15px; }.compare-label--after { right:15px; }
.compare-divider { position:absolute; left:var(--split); top:0; bottom:0; width:1px; background:#fffaf0; pointer-events:none; box-shadow:0 0 10px #0002; }
.compare-divider span { position:absolute; top:50%; left:0; transform:translate(-50%,-50%); width:36px; height:36px; border-radius:50%; background:#fff8eb; color:#53614a; display:grid; place-items:center; box-shadow:0 3px 10px #0002; }
.compare-range { position:absolute; inset:0; opacity:0; width:100%!important; height:100%; margin:0; cursor:ew-resize; touch-action:pan-y; }
.image-comparison:focus-within { outline:2px solid #bb7950; outline-offset:4px; }
.image-comparison.is-revealing .compare-image--after { animation:photo-reveal 1.8s ease-out; }.image-comparison.is-revealing .compare-divider { animation:divider-reveal 1.8s ease-out; }
@keyframes photo-reveal { from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 50%)} }
@keyframes divider-reveal { from{left:100%}to{left:50%} }
.hero-compare-art { height:auto; padding:0; transform:rotate(1.5deg); }
.hero-compare-art .image-comparison { border:10px solid #fff8eb; box-shadow:0 12px 30px #42502b1d; }
.hero-compare-caption { display:flex; justify-content:space-between; margin-top:13px; color:#8e967e; font-size:9px; }
.rescue-screen .result-frame .image-comparison { max-width:680px; max-height:100%; aspect-ratio:auto; height:100%; }
.again-home .again-hero-copy h1 { font-family:var(--serif); font-weight:500; font-size:clamp(45px,4.8vw,68px); line-height:1.28; letter-spacing:-.035em; }
.again-home .again-mode-card { min-height:151px; background:transparent; border-radius:0; border-width:1px 0; box-shadow:none; }
.again-home .again-mode-card.is-on { border-color:#697d58; background:#e7eddf65; }
.again-home .again-mode-card h3 { font-size:22px; margin:13px 0 9px; }
.again-home .mode-card-bottom { margin-top:14px; }.again-home .home-resume { margin:20px 0 0; }
.studio .free-product-header { position:absolute; top:0; left:0; right:0; height:66px; min-height:66px; padding:0 26px; z-index:40; background:#f4efe4f5; color:#354335; }
.studio .studio__stage { top:80px; }.studio .edge--tl,.studio .edge--tr { top:76px; }
.studio__easel .studio-film-output { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.replay__stage { position:relative; }.replay__stage .studio-film-output { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.free-film-menu { position:relative; font-size:11px; color:#5d6f51; }
.free-film-menu summary { list-style:none; cursor:pointer; padding:8px 12px; }.free-film-menu summary::-webkit-details-marker{display:none}
.free-film-menu .film-style-panel { position:absolute; right:0; top:30px; width:260px; padding:20px; background:#f4efe4; border:1px solid #d1d8c4; border-radius:5px; box-shadow:0 13px 30px #1b271b28; }
.free-start-message { margin:auto; color:#8a937b; font-size:13px; }
.product-main { padding:27px 45px 24px; display:flex; flex-direction:column; align-items:center; min-width:0; min-height:0; background:#ebeade; }
.workspace-caption { width:100%; display:flex; justify-content:space-between; align-items:center; color:#8c927b; font-size:10px; letter-spacing:.08em; margin-bottom:14px; min-height:36px; }
.result-frame { flex:1; min-height:0; min-width:0; display:flex; align-items:center; justify-content:center; width:100%; position:relative; }
.result-frame canvas { max-width:100%; max-height:100%; width:auto; height:auto; box-shadow:0 15px 30px #43513126; background:#f8f3e9; display:block; object-fit:contain; }
.result-caption { font-size:11px; color:#939881; margin:19px 0 0; line-height:1.6; text-align:center; }
.product-side { overflow-y:auto; padding:34px 29px 24px; display:flex; flex-direction:column; border-left:1px solid #d8dacb; min-height:0; }
.product-side h1 { font:500 30px/1.5 var(--serif); white-space:pre-line; margin:17px 0 10px; letter-spacing:-.02em; }
.product-side h2 { font-size:11px; margin:20px 0 11px; color:#707d62; }
.product-description { color:#92967f; font-size:11px; line-height:1.9; margin:0 0 22px; }
.effect-choices { display:flex; flex-direction:column; gap:8px; }
.effect-choice { display:flex; flex-direction:column; align-items:flex-start; gap:6px; background:transparent; color:#738165; border:1px solid #d3d7c7; border-radius:5px; padding:12px 14px; cursor:pointer; font-family:inherit; text-align:left; }
.effect-choice b { font-size:13px; font-weight:500; }
.effect-choice span { font-size:10px; color:#989c84; line-height:1.5; }
.effect-choice.is-on { background:#e8eddf; border-color:#7c8b6a; color:#405544; }
.product-slider { display:flex; justify-content:space-between; align-items:center; font-size:11px; color:#8a947a; margin:20px 0 0; gap:15px; }
.product-slider input { width:75%; accent-color:#6c7e59; }
.product-tip { background:#eeeedd; border-left:2px solid #b7be9d; padding:11px 13px; font-size:10px; color:#939b81; line-height:1.9; margin:23px 0 12px; }
.product-status { font-size:10px; color:#8a957b; line-height:1.7; margin:5px 0 14px; min-height:18px; }
.product-save { margin-top:auto; padding-top:12px; display:flex; flex-direction:column; gap:7px; }
.coloring-tools { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.coloring-tools .effect-choice { padding:12px 10px; }
.coloring-tools .effect-choice b { font-size:11px; }
.coloring-auto-color { background:#faf6ec; color:#758469; border:1px solid #d0d6c3; border-radius:4px; width:100%; font:inherit; font-size:11px; padding:11px; cursor:pointer; }
.coloring-auto-color.is-on { background:#e8eddf; border-color:#7c8b6a; }
.coloring-colors { display:flex; gap:9px; flex-wrap:wrap; margin-top:14px; }
.coloring-color { width:26px; height:26px; border-radius:50%; border:3px solid #f4efe4; outline:1px solid #d7d9c7; cursor:pointer; }
.coloring-color.is-on { outline:2px solid #526849; }
.coloring-note { font-size:10px; line-height:1.8; color:#969f86; margin:11px 0 0; }
.coloring-history { display:flex; justify-content:center; align-items:center; gap:16px; margin:15px 0 0; font-size:11px; color:#8c957c; }
.coloring-history label { display:flex; align-items:center; gap:5px; }
.coloring-history input { accent-color:#6c7e59; }
.coloring-help { border:1px dashed #a7b292; background:none; padding:12px; font:inherit; font-size:11px; color:#7c8d68; cursor:pointer; border-radius:4px; margin:0 0 8px; }
.coloring-help:disabled { opacity:.4; }
.coloring-settings { font-size:10px; color:#8f9a7e; margin-top:17px; }
.coloring-settings summary { cursor:pointer; padding:5px 0; }
.coloring-settings label { display:block; line-height:1.7; margin:7px 0; }
.coloring-settings select { width:100%; padding:8px; border:1px solid #cbd4be; background:none; color:inherit; }
.coloring-frame canvas { cursor:crosshair; touch-action:none; }
.rescue-screen.is-film .product-main { background:#e5e3dc; }
.rescue-screen.is-film .result-frame canvas { border:7px solid #262c24; }
.rescue-screen.is-film .mode-tab.is-on { background:#deddd6; }
.gallery.product-screen .room-light { display:none; }
.gallery.product-screen .topbar { border-bottom:1px solid #dcdccf; padding:26px 40px; }
.gallery.product-screen .work__frame { background:#fff8ed; box-shadow:0 12px 24px #4a512322; }
.again-product .panel { background:#f4efe4; color:#354335; border:1px solid #d4d7c7; box-shadow:0 20px 80px #26312040; }
.again-product .panel__body,.again-product .panel__title { color:#354335; }
.again-product .panel__subtitle { color:#8a937b; }
.again-product .chip { color:#617253; border-color:#b9c3ab; }
.again-product .chip.is-on { background:#e0e8d4; }
.again-intro { position:fixed; inset:0; z-index:100; background:#f4efe4; display:grid; place-items:center; animation:intro-out .45s 2.35s both; }
.intro-skip { position:absolute; right:38px; top:27px; background:none; border:0; color:#8f957d; font:inherit; font-size:11px; cursor:pointer; }
.intro-scene { display:flex; align-items:center; gap:70px; }
.intro-photo { width:240px; height:290px; padding:12px; background:#fffaf0; position:relative; overflow:hidden; transform:rotate(-7deg); box-shadow:0 20px 40px #35433525; animation:intro-photo 1.4s both; }
.intro-photo>img { width:100%; height:100%; object-fit:cover; filter:brightness(.72) saturate(.5) blur(1.2px); }
.intro-reveal { position:absolute; inset:12px; overflow:hidden; clip-path:inset(0 100% 0 0); animation:intro-reveal 1.1s .6s forwards; }
.intro-reveal img { width:100%; height:100%; object-fit:cover; }
.intro-word span { display:block; color:#9b9f86; font-size:14px; animation:intro-copy .7s .1s both; }
.intro-word strong { display:block; font:500 62px var(--serif); color:#405544; margin:17px 0; animation:intro-copy .7s .65s both; }
.intro-word small { font-size:9px; letter-spacing:.2em; color:#a7ac90; animation:intro-copy .7s 1.1s both; }
@keyframes intro-photo { from{opacity:0;transform:translateY(25px) rotate(-13deg)}to{opacity:1;transform:rotate(-7deg)} }
@keyframes intro-reveal { to{clip-path:inset(0)} }
@keyframes intro-copy { from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none} }
@keyframes intro-out { to{opacity:0;visibility:hidden;pointer-events:none} }
@media(min-width:1500px){.again-home-content{padding-top:38px}.again-hero{min-height:440px}.again-hero-art{height:420px}.hero-photo{width:270px}.hero-photo img{height:285px}.again-mode-card{min-height:187px}}
@media(max-height:800px) and (min-width:850px){.again-home-content{padding-top:20px;padding-bottom:16px}.again-hero{min-height:315px;padding-bottom:20px}.again-hero-art{height:300px}.again-hero-copy h1{font-size:56px;margin:14px 0}.hero-photo{width:210px}.hero-photo img{height:202px}.hero-photo--film{top:48px}.again-mode-card{min-height:153px;padding:16px 19px}.mode-card-bottom{margin-top:14px}.again-hero-copy p{margin-bottom:20px}.product-side{padding-top:25px}.product-side h1{font-size:27px}.product-description{margin-bottom:15px}.product-tip{margin-top:16px}}
@media(max-width:1050px){.product-header{padding:0 25px}.again-home-content{padding:26px 32px}.again-hero{gap:18px}.hero-photo{width:210px}.hero-photo img{height:228px}.hero-photo--back{left:4%}.hero-photo--film{left:32%}.product-workspace{grid-template-columns:minmax(0,1fr) 300px}.product-side{padding:27px 22px}.product-main{padding:20px 25px}.home-header-note{display:none}.mode-tab{padding:9px 12px}}
@media(max-width:760px){.product-header{height:68px;flex-basis:68px;padding:0 18px;gap:10px}.product-brand{font-size:18px}.product-brand small{display:none}.brand-icon{width:26px;height:26px}.again-home-content{padding:24px 20px}.again-hero{grid-template-columns:1fr;gap:10px;padding:0}.again-hero-copy h1{font-size:56px;margin-top:18px}.again-hero-art{height:310px;width:350px;max-width:100%;margin:15px auto}.hero-photo{width:205px}.hero-photo img{height:209px}.hero-photo--back{left:4%}.hero-photo--film{left:38%;top:47px}.hero-tag{right:0}.mode-section-heading{margin-top:24px}.mode-section-heading>span{display:none}.again-mode-cards{grid-template-columns:1fr}.again-mode-card{min-height:136px}.again-mode-card h3{margin-top:10px}.mode-card-bottom{margin-top:13px}.home-secondary{gap:18px}.again-samples{flex-wrap:wrap;margin-top:18px}.product-workspace{display:flex;flex-direction:column;overflow-y:auto}.product-main{min-height:460px;flex:none;padding:16px 18px 22px}.result-frame{height:330px;flex:none}.product-side{overflow:visible;border-left:0;border-top:1px solid #d8dacb;padding:25px 24px}.product-side h1{font-size:27px;white-space:normal}.product-description{margin-bottom:18px}.product-header-actions .quiet-button{font-size:10px;padding:8px 0}.product-modes{gap:0}.mode-tab{font-size:10px;padding:8px}.product-save{margin-top:15px}.intro-scene{gap:25px}.intro-photo{width:160px;height:210px}.intro-word strong{font-size:39px}.intro-word span{font-size:11px}.intro-skip{top:20px;right:20px}}
@media(prefers-reduced-motion:reduce){.again-intro{display:none}.product-screen *{animation:none!important;transition:none!important}}

/* Keep the full comparison above the mode row instead of overflowing it. */
.again-home .hero-compare-art { width:100%; max-width:480px; height:auto; justify-self:end; }
.again-home .hero-compare-art .image-comparison { border-width:8px; }
.product-side .product-save { position:sticky; bottom:-24px; background:#f4efe4; padding:14px 0 8px; z-index:3; }
@media(max-width:760px){
  .again-home .hero-compare-art{max-width:100%;height:auto;margin:16px auto 8px;justify-self:center}
  .product-screen>.product-header:has(.product-modes){height:auto;min-height:100px;flex-basis:auto;flex-wrap:wrap;padding:12px 18px 10px}
  .product-modes{order:3;width:100%;justify-content:space-between}
  .studio .free-product-header{height:100px;min-height:100px;flex-wrap:wrap;padding:12px 18px 10px}
  .studio .studio__stage{top:114px}.studio .edge--tl,.studio .edge--tr{top:106px}
  .free-film-menu .film-style-panel{right:-45px;top:27px}
  .product-side .product-save{position:static}
}