/* The account pages: log in, create account, the emailed code, forgot password (register.html, also served
   as /login.html) and the new password page (reset-password.html).
   A cinematic wall of the real game covers moves behind a glass panel: docked on the right on a desktop or
   tablet, a sheet sliding up from the bottom on a phone, half the screen on a phone held sideways.
   Spacing follows the rulebook's even-spacing rule: one scale (--sp-*), two kinds of gap (--pair, --stack). */

@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:400;font-display:swap;src:url(/Assets/fonts/chakra-petch-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:500;font-display:swap;src:url(/Assets/fonts/chakra-petch-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;src:url(/Assets/fonts/chakra-petch-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;src:url(/Assets/fonts/chakra-petch-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Goldman';font-style:normal;font-weight:700;font-display:swap;src:url(/Assets/fonts/goldman-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#05070a;--fg:#eef2ef;--mute:#9aa49e;--dim:#66706b;--line:rgba(255,255,255,.1);--win:#22e08a;--gold:#f2c14e;--bad:#ff5a6a;
  --font:'Chakra Petch',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.32,.72,0,1);--slide:cubic-bezier(.65,0,.35,1);
  --fade:1.6s;--fade-ease:cubic-bezier(.45,0,.55,1);        /* one rhythm for every natural switch (JS: FADE) */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-7:32px;--sp-8:48px;
  --pair:var(--sp-2);--stack:var(--sp-6);
  --cta:linear-gradient(135deg,#3ec5ff 0%,#2472ff 45%,#0b2a7a 100%);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}                      /* hidden always wins over a component's own display */
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);overflow:hidden;-webkit-font-smoothing:antialiased}
button,input{font-family:inherit}

/* ---------- the wall: an endless conveyor of real covers (JS/auth-wall.js) ---------- */
.world{position:fixed;inset:0;overflow:hidden;perspective:1400px;background:#04060a}
.wall{position:absolute;left:50%;top:50%;width:220vmax;height:220vmax;display:flex;gap:2.2vmax;justify-content:center;
  transform:translate(-50%,-50%) rotateX(24deg) rotateZ(-14deg);transform-style:preserve-3d;animation:dolly 38s var(--ease) infinite alternate}
@keyframes dolly{0%{transform:translate(-52%,-50%) rotateX(26deg) rotateZ(-15deg) scale(1)}100%{transform:translate(-47%,-52%) rotateX(20deg) rotateZ(-11deg) scale(1.12)}}
.col{display:flex;flex-direction:column;gap:2.2vmax;flex:none;width:15vmax;will-change:transform}
.tile{flex:none;width:15vmax;aspect-ratio:1;border-radius:1.6vmax;background:#0b0e12 center/cover no-repeat;position:relative;
  box-shadow:0 2vmax 4vmax rgba(0,0,0,.6);filter:saturate(.85) brightness(.62);transition:filter var(--fade) var(--fade-ease),transform var(--fade) var(--fade-ease)}
.tile::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.25)}
.col:nth-child(odd) .tile{filter:saturate(.7) brightness(.45) blur(.6px)}
.tile.lit,.col:nth-child(odd) .tile.lit{filter:saturate(1.15) brightness(1.08);transform:translateZ(60px) scale(1.06)}
.wall.manual .tile{transition:filter .25s ease-out,transform .25s ease-out}      /* a person's hover: quick */
/* the R logo squares: the R itself glows, one colour at a time, rising and fading slowly, the next one rising as soon as the last has faded (no pause).
   Only the R: no light behind it (a blurred layer spilled over the neighbouring covers where a 3D tile is not clipped). */
.col .tile.rtile{background:#07090c;display:grid;place-items:center;filter:none;overflow:hidden}
.rtile img{position:relative;width:52%;animation:rainbowR 56s linear infinite;animation-delay:var(--d,0s)}
@keyframes rainbowR{
 0%{filter:drop-shadow(0 0 0 transparent)}7.14%{filter:drop-shadow(0 0 1.1vmax #ff2d55cc)}
 14.29%{filter:drop-shadow(0 0 0 transparent)}21.43%{filter:drop-shadow(0 0 1.1vmax #ff9500cc)}
 28.57%{filter:drop-shadow(0 0 0 transparent)}35.71%{filter:drop-shadow(0 0 1.1vmax #ffd60acc)}
 42.86%{filter:drop-shadow(0 0 0 transparent)}50%{filter:drop-shadow(0 0 1.1vmax #30d158cc)}
 57.14%{filter:drop-shadow(0 0 0 transparent)}64.29%{filter:drop-shadow(0 0 1.1vmax #3ec5ffcc)}
 71.43%{filter:drop-shadow(0 0 0 transparent)}78.57%{filter:drop-shadow(0 0 1.1vmax #2472ffcc)}
 85.71%{filter:drop-shadow(0 0 0 transparent)}92.86%{filter:drop-shadow(0 0 1.1vmax #bf5af2cc)}
 100%{filter:drop-shadow(0 0 0 transparent)}}
.sweep{position:absolute;inset:-20%;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.10) 50%,transparent 60%);animation:sweep 9s var(--ease) infinite;mix-blend-mode:screen;pointer-events:none}
@keyframes sweep{0%{transform:translateX(-60%)}60%,100%{transform:translateX(60%)}}
.grade{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(60% 55% at 35% 45%,transparent 0,rgba(4,6,10,.35) 55%,rgba(4,6,10,.92) 100%),
  linear-gradient(180deg,rgba(4,6,10,.55),transparent 25%,transparent 60%,rgba(4,6,10,.9))}

/* ---------- the layer above the wall ---------- */
.ui{position:fixed;inset:0;z-index:2;display:grid;pointer-events:none;
  padding:max(28px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(28px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.ui>*{pointer-events:auto}
.ui>.feat{pointer-events:none}
.brand{position:absolute;left:max(40px,env(safe-area-inset-left,0px));top:max(32px,env(safe-area-inset-top,0px));display:flex;align-items:center;gap:.18em;
  font:700 22px 'Goldman',var(--font);letter-spacing:.07em;color:var(--fg);text-decoration:none}
.brand img{height:1.32em;width:auto;transform:translateY(-.02em)}
.brand:focus-visible{outline:2px solid var(--fg);outline-offset:6px;border-radius:8px}
.feat{position:absolute;left:max(40px,env(safe-area-inset-left,0px));bottom:48px;display:grid;gap:14px;max-width:min(640px,48vw)}
.live{display:inline-flex;align-items:center;gap:9px;width:max-content;font:600 11px var(--font);letter-spacing:.18em;padding:8px 13px;border-radius:999px;text-transform:uppercase;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
/* Liquid Glass (JS/auth-liquid.js): once the engine is drawing the badge, the glass is the canvas under it; the badge keeps only its words and its dot */
/* Liquid Glass (JS/auth-liquid.js): the demo's material (docs/designs/liquid-glass-demo.html) on the badge and the panel: lens, tint, colour spill, lit rim, highlight */
.rcg{position:absolute;inset:0;border-radius:inherit;pointer-events:none;isolation:isolate;box-shadow:0 14px 34px rgba(0,0,0,.34),0 2px 8px rgba(0,0,0,.2)}
.rcg>*{position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.rcg-badge,.rcg-panel{z-index:-1}
.rcg .g-back{backdrop-filter:var(--lgf,blur(12px) saturate(1.5) brightness(1.04) contrast(1.06));-webkit-backdrop-filter:var(--lgf,blur(12px) saturate(1.5) brightness(1.04) contrast(1.06))}
.rcg .g-tint{background:linear-gradient(155deg,rgba(255,255,255,.14),rgba(255,255,255,.1) 50%,rgba(255,255,255,.115))}
.rcg-panel .g-tint{background:linear-gradient(155deg,rgba(14,20,18,.8),rgba(8,11,10,.76) 50%,rgba(10,15,13,.8))}      /* the form's words stay readable over the bright covers */
.rcg .g-spill{background:radial-gradient(90% 90% at 50% 115%,hsla(150,70%,65%,.2),transparent 70%);mix-blend-mode:screen}
.rcg .g-hi{background:radial-gradient(70% 55% at var(--hx,25%) var(--hy,8%),rgba(255,255,255,.3),transparent 62%)}
.rcg .g-edge{padding:1.5px;background:linear-gradient(var(--la,135deg),rgba(255,255,255,.9) 0%,rgba(255,255,255,.22) 24%,rgba(255,255,255,.06) 46%,rgba(255,255,255,.06) 58%,rgba(255,255,255,.26) 80%,rgba(255,255,255,.63) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
/* the engine's glass (JS/auth-liquid.js): its canvas sits under the words; the badge and the panel keep only their words, the form its fields */
html.lq-on .lq-canvas{z-index:-1!important}
html.lq-on .live{position:relative;z-index:1;background:none;border-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;text-shadow:0 1px 3px rgba(0,0,0,.6)}
html.rcg-on .live{position:relative;isolation:isolate;background:none;border-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.live .vs{text-transform:none}     /* "1vs1", the platform's own spelling, never "1VS1" */
.live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--win);box-shadow:0 0 12px var(--win);animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.35}}
.h1{font:700 clamp(40px,5.4vw,76px)/1 var(--font);margin:0;text-shadow:0 6px 40px rgba(0,0,0,.6);text-wrap:balance}
.now{display:flex;align-items:center;gap:14px;font-size:14px;color:var(--mute)}
.now .thumb{width:46px;height:46px;border-radius:12px;background:#0b0e12 center/cover no-repeat;border:1px solid rgba(255,255,255,.2);box-shadow:0 8px 20px rgba(0,0,0,.5)}
.now b{display:block;color:var(--fg);font:700 18px var(--font)}
/* two speeds: the tour's own switch fades (--fade); a person's hover changes at once (.instant) */
.now b,.now .thumb{transition:opacity var(--fade) var(--fade-ease),transform var(--fade) var(--fade-ease)}
.now b.out,.now .thumb.out{opacity:0;transform:translateY(8px)}
.now.instant b,.now.instant .thumb{transition:none}
.dots{position:relative;display:flex;gap:6px}
.dots i{flex:none;width:18px;height:3px;border-radius:3px;background:rgba(255,255,255,.18)}
.dots b{position:absolute;left:0;top:0;width:18px;height:3px;border-radius:3px;background:var(--win);box-shadow:0 0 8px rgba(34,224,138,.5);
  transform:translateX(calc(var(--at,0) * 24px));transition:transform .55s var(--slide),opacity var(--fade) var(--fade-ease)}
.dots.fade b{opacity:0}
.dots.jump b{transition:none}

/* ---------- the panel ---------- */
.panel{justify-self:end;align-self:stretch;width:min(500px,100%);border-radius:32px;background:rgba(8,11,10,.84);
  backdrop-filter:blur(26px) saturate(1.2);-webkit-backdrop-filter:blur(26px) saturate(1.2);
  border:1px solid rgba(255,255,255,.1);box-shadow:0 40px 90px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07);
  padding:var(--sp-7) 52px;display:flex;flex-direction:column;justify-content:safe center;gap:var(--stack);overflow-y:auto;overscroll-behavior:contain;
  animation:rise .9s var(--ease) both .15s}
@keyframes rise{from{opacity:0;transform:translateY(30px)}}
.grip{display:none}
/* Log in | Create account: the white pill slides between the two */
.tabs{position:sticky;top:0;z-index:3;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;padding:5px;border-radius:999px;background:#0e1211;border:1px solid var(--line);
  transition:box-shadow .3s var(--ease)}
/* while the form is scrolled, a cover behind the pinned tabs hides the text sliding under them (never at rest:
   on the see-through panel it would show as a ghost box) */
.panel.scrolled>.tabs{box-shadow:0 calc(-1 * var(--sp-7)) 0 var(--sp-4) rgba(10,13,12,.97),0 var(--sp-5) var(--sp-5) 0 rgba(10,13,12,.9)}
.tabs::before{content:"";position:absolute;z-index:-1;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:999px;background:var(--fg);
  box-shadow:0 4px 14px rgba(0,0,0,.35);transition:transform .55s var(--slide)}
.tabs.right::before{transform:translateX(100%)}
.tabs button{position:relative;font:600 14px var(--font);color:var(--mute);background:none;border:0;padding:11px;border-radius:999px;cursor:pointer;transition:color .35s var(--ease) .1s}
.tabs button[aria-selected="true"]{color:#05070a}
.rc-haptic-pad,.rc-haptic-pad input{touch-action:none!important}   /* the pad owns the touch (that is what makes it tick); up and down is scrolled from JS (drag-pick) */
.tabs>.rc-haptic-pad{z-index:5}   /* above the buttons, or a finger lands on a button and nothing ticks */
body.flow .tabs{display:none}
.view{display:none}
.view.on{display:grid;gap:var(--stack);animation:fade .5s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(10px)}}
h2,.h2like{font:700 34px/1.05 var(--font);margin:0;text-wrap:balance}
.sub{margin:var(--pair) 0 0;color:var(--mute);font-size:15px;line-height:1.5}
.sub b{color:var(--fg)}
form{display:grid;gap:var(--stack);margin:0}
.fld{display:grid;gap:var(--pair)}
.fld label{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);display:flex;justify-content:space-between;align-items:baseline}
input{width:100%;height:52px;border-radius:14px;background:#0d1110;border:1px solid rgba(255,255,255,.13);color:var(--fg);font:16px var(--font);padding:0 16px;outline:none;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
input:focus{border-color:#3a8cff;box-shadow:0 0 0 4px rgba(58,140,255,.18)}
input::placeholder{color:#58625d}
input[aria-invalid="true"]{border-color:var(--bad)}
.lnk{background:none;border:0;padding:0;font:600 13px var(--font);color:var(--fg);opacity:.85;cursor:pointer;text-decoration:none;text-transform:none;letter-spacing:0;transition:opacity .3s var(--ease)}
.lnk:hover{opacity:1}
#forgot{padding:var(--sp-3) var(--sp-2);margin:calc(-1 * var(--sp-3)) calc(-1 * var(--sp-2))}
.chk a{padding:var(--sp-3) 0;white-space:nowrap}     /* inline: the taller hit area does not move the lines */
.lnk:focus-visible{outline:2px solid var(--fg);outline-offset:3px;border-radius:4px}
.small{margin:0;font-size:13px;color:var(--mute);text-align:center}
.hint{font-size:12px;color:var(--mute)}
.fld>.hint:empty{margin-top:calc(-1 * var(--pair))}     /* an empty hint (nothing to say yet) takes no space: every gap in the stack stays even */
.hint.ok{color:#7fb4ff}
.hint.bad{color:var(--bad)}
/* what went wrong, in words, where the player is looking (never a pop-up) */
.msg{margin:0;padding:12px 14px;border-radius:14px;font-size:14px;line-height:1.45;background:rgba(255,90,106,.08);border:1px solid rgba(255,90,106,.32);color:#ffc2c8}
.msg:empty{display:none}
.msg.info{background:rgba(58,140,255,.08);border-color:rgba(58,140,255,.3);color:#c9ddff}
.note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:rgba(242,193,78,.08);border:1px solid rgba(242,193,78,.25);font-size:13px;line-height:1.45}
.note.blue{background:rgba(58,140,255,.08);border-color:rgba(58,140,255,.3)}
.note b{color:var(--gold)}
.note.blue b{color:#7fb4ff}
.mark{width:56px;height:56px;border-radius:18px;background:rgba(58,140,255,.1);border:1px solid rgba(58,140,255,.32);display:grid;place-items:center;font-size:24px}
.trust{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;font-size:12px;color:var(--mute)}
.trust span::before{content:"✓ ";color:var(--win)}

/* the eye on password fields: the site's own icons */
.pw{position:relative}
.pw>input{padding-right:56px}
.eye{position:absolute;right:6px;top:50%;width:44px;height:44px;transform:translateY(-50%);border:0;border-radius:12px;cursor:pointer;
  background:transparent url(/Assets/img/eye.png) center/24px no-repeat;filter:invert(1);opacity:.6;transition:opacity .3s var(--ease),background-color .3s var(--ease)}
.eye:hover{opacity:.95;background-color:rgba(0,0,0,.06)}
.eye[aria-pressed="true"]{background-image:url(/Assets/img/eye-red.png);opacity:1;filter:none}
.eye:focus-visible{outline:2px solid #3a8cff;outline-offset:-2px}

/* password strength: red from the first character, then orange, yellow, green as each rule is met */
.meter{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.meter i{height:4px;border-radius:4px;background:#222a26;transition:background .3s var(--ease)}
.meter i.on:nth-child(1){background:linear-gradient(90deg,#ff3b4f,#ff5a3c)}
.meter i.on:nth-child(2){background:linear-gradient(90deg,#ff7a2e,#ffa21f)}
.meter i.on:nth-child(3){background:linear-gradient(90deg,#ffc91a,#f5e23a)}
.meter i.on:nth-child(4){background:linear-gradient(90deg,#7ee04a,#22e08a)}

/* the six code boxes */
.code{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}
.code input{height:60px;text-align:center;font:600 24px var(--font);padding:0}

/* 18+ and Terms (#r-terms only: the haptic switches inside its frame and the Terms link keep their own style): a true square; checked = white box, black tick drawn left to right, one soft ring */
.chk{display:flex;gap:12px;align-items:center;font-size:14px;color:var(--mute);line-height:1.5;cursor:pointer}
.chk>span:last-child{transition:color .35s var(--ease)}
.chk .box{position:relative;flex:0 0 24px;width:24px;height:24px;display:block;border-radius:7px}
#r-terms{appearance:none;-webkit-appearance:none;position:relative;flex:0 0 24px;width:24px;height:24px;min-width:24px;aspect-ratio:1;margin:0;padding:0;border-radius:7px;cursor:pointer;
  background:#0d1110;border:1.5px solid rgba(255,255,255,.24);transition:background .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease),transform .25s var(--ease)}
#r-terms:hover{border-color:rgba(127,180,255,.75)}
#r-terms::after{content:"";position:absolute;inset:-1.5px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M5.5%2012.5l4.2%204.2L18.5%207.8%22%20fill%3D%22none%22%20stroke%3D%22%2305070a%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/16px 16px no-repeat;
  clip-path:inset(0 100% 0 0);transition:clip-path .38s var(--slide) .05s}
#r-terms:checked{background:var(--fg);border-color:transparent;box-shadow:0 4px 14px rgba(255,255,255,.18);animation:tick-ring .7s var(--ease)}
#r-terms:checked::after{clip-path:inset(0 0 0 0)}
#r-terms:active{transform:scale(.88)}
#r-terms:focus-visible{outline:2px solid #7fb4ff;outline-offset:3px}
.chk:has(#r-terms:checked)>span:last-child{color:var(--fg)}
.chk a{color:var(--fg);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.3)}
@keyframes tick-ring{0%{box-shadow:0 0 0 0 rgba(255,255,255,.5),0 4px 14px rgba(255,255,255,.18)}100%{box-shadow:0 0 0 12px rgba(255,255,255,0),0 4px 14px rgba(255,255,255,.18)}}

/* the main button: on press the arrow slides to the end like the old iPhone unlock, the label fades behind a glint */
.cta{position:relative;overflow:hidden;isolation:isolate;height:56px;border:0;border-radius:999px;background:var(--cta);color:#fff;text-shadow:0 1px 2px rgba(0,20,60,.4);
  font:700 16px var(--font);display:flex;align-items:center;justify-content:center;gap:12px;cursor:pointer;
  box-shadow:0 12px 34px rgba(36,114,255,.35),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.cta:hover{box-shadow:0 16px 44px rgba(36,114,255,.5),0 6px 18px rgba(11,42,122,.6),inset 0 1px 0 rgba(255,255,255,.35)}
.cta:active{transform:scale(.98)}
.cta:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.cta{text-decoration:none}
.cta[disabled]{cursor:default;opacity:.55;box-shadow:none}
.cta i{font-style:normal;flex:none;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;transition:transform .4s var(--ease)}
.cta:hover i{transform:scale(1.05)}
.cta .t{transition:opacity .35s var(--ease) .1s}
.cta::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-100%)}
.cta.go,.cta.busy{pointer-events:none}
.cta.go .t{opacity:0}
.cta.go::after{transform:translateX(100%);transition:transform .75s var(--slide)}
.cta.go i{transform:translateX(var(--dx)) scale(1.12);background:rgba(255,255,255,.95);color:#0b2a7a;box-shadow:0 0 18px rgba(36,114,255,.8);transition:transform .75s var(--slide),background .3s,color .3s}
.cta.busy i{animation:busy 1s linear infinite}
@keyframes busy{to{transform:translateX(var(--dx)) scale(1.12) rotate(360deg)}}

/* the arrows, tick and cross are drawn icons (a font's → sits off-centre on Windows): centred by the grid of their circle */
.ic{display:grid;place-items:center}
.ic::before{content:"";display:block;flex:none;width:16px;height:16px;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.ic-go{--m:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14M13%206l6%206-6%206%22%2F%3E%3C%2Fsvg%3E")}
.ic-out{--m:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%2017L17%207M8%207h9v9%22%2F%3E%3C%2Fsvg%3E")}
.ic-ok{--m:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012.5l4.5%204.5L19%207.5%22%2F%3E%3C%2Fsvg%3E")}
.ic-x{--m:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%206l12%2012M18%206L6%2018%22%2F%3E%3C%2Fsvg%3E")}
.tc-x{display:grid;place-items:center}
.tc-x .ic::before{width:15px;height:15px}

/* ---------- the Terms window: black and white, the site font, the full text ---------- */
.tc{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:max(24px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(24px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.tc[hidden]{display:none}
.tc-scrim{position:absolute;inset:0;background:rgba(3,5,8,.66);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);animation:fade .4s var(--ease)}
.tc-box{--tc-ink:#fff;--tc-text:rgba(255,255,255,.82);--tc-soft:rgba(255,255,255,.55);--tc-line:rgba(255,255,255,.12);
  position:relative;width:min(1000px,100%);height:min(88vh,920px);display:flex;flex-direction:column;border-radius:32px;overflow:hidden;
  background:#000;border:1px solid var(--tc-line);box-shadow:0 60px 140px rgba(0,0,0,.7);animation:rise .55s var(--ease)}
.tc-grip{display:none}
.tc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-7) var(--sp-7) var(--sp-6)}
.tc-eb{display:inline-flex;align-items:center;gap:8px;font:600 11px var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--tc-soft)}
.tc-eb::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff}
.tc-head h2{font-size:clamp(26px,3vw,36px);font-weight:600;margin:var(--sp-2) 0 0;color:var(--tc-ink)}
.tc-meta{margin:var(--sp-2) 0 0;color:var(--tc-soft);font-size:15px}
.tc-x{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:#000;color:#fff;font-size:16px;cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .3s var(--ease)}
.tc-x:hover,.tc-x:active,.tc-x:focus-visible{background:#fff;color:#000;border-color:#fff;transform:rotate(90deg);outline:none}
.tc-main{flex:1;min-height:0;display:grid;grid-template-columns:250px 1fr;border-top:1px solid var(--tc-line)}
.tc-toc{position:relative;overflow-y:auto;padding:var(--sp-5) var(--sp-4) var(--sp-5) var(--sp-6);border-right:1px solid var(--tc-line);display:flex;flex-direction:column;gap:2px;scrollbar-width:none}
.tc-toc::-webkit-scrollbar{display:none}
.tc-ind{position:absolute;left:var(--sp-6);right:var(--sp-4);top:0;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.4);
  transform:translateY(var(--y,0));height:var(--h,0);transition:transform .5s var(--slide),height .5s var(--slide);pointer-events:none}
.tc-toc a{position:relative;display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;font:500 14px var(--font);color:var(--tc-soft);text-decoration:none;transition:color .3s var(--ease)}
.tc-toc a:hover,.tc-toc a.on{color:var(--tc-ink)}
.tc-toc a .n{flex:none;width:24px;font:600 11px var(--font);color:var(--tc-soft)}
.tc-toc a.on .n{color:var(--tc-ink)}
.tc-toc a:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.tc-body{position:relative;overflow-y:auto;overscroll-behavior:contain;padding:var(--sp-6) var(--sp-7) var(--sp-8);font-size:16.5px;line-height:1.72;color:var(--tc-text);scroll-behavior:smooth}
.tc-body .important-title,.tc-body .update-info{display:none}
.tc-body h2{display:flex;align-items:center;gap:12px;font-size:22px;font-weight:600;color:var(--tc-ink);margin:var(--sp-8) 0 var(--sp-3);scroll-margin-top:var(--sp-4)}
.tc-body h2 .n{flex:none;display:inline-grid;place-items:center;min-width:36px;height:28px;padding:0 8px;border-radius:9px;font:600 12px var(--font);color:var(--tc-ink);border:1px solid rgba(255,255,255,.4)}
.tc-body h3{font-size:15px;color:var(--tc-ink);margin:var(--sp-5) 0 var(--sp-2);letter-spacing:.02em}
.tc-body p{margin:0 0 var(--sp-3);max-width:68ch}
.tc-body ol,.tc-body ul{margin:0 0 var(--sp-3);padding-left:22px;display:grid;gap:6px;max-width:66ch}
.tc-body li::marker{color:var(--tc-soft)}
.tc-body strong{color:var(--tc-ink)}
.tc-body a{color:var(--tc-ink);text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:3px}
.tc-body .beta-warning{position:relative;margin:0;padding:var(--sp-2) var(--sp-6) var(--sp-4);border-radius:20px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.28);overflow:hidden}
.tc-body .beta-warning::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#fff}
.tc-body .beta-warning h2{margin-top:var(--sp-5);font-size:17px}
.tc-foot{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-4) var(--sp-7) max(var(--sp-4),env(safe-area-inset-bottom,0px));border-top:1px solid var(--tc-line);background:#000}
.tc-prog{position:absolute;left:0;right:0;top:-1px;height:2px}
.tc-prog i{display:block;height:100%;width:0;background:#fff}
.tc-left{display:flex;align-items:center;gap:var(--sp-3);font-size:14px;color:var(--tc-soft)}
.tc-ring{width:28px;height:28px;flex:none}
.tc-ring circle{fill:none;stroke-width:3}
.tc-ring .bg{stroke:rgba(255,255,255,.15)}
.tc-ring .fg{stroke:#fff;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;stroke-dasharray:69.1;stroke-dashoffset:69.1;transition:stroke-dashoffset .2s linear}
#tc-agree{height:44px;padding:0 8px 0 20px;gap:10px;font:600 14px var(--font);background:#fff;color:#000;text-shadow:none;box-shadow:none}
#tc-agree:hover{box-shadow:0 8px 24px rgba(255,255,255,.14)}
#tc-agree i{width:28px;height:28px;background:rgba(0,0,0,.08);color:#000}
#tc-agree::after{background:linear-gradient(100deg,transparent 30%,rgba(0,0,0,.08) 50%,transparent 70%)}
#tc-agree.go i{background:#000;color:#fff;box-shadow:none}

/* ---------- phone and tablet upright: the panel becomes a sheet ---------- */
@media (max-width:820px){
  :root{--stack:var(--sp-5)}
  body.tall .feat{opacity:0;transition:opacity .4s}
  .wall{width:300vmax;height:300vmax}
  .col,.tile{width:24vmax}
  .feat{left:max(20px,env(safe-area-inset-left,0px));right:20px;bottom:auto;top:max(96px,calc(env(safe-area-inset-top,0px) + 80px));max-width:none}
  .feat .now,.feat .dots{display:none}
  .h1{font-size:clamp(34px,10vw,52px)}
  .live{font-size:12px}
  .brand{left:20px;top:max(24px,env(safe-area-inset-top,0px))}
  .ui{padding:0}
  .panel{position:fixed;left:0;right:0;bottom:0;width:100%;max-height:72%;border-radius:30px 30px 0 0;border-bottom:0;justify-content:flex-start;
    padding:var(--sp-3) max(22px,env(safe-area-inset-right,0px)) max(26px,env(safe-area-inset-bottom,0px)) max(22px,env(safe-area-inset-left,0px));animation:sheet .9s var(--ease) both .2s}
  body.tall .panel{max-height:calc(100% - max(72px,calc(env(safe-area-inset-top,0px) + 64px)))}     /* Create account: room for its button, up to just under the logo */
  @keyframes sheet{from{transform:translateY(100%)}}
  .grip{display:block;width:40px;height:5px;border-radius:5px;background:rgba(255,255,255,.22);margin:0 auto;flex:none}
  .tabs{top:var(--sp-3)}
  .panel.scrolled>.tabs{box-shadow:0 calc(-1 * var(--sp-6)) 0 var(--sp-5) rgba(10,13,12,.97),0 var(--sp-4) var(--sp-4) calc(var(--sp-1) * -1) rgba(10,13,12,.9)}
  h2,.h2like{font-size:28px}
  .trust{display:none}
  .grade{background:linear-gradient(180deg,rgba(4,6,10,.92) 0,rgba(4,6,10,.75) 28%,rgba(4,6,10,.15) 45%,rgba(4,6,10,.5) 70%),radial-gradient(90% 60% at 50% 40%,transparent,rgba(4,6,10,.7))}
  .tc{padding:0;place-items:end stretch}
  .tc-box{width:100%;height:94%;border-radius:28px 28px 0 0;border-bottom:0;animation:sheet .55s var(--ease)}
  .tc-grip{display:block;width:40px;height:5px;border-radius:5px;background:rgba(255,255,255,.22);margin:10px auto 0;flex:none}
  /* the Terms page itself: the whole screen, no sheet and no grip, only the close button */
  .tc-light.tc{place-items:stretch}
  .tc-light .tc-box{height:100%;border-radius:0;border:0;animation:none;padding-top:env(safe-area-inset-top,0px)}
  .tc-light .tc-grip{display:none}
  .tc-head{padding:var(--sp-4) var(--sp-5)}
  .tc-head h2{font-size:24px}
  .tc-main{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .tc-toc{flex-direction:row;overflow-x:auto;overflow-y:hidden;padding:var(--sp-3) var(--sp-5);border-right:0;border-bottom:1px solid var(--tc-line);gap:var(--sp-2)}
  .tc-ind{left:0;right:auto;top:var(--sp-3);bottom:var(--sp-3);height:auto;width:var(--w,0);transform:translateX(var(--x,0));transition:transform .5s var(--slide),width .5s var(--slide);border-radius:999px}
  .tc-toc a{flex:none;padding:7px 12px;border-radius:999px;border:1px solid var(--tc-line);white-space:nowrap}
  .tc-toc a .n{width:auto}
  .tc-body{padding:var(--sp-5) var(--sp-5) var(--sp-7)}
  .tc-foot{padding:var(--sp-3) var(--sp-5) max(var(--sp-4),env(safe-area-inset-bottom,0px))}
}
/* the shortest upright phones (an iPhone SE, browser bars shown): Create account scrolls, its button stays pinned at the bottom */
@media (max-width:599px) and (max-height:760px) and (orientation:portrait){
  body.tall .panel{background:#0a0d0c}       /* opaque here, so the band behind the pinned button matches it exactly */
  #v-reg>div:first-child{display:none}       /* the tab above already says "Create account" */
  .feat{top:max(72px,calc(env(safe-area-inset-top,0px) + 64px))}       /* Log in: the headline clear of the sheet */
  .sub{display:none}
  .pw:has(input:placeholder-shown)~.meter,.pw:has(input:placeholder-shown)~.hint{display:none}   /* the strength bar appears with the first character */
  body.tall .view .cta{position:sticky;bottom:0;z-index:2;
    box-shadow:0 var(--sp-6) 0 var(--sp-5) #0a0d0c,0 calc(-1 * var(--sp-4)) 0 var(--sp-1) #0a0d0c,0 calc(-1 * var(--sp-7)) var(--sp-4) calc(-1 * var(--sp-2)) #0a0d0c}
}
/* ---------- tablet held upright: a card made for it, centred over the wall, never the phone sheet stretched wide ---------- */
@media (min-width:600px) and (max-width:820px) and (orientation:portrait){
  :root{--stack:var(--sp-6)}
  body.tall .feat{opacity:1}
  .feat{left:max(48px,env(safe-area-inset-left,0px));right:48px;top:max(120px,calc(env(safe-area-inset-top,0px) + 96px))}
  .brand{left:48px;top:max(40px,env(safe-area-inset-top,0px))}
  .panel,body.tall .panel{left:0;right:0;bottom:max(40px,env(safe-area-inset-bottom,0px));margin:0 auto;width:min(540px,calc(100% - 96px));max-height:calc(100% - 340px);
    border-radius:32px;border-bottom:1px solid rgba(255,255,255,.1);padding:var(--sp-3) var(--sp-8) var(--sp-7)}
  .trust{display:flex}
}
/* ---------- phone held sideways: the form on the right half, the wall on the left ---------- */
@media (max-height:500px) and (orientation:landscape){
  :root{--stack:var(--sp-3)}
  .ui{padding:12px max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px))}
  .panel{position:static;width:min(420px,52vw);max-height:none;border-radius:24px;padding:var(--sp-4) 26px;animation:rise .9s var(--ease) both}
  .grip,.trust,.feat .now,.feat .dots{display:none}
  .feat{top:auto;bottom:20px;left:max(24px,env(safe-area-inset-left,0px));max-width:40vw}
  .h1{font-size:30px}
  .panel.scrolled>.tabs{box-shadow:0 calc(-1 * var(--sp-4)) 0 var(--sp-3) rgba(10,13,12,.97),0 var(--sp-3) var(--sp-3) calc(var(--sp-1) * -1) rgba(10,13,12,.9)}
  h2,.h2like{font-size:22px}.sub{display:none}input{height:44px}.cta{height:48px}
  #f-reg{grid-template-columns:1fr 1fr;column-gap:var(--sp-3)}#f-reg>*{grid-column:1/-1}#f-reg>.fld:nth-child(-n+2){grid-column:auto}
  .panel{width:min(480px,56vw)}
  .tabs button{padding:var(--sp-2)}
  #v-reg>div:first-child{display:none}       /* the tab above already says "Create account" */
  .pw:has(input:placeholder-shown)~.meter,.pw:has(input:placeholder-shown)~.hint{display:none}   /* the strength bar appears with the first character */
}
/* the shortest sideways screens (a phone with its browser bars, under 380 px tall): the form scrolls,
   its button stays pinned at the bottom of the panel, always one tap away */
@media (max-height:380px) and (orientation:landscape){
  .panel{background:#0a0d0c}       /* opaque here, so the band behind the pinned button matches it exactly */
  #v-login>div:first-child{display:none}       /* the tab above already says "Log in" */
  #v-reg .cta{position:sticky;bottom:0;z-index:2;
    box-shadow:0 var(--sp-4) 0 var(--sp-4) #0a0d0c,0 calc(-1 * var(--sp-4)) 0 var(--sp-1) #0a0d0c,0 calc(-1 * var(--sp-7)) var(--sp-4) calc(-1 * var(--sp-2)) #0a0d0c}
}
@media (prefers-reduced-motion:reduce){
  .wall,.col,.sweep,.live::before,.panel,.view.on,.tc-box,.tc-scrim{animation:none!important}
  .tile,.tabs::before,.dots b,.cta.go i,.cta.go::after,#r-terms,#r-terms::after,.tc-ind,.tc-ring .fg{transition:none}
  #r-terms:checked{animation:none}
  .rtile img{animation:none;filter:drop-shadow(0 0 1.1vmax #2472ffcc)}
  .tc-body{scroll-behavior:auto}
}

/* ---------- the Terms page (/terms-and-conditions.html): the same window, black text on white, to read only ---------- */
body.tc-page{background:#f4f5f7;color:#0b0d0f}
.tc-light .tc-box{--tc-ink:#0b0d0f;--tc-text:rgba(11,13,15,.82);--tc-soft:rgba(11,13,15,.55);--tc-line:rgba(11,13,15,.1);
  background:#fff;box-shadow:0 40px 120px rgba(15,20,30,.12),0 8px 24px rgba(15,20,30,.06)}
.tc-light .tc-grip{background:rgba(11,13,15,.18)}
.tc-light .tc-eb::before{background:#0b0d0f}
.tc-light .tc-x{border-color:rgba(11,13,15,.25);background:#fff;color:#0b0d0f}
.tc-light .tc-x:hover,.tc-light .tc-x:active,.tc-light .tc-x:focus-visible{background:#0b0d0f;color:#fff;border-color:#0b0d0f}
.tc-light .tc-ind{background:rgba(11,13,15,.05);border-color:rgba(11,13,15,.3)}
.tc-light .tc-toc a:focus-visible{outline-color:#0b0d0f}
.tc-light .tc-body h2 .n{border-color:rgba(11,13,15,.3)}
.tc-light .tc-body a{text-decoration-color:rgba(11,13,15,.35)}
.tc-light .tc-body .beta-warning{background:rgba(11,13,15,.025);border-color:rgba(11,13,15,.2)}
.tc-light .tc-body .beta-warning::before{background:#0b0d0f}
.tc-light .tc-foot{background:#fff}
.tc-light .tc-prog i{background:#0b0d0f}
.tc-light .tc-ring .bg{stroke:rgba(11,13,15,.12)}
.tc-light .tc-ring .fg{stroke:#0b0d0f}
/* the Terms and Privacy pages on every screen: the page itself, edge to edge (the floating card is only for the register window, which sits over a page) */
.tc-light.tc{padding:0;place-items:stretch}
.tc-light .tc-box{width:100%;max-width:none;height:100%;max-height:none;border-radius:0;border:0;box-shadow:none;animation:none;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) 0 env(safe-area-inset-left,0px)}
/* on a wide screen the Terms and Privacy pages are three parts: the title, the section list and the progress ring share the left edge, Print and close take the right edge, and the text is centred in the space between (a line of text is --measure wide: 68 characters, in px so a fallback font cannot move it).
   --pad is the room at the screen's sides: the header and footer sit in a 1280px shell, so on a big screen they spread out while the text keeps its reading width. The lines and the scrolling still run edge to edge. */
@media screen and (min-width:821px) and (min-height:501px){
  .tc-light .tc-box{--measure:705px;--pad:max(var(--sp-7),calc((100vw - 1280px) / 2))}
  .tc-light .tc-head,.tc-light .tc-foot{padding-left:var(--pad);padding-right:var(--pad)}
  .tc-light .tc-main{grid-template-columns:calc(var(--pad) + 250px - var(--sp-6)) 1fr}
  .tc-light .tc-toc{padding-left:var(--pad)}
  .tc-light .tc-ind{left:var(--pad)}
  /* the text's area runs from the section list to the buttons' edge; --sbw is the width of a classic scrollbar (Windows), measured in auth-ui.js, so that edge does not move */
  .tc-light .tc-body{padding-left:0;padding-right:calc(var(--pad) - var(--sbw,0px));container-type:inline-size}
  .tc-light .tc-body .content{width:min(var(--measure),calc(100% - 2 * var(--sp-7)));margin:0 auto}
  .tc-light .tc-body p{max-width:none}
  /* the notice box hangs out of the text column by its own padding, so its words line up with the page text; it gives that back where the room runs out */
  .tc-light .tc-body .beta-warning{margin-left:calc(-1 * clamp(0px,(100cqw - var(--measure)) / 2 - var(--sp-4),var(--sp-6) + 1px));margin-right:calc(-1 * clamp(0px,(100cqw - var(--measure)) / 2 - var(--sp-4),var(--sp-6) + 1px))}
  .tc-light .tc-foot::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:var(--sp-6);background:linear-gradient(to top,#fff,rgba(255,255,255,0));pointer-events:none}   /* the text melts into the footer, never a hard cut */
}
/* the Terms and Privacy pages on a phone held sideways: the whole screen too, with a compact header */
@media (orientation:landscape) and (max-height:500px){
  .tc-light.tc{padding:0;place-items:stretch}
  .tc-light .tc-box{width:100%;max-width:none;height:100%;max-height:none;border-radius:0;border:0;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) 0 env(safe-area-inset-left,0px)}
  .tc-light .tc-head{padding:var(--sp-3) var(--sp-6)}
  .tc-light .tc-head h2{font-size:22px;margin-top:var(--sp-1)}
  .tc-light .tc-meta{display:none}
  .tc-light .tc-foot{padding:var(--sp-2) var(--sp-6) max(var(--sp-2),env(safe-area-inset-bottom,0px))}
}

/* Print or save PDF, beside the close button on the Terms and Privacy pages */
.ic-pr{--m:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%209V3h10v6%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%229%22%20width%3D%2218%22%20height%3D%228%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M7%2014h10v7H7z%22%2F%3E%3C%2Fsvg%3E")}
.tc-acts{flex:none;display:flex;align-items:center;gap:var(--sp-2)}
.tc-pr{height:44px;display:inline-flex;align-items:center;gap:var(--sp-2);padding:0 var(--sp-4);border-radius:999px;border:1px solid rgba(11,13,15,.25);background:#fff;color:#0b0d0f;font:600 14px var(--font,inherit);font-family:inherit;cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.tc-pr:hover,.tc-pr:active,.tc-pr:focus-visible{background:#0b0d0f;color:#fff;border-color:#0b0d0f;outline:none}
@media (max-width:820px),(orientation:landscape) and (max-height:500px){
  .tc-pr{width:44px;padding:0;justify-content:center}
  .tc-pr .t{display:none}
}
/* the printed copy (and Save as PDF): the whole text, black on white, without the list, the bar or the buttons */
@media print{
  @page{margin:18mm 16mm}
  html,body.tc-page{background:#fff!important;height:auto!important;overflow:visible!important}
  body.tc-page>:not(#tc){display:none!important}
  .tc-light.tc{position:static!important;display:block!important;padding:0!important}
  .tc-light .tc-box{display:block!important;width:auto!important;max-width:none!important;height:auto!important;max-height:none!important;box-shadow:none!important;border:0!important;border-radius:0!important;padding:0!important;animation:none!important}
  .tc-light .tc-acts,.tc-light .tc-toc,.tc-light .tc-foot,.tc-light .tc-grip{display:none!important}
  .tc-light .tc-head{padding:0 0 12pt!important;border-bottom:1px solid #000}
  .tc-light .tc-meta{display:none}
  .tc-light .tc-main{display:block!important;overflow:visible!important}
  .tc-light .tc-body{overflow:visible!important;height:auto!important;padding:12pt 0 0!important;color:#000}
  .tc-light .tc-body h2{break-after:avoid}
  .tc-light .tc-body p,.tc-light .tc-body li{orphans:3;widows:3}
}