:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--ink:#17191f;--muted:#65707a;--line:#dedbd5;--surface:#f4f1ec;--panel:#fff;--soft:#ebe6de;--accent:#b74331;--accent-dark:#873024}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background:var(--surface);color:var(--ink);font-family:Arial,Helvetica,sans-serif}button{font:inherit}img{display:block}.app-shell{min-height:100svh;padding:24px}.studio{gap:20px;max-width:1760px;margin:0 auto;display:grid}.intro{border-bottom:1px solid var(--line);grid-template-columns:minmax(340px,.8fr) minmax(460px,1.2fr);align-items:center;gap:18px;padding:8px 0 22px;display:grid}.eyebrow,.label{color:var(--accent-dark);letter-spacing:.08em;text-transform:uppercase;margin:0 0 10px;font-size:.74rem;font-weight:700}h1,h2,p{margin-top:0}h1{letter-spacing:0;margin-bottom:0;font-size:clamp(3.8rem,7vw,7.8rem);line-height:.88}h2{letter-spacing:0;margin-bottom:0;font-size:clamp(1.4rem,2vw,2.35rem);line-height:1}.actions{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:14px;display:flex}.actions button{background:var(--accent);color:#fff;cursor:pointer;border:0;min-width:164px;min-height:48px;padding:0 22px;transition:background .18s,transform .18s}.actions button:hover:not(:disabled){background:var(--accent-dark);transform:translateY(-1px)}.actions button:disabled{cursor:wait;opacity:.72}.actions span{color:var(--muted);font-size:.94rem}.error{border-left:3px solid var(--accent);color:var(--accent-dark);margin:14px 0 0;padding-left:12px;line-height:1.45}.input-grid{grid-template-columns:minmax(0,1fr) minmax(250px,360px);align-items:stretch;gap:20px;display:grid}.source-panel{background:var(--panel);border:1px solid var(--line);gap:14px;min-width:0;padding:16px;display:grid}.section-heading{justify-content:space-between;align-items:end;gap:18px;display:flex}.section-heading h2{overflow-wrap:anywhere}.car-canvas{aspect-ratio:2800/1494;background:#111;justify-content:center;align-items:center;width:100%;min-height:0;display:flex;position:relative;overflow:hidden}.car-image{object-fit:contain;width:100%;height:100%}.animated-wheel{aspect-ratio:1;filter:drop-shadow(0 18px 28px #00000047);z-index:2;width:clamp(72px,9vw,150px);animation:1.75s cubic-bezier(.2,.8,.2,1) forwards wheel-fit;position:absolute;top:10%;right:-12%}.alloy-panel{align-content:space-between}.alloy-frame{background:linear-gradient(45deg,#0000000b 25%,#0000 25%) 0 0/26px 26px,linear-gradient(45deg,#0000 75%,#0000000b 75%) 0 0/26px 26px,#f7f5f1;justify-content:center;align-items:center;min-height:300px;padding:20px;display:flex}.alloy-frame img{aspect-ratio:1;object-fit:contain;width:min(100%,310px);max-height:310px}.process-strip{border-bottom:1px solid var(--line);border-top:1px solid var(--line);grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;display:grid}.step{color:var(--muted);background:#ffffff7a;min-height:50px;padding:17px 18px;font-size:.9rem;font-weight:700;transition:background .22s,color .22s}.step.active{background:var(--panel);color:var(--accent-dark)}.result-section{gap:14px;padding-bottom:20px;display:grid}.result-heading{padding-top:4px}.result-state{color:var(--accent-dark);font-size:.84rem;font-weight:700}.result-frame{background:var(--panel);border:1px solid var(--line);justify-content:center;align-items:center;min-height:420px;display:flex;overflow:hidden}.result-frame img{object-fit:contain;width:100%;max-height:80svh}.empty-result,.loading-preview{background:linear-gradient(135deg, #181a1f0e 25%, transparent 25%) 0 0 / 24px 24px, linear-gradient(135deg, transparent 75%, #181a1f0e 75%) 0 0 / 24px 24px, var(--soft);color:var(--muted);flex-direction:column;justify-content:center;align-self:stretch;align-items:center;gap:22px;width:100%;min-height:420px;display:flex}.loading-preview p{color:var(--ink);margin:0;font-weight:700}.loader-car{width:210px;height:92px;position:relative}.car-top{border:5px solid var(--ink);border-bottom:0;border-radius:42px 54px 0 0;width:104px;height:42px;position:absolute;top:14px;left:48px}.car-body{background:var(--accent);border-radius:28px 34px 18px 18px;width:174px;height:38px;animation:.76s ease-in-out infinite alternate car-bob;position:absolute;top:42px;left:18px}.wheel{background:conic-gradient(from 0deg, var(--ink), var(--ink) 12%, white 12%, white 24%, var(--ink) 24%, var(--ink) 36%, white 36%, white 48%, var(--ink) 48%, var(--ink) 60%, white 60%, white 72%, var(--ink) 72%, var(--ink) 84%, white 84%);border:5px solid var(--ink);border-radius:50%;width:42px;height:42px;animation:.68s linear infinite wheel-spin;position:absolute;bottom:0}.wheel.left{left:42px}.wheel.right{right:42px}.road{background:repeating-linear-gradient(90deg, var(--muted) 0 24px, transparent 24px 42px);width:100%;height:4px;animation:.9s linear infinite road-slide;position:absolute;bottom:-12px;left:0}@keyframes wheel-fit{0%{opacity:0;transform:translate(80px,-12px)rotate(0)scale(.78)}18%{opacity:1}72%{opacity:1;transform:translate(-58vw,28vh)rotate(-540deg)scale(.88)}to{opacity:0;transform:translate(-66vw,34vh)rotate(-720deg)scale(.72)}}@keyframes wheel-spin{to{transform:rotate(360deg)}}@keyframes road-slide{to{background-position-x:-42px}}@keyframes car-bob{to{transform:translateY(-3px)}}@media (max-width:1020px){.intro,.input-grid{grid-template-columns:1fr}.intro{align-items:start}.alloy-frame{min-height:220px}}@media (max-width:680px){.app-shell{padding:16px}h1{font-size:clamp(3.1rem,17vw,5.2rem)}.actions{flex-direction:column;align-items:stretch}.actions button{width:100%}.section-heading,.process-strip{flex-direction:column;display:flex}.source-panel{padding:12px}.result-frame,.empty-result,.loading-preview{min-height:300px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}}
