:root{color-scheme:dark;font-family:Arial,sans-serif;background:#0b0d0f;color:#f1f2f3}*{box-sizing:border-box}body{margin:0}header{padding:22px max(24px,calc((100% - 1320px)/2));border-bottom:1px solid #30353a;display:flex;align-items:center;gap:24px}a{color:#c5cbd1;text-decoration:none}a:hover{color:#ffdc00}.brand{font-size:24px;font-weight:bold;margin-right:auto;color:#fff}.brand span{color:#ffdc00}header>span{font-size:11px;letter-spacing:2px}header>a:last-child{font-size:13px}main{max-width:1368px;margin:auto;padding:36px 24px}.eyebrow{letter-spacing:2px;font-size:11px;color:#9da5ad}h1{font-size:clamp(30px,5vw,44px);letter-spacing:-1.5px;margin:12px 0}.intro>p:last-child{color:#b0b8bf;margin-bottom:30px}.controls{padding:24px;background:#15191d;border:1px solid #333940;border-radius:8px}form{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}label{font-size:11px;letter-spacing:1px;font-weight:bold}label span{color:#949da6;font-weight:normal}input[type=number]{display:block;width:180px;max-width:100%;margin-top:9px;padding:12px;background:#080b0e;border:1px solid #525b64;border-radius:4px;color:white;font:22px monospace}.times{padding-bottom:14px;color:#979fa8}button{min-height:51px;padding:12px 22px;background:#ffdc00;color:#111;border:1px solid #ffdc00;border-radius:4px;font-size:12px;font-weight:bold;cursor:pointer}#download{background:transparent;color:#f1f2f3;border-color:#606973}button:disabled{opacity:.4;cursor:default}:focus-visible{outline:2px solid #ffdc00;outline-offset:4px}#dimensions{font-size:14px;margin-top:22px}#status{font-size:13px;color:#aeb8c1;line-height:1.5;margin-bottom:0}#status.error{color:#ff9c8c}.preview{margin-top:30px}.preview-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}h2{font-size:16px;font-weight:normal}h2 span{font-size:10px;letter-spacing:1px;color:#adb7c0;margin-left:12px}.toggle{display:flex;align-items:center;gap:8px;font-weight:normal}.viewport{max-height:75vh;overflow:auto;background:#000;border:1px solid #454c53;min-height:160px;display:flex;align-items:flex-start;justify-content:center}.viewport canvas{display:block;width:auto;max-width:100%;max-height:70vh;height:auto;image-rendering:pixelated}.viewport canvas[hidden]{display:none}.viewport.native{display:block}.viewport.native canvas{width:auto;max-width:none;max-height:none;height:auto}#placeholder{color:#626c76;padding:40px}.hint,details p{font-size:13px;color:#a3adb6;line-height:1.65}details{border-top:1px solid #30363c;margin-top:28px;padding-top:20px}summary{cursor:pointer;font-size:14px}footer{padding:24px;text-align:center;color:#737e89;font-size:12px}@media(max-width:600px){header{padding:18px;flex-wrap:wrap;gap:12px}header>span{display:none}main{padding:24px 16px}.controls{padding:16px}form{gap:12px}form label{width:calc(50% - 17px)}input[type=number]{width:100%}.times{width:10px}button{flex:1;padding:12px 10px}.preview-heading{flex-wrap:wrap}#dimensions{line-height:1.7}}

.aspect-toggle{font-size:14px;letter-spacing:0;margin-bottom:8px}.aspect-toggle input{accent-color:#ffdc00;width:18px;height:18px}#aspectHint{margin:0 0 20px}input[readonly]{color:#aeb8c1;background:#1e2429;cursor:default}

.mode-label{display:block;margin-bottom:8px}select{font:16px Arial,sans-serif;padding:12px;border:1px solid #525b64;border-radius:4px;color:#fff;background:#080b0e;max-width:100%;width:320px}#modeHelp{margin:8px 0 24px}

#fullscreen{background:transparent;color:#f1f2f3;border-color:#606973}
#viewport:fullscreen{display:flex;align-items:center;justify-content:center;width:100vw;height:100vh;max-height:none;min-height:0;overflow:hidden;background:#000;border:0;padding:0}
#viewport:fullscreen canvas,#viewport.native:fullscreen canvas{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;image-rendering:pixelated;flex:none}
#viewport:fullscreen{cursor:none}

/* AVC wordmark: shared compact size on every viewport. */
header .brand{font-family:Arial,sans-serif;font-size:23px;font-weight:700;letter-spacing:-1px;line-height:1.2;color:#fff;text-decoration:none;white-space:nowrap}header .brand span{color:#ffdc00}