@import url("/app/fonts/fonts.css?v=1fc957ad05b5");
/* The public pages' shared stylesheet (v0.158).

   One copy of the v0.156 design tokens and the components every public page
   uses (landing, /install, the guides, and the game hub to come). Before this
   file each page carried its own inline token block, and the guides' copies
   had no data-theme overrides, so a Light or Dark choice made in the app
   (theme.js, key "pr-theme") did not reach them.

   What lives here: the tokens (light, system dark, forced dark), colour-scheme,
   box-sizing, the base type, links, the focus ring, .card, .btn, .ico and the
   reduced-motion rule for the motion this file owns. Anything a page needs
   beyond that stays inline in that page: the landing's hero mock and grouped
   lists, the install page's phone drawings, the guides' text measure.

   The values are the landing page's as shipped in v0.156; a page whose base
   type differs (the guides' 1.55 line-height, the install page's button
   shape) overrides it inline, so nothing here changes how a page looks.

   Served as /public.css?v=<release stamp>: release.py rewrites the link on
   every page it stages and counts the rewrites, and _headers marks the URL
   immutable for a year. Do not write a ?v= by hand. */

/* ---- tokens -------------------------------------------------------------- */
:root{
  --bg:#faf9f5; --bg2:#fffefa; --fill:#78788014; --fill2:#7878801F; --fill3:#f0ede6;
  --label:#1c1b19; --label2:#6b6a66; --label3:#6b6a66;
  --sep:#e3e1db; --blue:#0f6e56; --green:#0f6e56; --teal:#0f6e56; --orange:#FF9500;
  --tintBg:#0f6e5614; --greenBg:#0f6e5614; --tealBg:#30B0C71A;
  --shadow:0 .5px 1px rgba(0,0,0,.04),0 4px 16px rgba(0,0,0,.06);
  --shadowLg:0 1px 2px rgba(0,0,0,.05),0 18px 48px rgba(0,0,0,.12);
  --glow:rgba(0,122,255,.16);
  --r:8px; --r-lg:10px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#1c1b19; --bg2:#242420; --fill:#7878805C; --fill2:#78788052; --fill3:#33322f;
  --label:#fffefa; --label2:#c1bfb7; --label3:#aaa89f;
  --sep:#46453f; --blue:#71d6b3; --green:#71d6b3; --teal:#71d6b3; --orange:#FF9F0A;
  --tintBg:#71d6b329; --greenBg:#71d6b329; --tealBg:#40C8E029;
  --shadow:0 .5px 1px rgba(0,0,0,.5),0 4px 20px rgba(0,0,0,.4);
  --shadowLg:0 1px 2px rgba(0,0,0,.6),0 24px 60px rgba(0,0,0,.55);
  --glow:rgba(10,132,255,.22);
}}
:root[data-theme="dark"]{
  --bg:#1c1b19; --bg2:#242420; --fill:#7878805C; --fill2:#78788052; --fill3:#33322f;
  --label:#fffefa; --label2:#c1bfb7; --label3:#aaa89f;
  --sep:#46453f; --blue:#71d6b3; --green:#71d6b3; --teal:#71d6b3; --orange:#FF9F0A;
  --tintBg:#71d6b329; --greenBg:#71d6b329; --tealBg:#40C8E029;
  --shadow:0 .5px 1px rgba(0,0,0,.5),0 4px 20px rgba(0,0,0,.4);
  --shadowLg:0 1px 2px rgba(0,0,0,.6),0 24px 60px rgba(0,0,0,.55);
  --glow:rgba(10,132,255,.22);
}
:root{color-scheme:light dark}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}

/* ---- base ---------------------------------------------------------------- */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--label);
  font-family:"Schibsted Grotesk",Arial,Helvetica,sans-serif;
  font-size:17px;line-height:1.45;letter-spacing:-.01em;-webkit-font-smoothing:antialiased}
a{color:var(--blue)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}

/* ---- components ---------------------------------------------------------- */
.card{background:var(--bg2);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:22px;margin:16px 0}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:11px 20px;
  border-radius:13px;background:var(--blue);color:#fff;text-decoration:none;font-weight:600;font-size:17px;
  letter-spacing:-.012em;transition:transform .12s ease,opacity .15s ease,background .15s ease}
.btn:hover{opacity:.9}
.btn:active{transform:scale(.97)}
.btn.sec{background:var(--fill3);color:var(--label)}
.btn.sec:hover{opacity:1;background:var(--fill2)}
.ico{width:30px;height:30px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 30px;background:var(--tintBg);color:var(--blue)}
.ico.green{background:var(--greenBg);color:var(--green)}
.ico.teal{background:var(--tealBg);color:var(--teal)}
.ico.orange{background:rgba(255,149,0,.14);color:var(--orange)}
.ico svg{display:block}

/* ---- motion -------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .btn{transition:none}
}

/* v0.185: visual treatment only; question geometry and flows retained. */
h1,h2,h3,.largeTitle{font-weight:500;letter-spacing:-.025em}
button,.btn{min-height:44px;border-radius:8px;font-weight:500}
.card{border:1px solid var(--sep);box-shadow:none}
code,pre,.mono,.timer{font-family:"JetBrains Mono",Consolas,monospace}
body{line-height:1.6} .card{padding:24px;margin-block:24px} body h1,body h2,body h3{font-weight:500} body footer{color:var(--label);line-height:1.65} body .note{color:var(--label)}
html body{font-family:"Schibsted Grotesk",Arial,Helvetica,sans-serif}
:root{--on-accent:#fff}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--on-accent:#1c1b19}}
:root[data-theme="dark"]{--on-accent:#1c1b19}
.btn:not(.sec){color:var(--on-accent)}
/* v0.188: guide CTAs follow the accent text colour (white on dark green, ink on the light dark-mode green) */
html body .cta{color:var(--on-accent)}
/* v0.211 (CEO: "lets get all logos updated"): the wordmark full stop, as on the landing,
   replaces the old blue pill image in page headers. In a flex .brand/.mark the -7px
   cancels most of the 10px gap so the dot sits just after the word */
.brand-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green,#0f6e56);margin-left:3px}
.brand .brand-dot,.mark .brand-dot{align-self:flex-end;margin:0 0 4px -7px}
/* v0.212 share button (share.js): the list opens under the button, one row per service */
.share-wrap{position:relative;display:inline-flex;flex-direction:column;align-items:flex-start}
.share-panel{position:absolute;top:calc(100% + 6px);left:0;z-index:20;min-width:190px;display:flex;flex-direction:column;
  padding:6px;background:var(--bg2);border:1px solid var(--sep);border-radius:12px;box-shadow:var(--shadowLg)}
.share-panel[hidden]{display:none}
.share-panel a,.share-panel button{display:flex;align-items:center;min-height:44px;padding:0 12px;border:0;border-radius:8px;
  background:none;color:var(--label);font:inherit;font-weight:500;text-align:left;text-decoration:none;cursor:pointer}
.share-panel a:hover,.share-panel button:hover,.share-panel a:focus-visible,.share-panel button:focus-visible{background:var(--fill2)}
.share-status{font-size:.875rem;color:var(--label2,inherit);min-height:1em}
.share-status:empty{display:none}