/* PocaPal's reading pages (/privacy/, /support/), in the app's Encore look as the home page has it: the paper
   #ECEDEF, or the night #09090D in Dark Mode, with a halo of the pink at the top; Anton in capitals for the title,
   Inter for the words, IBM Plex Mono in capitals for labels; one container (14 corners, a light top edge, a soft
   shadow, no lips); the lit block #FF3D7F with black words for the one thing to do, its deep shade #C23062 for
   links on paper. The shared navbar and footer (/shared/components/) wear the same colours. */

@font-face{font-family:"Anton";src:url("/assets/fonts/anton.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-600.woff2") format("woff2");font-weight:500 650;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-800.woff2") format("woff2");font-weight:651 900;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/plexmono-500.woff2") format("woff2");font-weight:500;font-display:swap}
/* Czech (cs/): the same faces' Latin Extended cuts (Google Fonts' subsets of the same versions, from Fontsource),
   fetched only for a letter the Latin cut hasn't got, such as ř or ů. Korean (ko/): the app's own display face,
   Black Han Sans (Tokens.swift's display), cut to its Hangul, for Hangul in a title; words and labels fall to the
   system's Korean face. */
@font-face{font-family:"Anton";src:url("/assets/fonts/anton-latin-ext.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-400-latin-ext.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-600-latin-ext.woff2") format("woff2");font-weight:500 650;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-800-latin-ext.woff2") format("woff2");font-weight:651 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/plexmono-500-latin-ext.woff2") format("woff2");font-weight:500;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Black Han Sans";src:url("/assets/fonts/blackhansans-hangul.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+1100-11FF,U+3130-318F,U+AC00-D7A3}

:root{
  --paper:#ECEDEF; --card:#FFFFFF; --ink:#0B0B0C; --grey:#5D5F66; --hair:rgba(11,11,12,.08);
  --card-edge:inset 0 0 0 .5px rgba(11,11,12,.08); --card-shadow:0 3px 12px rgba(0,0,0,.08);
  --block:#FF3D7F; --on-block:#0B0B0C; --glow:rgba(255,61,127,.55); --lit:#C23062;
  --f-display:"Anton","Black Han Sans","Impact","Arial Narrow Bold",sans-serif;
  --f-ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --mk-font:var(--f-ui);
  --mk-nav-bg:rgba(236,237,239,.8); --mk-nav-fg:var(--ink); --mk-nav-line:rgba(11,11,12,.08); --mk-nav-mark-r:5px;
  --mk-accent:#FF3D7F; --mk-accent-deep:#E2306D; --mk-cta-fg:#0B0B0C; --mk-cta-hover:#FF5A93; --mk-cta-weight:700;
  --mk-footer-bg:var(--paper); --mk-footer-fg:var(--grey); --mk-footer-strong:var(--ink); --mk-footer-muted:var(--grey);
  --mk-footer-line:var(--hair); --mk-footer-ink:#FF3D7F; --mk-footer-mark-font:var(--f-display);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#09090D; --card:#1B1B21; --ink:#F2F2F0; --grey:#A2A4AA; --hair:rgba(255,255,255,.08);
    --card-edge:inset 0 .75px 0 rgba(255,255,255,.14), inset 0 0 0 .75px rgba(255,255,255,.06); --card-shadow:0 3px 12px rgba(0,0,0,.45);
    --lit:#FF3D7F;
    --mk-nav-bg:rgba(9,9,13,.7); --mk-nav-fg:var(--ink); --mk-nav-line:rgba(255,255,255,.08);
  }
}

body.doc{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-ui);-webkit-font-smoothing:antialiased}
:lang(ko){word-break:keep-all;overflow-wrap:break-word}  /* Korean (ko/): lines break between words */
:lang(ko) .doc :is(h1,h2){line-height:1.1;letter-spacing:0}
body.doc::before{content:"";position:absolute;left:0;right:0;top:0;height:420px;pointer-events:none;z-index:0;
  background:radial-gradient(60% 80% at 50% 0%,rgba(255,61,127,.16),transparent 75%)}
body .mk-footer .mk-footer-mark{letter-spacing:.005em}
.doc main{position:relative;z-index:1;max-width:740px;margin:0 auto;padding:clamp(40px,7vh,72px) var(--pad) clamp(56px,8vh,90px)}
.doc :focus-visible{outline:3px solid var(--block);outline-offset:3px;border-radius:6px}
.doc .kicker{margin:0 0 12px;font:500 13px/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--lit)}
.doc h1{margin:0;font:400 clamp(44px,7vw,72px)/.96 var(--f-display);text-transform:uppercase;letter-spacing:.004em}
.doc .updated,.doc .intro{margin:16px 0 0;color:var(--grey);font-size:16px;line-height:1.5}
.doc .intro{font-size:18px}
.doc h2{margin:40px 0 0;font:400 28px/1.05 var(--f-display);text-transform:uppercase;letter-spacing:.004em}
.doc h3{margin:22px 0 0;font-size:17px;font-weight:700;letter-spacing:-.01em}
.doc p,.doc li{font-size:16.5px;line-height:1.62;color:var(--grey)}
.doc p b,.doc li b{color:var(--ink);font-weight:650}
.doc p{margin:12px 0 0}
.doc ul{margin:12px 0 0;padding-left:22px}
.doc li{margin:6px 0}
.doc main a{color:var(--lit);text-decoration:underline;text-underline-offset:3px}
.doc .lead{margin:26px 0 0;padding:20px 22px;border-radius:14px;background:var(--card);box-shadow:var(--card-edge),var(--card-shadow);
  font-size:17px;line-height:1.55;color:var(--ink)}
.contact{margin:26px 0 0;padding:20px 22px;border-radius:14px;background:var(--card);box-shadow:var(--card-edge),var(--card-shadow);
  display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.contact img{flex:none;width:56px;height:56px;border-radius:22.5%;box-shadow:0 0 0 .5px var(--hair),0 4px 12px rgba(0,0,0,.12)}
.contact div{flex:1;min-width:200px}
.contact b{display:block;font-size:18px;font-weight:700}
.contact span{display:block;margin-top:3px;font-size:15px;color:var(--grey);line-height:1.45}
.doc main a.btn{display:inline-flex;align-items:center;min-height:46px;padding:0 22px;border-radius:999px;background:var(--block);color:var(--on-block);
  font-weight:700;font-size:15.5px;text-decoration:none;box-shadow:0 0 22px -6px var(--glow)}
.qa{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.qa details{background:var(--card);border-radius:14px;box-shadow:var(--card-edge),var(--card-shadow)}
.qa summary{list-style:none;cursor:pointer;padding:16px 56px 15px 20px;font-size:16.5px;font-weight:650;position:relative;border-radius:14px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";position:absolute;right:16px;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:50%;
  background:var(--block);color:var(--on-block);font-size:19px;font-weight:700;line-height:28px;text-align:center}
.qa details[open] summary::after{content:"–"}
.qa .a{padding:0 20px 16px}
.qa .a p:first-child{margin-top:0}