/* The Terms and Privacy pages, one sheet, in the game's Atlas look (A-396). Below this comment is the Oro guide's
   guide.css (Token 0.61.1, the package of 2026-10-20) byte for byte but for its two @font-face sources, which name
   the WOFF2 (A-388), and the body's 2 px grid, which the site's background replaces (A-393), as on the staking page;
   these two pages' own rules follow it, then the site menu's and the site-wide block. No script. */
@font-face{font-family:"Atlas Pixel";src:url("fonts/PressStart2P-Regular.woff2") format("woff2");font-display:block}
@font-face{font-family:"Silkscreen";src:url("fonts/Silkscreen-Regular.woff2") format("woff2");font-display:block}
:root{
  /* the game's Atlas panel (bag.css) */
  --navy:#17264c;--deep:#0f1a36;--slate:#2c3746;--edge:#0d1218;--rim:#4d6076;--gold:#ffde45;--goldD:#b39522;--ink:#e6eec8;--dim:#8397ab;
  --go:#3fe06a;--go2:#127a30;--scr:#10261a;--scrLine:#1f3d2b;--scrInk:#c9f2b8;--scrDim:#7fa688;
  /* the parts, as marks only (text never wears them): the OroWiki's validated dark slots, re-checked on --navy and --scr */
  --mining:#199e70;--vault:#3987e5;--prizes:#c98500;--game:#7d857f;
  /* the payment bar: blue, magenta and violet, validated as adjacent pairs on --scr and --navy (amber is the prizes' now) */
  --lift:#d55181;--running:#9085e9;
  /* the flow's arrows, from the player's side: comes to you, leaves you, inside the contracts, the freed backing */
  --buy:#24ae56;--sell:#be241f;--pipe:#8397ab;--energy:#4fd8f0;
  --pix:"Atlas Pixel",monospace;--lab:"Silkscreen",monospace;--txt:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:dark}
*{box-sizing:border-box;font-variant-ligatures:none;font-feature-settings:"liga" 0,"clig" 0,"calt" 0}
/* scroll-padding clears the sticky bar (72 px on a computer, 106 px on a phone, measured) so a jump shows its title */
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--deep);color:var(--ink);font:12px/1.6 var(--txt)}
img{image-rendering:pixelated}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
p{margin:0}
h1,h2,h3{font-weight:400}

/* top bar */
.top{position:sticky;top:0;z-index:50;background:var(--deep);border-bottom:4px solid var(--slate);box-shadow:0 2px 0 var(--edge)}
.top .wrap{display:flex;align-items:center;gap:14px;min-height:68px}
.logo img{display:block;height:40px;width:auto;image-rendering:auto}
.crumb{padding:6px 8px;background:var(--slate);color:var(--gold);font:400 9px/1 var(--lab);letter-spacing:.1em;box-shadow:0 0 0 2px var(--edge),inset 0 2px 0 var(--rim)}
nav.jump{margin-left:auto;display:flex;gap:6px}
.btn{display:inline-block;padding:8px 9px;background:var(--slate);color:var(--ink);text-decoration:none;white-space:nowrap;font:400 9px/1 var(--lab);letter-spacing:.08em;box-shadow:0 0 0 2px var(--edge),inset 0 2px 0 var(--rim)}
.btn:hover,.btn:focus-visible{background:var(--gold);color:#1a1d10;box-shadow:0 0 0 2px var(--edge),inset 0 -3px 0 var(--goldD);outline:none}

/* banner: the game's title sky, full width */
.hero{position:relative;overflow:hidden;background:#0f1a36 url("img/title-sky.webp") center 38%/cover no-repeat;image-rendering:pixelated}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:200px;background:linear-gradient(#0f1a3600,var(--deep))}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr 1fr;gap:42px;align-items:center;padding-top:54px;padding-bottom:72px}
.coin{width:96px;height:96px;animation:bob 1.4s steps(2,end) infinite}
@keyframes bob{50%{transform:translateY(-4px)}}
h1{margin:17px 0 11px;font:400 56px/1 var(--pix);color:var(--gold);text-shadow:4px 4px 0 var(--edge)}
.kicker{font:400 14px/1.2 var(--lab);letter-spacing:.12em;color:var(--ink);text-shadow:2px 2px 0 var(--edge)}
.lede{margin-top:11px;max-width:30em;font-size:14px;line-height:1.55;color:#eef3ff;text-shadow:0 2px 0 #0d1218cc}

/* a game window: navy panel, slate rim, slate name tab in gold */
.win{position:relative;min-width:0;padding-top:15px}
.win>.tab{position:absolute;z-index:2;top:0;left:12px;display:flex;align-items:center;gap:8px;height:27px;margin:0;padding:0 12px 0 11px;background:var(--slate);color:var(--gold);box-shadow:-2px -2px 0 var(--edge),2px -2px 0 var(--edge),inset 0 2px 0 var(--rim);font:400 12px/1 var(--lab);letter-spacing:.08em;white-space:nowrap}
.win>.tab img{width:32px;height:32px;margin-top:-10px}
.panel{height:100%;border:4px solid var(--slate);background:var(--navy);box-shadow:0 0 0 2px var(--edge),inset 0 0 0 2px var(--edge),0 8px 0 2px #0d121880;padding:29px 20px 20px}
.scr{background:var(--scr);background-image:repeating-linear-gradient(0deg,#ffffff06 0 2px,transparent 2px 4px);box-shadow:inset 0 0 0 2px var(--edge),inset 0 0 0 4px var(--scrLine);padding:12px 14px;color:var(--scrInk)}
.lbl{display:block;margin:0 0 5px;color:var(--scrDim);font:400 8px/1.2 var(--lab);letter-spacing:.12em;text-transform:uppercase}
.note{margin-top:11px;color:var(--dim);font-size:11px}
.note+.note{margin-top:4px}

main .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:48px;padding-top:6px;padding-bottom:66px}
.sectionlede{margin:0 0 15px;color:#c8d2e4;max-width:44em}

/* banner: the official address */
.addr .scr+.scr{margin-top:9px}
.state{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;background:var(--gold);color:#1a1d10;font:400 9px/1 var(--lab);letter-spacing:.1em;box-shadow:inset 0 -3px 0 var(--goldD)}
.state i{width:6px;height:6px;background:#1a1d10;animation:blink 1s steps(2,end) infinite}
.state.live{background:var(--go);box-shadow:inset 0 -3px 0 var(--go2)}
@keyframes blink{50%{opacity:0}}
.addr .big{margin-top:9px;font-size:14px;color:var(--ink)}
.addrline{font:400 16px/1.5 var(--pix);color:var(--gold)}
.addrhex{font:400 14px/1.5 var(--mono);color:var(--gold);word-break:break-all;user-select:all}
.row{padding:9px 0;border-top:2px solid var(--scrLine)}
.row:first-child{border-top:0;padding-top:0}.row:last-child{padding-bottom:0}
.updated{margin-top:11px;color:var(--dim);font:400 8px/1.4 var(--lab);letter-spacing:.1em}

/* three basics */
.basics{display:grid;grid-template-columns:repeat(3,1fr);gap:21px}
.basics .panel{display:grid;align-content:start;gap:11px}
.num{font:400 16px/1.3 var(--pix);color:var(--gold);word-break:break-all}
.pair{display:flex;align-items:center;gap:14px}
.pair span{padding:5px 7px;background:var(--slate);box-shadow:0 0 0 2px var(--edge),inset 0 2px 0 var(--rim);font:400 9px/1 var(--lab);letter-spacing:.08em;color:var(--ink)}
.gone{display:flex;align-items:center;gap:9px;font:400 16px/1 var(--pix);color:var(--gold)}
.gone img{width:24px;height:24px}
.gone b{display:inline-block;width:24px;height:24px;border:2px dashed var(--rim)}

/* the split */
.split{display:grid;grid-template-columns:290px minmax(0,1fr);gap:30px;align-items:center}
.donut{position:relative;width:280px;height:280px;margin:0 auto}
.donut svg{display:block;width:100%;height:100%}
.donut path{transition:opacity .12s steps(2)}
.donut .mid{position:absolute;inset:0;display:grid;place-content:center;pointer-events:none}
.donut .mid img{width:64px;height:64px}
.legend{display:grid;gap:9px}
.legend .scr{display:grid;grid-template-columns:15px 90px minmax(0,1fr);gap:12px;align-items:center}
.chip{width:15px;height:15px;box-shadow:0 0 0 2px var(--edge)}
.pct{font:400 24px/1 var(--pix);color:var(--ink)}
.legend b{display:block;font:400 11px/1.2 var(--lab);letter-spacing:.08em;color:var(--gold);margin-bottom:3px}
.split:has(.legend [data-k="mining"]:hover) .donut path:not([data-k="mining"]),
.split:has(.legend [data-k="trading"]:hover) .donut path:not([data-k="trading"]),
.split:has(.legend [data-k="prizes"]:hover) .donut path:not([data-k="prizes"]),
.split:has(.donut path[data-k="mining"]:hover) .donut path:not([data-k="mining"]),
.split:has(.donut path[data-k="trading"]:hover) .donut path:not([data-k="trading"]),
.split:has(.donut path[data-k="prizes"]:hover) .donut path:not([data-k="prizes"]){opacity:.18}
.legend .scr:hover,
.split:has(.donut path[data-k="mining"]:hover) .legend [data-k="mining"],
.split:has(.donut path[data-k="trading"]:hover) .legend [data-k="trading"],
.split:has(.donut path[data-k="prizes"]:hover) .legend [data-k="prizes"]{box-shadow:inset 0 0 0 2px var(--edge),inset 0 0 0 4px var(--go)}

/* the flow */
.flow{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:24px;align-items:start}
.flow>div{min-width:0}
.flowpic{background:var(--deep);box-shadow:inset 0 0 0 2px var(--edge),inset 0 0 0 4px var(--slate);padding:9px}
.flowbox{position:relative;max-width:675px;margin:0 auto}
.flowpic svg{display:block;width:100%;height:auto}
.swipe{display:none}
.flowpic .t{font:400 15px var(--lab);letter-spacing:.06em;fill:var(--gold)}
.flowpic .s,.flowpic .l{font:400 13px var(--txt);fill:#c8d2e4}
.flowpic .n{font:400 11px var(--pix);fill:#1a1d10}
.flowpic .y{font:400 12px var(--lab);letter-spacing:.14em;fill:var(--dim)}
/* the live pipes: the arrows stay dim, and squares ride each one in its own direction (a dash pattern moving along the
   path). Spent Oro pops at Destroyed, and the freed backing charges the Trading House. Pause stops it all. */
.flowpic .pipe{opacity:.5}
.flowpic .p{fill:none;stroke-linecap:butt;animation-name:ride;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes ride{from{stroke-dashoffset:var(--p)}to{stroke-dashoffset:0}}
.flowpic .burst rect{animation:pop 1.1s steps(4,end) infinite;opacity:0}
@keyframes pop{0%{transform:translate(0,0);opacity:1}100%{transform:translate(var(--dx),var(--dy));opacity:0}}
.flowpic .charge{animation:charge 2.2s steps(1,end) infinite;visibility:hidden}
@keyframes charge{0%,84%{visibility:hidden}85%,92%{visibility:visible}93%,96%{visibility:hidden}97%,100%{visibility:visible}}
.flowpic .charge .plus{animation:rise 2.2s steps(3,end) infinite}
@keyframes rise{0%,84%{transform:translate(0,0)}100%{transform:translate(0,-12px)}}
.flowkey{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 6px;font:400 9px/1 var(--lab);letter-spacing:.08em;color:var(--ink)}
.flowkey span{display:inline-flex;align-items:center;gap:6px}
.flowkey i{width:9px;height:9px;box-shadow:0 0 0 2px var(--edge)}
.flowkey .still{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:5px 7px;background:var(--slate);color:var(--ink);box-shadow:0 0 0 2px var(--edge),inset 0 2px 0 var(--rim);cursor:pointer}
.flowkey .still input{margin:0;accent-color:#ffde45}
.keynote{margin:0 0 9px;color:var(--dim);font-size:11px}
.flow:has(#flowstill:checked) *{animation-play-state:paused!important}
/* the details: every numbered box, and every step's name in the list, opens its window (popover, no script) */
.hot{position:absolute;margin:0;padding:0;border:0;background:transparent;cursor:pointer}
.hot:hover,.hot:focus-visible{outline:3px solid var(--gold);outline-offset:0;background:#ffde4512}
button.more{margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer;text-align:left}
button.more:hover,button.more:focus-visible{color:#fff;outline:2px solid var(--gold);outline-offset:2px}
.pop{inset:0;margin:auto;padding:0;border:0;background:transparent;color:var(--ink);width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 40px);overflow:visible}
.pop::backdrop{background:#05080dcc}
.pop .win{padding-top:15px}
.pop .panel{max-height:calc(100vh - 80px);overflow:auto;display:grid;gap:10px;font-size:13px}
.pop .scr p+p,.pop .scr p+ul,.pop .scr ul+p{margin-top:8px}
.pop .badge{display:inline-grid;place-items:center;width:18px;height:18px;margin-right:2px;background:var(--gold);color:#1a1d10;font:400 8px/1 var(--pix);font-style:normal;box-shadow:inset 0 -2px 0 var(--goldD)}
.pop .close{justify-self:end;border:0;cursor:pointer}
ol.steps{list-style:none;margin:0;padding:0;display:grid;gap:11px}
ol.steps li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:9px}
ol.steps i{display:grid;place-items:center;width:24px;height:24px;background:var(--gold);color:#1a1d10;font:400 8px/1 var(--pix);font-style:normal;box-shadow:inset 0 -3px 0 var(--goldD)}
ol.steps b{display:block;font:400 10px/1.3 var(--lab);letter-spacing:.08em;color:var(--gold);margin-bottom:2px}

/* two kinds */
table{width:100%;border-collapse:collapse}
th,td{padding:9px 11px;text-align:left;vertical-align:top;border-top:2px solid var(--scrLine)}
thead th{border-top:0;font:400 10px/1 var(--lab);letter-spacing:.08em;color:var(--gold)}
thead th span{display:inline-flex;align-items:center;gap:8px}
tbody th{width:24%;font:400 9px/1.4 var(--lab);letter-spacing:.08em;color:var(--scrDim)}

/* the Trading House */
.th{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.stairs svg{display:block;width:100%;height:auto;max-width:420px}
.stairs .t{font:400 11px var(--lab);letter-spacing:.08em;fill:var(--ink)}
.stairs .s{font:400 12px var(--txt);fill:var(--scrDim)}
ul.pts{margin:0;padding:0;list-style:none;display:grid;gap:8px}
ul.pts li{position:relative;padding-left:15px}
ul.pts li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;background:var(--go);box-shadow:0 0 0 2px var(--edge)}
.lead{margin:0 0 12px;color:var(--gold);font:400 10px/1.4 var(--lab);letter-spacing:.1em;text-transform:uppercase}

/* where each payment goes */
.pay{margin-top:21px}
.paybar{display:grid;grid-template-columns:repeat(20,1fr);gap:2px;margin-top:6px}
.paybar i{height:21px}.paybar .back{background:var(--vault)}.paybar .lift{background:var(--lift)}.paybar .running{background:var(--running)}
.payticks{display:grid;grid-template-columns:repeat(20,1fr);gap:2px;margin-top:5px;font:400 8px/1 var(--pix);color:var(--ink)}
.payticks span{border-top:2px solid var(--scrLine);padding-top:5px;text-align:center}
.paycols{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:15px}
.paycols b,.khead b{display:flex;align-items:center;gap:8px;margin-bottom:5px;font:400 10px/1.3 var(--lab);letter-spacing:.08em;color:var(--gold)}
.paycols em{flex:none;width:11px;height:11px;box-shadow:0 0 0 2px var(--edge)}
.paysum{margin-top:15px;padding-top:11px;border-top:2px solid var(--scrLine);color:var(--ink);font-size:13px}
.paynote{margin-top:6px;color:var(--scrDim);font-size:11px}

/* who holds the keys */
.keyhead{margin:0 0 17px;font-size:14px;color:#eef3ff;max-width:46em}
.keygrid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}
.kcard{display:grid;align-content:start;gap:9px}
.kcard.one{box-shadow:inset 0 0 0 2px var(--edge),inset 0 0 0 4px var(--goldD)}
.khead{display:flex;align-items:center;gap:11px}
.khead span{display:grid;gap:5px}.khead b{margin:0}
.khead i{justify-self:start;font:400 8px/1 var(--pix);font-style:normal;padding:4px 5px}
.khead i.none{background:var(--go2);color:#fff;box-shadow:inset 0 -3px 0 #0b4d1e}
.khead i.onek{background:var(--gold);color:#1a1d10;box-shadow:inset 0 -3px 0 var(--goldD)}
.ico{width:27px;height:auto;flex:none}
.fine{margin-top:15px}

/* staking */
.stake{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.ladder{display:grid;gap:8px}
.rung{display:grid;grid-template-columns:72px minmax(0,1fr) 33px;gap:9px;align-items:center;font:400 9px/1 var(--lab);letter-spacing:.08em}
.rung .bar{height:14px;background:repeating-linear-gradient(90deg,var(--mining) 0 10px,transparent 10px 13px)}
.rung .x{font:400 8px/1 var(--pix);color:var(--ink);text-align:right}
.undecided{margin-top:11px;padding:8px 9px;border:2px dashed var(--scrLine);color:var(--scrDim);font-size:11px}

/* staying safe */
.safe .panel{display:grid;grid-template-columns:repeat(5,1fr);gap:11px}
.safe .scr{display:grid;align-content:start;gap:8px}
.safe .scr b{font:400 16px/1 var(--pix);color:var(--gold)}
footer{border-top:4px solid var(--slate);box-shadow:0 -2px 0 var(--edge);background:#0b1328}
footer .wrap{display:flex;flex-wrap:wrap;gap:9px 18px;justify-content:space-between;align-items:center;padding-top:17px;padding-bottom:17px;color:var(--dim);font:400 8px/1.4 var(--lab);letter-spacing:.1em}

@media (max-width:900px){
  html{scroll-padding-top:124px}
  .wrap{padding:0 16px}
  .top .wrap{flex-wrap:wrap;padding-top:10px;padding-bottom:10px;gap:10px}
  nav.jump{margin-left:0;width:100%;overflow-x:auto;padding:2px 2px 5px}
  .hero .wrap{grid-template-columns:1fr;gap:30px;padding-top:30px;padding-bottom:48px}
  .coin{width:64px;height:64px}
  h1{font-size:40px}
  .basics,.split,.flow,.th,.stake,.paycols,.keygrid,.safe .panel{grid-template-columns:1fr}
  .legend .scr{grid-template-columns:15px 63px minmax(0,1fr)}
  .pct{font-size:16px}
  .panel{padding:27px 12px 14px}
  .flowpic{overflow-x:auto}
  .flowbox{width:594px;max-width:none}
  .swipe{display:block;margin:0 0 6px;color:var(--dim);font:400 8px/1 var(--lab);letter-spacing:.1em}
  tbody th{width:30%;font-size:8px}
  th,td{padding:8px 6px}
  .split{gap:18px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .coin,.state i{animation:none}
  .donut path{transition:none}
  .flowpic *{animation:none!important}
  .flowpic .p,.flowpic .burst,.flowpic .charge{display:none}
  .flowpic .pipe{opacity:1}
}
/* ==== The Terms and Privacy pages' additions (A-396). Everything above this line is the Oro guide's guide.css (Token
   0.61.1) as the staking page carries it: its two faces naming the WOFF2 (A-388), the body's grid taken out (A-393). Two
   pages of words: one column of windows, each a short run of plain paragraphs, the screen ink at a reading size. ==== */

/* the banner: the words on the left, the sky on the right, lower than the guides' (no picture of its own) */
.hero .wrap{min-height:280px}
.hero .updated{margin-top:15px;color:#c8d2e4}

/* a window's words */
.legal{display:grid;gap:12px;max-width:48em;font-size:14px;line-height:1.6;color:var(--ink)}
.legal p{margin:0}
.legal .pts{gap:9px}
.legal .pts li::before{top:.6em}
.legal .go{justify-self:start;margin-top:4px;color:var(--gold);text-decoration:none;font:400 9px/1.4 var(--lab);letter-spacing:.1em;
  padding:6px 0}
.legal .go:hover,.legal .go:focus-visible{outline:none;text-decoration:underline;text-underline-offset:4px}
@media (max-width:560px){.legal{font-size:13px}}
/* ==== The site menu (A-348), the same block on every page of spiritmaster.io: the landing page, /packs/ and /oro/.
   The owner, 2026-10-20: "Home | Play | Store | Packs | Token" on every page, idea 1 on a computer, and on a phone one
   MENU key and a pane that drops from under the bar. Self-contained: its own classes (sb-…) and colours, so it sits on
   any of the three sheets unchanged. No script: Play, Store and the phone menu open by a link to a mark's id (:target),
   which never scrolls the page because the marks are fixed at the top of the screen. ==== */
.sitebar{position:sticky;top:0;z-index:60;background:#0f1a36;box-shadow:0 2px 0 #0d1218}
.sitebar.nostrip{border-bottom:4px solid #2c3746}
.sitebar a{font-variant-ligatures:none}
.sb-wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.sb-row{display:flex;align-items:center;gap:14px;min-height:66px}
.sb-logo{display:block;flex:none;line-height:0}
.sb-logo img{display:block;height:40px;width:auto;image-rendering:auto}
html{scroll-padding-top:128px}

/* a computer: the five places as buttons, the page you are on lit gold and pressed in */
.sb-site{margin-left:auto;display:flex;gap:8px}
.sbtn{display:inline-block;margin:0;padding:10px 13px;background:#2c3746;color:#e6eec8;text-decoration:none;white-space:nowrap;
  font:400 10px/1 "Silkscreen",monospace;letter-spacing:.08em;box-shadow:0 0 0 2px #0d1218,inset 0 2px 0 #4d6076}
.sbtn:hover,.sbtn:focus-visible{background:#ffde45;color:#1a1d10;box-shadow:0 0 0 2px #0d1218,inset 0 -3px 0 #b39522;outline:none}
.sbtn[aria-current="page"]{background:#ffde45;color:#1a1d10;box-shadow:0 0 0 2px #0d1218,inset 0 3px 0 #b39522}
/* a long page: its own sections in a slim strip under the menu, as plain words so the two never look alike */
.sb-strip{border-top:4px solid #2c3746;border-bottom:2px solid #0d1218;background:#0b1328}
.sb-strip .sb-wrap{display:flex;align-items:center;gap:18px;min-height:40px}
.sb-here{flex:none;font:400 8px/1 "Silkscreen",monospace;letter-spacing:.12em;color:#7fa688}
.sb-onpage{display:flex;gap:20px;overflow-x:auto;scrollbar-width:none}
.sb-onpage a{flex:none;padding:12px 0 10px;border-bottom:2px solid transparent;color:#9fb0c2;text-decoration:none;white-space:nowrap;
  font:400 9px/1 "Silkscreen",monospace;letter-spacing:.1em}
.sb-onpage a:hover,.sb-onpage a:focus-visible{color:#ffde45;border-bottom-color:#ffde45;outline:none}

/* the menu key, phone only: MENU opens the pane, and while it is open the key reads CLOSE */
.sb-burger{display:none;align-items:center;gap:10px;margin-left:auto;padding:12px 13px;background:#2c3746;color:#ffde45;text-decoration:none;
  font:400 10px/1 "Silkscreen",monospace;letter-spacing:.1em;box-shadow:0 0 0 2px #0d1218,inset 0 2px 0 #4d6076}
.sb-open i{display:block;width:16px;height:2px;margin:5px 0;background:currentColor;box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor}
.sb-shut i{position:relative;display:block;width:16px;height:12px}
.sb-shut i::before,.sb-shut i::after{content:"";position:absolute;left:0;top:5px;width:16px;height:2px;background:currentColor;transform:rotate(45deg)}
.sb-shut i::after{transform:rotate(-45deg)}
.sb-burger:hover,.sb-burger:focus-visible{background:#ffde45;color:#1a1d10;outline:none}

/* what a link opens: three marks fixed at the top of the screen are the targets, so following one never moves the page */
.sb-anchor{position:fixed;top:0;left:0;width:1px;height:1px;overflow:hidden;pointer-events:none}
html:has(.sb-anchor:target){scroll-padding-top:0}
.sb-back{position:absolute;inset:0;background:#05080dcc}

/* the phone menu: a pane that drops from under the bar and slides back up; always laid out, hidden until #sitemenu is
   the target, so it can slide. It hangs from the bar itself (it sits inside the header, at top:100%), so whatever is
   above the bar (the desk shows every page under its own bar) it starts at the bar's bottom. The five places, by name
   only (the owner, 2026-10-21) */
.sb-menu{position:absolute;left:0;right:0;top:100%;height:100vh;height:100dvh;z-index:55;overflow:hidden;visibility:hidden;
  pointer-events:none;transition:visibility 0s linear .3s}
.sb-menu .sb-back{opacity:0;transition:opacity .22s ease}
.sbm-pane{position:relative;max-height:100%;overflow:auto;overscroll-behavior:contain;background:#17264c;border-bottom:4px solid #2c3746;
  box-shadow:0 2px 0 #0d1218,0 18px 34px #05080d99;transform:translateY(-104%);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
body:has(#sitemenu:target) .sb-menu{visibility:visible;pointer-events:auto;transition-delay:0s}
body:has(#sitemenu:target) .sb-menu .sb-back{opacity:1}
body:has(#sitemenu:target) .sbm-pane{transform:none}
html:has(#sitemenu:target){overflow:hidden}
.sbm-places{display:grid}
.sbm-place{position:relative;display:block;padding:17px 20px 17px 38px;border-top:2px solid #22304a;color:#e6eec8;text-decoration:none;
  font:400 12px/1 "Atlas Pixel",monospace}
.sbm-place:first-child{border-top:0}
.sbm-place::before{content:"";position:absolute;left:18px;top:calc(50% - 5px);border:5px solid transparent;border-left:7px solid #ffde45;border-right:0;opacity:0}
.sbm-place:hover,.sbm-place:focus-visible{background:#0f1a36;outline:none}
.sbm-place:hover::before,.sbm-place:focus-visible::before,.sbm-place[aria-current="page"]::before{opacity:1}
.sbm-place[aria-current="page"]{color:#ffde45}

/* the coming-soon windows (the owner, 18:05; their look, option C, 2026-10-21): Play and Store until each opens. No title:
   a small window into the banner, its sky and AtlasWorld's ground, the Scout standing beside the coin it found, and COMING
   SOON in the sky on a dark band. The coin is the plain stand-in (L98). The pictures sit beside each page's own sheet:
   img/title-sky.webp, img/ground-c.png and img/scout-idle-right.png (SKY and PICTURES in menu.py) */
.sb-layer{display:none;position:fixed;inset:0;z-index:100}
body:has(#soon-play:target) .sb-soon-play,body:has(#soon-store:target) .sb-soon-store{display:block}
.sbs-win{position:absolute;left:50%;top:50%;width:min(520px,calc(100vw - 32px));transform:translate(-50%,-50%)}
.sbs-panel{display:grid;justify-items:center;text-align:center;overflow:hidden;border:4px solid #0a173c;outline:4px solid #eef7cd;
  border-radius:2px;background:#0f1a36;color:#e6eec8;box-shadow:0 8px 0 #111c3b,0 12px 25px #000b}
.sbs-scene{position:relative;width:100%;height:250px;image-rendering:pixelated;
  background:url("img/ground-c.png") 0 100%/512px 80px repeat-x,url("img/title-sky.webp") 50% 20%/cover no-repeat}
.sbs-word{position:absolute;left:0;right:0;top:30px;margin:0;padding:10px 0;background:#0a173cb8;
  font:400 20px/1.3 "Atlas Pixel",monospace;color:#f6f2cc;text-shadow:3px 3px 0 #0a173c}
.sbs-scout{position:absolute;left:calc(50% - 104px);bottom:35px;width:96px;height:96px;
  background:url("img/scout-idle-right.png") 0 0/96px 96px no-repeat}
.sbs-coin{position:absolute;left:calc(50% + 12px);bottom:60px;display:block;width:64px;height:64px;image-rendering:pixelated;
  animation:sbs-bob 1.4s steps(2,end) infinite}
@keyframes sbs-bob{50%{transform:translateY(-6px)}}
.sbs-close{margin:16px 0 18px;padding:10px 12px;background:#2c3746;color:#e6eec8;text-decoration:none;font:400 10px/1 "Silkscreen",monospace;letter-spacing:.08em;
  box-shadow:0 0 0 2px #0d1218,inset 0 2px 0 #4d6076}
.sbs-close:hover,.sbs-close:focus-visible{background:#ffde45;color:#1a1d10;outline:none}

@media (min-width:901px){.sb-menu{display:none}}
@media (max-width:900px){
  html{scroll-padding-top:76px}
  .sb-wrap{padding:0 16px}
  .sitebar,.sitebar.nostrip{border-bottom:4px solid #2c3746}
  .sb-menu{top:calc(100% + 4px)}   /* below the bar's border: top:100% is the inside of the header's padding */
  .sitebar .sb-row{min-height:60px;gap:12px}
  .sitebar .sb-logo img{height:34px}
  .sitebar .sb-site,.sitebar .sb-strip{display:none}
  .sitebar .sb-open{display:inline-flex}
  body:has(#sitemenu:target) .sitebar .sb-open{display:none}
  body:has(#sitemenu:target) .sitebar .sb-shut{display:inline-flex}
}
@media (max-width:420px){.sbs-scene{height:224px}.sbs-word{top:24px;font-size:15px}}
@media (prefers-reduced-motion:reduce){.sbs-coin{animation:none}.sb-menu,.sb-menu .sb-back,.sbm-pane{transition:none}}
/* ==== end of the site menu ==== */
/* ==== Site-wide (A-393), one block on every page we build, appended after the site menu's: the background behind every
   window, in place of the guides' 2 px grid, and the footer (A-393b) with its two links. Like the menu's block it names
   its own colours and classes (sm-..., sf-...), so it sits on any of the sheets unchanged. ==== */
/* the background: the owner's pick C, "Night sky" (2026-10-24, of four on the desk), in his "Night Journey" colours:
   deep navy #0b1734 at the top, so the bar and the banners melt into it, rising to the mid blue #5574a2 at the bottom,
   with a still scatter of pixel stars like the banner's sky (2 px, a few 4 px, thinning towards the bottom; placed by
   stars() in docs/orchestration/designs/A-393-site-background/make_review.py, seed 393, the scatter he saw). Held to the
   screen behind everything, so the windows slide over a sky that stays still. On html, because the landing page's wake
   draws on body's two layers; the large viewport height keeps it under a phone's toolbars as they come and go. Nothing
   moves, so there is nothing for reduced motion to stop */
body{background:#0b1734}
html::before{content:"";position:fixed;left:0;top:0;z-index:-1;width:100%;height:100vh;height:100lvh;pointer-events:none;
  background:linear-gradient(#0b1734 0%,#0b1734 22%,#5574a2 100%)}
html::after{content:"";position:fixed;left:0;top:0;z-index:-1;width:2px;height:2px;pointer-events:none;
  box-shadow:37.6vw 5.5vh 0 #ffffffcc,92.9vw 21.7vh 0 #cfe0ffaa,14.4vw 8.2vh 0 #ffffffcc,2.5vw 9.7vh 0 #cfe0ffaa,55.6vw 7.1vh 0 #cfe0ffaa,62.1vw 32.1vh 0 #fff3c9aa,
    14.8vw 40.3vh 0 #fff3c9aa,64.5vw 68.4vh 0 #cfe0ffaa,92.5vw 30.1vh 0 #ffffff66,67.8vw 40.2vh 0 #fff3c9aa,11.7vw 54.3vh 0 #fff3c9aa,22.5vw 63.8vh 0 #fff3c9aa,
    45.8vw 21.1vh 0 #ffffffcc,82.1vw 18.2vh 0 #cfe0ffaa,90.5vw 80.6vh 0 #ffffffcc,8.0vw 32.6vh 0 #ffffff99,81.5vw 4.1vh 0 #fff3c9aa,82.1vw 70.3vh 0 #cfe0ffaa,
    3.0vw 48.2vh 0 #ffffff66,44.8vw 7.0vh 0 #ffffffcc,76.4vw 50.8vh 0 #ffffffcc,33.0vw 9.0vh 0 #ffffff66,8.6vw 20.2vh 0 #ffffff99,77.0vw 68.9vh 0 #fff3c9aa,
    62.6vw 12.2vh 0 #fff3c9aa,62.4vw 40.6vh 0 #ffffff66,83.6vw 63.8vh 0 #cfe0ffaa,4.6vw 24.9vh 0 #ffffff66,3.0vw 38.5vh 0 #ffffffcc,40.4vw 38.3vh 0 #ffffff99,
    65.0vw 64.6vh 0 #fff3c9aa,69.8vw 29.9vh 0 #ffffff99,7.0vw 1.3vh 0 #ffffffcc,60.5vw 89.6vh 0 #cfe0ffaa,54.6vw 60.6vh 0 #cfe0ffaa,80.3vw 49.0vh 0 #cfe0ffaa,
    51.0vw 18.1vh 0 #cfe0ffaa,67.5vw 5.2vh 0 #ffffff66,15.5vw 4.1vh 0 #ffffff99,56.1vw 70.4vh 0 #ffffffcc,37.4vw 64.7vh 0 #fff3c9aa,33.6vw 10.8vh 0 #cfe0ffaa,
    95.2vw 15.1vh 0 #cfe0ffaa,43.3vw 1.0vh 0 #ffffffcc,66.1vw 43.1vh 0 #ffffff99,31.4vw 30.3vh 0 #ffffff99,24.9vw 48.7vh 0 #ffffff66,89.9vw 76.2vh 0 #fff3c9aa,
    78.0vw 28.0vh 0 #fff3c9aa,71.1vw 32.0vh 0 #ffffff66,35.4vw 12.1vh 0 #cfe0ffaa,84.4vw 44.2vh 0 #cfe0ffaa,29.0vw 14.8vh 0 #ffffff66,66.9vw 11.5vh 0 #ffffff99,
    55.9vw 7.3vh 0 #cfe0ffaa,7.0vw 62.1vh 0 #fff3c9aa,90.3vw 2.8vh 0 #cfe0ffaa,89.9vw 8.1vh 0 #fff3c9aa,26.0vw 1.4vh 0 #cfe0ffaa,31.2vw 51.3vh 0 #cfe0ffaa,
    69.1vw 33.2vh 0 #fff3c9aa,44.9vw 74.4vh 0 #ffffff66,31.1vw 7.1vh 0 #ffffffcc,47.1vw 92.3vh 0 #ffffff99,88.0vw 4.4vh 0 #fff3c9aa,94.0vw 13.6vh 0 #ffffff99,
    97.0vw 16.5vh 0 #fff3c9aa,85.3vw 73.8vh 0 #fff3c9aa,12.7vw 32.8vh 0 #ffffff66,18.7vw 62.9vh 0 #cfe0ffaa,71.3vw 12.8vh 0 #ffffffcc,42.6vw 11.1vh 0 #ffffffcc,
    78.6vw 66.5vh 0 #fff3c9aa,8.1vw 18.8vh 0 #ffffffcc,52.9vw 1.0vh 0 #ffffff66,74.5vw 39.0vh 0 #ffffff99,17.9vw 19.2vh 0 #fff3c9aa,97.4vw 1.1vh 0 #ffffff66,
    27.4vw 11.0vh 0 #ffffff66,53.6vw 53.8vh 0 #ffffff66,82.4vw 27.8vh 0 #cfe0ffaa,17.3vw 72.7vh 0 #ffffff66,97.0vw 1.2vh 0 #ffffff99,57.4vw 59.7vh 0 #ffffff99,
    63.6vw 22.5vh 0 #cfe0ffaa,60.9vw 23.1vh 0 #ffffff99,41.4vw 39.0vh 0 #fff3c9aa,39.4vw 24.7vh 0 #ffffff99,39.0vw 26.4vh 0 #ffffff66,31.3vw 21.8vh 0 #ffffffcc,
    47.3vw 20.5vh 0 1px #ffffff99,95.9vw 79.0vh 0 1px #ffffff99,41.2vw 38.0vh 0 1px #fff3c9aa,67.2vw 92.7vh 0 1px #cfe0ffaa,42.8vw 9.4vh 0 1px #fff3c9aa,60.3vw 23.7vh 0 1px #fff3c9aa,
    14.1vw 8.7vh 0 1px #ffffff66,81.1vw 5.6vh 0 1px #ffffff99,15.9vw 32.1vh 0 1px #ffffff99,73.3vw 2.7vh 0 1px #ffffffcc,88.7vw 48.1vh 0 1px #ffffff66,3.5vw 29.8vh 0 1px #ffffff99}
/* the packs and staking banners fade into it: the sky picture thins out over its last 200 px (it used to darken to
   --deep, which is no longer what lies under it) */
.hero{background:none}
.hero::before{content:"";position:absolute;inset:0;background:url("img/title-sky.webp") center 38%/cover no-repeat;image-rendering:pixelated;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 200px),#0000);mask-image:linear-gradient(#000 calc(100% - 200px),#0000)}
.hero::after{content:none}
/* the footer (A-393b, the owner 2026-10-24, as previewed on the desk): About, Pages, Community and Staying safe side by
   side on a computer, two by two on a tablet, stacked on a phone, the copyright on a thin line under them. It sits in the
   guides' footer band (border and #0b1328 from the shared sheet) and overrides that sheet's one-line footer .wrap */
footer.sf .wrap.sf-cols{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) auto minmax(0,1.3fr);gap:28px 44px;
  align-items:start;justify-content:stretch;padding-top:34px;padding-bottom:30px;color:#c8d2e4;letter-spacing:0;
  font:13px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
footer.sf h2{margin:0 0 14px;color:#ffde45;font:400 9px/1 "Silkscreen",monospace;letter-spacing:.12em}
footer.sf p{margin:0;max-width:34em}
.sf-logo{display:inline-block;margin-bottom:12px;line-height:0}
.sf-logo img{display:block;height:32px;width:auto;image-rendering:auto}
.sf-pages ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,max-content);gap:12px 28px}
.sf-pages a,.sf-more{color:#e6eec8;text-decoration:none;font:400 9px/1.4 "Silkscreen",monospace;letter-spacing:.1em}
.sf-pages a:hover,.sf-pages a:focus-visible,.sf-more:hover,.sf-more:focus-visible{color:#ffde45;outline:none;
  text-decoration:underline;text-underline-offset:4px}
.sf-more{display:inline-block;margin-top:12px}
.sf-base{border-top:2px solid #1c2740}
footer.sf .sf-base .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 24px;
  padding-top:14px;padding-bottom:14px;color:#8397ab;font:400 8px/1.4 "Silkscreen",monospace;letter-spacing:.12em}
/* the Terms and Privacy links after the copyright (A-396): the footer's own link look, each a 24 px tall target */
.sf-legal{display:flex;gap:6px 22px;flex-wrap:wrap}
.sf-legal a{display:inline-block;padding:7px 0;color:#e6eec8;text-decoration:none;font:400 8px/1.25 "Silkscreen",monospace;
  letter-spacing:.12em}
.sf-legal a:hover,.sf-legal a:focus-visible{color:#ffde45;outline:none;text-decoration:underline;text-underline-offset:4px}
/* Discord and X: each company's white mark unchanged on a plain tile; the tile lights under the pointer, the mark never
   changes (their brand rules) */
.sm-social{display:flex;gap:12px}
.sm-social a{display:grid;place-items:center;width:44px;height:44px;background:#2c3746;box-shadow:0 0 0 2px #0d1218,inset 0 2px 0 #4d6076}
.sm-social a:hover,.sm-social a:focus-visible{background:#3b4b60;box-shadow:0 0 0 2px #ffde45,inset 0 2px 0 #4d6076;outline:none}
.sm-social img{display:block;width:auto;height:24px;image-rendering:auto}
@media (max-width:900px){footer.sf .wrap.sf-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:560px){footer.sf .wrap.sf-cols{grid-template-columns:minmax(0,1fr);gap:26px}}
/* ==== end of the site-wide block ==== */