:root{color-scheme:dark;--bg:#121212;--panel:#161616;--text:#f5f5f5;--muted:#919191;--yellow:#ffd33d;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;min-height:100svh;display:grid;place-items:center;background:var(--bg);color:var(--text);padding:28px;-webkit-font-smoothing:antialiased}
main{width:min(100%,460px);padding:24px 42px 30px;background:var(--panel);border:1px solid #242424;border-radius:28px}
.marca{display:block;width:148px;height:148px;object-fit:contain;margin:-8px auto -13px}
.eyebrow{margin:0 0 14px;color:var(--yellow);font-size:10px;font-weight:700;letter-spacing:.18em;text-align:center}
h1{margin:0;font-size:30px;font-weight:650;letter-spacing:-1.1px;line-height:1.2;text-align:center}
.intro{margin:14px 0 30px;color:var(--muted);font-size:14px;line-height:1.7;text-align:center}
form{display:grid;gap:11px}
label{font-size:12px;font-weight:550;color:#c6c6c6}
input{width:100%;min-height:52px;border:1px solid #303030;border-radius:12px;padding:0 16px;background:#202020;color:var(--text);font:inherit;font-size:14px;transition:border-color .15s,box-shadow .15s}
input::placeholder{color:#737373}
input:focus{outline:none;border-color:var(--yellow);box-shadow:0 0 0 3px #ffd33d12}
button{min-height:48px;border:0;border-radius:999px;padding:12px 20px;background:var(--yellow);color:#141414;font:inherit;font-size:13px;font-weight:750;cursor:pointer;transition:background .15s,transform .15s}
#buscar{margin-top:7px}
button:hover{background:#ffe06a}
button:active{transform:translateY(1px)}
button:focus-visible{outline:2px solid var(--yellow);outline-offset:4px}
button:disabled{opacity:.5;cursor:wait}
#mensaje{margin:20px 0 0;color:var(--muted);font-size:13px;line-height:1.6;text-align:center}
#mensaje:empty{display:none}
output{display:block;margin-top:20px;text-align:center;font-size:44px;font-weight:650;letter-spacing:.16em;color:var(--yellow);font-variant-numeric:tabular-nums}
output:empty{display:none}
#copiar{width:100%;margin-top:16px;background:#262626;color:var(--text)}
#copiar:hover{background:#303030}
footer{margin-top:30px;padding-top:22px;border-top:1px solid #272727;color:#787878;font-size:11px;letter-spacing:.03em;text-align:center}
footer span{padding:0 12px;color:#555}
[hidden]{display:none!important}
@media(max-width:480px){body{padding:18px}main{padding:18px 26px 26px;border-radius:24px}h1{font-size:28px}.marca{width:138px;height:138px}.intro{font-size:13px}}