/* Keep the working surface near the top of the first viewport. */
.hero{position:relative;z-index:1;display:block;min-height:calc(100svh - 72px);padding:clamp(76px,calc(8vh + 30px),118px) 24px 48px}
.hero-inner{position:relative}
.hero .eyebrow{margin-bottom:16px}
.hero h1{font-size:clamp(44px,5vw,70px);line-height:1.05;min-height:2.1em}
.hero .intro{font-size:18px;margin:20px auto 29px;line-height:1.45}
.hero-inner .message,.hero-inner .result{position:absolute;left:50%;top:calc(100% + 12px);width:min(100%,790px);margin:0;transform:translateX(-50%);animation:surface-in .28s ease-out both}
.hero-inner .message{z-index:2}.hero-inner .result{z-index:1}
.result-main>div{min-width:0}.result h2{overflow-wrap:anywhere}
.quality-picker{position:relative;flex:none}
.result-actions .quality-trigger{min-width:190px;padding:12px 17px;gap:20px;background:#f7f8fa;color:#25272b;border:1px solid #dfe1e7;border-radius:11px;font-weight:500;justify-content:space-between}
.result-actions .quality-trigger:hover{background:#f1f3f8;border-color:#cbd0dc}
.quality-trigger svg{width:16px;height:16px;flex:none;fill:none;stroke:#363940;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
.quality-trigger[aria-expanded="true"] svg{transform:rotate(180deg)}
.quality-trigger:focus-visible,.quality-option:focus-visible{outline:2px solid #416fe7;outline-offset:2px}
.quality-menu{position:absolute;z-index:5;top:calc(100% + 8px);left:0;width:100%;max-height:205px;overflow-y:auto;padding:6px;background:#fff;border:1px solid #e1e3e9;border-radius:14px;box-shadow:0 18px 40px #25283025;animation:menu-in .16s ease-out both}
.quality-menu .quality-option{position:relative;width:100%;justify-content:flex-start;text-align:left;white-space:normal;padding:10px 34px 10px 11px;background:transparent;color:#25272b;border-radius:8px;font-weight:500;font-size:14px}
.quality-option:hover,.quality-option:focus-visible{background:#f1f4fa}
.quality-option[aria-selected="true"]{background:#eef3ff;color:#2856c7}
.quality-option[aria-selected="true"]::after{content:"✓";position:absolute;right:12px;font-weight:700}
.status-line{height:48px;display:flex;justify-content:center;align-items:flex-start}
.search-status{width:max-content;max-width:100%;margin-top:12px;display:flex;align-items:center;gap:9px;padding:8px 12px;border:1px solid #e3e8f3;border-radius:999px;background:#f5f7fc;color:#596170;font-size:12px;line-height:1.35;text-align:left;animation:badge-in .18s ease-out both}
.status-spinner{width:14px;height:14px;flex:none;border:2px solid #dce5ff;border-top-color:#416fe7;border-radius:50%;animation:spin .8s linear infinite}
@keyframes badge-in{from{opacity:0}to{opacity:1}}
#inspect-button,.result-actions .download-button{width:220px;min-height:56px;padding:17px 23px;gap:15px}
.result-actions .download-button{margin-right:-14px}
.download-button.is-loading{font-size:14px;gap:10px}
.download-button.is-loading #download-button-icon{width:16px;height:16px;border:2px solid #ffffff75;border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}
.download-button:disabled{opacity:1;background:#202124;cursor:wait}
.site-footer-note{font-size:11px;color:#a0a4ae;line-height:1.4;text-align:right;white-space:nowrap}
@keyframes menu-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
#inspect-button .button-arrow{display:inline-block;width:16px;position:relative;text-align:center}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes surface-in{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@media(max-height:750px) and (min-width:701px){
  .hero{padding-top:34px}
  .hero h1{font-size:clamp(40px,4vw,56px)}
  .hero .intro{font-size:16px;margin:14px auto 20px}
  .hero .eyebrow{margin-bottom:10px}
  .hero-inner .result{padding:16px}
  .result-actions{margin-top:14px}
}
@media(max-width:700px){
  .hero{min-height:calc(100svh - 62px);padding:38px 20px 270px}
  .hero .eyebrow{margin-bottom:12px}
  .hero h1{font-size:clamp(32px,8vw,48px);line-height:1.06;min-height:3.18em}
  .hero .intro{font-size:15px;margin:15px auto 19px;line-height:1.4}
  .download-form label{margin-bottom:7px}
  .status-line{height:48px}
  .hero-inner .result{padding:14px}
  .result-main{gap:12px}.result-main img{width:72px}
  .result h2{font-size:17px}
  .result-actions{gap:10px;margin-top:14px;flex-wrap:nowrap}
  .result-actions label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .result-actions .quality-picker{min-width:0;flex:1}
  .result-actions .quality-trigger{min-width:0;width:100%;font-size:14px;padding:11px 12px;gap:8px}
  .result-actions .download-button{flex:1;margin:0;padding:11px}
  .search-status{border-radius:14px;white-space:normal}
  .site-footer-note{text-align:left;white-space:normal}
  #inspect-button,.result-actions .download-button{width:auto;min-width:0}
  #inspect-button{width:100%}
  .result-actions .download-button{width:auto;min-height:45px;margin-right:0;padding:11px;font-size:14px}
  .result-actions .download-button.is-loading{padding:11px 8px;gap:6px;font-size:12px}
}
@media(max-width:360px){.hero{padding-left:15px;padding-right:15px}.hero h1{font-size:32px}.result-main img{width:64px}.result-actions{flex-wrap:wrap}.result-actions .quality-picker,.result-actions .download-button{flex-basis:100%}}
@media(prefers-reduced-motion:reduce){.hero-inner .message,.hero-inner .result,.quality-menu,.search-status{animation:none}.status-spinner,.download-button.is-loading #download-button-icon{animation:none}}