:root{--night:#101012;--night-2:#1a191c;--paper:#f4efdF;--paper-2:#fffaf0;--ink:#191819;--muted:#666064;--red:#a02731;--gold:#b78b3b;--line:rgba(25,24,25,.28);--receipt:min(820px,calc(100vw - 52px))}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:20px}
body{margin:0;background:var(--night);color:var(--ink);font-family:"Courier New",Courier,monospace;font-size:16px;line-height:1.72;overflow-x:hidden}
.ambient{position:fixed;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:space-between;padding:4vw;overflow:hidden;color:rgba(255,255,255,.025);font:900 clamp(5rem,16vw,14rem)/1 Arial,sans-serif;writing-mode:vertical-rl}
.ambient span:last-child{transform:rotate(180deg)}
.page-layout{position:relative;display:grid;grid-template-columns:170px var(--receipt);justify-content:center;align-items:start;gap:32px;padding:55px 24px 80px}
.section-status{position:sticky;top:28px;color:#fff;padding:22px 17px;border:1px solid rgba(255,255,255,.15);border-radius:14px;background:rgba(255,255,255,.055);backdrop-filter:blur(12px);box-shadow:0 20px 50px rgba(0,0,0,.28)}
.section-status p{margin:0 0 12px;color:rgba(255,255,255,.5);font-size:.69rem;text-transform:uppercase;letter-spacing:.13em}
.section-status strong{display:block;color:#e2b45e;font-size:3.25rem;line-height:1;font-family:Arial,sans-serif}
.section-status span{display:block;margin-top:11px;min-height:45px;color:#f4f0e8;font-size:.84rem;line-height:1.35}
.section-status i{display:block;width:100%;height:3px;margin-top:16px;background:linear-gradient(90deg,var(--red),var(--gold))}
.receipt{position:relative;width:var(--receipt);background:var(--paper);box-shadow:0 30px 90px rgba(0,0,0,.45)}
.receipt::before,.receipt::after{content:"";position:absolute;top:0;bottom:0;width:16px;z-index:2;background:radial-gradient(circle at center,#101012 0 5px,transparent 5.5px) center top/16px 24px repeat-y;pointer-events:none}
.receipt::before{left:-8px}.receipt::after{right:-8px}
.receipt-header,.receipt-section,.receipt-total{position:relative;padding:55px 64px}
.receipt-header{text-align:center;padding-top:48px}
.receipt-header img{display:block;width:88px;height:auto;aspect-ratio:1;object-fit:contain;border-radius:50%;margin:0 auto 18px}
.receipt-meta,.section-code,.receipt-total span{font-size:.69rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.receipt-meta{color:var(--muted);margin:0 0 24px}
h1,h2{font-family:Arial,sans-serif;color:var(--ink);letter-spacing:-.03em}
h1{font-size:clamp(2rem,5vw,3.15rem);line-height:1.08;margin:0 auto 28px;max-width:680px;text-wrap:balance}
h2{font-size:clamp(1.65rem,3.5vw,2.4rem);line-height:1.13;margin:0 0 27px;text-wrap:balance}
p{margin:0 0 21px}
.lead{font-size:1.07rem;font-weight:700}
.anchor-link{text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:4px}
.anchor-link:hover,.anchor-link:focus-visible{color:var(--red)}
.receipt-rule{display:flex;align-items:center;gap:12px;margin:28px 0;color:var(--red);font-size:.72rem;font-weight:900;letter-spacing:.12em}
.receipt-rule::before,.receipt-rule::after{content:"";height:1px;flex:1;background:var(--ink)}
.receipt-section{border-top:2px dashed rgba(25,24,25,.38);scroll-margin-top:22px}
.receipt-section::before{content:"✂";position:absolute;top:-17px;left:27px;padding:0 6px;background:var(--paper);color:var(--muted);font-size:1.15rem}
.section-code{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;color:var(--muted)}
.section-code b{display:inline-grid;place-items:center;min-width:56px;padding:5px 9px;border:1px solid var(--ink);color:var(--ink);letter-spacing:.08em}
.source-row{display:flex;justify-content:space-between;align-items:center;gap:22px;padding:15px 0;margin:6px 0 18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.source-row div{display:grid}
.source-row strong{font-family:Arial,sans-serif;font-size:1.02rem}
.source-row small{color:var(--muted);font-size:.76rem}
.source-row>span{max-width:230px;text-align:right;color:var(--red);font-size:.75rem;font-weight:800;text-transform:uppercase}
.issue-list,.review-fields{list-style:none;padding:0;margin:25px 0 31px}
.issue-list li,.review-fields li{display:grid;grid-template-columns:60px 1fr;align-items:center;gap:15px;padding:12px 0;border-bottom:1px dotted var(--line)}
.issue-list span,.review-fields span{color:var(--red);font-size:.74rem;font-weight:900}
.issue-list b,.review-fields b{font-weight:700}
.receipt-total{border-top:3px double var(--ink);padding-bottom:63px}
.receipt-total>div:not(.grand-total){display:grid;grid-template-columns:120px 1fr;gap:20px;padding:10px 0;border-bottom:1px dotted var(--line)}
.receipt-total>div span{color:var(--muted)}
.receipt-total>div strong{text-align:right}
.grand-total{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:27px;padding:17px 0;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);font-family:Arial,sans-serif}
.grand-total b{font-size:1.45rem;color:var(--red)}
.receipt-total>img{display:block;width:64px;height:auto;aspect-ratio:1;object-fit:contain;border-radius:50%;margin:34px auto 13px}
.receipt-total>a{display:block;text-align:center;color:var(--ink);font-size:.78rem;font-weight:900;text-decoration:none;letter-spacing:.1em}
@media(max-width:1050px){
  .page-layout{grid-template-columns:var(--receipt);gap:0;padding-top:0}
  .section-status{top:0;z-index:20;display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:11px;border-radius:0 0 12px 12px;padding:10px 17px;background:rgba(16,16,18,.94)}
  .section-status p{display:none}
  .section-status strong{font-size:1.55rem}
  .section-status span{min-height:0;margin:0;font-size:.78rem}
  .section-status i{height:2px;margin:0}
}
@media(max-width:620px){
  :root{--receipt:calc(100vw - 24px)}
  body{font-size:15px}
  .page-layout{padding-left:12px;padding-right:12px}
  .receipt-header,.receipt-section,.receipt-total{padding:40px 28px}
  .receipt-header{padding-top:38px}
  h1{font-size:2rem}
  h2{font-size:1.62rem}
  .source-row{align-items:flex-start;flex-direction:column;gap:8px}
  .source-row>span{text-align:left;max-width:none}
  .receipt-total>div:not(.grand-total){grid-template-columns:1fr;gap:3px}
  .receipt-total>div strong{text-align:left}
  .grand-total{align-items:flex-start;flex-direction:column}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}