:root {
  color-scheme:dark; --page:#191624; --card:#252033; --ink:#f0eafa; --muted:#bfb5ce;
  --line:#534760; --accent:#cbb4f4; --cyan:#a8ddd5; --rose:#edb4cd; --tint:#332a45; --shadow:#100e18;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--page);
}
* { box-sizing:border-box } [hidden] { display:none!important }
html { scroll-behavior:smooth; scroll-padding-top:20px }
body { margin:0; background-image:radial-gradient(#b8a1d412 .8px,transparent .8px); background-size:24px 24px }
a { color:inherit } button,a { -webkit-tap-highlight-color:transparent }
button { font:inherit } a:focus-visible,button:focus-visible { outline:3px solid var(--rose); outline-offset:4px }
button:not(:disabled):not([aria-disabled=true]),a { cursor:pointer }
button:disabled,button[aria-disabled=true] { cursor:wait; color:var(--muted) }
h1,h2,h3,p { margin:0 } p { line-height:1.55 }
h1,h2,h3,.eyebrow,.amount,.art-caption,.tile-number { font-family:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace }
.shell { width:min(1280px,calc(100% - 64px)); min-height:100svh; margin:auto; display:flex; flex-direction:column }
.masthead { min-height:74px; padding:10px 0; display:flex; align-items:center; gap:28px; border-bottom:1px solid var(--line) }
.brand { display:inline-flex; align-items:center; gap:10px; font-size:28px; font-weight:800; letter-spacing:-1px; text-decoration:none; min-height:44px }
.brand svg { width:32px; height:32px; fill:var(--accent); shape-rendering:crispEdges }
.store-placeholder { margin-left:auto; min-width:0; display:grid; gap:5px; justify-items:end }
.store-download { min-height:44px; padding:10px 18px; font-size:14px }
.store-download:disabled { color:var(--accent); background:var(--tint); border-color:var(--accent); cursor:default; opacity:1 }
#store-status { color:var(--muted); font-size:12px; line-height:1.4; text-align:right; overflow-wrap:anywhere }
.skip { position:absolute; left:20px; top:-100px; padding:14px; background:var(--card); z-index:2 } .skip:focus { top:12px }
main { flex:1; display:flex; flex-direction:column; justify-content:center }
.hero { display:grid; grid-template-columns:1.12fr 1fr; gap:40px; padding:18px 0; align-items:center }
.intro { min-width:0 }
.eyebrow { font-size:12px; letter-spacing:1.3px; font-weight:700; color:var(--accent) }
.intro>.eyebrow { display:flex; align-items:center; gap:10px }
.pixel-dot { display:block; width:7px; height:7px; flex-shrink:0; background:var(--cyan); box-shadow:3px 3px 0 var(--tint) }
h1 { font-size:clamp(34px,3.5vw,45px); line-height:1.14; letter-spacing:-1.6px; margin:15px 0 10px } h1 span { color:var(--accent) }
.intro-bottom { display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:12px }
.lede { font-size:17px }
.intro-note { font-size:15px; color:var(--muted); margin-top:12px }
.art-caption { display:block; font-size:18px; font-weight:700; line-height:1.4; letter-spacing:1.4px; color:var(--accent); margin-top:16px }
.world-art { min-width:0; align-self:center }
.globe-view { width:100%; height:clamp(200px,28vh,270px); position:relative; background:radial-gradient(ellipse at center,#ab8aea13,transparent 68%) }
.globe-view:before,.globe-view:after { content:"+"; font:18px ui-monospace,monospace; position:absolute; color:var(--rose); top:18%; left:8% }
.globe-view:after { color:var(--cyan); top:74%; left:90%; font-size:12px }
.globe-view canvas,.globe-poster { position:absolute; inset:0; width:100%; height:100%; display:block }
.globe-poster { object-fit:contain; image-rendering:pixelated } .globe-ready .globe-poster { visibility:hidden }
.totals-card { min-width:0; background:var(--card); border:1px solid var(--accent); padding:20px 24px; box-shadow:5px 5px 0 var(--shadow); position:relative; animation:arrive .55s ease-out both }
.totals-card:before,.totals-card:after { content:""; position:absolute; width:7px; height:7px; background:var(--accent) }
.totals-card:before { left:-1px; top:-1px } .totals-card:after { right:-1px; bottom:-1px }
.card-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px }
.spark { color:var(--rose); font-size:20px; animation:twinkle .8s ease-in-out 3 }
.totals-card h2 { font-size:24px; letter-spacing:-.7px; line-height:1.3 }
.qualifier { font-size:14px; color:var(--muted); margin-top:6px }
.metrics { padding:14px 0 12px }
.amount { font-size:clamp(40px,4.7vw,60px); line-height:1.15; letter-spacing:-2px; color:var(--cyan); font-weight:700; font-variant-numeric:tabular-nums; overflow-wrap:anywhere }
.amount[data-wide=true] { font-size:clamp(22px,2.5vw,30px); letter-spacing:-.7px }
.unit { font-size:13px; color:var(--muted); margin-top:6px }
.change-row { display:flex; gap:12px; justify-content:space-between; align-items:baseline; margin-top:14px; padding:11px 0; border-top:1px dashed var(--line); border-bottom:1px dashed var(--line); font-size:15px; color:var(--muted) }
.change-row strong { color:var(--ink); font-family:ui-monospace,monospace; font-size:24px; font-variant-numeric:tabular-nums }
.connection-row { display:flex; align-items:center; justify-content:space-between; gap:12px }
.connection { font-size:14px; color:var(--muted); display:flex; align-items:center; gap:9px }
.connection:before { content:""; display:block; background:var(--muted); width:6px; height:6px; flex-shrink:0 }
.totals-card[data-state=connected] .connection { color:var(--cyan) } .totals-card[data-state=connected] .connection:before { background:var(--cyan) }
button { padding:10px 15px; min-height:44px; min-width:94px; border:1px solid var(--line); border-radius:0; color:var(--ink); background:var(--tint); box-shadow:2px 2px 0 var(--shadow); font-size:14px; font-weight:600 }
button:hover:not(:disabled):not([aria-disabled=true]) { border-color:var(--accent); background:#40344f }
button:active:not(:disabled):not([aria-disabled=true]) { box-shadow:none; transform:translate(1px,1px) }
.checked { font-size:13px; color:var(--muted); margin-top:5px; min-height:18px }
.section-heading { display:flex; justify-content:space-between; align-items:baseline; gap:20px; margin-bottom:12px }
.section-heading h2 { font-size:20px; letter-spacing:-.6px }
.principles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px }
.principles article { padding:14px 16px; background:var(--card); border:1px solid var(--line); box-shadow:3px 3px 0 var(--shadow); display:grid; grid-template-columns:auto 1fr; column-gap:10px; align-content:start }
.tile-number { font-size:12px; color:var(--rose); letter-spacing:1px; line-height:21px }
.principles h3 { font-size:16px; line-height:21px }
.principles p { grid-column:1/-1; font-size:14px; color:var(--muted); margin-top:6px }
@keyframes arrive { from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1} }
@keyframes twinkle { 0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.75)} }
@media(min-width:901px) and (max-height:700px) {
  .hero { padding:16px 0; gap:32px } h1 { font-size:36px; margin:12px 0 8px }
  .globe-view { height:220px } .intro-note { margin-top:8px } .art-caption { margin-top:12px }
  .totals-card { padding:17px 22px } .principles article { padding:12px 15px }
}
@media(max-width:1100px) { .hero{gap:26px}.totals-card{padding:20px}.intro-bottom{grid-template-columns:1.1fr .9fr}.section-heading{flex-wrap:wrap;gap:8px} }
@media(min-width:901px) and (max-height:700px) {
  .hero{padding:12px 0}.totals-card{padding:16px 20px}.card-top{margin-bottom:6px}
  .metrics{padding:10px 0 8px}.amount:not([data-wide=true]){font-size:48px}.change-row{margin-top:10px;padding:7px 0}
  .checked{margin-top:2px}.section-heading{margin-bottom:10px}
}
@media(max-width:900px) { .shell{width:calc(100% - 48px)}.hero{grid-template-columns:1fr;padding:28px 0;gap:24px}.intro-bottom{grid-template-columns:1fr 1fr}.globe-view{height:240px}.intro-copy{max-width:36ch}h1{font-size:42px}.principles{gap:12px}.principles article{display:block}.principles h3{margin-top:5px} }
@media(max-width:600px) {
  .shell{width:calc(100% - 40px)}.masthead{min-height:78px;gap:12px;flex-wrap:wrap;padding:12px 0}.brand{font-size:27px}.brand svg{width:30px;height:30px}
  .store-placeholder{width:100%;margin:4px 0 0;justify-items:stretch}.store-download{width:100%}#store-status{text-align:center}
  .hero{padding:28px 0}.intro>.eyebrow{font-size:11px;letter-spacing:1px}h1{font-size:38px;letter-spacing:-1.7px;margin:18px 0}.intro-bottom{grid-template-columns:1fr}.lede{font-size:17px}.intro-note{font-size:15px}.art-caption{display:block}
  .world-art{margin-top:12px}.globe-view{height:240px}
  .totals-card{padding:22px 20px}.totals-card h2{font-size:22px}.amount{font-size:clamp(32px,11vw,60px)}.amount[data-wide=true]{font-size:clamp(18px,5.2vw,30px)}
  .section-heading h2{font-size:20px}.principles{grid-template-columns:1fr}.principles article{padding:18px}.principles h3{font-size:16px}.principles p{font-size:14px}
  .connection-row{flex-wrap:wrap}.connection{min-height:24px}.qualifier{font-size:14px}.eyebrow{letter-spacing:1.1px}
}
@media(prefers-reduced-motion:reduce) { html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important} }
@media(forced-colors:active) {
  body{background-image:none}.spark,.pixel-dot,.globe-view:before,.globe-view:after,.totals-card:before,.totals-card:after{display:none}
  .globe-view{background:none}.totals-card,.principles article,button{box-shadow:none;border-color:CanvasText}.amount,.eyebrow,h1 span,.connection{color:CanvasText!important}.connection:before{background:CanvasText!important}.brand svg{fill:LinkText}a:focus-visible,button:focus-visible{outline-color:Highlight}
}