:root {
  --paper: #f4efe6;
  --ink: #202522;
  --muted: #73766f;
  --line: #d8d1c5;
  --green: #306b54;
  --green-dark: #1f493a;
  --coral: #d9694e;
  --yellow: #e7c15c;
  --white: #fffdf8;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Georgia, 'Times New Roman', serif; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.topbar { height: 76px; padding: 0 clamp(20px, 5vw, 76px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; letter-spacing: -.02em; }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; background: var(--coral); color: var(--white); font-size: 21px; font-weight: bold; transform: rotate(-7deg); }
.brand strong { display: block; font-size: 18px; line-height: 16px; }.brand em { display: block; color: var(--green); font-size: 13px; font-style: italic; }
.topbar-meta { display: flex; align-items: center; gap: 9px; color: var(--muted); font: 11px/1 'Trebuchet MS', sans-serif; text-transform: uppercase; letter-spacing: .1em; }.connection-dot { width: 7px; height: 7px; border-radius: 50%; background: #4b9d72; }.user-name { color: var(--ink); margin-left: 18px; }
.shell { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }.intro { display: flex; justify-content: space-between; gap: 32px; padding: 76px 0 60px; }.eyebrow, .scan-kicker { margin: 0 0 14px; color: var(--coral); font: 11px/1 'Trebuchet MS', sans-serif; font-weight: bold; letter-spacing: .16em; text-transform: uppercase; }.intro h1 { margin: 0; font-size: clamp(45px, 6vw, 79px); font-weight: normal; letter-spacing: -.055em; line-height: .92; }.intro h1 span { color: var(--green); font-style: italic; }.lede { max-width: 500px; margin: 28px 0 0; color: var(--muted); font-size: 18px; line-height: 1.45; }.stats { align-self: end; display: flex; gap: 36px; padding-bottom: 7px; }.stats div { min-width: 100px; }.stats strong { display: block; font-size: 39px; font-weight: normal; line-height: .9; }.stats span { display: block; margin-top: 9px; color: var(--muted); font: 11px 'Trebuchet MS', sans-serif; text-transform: uppercase; letter-spacing: .08em; }
.scan-panel { min-height: 254px; display: flex; justify-content: space-between; align-items: center; overflow: hidden; padding: 38px 56px; color: var(--white); background: var(--green-dark); position: relative; }.scan-panel:after { content: ''; position: absolute; inset: 0; opacity: .15; background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 18px 18px; pointer-events: none; }.scan-copy { position: relative; z-index: 1; }.scan-kicker { color: var(--yellow); }.scan-panel h2 { margin: 0; font-size: 34px; font-weight: normal; }.scan-panel p { max-width: 490px; margin: 11px 0 20px; color: #c8d5ca; font-size: 15px; line-height: 1.45; }.primary-button, .outline-button { border: 0; padding: 13px 18px; font: bold 12px 'Trebuchet MS', sans-serif; letter-spacing: .06em; text-transform: uppercase; }.primary-button { color: var(--green-dark); background: var(--yellow); }.primary-button:hover { background: #f1d47b; }.nfc-icon { display: inline-block; margin-right: 7px; font-size: 20px; line-height: 0; vertical-align: -2px; }.compatibility { margin: 15px 0 0 !important; color: #9db8a5 !important; font: 11px 'Trebuchet MS', sans-serif; }.compatibility span { color: var(--yellow); }.scan-orbit { width: 205px; height: 180px; margin-right: 36px; position: relative; z-index: 1; }.orbit-ring { position: absolute; border: 1px solid rgba(231,193,92,.55); border-radius: 50%; transform: rotate(-25deg); }.ring-one { inset: 5px 0; }.ring-two { inset: 25px 25px; border-color: rgba(231,193,92,.28); }.orbit-core { position: absolute; top: 64px; left: 70px; display: grid; place-items: center; width: 66px; height: 50px; color: var(--green-dark); background: var(--yellow); font: bold 11px 'Trebuchet MS', sans-serif; transform: rotate(-9deg); }
.collection-section { padding: 76px 0 100px; }.section-heading { display: flex; justify-content: space-between; align-items: end; }.section-heading h2 { margin: 0; font-size: 37px; font-weight: normal; letter-spacing: -.04em; }.outline-button { color: var(--green); border: 1px solid var(--green); background: transparent; }.outline-button:hover { color: var(--white); background: var(--green); }.toolbar { display: flex; gap: 12px; margin: 30px 0; padding-bottom: 14px; border-bottom: 1px solid var(--line); }.search-box, .select-box { display: flex; align-items: center; border: 1px solid var(--line); background: rgba(255,253,248,.6); }.search-box { flex: 1; gap: 11px; padding: 0 14px; }.search-box span { color: var(--coral); font-size: 24px; }.search-box input { width: 100%; border: 0; outline: 0; padding: 13px 0; color: var(--ink); background: transparent; font: 14px 'Trebuchet MS', sans-serif; }.select-box { gap: 9px; padding-left: 13px; }.select-box span { color: var(--muted); font: 11px 'Trebuchet MS', sans-serif; text-transform: uppercase; letter-spacing: .08em; }.select-box select { min-width: 145px; padding: 13px 12px 13px 0; color: var(--ink); border: 0; outline: 0; background: transparent; font: 13px 'Trebuchet MS', sans-serif; }.collection-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }.amiibo-card { min-width: 0; background: var(--white); border: 1px solid var(--line); animation: rise .45s both; }.amiibo-visual { display: grid; place-items: center; height: 215px; overflow: hidden; background: #e9e2d6; position: relative; }.amiibo-visual img { width: 100%; height: 100%; object-fit: contain; }.amiibo-placeholder { color: var(--green); font-size: 52px; font-style: italic; }.fr-badge { position: absolute; top: 10px; right: 10px; padding: 5px 7px; color: var(--white); background: var(--coral); font: bold 9px 'Trebuchet MS', sans-serif; letter-spacing: .06em; }.amiibo-info { padding: 16px 17px 18px; }.amiibo-info h3 { overflow: hidden; margin: 0 0 6px; font-size: 19px; font-weight: normal; text-overflow: ellipsis; white-space: nowrap; }.amiibo-info p { margin: 0; color: var(--muted); font: 11px 'Trebuchet MS', sans-serif; text-transform: uppercase; letter-spacing: .08em; }.notice { padding: 12px 15px; margin: 0 0 18px; color: var(--green-dark); background: #e0eadf; font: 13px 'Trebuchet MS', sans-serif; }.empty-state { padding: 65px 20px; text-align: center; border: 1px dashed var(--line); }.empty-icon { color: var(--coral); font-size: 28px; }.empty-state h3 { margin: 11px 0 6px; font-size: 23px; font-weight: normal; }.empty-state p { margin: 0; color: var(--muted); font: 13px 'Trebuchet MS', sans-serif; }
 dialog { width: min(500px, calc(100% - 30px)); padding: 34px; color: var(--ink); border: 1px solid var(--line); background: var(--paper); box-shadow: 14px 14px 0 var(--green); } dialog::backdrop { background: rgba(31,73,58,.45); } dialog h2 { margin: 0; font-size: 34px; font-weight: normal; }.dialog-help { margin: 10px 0 24px; color: var(--muted); font: 13px 'Trebuchet MS', sans-serif; }.dialog-close { position: absolute; top: 13px; right: 15px; border: 0; color: var(--muted); background: transparent; font-size: 25px; }.dialog-close:hover { color: var(--coral); }.dialog-close + .eyebrow { margin-top: 0; } dialog label { display: block; margin: 15px 0; font: 11px 'Trebuchet MS', sans-serif; font-weight: bold; letter-spacing: .08em; text-transform: uppercase; } dialog input { display: block; width: 100%; margin-top: 7px; padding: 11px; border: 1px solid var(--line); background: var(--white); font-size: 14px; } dialog input[type=file] { font-size: 12px; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.label-note { float: right; color: var(--muted); font-weight: normal; letter-spacing: 0; text-transform: none; }.dialog-close + .eyebrow { color: var(--coral); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 800px) { .intro { display: block; padding: 52px 0 42px; }.stats { margin-top: 40px; }.scan-panel { padding: 32px 25px; }.scan-orbit { width: 130px; margin-right: -15px; transform: scale(.8); }.collection-grid { grid-template-columns: repeat(2, 1fr); gap: 13px; }.amiibo-visual { height: 180px; }.collection-section { padding-top: 55px; } }
@media (max-width: 560px) { .topbar { height: 66px; }.topbar-meta { font-size: 0; }.user-name { font-size: 11px; }.intro h1 { font-size: 52px; }.scan-panel { display: block; }.scan-orbit { display: none; }.section-heading { align-items: start; gap: 18px; flex-direction: column; }.toolbar { display: block; }.select-box { margin-top: 10px; }.select-box select { flex: 1; }.collection-grid { grid-template-columns: 1fr 1fr; }.amiibo-visual { height: 150px; }.amiibo-info { padding: 13px; }.amiibo-info h3 { font-size: 16px; }.form-grid { grid-template-columns: 1fr; gap: 0; } }