@font-face{font-family:Fraunces;src:url(/ce-vrea-pisica/assets/fonts/fraunces-normal-latin.woff2) format("woff2");font-weight:300 900;font-display:swap;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:Fraunces;src:url(/ce-vrea-pisica/assets/fonts/fraunces-normal-latin-ext.woff2) format("woff2");font-weight:300 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:"Source Serif 4";src:url(/ce-vrea-pisica/assets/fonts/source-serif-4-normal-latin.woff2) format("woff2");font-weight:300 800;font-display:swap;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:"Source Serif 4";src:url(/ce-vrea-pisica/assets/fonts/source-serif-4-normal-latin-ext.woff2) format("woff2");font-weight:300 800;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:"Source Serif 4";font-style:italic;src:url(/ce-vrea-pisica/assets/fonts/source-serif-4-italic-latin.woff2) format("woff2");font-weight:300 800;font-display:swap;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:"Source Serif 4";font-style:italic;src:url(/ce-vrea-pisica/assets/fonts/source-serif-4-italic-latin-ext.woff2) format("woff2");font-weight:300 800;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 Sans";src:url(/ce-vrea-pisica/assets/fonts/IBMPlexSans-latin.woff2) format("woff2");font-weight:300 700;font-display:swap;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:"IBM Plex Sans";src:url(/ce-vrea-pisica/assets/fonts/IBMPlexSans-latin-ext.woff2) format("woff2");font-weight:300 700;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}

:root{
  --bg:#120f1a;--bg2:#1a1624;--plate:#0c0a12;--ink:#f1e8d8;--muted:#b3a894;--soft:#8c829c;--line:rgba(241,232,216,.16);--line-soft:rgba(241,232,216,.09);
  --accent:#f2b84b;--accent-ink:#1a1206;--ok:#f2b84b;--bad:#8a7fa3;
  --F:#f39a4e;--B:#e48fb6;--I:#79b4e8;--cat-s:62%;--cat-l:66%;
  --serif:"Source Serif 4",Georgia,serif;--display:Fraunces,Georgia,serif;--sans:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  color-scheme:dark
}
:root[data-theme="light"]{
  --bg:#f5efe4;--bg2:#ece4d5;--plate:#15111d;--ink:#211b16;--muted:#5f554a;--soft:#6e6578;--line:rgba(33,27,22,.2);--line-soft:rgba(33,27,22,.1);
  --accent:#9a5d07;--accent-ink:#fff8ec;--ok:#9a5d07;--bad:#6e6578;
  --F:#b85412;--B:#a83f75;--I:#2b6aa6;--cat-s:58%;--cat-l:40%;
  color-scheme:light
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:56px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.125rem/1.62 var(--serif);text-rendering:optimizeLegibility}
a{color:inherit;text-decoration-color:color-mix(in srgb,var(--accent) 70%,transparent);text-underline-offset:.18em}
a:hover{color:var(--accent)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--accent-ink);padding:.5rem 1rem;z-index:50}
.skip:focus{left:8px;top:8px}
.muted{color:var(--muted)}
.sw{display:inline-block;width:.7em;height:.7em;border-radius:50%;margin-right:.45em;vertical-align:.02em}
.s-F{background:var(--F)}.s-B{background:var(--B)}.s-I{background:var(--I)}

/* topbar */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:1rem;height:44px;padding:0 max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left));background:color-mix(in srgb,var(--bg) 92%,transparent);border-bottom:1px solid transparent;font:500 .82rem/1 var(--sans);transition:border-color .3s}
.past-hero .topbar{border-bottom-color:var(--line-soft)}
.home{text-decoration:none;display:flex;align-items:center;gap:.45rem;white-space:nowrap}
.home svg{width:18px;height:18px}
.topnav{display:flex;gap:1rem;margin-left:auto;overflow:hidden}
.topnav a{text-decoration:none;color:var(--muted);white-space:nowrap}
.topnav a:hover{color:var(--ink)}
.langs{display:flex;gap:.3rem;margin-left:.4rem}
.chip{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:26px;padding:0 .4rem;border-radius:13px;border:1px solid var(--line);text-decoration:none;color:var(--muted);font-size:.74rem}
.chip[aria-current]{color:var(--ink);border-color:var(--ink)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:transparent;cursor:pointer}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:1px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}
@media (max-width:760px){.topnav{display:none}.langs{margin-left:auto}}

/* rail */
.rail{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:20;display:flex;flex-direction:column;gap:12px;opacity:0;transition:opacity .4s}
.past-hero .rail{opacity:1}
.rail a{position:relative;display:block;width:14px;height:14px;display:flex;align-items:center;justify-content:center;text-decoration:none}
.rail a i{width:5px;height:5px;border-radius:50%;background:var(--soft);opacity:.6;transition:all .2s}
.rail a[aria-current] i{background:var(--accent);opacity:1;transform:scale(1.5)}
.rail a span{position:absolute;right:20px;top:50%;transform:translateY(-50%);white-space:nowrap;font:500 .75rem/1 var(--sans);background:var(--bg2);color:var(--ink);padding:.35rem .55rem;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .15s}
.rail a:hover span,.rail a:focus-visible span{opacity:1}
@media (max-width:1180px){.rail{display:none}}

/* layout */
main{display:block}
section{padding:4.5rem max(18px,env(safe-area-inset-left)) 4.5rem}
.wrap{max-width:40rem;margin:0 auto}
.wide{max-width:64rem;margin:0 auto}
h1,h2,h3{font-family:var(--display);font-weight:560;letter-spacing:-.01em;line-height:1.12;font-variation-settings:"SOFT" 60,"WONK" 0}
h1{font-size:clamp(2rem,5.2vw,3.5rem);margin:.3rem 0 .9rem;max-width:20ch}
h2{font-size:clamp(1.6rem,3.6vw,2.4rem);margin:0 0 1rem;max-width:24ch}
h3{font-size:1.3rem;margin:2rem 0 .6rem}
.eyebrow{font:600 .74rem/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 .6rem}
.lead{font-size:1.25rem;line-height:1.55;color:var(--ink)}
p{margin:0 0 1.05rem}
.note{font:400 .9rem/1.5 var(--sans);color:var(--muted)}
section+section{border-top:1px solid var(--line-soft)}

/* hero + game */
#joc{padding-top:2.2rem;background:radial-gradient(120% 70% at 50% 0%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 70%)}
.deck{font-size:1.2rem;line-height:1.55;color:var(--muted);max-width:36rem;margin:0 0 1.6rem}
.friend{font:500 .95rem/1.4 var(--sans);color:var(--accent);margin:-.6rem 0 1.2rem}
.game{max-width:52rem;margin:0 auto}
.gamehead{display:flex;justify-content:space-between;align-items:center;font:500 .82rem/1 var(--sans);color:var(--muted);margin:0 0 .6rem}
.dots{display:flex;gap:6px}
.dots i{width:9px;height:9px;border-radius:50%;border:1px solid var(--soft)}
.dots i.now{border-color:var(--accent)}
.dots i.ok{background:var(--ok);border-color:var(--ok)}
.dots i.no{background:var(--bad);border-color:var(--bad);opacity:.6}
.plate{position:relative;background:var(--plate);border-radius:18px;overflow:hidden;box-shadow:0 30px 80px -40px rgba(0,0,0,.8),inset 0 0 0 1px rgba(241,232,216,.06)}
.plate::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(90% 120% at 50% 50%,transparent 55%,rgba(0,0,0,.45))}
.plate canvas{display:block;width:100%;height:clamp(170px,48vw,300px);cursor:pointer}
.playbtn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;display:flex;align-items:center;gap:.7rem;padding:.9rem 1.5rem .9rem 1.1rem;border-radius:999px;border:0;background:var(--accent);color:#1a1206;font:600 1.05rem/1 var(--sans);cursor:pointer;box-shadow:0 10px 40px -10px color-mix(in srgb,#f2b84b 80%,transparent);transition:transform .2s,opacity .3s}
.playbtn svg{width:26px;height:26px}
.playbtn:hover{transform:translate(-50%,-50%) scale(1.04)}
.playbtn.busy{opacity:.7}
.playbtn.busy svg{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.lit .playbtn{top:auto;bottom:12px;left:auto;right:12px;transform:none;padding:.55rem .9rem .55rem .7rem;font-size:.85rem;background:rgba(241,232,216,.12);color:#f1e8d8;box-shadow:none}
.lit .playbtn svg{width:18px;height:18px}
.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin:1rem 0 0}
.choices button{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem .6rem;border-radius:14px;border:1px solid var(--line);background:var(--bg2);font:500 .98rem/1.25 var(--sans);text-align:center;cursor:pointer;transition:border-color .2s,background .2s,transform .15s,opacity .2s}
.choices button svg{width:44px;height:44px;color:var(--muted)}
.choices button:not(:disabled):hover{border-color:var(--accent);transform:translateY(-2px)}
.choices button:disabled{cursor:default;opacity:.55}
.choices button.right{opacity:1;border-color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,var(--bg2))}
.choices button.right svg{color:var(--ok)}
.choices button.wrong{opacity:1;border-color:var(--bad);text-decoration:line-through;text-decoration-color:var(--bad)}
.choices[data-wait] button{opacity:.45}
.reveal{font:400 1.05rem/1.5 var(--sans);margin:1rem 0 0;min-height:1.5em}
.reveal b{color:var(--accent);font-weight:600;margin-right:.25rem}
.reveal span{display:block;color:var(--muted);font-size:.9rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.2rem;border-radius:999px;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);font:600 .95rem/1 var(--sans);cursor:pointer;text-decoration:none}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--accent);color:var(--ink)}
.rowbtn{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:1.1rem 0 0}
.hint{font:400 .85rem/1.45 var(--sans);color:var(--soft);margin:.8rem 0 0}

/* result */
.result{max-width:52rem;margin:0 auto}
.score{font:600 clamp(2.2rem,6vw,3.6rem)/1.05 var(--display);margin:0 0 .4rem;outline:none}
.verdict{font-size:1.2rem;color:var(--muted);max-width:38rem}
.per{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;padding:0;margin:.4rem 0 1.4rem;font:500 .92rem/1.3 var(--sans);color:var(--muted)}
.per b{color:var(--ink)}
.bars{display:grid;gap:.55rem;margin:1.2rem 0;max-width:40rem}
.bar{display:grid;grid-template-columns:minmax(9rem,15rem) 1fr 3.2rem;gap:.8rem;align-items:center;font:400 .9rem/1.3 var(--sans)}
.bar .t{color:var(--muted)}
.bar .track{height:12px;border-radius:6px;background:var(--line-soft);position:relative;overflow:hidden}
.bar .track i{position:absolute;inset:0 auto 0 0;width:calc(var(--v)*100%);background:var(--soft);border-radius:6px;transition:width .8s cubic-bezier(.2,.8,.2,1)}
.bar.you .track i{background:var(--accent)}
.bar.you .t{color:var(--ink);font-weight:600}
.bar b{font-weight:600;text-align:right}
.bar .chance{position:absolute;top:-3px;bottom:-3px;left:33.33%;width:1px;background:var(--ink);opacity:.5}

/* findings */
.big{font:500 clamp(1.5rem,3.4vw,2.1rem)/1.25 var(--display);margin:1.6rem 0;max-width:30ch;font-variation-settings:"SOFT" 100}
.stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem;margin:1.6rem 0}
.stat div{border-top:2px solid var(--line);padding:.8rem 0 0}
.stat b{display:block;font:600 2.2rem/1 var(--display);margin:0 0 .35rem}
.stat span{font:400 .92rem/1.45 var(--sans);color:var(--muted)}
.stat .hi b{color:var(--accent)}
.stat .hi{border-top-color:var(--accent)}

/* lesson */
.catpick{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0}
.catpick button{padding:.6rem 1rem;border-radius:999px;border:1px solid var(--line);background:transparent;cursor:pointer;font:500 .92rem/1.2 var(--sans)}
.catpick button[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}
.lessonbox{background:var(--bg2);border-radius:18px;padding:1.2rem;margin:1rem 0}
.lessonbox .plate canvas{height:clamp(130px,36vw,200px)}
.teach{display:grid;gap:.5rem;margin:.9rem 0}
.teachrow{display:flex;align-items:center;gap:.5rem;font:500 .95rem/1.2 var(--sans)}
.teachrow .tl{min-width:12rem}
.chip-play{display:inline-flex;align-items:center;gap:.3rem;height:36px;padding:0 .8rem 0 .55rem;border-radius:18px;border:1px solid var(--line);background:transparent;cursor:pointer;font:600 .85rem/1 var(--sans)}
.chip-play svg{width:14px;height:14px;fill:currentColor}
.chip-play.on{border-color:var(--accent);color:var(--accent)}
.chip-play.heard{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.lchoices{grid-template-columns:repeat(3,1fr)}
@media (max-width:560px){.teachrow{flex-wrap:wrap}.teachrow .tl{min-width:0;flex:1 1 100%}}

/* map */
.mapwrap{position:relative;margin:1.2rem auto 0;max-width:64rem}
.mapwrap canvas{display:block;width:100%;height:min(78vw,640px);touch-action:manipulation;background:var(--bg2);border-radius:18px}
.modes{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:1rem 0 .4rem;font:500 .88rem/1 var(--sans)}
.modes button{padding:.55rem .9rem;border-radius:999px;border:1px solid var(--line);background:transparent;cursor:pointer;font:500 .88rem/1 var(--sans)}
.modes button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.legend{display:flex;flex-wrap:wrap;gap:.3rem 1rem;font:400 .85rem/1.3 var(--sans);color:var(--muted);margin:.3rem 0}
#legend-cat span{display:inline-flex;align-items:center;gap:.3rem}
#legend-cat i{width:9px;height:9px;border-radius:50%;display:inline-block}
.maptip{position:absolute;z-index:4;pointer-events:none;background:var(--plate);color:#f1e8d8;font:500 .82rem/1.3 var(--sans);padding:.45rem .6rem;border-radius:8px;max-width:190px}
.maptip small{display:block;color:#b3a894;font-weight:400}
.mapcard{position:absolute;z-index:5;width:240px;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:.7rem .8rem .8rem;box-shadow:0 20px 50px -20px rgba(0,0,0,.6);font:400 .9rem/1.4 var(--sans)}
.mapcard .mini{display:block;width:100%;height:84px;background:var(--plate);border-radius:8px;margin:0 0 .5rem}
.mapcard p{margin:.2rem 0}
.mapcard .x{position:absolute;right:6px;top:4px;width:30px;height:30px;border:0;background:transparent;font-size:1.3rem;cursor:pointer;color:var(--muted)}
.mapcard .link{border:0;background:none;padding:0;margin-top:.4rem;color:var(--accent);text-decoration:underline;cursor:pointer;font:500 .88rem/1.3 var(--sans)}
.reset{position:absolute;left:12px;top:12px;z-index:3;padding:.45rem .8rem;border-radius:999px;border:1px solid var(--line);background:var(--bg);font:500 .82rem/1 var(--sans);cursor:pointer}

/* mic */
.microw{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin:1.2rem 0}
.micbtn{width:72px;height:72px;border-radius:50%;border:0;background:var(--accent);color:#1a1206;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.micbtn svg{width:30px;height:30px}
.micbtn.rec{animation:rec 1s ease-in-out infinite}
@keyframes rec{50%{box-shadow:0 0 0 14px color-mix(in srgb,var(--accent) 22%,transparent)}}
.micstate{font:500 .95rem/1.4 var(--sans);color:var(--muted);flex:1 1 14rem}
#mineout .plate canvas{height:clamp(130px,36vw,200px)}

/* sources */
.sources{font:400 .92rem/1.55 var(--sans);color:var(--muted);padding-left:1.1rem}
.sources li{margin:0 0 .55rem}
.foot{padding:2rem 18px 3rem;text-align:center;font:400 .85rem/1.5 var(--sans);color:var(--muted);border-top:1px solid var(--line-soft)}
details{margin:1rem 0}
summary{cursor:pointer;font:500 .95rem/1.4 var(--sans)}

@media (max-width:600px){
  body{font-size:1.06rem}
  section{padding:3rem 16px}
  #joc{padding-top:1.2rem}
  h1{font-size:1.9rem}
  .deck{font-size:1.05rem;margin-bottom:1rem}
  .choices{gap:.45rem}
  .choices button{padding:.75rem .3rem;font-size:.84rem}
  .choices button svg{width:34px;height:34px}
  .bar{grid-template-columns:7.5rem 1fr 2.8rem;font-size:.82rem}
  .mapwrap canvas{height:92vw}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{.topbar,.rail,.share,.playbtn{display:none}}

.platewrap{position:relative;margin-top:30px}
.peek{position:absolute;right:9%;top:-46px;width:96px;height:52px;z-index:1;pointer-events:none}
.eyes{transform-origin:60px 44px;animation:blink 7s infinite}
.lit~.peek .eyes,.platewrap:has(.lit) .eyes{animation-duration:3.2s}
@keyframes blink{0%,46%,50%,100%{transform:scaleY(1)}48%{transform:scaleY(.08)}}
.gamehead{margin-bottom:0}
@media (max-width:600px){.peek{width:76px;height:41px;top:-37px;right:7%}.platewrap{margin-top:22px}}

.gamehead{justify-content:flex-start;gap:1rem}
.peek{right:7%}

@media (min-width:1120px){
  #joc .wide{display:grid;grid-template-columns:minmax(0,25rem) minmax(0,1fr);column-gap:3.5rem;align-items:start;max-width:76rem}
  #joc .wide>.eyebrow,#joc .wide>h1,#joc .wide>.deck,#joc .wide>.friend{grid-column:1}
  #joc .wide>h1{font-size:clamp(2.2rem,3.3vw,3.1rem)}
  #joc .game,#joc .result{grid-column:2;grid-row:1/span 5;max-width:none;width:100%;margin:0}
  #joc{padding-top:3rem}
}

/* situation colours carried from tiles to map and result */
.choices button[data-c="F"] svg{color:var(--F)}.choices button[data-c="B"] svg{color:var(--B)}.choices button[data-c="I"] svg{color:var(--I)}
.choices button svg{stroke-width:2.4}
.choices button:disabled svg{opacity:.75}
.platewrap.happy .eyes{animation:happy 1.4s ease-out 1}
.platewrap.sad .eyes{animation:sad 1.4s ease-out 1}
@keyframes happy{0%,100%{transform:scaleY(1)}20%,70%{transform:scaleY(.25)}}
@keyframes sad{0%,100%{transform:scale(1)}25%,70%{transform:scale(1.25,1.35)}}
.grid{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;margin:1rem 0 .4rem;max-width:40rem}
.grid canvas{width:100%;height:58px;border-radius:6px;background:var(--plate);border-bottom:3px solid var(--bad)}
.grid canvas.ok{border-bottom-color:var(--ok)}
#legend-cat button{display:inline-flex;align-items:center;gap:.3rem;border:0;background:none;padding:.2rem .1rem;color:var(--muted);font:inherit;cursor:pointer}
#legend-cat button:hover{color:var(--ink)}
@media (max-width:600px){.grid canvas{height:44px}.grid{gap:4px}}
#rezultat,section.share{padding:0;border-top:0}
section.share{margin:1.2rem 0 0}


/* share row (standards/v2/tools/share_row.py) */
.share-row{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.share-row .lab{font-size:.95rem;margin-inline-end:.3rem}
.share-row a,.share-row button{display:inline-grid;place-items:center;flex:none;width:2.5rem;height:2.5rem;padding:0;border-radius:50%;border:1px solid var(--sr-line,color-mix(in srgb,currentColor 28%,transparent));background:transparent;color:var(--sr-ink,inherit);text-decoration:none;cursor:pointer;font:inherit;transition:color .15s,border-color .15s}
.share-row a:hover,.share-row button:hover,.share-row a:focus-visible,.share-row button:focus-visible{color:var(--sr-acc,inherit);border-color:var(--sr-acc,currentColor)}
.share-row [hidden]{display:none}
@media (pointer:coarse){.share-row a,.share-row button{width:2.75rem;height:2.75rem}}
@media (max-width:30rem){.share-row .lab{flex-basis:100%;margin:0 0 .15rem}}
.share-status{font-size:.92rem;color:var(--sr-ok,inherit);min-height:1.2em;margin:.4rem 0 0}
.share-status:empty{display:none}
.share-field{display:block;width:100%;max-width:36rem;margin-top:.4rem;font:inherit;font-size:.9rem}

.share{--sr-line:var(--line);--sr-ink:var(--ink);--sr-acc:var(--accent);margin:1.4rem 0 0}