:root{--blue:#183fe9;--yellow:#d4c9ab;--red:#183fe9;--cream:#d4c9ab;--panel:#f8f6ee;--black:#111;--mint:#67d7b3;--line:#11111152}*{box-sizing:border-box}html{min-height:100%;overflow-y:auto}body{color:var(--black);background:var(--cream);margin:0;font-family:Arial,Helvetica,sans-serif;overflow-y:auto}button,input{font:inherit}.app{min-height:100vh}.hero{min-height:48vh;color:var(--black);background:var(--cream);border-bottom:1px solid var(--black);grid-template-columns:minmax(0,1fr) minmax(320px,520px);align-items:center;gap:32px;padding:28px clamp(20px,4vw,56px);display:grid;overflow:hidden}.kicker{text-transform:uppercase;margin:0 0 34px;font-size:13px}h1{letter-spacing:0;color:var(--black);margin:0;font-family:Impact,Arial Black,Arial,sans-serif;font-size:clamp(64px,12vw,170px);line-height:.76}.tagline{max-width:500px;color:var(--blue);margin:22px 0 0;font-size:clamp(20px,2vw,30px);font-weight:900;line-height:1.1}.mascot-scene{justify-self:center;width:min(44vw,560px);min-width:320px;position:relative}.mascot-scene video{aspect-ratio:1;object-fit:cover;background:var(--cream);width:100%;height:auto;display:block}.workspace{border-bottom:1px solid var(--black);grid-template-columns:minmax(300px,.9fr) minmax(320px,1.1fr) minmax(300px,.9fr);display:grid}.control-panel,.preview-panel,.results{border-right:1px solid var(--line);min-height:360px;padding:28px}.control-panel{background:var(--cream);align-content:start;gap:18px;display:grid}.form-intro{border-bottom:1px solid var(--line);max-width:520px;padding-bottom:8px}.form-intro p{margin:0;font-size:clamp(24px,3vw,42px);font-weight:900;line-height:1.02}.field{gap:8px;display:grid}label{text-transform:uppercase;font-size:12px}input[type=text]{border:1px solid var(--black);background:var(--panel);width:100%;min-height:48px;color:var(--black);border-radius:0;outline:none;padding:12px 14px}input:focus{box-shadow:0 0 0 4px var(--yellow)}.switch{text-transform:none;align-items:center;gap:10px;font-size:14px;display:flex}.switch input{width:20px;height:20px;accent-color:var(--blue)}button,.download-link{border:1px solid var(--black);background:var(--red);color:#fff;cursor:pointer;justify-content:center;align-items:center;gap:10px;min-height:56px;font-weight:900;text-decoration:none;display:inline-flex}.secondary-action,.secondary-download{background:var(--panel);color:var(--black)}button:disabled{opacity:.6;cursor:wait}.button-icon{color:#fff;background:var(--black);border-radius:50%;place-items:center;width:28px;height:28px;display:grid}.results{background:var(--yellow);border-right:0}.preview-panel{background:var(--cream);grid-template-rows:auto minmax(280px,1fr) auto;gap:14px;display:grid}.preview-toolbar{border:1px solid var(--black);background:var(--panel);border-bottom:0;align-items:center;gap:8px;min-height:38px;padding:10px 12px;display:flex}.preview-toolbar span{border:1px solid var(--black);border-radius:50%;width:10px;height:10px}.preview-toolbar span:first-child{background:var(--red)}.preview-toolbar span:nth-child(2){background:var(--yellow)}.preview-toolbar span:nth-child(3){background:var(--mint)}.preview-toolbar p{text-transform:uppercase;margin:0 0 0 8px;font-size:12px}.preview-frame-wrap{border:1px solid var(--black);background:var(--panel);min-height:280px;position:relative;overflow:hidden}.preview-frame-wrap iframe{background:#fff;border:0;width:100%;height:100%;min-height:420px}.preview-empty{background:var(--cream);text-align:center;place-items:center;padding:24px;font-weight:900;display:grid;position:absolute;inset:0}.preview-empty.is-hidden{display:none}.preview-link{color:var(--black);font-size:13px}.empty,.result-card{align-content:center;gap:18px;min-height:100%;display:grid}.star{font-size:84px;line-height:1}.result-card h2{word-break:break-word;margin:0;font-size:36px}.counts{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.count{border:1px solid var(--black);background:var(--cream);padding:14px}.count strong{font-size:30px;display:block}.error{background:var(--black);color:#fff;padding:18px}@media (width<=980px){.hero,.workspace{grid-template-columns:1fr}.hero{min-height:auto;padding-top:22px;padding-bottom:24px}.mascot-scene{width:min(74vw,300px);min-width:220px;margin-top:-8px;display:block}.control-panel,.preview-panel,.results{border-right:0;border-bottom:1px solid var(--line);min-height:auto}}