:root{--bg-page: #f0f2f5;--bg-card: #FFFFFF;--text-primary: #000000;--brand-red: #be134a;--pill-bg: #f8f9fa;--font-family: "Inter", system-ui, sans-serif}body{margin:0;font-family:var(--font-family);background-color:#1a1a1a;display:flex;justify-content:center;align-items:center}.page-container{width:100%;display:flex;justify-content:center;align-items:center;padding:20px;background:#1a1a1a}.credential-layout{width:600px;height:360px;background:#fff;border-radius:20px;display:flex;overflow:hidden;position:relative;box-shadow:0 30px 60px #0000004d}.card-visual{width:35%;background-color:var(--brand-red);display:flex;justify-content:center;align-items:center;position:relative}.penguin-icon{width:80%;height:auto;object-fit:contain}.card-content{width:65%;padding:25px 30px;display:flex;flex-direction:column;justify-content:space-between}.card-header-row{display:flex;justify-content:flex-start;margin-bottom:20px}.brand-logo{width:140px;height:auto}.fields-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px 20px}.field-group{display:flex;flex-direction:column;align-items:flex-start}.field-label{color:var(--brand-red);font-weight:800;font-size:.7rem;text-transform:uppercase;margin-bottom:4px;letter-spacing:.5px}.field-value{color:#000;font-size:.95rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;border-bottom:2px solid #eee;padding-bottom:2px;text-align:left}.full-width{grid-column:span 2}.footer-strip{margin-top:auto;width:100%;text-align:left;font-size:.8rem;color:var(--brand-red);font-weight:700;padding-top:10px}@media(max-width:640px){#root{padding:0;max-width:100%}.page-container{padding:0;padding-top:2rem}.credential-layout{width:100%;max-width:350px;height:300px;aspect-ratio:1.58;border-radius:12px}.card-content{padding:15px}.brand-logo{width:100px}.field-label{font-size:.6rem}.field-value{font-size:.8rem}.footer-strip{font-size:.65rem}}.loading-container,.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;color:#fff}.spinner{animation:spin 1s linear infinite;color:var(--brand-red)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}