@charset "UTF-8";
:root{color-scheme:light;--accent:#e09407;--accent-dark:#9a6200;--text:#1a1d24;--muted:#414b56;--border:#ffffff66;--glass:#ffffffad;--font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;color:var(--text);font:14px/1.65 var(--font);-webkit-font-smoothing:antialiased;background:#d9d5c8 linear-gradient(#ffffff15,#16202b26) center/cover no-repeat fixed;background-image:linear-gradient(#ffffff15,#16202b26),url('valley.webp')}button,input{font:inherit}button{cursor:pointer;color:inherit;border:0}button:disabled{cursor:not-allowed}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:4px}input:focus-visible{outline:none}[hidden]{display:none!important}h1,h2,h3,p,figure{margin:0}a{text-decoration:none;color:inherit}.icon-defs{position:absolute;width:0;height:0;overflow:hidden}.icon{width:19px;height:19px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.site-header{height:68px;padding:0 max(24px,calc((100% - 1052px)/2));position:fixed;inset:0 0 auto;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:20px;background:#ffffffcc;backdrop-filter:blur(4px);border-bottom:1px solid #fff3}.brand{display:inline-flex;align-items:center;gap:10px}.brand-icon{display:grid;place-items:center;width:31px;height:31px;color:var(--accent)}.brand-icon .icon{width:21px;height:21px}.brand-name{font-size:20px;font-weight:750;letter-spacing:-.5px}.brand-name>span,.footer-brand>span{color:var(--accent)}.header-actions{display:flex;align-items:center;gap:4px}.nav-link,.guide-button{font-size:14px;font-weight:500;padding:7px 14px;border-radius:6px;background:none}.nav-link.active{color:var(--accent-dark)}.nav-link:hover,.guide-button:hover{background:#0000000b}.page-shell{max-width:1100px;margin:auto;padding:0 24px}
.hero{min-height:448px;padding:123px 20px 51px;display:flex;align-items:center;justify-content:center;text-align:center}.hero-content{width:100%}.hero-badge{display:inline-flex;align-items:center;gap:8px;color:#ffc554;font-size:12px;font-weight:600;padding:6px 17px;border:1px solid #e0940780;background:#e094071c;border-radius:24px;backdrop-filter:blur(3px);box-shadow:0 0 25px #e094072b}.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor}.hero h1{font-size:clamp(54px,6vw,76px);line-height:1.1;letter-spacing:-3px;font-weight:800;margin:18px 0 13px;color:#101419}.hero h1>span{color:var(--accent);text-shadow:0 0 28px #e0940745}.hero-description{display:inline-block;padding:7px 23px;border:1px solid #ffffff40;background:#ffffff66;backdrop-filter:blur(4px);border-radius:24px;color:#171c22;font-size:15px;font-weight:500;letter-spacing:.4px}.hero-actions{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:27px}.hero-start,.hero-help{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:13px;font-weight:600;padding:10px 19px;border-radius:6px}.hero-start{background:var(--accent);border:1px solid var(--accent);box-shadow:0 0 22px #e0940738}.hero-start .icon{width:16px;height:16px}.hero-start:hover{background:#f7b63b}.hero-help{background:#ffffff59;border:1px solid #ffffff40;backdrop-filter:blur(4px)}.hero-help:hover{background:#ffffff8c}
.tool-section{padding:9px 0 0}.section-heading{text-align:center;margin-bottom:25px}.section-heading h2{color:#fff;font-size:27px;font-weight:700;letter-spacing:-.5px;text-shadow:0 1px 10px #0005}.section-heading p{display:inline-block;color:#20272d;font-size:13px;margin-top:10px;padding:5px 20px;background:#ffffff80;border:1px solid #ffffff40;border-radius:24px;backdrop-filter:blur(4px)}.workbench{display:grid;grid-template-columns:310px minmax(0,1fr);gap:18px}.settings-panel,.preview-panel{min-width:0;background:var(--glass);backdrop-filter:blur(7px);border:1px solid var(--border);border-radius:8px}.settings-panel{padding:23px}.panel-heading,.preview-heading{display:flex;justify-content:space-between;align-items:center}.panel-heading h2,.preview-heading h2{font-size:16px;font-weight:650}.panel-heading>.icon{width:17px;height:17px;color:#6f6c5e}.mode-switch{display:flex;padding:4px;gap:4px;border-radius:6px;background:#0000000c;margin:20px 0 22px}.mode-button{display:flex;align-items:center;justify-content:center;gap:7px;flex:1;padding:9px 5px;font-size:13px;border-radius:4px;background:none;color:#424747}.mode-button .icon{width:15px;height:15px}.mode-button.active{background:var(--accent);color:#242015;font-weight:600}.mode-button:hover:not(.active){background:#ffffff60}.field-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:9px;font-size:13px}.field-heading>label{font-weight:550}.field-heading>span{font-size:11px;color:#555c5e}
.upload-zone{width:100%;min-height:143px;padding:18px 8px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;background:#ffffff30;border:1px dashed #6b736c;border-radius:6px}.upload-zone:hover,.upload-zone.dragover{background:#fff9;border-color:#bc7a08}.upload-icon{display:grid;place-items:center;color:#815207;background:#e094071a;border-radius:6px;width:36px;height:36px}.upload-icon .icon{height:21px;width:21px}.upload-zone strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:550;color:#8a5800}.upload-zone strong>span{margin-left:3px;color:#40494a;font-size:11px;font-weight:400}.upload-formats{font-size:10px;color:#5c6262;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.upload-zone.has-file{border-style:solid;border-color:#b68123}.upload-zone.has-file strong{width:100%;text-align:center}.upload-zone:disabled{opacity:.6}.upload-below{display:flex;align-items:center;justify-content:space-between;gap:7px;margin-top:9px;font-size:10px;color:#505858}.upload-below button{display:flex;align-items:center;gap:4px;font-size:11px;color:#825100;padding:0;background:none}.upload-below button .icon{width:12px;height:12px}.upload-below button:hover,.text-button:hover{text-decoration:underline}
.key-heading{margin-top:23px}.required-dot{color:#a85b00}.text-button{display:flex;align-items:center;gap:4px;padding:0;background:none;color:#865400;font-size:11px}.text-button .icon{height:13px;width:13px}.key-input{display:flex;align-items:center;gap:9px;padding:0 9px;height:43px;background:#ffffff78;border:1px solid #69716b66;border-radius:6px;color:#5b6261}.key-input:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px #e0940720}.key-input>.icon{height:15px;width:15px}.key-input input{width:100%;min-width:0;color:#242b2d;background:none;border:0;padding:9px 0;font-size:12px}.key-input input::placeholder{color:#67716b;font-size:11px}.icon-button{display:inline-flex;justify-content:center;align-items:center;padding:5px;color:#525b57;border-radius:4px;background:none}.icon-button>.icon{width:16px;height:16px}.icon-button:hover{color:#845100;background:#e094071f}.key-below{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-top:5px;color:#535e57;font-size:10px}.key-below .icon{height:13px;width:13px}.key-below .icon-button{padding:4px}
.method-card{display:flex;align-items:center;gap:9px;padding:12px 10px;margin-top:20px;background:#ffffff36;border:1px solid #ffffff66;border-radius:6px}.method-icon{display:flex;color:#976000}.method-card strong{font-size:12px;font-weight:600}.method-card p{color:#53605a;font-size:10px;margin-top:3px}.method-check{margin-left:auto;width:15px;height:15px;color:#6e5c2b}.primary-button{display:flex;justify-content:center;align-items:center;gap:8px;width:100%;min-height:45px;padding:12px 15px;margin-top:20px;position:relative;background:var(--accent);border:1px solid #d88c00;border-radius:6px;color:#251d10;font-size:13px;font-weight:650;box-shadow:0 0 20px #e0940720}.primary-button>.icon{height:16px;width:16px}.primary-button .button-arrow{position:absolute;right:14px}.primary-button:hover:not(:disabled){background:#f7b83b}.primary-button:disabled{opacity:.52;box-shadow:none}.local-note{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:11px;color:#49594c;font-size:10px}.local-note>.icon{height:11px;width:11px}
.preview-panel{display:flex;flex-direction:column;overflow:hidden}.preview-heading{min-height:66px;padding:17px 21px;border-bottom:1px solid #ffffff60}.preview-title-group{display:flex;align-items:center;gap:9px}.preview-badge{font-size:10px;background:#ffffff66;padding:2px 7px;border:1px solid #ffffff80;border-radius:4px;color:#5b5c4f}.view-switch{display:flex;gap:3px;padding:3px;border:1px solid #ffffff4d;border-radius:5px;background:#ffffff2e}.view-switch .icon-button{padding:5px}.view-switch .active{color:#845400;background:#e0940730}.view-switch .icon{width:14px;height:14px}.preview-stage{position:relative;flex:1;min-height:370px;display:flex;flex-direction:column;justify-content:center;padding:35px 22px 25px;background:#ffffff14}.preview-grid{width:100%;max-width:900px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:center;position:relative}.image-card{min-width:0;overflow:hidden;border:1px solid #ffffffa6;border-radius:6px;background:#ffffffe0}.image-card figcaption{display:flex;justify-content:space-between;align-items:center;gap:5px;padding:10px}.image-label{display:flex;align-items:center;gap:6px;font-size:11px;white-space:nowrap;font-weight:500}.little-dot{width:5px;height:5px;border-radius:50%;background:#667062}.little-dot.mint{background:var(--accent)}.image-tag{font:8px monospace;color:#777c74;letter-spacing:.4px}.mint-text{color:#a36c0e}.image-surface{height:230px;display:flex;justify-content:center;align-items:center;position:relative;overflow:hidden;background:#263027}.image-surface img,.image-surface canvas{display:block;width:100%;height:100%;object-fit:contain}.image-surface img[src="valley.webp"]{object-fit:cover}.image-surface canvas{object-fit:cover;image-rendering:pixelated}.image-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px;min-height:34px;font-size:9px;color:#606960}.image-meta span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.image-meta span:last-child{white-space:nowrap;font:8px monospace;color:#6d7367}.between-arrow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:29px;height:29px;z-index:1;background:var(--accent);border:2px solid #f7eee0;border-radius:50%;color:#3d321b}.between-arrow .icon{height:15px;width:15px}.stage-caption{display:flex;align-items:center;justify-content:center;gap:7px;font-size:11px;color:#465748;margin-top:24px}.stage-caption>.icon{width:12px;height:12px}
.preview-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:85px;padding:18px 20px;border-top:1px solid #ffffff66}.result-status{display:flex;align-items:center;gap:10px;min-width:0}.result-status-icon{display:grid;place-items:center;flex-shrink:0;width:30px;height:30px;background:#ffffff66;border:1px solid #ffffff80;border-radius:50%;color:#786022}.result-status-icon .icon{width:14px;height:14px}.result-status strong{display:block;font-size:12px;font-weight:600}.result-status div>span{display:block;color:#4b5a4e;font-size:10px;margin-top:3px;line-height:1.6}.download-button{display:flex;align-items:center;gap:6px;white-space:nowrap;background:#ffffff80;color:#6f4700;font-size:12px;padding:9px 12px;border:1px solid #bd8e3c;border-radius:5px}.download-button .icon{width:15px;height:15px}.download-button:disabled{color:#656e60;border-color:#a4aa9766;background:#ffffff30;opacity:.7}.download-button:hover:not(:disabled){background:var(--accent);color:#2e281c}.preview-grid.result-only{grid-template-columns:minmax(0,1fr);max-width:440px}.result-only .source-card,.result-only .between-arrow{display:none}.result-only .image-surface{height:260px}.result-placeholder{display:flex;flex-direction:column;align-items:center;gap:12px;color:#d3ddce;font-size:11px}.result-placeholder .icon{height:32px;width:32px}.processing-overlay{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;background:#ffffffe8;backdrop-filter:blur(5px)}.processing-overlay strong{font-size:15px}.processing-overlay>span:last-child{font-size:12px;color:#626b65}.spinner{display:block;width:31px;height:31px;border:2px solid #e0940733;border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.how-it-works{padding-top:65px}.steps-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.step{display:flex;align-items:flex-start;gap:13px;padding:24px 20px;background:var(--glass);backdrop-filter:blur(5px);border:1px solid var(--border);border-radius:8px}.step-number{flex-shrink:0;display:grid;place-items:center;width:27px;height:27px;border-radius:50%;border:1px solid #ffffff80;background:#ffffff59;font-size:13px;font-weight:600}.step h3{font-size:14px;font-weight:650;margin-bottom:7px}.step p{font-size:12px;color:#3f4b43;line-height:1.8}.preserve-note{display:flex;align-items:flex-start;justify-content:center;gap:7px;color:#f7f4e7;font-size:11px;line-height:1.9;margin:22px 0 52px;text-shadow:0 1px 5px #0008}.preserve-note .icon{width:14px;height:14px;margin-top:3px}footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:23px 24px;margin:0 -24px;background:#ffffffc9;border:1px solid #ffffff80;border-bottom:0;border-radius:8px 8px 0 0;font-size:11px;color:#4d574e}.footer-brand{font-size:19px;color:#20251f;font-weight:750;letter-spacing:-.5px}
dialog{color:var(--text);width:min(540px,calc(100% - 32px));max-height:85dvh;padding:28px;border:1px solid #fff9;border-radius:8px;background:#fffffff5;box-shadow:0 20px 80px #0005}dialog::backdrop{background:#17201899;backdrop-filter:blur(4px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#73796f}dialog h2{margin:10px 0 23px;font-size:25px}dialog ol{display:grid;gap:18px;padding-left:22px}dialog li::marker{color:#a66c00}dialog li strong{font-size:14px;font-weight:600}dialog li p{font-size:12px;color:#505c54;line-height:1.9;margin-top:6px}.dialog-privacy{display:flex;align-items:flex-start;gap:10px;padding:15px;margin-top:24px;border:1px solid #e0940738;border-radius:6px;background:#e094070d;color:#76531f}.dialog-privacy p{font-size:11px;line-height:1.9}.dialog-privacy .icon{margin-top:2px}.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);max-width:calc(100% - 28px);z-index:30;border:1px solid #fff9;border-radius:6px;background:#fffffff5;box-shadow:0 8px 35px #0003;padding:12px 19px;color:#3e482d;font-size:12px;line-height:1.8}.toast.error{color:#8c3923;background:#fff0e9;border-color:#cf927d}.error-state .result-status-icon{background:#f4c8b5;border-color:#e2a58c;color:#99462b}.error-state #status-title{color:#8a321b}

/* Shared layout refinements and the dedicated phone layout. */
.menu-toggle,.mobile-preview-link { display:none; }
.hero-badge { color:#805009; background:#fff9; border-color:#b4873860; box-shadow:none; }
.section-heading h2 { color:#202731; text-shadow:0 1px 15px #ffffffb3; }
.section-heading p { background:#ffffffa6; }
.preserve-note { color:#29372c; background:#ffffffa6; text-shadow:none; border-radius:6px; padding:10px 15px; }
#preview-panel { scroll-margin-top:0; }
.image-card,.image-surface,.key-input,.preview-title-group { min-width:0; }
.result-status div { min-width:0; overflow-wrap:anywhere; }
@media(min-width:1500px) {
  .hero { min-height:480px; padding-top:140px; }
  .image-surface { height:260px; }
}
@media(max-width:1024px) and (min-width:901px) {
  .hero { min-height:390px; padding-top:115px; }
  .workbench { grid-template-columns:290px minmax(0,1fr); gap:15px; }
  .settings-panel { padding:20px; }
  .preview-stage { padding:30px 15px 24px; }
  .preview-grid { gap:16px; }
  .image-tag { display:none; }
  .image-surface { height:240px; }
  .image-meta { flex-wrap:wrap; gap:3px; padding:8px; }
  .image-meta span { max-width:100%; }
  .image-meta span:last-child { width:100%; }
  .preview-bottom { padding:18px 15px; }
  .result-status-icon { display:none; }
  .download-button { font-size:11px; padding:9px; }
  .step { padding:20px 16px; gap:10px; }
}
@media(max-width:900px) {
  html { scroll-padding-top:calc(80px + env(safe-area-inset-top)); }
  body {
    background-color:#e4e0d5;
    background-image:linear-gradient(#ffffff26,#e4e0d51a 65%,#e4e0d5),url('valley-mobile.webp');
    background-attachment:scroll;
    background-position:center top;
    background-size:100% max(800px,100svh);
    background-repeat:no-repeat;
  }
  .site-header {
    height:calc(64px + env(safe-area-inset-top));
    padding:env(safe-area-inset-top) max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));
    gap:12px; background:#fffffff0; backdrop-filter:blur(5px); border-bottom-color:#2b322014;
  }
  .brand { min-height:44px; gap:9px; }
  .brand-icon { width:30px; height:30px; box-shadow:none; }
  .brand-name { font-size:20px; }
  .menu-toggle { display:flex; width:44px; height:44px; color:#383c35; }
  .menu-toggle>.icon { width:23px; height:23px; }
  .header-actions {
    position:absolute; top:calc(64px + env(safe-area-inset-top)); right:12px;
    display:none; flex-direction:column; align-items:stretch; gap:3px;
    width:min(250px,calc(100vw - 24px)); padding:8px; background:#fffdf8;
    border:1px solid #d5d1c5; border-radius:0 0 8px 8px; box-shadow:0 12px 30px #26251c1f;
  }
  .header-actions.open { display:flex; }
  .header-actions .nav-link,.header-actions .guide-button {
    display:flex; align-items:center; text-align:left; min-height:46px; font-size:15px;
    padding:9px 14px; border-radius:4px; background:none;
  }
  .header-actions .nav-link.active { background:#e0940714; }
  .page-shell { padding:0 max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left)); }
  .hero { min-height:260px; padding:calc(93px + env(safe-area-inset-top)) 0 28px; }
  .hero h1 { color:#171d24; font-size:56px; letter-spacing:-2.5px; margin:12px 0; }
  .hero h1>span { text-shadow:none; }
  .hero-badge { font-size:11px; padding:4px 13px; line-height:1.6; }
  .hero-description { color:#28302d; font-size:12px; padding:6px 13px; max-width:100%; background:#ffffffad; letter-spacing:0; line-height:1.7; }
  .hero-actions { display:none; }
  .tool-section { padding-top:0; }
  .section-heading { margin-bottom:18px; }
  .section-heading h2 { font-size:23px; }
  .section-heading p { font-size:12px; line-height:1.7; padding:4px 13px; margin-top:7px; max-width:100%; }
  .workbench { grid-template-columns:minmax(0,1fr); gap:22px; }
  .settings-panel { padding:19px 18px 12px; }
  .settings-panel,.preview-panel,.step { background:#fffffff0; backdrop-filter:blur(3px); border-color:#ffffffb3; }
  .panel-heading h2,.preview-heading h2 { font-size:16px; }
  .mode-switch { margin:16px 0 17px; padding:4px; }
  .mode-button { min-height:46px; font-size:14px; gap:8px; }
  .mode-button .icon { height:17px; width:17px; }
  .field-heading { font-size:14px; margin-bottom:8px; }
  .field-heading>span { font-size:12px; }
  .upload-zone { min-height:132px; padding:16px 10px; gap:9px; }
  .upload-icon { width:35px; height:35px; }
  .upload-zone strong { font-size:14px; max-width:100%; }
  .upload-zone strong>span { display:none; }
  .upload-formats { font-size:11px; line-height:1.6; white-space:normal; overflow-wrap:anywhere; }
  .upload-below { min-height:44px; margin-top:1px; font-size:11px; gap:6px; }
  .upload-below button { min-height:44px; min-width:88px; justify-content:flex-end; font-size:12px; }
  .key-heading { min-height:44px; margin:7px 0 3px; }
  .text-button { min-height:44px; min-width:88px; justify-content:flex-end; font-size:12px; }
  .key-input { height:49px; padding:0 4px 0 12px; gap:8px; background:#ffffffc9; }
  .key-input input { font-size:16px; padding:11px 0; }
  .key-input input::placeholder { font-size:13px; }
  .icon-button { min-height:44px; min-width:44px; padding:10px; }
  .icon-button>.icon { height:18px; width:18px; }
  .key-input .icon-button { flex-shrink:0; }
  .key-below { min-height:44px; margin-top:1px; font-size:11px; line-height:1.6; gap:2px; }
  .key-below>.icon-button { padding:10px; flex-shrink:0; }
  .key-below .icon { height:17px; width:17px; }
  .method-card { display:none; }
  .primary-button { min-height:50px; font-size:15px; margin-top:12px; box-shadow:none; }
  .primary-button>.icon { width:18px; height:18px; }
  .local-note { font-size:11px; margin-top:11px; line-height:1.7; }
  .mobile-preview-link { display:flex; align-items:center; justify-content:center; gap:6px; min-height:44px; margin-top:4px; color:#815600; font-size:12px; }
  .mobile-preview-link .icon { width:14px; height:14px; transform:rotate(90deg); }
  #preview-panel { scroll-margin-top:0; }
  .preview-heading { min-height:72px; padding:12px 14px; gap:6px; }
  .preview-title-group { gap:6px; flex-wrap:wrap; }
  .preview-badge { font-size:10px; white-space:nowrap; }
  .view-switch { flex-shrink:0; padding:2px; gap:2px; }
  .view-switch .icon-button { padding:10px; min-width:44px; min-height:44px; }
  .view-switch .icon { height:18px; width:18px; }
  .preview-stage { min-height:0; padding:19px 16px 18px; }
  .preview-grid { grid-template-columns:minmax(0,1fr); gap:32px; max-width:none; margin:0; }
  .image-card figcaption { padding:11px 12px; }
  .image-label { font-size:13px; }
  .image-tag { display:inline; font-size:9px; }
  .image-surface { height:auto; aspect-ratio:16/9; max-height:320px; background:#252c29; }
  .image-meta { padding:10px 11px; gap:8px; font-size:11px; min-height:39px; }
  .image-meta span:first-child { min-width:0; }
  .image-meta span:last-child { font-size:10px; }
  .between-arrow { width:28px; height:28px; transform:translate(-50%,-50%) rotate(90deg); }
  .preview-grid.result-only { max-width:none; }
  .result-only .image-surface { height:clamp(230px,75vw,400px); }
  .stage-caption { font-size:12px; line-height:1.8; margin-top:18px; text-align:center; }
  .stage-caption>.icon { height:14px; width:14px; }
  .result-placeholder { font-size:13px; }
  .preview-bottom { flex-direction:column; align-items:stretch; gap:15px; padding:17px 16px 18px; }
  .result-status { align-items:flex-start; gap:9px; }
  .result-status-icon { display:none; }
  .result-status strong { font-size:14px; }
  .result-status div>span { font-size:12px; max-width:none; line-height:1.8; }
  .download-button { min-height:49px; width:100%; justify-content:center; font-size:14px; padding:12px; }
  .download-button .icon { height:18px; width:18px; }
  .processing-overlay { padding:20px; text-align:center; gap:16px; }
  .processing-overlay>span:last-child { line-height:1.8; }
  .how-it-works { padding-top:39px; }
  .steps-grid { grid-template-columns:minmax(0,1fr); gap:12px; }
  .step { padding:20px 17px; gap:12px; }
  .step h3 { font-size:15px; }
  .step p { font-size:13px; }
  .preserve-note { font-size:12px; padding:12px 13px; margin:18px 0 30px; line-height:1.9; }
  footer { margin:0 -14px; padding:21px max(18px,env(safe-area-inset-right)) calc(22px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); flex-wrap:wrap; gap:10px 18px; border-radius:0; font-size:12px; }
  footer>span:last-child { width:100%; }
  .footer-brand { font-size:20px; }
  dialog { width:calc(100% - 24px); max-height:calc(100dvh - 32px); padding:20px; }
  .dialog-heading { font-size:13px; }
  dialog h2 { margin:7px 0 20px; font-size:24px; }
  dialog ol { padding-left:21px; }
  dialog li strong { font-size:15px; }
  dialog li p { font-size:14px; }
  .dialog-privacy { padding:13px; gap:8px; }
  .dialog-privacy p { font-size:12px; }
  .toast { bottom:calc(16px + env(safe-area-inset-bottom)); width:max-content; max-width:calc(100% - 24px); padding:12px 16px; font-size:13px; overflow-wrap:anywhere; }
}
@media(max-width:359px) {
  .settings-panel { padding-left:14px; padding-right:14px; }
  .hero h1 { font-size:51px; }
  .hero-description { font-size:11px; padding:6px 10px; }
  .preview-title-group { gap:4px; }
  .preview-heading { padding-left:11px; padding-right:11px; }
  .preview-badge { font-size:9px; padding:2px 4px; }
  .preview-stage { padding-left:12px; padding-right:12px; }
  .image-tag { display:none; }
  .image-meta { font-size:10px; gap:5px; }
  .image-meta span:last-child { font-size:9px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .spinner { animation-duration:1.5s; }
}

/* Short laptop viewports: keep the hero, but leave the tool on screen. */
@media (min-width: 901px) and (max-height: 760px) {
  .hero { min-height: 0; padding: 78px 20px 10px; }
  .hero h1 { font-size: 46px; letter-spacing: -2px; margin: 8px 0 6px; }
  .hero-badge { padding: 3px 12px; }
  .hero-description { padding: 4px 16px; font-size: 14px; }
  .hero-actions { margin-top: 12px; }
  .hero-start, .hero-help { padding: 8px 16px; }
  .tool-section { padding-top: 0; }
  .section-heading { margin-bottom: 10px; }
  .section-heading h2 { font-size: 22px; }
  .section-heading p { margin-top: 6px; }
}

.transport-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 10px 16px;
  background: #fff6e4;
  border-top: 1px solid #e2b15a;
  color: #6a3e00;
  font-size: 12px;
  line-height: 1.65;
}
.transport-warning .icon { width: 15px; height: 15px; margin-top: 3px; }
.transport-warning span { min-width: 0; }
.transport-warning strong { font-weight: 650; }
.dimension-note {
  margin: 0;
  padding: 0 10px 9px;
  color: #6a4200;
  font-size: 11px;
  line-height: 1.6;
}
#key-hint { min-width: 0; flex: 1; line-height: 1.55; }
#key-hint.weak { color: #8c3923; }
#key-hint.fair { color: #8a5800; }
#key-hint.strong { color: #1f6b3a; }
.toast { top: 84px; bottom: auto; }
@media (max-width: 900px) {
  .toast { top: calc(76px + env(safe-area-inset-top)); bottom: auto; width: max-content; }
  .transport-warning { padding: 10px 12px; font-size: 12px; }
  .dimension-note { font-size: 12px; padding: 0 12px 10px; }
}