/*
 * ANIMESPIN styles. Sections A-D are the Claude Design export's styles, moved from inline style="" attributes
 * into classes so the page runs under a strict Content-Security-Policy. Section E is ours (live-data states).
 */
/* ===== A. Global rules (verbatim) ===== */
body{margin:0;background:#F4F0E6;color:#111;font-family:Archivo,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#111;text-decoration:underline;text-underline-offset:3px}a:hover{color:#E3262B}
*{box-sizing:border-box}
input::placeholder{color:#8A8378}

/* ===== B. Element styles (verbatim declarations from the inline style attributes) ===== */

/* --- Page wrapper + contract-address (CA) bar --- */
.page{min-height:100vh;background:#F4F0E6;overflow-x:hidden}
.topbar{background:#111;color:#F4F0E6;font-family:'IBM Plex Mono',monospace;font-size:12px;padding:8px clamp(20px,5vw,56px);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.topbar-ca{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.topbar-ca-key{color:#FFD400}
.topbar-copy{font-family:'IBM Plex Mono',monospace;font-size:11px;padding:2px 8px;border:1px solid #F4F0E6;background:transparent;color:#F4F0E6;cursor:pointer}

/* --- Nav --- */
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px clamp(20px,5vw,56px);border-bottom:3px solid #111;flex-wrap:wrap;background:#F4F0E6}
.nav-brand{display:flex;align-items:baseline;gap:10px}
.nav-logo{font-family:'Dela Gothic One',sans-serif;font-size:24px;letter-spacing:-.01em}
.nav-logo-jp{font-family:'Dela Gothic One',sans-serif;font-size:13px;color:#E3262B}
.nav-links{display:flex;gap:28px;font-size:15px;font-weight:700;flex-wrap:wrap}
.nav-link{text-decoration:none}
.nav-link:hover{text-decoration:underline}
.nav-cta{font-family:Archivo,sans-serif;font-weight:800;font-size:14px;padding:12px 18px;border:3px solid #111;background:#FFD400;color:#111;box-shadow:4px 4px 0 #111;text-decoration:none}
.nav-cta:hover{background:#111;color:#FFD400}

/* --- Hero - left column (<header> grid) --- */
.hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));border-bottom:3px solid #111}
.hero-copy{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:40px;padding:clamp(40px,6vw,80px) clamp(20px,5vw,56px);overflow:hidden}
.hero-watermark{position:absolute;right:-20px;bottom:-40px;font-family:'Dela Gothic One',sans-serif;font-size:clamp(160px,22vw,320px);line-height:1;color:transparent;-webkit-text-stroke:2px #111;opacity:.12;pointer-events:none}
.hero-top{position:relative;display:flex;flex-direction:column;gap:20px}
.hero-chips{display:flex;gap:8px;flex-wrap:wrap}
.hero-chip{font-family:'IBM Plex Mono',monospace;font-size:12px;padding:4px 8px;border:2px solid #111;background:#F4F0E6}
.hero-title{margin:0;font-family:'Dela Gothic One',sans-serif;font-weight:400;font-size:clamp(52px,7.6vw,112px);line-height:.95;letter-spacing:-.02em}
.hero-title-tag{display:inline-block;background:#E3262B;color:#F4F0E6;padding:0 .12em;transform:rotate(-2deg);margin-top:.08em}
.hero-bottom{position:relative;display:flex;flex-direction:column;gap:24px;max-width:480px}
.hero-lede{margin:0;font-size:18px;line-height:1.5;text-wrap:pretty}
.hero-ctas{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.hero-cta{font-weight:800;font-size:16px;padding:16px 24px;background:#E3262B;color:#F4F0E6;border:3px solid #111;box-shadow:5px 5px 0 #111;text-decoration:none}
.hero-cta:hover{color:#F4F0E6;box-shadow:1px 1px 0 #111;transform:translate(4px,4px)}
.hero-link{font-weight:700;font-size:16px}

/* --- Hero - right column: DRAW MACHINE --- */
.machine-stage{position:relative;border-left:3px solid #111;background:#FFD400;padding:clamp(24px,4vw,48px);display:flex;align-items:center;justify-content:center;overflow:hidden}
.machine-dots{position:absolute;inset:0;background-image:radial-gradient(#111 1.1px,transparent 1.4px);background-size:9px 9px;opacity:.22;pointer-events:none}
.machine-rays{position:absolute;inset:-30%;background:repeating-conic-gradient(from 0deg at 50% 50%,#111 0deg 1.2deg,transparent 1.2deg 9deg);-webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 32%,#000 62%);mask-image:radial-gradient(circle at 50% 50%,transparent 32%,#000 62%);opacity:.35;pointer-events:none}
.machine{position:relative;width:100%;max-width:460px;background:#F4F0E6;border:3px solid #111;box-shadow:10px 10px 0 #111;display:flex;flex-direction:column}
.machine-head{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;border-bottom:3px solid #111;font-family:'IBM Plex Mono',monospace;font-size:13px;background:#111;color:#F4F0E6}
/* .machine-status: no static declarations (its only declaration is a binding) */
/*   .machine-status dynamic, set from JS (see D): color:{{ statusColor }} */
.machine-reveal{position:relative;display:grid;grid-template-columns:minmax(150px,190px) 1fr;gap:22px;padding:26px 20px 26px 26px;border-bottom:3px solid #111;align-items:center;background-image:radial-gradient(#111 .9px,transparent 1.2px);background-size:7px 7px;background-color:#F4F0E6}
.machine-card-wrap{position:relative}
.machine-card{aspect-ratio:3/4;background:#111;border:3px solid #111;box-shadow:8px 8px 0 #111;overflow:hidden}
.machine-card-img{width:100%;height:100%;background-position:center;background-size:contain;background-repeat:no-repeat}
/*   .machine-card-img dynamic, set from JS (see D): background-image:{{ next.bg }} */
.machine-card-mystery{width:100%;height:100%;display:grid;place-items:center;background:repeating-linear-gradient(45deg,#111 0 10px,#24201C 10px 20px);color:#FFD400;font-family:'Dela Gothic One',sans-serif;font-size:96px;line-height:1}
.machine-info{display:flex;flex-direction:column;gap:8px;min-width:0;background:#F4F0E6;padding:10px;border:2px solid #111}
.machine-tag{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#F4F0E6;padding:3px 7px;align-self:flex-start;border:2px solid #111}
/*   .machine-tag dynamic, set from JS (see D): background:{{ next.color }} */
.machine-name{font-family:'Dela Gothic One',sans-serif;font-size:22px;line-height:1.1}
.machine-sub{font-family:'IBM Plex Mono',monospace;font-size:13px;color:#4A443C}
.machine-pool{padding:18px 16px;display:flex;flex-direction:column;gap:10px;border-bottom:3px solid #111}
.machine-pool-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.machine-label{font-family:'IBM Plex Mono',monospace;font-size:12px;color:#4A443C}
.machine-pool-value{font-family:'Dela Gothic One',sans-serif;font-size:clamp(40px,5vw,56px);line-height:1}
.machine-bar{height:18px;border:2px solid #111;background:#F4F0E6;position:relative;overflow:hidden}
.machine-bar-fill{position:absolute;left:0;top:0;bottom:0;background:#E3262B;border-right:2px solid #111}
/*   .machine-bar-fill dynamic, set from JS (see D): width:{{ pct }} */
.machine-pct{font-size:14px;color:#4A443C}
.machine-state{min-height:96px;padding:16px;display:flex;flex-direction:column;justify-content:center;gap:6px}
/*   .machine-state dynamic, set from JS (see D): background:{{ statusBg }} */
.machine-state-text{font-size:15px;line-height:1.45}
.machine-state-kicker{font-family:'IBM Plex Mono',monospace;font-size:12px}
.machine-state-name{font-family:'Dela Gothic One',sans-serif;font-size:22px;line-height:1.1}
.machine-state-rolling{font-family:'Dela Gothic One',sans-serif;font-size:28px}
.machine-state-won{font-family:'Dela Gothic One',sans-serif;font-size:30px;color:#E3262B;-webkit-text-stroke:1px #111}
.machine-state-winner{font-size:15px}
.machine-sim{font-family:'Dela Gothic One',sans-serif;font-size:18px;padding:16px;border:0;border-top:3px solid #111;background:#111;color:#FFD400;cursor:pointer;letter-spacing:.02em}
.machine-sim:hover{background:#E3262B;color:#F4F0E6}

/* --- Live fee feed (inside <sc-if showFeed>) --- */
.feed{border-bottom:3px solid #111;padding:14px clamp(20px,5vw,56px);display:flex;gap:24px;align-items:center;overflow:hidden;font-family:'IBM Plex Mono',monospace;font-size:13px}
.feed-badge{flex:none;font-weight:500;background:#E3262B;color:#F4F0E6;padding:3px 8px;border:2px solid #111}
.feed-track{display:flex;gap:28px;white-space:nowrap}
.feed-item{display:flex;gap:6px}
.feed-side{font-weight:500}
/*   .feed-side dynamic, set from JS (see D): color:{{ f.color }} */
.feed-who{color:#6B645B}

/* --- #vault - What can hit (prize gallery + franchise filters) --- */
.vault{padding:clamp(56px,7vw,96px) clamp(20px,5vw,56px);display:flex;flex-direction:column;gap:32px}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;border-bottom:3px solid #111;padding-bottom:16px}
.sec-head-text{display:flex;flex-direction:column;gap:10px}
.sec-title{margin:0;font-family:'Dela Gothic One',sans-serif;font-weight:400;font-size:clamp(40px,5.5vw,72px);line-height:1}
.sec-lede{margin:0;font-size:16px;color:#4A443C;max-width:520px}
.vault-filters{display:flex;gap:6px;flex-wrap:wrap}
.vault-filter{font-family:Archivo,sans-serif;font-size:15px;font-weight:800;padding:8px 14px;border:3px solid #111;cursor:pointer}
/*   .vault-filter dynamic, set from JS (see D): background:{{ ft.bg }};color:{{ ft.fg }} */
.vault-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:28px}
.slab{border:3px solid #111;background:#F4F0E6;display:flex;flex-direction:column}
/*   .slab dynamic, set from JS (see D): box-shadow:{{ s.shadow }} */
.slab:hover{transform:translate(-2px,-2px)}
.slab-media{position:relative;aspect-ratio:1/1;border-bottom:3px solid #111;background:#111}
.slab-series{position:absolute;top:10px;left:10px;font-family:'IBM Plex Mono',monospace;font-size:11px;padding:4px 8px;color:#F4F0E6;border:2px solid #111;pointer-events:none}
/*   .slab-series dynamic, set from JS (see D): background:{{ s.color }} */
.slab-badge{position:absolute;top:10px;right:10px;font-family:'Dela Gothic One',sans-serif;font-size:13px;padding:4px 10px;border:2px solid #111;transform:rotate(4deg);pointer-events:none}
/*   .slab-badge dynamic, set from JS (see D): background:{{ s.badgeBg }};color:{{ s.badgeFg }} */
.slab-body{padding:18px;display:flex;flex-direction:column;gap:12px}
.slab-name{font-family:'Dela Gothic One',sans-serif;font-size:20px;line-height:1.15}
.slab-specs{display:flex;flex-direction:column;font-size:14px}
.slab-row-grade{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:2px solid #111}
.slab-val{font-family:'IBM Plex Mono',monospace}
.slab-row-value{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid #111;border-bottom:2px solid #111}

/* --- #how - How it works --- */
.how{padding:0 clamp(20px,5vw,56px) clamp(56px,7vw,96px);display:flex;flex-direction:column;gap:32px;border-bottom:3px solid #111}
.how-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:20px}
.step-1{border:3px solid #111;padding:24px;display:flex;flex-direction:column;gap:10px;background:#F4F0E6;transform:rotate(-.6deg)}
.step-num-1{font-family:'Dela Gothic One',sans-serif;font-size:56px;line-height:1;color:#E3262B;-webkit-text-stroke:2px #111}
.step-title{font-weight:800;font-size:22px}
.step-text{margin:0;line-height:1.55;color:#4A443C}
.step-2{border:3px solid #111;padding:24px;display:flex;flex-direction:column;gap:10px;background:#FFD400;transform:rotate(.5deg)}
.step-num-2{font-family:'Dela Gothic One',sans-serif;font-size:56px;line-height:1;color:#F4F0E6;-webkit-text-stroke:2px #111}
.step-text-2{margin:0;line-height:1.55;color:#111}
.step-3{border:3px solid #111;padding:24px;display:flex;flex-direction:column;gap:10px;background:#F4F0E6;transform:rotate(-.4deg)}
.step-num-3{font-family:'Dela Gothic One',sans-serif;font-size:56px;line-height:1;color:#1F4FD8;-webkit-text-stroke:2px #111}
.step-4{border:3px solid #111;padding:24px;display:flex;flex-direction:column;gap:10px;background:#111;color:#F4F0E6;transform:rotate(.4deg)}
.step-num-4{font-family:'Dela Gothic One',sans-serif;font-size:56px;line-height:1;color:#FFD400;-webkit-text-stroke:2px #F4F0E6}
.step-text-4{margin:0;line-height:1.55;color:#CFC7BA}

/* --- #tickets - Your tickets, your odds (calculator) --- */
.tickets{position:relative;background:#111;color:#F4F0E6;padding:clamp(56px,7vw,96px) clamp(20px,5vw,56px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:48px;overflow:hidden;border-bottom:3px solid #111}
.tickets-dots{position:absolute;inset:0;background-image:radial-gradient(#F4F0E6 1px,transparent 1.3px);background-size:10px 10px;opacity:.07;pointer-events:none}
.tickets-intro{position:relative;display:flex;flex-direction:column;gap:20px}
.tickets-title-hl{color:#FFD400}
.tickets-lede{margin:0;font-size:17px;line-height:1.55;color:#CFC7BA;max-width:440px;text-wrap:pretty}
.calc{position:relative;display:flex;flex-direction:column;gap:16px}
.calc-label{font-family:'IBM Plex Mono',monospace;font-size:12px;color:#9C9488}
.calc-input{font-family:'Dela Gothic One',sans-serif;font-size:28px;padding:14px 16px;border:3px solid #F4F0E6;background:#F4F0E6;color:#111;outline:none;width:100%}
.calc-presets{display:flex;gap:6px;flex-wrap:wrap}
.calc-preset{font-family:'IBM Plex Mono',monospace;font-size:13px;padding:6px 10px;border:2px solid #F4F0E6;background:transparent;color:#F4F0E6;cursor:pointer}
.calc-preset:hover{background:#F4F0E6;color:#111}
.calc-results{display:grid;grid-template-columns:1fr 1fr;border:2px solid #F4F0E6;margin-top:8px}
.calc-cell-tickets{padding:18px;display:flex;flex-direction:column;gap:6px;border-right:2px solid #F4F0E6}
.calc-tickets{font-family:'Dela Gothic One',sans-serif;font-size:36px;color:#FFD400}
.calc-cell-odds{padding:18px;display:flex;flex-direction:column;gap:6px}
.calc-odds{font-family:'Dela Gothic One',sans-serif;font-size:36px}
.calc-note{font-family:'IBM Plex Mono',monospace;font-size:12px;color:#9C9488}

/* --- #winners - Past winners (draw receipt) --- */
.winners{padding:clamp(56px,7vw,96px) clamp(20px,5vw,56px);display:flex;flex-wrap:wrap;gap:56px;align-items:flex-start;border-bottom:3px solid #111}
.winners-intro{flex:1 1 280px;display:flex;flex-direction:column;gap:18px}
.winners-lede{margin:0;font-size:17px;line-height:1.55;color:#4A443C;max-width:420px;text-wrap:pretty}
.receipt-wrap{flex:1 1 360px;max-width:460px;transform:rotate(1.4deg);filter:drop-shadow(8px 10px 0 rgba(17,17,17,.2))}
.receipt{position:relative;background:#FFFDF7;padding:30px 26px 22px;font-family:'IBM Plex Mono',monospace;font-size:13px;color:#111;display:flex;flex-direction:column;gap:16px}
.receipt-head{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.receipt-logo{font-family:'Dela Gothic One',sans-serif;font-size:24px}
.receipt-muted{color:#6B645B}
.receipt-rule{border-top:2px dashed #111}
.receipt-entry{display:flex;flex-direction:column;gap:5px;padding-bottom:14px;border-bottom:1px dashed #111}
.receipt-row{display:flex;justify-content:space-between;gap:12px}
.receipt-slab{display:flex;align-items:center;gap:8px;font-family:Archivo,sans-serif;font-weight:800;font-size:16px}
.receipt-swatch{width:10px;height:10px;border:1px solid #111;flex:none}
/*   .receipt-swatch dynamic, set from JS (see D): background:{{ w.color }} */
.receipt-row-muted{display:flex;justify-content:space-between;gap:12px;color:#4A443C}
.receipt-tx-row{display:flex;justify-content:flex-end}
.receipt-tx{font-size:12px}
.receipt-totals{display:flex;flex-direction:column;gap:6px;font-size:14px}
.receipt-total-row{display:flex;justify-content:space-between}
.receipt-grand-total{display:flex;justify-content:space-between;font-family:'Dela Gothic One',sans-serif;font-size:20px}
.receipt-barcode{height:44px;background:repeating-linear-gradient(90deg,#111 0 2px,transparent 2px 4px,#111 4px 5px,transparent 5px 8px,#111 8px 11px,transparent 11px 12px,#111 12px 13px,transparent 13px 17px)}
.receipt-thanks{text-align:center;color:#6B645B}
.receipt-edge{height:12px;background:linear-gradient(-45deg,transparent 8px,#FFFDF7 0) 0 0/16px 12px repeat-x,linear-gradient(45deg,transparent 8px,#FFFDF7 0) 0 0/16px 12px repeat-x}

/* --- #faq - FAQ accordion --- */
.faq{padding:0 clamp(20px,5vw,56px) clamp(56px,7vw,96px);display:flex;flex-wrap:wrap;gap:40px}
.faq-title{flex:1 1 280px;margin:0;font-family:'Dela Gothic One',sans-serif;font-weight:400;font-size:clamp(40px,5.5vw,72px);line-height:1}
.faq-list{display:flex;flex-direction:column;border-top:3px solid #111;flex:2 1 480px;min-width:0}
.faq-item{border-bottom:2px solid #111}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;background:none;border:0;color:#111;cursor:pointer;text-align:left;font-family:Archivo,sans-serif;font-weight:800;font-size:19px}
.faq-icon{font-family:'IBM Plex Mono',monospace;font-size:20px}
.faq-a{margin:0 0 20px;color:#4A443C;line-height:1.6;max-width:640px;font-size:16px}

/* --- Footer --- */
.footer{position:relative;background:#E3262B;color:#F4F0E6;border-top:3px solid #111;padding:48px clamp(20px,5vw,56px) 28px;display:flex;flex-direction:column;gap:48px;overflow:hidden}
.footer-dots{position:absolute;inset:0;background-image:radial-gradient(#111 1.1px,transparent 1.4px);background-size:9px 9px;opacity:.14;pointer-events:none}
.footer-top{position:relative;display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.footer-slogan{font-family:'Dela Gothic One',sans-serif;font-size:clamp(44px,7vw,104px);line-height:.95}
.footer-cta{font-weight:800;font-size:16px;padding:16px 24px;background:#FFD400;color:#111;border:3px solid #111;box-shadow:5px 5px 0 #111;text-decoration:none}
.footer-cta:hover{color:#111;box-shadow:1px 1px 0 #111;transform:translate(4px,4px)}
.footer-bottom{position:relative;display:flex;flex-direction:column;gap:12px;border-top:2px solid #F4F0E6;padding-top:16px;font-family:'IBM Plex Mono',monospace;font-size:12px}
.footer-row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer-links{display:flex;gap:20px}
.footer-link{color:#F4F0E6}
/*   precedence fix: this colour was inline in the export, so it beat the global a:hover{color:#E3262B} */
.footer-link:hover{color:#F4F0E6}
.footer-legal{max-width:820px;line-height:1.5}

/* ===== C. Replacement for <image-slot> ===== */
/* The gallery used Claude Design's <image-slot id="lot-ID" shape="rect" fit="contain" src="./assets/NAME.png">
   web component. Same look with a plain <img> filling the square .slab-media box: centred and letterboxed
   (fit="contain") on the component's frame tint rgba(127,127,127,.08) over the #111 box. */
.slab-img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;background:rgba(127,127,127,.08)}

/* ===== D. Variant rules for the dynamic style bindings ===== */
/* In the export these were inline bindings such as style="color:{{ statusColor }}". Under a strict CSP drop
   those style attributes and toggle the attributes below instead. Colours copied from the logic script. */

/* Draw machine phase: data-phase="filling|pulling|drawing|won" on .machine
   statusMap: filling [FILLING #FFD400 #F4F0E6] pulling [RIPPING #F26A5E #F4F0E6]
              drawing [DRAWING #F26A5E #FFD400] won [WINNER #7EE08F #FFE97A]
              = [statusTag text, .machine-status colour, .machine-state background] */
.machine-status{color:#FFD400}
.machine-state{background:#F4F0E6}
.machine[data-phase="pulling"] .machine-status,.machine[data-phase="drawing"] .machine-status{color:#F26A5E}
.machine[data-phase="won"] .machine-status{color:#7EE08F}
.machine[data-phase="drawing"] .machine-state{background:#FFD400}
.machine[data-phase="won"] .machine-state{background:#FFE97A}

/* Franchise colour (SERIES): data-fc="op|db|rb" on the element or an ancestor (.machine-info, .slab,
   .receipt-entry). No data-fc = the "Mystery slab" colour #111. */
[data-fc="op"]{--fc:#E3262B}
[data-fc="db"]{--fc:#F07A00}
[data-fc="rb"]{--fc:#1F4FD8}
.machine-tag,.slab-series,.receipt-swatch{background:var(--fc,#111)}

/* Live feed: data-side="BUY|SELL" on .feed-side */
.feed-side[data-side="BUY"]{color:#1A8A3A}
.feed-side[data-side="SELL"]{color:#E3262B}

/* Gallery filters: aria-pressed="true" on the active button */
.vault-filter{background:#F4F0E6;color:#111}
.vault-filter[aria-pressed="true"]{background:#111;color:#FFD400}

/* Slab tier: data-tier="hit|big|chase" on .slab (value >= 1000 chase, >= 300 big, else hit) */
.slab{box-shadow:6px 6px 0 #111}
.slab[data-tier="chase"]{box-shadow:8px 8px 0 #E3262B}
.slab-badge{background:#F4F0E6;color:#111}
.slab[data-tier="big"] .slab-badge{background:#E3262B;color:#F4F0E6}
.slab[data-tier="chase"] .slab-badge{background:#FFD400;color:#111}

/* No finite value set - set from JS through CSSOM (allowed under a CSP without 'unsafe-inline'):
   .machine-bar-fill : fill.style.setProperty('width', pct)   e.g. '61.2%'
   .machine-card-img : img.style.setProperty('background-image', 'url("<validated image URL>")'), or replace
                       the div with <img class="machine-card-photo" src alt> - identical look: */
.machine-card-photo{display:block;width:100%;height:100%;object-fit:contain;object-position:center}

/* ===== E. Live-data additions (not in the export) ===== */
[hidden]{display:none !important}
.machine-sim{display:block;text-align:center;text-decoration:none}
.machine-card-photo{background:rgba(127,127,127,.08)}
.vault-note{margin:0;font-family:'IBM Plex Mono',monospace;font-size:12px;color:#4A443C;max-width:820px;line-height:1.6}
.vault-empty{grid-column:1/-1;margin:0;font-family:'IBM Plex Mono',monospace;font-size:13px;color:#4A443C;border:3px dashed #111;padding:28px;text-align:center}
.receipt-pool{color:#6B645B}
.receipt-entries{display:flex;flex-direction:column;gap:16px}
.receipt-entries:empty{display:none}
.receipt-empty{margin:0;color:#6B645B;text-align:center;line-height:1.6}
.receipt-tx-row{gap:14px}
.footer-links{flex-wrap:wrap}
.calc-input:focus-visible{outline:3px solid #FFD400;outline-offset:2px}
:focus-visible{outline:3px solid #1F4FD8;outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  .slab:hover,.hero-cta:hover,.footer-cta:hover{transform:none}
}