/* =============================================================================
   lightByte social tools - the same visual system as lightbyte.agency.
   Ink is the ground, bone white carries the type and olive is the signal:
   indices, active states, the primary action. The writing tools (text
   presets and the line breaker) sit in one paper chapter in the middle.
   Section colours run through --fg / --fg-2 / --fg-3 / --rule, which
   .sec--paper flips, so every component works on either ground.
   ============================================================================= */

/* Self-hosted fonts, shared with lightbyte.agency. */
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:200 900;font-display:swap;src:url("../assets/fonts/inter-tight.woff2") format("woff2")}
@font-face{font-family:'Inter Tight';font-style:italic;font-weight:200 900;font-display:swap;src:url("../assets/fonts/inter-tight-italic.woff2") format("woff2")}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url("../assets/fonts/jetbrains-mono.woff2") format("woff2")}

:root{
  --olive:#ccd376;
  --olive-2:#b8c05a;
  --olive-3:#dcdf90;
  --black:#000;
  --ink:#0a0a0a;
  --ink-2:#141414;
  --ink-3:#1c1c1c;
  --white:#fff;
  --paper:#f6f6f2;
  --paper-2:#ecece6;
  --paper-line:rgba(0,0,0,.11);
  --bone:#fafaf7;
  --bone-2:rgba(250,250,247,.72);
  --bone-3:rgba(250,250,247,.5);
  --rule-d:rgba(250,250,247,.12);
  --ease:cubic-bezier(.77,0,.18,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --pad:clamp(20px,3vw,44px);
  --pad-y:clamp(72px,10vw,120px);
  --pad-y-tight:clamp(48px,6vw,80px);
  --r-xs:6px;
  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;
  --tray-h:0px;
  /* Dark ground by default; .sec--paper swaps these. */
  --bg:var(--ink);
  --fg:var(--bone);
  --fg-2:var(--bone-2);
  --fg-3:var(--bone-3);
  --rule:var(--rule-d);
  --ghost:rgba(250,250,247,.5);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:focus{outline:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
summary:focus-visible,.check:has(input:focus-visible),[tabindex]:focus-visible{
  outline:2px solid var(--olive);outline-offset:3px;border-radius:var(--r-xs);
}
.sec--paper :focus-visible{outline-color:var(--ink)}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
section[id],header[id]{scroll-margin-top:90px}
@media (max-width:940px){section[id],header[id]{scroll-margin-top:120px}}
@media (max-width:560px){section[id],header[id]{scroll-margin-top:104px}}
html,body{
  background:var(--ink);
  color:var(--bone);
  font-family:'Inter Tight','Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"ss01","cv11";
  font-synthesis:none;
}
body{overflow-x:hidden;min-height:100vh;font-weight:400;line-height:1.5;letter-spacing:-.012em}

html{scrollbar-width:thin;scrollbar-color:rgba(204,211,118,.6) var(--ink)}
html::-webkit-scrollbar{width:10px;height:10px}
html::-webkit-scrollbar-track{background:var(--ink)}
html::-webkit-scrollbar-thumb{background:rgba(204,211,118,.55);border:2px solid var(--ink)}
html::-webkit-scrollbar-thumb:hover{background:var(--olive)}

img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit;text-align:left}
input,select,textarea{font:inherit;color:inherit;caret-color:var(--olive)}
::selection{background:var(--olive);color:var(--ink)}

.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-feature-settings:"calt";letter-spacing:0}
/* Visible to assistive tech only - used by the pickers' result-count status. */
.sr-only{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
  text-transform:none;letter-spacing:normal;
}
/* A comma for screen readers inside a line of text, between a name and the
   line under it. No size and no box, so the link's name reads "połącz PDF,
   Kilka plików w jeden." without the stray space an .sr-only box adds. */
.sr-comma{font-size:0}

.label{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3)}

/* ============ Logo ============ */
.logo{display:inline-block;line-height:0}
.logo--nav{width:150px;height:34px}
.logo--nav img{width:100%;height:100%;display:block;object-fit:contain}

/* ============ Buttons ============
   Primary is the olive signal, ghost is the hero's outline. On ink both fill
   with bone on hover; on paper they fill with ink. */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 26px;border-radius:999px;
  border:1px solid var(--olive);background:var(--olive);color:var(--ink);
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  transition:transform 160ms var(--ease-out),background .26s var(--ease),color .26s var(--ease),border-color .26s var(--ease);
}
.btn svg{width:14px;height:14px}
.btn:active{transform:scale(.97)}
.btn--ghost{background:transparent;color:var(--fg);border-color:var(--ghost)}
/* Hover states only where the pointer can hover: on a phone a tap would leave the button lit. */
@media (hover:hover){
  .btn:hover{background:var(--bone);border-color:var(--bone);color:var(--ink);transform:translateY(-2px)}
  .btn--ghost:hover{background:var(--fg);border-color:var(--fg);color:var(--bg)}
  .sec--paper .btn:hover{background:var(--ink);border-color:var(--ink);color:var(--bone)}
  .sec--paper .btn--ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--bone)}
}

/* ============ Nav - ink glass, menu on the page centre ============ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:rgba(10,10,10,.8);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule-d);
}
@supports not (backdrop-filter: blur(1px)){.nav{background:var(--ink)}}
.nav__row{
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;padding:18px var(--pad);gap:24px;position:relative;
}
.nav__logo{display:inline-flex;align-items:center;justify-self:start}
.nav__index{display:flex;align-items:center;gap:2px}
.nav__index a{
  position:relative;
  font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--bone-2);
  padding:8px 13px;border-radius:999px;white-space:nowrap;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.nav__index a:hover{background:rgba(250,250,247,.07);color:var(--bone)}
/* Scrollspy mark: an olive underline that wipes in under the section you are in. */
.nav__index a::after{
  content:"";position:absolute;left:13px;right:13px;bottom:4px;height:2px;
  background:var(--olive);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease-out);
}
.nav__index a.is-on{color:var(--bone)}
.nav__index a.is-on::after{transform:scaleX(1)}
.nav__r{display:flex;align-items:center;gap:14px;justify-self:end}
.nav__cta{
  font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;
  padding:9px 19px;border-radius:999px;
  border:1px solid var(--olive);background:var(--olive);color:var(--ink);
  transition:transform 160ms var(--ease-out),background .26s var(--ease),border-color .26s var(--ease);
  white-space:nowrap;
}
.nav__cta:hover{background:var(--bone);border-color:var(--bone);transform:translateY(-2px)}

/* Tablet + phone: the links become a second-row strip you can swipe. */
@media (max-width:940px){
  /* Solid on phones and tablets, as on lightbyte.agency: no content showing
     through, and no blur for Safari to repaint while scrolling. */
  .nav{background:var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav__row{grid-template-columns:1fr auto;padding:14px var(--pad) 8px;gap:12px 14px}
  .nav__index{
    grid-column:1 / -1;grid-row:2;
    overflow-x:auto;flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding:4px var(--pad) 2px;margin:0 calc(-1 * var(--pad));
  }
  .nav__index::-webkit-scrollbar{display:none}
  .nav__index a{flex-shrink:0;font-size:11px;letter-spacing:.1em;padding:9px 12px}
  .nav__index a::after{left:12px;right:12px;bottom:3px}
}
@media (max-width:560px){
  .nav__row{padding:12px var(--pad) 6px;gap:10px}
  .nav__cta{padding:8px 14px;letter-spacing:.1em}
  .logo--nav{width:124px;height:28px}
}
@media (max-width:400px){
  .nav__cta{display:none}
  .logo--nav{width:110px;height:25px}
}

/* ============ Hero ============
   The site hero's loop, luminosity over olive under one static shade, so the
   tools page opens in the same light as lightbyte.agency. Compact: the search
   sits in the hero and the cover lines follow on the first screen. */
.hero{
  position:relative;
  display:grid;align-content:end;
  padding:calc(var(--pad-y-tight) + 72px) var(--pad) clamp(28px,3.4vw,44px);
  overflow:hidden;isolation:isolate;background:var(--ink);color:var(--bone);
}
.hero__media,.cta__media{position:absolute;inset:0;z-index:-1;background:var(--olive);pointer-events:none}
.hero__video,.cta__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:luminosity;opacity:0;transition:opacity 1.2s var(--ease-out)}
/* is-still: reduced motion or Save-Data. The blended poster stays, no video. */
.hero__video.is-playing,.hero__video.is-still,.cta__video.is-playing,.cta__video.is-still{opacity:1}
.hero__shade{
  position:absolute;inset:0;
  background:
    repeating-linear-gradient(to bottom,rgba(0,0,0,.2) 0 1px,transparent 1px 3px),
    radial-gradient(ellipse 80% 70% at 62% 44%,rgba(10,10,10,.72) 0%,rgba(10,10,10,.92) 100%),
    linear-gradient(to bottom,rgba(10,10,10,.5) 0%,rgba(10,10,10,0) 22%,rgba(10,10,10,0) 64%,var(--ink) 100%);
}
.hero__watermark{
  position:absolute;top:18%;right:-4vw;
  font-family:'Inter Tight',sans-serif;font-style:italic;font-weight:900;
  font-size:clamp(220px,28vw,460px);line-height:.85;letter-spacing:-.06em;
  color:transparent;-webkit-text-stroke:1px rgba(250,250,247,.07);
  pointer-events:none;z-index:0;user-select:none;white-space:nowrap;
}
/* The brand star, drawn in olive through its own outline. */
.hero__star{
  position:absolute;top:130px;right:calc(var(--pad) + 10px);
  width:clamp(150px,17vw,260px);height:clamp(150px,17vw,260px);
  z-index:1;pointer-events:none;background:var(--olive);
  -webkit-mask:url("assets/gwiazda.svg") center/contain no-repeat;
          mask:url("assets/gwiazda.svg") center/contain no-repeat;
  animation:starSpin 42s linear infinite;
}
.hero__star img{display:none}
@keyframes starSpin{to{transform:rotate(360deg)}}
@media (max-width:760px){.hero__star{display:none}}

.hero__body{display:flex;flex-direction:column;gap:20px;position:relative;z-index:2;max-width:1100px;align-self:center}
/* 128px at most: „darmowe narzędzia.” then still fits the 1100px column on
   one line, so wide screens do not push the cover lines down. */
.hero__slogan{
  font-size:clamp(48px,8.4vw,128px);line-height:.9;letter-spacing:-.05em;
  font-weight:500;font-style:italic;
}
.hero__slogan .line{display:block}
.hero__slogan .thin{font-weight:300}
.hero__slogan .fat{font-weight:900}
.hero__lead{font-size:clamp(15px,1.5vw,18px);line-height:1.6;max-width:62ch;color:var(--bone-2)}

/* The search is the first thing to use on the hub. */
.finder{position:relative;max-width:640px;margin-top:8px}
.finder svg{position:absolute;left:0;top:50%;width:22px;height:22px;transform:translateY(-50%);color:var(--bone-3);pointer-events:none;transition:color .3s var(--ease)}
.finder input{
  width:100%;padding:16px 0 16px 38px;outline:none;border:0;border-bottom:1px solid var(--ghost);border-radius:0;
  background:transparent;color:var(--bone);font:inherit;font-size:clamp(18px,1.8vw,24px);letter-spacing:-.02em;
  caret-color:var(--olive);transition:border-color .3s var(--ease);
}
.finder input:focus{border-bottom-color:var(--olive)}
.finder:focus-within svg{color:var(--olive)}
.finder input:focus-visible{outline:none}
.finder input::placeholder{color:var(--bone);opacity:.42;font-style:italic}
.finder input::-webkit-search-cancel-button{filter:invert(1) opacity(.5)}
/* The search's answer is a sentence, like every status line. */
.finder__status:empty{display:none}
.finder__status{margin-top:-8px;font-size:14px;line-height:1.5;color:var(--bone-2)}
.finder__empty{margin-top:-14px;max-width:60ch;font-size:14px;line-height:1.5;color:var(--bone-2)}
.finder__empty[hidden]{display:none}
.finder__empty a{color:var(--bone);text-decoration:underline;text-decoration-color:var(--olive);text-underline-offset:3px}

@media (max-width:940px){
  .hero{padding-top:calc(var(--pad-y-tight) + 104px)}
}
@media (max-width:560px){
  .hero{padding-top:124px;padding-bottom:28px}
  .hero__slogan{font-size:clamp(46px,13vw,80px);line-height:.92}
  .hero__watermark{display:none}
  .hero__lead{font-size:15px}
}

/* ============ Cover lines ============
   Eight everyday jobs under the search, 4 × 2 (2 × 4 on phones): hairline
   cells, a drawn icon, the name in Thin and Fat and a one-line hint. The
   olive wash comes in from the left on hover and focus, as on every row. */
.feat{padding:0 var(--pad);background:var(--ink)}
.feat__list{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rule-d)}
.feat__item{display:flex;border-bottom:1px solid var(--rule-d)}
.feat__item + .feat__item{border-left:1px solid var(--rule-d)}
.feat__item:nth-child(4n+1){border-left:0}
.feat__link{
  position:relative;isolation:isolate;flex:1;display:grid;grid-template-columns:minmax(0,1fr) 20px;
  align-content:start;gap:10px 12px;padding:clamp(20px,2vw,28px) clamp(16px,1.8vw,26px);
  color:var(--bone);transition:color .3s var(--ease);
}
.feat__item:nth-child(4n+1) .feat__link{padding-left:4px}
.feat__link::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--olive);
  transform:scaleX(0);transform-origin:left;transition:transform .46s var(--ease-out);
}
.feat__item:nth-child(4n+1) .feat__link::before{left:-14px}
.feat__link:hover::before,.feat__link:focus-visible::before{transform:scaleX(1)}
.feat__link:hover,.feat__link:focus-visible{color:var(--ink);outline:none}
.feat__icon{grid-column:1;width:28px;height:28px;color:var(--bone-2);transition:color .3s var(--ease)}
.feat__link:hover .feat__icon,.feat__link:focus-visible .feat__icon{color:var(--ink)}
.feat__name{grid-column:1;font-size:clamp(24px,2.3vw,34px);line-height:1;letter-spacing:-.04em;font-weight:500}
.feat__name .thin{font-weight:300;font-style:italic}
.feat__name b{font-weight:900;font-style:italic}
.feat__hint{grid-column:1;font-size:14px;line-height:1.45;color:var(--bone-2);transition:color .3s var(--ease)}
.feat__link:hover .feat__hint,.feat__link:focus-visible .feat__hint{color:rgba(10,10,10,.75)}
.feat__go{grid-column:2;grid-row:1;opacity:0;transform:translate3d(-6px,0,0);transition:opacity .3s var(--ease-out),transform .3s var(--ease-out)}
.feat__go svg{width:20px;height:20px}
.feat__link:hover .feat__go,.feat__link:focus-visible .feat__go{opacity:1;transform:none}
@media (max-width:980px){
  .feat__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feat__item:nth-child(n){border-left:0}
  .feat__item:nth-child(even){border-left:1px solid var(--rule-d)}
  .feat__item .feat__link{padding:18px 16px}
  .feat__item:nth-child(odd) .feat__link{padding-left:2px}
  .feat__item .feat__link::before{left:0}
  .feat__item:nth-child(odd) .feat__link::before{left:-8px}
}
@media (max-width:560px){
  /* The whole cell is the tap target, at least 100px even for a one-line name. */
  .feat__item .feat__link{min-height:100px;padding:16px 14px}
  .feat__item:nth-child(odd) .feat__link{padding-left:2px}
  .feat__icon{width:24px;height:24px}
  .feat__name{font-size:clamp(21px,5.6vw,26px)}
  .feat__hint,.feat__go,.feat__name .sr-comma{display:none}
}

/* ============ Sections ============ */
/* The same section rhythm as lightbyte.agency: 80px a side on desktop, so two
   sections meet across 160px with the hairline in the middle. */
.sec{padding:var(--pad-y-tight) var(--pad);position:relative;background:var(--bg);color:var(--fg)}
/* Straight cuts: a hairline between dark sections, a plain edge where the
   ground changes. */
.sec + .sec{border-top:1px solid var(--rule-d)}
.sec--paper{
  --bg:var(--paper);--fg:var(--ink);--fg-2:rgba(10,10,10,.74);--fg-3:rgba(10,10,10,.58);
  --rule:var(--paper-line);--ghost:rgba(10,10,10,.42);
}
.sec--paper,.sec--paper + .sec{border-top:0}
.sec--paper + .sec--paper{border-top:1px solid var(--paper-line)}
/* The olive light of the hero, left pooling in two corners of the pickers. */
.sec--dark::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background:
    radial-gradient(800px 360px at 85% 0%, rgba(204,211,118,.12), transparent 60%),
    radial-gradient(640px 300px at 5% 95%, rgba(204,211,118,.07), transparent 60%);
}
.sec--dark > *{position:relative;z-index:1}
/* No rule under the heading, as on lightbyte.agency. */
.sec__head{
  display:grid;grid-template-columns:1fr auto;gap:24px;
  align-items:baseline;margin-bottom:clamp(32px,4vw,48px);
}
.sec__title{font-size:clamp(32px,5.2vw,72px);line-height:.95;letter-spacing:-.04em;font-weight:500;font-style:italic}
.sec__title b{font-weight:900}
.sec__title .thin{font-weight:300}
.sec__meta{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
@media (max-width:780px){
  .sec__head{grid-template-columns:1fr;gap:10px;margin-bottom:28px}
  .sec__title{font-size:clamp(30px,8vw,52px)}
}
@media (max-width:480px){
  .sec__head{margin-bottom:24px}
}

/* ============ Font generator ============ */
.gen{display:flex;flex-direction:column;gap:22px}
.gen__inputBox{
  position:relative;
  border:1px solid var(--rule-d);border-radius:var(--r-md);
  background:var(--ink-2);padding:18px 18px 14px;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.gen__inputBox:focus-within{border-color:var(--olive);box-shadow:0 0 0 3px rgba(204,211,118,.12)}
.gen__inputBox .label{display:block;margin-bottom:10px}
.gen__input{
  width:100%;background:transparent;border:0;outline:none;resize:vertical;
  font-family:'Inter Tight',sans-serif;font-size:clamp(20px,3vw,28px);
  font-weight:500;line-height:1.3;letter-spacing:-.01em;
  color:var(--bone);min-height:64px;
}
.gen__input::placeholder{color:var(--bone);opacity:.4;font-style:italic}
.gen__inputActions{
  display:flex;gap:10px;align-items:center;
  margin-top:12px;padding-top:12px;border-top:1px dashed var(--rule);
  flex-wrap:wrap;
}
.gen__action{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:8px 13px;min-height:34px;border:1px solid var(--ghost);border-radius:999px;
  background:transparent;color:var(--fg);font-weight:500;
  transition:background .26s var(--ease),color .26s var(--ease),border-color .26s var(--ease);
}
@media (hover:hover){.gen__action:hover:not([disabled]){background:var(--fg);border-color:var(--fg);color:var(--bg)}}
.gen__counter{margin-left:auto;font-size:11px;letter-spacing:.12em;color:var(--fg-3)}

.gen__hint{font-size:11px;letter-spacing:.04em;color:var(--fg-3);text-align:center}

.gen__list{display:grid;border-top:1px solid var(--rule-d)}
.gen__item{
  display:grid;grid-template-columns:150px 1fr auto;gap:18px;align-items:center;
  padding:18px 4px;border-bottom:1px solid var(--rule-d);color:var(--bone);
  cursor:pointer;text-align:left;width:100%;
  transition:color .3s var(--ease);
  position:relative;isolation:isolate;
}
.gen__item > *{transition:transform .42s var(--ease-out),color .26s var(--ease)}
/* Same olive wash as the directory rows. */
.gen__item::before{
  content:"";position:absolute;left:-14px;right:-14px;top:0;bottom:0;z-index:-1;
  background:var(--olive);transform:scaleX(0);transform-origin:left;
  transition:transform .46s var(--ease-out);
}
.gen__item:active{transform:scale(.995)}
.gen__name{
  font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--bone-3);font-weight:500;
  transition:color .26s var(--ease);
}
.gen__output{
  font-size:clamp(18px,2.4vw,26px);
  line-height:1.35;
  word-break:break-word;
  overflow-wrap:anywhere;
  letter-spacing:0;
  font-feature-settings:normal;
}
.gen__copy{
  font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;
  padding:8px 13px;border:1px solid var(--ghost);border-radius:999px;
  display:inline-flex;align-items:center;gap:8px;color:var(--bone);font-weight:500;
  white-space:nowrap;
  transition:background .26s var(--ease),color .26s var(--ease),border-color .26s var(--ease);
}
.gen__copy svg{width:12px;height:12px}
@media (hover:hover) and (pointer:fine){
  .gen__item:hover{color:var(--ink)}
  .gen__item:hover > *{transform:translate3d(14px,0,0)}
  .gen__item:hover::before{transform:scaleX(1)}
  .gen__item:hover .gen__name{color:rgba(10,10,10,.62)}
  .gen__item:hover .gen__copy{background:var(--ink);border-color:var(--ink);color:var(--olive)}
}
.gen__item.is-copied{color:var(--ink)}
.gen__item.is-copied::before{transform:scaleX(1)}
.gen__item.is-copied .gen__name,.gen__item.is-copied .gen__copy{color:var(--ink);border-color:var(--ink);background:transparent}
.gen__item.is-copied .gen__copy::before{content:"✓ "}

@media (max-width:760px){
  .gen__item{grid-template-columns:1fr;gap:8px;padding:16px 2px}
  .gen__copy{justify-self:flex-start}
}
@media (max-width:480px){
  .gen__inputBox{padding:14px 14px 12px}
  .gen__input{font-size:18px}
  .gen__item{padding:14px 2px}
  .gen__output{font-size:18px}
}

/* ============ Emoji + symbol pickers ============ */
.emoji{display:flex;flex-direction:column;gap:18px}
.emoji__searchRow{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.emoji__searchBox{
  position:relative;display:flex;align-items:center;gap:10px;
  background:var(--ink-2);border:1px solid var(--rule-d);
  border-radius:999px;padding:10px 16px 10px 18px;width:min(560px,100%);
  transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
}
.emoji__searchBox:focus-within{border-color:var(--olive);box-shadow:0 0 0 3px rgba(204,211,118,.12)}
.emoji__searchIcon{width:18px;height:18px;color:var(--bone-3);flex-shrink:0}
.emoji__search{
  flex:1;min-width:0;background:transparent;border:0;outline:none;
  color:var(--bone);font-size:14px;padding:6px 0;
}
.emoji__search::placeholder{color:var(--bone);opacity:.5;font-style:italic}
.emoji__clear{
  position:relative;flex-shrink:0;
  width:28px;height:28px;border-radius:50%;
  background:transparent;color:var(--bone-2);
  font-size:18px;display:grid;place-items:center;
  -webkit-tap-highlight-color:transparent;
  transition:background .3s var(--ease),color .3s var(--ease);
}
/* Keeps the visual size while giving the finger a 48px target. */
.emoji__clear::before{content:"";position:absolute;inset:-10px;border-radius:50%}

/* ---- skin tone ---- */
.tone{
  display:flex;align-items:center;gap:2px;
  padding:4px;border:1px solid var(--rule-d);border-radius:999px;
}
.tone:empty{display:none}
.tone__btn{
  width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;font-size:17px;line-height:1;
  -webkit-tap-highlight-color:transparent;
  transition:background .25s var(--ease),transform .25s var(--ease);
}
.tone__btn.is-on{background:var(--olive)}
.tone__btn:active{transform:scale(.92)}

/* ---- category pills ---- */
.emoji__tabs{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:6px}
.emoji__tab{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;min-height:40px;border-radius:999px;
  border:1px solid var(--rule-d);
  background:rgba(250,250,247,.03);color:var(--bone-2);
  font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;font-weight:500;
  white-space:nowrap;-webkit-tap-highlight-color:transparent;
  transition:background .26s var(--ease),color .26s var(--ease),border-color .26s var(--ease),transform 160ms var(--ease-out);
}
.emoji__tab:active{transform:scale(.96)}
.emoji__tab .ico{font-family:'Inter Tight',sans-serif;font-size:14px;letter-spacing:0}
.emoji__tab.is-on{background:var(--olive);color:var(--ink);border-color:var(--olive)}

/* ---- grid ---- */
/* One fluid ramp instead of a breakpoint: the old 540px rule made tiles jump
   from 9 columns of 51px to 7 columns of 66px as the viewport grew by 1px. */
.emoji__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(clamp(46px,7vw,58px),1fr));
  gap:clamp(5px,.8vw,6px);
}
.emoji__btn{
  aspect-ratio:1;display:grid;place-items:center;
  background:rgba(250,250,247,.03);
  border:1px solid rgba(250,250,247,.08);
  border-radius:var(--r-sm);color:var(--bone);
  font-size:clamp(24px,4.6vw,30px);line-height:1;
  transition:background .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease-out),color .22s var(--ease);
  position:relative;
  -webkit-tap-highlight-color:transparent;
}
.emoji__btn:active{transform:scale(.94)}
.emoji__btn.is-copied{background:var(--olive);border-color:var(--olive);color:var(--ink);transform:scale(.94)}
.emoji__btn.is-copied::after{
  content:"✓";position:absolute;inset:0;display:grid;place-items:center;
  font-size:18px;color:var(--ink);font-weight:700;
}
.emoji__empty{
  padding:40px 0;text-align:center;
  font-size:11px;letter-spacing:.04em;
  color:var(--bone-3);
}
#symGrid .emoji__btn{font-size:clamp(19px,3.4vw,24px)}

/* Hover effects only where a pointer can actually hover - on touch they used
   to fire on tap and stay stuck until the next tap elsewhere. */
@media (hover:hover) and (pointer:fine){
  .emoji__clear:hover{background:var(--olive);color:var(--ink)}
  .emoji__tab:hover{color:var(--bone);border-color:var(--ghost)}
  .tone__btn:hover{background:rgba(204,211,118,.2)}
  .emoji__btn:hover{
    background:var(--olive);border-color:var(--olive);color:var(--ink);
    transform:translateY(-2px) scale(1.05);
    box-shadow:0 12px 26px -10px rgba(0,0,0,.6);
    z-index:1;
  }
}

/* Category pills scroll sideways on phones instead of wrapping into a block
   that pushed the grid below the fold. Touch sizing is keyed on both the
   input device and the viewport: pointer:coarse is the honest signal but is
   missing or wrong on some hybrids, and the iOS zoom-on-focus threshold
   applies regardless of what the device reports. */
@media (pointer:coarse),(max-width:900px){
  .emoji__search{font-size:16px}   /* below 16px iOS Safari zooms on focus */
  .emoji__tab{min-height:44px}
  .tone__btn{width:44px;height:44px;font-size:19px}
}
@media (max-width:900px){
  .emoji__tabs{
    flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;scrollbar-width:none;
    margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);
  }
  .emoji__tabs::-webkit-scrollbar{display:none}
  .emoji__tab{flex:0 0 auto;scroll-snap-align:start}
}
@media (max-width:560px){
  .emoji__searchBox{width:100%}
  .tone{width:100%;justify-content:space-between}
}

/* ============ Platform counter (paper chapter) ============ */
.counter{margin-top:14px;padding-top:14px;border-top:1px dashed var(--rule)}
.counter__head{
  display:block;font-size:11px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3);
  margin-bottom:10px;
}
.counter__list{display:flex;flex-wrap:wrap;gap:6px}
.counter__pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:6px 12px;border-radius:999px;
  border:1px solid rgba(10,10,10,.2);background:#fff;
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.counter__pill .name{letter-spacing:.12em;text-transform:uppercase;font-size:11px;color:rgba(10,10,10,.6);font-weight:500}
.counter__pill .bar{width:42px;height:4px;border-radius:2px;background:rgba(10,10,10,.1);position:relative;overflow:hidden}
.counter__pill .bar::before{
  content:'';position:absolute;inset:0;
  background:var(--ink);transform:scaleX(var(--s,0));transform-origin:left;
  transition:transform .25s var(--ease),background .25s var(--ease);
}
.counter__pill .num{color:var(--ink);letter-spacing:0}
.counter__pill.is-warn{border-color:#b08416;background:#fdf8ea}
.counter__pill.is-warn .bar::before{background:#b08416}
.counter__pill.is-over{border-color:#a83232;background:#fbeeee}
.counter__pill.is-over .bar::before{background:#a83232}
.counter__pill.is-over .num{color:#a83232;font-weight:700}
@media (max-width:480px){
  .counter{margin-top:12px;padding-top:12px}
  .counter__pill{padding:5px 10px;gap:8px}
  .counter__pill .bar{width:32px}
}

/* ============ Text generator (presets + editor) ============ */
.tx{display:flex;flex-direction:column;gap:18px}
.tx__intro{font-size:15px;line-height:1.6;max-width:74ch;color:var(--fg-2)}
.tx__intro b{color:var(--fg);font-weight:700}
.tx__presetsHead .label{display:block;margin-bottom:-4px}
.tx__presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 18px}
@media (max-width:900px){.tx__presets{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tx__preset{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  padding:16px 14px 18px;border-top:1px solid rgba(10,10,10,.18);color:var(--ink);
  cursor:pointer;text-align:left;width:100%;position:relative;isolation:isolate;
  transition:color .3s var(--ease);
}
/* Ink wash from the left, the paper twin of the directory's olive one. */
.tx__preset::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .46s var(--ease-out);
}
.tx__preset.is-on::before{transform:scaleX(1)}
.tx__preset:active{transform:scale(.985)}
.tx__preset.is-on{color:var(--bone)}
.tx__preset-name{font-style:italic;font-weight:700;font-size:clamp(15px,2vw,18px);letter-spacing:-.012em;line-height:1.2}
.tx__preset-meta{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.62;line-height:1.4}
.tx__preset.is-on .tx__preset-meta{opacity:.85}
.tx__preset-tag{
  align-self:flex-end;margin-top:8px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;
  border:1px solid currentColor;opacity:.72;font-weight:500;
  transition:opacity .25s var(--ease),background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.tx__preset.is-on .tx__preset-tag{opacity:1;background:var(--olive);color:var(--ink);border-color:var(--olive)}
@media (hover:hover) and (pointer:fine){
  .tx__preset:hover{border-top-color:var(--ink)}
  .tx__preset:not(.is-on):hover::before{transform:scaleX(.012)}
  .tx__preset:hover .tx__preset-tag{opacity:1}
}
@media (max-width:600px){
  .tx__presets{grid-template-columns:1fr;gap:0}
}
@media (max-width:480px){.tx__preset{padding:14px 16px}}

.tx__editor{display:flex;flex-direction:column;gap:8px;margin-top:6px}
/* Writing surfaces on paper: white sheets with a hairline, ink when focused. */
.tx__area,.brk__area{
  width:100%;resize:vertical;outline:none;
  background:#fff;color:var(--ink);
  border:1px solid rgba(10,10,10,.22);border-radius:var(--r-md);
  font-family:'JetBrains Mono',monospace;line-height:1.65;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.tx__area:focus,.brk__area:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(204,211,118,.55)}
.tx__area::placeholder,.brk__area::placeholder{color:rgba(10,10,10,.5);font-style:italic}
.tx__area{min-height:240px;padding:18px 22px;font-size:14px;white-space:pre-wrap}
.tx__actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:6px}
.tx__counter{margin-left:auto;font-size:11px;letter-spacing:.12em;color:var(--fg-3)}
@media (max-width:600px){
  .tx__area{min-height:200px;padding:14px 16px;font-size:16px;line-height:1.55}
  .tx__actions{gap:8px}
  .tx__actions .btn{padding:14px 20px;flex:1 1 auto;justify-content:center}
  .tx__counter{flex-basis:100%;text-align:right;margin-left:0;margin-top:4px}
}

/* ============ Line breaker ============ */
.brk{display:flex;flex-direction:column;gap:18px}
.brk__intro{font-size:15px;line-height:1.6;max-width:74ch;color:var(--fg-2)}
.brk__intro b{font-weight:700;color:var(--fg)}
.brk__io{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.brk__col{display:flex;flex-direction:column;gap:8px}
.brk__col .label{display:block}
.brk__area{min-height:180px;padding:16px 18px;font-size:13.5px;line-height:1.6}
.brk__area--out{background:var(--paper-2)}
.brk__actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.brk__actions .btn{padding:14px 22px}

.brk__chips{
  margin-top:10px;padding-top:18px;border-top:1px dashed var(--rule);
  display:flex;flex-direction:column;gap:10px;
}
.brk__chips .label{display:block}
.brk__chipRow{display:flex;flex-wrap:wrap;gap:8px}
.brk__chip{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 16px;min-height:44px;border-radius:999px;
  background:#fff;border:1px solid rgba(10,10,10,.18);color:var(--ink);
  cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform 160ms var(--ease-out);
}
.brk__chip:active{transform:scale(.97)}
.brk__chip.is-copied{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.brk__chip-name{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.brk__chip-meta{font-family:'JetBrains Mono',monospace;font-size:11px;color:rgba(10,10,10,.58);letter-spacing:.04em;transition:color .25s var(--ease)}
.brk__chip.is-copied .brk__chip-meta{color:var(--olive)}
@media (hover:hover) and (pointer:fine){
  .brk__chip:hover{background:var(--ink);color:var(--bone);border-color:var(--ink);transform:translateY(-2px)}
  .brk__chip:hover .brk__chip-meta{color:var(--olive)}
}
@media (max-width:760px){
  .brk__io{grid-template-columns:1fr;gap:18px}
  .brk__area{min-height:160px;padding:14px 16px;font-size:16px}
  .brk__actions{flex-direction:column;align-items:stretch}
  .brk__actions .btn{width:100%;justify-content:center}
  .brk__chip{padding:8px 14px;gap:8px}
}

/* ============ Tool components ============
   Shared by every tool page: a stage (drop zone or preview) beside a panel
   of settings, then the output. Grown out of the image splitter. */
.tool [hidden]{display:none !important}
.tool__body{display:flex;flex-direction:column;gap:22px}
.tool__work{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:18px;align-items:start}

.tool__stage{min-width:0;display:flex;flex-direction:column;gap:10px}
@media (min-width:981px){.tool__stage{position:sticky;top:96px}}

.drop{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  min-height:clamp(260px,34vw,420px);padding:28px 20px;text-align:center;cursor:pointer;
  border:1px dashed rgba(250,250,247,.28);border-radius:var(--r-sm);color:var(--fg-2);
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.drop:hover,.tool__stage.is-over .drop{border-color:var(--olive);background:rgba(204,211,118,.05)}
.drop:has(input:focus-visible){outline:2px solid var(--olive);outline-offset:3px}
.drop__icon{width:52px;height:52px;fill:none;stroke:var(--olive);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.drop__title{font-size:clamp(17px,1.8vw,21px);font-weight:500;font-style:italic;letter-spacing:-.01em;color:var(--fg)}
.drop__title u{text-decoration-color:var(--olive);text-decoration-thickness:1px;text-underline-offset:4px}
/* A mouse drags and drops; a finger just taps "Wybierz …". */
.drop__touch{display:none}
@media (hover:none) and (pointer:coarse){.drop__mouse{display:none}.drop__touch{display:inline}}
/* Hints read as short sentences or format lists, so no capitals forced on them. */
.drop__hint{font-size:11px;letter-spacing:.06em;color:var(--fg-3)}

.tool__view{display:flex;flex-direction:column;align-items:center;gap:10px}
/* touch-action:none so a finger on the preview moves the photo, not the page. */
.tool__canvas{
  display:block;max-width:100%;border-radius:var(--r-xs);cursor:grab;touch-action:none;
  background:repeating-conic-gradient(var(--ink-3) 0 25%,var(--ink-2) 0 50%) 0 0/16px 16px;
}
.tool__canvas.is-drag{cursor:grabbing}
/* Hints are instructions, so they stay in sentence case; caps are for short labels. */
.tool__hint{font-size:11px;letter-spacing:.04em;color:var(--fg-3)}
/* Status lines are sentences: body type, not mono. */
.tool__status,.tool__status.mono{min-height:1.5em;font-family:'Inter Tight','Inter',system-ui,sans-serif;font-size:14px;line-height:1.5;letter-spacing:0;color:var(--fg-2);text-align:center}

/* Settings sit beside the stage behind one hairline, not in a box. */
.tool__panel{
  display:flex;flex-direction:column;gap:22px;
  padding:4px 0 4px clamp(20px,2.4vw,36px);border-left:1px solid var(--rule);
}
@media (max-width:980px){.tool__panel{padding:24px 0 0;border-left:0;border-top:1px solid var(--rule)}}
.set{border:0;min-width:0}
.set legend{padding:0}
.pills,.swatches{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}
.pill{position:relative;cursor:pointer}
.pill input,.swatch input{position:absolute;inset:0;margin:0;opacity:0;pointer-events:none}
.pill > span{
  display:inline-flex;align-items:center;gap:6px;padding:9px 13px;min-height:40px;border-radius:999px;
  border:1px solid var(--rule-d);background:rgba(250,250,247,.03);color:var(--fg-2);
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  transition:background .26s var(--ease),color .26s var(--ease),border-color .26s var(--ease),transform 160ms var(--ease-out);
}
.pill small{font-size:11px;letter-spacing:.06em;text-transform:none;opacity:.7}
.pill:hover > span{border-color:var(--ghost);color:var(--fg)}
.pill:active > span{transform:scale(.96)}
.pill input:checked + span{background:var(--olive);border-color:var(--olive);color:var(--ink)}
.pill input:focus-visible + span{outline:2px solid var(--olive);outline-offset:3px}

.range{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 12px}
.range input{grid-column:1/-1}
.val{font-size:12px;letter-spacing:.04em;color:var(--olive)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
/* --p is the filled share of the track, set by LB.syncRanges(). */
.tool input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer}
.tool input[type="range"]::-webkit-slider-runnable-track{
  height:2px;border-radius:2px;
  background:linear-gradient(to right,var(--olive) var(--p,0%),rgba(250,250,247,.18) var(--p,0%));
}
.tool input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;margin-top:-8px;border-radius:50%;
  background:var(--bone);border:4px solid var(--olive);box-shadow:0 0 0 3px var(--ink-2);
  transition:transform .2s var(--ease-out);
}
.tool input[type="range"]:active::-webkit-slider-thumb{transform:scale(1.15)}
.tool input[type="range"]::-moz-range-track{height:2px;border-radius:2px;background:rgba(250,250,247,.18)}
.tool input[type="range"]::-moz-range-progress{height:2px;border-radius:2px;background:var(--olive)}
.tool input[type="range"]::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:var(--bone);border:4px solid var(--olive)}

.swatches{align-items:center;gap:10px}
.swatch{
  position:relative;width:34px;height:34px;border-radius:50%;cursor:pointer;
  background:var(--sw);border:1px solid rgba(250,250,247,.25);
  transition:box-shadow .2s var(--ease),transform 160ms var(--ease-out);
}
.swatch:active{transform:scale(.92)}
.swatch:has(input:checked){box-shadow:0 0 0 3px var(--ink-2),0 0 0 5px var(--olive)}
.swatch:has(input:focus-visible){outline:2px solid var(--olive);outline-offset:7px}
.swatch-custom{
  display:inline-flex;align-items:center;gap:8px;padding:4px 14px 4px 4px;min-height:40px;cursor:pointer;
  border:1px solid var(--rule-d);border-radius:999px;transition:border-color .2s var(--ease);
}
/* Lit when the picker, not a swatch, holds the colour. */
.swatches:not(:has(input[type="radio"]:checked)) .swatch-custom{border-color:var(--olive)}
.swatch-custom span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2)}
.swatch-custom input{width:30px;height:30px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
.swatch-custom input::-webkit-color-swatch-wrapper{padding:0}
.swatch-custom input::-webkit-color-swatch{border:1px solid rgba(250,250,247,.3);border-radius:50%}
.swatch-custom input::-moz-color-swatch{border:1px solid rgba(250,250,247,.3);border-radius:50%}

.tool__out{display:flex;flex-direction:column;gap:16px;padding-top:22px;border-top:1px dashed var(--rule)}
.tool__outHead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.tool__meta{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}
.tool__actions{display:flex;flex-wrap:wrap;gap:10px}
.tool__actions .btn{padding:14px 22px}
.tool__actions .btn[disabled]{opacity:.6;cursor:progress;transform:none}
.tool__note{font-size:14px;line-height:1.55;max-width:74ch;color:var(--fg-2)}
.tool__note::before{content:"↳ ";color:var(--olive)}
.tiles{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.tile{position:relative;display:flex;flex-direction:column;gap:8px}
.tile canvas{display:block;width:100%;height:auto;border-radius:var(--r-xs)}
.tile__num{
  position:absolute;top:8px;left:8px;padding:3px 8px;border-radius:999px;
  background:rgba(10,10,10,.78);color:var(--olive);font-size:11px;letter-spacing:.06em;
}
.tile .gen__action{width:100%;text-align:center}
@media (max-width:980px){.tool__work{grid-template-columns:1fr}}
/* On a phone the result and its download come straight after the preview;
   the settings follow for anyone who wants to change something. */
@media (max-width:980px){
  .tool__body > .tool__work{display:contents}
  .tool__body > .tool__work > .tool__stage{order:1}
  .tool__body > .tool__out{order:2}
  .tool__body > .tool__work > .tool__panel{order:3}
}
.tool__view .tool__hint{text-align:center}
@media (max-width:560px){
  .drop{min-height:220px}
  .tool__actions{width:100%}
  .tool__actions .btn{flex:1 1 auto;justify-content:center}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ============ FAQ - hairline accordion ============ */
.faq{display:flex;flex-direction:column;min-width:0;border-top:1px solid var(--rule-d)}
.faq__item{border-bottom:1px solid var(--rule-d);transition:border-color .3s var(--ease)}
.faq__item summary{
  list-style:none;cursor:pointer;position:relative;
  display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;
  padding:clamp(18px,2vw,24px) 0;font-size:clamp(17px,2vw,22px);
  font-weight:500;font-style:italic;letter-spacing:-.012em;
  transition:color .3s var(--ease);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__n{font-style:normal;font-size:11px;letter-spacing:.18em;color:var(--fg-3);font-weight:500;transition:color .3s var(--ease)}
.faq__item[open] .faq__n{color:var(--olive)}
.faq__plus{
  font-family:'JetBrains Mono',monospace;font-size:20px;font-weight:300;
  width:30px;height:30px;border-radius:50%;border:1px solid var(--ghost);
  display:grid;place-items:center;line-height:1;
  transition:transform .35s var(--ease),color .26s var(--ease),border-color .26s var(--ease),background .26s var(--ease);
}
.faq__item[open] .faq__plus{transform:rotate(45deg);color:var(--ink);background:var(--olive);border-color:var(--olive)}
.faq__body{padding:0 56px 24px 56px;font-size:15px;line-height:1.65;font-style:normal;font-weight:400;color:var(--fg-2)}
.faq__body p{max-width:70ch}
.faq__item[open] .faq__body{animation:lbIn .45s var(--ease-out) both}
@media (hover:hover) and (pointer:fine){
  .faq__item summary:hover .faq__plus{border-color:var(--olive);color:var(--olive)}
  .faq__item[open] summary:hover .faq__plus{color:var(--ink)}
}
@media (max-width:560px){
  .faq__item summary{grid-template-columns:32px 1fr auto;gap:10px}
  .faq__body{padding:0 0 22px 42px}
}

/* ============ More settings ============ */
/* Advanced options fold away under one quiet line, so a tool shows only what
   most people need. <details class="more"><summary>Więcej ustawień</summary>
   <div class="more__body">…</div></details> */
.more{border-top:1px solid var(--rule)}
.more > summary{
  display:flex;align-items:center;justify-content:flex-start;gap:12px;
  padding:14px 0;cursor:pointer;list-style:none;
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2);
  transition:color .25s var(--ease);
}
.more > summary::-webkit-details-marker{display:none}
.more > summary::after{
  content:"";width:8px;height:8px;margin-right:4px;flex:none;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--ease-out);
}
.more[open] > summary::after{transform:translateY(2px) rotate(-135deg)}
.more > summary:hover{color:var(--fg)}
.more__body{display:flex;flex-direction:column;gap:22px;padding:6px 0 18px}

/* ============ CTA - the site hero's still, once more ============ */
.cta{
  padding:var(--pad-y-tight) var(--pad) calc(var(--pad-y-tight) + 10px);
  background:var(--ink);color:var(--bone);text-align:center;
  position:relative;overflow:hidden;isolation:isolate;
  min-height:clamp(340px,52svh,560px);
  display:flex;flex-direction:column;justify-content:center;
}
.cta__shade{
  position:absolute;inset:0;
  background:
    repeating-linear-gradient(to bottom,rgba(0,0,0,.2) 0 1px,transparent 1px 3px),
    radial-gradient(ellipse 75% 65% at 50% 50%,rgba(10,10,10,.76) 0%,rgba(10,10,10,.92) 100%),
    linear-gradient(to bottom,var(--ink) 0%,rgba(10,10,10,0) 24%,rgba(10,10,10,0) 70%,var(--ink) 100%);
}
.cta__headline{
  font-size:clamp(38px,6.2vw,100px);line-height:.92;letter-spacing:-.045em;
  font-weight:500;font-style:italic;max-width:1100px;margin:0 auto;
}
.cta__headline .thin{font-weight:300}
.cta__headline .fat{font-weight:900}
.cta__actions{display:flex;gap:14px;justify-content:center;margin-top:36px;flex-wrap:wrap}
/* On a phone the closing line is short; a tall field around it reads as a gap. */
@media (max-width:560px){.cta{min-height:clamp(300px,46svh,460px)}}

/* ============ Footer ============ */
.footer{background:var(--ink);color:var(--bone);padding:var(--pad-y-tight) var(--pad) 30px;position:relative;overflow:hidden}
.footer::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;
  background:radial-gradient(900px 420px at 50% 115%, rgba(204,211,118,.13), transparent 65%);
}
.footer > *{position:relative}
.footer__grid{
  display:grid;grid-template-columns:2fr 1.2fr 1.2fr 1fr;gap:18px;
  padding-bottom:40px;border-bottom:1px solid var(--rule-d);
}
.fcell h2,.fcell h3{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--olive);opacity:.85;margin-bottom:14px}
.fcell p,.fcell a,.fcell .as-link{
  font-size:clamp(15px,1.6vw,19px);line-height:1.4;letter-spacing:-.018em;
  font-style:italic;font-weight:500;display:block;cursor:pointer;
  transition:color .26s var(--ease);
}
.fcell a:hover,.fcell .as-link:hover{color:var(--olive)}
.fcell small{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--bone-3);font-style:normal;font-weight:400;letter-spacing:.08em;margin-top:8px;display:block}
.fcell__unit{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;opacity:.6;font-style:normal;font-weight:500;text-transform:uppercase;display:inline-block;margin-bottom:4px}
.fcell .stack{display:flex;flex-direction:column;gap:8px}
.fcell .row{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.fcell .row a,.fcell .row button{
  font-family:'JetBrains Mono',monospace;font-style:normal;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;
  padding:9px 15px;border-radius:999px;border:1px solid var(--ghost);
  color:inherit;font-weight:500;display:inline-block;line-height:1;
  transition:background .26s var(--ease),color .26s var(--ease),border-color .26s var(--ease);
}
.fcell .row a:hover,.fcell .row button:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.fcell .ext{display:inline-block;vertical-align:-.08em;margin-left:.15em}
.fcell .ext svg{width:.82em;height:.82em;display:block;transition:transform .3s var(--ease)}
.fcell a:hover .ext svg{transform:translate(2px,-2px)}
/* The grid's own bottom rule already separates this line. */
/* SEO band: every tool by category and the agency behind them. */
.footer__seo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.6fr);gap:clamp(28px,4.5vw,72px);padding:36px 0 38px;border-bottom:1px solid var(--rule-d)}
.footer__lead{display:flex;flex-direction:column;gap:32px;align-items:flex-start}
.footer__about{max-width:46ch;font-size:15px;line-height:1.65;color:var(--bone-2)}
.footer__map{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
/* The hub has no map here: its index already lists every tool. */
.footer__seo--solo{grid-template-columns:1fr}
/* On desktop its two parts stand on the contact grid above: the text under
   E-mail, the agency list under Adres. */
@media (min-width:1001px){
  .footer__seo--solo .footer__lead{display:grid;grid-template-columns:2fr 1.2fr 1.2fr 1fr;gap:18px;align-items:start}
}
.fmap h2{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--olive);opacity:.85;margin-bottom:14px}
.fmap ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.fmap li{font-size:14px;line-height:1.45}
.fmap a{color:var(--bone-2);transition:color .25s var(--ease)}
.fmap a:hover{color:var(--olive)}
.fmap__all{color:var(--bone) !important}
@media (max-width:1180px){.footer__seo{grid-template-columns:1fr}.footer__map{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){
  .footer__map{grid-template-columns:1fr;gap:26px}
  .footer__seo,.footer__about{text-align:center;margin-left:auto;margin-right:auto}
  .footer__lead{align-items:center;gap:26px}
}
.footer__bot{padding-top:22px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;color:var(--bone-3)}

@media (max-width:1000px){.footer__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){
  .footer__grid{grid-template-columns:1fr;gap:28px}
  .fcell p,.fcell a,.fcell .as-link{font-size:16px}
  /* One column on phones, on the centre line like the CTA above. */
  .footer__grid,.footer__bot{text-align:center}
  .fcell .as-link{text-align:center;width:100%}
  .fcell .stack{align-items:center}
  .fcell .row{justify-content:center}
  /* Clear the fixed go-to-top ring. */
  .footer{padding-bottom:88px}
}
@media (hover:none){
  .fcell a,.fcell .as-link{padding:9px 0;margin:-4px 0}
}

/* ============ Floating go-to-top ============
   Just the arrow in a ring. It drifts up while idle; on hover it leaves
   through the top and comes back in from below. */
.gotop{
  position:fixed;bottom:24px;right:24px;z-index:90;width:46px;height:46px;
  display:grid;place-items:center;border-radius:50%;overflow:hidden;
  background:rgba(10,10,10,.82);color:var(--bone);border:1px solid var(--rule-d);cursor:pointer;
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .4s var(--ease),transform .4s var(--ease),bottom .42s var(--ease),background .26s var(--ease),border-color .26s var(--ease),color .26s var(--ease);
}
.gotop.is-visible{opacity:1;transform:none;pointer-events:auto}
.gotop:active{transform:scale(.94)}
.gotop__arrow{width:18px;height:18px;animation:gotopDrift 2.6s var(--ease) infinite}
@keyframes gotopDrift{0%,100%{transform:translateY(2px)}50%{transform:translateY(-3px)}}
@keyframes gotopLoop{
  0%  {transform:translateY(0)}
  42% {transform:translateY(-190%)}
  43% {transform:translateY(190%)}
  100%{transform:translateY(0)}
}
@media (hover:hover) and (pointer:fine){
  .gotop:hover{background:var(--olive);border-color:var(--olive);color:var(--ink)}
  .gotop:hover .gotop__arrow{animation:gotopLoop .6s var(--ease) 1}
}
@media (max-width:640px){.gotop{bottom:16px;right:16px;width:44px;height:44px}}

/* ============ Modals ============ */
.modal{
  position:fixed;inset:0;z-index:1200;
  display:grid;place-items:center;padding:20px;
  opacity:0;pointer-events:none;
  transition:opacity .4s var(--ease);
}
.modal.is-open{opacity:1;pointer-events:auto}
.modal__overlay{position:absolute;inset:0;background:rgba(5,5,5,.86)}
.modal__panel{
  position:relative;max-width:min(94vw,920px);width:100%;
  max-height:92vh;overflow:auto;color:var(--bone);
  background:radial-gradient(640px 220px at 88% -40px,rgba(204,211,118,.11),transparent 70%),var(--ink-2);
  border:1px solid var(--rule-d);border-radius:var(--r-lg);
  padding:32px clamp(24px,3vw,40px);
  transform:translateY(40px) scale(.97);transition:transform .42s var(--ease-out);
  box-shadow:0 40px 90px -28px rgba(0,0,0,.62);
  scrollbar-width:thin;scrollbar-color:rgba(204,211,118,.55) var(--ink-2);
}
.modal__panel::-webkit-scrollbar{width:10px;height:10px}
.modal__panel::-webkit-scrollbar-track{background:var(--ink-2)}
.modal__panel::-webkit-scrollbar-thumb{background:rgba(204,211,118,.55);border:2px solid var(--ink-2)}
.modal.is-open .modal__panel{transform:none}
.modal__close{
  position:absolute;top:18px;right:18px;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--ghost);background:transparent;color:var(--bone);
  display:grid;place-items:center;z-index:2;
  transition:background .26s var(--ease),color .26s var(--ease),border-color .26s var(--ease),transform .3s var(--ease);
}
.modal__close:hover{background:var(--bone);color:var(--ink);border-color:var(--bone);transform:rotate(90deg)}
.modal__close svg{width:16px;height:16px}
.modal__head{padding-right:44px;margin-bottom:28px}
.modal__title{font-size:clamp(28px,5vw,48px);line-height:.95;letter-spacing:-.04em;font-style:italic;font-weight:500}
.modal__title b{font-weight:900}
.modal__title .thin{font-weight:300}
.modal__sub{margin-top:12px;font-size:15px;color:var(--bone-2);max-width:none;line-height:1.55}
/* Phones: a card floating in the middle, not a sheet filling the screen. */
@media (max-width:640px){
  .modal{padding:20px}
  .modal__panel{padding:22px 18px 20px;border-radius:var(--r-md);max-height:84vh;max-height:84svh}
  .modal__close{top:14px;right:14px;width:34px;height:34px}
  .modal__head{margin-bottom:16px;padding-right:40px}
  .modal__title{font-size:clamp(24px,7vw,30px)}
  .modal__sub{font-size:13px;margin-top:8px}
  .form{gap:18px}
  .form__section{gap:10px}
  .field input,.field textarea{padding:11px 13px;font-size:16px}  /* below 16px iOS zooms in */
  .field textarea{min-height:88px}
  .check{padding:10px 12px}
}

/* ============ Brief form ============ */
.form{display:flex;flex-direction:column;gap:28px}
.form__section{display:flex;flex-direction:column;gap:14px}
.form__section-title{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-2);display:flex;align-items:center;gap:12px}
.form__section-title::before{content:"";width:20px;height:1px;background:var(--olive)}
.form__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.form__grid--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:760px){.form__grid,.form__grid--2{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-2)}
.field input,.field select,.field textarea{
  padding:14px 16px;border-radius:var(--r-sm);
  background:var(--ink);border:1px solid rgba(250,250,247,.14);
  color:var(--bone);outline:none;
  transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
  font-size:15px;font-family:inherit;
}
.field input::placeholder,.field textarea::placeholder{color:var(--bone);opacity:.5;font-style:italic}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--olive);background-color:#070707}
/* One thin olive border on focus, not a ring around a box that has an edge. */
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:none}
.field textarea{min-height:110px;resize:vertical;line-height:1.55}
.field select{
  cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1L6 6L11 1' stroke='%23ccd376' stroke-width='1.5' fill='none'/></svg>")!important;
  background-repeat:no-repeat;background-position:right 18px center;
  padding-right:38px;
}
.field select option{background:var(--ink);color:var(--bone)}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.check{
  position:relative;cursor:pointer;padding:12px 14px;border-radius:var(--r-sm);
  background:var(--ink);border:1px solid rgba(250,250,247,.14);
  font-size:14px;font-weight:500;display:flex;align-items:center;gap:10px;
  transition:background .26s var(--ease),color .26s var(--ease),border-color .26s var(--ease);
  color:var(--bone);
}
.check input{position:absolute;opacity:0;pointer-events:none}
.check__dot{width:14px;height:14px;border-radius:50%;border:1px solid rgba(250,250,247,.34);flex-shrink:0;transition:background .26s var(--ease),border-color .26s var(--ease);position:relative}
.check:hover{background:#070707;border-color:rgba(250,250,247,.3)}
.check.is-on{background:var(--olive);color:var(--ink);border-color:var(--olive)}
.check.is-on .check__dot{background:var(--ink);border-color:var(--ink)}
.check.is-on .check__dot::after{content:"";position:absolute;inset:3px;background:var(--olive);border-radius:50%}
.check{align-items:flex-start}
.check__dot{margin-top:2px}
.check__txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.check__hint{font-size:12.5px;font-weight:400;line-height:1.35;color:var(--bone-3)}
.check.is-on .check__hint{color:rgba(10,10,10,.62)}
.form__submit{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding-top:20px;border-top:1px solid var(--rule-d)}
.form__note{font-size:12.5px;color:var(--bone-3);max-width:420px;line-height:1.55}
.form__status{display:none;padding:28px;background:rgba(204,211,118,.07);border:1px solid rgba(204,211,118,.3);color:var(--bone);border-radius:var(--r-md);font-style:italic;font-size:18px;line-height:1.5}
.form__status.is-visible{display:block}
.form__status b{font-weight:900;display:block;font-size:22px;margin-bottom:8px;color:var(--olive)}
.form__submit .btn.is-loading{opacity:.6;pointer-events:none}
@media (max-width:640px){
  .form__submit{flex-direction:column;align-items:stretch}
  .form__submit .btn{justify-content:center}
}

/* ============ Location modal ============ */
.loc{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
@media (max-width:760px){.loc{grid-template-columns:1fr}}
.loc__info{display:flex;flex-direction:column;gap:16px}
.loc__unit{font-size:11px;letter-spacing:.2em;opacity:.7;display:block;margin-bottom:4px}
.loc__co{font-size:.7em;opacity:.65}
.loc__go{align-self:flex-start;margin-top:8px}
.form__grid--gap{margin-top:8px}
.loc__addr{font-size:clamp(17px,1.8vw,22px);line-height:1.4;letter-spacing:-.015em;font-style:italic}
.loc__meta{display:flex;flex-direction:column;gap:6px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--bone-3);padding-top:14px;border-top:1px solid var(--rule-d)}
.loc__meta strong{font-weight:500;letter-spacing:.18em;text-transform:uppercase;font-size:11px;color:var(--olive)}
.loc__map{position:relative;border-radius:var(--r-md);overflow:hidden;min-height:300px;border:1px solid var(--rule-d);background:var(--ink)}
.loc__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ============ Legal (privacy/cookies) - shell with link ============ */
.legal-shell{display:flex;flex-direction:column;gap:18px;font-size:14.5px;line-height:1.65;color:var(--bone-2)}
.legal-shell p{max-width:64ch}
.legal-shell strong{color:var(--bone)}
.legal-shell a:not(.btn){text-decoration:underline;text-underline-offset:3px}
.legal-shell a:not(.btn):hover{color:var(--olive)}
.legal-shell .co-info{padding:14px 16px;background:rgba(250,250,247,.04);border:1px solid var(--rule-d);border-radius:var(--r-sm);font-family:'JetBrains Mono',monospace;font-size:12.5px;line-height:1.7}
.legal-shell .co-info strong{font-weight:500}
.legal-shell .updated{margin-top:8px;padding-top:14px;border-top:1px solid var(--rule-d);font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--bone-3);letter-spacing:.06em;text-transform:uppercase}

/* prevent body scroll when any modal is open */
body.no-scroll{overflow:hidden}

/* ============ Counter limit animations ============ */
@keyframes counterPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(176,132,22,0)}
  50%{box-shadow:0 0 0 5px rgba(176,132,22,.18)}
}
@keyframes counterShake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-3px)}
  75%{transform:translateX(3px)}
}
@keyframes counterPing{
  0%{transform:scale(1)}
  30%{transform:scale(1.04)}
  100%{transform:scale(1)}
}
.counter__pill.is-warn{animation:counterPulse 1.6s ease-in-out infinite}
.counter__pill.is-over{animation:counterShake .35s ease-in-out 1, counterPing .25s ease-out 1}
.counter__pill.is-over .num::after{content:" ⚠";font-weight:700}

/* ============ Toast ============
   Bone on purpose: it has to read over ink and over paper alike. */
.toast{
  position:fixed;left:50%;bottom:32px;transform:translate(-50%, 20px);
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 20px;border-radius:999px;
  background:var(--bone);color:var(--ink);
  font-family:'JetBrains Mono',monospace;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  z-index:5000;pointer-events:none;
  max-width:min(calc(100vw - 32px),520px);
  opacity:0;transition:opacity .3s var(--ease),transform .35s var(--ease-out);
  box-shadow:0 16px 36px -12px rgba(0,0,0,.55);
}
.toast__txt{min-width:0;overflow-wrap:anywhere}
.toast.is-on{opacity:1;transform:translate(-50%, 0)}
.toast__check{
  width:22px;height:22px;flex-shrink:0;border-radius:50%;
  background:var(--olive);color:var(--ink);
  display:grid;place-items:center;
}
.toast__check svg{width:14px;height:14px}

/* ============ Pool tray ("zestaw") ============
   Fixed to the viewport. It publishes its own height as --tray-h so the
   toast, the go-to-top button and the two picker sections move out of its
   way instead of guessing. */
.tray{
  position:fixed;left:0;right:0;bottom:0;z-index:120;
  background:rgba(10,10,10,.94);color:var(--bone);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--rule-d);
  box-shadow:0 -18px 44px -26px rgba(0,0,0,.95);
  padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom));
  transform:translateY(101%);
  transition:transform .42s var(--ease);
}
.tray.is-on{transform:translateY(0)}
.tray.is-away{transform:translateY(101%);pointer-events:none}
.tray__inner{display:flex;align-items:center;gap:20px;max-width:1400px;margin:0 auto}
.tray__left{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:6px;position:relative}
.tray__chips{
  display:flex;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scrollbar-width:none;padding-bottom:2px;
}
.tray__chips::-webkit-scrollbar{display:none}
/* Fades the cut-off edge so a clipped chip reads as "there is more". */
.tray__left::after{
  content:"";position:absolute;top:0;right:0;width:28px;height:100%;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(10,10,10,0),var(--ink));
}
.tray__chip{
  flex:0 0 auto;scroll-snap-align:end;
  display:inline-flex;align-items:center;gap:7px;
  min-height:44px;padding:6px 12px;
  border:1px solid var(--rule-d);border-radius:999px;
  background:rgba(250,250,247,.04);
  -webkit-tap-highlight-color:transparent;
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.tray__chip:active{transform:scale(.94)}
.tray__chipGlyph{font-size:22px;line-height:1}
.tray__chipX{font-size:15px;line-height:1;color:var(--bone-3)}
.tray__hint{font-size:11px;letter-spacing:.04em;color:var(--bone-3)}
.tray__right{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.tray__meta{
  display:flex;flex-direction:column;gap:2px;min-width:0;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-2);
}
.tray__chars,.tray__ig{font-size:11px;letter-spacing:.04em;text-transform:none;color:var(--bone-3)}
.tray__ig.is-over{color:#eda1a1;font-weight:600}
.tray__seps{display:flex;gap:3px;padding:3px;border:1px solid var(--rule-d);border-radius:999px}
.tray__sepBtn{
  min-height:34px;padding:7px 12px;border-radius:999px;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bone-2);-webkit-tap-highlight-color:transparent;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.tray__sepBtn.is-on{background:rgba(250,250,247,.14);color:var(--bone)}
.tray__acts{display:flex;align-items:center;gap:8px}
.tray__act,.tray__copy{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;border-radius:999px;white-space:nowrap;
  letter-spacing:.12em;text-transform:uppercase;
  -webkit-tap-highlight-color:transparent;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),opacity .25s var(--ease);
}
.tray__act{padding:10px 15px;font-size:11px;border:1px solid var(--ghost);color:var(--bone)}
.tray__act[disabled]{opacity:.32;cursor:not-allowed}
.tray__copy{
  padding:12px 22px;font-size:11px;font-weight:600;
  background:var(--olive);color:var(--ink);border:1px solid var(--olive);
}
.tray.is-inClipboard .tray__copy::after{content:" ✓";font-weight:700}

@media (hover:hover) and (pointer:fine){
  .tray__chip:hover{background:rgba(204,211,118,.12);border-color:var(--olive)}
  .tray__sepBtn:hover:not(.is-on){color:var(--bone)}
  .tray__act:hover:not([disabled]){background:var(--bone);border-color:var(--bone);color:var(--ink)}
  .tray__copy:hover{background:var(--bone);border-color:var(--bone)}
}

/* Phones: the bar stacks, and the three secondary actions collapse to icons so
   it never eats more than about a quarter of the screen. */
@media (max-width:900px){
  .tray__inner{flex-direction:column;align-items:stretch;gap:9px}
  .tray__right{
    display:grid;gap:8px;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"meta seps" "acts acts";
  }
  .tray__meta{grid-area:meta;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 9px}
  .tray__seps{grid-area:seps;justify-self:end}
  .tray__acts{grid-area:acts}
  .tray__copy{flex:1 1 auto}
}
/* Landscape phone: the width is there, so go back to one row. */
@media (max-height:520px) and (min-width:560px){
  .tray__inner{flex-direction:row;align-items:center;gap:14px}
  .tray__right{display:flex;align-items:center;gap:10px}
  .tray__meta{flex-direction:row;align-items:baseline;gap:9px}
  .tray__hint{display:none}
}
@media (max-height:520px){
  .tray{padding:8px var(--pad) calc(8px + env(safe-area-inset-bottom))}
  .tray__chip{min-height:40px;padding:4px 10px}
  .tray__chipGlyph{font-size:19px}
  .tray__hint{display:none}
}
@media (max-width:560px){
  .tray{padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom))}
  .tray__acts{gap:6px}
  .tray__act{font-size:0;letter-spacing:0;width:44px;padding:0;flex:0 0 auto}
  .tray__copy{padding:12px 14px;min-width:0}
  /* The grapheme count is the nicety; the IG number is the one you act on. */
  .tray__chars{display:none}
  .tray__sepBtn{padding:7px 10px}
  .tray__act::before{font-size:16px;letter-spacing:0}
  #trayUndo::before{content:"\21B6"}
  #trayClear::before{content:"\00D7"}
  #trayInsert::before{content:"\2193"}
  .tray__chipGlyph{font-size:20px}
}

/* Reserve the tray's height inside the two sections it belongs to. */
#emoji,#symbols{padding-bottom:calc(var(--pad-y) + var(--tray-h))}
body.has-tray .toast{bottom:calc(32px + var(--tray-h))}
body.has-tray .gotop{bottom:calc(24px + var(--tray-h))}
@media (max-width:640px){
  body.has-tray .gotop{bottom:calc(16px + var(--tray-h))}
}

/* ============ Cursor ============
   The same arrowhead as lightbyte.agency: olive with an ink outline, tip on
   the pointer. Over anything clickable it leans forward and a bone echo of
   it glitches in behind; over text fields it turns into a caret beam.
   Desktop has no native cursor; touch devices keep theirs. */
.cursor{position:fixed;top:0;left:0;width:0;height:0;pointer-events:none;z-index:10001;will-change:transform;transition:opacity .2s var(--ease)}
.cursor.is-out{opacity:0}
.cursor__arrow,.cursor__ghost{position:absolute;left:-3.25px;top:-2.7px;width:26px;height:26px;max-width:none;overflow:visible;transform-origin:3.25px 2.7px}
.cursor__arrow path{fill:var(--olive);stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
.cursor__arrow{transition:transform .22s var(--ease-out),opacity .15s var(--ease)}
.cursor__ghost path{fill:var(--bone);stroke:rgba(10,10,10,.55);stroke-width:1.1;stroke-linejoin:round}
.cursor__ghost{opacity:0;transition:opacity .15s var(--ease)}
.cursor.is-hover .cursor__arrow{transform:rotate(-14deg) scale(1.08)}
.cursor.is-hover .cursor__ghost{opacity:.5;transform:translate(-3px,3px) rotate(-14deg) scale(1.08);animation:cursorEcho .3s steps(1,end) 1}
@keyframes cursorEcho{
  0%  {opacity:.95;clip-path:inset(0 0 55% 0);transform:translate(-7px,1px) rotate(-14deg) scale(1.08)}
  30% {opacity:.9; clip-path:inset(45% 0 0 0);transform:translate(4px,4px) rotate(-14deg) scale(1.08)}
  60% {opacity:.7; clip-path:inset(20% 0 30% 0);transform:translate(-5px,2px) rotate(-14deg) scale(1.08)}
  100%{opacity:.5; clip-path:inset(0);transform:translate(-3px,3px) rotate(-14deg) scale(1.08)}
}
.cursor.is-down .cursor__arrow{transform:scale(.88)}
.cursor.is-hover.is-down .cursor__arrow{transform:rotate(-14deg) scale(.94)}
.cursor__beam{position:absolute;left:-1px;top:-11px;width:2px;height:22px;border-radius:1px;background:var(--olive);box-shadow:0 0 0 1px rgba(10,10,10,.7);opacity:0;transition:opacity .15s var(--ease)}
.cursor.is-text .cursor__beam{opacity:1}
.cursor.is-text .cursor__arrow,.cursor.is-text .cursor__ghost{opacity:0}
@media (hover:none){.cursor{display:none}}
@media (hover:hover) and (pointer:fine){
  html,body,*,*::before,*::after{cursor:none !important}
}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .hero__star,.gotop__arrow{animation:none!important}
}

/* Who controls the data, right where it is collected (GDPR Art. 13). */
.form__legal{display:block;margin-top:6px}
.form__legal a{color:var(--bone-2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(204,211,118,.6)}
.form__legal a:hover{color:var(--olive)}


/* =============================================================================
   TOOL PAGES - header, directory cards, steps, AI results
   ============================================================================= */
.skip{
  position:fixed;left:12px;top:12px;z-index:10002;padding:10px 16px;border-radius:999px;
  background:var(--olive);color:var(--ink);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  transform:translateY(-200%);transition:transform .2s var(--ease-out);
}
.skip:focus{transform:none}

/* ---- tool header: the page's title, short, so the tool sits near the top ---- */
.thead{
  position:relative;overflow:hidden;isolation:isolate;
  padding:calc(var(--pad-y-tight) + 44px) var(--pad) clamp(32px,4vw,48px);
  background:var(--ink);color:var(--bone);border-bottom:1px solid var(--rule-d);
}
.thead::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 420px at 92% -20%, rgba(204,211,118,.17), transparent 62%),
    radial-gradient(620px 300px at -5% 120%, rgba(204,211,118,.07), transparent 60%);
}
.thead__body{max-width:1120px;display:flex;flex-direction:column;gap:18px}
.thead__title{font-size:clamp(36px,4.8vw,72px);line-height:.94;letter-spacing:-.045em;font-weight:500;font-style:italic}
.thead__title .thin{font-weight:300}
.thead__title b{display:block;font-weight:900}
.thead__lead{font-size:clamp(16px,1.5vw,19px);line-height:1.55;color:var(--bone-2);max-width:56ch}
.thead__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:6px;padding-top:18px;
  border-top:1px solid var(--rule-d);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-3);
}
.thead__meta a{color:var(--bone-2);transition:color .2s var(--ease)}
.thead__meta a:hover{color:var(--olive)}
.thead__back{color:var(--bone) !important}
.thead__sep{opacity:.6}
.thead__how{color:var(--olive)}
@media (max-width:940px){.thead{padding-top:calc(var(--pad-y-tight) + 92px)}}
@media (max-width:560px){
  .thead{padding-top:118px;padding-bottom:32px}
  .thead__body{gap:16px}
  .thead__title{font-size:clamp(34px,10vw,48px)}
  .thead__lead{font-size:15px}
}

/* The tool follows straight after the header: less air above it. */
.sec.tool{padding-top:clamp(32px,4vw,56px)}
.tool__block + .tool__block{margin-top:clamp(56px,7vw,96px);padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--rule-d)}
.tool__sub{font-size:clamp(28px,3.6vw,48px)}
.tool__soon{color:var(--fg-2)}

/* ---- the hub's index: every tool once, as a contents page ----
   Five groups side by side (three on tablets, stacked with two entries per
   line on phones). Entries are the one hairline row without Thin and Fat:
   plain 17px roman, so 40 names scan fast, with an optional gloss below. */
.ix__title{margin-bottom:clamp(28px,3.4vw,44px);font-size:clamp(32px,5vw,60px);line-height:.95;letter-spacing:-.035em;font-weight:500}
.ix__title .thin{font-weight:300;font-style:italic}
.ix__title b{font-weight:900;font-style:italic}
.ix__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:56px clamp(20px,2.4vw,36px);align-items:start}
.ix__group[hidden],.ix__item[hidden]{display:none}
.ix__gh{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--rule-d);font-weight:500}
.ix__gt{font-size:clamp(24px,2.1vw,32px);line-height:1;letter-spacing:-.035em}
.ix__gt .thin{font-weight:300;font-style:italic}
.ix__gt b{font-weight:900;font-style:italic}
.ix__count{font-size:11px;letter-spacing:.14em;color:var(--bone-3)}
/* Arriving from a nav link (#pdf) marks the group. */
.ix__group:target .ix__gh{border-bottom-color:var(--olive)}
.ix__list{list-style:none}
.ix__item{border-bottom:1px solid var(--rule-d)}
.ix__link{
  position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:48px;padding:11px 2px;color:var(--bone);transition:color .3s var(--ease);
}
.ix__link::before{
  content:"";position:absolute;inset:0 -10px;z-index:-1;background:var(--olive);
  transform:scaleX(0);transform-origin:left;transition:transform .42s var(--ease-out);
}
.ix__link:hover::before,.ix__link:focus-visible::before{transform:scaleX(1)}
.ix__link:hover,.ix__link:focus-visible{color:var(--ink);outline:none}
.ix__txt{min-width:0;transition:transform .42s var(--ease-out)}
.ix__link:hover .ix__txt,.ix__link:focus-visible .ix__txt{transform:translate3d(8px,0,0)}
.ix__name{display:block;font-size:17px;line-height:1.25;letter-spacing:-.015em}
.ix__gloss{display:block;margin-top:2px;font-size:13px;line-height:1.35;color:var(--bone-3);transition:color .3s var(--ease)}
.ix__link:hover .ix__gloss,.ix__link:focus-visible .ix__gloss{color:rgba(10,10,10,.62)}
.ix__go{flex:none;opacity:0;transition:opacity .3s var(--ease-out)}
.ix__go svg{display:block;width:16px;height:16px}
.ix__link:hover .ix__go,.ix__link:focus-visible .ix__go{opacity:1}
/* Searching: the cover lines step aside and the matches sit right under the
   field, each group a full-width band of three entries a line. The band reads
   as one table, so the rules run level across it and every cell is washed
   whole; names sit at the top of their cell. */
.is-searching .feat,.is-searching .ix__title{display:none}
.is-searching .ix{padding-top:24px}
.is-searching .ix__count{visibility:hidden}
@media (max-width:1179px){.ix__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:761px){
  .is-searching .ix__grid{grid-template-columns:1fr;gap:40px}
  .is-searching .ix__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(20px,2.4vw,36px)}
  .is-searching .ix__item:not([hidden]){display:flex}
  .is-searching .ix__link{flex:1;align-items:flex-start}
}
@media (max-width:760px){
  .ix__grid{grid-template-columns:1fr;gap:40px}
  .ix__list{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}
  .ix__name{font-size:16px}
  .ix__gloss{font-size:12px}
  .ix__link{min-height:52px;padding:10px 0}
  .ix__go{display:none}
}
@media (max-width:359px){.ix__list{grid-template-columns:1fr}}

/* ---- two-column blocks: the heading holds still on the left ---- */
.dir__cat{display:grid;grid-template-columns:minmax(220px,.72fr) minmax(0,2fr);gap:clamp(24px,4.5vw,72px)}
.dir__side{position:sticky;top:112px;align-self:start;display:flex;flex-direction:column;gap:14px}
.dir__title{font-size:clamp(30px,3.6vw,52px);line-height:.95;letter-spacing:-.04em;font-weight:500}
.dir__title .thin{font-weight:300;font-style:italic}
.dir__title b{font-weight:900;font-style:italic}
.dir__text{max-width:34ch;font-size:15px;line-height:1.55;color:var(--fg-2)}
.dir__text a{color:var(--fg);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--olive)}
.dir__all{align-self:flex-start;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--olive);transition:color .25s var(--ease),transform .3s var(--ease-out)}
.dir__all:hover{color:var(--bone);transform:translateX(3px)}
.dir__list{list-style:none;border-top:1px solid var(--rule-d)}
@media (max-width:940px){.dir__side{top:136px}}
@media (max-width:820px){
  .dir__cat{grid-template-columns:1fr;gap:22px}
  .dir__side{position:static}
  .dir__text{max-width:60ch}
}

/* ---- "inne narzędzia": hairline rows, like the work list on lightbyte.agency ---- */
.trow{border-bottom:1px solid var(--rule-d)}
.trow__link{
  position:relative;isolation:isolate;display:grid;align-items:center;
  grid-template-columns:34px minmax(0,1fr) auto 22px;gap:clamp(12px,1.6vw,24px);
  padding:clamp(16px,1.7vw,22px) 4px;color:var(--bone);
  transition:color .3s var(--ease);
}
.trow__link > :not(.trow__go){transition:transform .42s var(--ease-out),color .3s var(--ease)}
.trow__link:hover > :not(.trow__go),.trow__link:focus-visible > :not(.trow__go){transform:translate3d(14px,0,0)}
/* Olive wash slides in from the left, as on the work list. */
.trow__link::before{
  content:"";position:absolute;left:-14px;right:-14px;top:0;bottom:0;z-index:-1;
  background:var(--olive);transform:scaleX(0);transform-origin:left;
  transition:transform .46s var(--ease-out);
}
.trow__link:focus-visible{outline:none}
.trow__link:hover::before,.trow__link:focus-visible::before{transform:scaleX(1)}
.trow__link:hover,.trow__link:focus-visible{color:var(--ink)}
/* The tool's drawn icon; it shifts and darkens with the rest of the row. */
.trow__icon{width:22px;height:22px;color:var(--bone-3)}
.trow__main{min-width:0}
.trow__name{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px .26em;font-size:clamp(21px,2.3vw,31px);line-height:1.1;letter-spacing:-.03em;font-weight:500}
.trow__name .thin{font-weight:300;font-style:italic}
.trow__name b{font-weight:900;font-style:italic}
.trow__desc{display:block;margin-top:7px;max-width:62ch;font-size:14px;line-height:1.5;color:var(--bone-2);transition:color .3s var(--ease)}
/* Platforms as bare glyphs in a row: no rings, no chips. */
.trow__tags{justify-self:end;display:flex;align-items:center;gap:11px;color:var(--bone-3);transition:color .3s var(--ease)}
.trow__tags svg{display:block;width:15px;height:15px;flex:none;fill:currentColor}
.trow__go{display:grid;place-items:center;width:22px;height:22px;opacity:0;transform:translate3d(-8px,0,0);transition:opacity .34s var(--ease-out),transform .34s var(--ease-out)}
.trow__go svg{width:20px;height:20px}
.trow__link:hover .trow__go,.trow__link:focus-visible .trow__go{opacity:1;transform:none}
.trow__link:hover .trow__icon,.trow__link:hover .trow__tags,.trow__link:focus-visible .trow__icon,.trow__link:focus-visible .trow__tags{color:rgba(10,10,10,.62)}
.trow__link:hover .trow__desc,.trow__link:focus-visible .trow__desc{color:rgba(10,10,10,.78)}
@media (max-width:1100px){
  .trow__link{grid-template-columns:30px minmax(0,1fr) 22px;row-gap:10px}
  .trow__icon,.trow__go{grid-row:1 / span 2}
  .trow__tags{grid-column:2;grid-row:2;justify-self:start;gap:10px}
  .trow__tags svg{width:14px;height:14px}
}
@media (max-width:560px){
  .trow__link{grid-template-columns:26px minmax(0,1fr) 18px;gap:12px;padding:16px 0}
  .trow__link:hover > :not(.trow__go),.trow__link:focus-visible > :not(.trow__go){transform:translate3d(8px,0,0)}
  .trow__link::before{left:-8px;right:-8px}
  .trow__go{opacity:.55;transform:none}
  .trow__name{font-size:21px}
  .trow__desc{font-size:13.5px}
}

/* ---- promise ---- */
.trust__list{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule-d)}
.trust__item{padding:28px clamp(18px,2.2vw,32px) 6px 0}
.trust__item + .trust__item{padding-left:clamp(18px,2.2vw,32px);border-left:1px solid var(--rule-d)}
.trust__item svg{width:28px;height:28px;margin-bottom:16px;color:var(--olive)}
.trust__item h3{margin-bottom:8px;font-size:20px;font-style:italic;font-weight:600;letter-spacing:-.02em}
.trust__item p{max-width:38ch;font-size:15px;line-height:1.55;color:var(--bone-2)}
@media (max-width:820px){
  .trust__list{grid-template-columns:1fr}
  .trust__item,.trust__item + .trust__item{padding:22px 0;border-left:0;border-bottom:1px solid var(--rule-d)}
}

/* ---- how it works ---- */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule-d)}
.step{padding:28px clamp(20px,2.4vw,36px) 6px 0}
.step + .step{padding-left:clamp(20px,2.4vw,36px);border-left:1px solid var(--rule-d)}
.step__n{display:block;margin-bottom:clamp(20px,3vw,40px);font-size:12px;letter-spacing:.1em;color:var(--olive)}
.step__title{margin-bottom:8px;font-size:20px;font-style:italic;font-weight:600;letter-spacing:-.02em}
.step__text{font-size:15px;line-height:1.55;color:var(--bone-2)}
@media (max-width:820px){.steps{grid-template-columns:1fr}.step,.step + .step{padding:22px 0;border-left:0;border-bottom:1px solid var(--rule-d)}.step__n{margin-bottom:12px}}

/* ---- buttons while working ---- */
.btn.is-loading{opacity:.7;pointer-events:none}
.btn.is-loading svg{animation:lbSpin 1.1s linear infinite}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}
@keyframes lbSpin{to{transform:rotate(360deg)}}

/* ---- text fields on paper sections ---- */
.sec--paper .field label{color:rgba(10,10,10,.72)}
.sec--paper .field input,.sec--paper .field select,.sec--paper .field textarea{background-color:#fff;color:var(--ink);border-color:rgba(10,10,10,.22)}
.sec--paper .field select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1L6 6L11 1' stroke='%230a0a0a' stroke-width='1.5' fill='none'/></svg>")!important}
.sec--paper .field input::placeholder,.sec--paper .field textarea::placeholder{color:rgba(10,10,10,.5);opacity:1}
.sec--paper .field input:focus,.sec--paper .field select:focus,.sec--paper .field textarea:focus{background-color:#fff;border-color:var(--ink);box-shadow:0 0 0 3px rgba(204,211,118,.55)}
.sec--paper .field select option{background:#fff;color:var(--ink)}
.sec--paper .pill > span{background:#fff;border-color:rgba(10,10,10,.2)}
.sec--paper .pill small{opacity:.85}
.sec--paper .pill:hover > span{border-color:var(--ink)}
.sec--paper .pill input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.sec--paper .pill input:focus-visible + span{outline-color:var(--ink)}
.sec--paper .val{color:var(--ink)}
.sec--paper .tool input[type="range"]::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--ink) var(--p,0%),rgba(10,10,10,.18) var(--p,0%))}
.sec--paper .tool input[type="range"]::-webkit-slider-thumb{background:#fff;border-color:var(--ink);box-shadow:0 0 0 3px #fff}
.sec--paper .tool input[type="range"]::-moz-range-track{background:rgba(10,10,10,.18)}
.sec--paper .tool input[type="range"]::-moz-range-progress{background:var(--ink)}
.sec--paper .tool input[type="range"]::-moz-range-thumb{background:#fff;border-color:var(--ink)}

@media (prefers-reduced-motion: reduce){
  .trow__link,.trow__link::before,.trow__go,.gen__item,.gen__item::before{transition:none}
  .feat__link::before,.ix__link::before,.ix__txt,.feat__go{transition:none}
}

/* Phones: 16px text fields, or Safari zooms in on focus. Last in the file so it
   beats the base .field sizes declared above. */
@media (max-width:640px){
  .field input,.field select,.field textarea,.finder input{font-size:16px}
}
.gen__action[disabled]{opacity:.45;cursor:not-allowed}

/* =============================================================================
   Motion, as on lightbyte.agency: the header rises in on load, the rest lifts
   out of a slight blur as it scrolls in. ui.js adds .rv only to what starts
   below the fold, so nothing on screen blinks out and back.
   ============================================================================= */
@keyframes lbRise{from{opacity:0;transform:translate3d(0,.35em,0);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
.thead__title .thin,.thead__title b{display:inline-block;animation:lbRise .9s var(--ease-out) both}
.thead__title b{display:block;animation-delay:.08s}
.thead__lead{animation:lbIn .8s var(--ease-out) .22s both}
.thead__meta{animation:lbIn .8s var(--ease-out) .32s both}
.thead + .tool .tool__work,.thead + .tool .tool__body{animation:lbIn .8s var(--ease-out) .4s both}

.rv{opacity:0;transform:translate3d(0,18px,0);filter:blur(5px)}
.rv.is-in{
  opacity:1;transform:none;filter:blur(0);
  transition:opacity .6s var(--ease-out) var(--d,0ms),transform .6s var(--ease-out) var(--d,0ms),filter .6s var(--ease-out) var(--d,0ms);
}
/* Hairlines draw in from the left as their block arrives. */
.dir__list.rv-line,.steps.rv-line,.faq.rv-line{border-top-color:transparent;position:relative}
.dir__list.rv-line::before,.steps.rv-line::before,.faq.rv-line::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--rule-d);
  transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease-out);
}
.rv-line.is-drawn::before{transform:scaleX(1)}

@media (prefers-reduced-motion: reduce){
  .thead__title .thin,.thead__title b,.thead__lead,.thead__meta,.thead + .tool .tool__work,.thead + .tool .tool__body{animation:none}
  .rv{opacity:1;transform:none;filter:none}
  .rv-line::before{transform:none}
}

/* Platforms as bare glyphs in the tool headers, like the "inne narzędzia" rows. */
.thead__plats{display:inline-flex;align-items:center;gap:12px;color:var(--bone-3)}
.thead__plats{gap:9px;vertical-align:middle}
.thead__plats svg{width:13px;height:13px;fill:currentColor}

/* ---- third-party notices ---- */
.lics{list-style:none;max-width:980px;border-top:1px solid var(--rule-d)}
.lic{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.6fr) auto;gap:6px 24px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--rule-d)}
.lic__name{font-size:18px;font-weight:600;font-style:italic;letter-spacing:-.02em}
.lic__ver{font-size:11px;font-style:normal;letter-spacing:.08em;color:var(--fg-3);margin-left:6px}
.lic__meta{font-size:14px;color:var(--fg-2)}
.lic__lic{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--olive)}
.lic__links{font-size:13px;color:var(--fg-3)}
.lic__links a{color:var(--fg-2);text-decoration:underline;text-underline-offset:3px}
.lic__links a:hover{color:var(--olive)}
@media (max-width:760px){.lic{grid-template-columns:1fr}}