/* LockinBro, hemsidan. Facit: docs/prototyper/webb-passet.html (körning 33 del C).
   Samma regler som där, i samma ordning. Det enda som skiljer: stilarna som
   stod i style-attribut i facit står här som klasser, eftersom sidans
   Content-Security-Policy bara tillåter stilmallar från den egna domänen. */
/* Passet v2: lås in vid ingången, klockan i en ö som också är menyn, korten staplas, lås ut längst ner. */
@font-face{font-family:Outfit;src:url(/fonts/outfit-800.woff2) format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:Outfit;src:url(/fonts/outfit-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Outfit;src:url(/fonts/outfit-400.woff2) format('woff2');font-weight:400;font-display:swap}
:root{--bg:#060707;--card:#101214;--card2:#15181A;--text:#F4F3EF;--muted:#9A9DA2;--dim:#5C6065;--lime:#CDF45A;--ink:#0B0C08;--line:rgba(244,243,239,.09);--line2:rgba(244,243,239,.16);
  --f:Outfit,ui-rounded,system-ui,-apple-system,'Segoe UI',sans-serif;--ease:cubic-bezier(.2,.9,.2,1);color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
html,body{background:var(--bg);color:var(--text);font-family:var(--f);margin:0;-webkit-font-smoothing:antialiased;overflow-x:clip;text-rendering:optimizeLegibility}
body.locked{overflow:hidden}
a{color:inherit}button{font-family:inherit;color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding-inline:20px}
.k{font-size:13px;font-weight:600;color:var(--lime);letter-spacing:.01em}
.sec{padding-block:clamp(90px,14vw,160px)}
.sh{margin:0 0 14px;text-wrap:balance;font-size:clamp(40px,8vw,84px);font-weight:800;letter-spacing:-.05em;line-height:.92}
.lead{margin:0;color:var(--muted);font-size:clamp(17px,1.8vw,20px);line-height:1.5;max-width:40ch}
.rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}.rv.in{opacity:1;transform:none}

/* ingången */
.gate{position:fixed;inset:0;z-index:50;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;transition:opacity .7s var(--ease),visibility .7s,transform .7s var(--ease)}
.gate.gone{opacity:0;visibility:hidden;transform:scale(1.04)}
.gate .lg{position:absolute;top:calc(22px + env(safe-area-inset-top,0px));font-weight:800;letter-spacing:-.03em;font-size:18px}.lg b{color:var(--lime)}
.gate h1{margin:0;font-size:clamp(68px,19vw,156px);font-weight:800;letter-spacing:-.06em;line-height:.9}
.shutter{position:relative;width:110px;height:110px;border-radius:50%;border:4px solid var(--text);background:none;padding:0;cursor:pointer;display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
.shutter::after{content:"";width:88px;height:88px;border-radius:50%;background:var(--text);transition:transform .18s var(--ease)}
.shutter:active::after{transform:scale(.9)}
.shutter svg{position:absolute;left:50%;top:50%;width:138px;height:138px;transform:translate(-50%,-50%) rotate(-90deg)}
.shutter circle{fill:none;stroke-width:4}
.shutter .trk{stroke:#1C1F22;opacity:0;transition:opacity .2s}
.shutter .arc{stroke:var(--lime);stroke-linecap:round;stroke-dasharray:415;stroke-dashoffset:0;opacity:0}
.shutter.run .trk{opacity:1}.shutter.run .arc{opacity:1;animation:ring 1.75s linear forwards}
.shutter .n{position:absolute;z-index:1;font-weight:800;font-size:34px;color:var(--ink);font-variant-numeric:tabular-nums}
@keyframes ring{from{stroke-dashoffset:0}to{stroke-dashoffset:415}}
.gate p{margin:0;color:var(--muted);font-size:16px;min-height:1.4em}
.gate .skip{position:absolute;bottom:calc(26px + env(safe-area-inset-bottom,0px));background:none;border:0;color:var(--dim);font-size:14px;cursor:pointer;padding:12px}
.flash{position:fixed;inset:0;background:var(--lime);opacity:0;pointer-events:none;z-index:60}
.flash.go{animation:fl .75s ease-out}@keyframes fl{0%{opacity:.8}100%{opacity:0}}

/* ön, som också är menyn */
.island{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));left:50%;z-index:40;width:236px;border-radius:24px;background:#000;border:1px solid #1C1F22;box-shadow:0 14px 40px rgba(0,0,0,.65);transform:translate(-50%,-120px);transition:transform .9s cubic-bezier(.2,1.25,.3,1),width .5s var(--ease),border-radius .5s var(--ease);overflow:hidden}
.island.on{transform:translate(-50%,0)}
.island.open{width:min(340px,calc(100vw - 24px));border-radius:28px}
.ibar{height:48px;display:flex;align-items:center;gap:10px;padding:0 6px 0 8px}
.itog{display:flex;align-items:center;gap:10px;height:40px;padding:0 6px;border:0;background:none;cursor:pointer;flex:1;border-radius:20px}
.itog svg{width:22px;height:22px;flex:none}
.itog .t{font-weight:600;font-size:17px;font-variant-numeric:tabular-nums}
.itog .mi{margin-left:auto;width:16px;height:10px;position:relative}.itog .mi::before,.itog .mi::after{content:"";position:absolute;left:0;right:0;height:1.6px;border-radius:1px;background:var(--muted);transition:transform .4s var(--ease),top .4s var(--ease)}
.itog .mi::before{top:1px}.itog .mi::after{top:7px}
.open .itog .mi::before{top:4px;transform:rotate(45deg)}.open .itog .mi::after{top:4px;transform:rotate(-45deg)}
.ibar .out{height:36px;padding:0 15px;border-radius:18px;background:var(--lime);color:var(--ink);font-weight:600;font-size:14px;text-decoration:none;display:flex;align-items:center;white-space:nowrap;flex:none}
.imenu{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.open .imenu{grid-template-rows:1fr}
.imenu>div{overflow:hidden}
.imenu a{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;font-size:19px;font-weight:600;letter-spacing:-.01em;text-decoration:none;border-top:1px solid #16191B}
.imenu a span{color:var(--dim);font-size:14px;font-weight:400}
.imenu>div>a:last-of-type{color:var(--lime)}

/* hjälten */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-block:130px 70px;gap:24px;position:relative}
.hero h2{margin:0;font-size:clamp(62px,14.5vw,168px);font-weight:800;letter-spacing:-.06em;line-height:.86}
.hero h2 span{display:block;overflow:hidden;padding-bottom:.07em;margin-bottom:-.07em}
.hero h2 i{display:block;font-style:normal;transform:translateY(108%);transition:transform 1.1s var(--ease)}
.hero h2 span+span i{color:var(--lime);transition-delay:.08s}
.ready .hero h2 i{transform:none}
.hero .sub{display:flex;flex-wrap:wrap;gap:22px 40px;align-items:end;justify-content:space-between;opacity:0;transform:translateY(14px);transition:opacity .9s .35s var(--ease),transform .9s .35s var(--ease)}
.ready .hero .sub{opacity:1;transform:none}
.hero p{margin:0;font-size:clamp(18px,2vw,22px);color:var(--muted);max-width:30ch;line-height:1.45}
.btns{display:flex;gap:10px;flex-wrap:wrap}
.btn{height:52px;padding:0 24px;border-radius:26px;display:inline-flex;align-items:center;font-weight:600;font-size:16px;text-decoration:none;border:1px solid var(--line2);transition:background .2s,transform .2s}
.btn.p{background:var(--lime);color:var(--ink);border-color:transparent}
.btn:active{transform:scale(.97)}

/* ett pass, tre steg */
.steps{display:grid;gap:0;margin-top:56px;border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:72px 1fr;gap:4px 18px;padding:26px 0;border-bottom:1px solid var(--line)}
.step .n{grid-row:span 2;font-size:15px;font-weight:600;color:var(--dim);font-variant-numeric:tabular-nums;padding-top:8px}
.step h3{margin:0;font-size:clamp(30px,5vw,48px);font-weight:800;letter-spacing:-.045em;line-height:1}
.step p{margin:0;color:var(--muted);font-size:16.5px;line-height:1.45;max-width:44ch}
.step.in .n{color:var(--lime);transition:color .6s .4s}
@media(min-width:900px){.steps{grid-template-columns:repeat(3,1fr);border-top:0}.step{grid-template-columns:1fr;border-bottom:0;border-top:1px solid var(--line);padding:24px 28px 0 0}.step .n{grid-row:auto;padding:0 0 40px}}

/* korten som staplas */
.deck{position:relative;padding-bottom:10vh}
.card{position:sticky;top:calc(76px + var(--i)*12px);height:min(80svh,740px);margin-bottom:5vh;border-radius:32px;background:var(--card);border:1px solid var(--line);overflow:hidden;display:grid;grid-template-rows:auto 1fr;transform-origin:50% 0;will-change:transform}
.card::after{content:"";position:absolute;inset:0;background:#000;opacity:var(--dark,0);pointer-events:none;border-radius:inherit}
.card .txt{padding:26px 24px 18px;display:flex;flex-direction:column;gap:10px}
.card h3{margin:0;text-wrap:balance;font-size:clamp(34px,8.6vw,62px);font-weight:800;letter-spacing:-.048em;line-height:.95}
.card p{margin:0;text-wrap:pretty;color:var(--muted);font-size:16.5px;line-height:1.45;max-width:34ch}
.card .img{position:relative;overflow:hidden;margin:0 18px;border-radius:26px 26px 0 0;border:1px solid var(--line2);border-bottom:0;background:#0A0B0C;box-shadow:0 -1px 0 rgba(255,255,255,.04) inset}
img{max-width:100%;height:auto}
.card .img img{width:100%;display:block;image-rendering:auto}
.card .img::after{content:"";position:absolute;left:0;right:0;bottom:0;height:18%;background:linear-gradient(rgba(16,18,20,0),var(--card))}
.card .img.crop{margin:8px 18px 18px;align-self:start;border-radius:24px;border-bottom:1px solid var(--line);padding:14px}
.card .img.crop img{border-radius:14px;margin:0 auto}
.card .img.crop::after{display:none}
/* haka på: ett kort utan skärmbild, med sidans egen klocka */
.card.live{background:radial-gradient(120% 80% at 50% 100%,#171C0C,var(--card) 60%)}
.card .clock{display:grid;place-items:center;align-self:center;justify-self:center;width:min(60vw,36svh,330px);aspect-ratio:1;position:relative;margin-bottom:24px}
.clock svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.clock .tr{fill:none;stroke:#1D2023;stroke-width:5}
.clock .pr{fill:none;stroke:var(--lime);stroke-width:5;stroke-linecap:round}
.clock .ct{text-align:center}
.clock .ct b{display:block;font-size:clamp(52px,13vw,76px);font-weight:800;letter-spacing:-.05em;font-variant-numeric:tabular-nums;line-height:1}
.clock .ct span{color:var(--muted);font-size:14px}
.faces{position:absolute;bottom:4%;display:flex}
.faces i{width:40px;height:40px;border-radius:50%;border:3px solid var(--card);background:#2A2E31;display:grid;place-items:center;font-style:normal;font-weight:600;font-size:14px;margin-left:-10px}
.faces i:first-child{margin-left:0;background:var(--lime);color:var(--ink)}
@media (min-width:900px){
  .card{grid-template-columns:1fr 1fr;grid-template-rows:1fr;align-items:center}
  .card .txt{padding:56px;gap:16px}.card p{font-size:19px}
  .card .img{align-self:end;height:92%;margin:0 56px 0 0}
  .card .img.crop{align-self:center;height:auto;margin:0 56px 0 0;padding:34px}
  .card .clock{width:340px;margin:0}
}

/* det lilla */
.bento{display:grid;gap:14px;margin-top:48px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:28px;padding:22px;display:flex;flex-direction:column;gap:14px;overflow:hidden}
.tile img{width:100%;display:block;border-radius:14px}
.tile h3{margin:0;font-size:24px;font-weight:800;letter-spacing:-.03em}
.tile p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.45}
.tile.big{font-size:clamp(46px,7vw,72px);font-weight:800;letter-spacing:-.05em;line-height:.95;justify-content:space-between}
.tile.big small{display:block;font-size:15.5px;font-weight:400;letter-spacing:0;color:var(--muted);line-height:1.45;margin-top:10px}
.tile.big .lime{color:var(--lime)}
@media(min-width:760px){.bento{grid-template-columns:repeat(6,1fr)}.t1{grid-column:span 4}.t2{grid-column:span 2}.t3{grid-column:span 2}.t4{grid-column:span 4}}
.tile.t3 span{font-size:clamp(38px,5vw,52px)}

/* skolor */
.two{display:grid;gap:40px}@media(min-width:900px){.two{grid-template-columns:1fr 1fr;gap:80px}}
.visit{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.visit li{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:22px 0;border-bottom:1px solid var(--line)}
.visit span{font-weight:600;color:var(--lime);font-variant-numeric:tabular-nums;padding-top:2px}
.visit b{font-size:19px;letter-spacing:-.01em}.visit p{margin:4px 0 0;color:var(--muted);font-size:15.5px;line-height:1.45}
.mailbox{display:flex;align-items:center;gap:8px;margin-top:28px;flex-wrap:wrap}
.mailbox a{font-size:clamp(22px,3vw,30px);font-weight:600;letter-spacing:-.02em;text-decoration:none;border-bottom:2px solid var(--lime)}
.copybtn{height:36px;padding:0 14px;border-radius:18px;border:1px solid var(--line2);background:none;font-size:14px;cursor:pointer}

/* teamet */
.team{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:44px}
@media(min-width:900px){.team{grid-template-columns:repeat(4,1fr);gap:14px}}
.flip{aspect-ratio:4/5;perspective:1000px;background:none;border:0;padding:0;cursor:pointer;text-align:left}
.flip .in{position:relative;width:100%;height:100%;transition:transform .8s var(--ease);transform-style:preserve-3d}
.flip.on .in{transform:rotateY(180deg)}
.flip .fa,.flip .ba{position:absolute;inset:0;border-radius:24px;backface-visibility:hidden;-webkit-backface-visibility:hidden;padding:16px;display:flex;flex-direction:column;justify-content:flex-end;border:1px solid var(--line)}
.flip .fa{background:linear-gradient(180deg,#191C1E,#0E1011)}
.flip .fa b{font-size:20px;letter-spacing:-.02em}.flip .fa span{color:var(--muted);font-size:14px}
.flip .ba{background:var(--lime);color:var(--ink);transform:rotateY(180deg);justify-content:space-between}
.flip .ba small{font-size:12px;font-weight:600;letter-spacing:.1em}.flip .ba b{font-size:22px;letter-spacing:-.02em;line-height:1.1}

/* frågor */
.qcats{display:flex;gap:8px;margin-top:40px;flex-wrap:wrap}
.qcats button{height:40px;padding:0 18px;border-radius:20px;border:1px solid var(--line2);background:none;font-size:15px;cursor:pointer;transition:background .2s,color .2s}
.qcats button.on{background:var(--text);color:var(--bg);border-color:transparent}
.faq{margin-top:22px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq details[hidden]{display:none}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-size:clamp(18px,2vw,22px);font-weight:600;letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;width:14px;height:14px;position:relative}.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:0;right:0;top:6px;height:2px;background:var(--muted);transition:transform .35s var(--ease)}
.faq summary i::after{transform:rotate(90deg)}.faq details[open] summary i::after{transform:rotate(0)}
.faq p{margin:0 0 22px;color:var(--muted);font-size:16.5px;line-height:1.5;max-width:56ch}

/* lås ut */
.end{min-height:92svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:24px;padding-block:90px;border-top:1px solid var(--line)}
.end h3{margin:0;font-size:clamp(52px,12vw,120px);font-weight:800;letter-spacing:-.055em;line-height:.9}
.bigout{width:176px;height:176px;border-radius:50%;border:0;background:var(--lime);color:var(--ink);font:800 26px var(--f);letter-spacing:-.02em;cursor:pointer;box-shadow:0 0 0 14px rgba(205,244,90,.07),0 0 90px rgba(205,244,90,.22);transition:transform .2s var(--ease)}
.bigout:active{transform:scale(.95)}
.passcard{display:none;width:min(400px,100%);background:linear-gradient(160deg,#171A10,#0C0D0B 62%);border:1px solid #2C3317;border-radius:30px;padding:22px 24px;text-align:left;transform:rotate(-2deg);animation:cd .9s cubic-bezier(.2,1.2,.3,1)}
@keyframes cd{from{opacity:0;transform:rotate(-9deg) translateY(36px) scale(.93)}}
.passcard .top{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted)}
.passcard .top b{color:var(--text);font-size:16px;font-weight:800;letter-spacing:-.02em}.passcard .top b em{font-style:normal;color:var(--lime)}
.passcard .cap{font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--muted);margin-top:16px;display:block}
.passcard .time{font-size:clamp(64px,17vw,92px);font-weight:800;letter-spacing:-.05em;line-height:.95;font-variant-numeric:tabular-nums}
.passcard .time small{font-size:.36em;color:var(--muted);font-weight:600;letter-spacing:0}
.passcard .bar{height:8px;border-radius:4px;background:#1E2124;margin-top:14px;overflow:hidden}.passcard .bar i{display:block;height:100%;background:var(--lime);width:0;transition:width 1.4s var(--ease)}
.end.done .bigout,.end.done .pre{display:none}.end.done .passcard{display:block}
.join{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;width:min(460px,100%)}
.join input{flex:1 1 220px;height:56px;border-radius:28px;border:1px solid var(--line2);background:#111315;color:var(--text);font:400 17px var(--f);padding:0 22px}
.join input:focus{outline:none;border-color:var(--lime)}
.join button{height:56px;padding:0 26px;border-radius:28px;border:0;background:var(--lime);color:var(--ink);font:600 17px var(--f);cursor:pointer}
.ok{display:none;color:var(--lime);font-weight:600;font-size:18px;margin:0}.join.done{display:none}.join.done+.ok{display:block}
.muted{color:var(--muted);font-size:15.5px;margin:0}
footer{border-top:1px solid var(--line);padding-block:30px calc(30px + env(safe-area-inset-bottom,0px));color:var(--dim);font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}
footer nav{display:flex;flex-wrap:wrap;gap:8px 20px}footer a{text-decoration:none}footer a:hover{color:var(--text)}
.sr{position:absolute;left:-9999px}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}.rv{opacity:1;transform:none}.hero h2 i{transform:none}.hero .sub{opacity:1;transform:none}}

/* Det som stod som style-attribut i facit. */
.pt40{padding-top:40px}.pt20{padding-top:20px}.pt0{padding-top:0}
.deck .card:nth-child(1){--i:0}.deck .card:nth-child(2){--i:1}.deck .card:nth-child(3){--i:2}.deck .card:nth-child(4){--i:3}
.deck .card:nth-child(5){--i:4}.deck .card:nth-child(6){--i:5}.deck .card:nth-child(7){--i:6}

/* Kön: felraden och fältet för robotar finns inte i facit, men hör till kön. */
.err{margin:0;color:var(--muted);font-size:15.5px;min-height:0}
.err:empty{display:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.joinnote{margin:0;font-size:14.5px;color:var(--muted);max-width:44ch;line-height:1.45;text-align:center}

/* En teambild, när den finns, ligger bakom namnet på framsidan. */
.flip .fa .teamimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.flip .fa b,.flip .fa span{position:relative}

/* En gammal adress eller ett ankare öppnar sidan utan ingången (körning 33 del D). */
.skipgate .gate{display:none}

/* Skicka till en kompis, /@användarnamn (körning 34 del H). Samma rubrik,
   ingress och knapp som framsidan; inget annat på sidan. */
.friendtop{padding-block:22px}
.friendlogo{font-weight:800;font-size:20px;letter-spacing:-.03em;text-decoration:none}.friendlogo span{color:var(--lime)}
.friend{min-height:70svh;display:flex;flex-direction:column;justify-content:center;gap:22px;padding-block:40px 90px}
.friend .sh{max-width:14ch;overflow-wrap:anywhere}
.friendhint{margin:0;color:var(--muted);font-size:15.5px;line-height:1.5;max-width:44ch}

/* Språken, körning 36. Knappen står sist i menyn i ön och som en rad i
   sidfoten; det valda språket är vitt, det andra grått. */
.imenu .ilang{display:flex;align-items:center;gap:2px;padding:4px 8px;border-top:1px solid #16191B;font-size:14px;font-weight:600}
.imenu .ilang a{display:block;padding:12px 10px;font-size:14px;color:var(--muted);border-top:0;letter-spacing:.04em}
.imenu .ilang a[aria-current]{color:var(--text)}
.imenu .ilang span{color:var(--dim);font-weight:400}
footer .langrow{flex-basis:100%;margin:0;color:var(--dim)}
footer .langrow a[aria-current]{color:var(--text)}
/* Bara på engelska: raden om att appen är på svenska, under rubriken. */
.hero p.appsv{margin-top:10px;font-size:15.5px;color:var(--dim)}

/* Undersidorna: integritetspolicyn, villkoren och supporten på båda språken
   (körning 36). Samma typsnitt, färger och marginaler som resten av sidan,
   loggan som på länksidan, och texten i en läsbredd. Startsidan har inga av
   de här klasserna. */
.doctop{padding-block:22px}
.doctop a{font-weight:800;font-size:20px;letter-spacing:-.03em;text-decoration:none}.doctop a span{color:var(--lime)}
.doc{padding-block:clamp(40px,8vw,90px) clamp(90px,12vw,140px)}
.doc>*{max-width:680px}
.doc h1{margin:0 0 20px;text-wrap:balance;font-size:clamp(44px,8vw,76px);font-weight:800;letter-spacing:-.05em;line-height:.95}
.doc .lead{max-width:680px;margin-bottom:8px;font-size:clamp(17px,1.8vw,20px);line-height:1.5}
.doc section{border-top:1px solid var(--line);margin-top:48px;padding-top:32px}
.doc h2{margin:0 0 16px;text-wrap:balance;font-size:clamp(26px,3.6vw,34px);font-weight:800;letter-spacing:-.035em;line-height:1.08}
.doc h3{margin:28px 0 8px;font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.doc h2+h3{margin-top:8px}
.doc p,.doc li{margin:0 0 14px;color:var(--muted);font-size:16.5px;line-height:1.6;text-wrap:pretty}
.doc ol{margin:0 0 18px;padding-left:1.4em}
.doc li{padding-left:4px;margin-bottom:8px}
.doc li::marker{color:var(--lime);font-weight:600}
.doc a{color:var(--text);text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:2px;text-underline-offset:4px;overflow-wrap:anywhere}
.doc .translation{margin:0 0 32px;padding:14px 18px;background:var(--card);border:1px solid var(--line);border-radius:18px;font-size:15px;line-height:1.5}