:root { --ink:#11251f; --green:#164f42; --lime:#d7f55f; --paper:#f5f1e9; --line:#d7d1c5; --muted:#5d6862; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; color:var(--ink); background:var(--paper); font:16px/1.5 Inter, ui-sans-serif, system-ui, sans-serif; }
main { max-width:1160px; padding:72px 28px 44px; margin:auto; }
.hero { max-width:780px; margin-bottom:34px; }
.eyebrow { margin:0 0 10px; color:var(--green); font-size:.75rem; font-weight:800; letter-spacing:.14em; }
h1 { margin:0; font-size:clamp(2.8rem, 8vw, 5.8rem); line-height:.95; letter-spacing:-.065em; } h1 em { color:var(--green); font-family:Georgia, serif; font-weight:400; }
.lede { max-width:650px; font-size:1.12rem; color:var(--muted); }
.workspace { max-width:640px; }
form { padding:28px; border:1px solid var(--line); border-radius:16px; background:#fffdf8; box-shadow:0 8px 25px #11251f0b; }
.contact { display:inline-block; margin-top:18px; padding:11px 16px; border-radius:8px; background:var(--green); color:#fff; font-weight:800; text-decoration:none; }.contact:hover, .contact:focus { background:#0f3d33; }
.feedback { margin-top:28px; padding:24px 28px; border-radius:16px; background:#e3eee5; }.feedback h2 { margin:0; font-size:1.45rem; }.feedback p { color:#41564d; }.feedback form { padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }.feedback textarea { display:block; width:100%; margin-top:6px; padding:11px 12px; border:1px solid #bfc6bd; border-radius:8px; color:var(--ink); font:inherit; resize:vertical; }.feedback textarea:focus { outline:3px solid var(--lime); border-color:var(--green); }.feedback button { margin-top:14px; padding:11px 16px; border:0; border-radius:8px; background:var(--green); color:#fff; cursor:pointer; font:inherit; font-weight:800; }.feedback button:hover, .feedback button:focus { background:#0f3d33; }.feedback-note { margin-bottom:0; font-size:.85rem; }
label { display:block; font-weight:650; }
.url-field input { font-size:1.05rem; }
input { display:block; width:100%; margin-top:6px; padding:13px 14px; color:var(--ink); border:1px solid #bfc6bd; border-radius:8px; background:#fff; font:inherit; } input:focus { outline:3px solid #d7f55f; border-color:var(--green); }
.hint { margin:8px 0 0; color:var(--muted); font-size:.85rem; }
.detected { margin-top:18px; padding:16px 18px; border-radius:10px; background:#e3eee5; }
.detected-summary { margin:0; font-weight:700; color:var(--green); }
.detected select { margin-top:6px; }
.scale-warning { margin:10px 0 0; padding:9px 11px; border-radius:8px; background:#f6e3df; color:#8a2f26; font-size:.85rem; font-weight:650; }
.custom-width { margin-top:14px; font-size:.85rem; }
.custom-width input { margin-top:6px; }
.aoi-field { margin-top:14px; }
.aoi-field input[type="file"] { margin-top:6px; padding:9px 10px; font-size:.85rem; }
.aoi-status { margin:10px 0 0; padding:9px 11px; border-radius:8px; background:#dcebe3; color:#1c4a3c; font-size:.85rem; font-weight:650; }
.aoi-status.is-error { background:#f6e3df; color:#8a2f26; }
.aoi-actions { margin-top:8px; }
.aoi-clear { padding:7px 12px; border:1px solid #bfc6bd; border-radius:8px; background:#fff; color:var(--ink); cursor:pointer; font:inherit; font-size:.85rem; }.aoi-clear:hover, .aoi-clear:focus { border-color:var(--green); }
.tile-picker { margin-top:14px; }
.tile-picker-map { height:320px; margin-top:8px; border:1px solid #bfc6bd; border-radius:10px; overflow:hidden; background:#e3ded0; }
.tile-picker-actions { display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap; }
.tile-picker-actions button { padding:7px 12px; border:1px solid #bfc6bd; border-radius:8px; background:#fff; color:var(--ink); cursor:pointer; font:inherit; font-size:.85rem; }.tile-picker-actions button:hover, .tile-picker-actions button:focus { border-color:var(--green); }
.tile-picker-status { color:var(--muted); font-size:.85rem; }
select { display:block; width:100%; padding:11px 12px; color:var(--ink); border:1px solid #bfc6bd; border-radius:8px; background:#fff; font:inherit; } select:focus { outline:3px solid #d7f55f; border-color:var(--green); }
.launch { width:100%; margin-top:18px; padding:14px 18px; border:0; border-radius:9px; background:var(--green); color:#fff; cursor:pointer; font:inherit; font-weight:900; letter-spacing:.08em; }.launch:hover, .launch:focus { background:#0f3d33; }.launch:disabled { cursor:wait; opacity:.65; }.process-status { margin:12px 0 0; color:var(--muted); font-size:.9rem; }
.progress-track { height:8px; margin-top:14px; overflow:hidden; border-radius:999px; background:#e3ded0; }
.progress-fill { height:100%; width:0%; border-radius:999px; background:linear-gradient(90deg, var(--green), var(--lime)); transition:width .35s ease-out; }
.progress-fill.is-done { transition-duration:.2s; }
.progress-fill.is-error { background:#b3423a; }
@media (prefers-reduced-motion:no-preference) { .progress-fill:not(.is-done):not(.is-error) { background-size:200% 100%; animation:progress-shimmer 1.6s linear infinite; } }
@keyframes progress-shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
@media (max-width:760px) { main { padding:42px 17px 28px; } }