html, body { margin:0; padding:0; background:#F1ECE2; -webkit-font-smoothing:antialiased; }
  body { font-family:'Noto Sans TC','Outfit',sans-serif; color:#2A2320; }
  a { color:#3C6FA8; text-decoration:none; }
  a:hover { color:#255182; }
  button { font-family:inherit; }
  @keyframes shakeX { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-9px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(3px)} }
  @keyframes riseIn { from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)} }
  @keyframes floaty { 0%,100%{transform:translateY(0) rotate(-3deg)} 50%{transform:translateY(-7px) rotate(-3deg)} }
  @keyframes popIn { 0%{transform:scale(.85); opacity:0} 60%{transform:scale(1.04)} 100%{transform:scale(1); opacity:1} }
  @media print {
    html, body { background:#fff !important; }
    [data-noprint] { display:none !important; }
    [data-stage] { padding:0 !important; min-height:0 !important; display:block !important; }
    [data-shell] { box-shadow:none !important; border:none !important; width:100% !important; max-width:none !important; border-radius:0 !important; }
    [data-viewport] { height:auto !important; overflow:visible !important; }
    [data-track] { transform:none !important; height:auto !important; display:block !important; }
    [data-page] { height:auto !important; min-height:0 !important; overflow:visible !important; break-inside:avoid; page-break-inside:avoid; break-after:page; page-break-after:always; padding:0 0 10mm 0 !important; }
    [data-page]:last-child { break-after:auto; page-break-after:auto; }
    @page { margin:14mm; }
  }

/* interaction states lifted out of the prototype's style-hover/style-active */
.h1:hover{background:#DCE7F6 !important;border-color:#BFD4EC !important}
.a2:active{transform:scale(.94) !important}
.h3:hover{background:#CCDDF2 !important}
.a4:active{transform:scale(.96) !important}
.h5:hover{background:#F6F0E6 !important}
.h6:hover{transform:translateY(-2px) !important}
.h7:hover{background:#453A33 !important}
.a8:active{transform:scale(.97) !important}
.h9:hover{background:#EEF4FC !important}
.h10:hover{background:#DCE7F6 !important}
.a11:active{transform:scale(.93) !important}

/* ── additions on top of the prototype ────────────────────────── */

/* Mobile browsers shrink the visual viewport as the URL bar hides; dvh keeps
   the stage and the page track from overflowing behind it. */
@supports (height: 100dvh) {
  [data-stage] { min-height: 100dvh; }
  [data-viewport] { height: min(700px, 78dvh); }
}

/* The prototype expressed hover as an attribute, so the classes above are the
   only hover rules. Suppress them on touch, where :hover sticks after a tap. */
@media (hover: none) {
  .h1:hover, .h3:hover, .h5:hover, .h6:hover,
  .h7:hover, .h9:hover, .h10:hover { background: revert !important;
    border-color: revert !important; transform: revert !important; }
}

/* Keypad and nav are driven by the keyboard too — keep focus visible. */
button:focus-visible { outline: 2.5px solid #3C6FA8; outline-offset: 2px; }

[hidden] { display: none !important; }

#lockcard.is-wrong { animation: shakeX .45s ease; }

/* Touch targets: the nav dots are 5px tall by design, so give them a bigger
   invisible hit area rather than changing how they look. */
[data-navdot] { position: relative; }
[data-navdot]::before { content: ""; position: absolute; inset: -11px -3px; }

/* #lock is a flex item, so it shrink-to-fits its content. Without the hint
   string there is nothing wide inside it and the card collapses to the
   keypad's natural width, shrinking the keys below a comfortable tap size.
   Pin it to the card's intended width instead. */
#lock { width: 100%; max-width: 392px; }