:root{
--bg:#dde3ee;
--paper:#f4d968;
--paper-hi:#f7e38c;
--ink:#1b2547;
--cell-text:#1b2547;
--cell-soft:#4a5274;
--dauber:#c4134c;
--on-dauber:#ffffff;
--page-ink:#1b2547;
--page-soft:#4d5677;
--btn-bg:#1b2547;
--btn-fg:#f4d968;
--focus:#2563d9;
--shadow:rgba(27,37,71,.35);
--font-display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
--font-body:"Barlow Semi Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
--bg:#0e1322;
--paper:#18203a;
--paper-hi:#1f2949;
--ink:#efcf63;
--cell-text:#f2ebd5;
--cell-soft:#b8b196;
--dauber:#e0396a;
--page-ink:#eef0f6;
--page-soft:#a6adc4;
--btn-bg:#efcf63;
--btn-fg:#18203a;
--focus:#86b4ff;
--shadow:rgba(0,0,0,.55);
color-scheme:dark;
}
}
:root[data-theme="dark"]{
--bg:#0e1322;
--paper:#18203a;
--paper-hi:#1f2949;
--ink:#efcf63;
--cell-text:#f2ebd5;
--cell-soft:#b8b196;
--dauber:#e0396a;
--page-ink:#eef0f6;
--page-soft:#a6adc4;
--btn-bg:#efcf63;
--btn-fg:#18203a;
--focus:#86b4ff;
--shadow:rgba(0,0,0,.55);
color-scheme:dark;
}

body{
background:var(--bg);
color:var(--page-ink);
font-family:var(--font-body);
font-size:16px;
min-height:100dvh;
display:flex;
align-items:center;
padding-left:max(16px,env(safe-area-inset-left,0px));
padding-right:max(16px,env(safe-area-inset-right,0px));
padding-block:24px;
}

.sheet{
width:100%;
max-width:26rem;
margin:0 auto;
}

.card{
background:var(--paper);
border:3px solid var(--ink);
border-radius:10px;
overflow:hidden;
box-shadow:0 18px 32px -20px var(--shadow);
}

.band{
background:var(--ink);
color:var(--paper);
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:12px;
padding:12px 14px 8px;
}

.word{
font-family:var(--font-display);
font-weight:900;
font-size:clamp(3rem,15vw,4.75rem);
line-height:.8;
letter-spacing:.03em;
margin:0;
}

.meta{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:6px;
text-align:right;
padding-bottom:2px;
}

.eyebrow{
margin:0;
font-weight:700;
font-size:.78rem;
letter-spacing:.16em;
text-transform:uppercase;
}

.cardno{
margin:0;
font-family:var(--font-display);
font-weight:800;
font-size:1.3rem;
line-height:1;
letter-spacing:.05em;
}

.cardno-label{
font-family:var(--font-body);
font-weight:600;
font-size:.72rem;
letter-spacing:.14em;
text-transform:uppercase;
vertical-align:.15em;
}

.signin{
display:flex;
flex-direction:column;
gap:12px;
padding:20px 18px 22px;
}

.f{
font-family:var(--font-display);
font-weight:800;
font-size:1.6rem;
letter-spacing:.02em;
color:var(--cell-text);
}

.i{
font:inherit;
font-weight:600;
font-size:1.1rem;
color:var(--cell-text);
background:var(--paper-hi);
border:2px solid var(--ink);
border-radius:8px;
padding:12px 14px;
min-height:48px;
}

.i:focus-visible{
outline:3px solid var(--focus);
outline-offset:2px;
}

.err{
margin:0;
font-weight:700;
font-size:.9rem;
color:var(--on-dauber);
background:var(--dauber);
padding:8px 12px;
border-radius:8px;
}

.btn{
font:inherit;
font-weight:700;
font-size:1rem;
letter-spacing:.02em;
min-height:48px;
padding:10px 18px;
border-radius:999px;
border:2px solid var(--btn-bg);
cursor:pointer;
touch-action:manipulation;
}

.btn.primary{
background:var(--btn-bg);
color:var(--btn-fg);
}

.btn:focus-visible{
outline:3px solid var(--focus);
outline-offset:2px;
}

.hint{
margin:0;
font-size:.9rem;
line-height:1.4;
color:var(--page-soft);
}