/* Palette: forest green and an accent, plus black and white. Green is ours: buttons, links, what
   Kontekstai's headlines reveal, the logo's K. The accent is the outlets' side ("tavo
   laiką", what their headlines hold back); --on-accent is text on it;
   --accent-tint the far end of the coloured sections' gradient. */
:root { --ink: #111111; --muted: #6b6b6b; --line: #e5e5e5; --green: #146c4b; --green-edge: #0b4a32; --bg: #fff; --display: Switzer, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --accent: #fff06a; --on-accent: #3f3700; --accent-tint: #fffbe0; --panel: linear-gradient(170deg, #e4f0e8, var(--accent-tint)); }

/* The name's and headings' font, Switzer (Fontshare, ITF Free Font License), self-hosted. */
@font-face { font-family: Switzer; font-weight: 500; font-display: swap; src: url(fonts/switzer-500.woff2) format("woff2"); }
@font-face { font-family: Switzer; font-weight: 600; font-display: swap; src: url(fonts/switzer-600.woff2) format("woff2"); }
@font-face { font-family: Switzer; font-weight: 700; font-display: swap; src: url(fonts/switzer-700.woff2) format("woff2"); }

* { box-sizing: border-box; }
body { margin: 0; font: 17px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--bg); }
h1, h2, h3, .claim-body, .button, #to-install { font-family: var(--display); }
main { max-width: 1080px; margin: 0 auto; padding: 0 20px 64px; }
a { color: var(--green); }
.button { display: inline-block; background: var(--green); color: #fff; text-decoration: none; font-weight: 600; padding: 12px 22px; border-radius: 0.4em; }

/* Hero, after superlogical.com: the claim on the left, the headline cards on a panel inset from
   the window's edges, only as wide as the cards need. The cards fill the panel's height. */
#hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; height: 100svh; }
/* Margins in proportion to the window. examples.js adds --claim-shift on the left when the claim
   runs out of height before width (wide, short windows), so the spare width is shared between the
   left margin and the gap to the cards rather than all left in that gap. */
.claim { display: flex; flex-direction: column; min-width: 0; padding: clamp(20px, 4vh, 48px) clamp(16px, 2.5vw, 48px) clamp(20px, 4vh, 48px) calc(clamp(20px, 3.5vw, 72px) + var(--claim-shift, 0px)); }
/* The logo: "Kontekstai" in Switzer, its K the mark: a K of lines (rows 117-572 of the SVG's
   units) in a brace (64-626, hanging left). The K is Switzer's cap height (0.68em) and sits on
   the baseline; after it the gap Switzer leaves between K and o (its K's right side bearing,
   0.014em, kerned by -0.037em; the o brings its own). */
.brand { font: 500 34px/1 var(--display); letter-spacing: -0.01em; }
.brand .k { height: calc(576 / 455 * 0.68em); width: auto; vertical-align: calc((572 - 633) / 455 * 0.68em); margin-right: -0.023em; color: var(--green); }
/* The name in running text, set like the logo. */
.name { font-family: var(--display); font-weight: 500; }
.brand .beta { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-style: normal; font-size: 13px; font-weight: 600; letter-spacing: 0; vertical-align: middle; color: var(--on-accent); background: var(--accent); padding: 2px 8px; border-radius: 999px; margin-left: 6px; }
/* The claim in three rows of words, its button centred under it. examples.js sets the font size
   so it fills the column's width (or its height, if that runs out first). */
.claim-body { margin: auto 0; align-self: flex-start; display: flex; flex-direction: column; align-items: flex-start; gap: 0.35em; font-size: 6vw; }
/* Shown once examples.js has sized it (and the fonts are in), so it doesn't jump. */
.js .claim-body:not(.fitted) { visibility: hidden; }
#hero h1 { font-size: 1em; line-height: 1.1; letter-spacing: -0.03em; width: min-content; margin: 0; }
#hero h1 span { white-space: nowrap; color: var(--on-accent); background: var(--accent); padding: 0 0.08em; border-radius: 0.08em; }
/* The button: smaller than the claim, with padding in proportion. */
/* A keycap: a darker edge under it (--edge) that it sinks onto when pressed, lifting a little on
   hover, so it reads as something to press rather than another highlight like "tavo laiką". */
#tired { --edge: var(--green-edge); --glow: color-mix(in srgb, var(--green) 30%, transparent); position: relative; align-self: center; font: inherit; font-size: 0.42em; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; border: 0; cursor: pointer; white-space: nowrap; padding: 0.5em 1.1em; border-radius: 0.4em; box-shadow: 0 0.16em 0 var(--edge), 0 0.5em 1.2em var(--glow); transition: translate 0.08s, box-shadow 0.08s; }
#tired:hover { translate: 0 -0.03em; box-shadow: 0 0.19em 0 var(--edge), 0 0.6em 1.4em var(--glow); }
#tired:active { translate: 0 0.13em; box-shadow: 0 0.03em 0 var(--edge), 0 0.2em 0.5em var(--glow); }

/* --panel-shift (examples.js) moves the panel in from the right when the claim leaves spare width,
   as --claim-shift moves the claim in from the left, so the two stay together in the middle. */
.cards-panel { display: flex; min-height: 0; margin: 12px calc(clamp(12px, 3vw, 56px) + var(--panel-shift, 0px)) 12px 12px; padding: 28px; border-radius: 14px; background: var(--panel); }

/* The headline cards, two, one above the other, filling the panel: each photo takes the height its
   card has left once the headlines have theirs. */
/* The column is no wider than 1.3 times a card's height (the window's, less the panel's margins,
   padding and gap, over 2), so short windows don't get wide cards with strips of photo. */
#headlines { display: grid; grid-template-columns: min(clamp(360px, 30vw, 620px), (100svh - 112px) / 2 * 1.3); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 16px; height: 100%; user-select: none; -webkit-user-select: none; }
.headline { display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 10px 10px 12px; background: #fff; border-radius: 14px; box-shadow: 0 8px 24px rgb(17 17 17 / 0.12); }
.headline img { flex: 1 1 0; min-height: 0; width: 100%; object-fit: cover; border-radius: 8px; display: block; }

/* The headlines, as the extension shows them on the outlets' pages: Kontekstai's on top, the
   original under it in a smaller font (--old, as in the extension), crossed out. examples.js fits the font size
   (--card-font) and sets the text's height (--text-h) to the tallest card's, so the photos line up. */
.text { --old: 0.7; display: block; flex: none; height: var(--text-h, auto); overflow: hidden; font-weight: 700; font-size: var(--card-font, 16px); line-height: 1.3; }
.new { display: block; }
.old { display: block; margin-top: 0.25em; font-size: calc(var(--old) * 1em); color: var(--muted); text-decoration: line-through; }
/* What the original holds back, in the accent; what Kontekstai's reveals, in green. The mark (an
   inline-block) moves to the next line whole, and only wraps inside if it's wider than the card;
   the span inside carries the highlight, inline, so a phrase that does wrap is highlighted line
   by line, not as a whole box. (Inline-blocks don't inherit the strike-through: set it again.) */
.text mark { display: inline-block; max-width: 100%; background: none; color: inherit; }
.text mark > span { background: var(--green); color: #fff; padding: 0 2px; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.old mark > span { background: var(--accent); color: var(--on-accent); text-decoration: line-through; opacity: 0.75; }

/* Narrower laptops (under 1440px): a narrower card panel. */
@media (max-width: 1439.98px) {
  .cards-panel { margin: 10px calc(clamp(10px, 3vw, 40px) + var(--panel-shift, 0px)) 10px 10px; padding: 20px; }
  #headlines { grid-template-columns: min(clamp(300px, 28vw, 460px), (100svh - 84px) / 2 * 1.3); gap: 12px; }
}

/* Phones and narrow windows (under 960px): logo, the two cards side by side, then the claim across
   the window and the button under it. .claim and .claim-body step aside (display:
   contents) so their children sit in #hero's grid. */
@media (max-width: 959.98px) {
  /* Clipped: examples.js measures the claim (on one line) at sizes far wider than the window, and a
     phone's browser would lay the page out anew for the wider content, scrolling it. That happens
     on every resize, which the address bar showing or hiding is. */
  #hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; overflow: clip; }
  .claim, .claim-body { display: contents; }
  .brand { grid-row: 1; padding: 16px 20px 0; font-size: 28px; }
  .cards-panel { grid-row: 2; grid-column: 1; margin: 14px 10px 0; padding: 12px; }
  #hero h1 { grid-row: 3; width: max-content; white-space: nowrap; padding: 16px 20px 0; }
  #tired { grid-row: 4; justify-self: center; font-size: 24px; margin: 14px 0 calc(20px + env(safe-area-inset-bottom)); }
  #headlines { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); gap: 10px; width: 100%; }
  .headline { gap: 6px; padding: 7px 7px 9px; border-radius: 12px; }
}

/* The second screen (demo.js): the title, then the outlets' front pages with our headlines in a
   browser: a MacBook with Chrome on desktops, Firefox for Android on phones. */
/* As tall as its content; "Įrašyti" floats over the bottom of the mockup, bouncing. */
#demo { position: relative; display: flex; flex-direction: column; align-items: center; padding: clamp(20px, 4vh, 48px) 16px clamp(14px, 2.5vh, 28px); }
#to-install { position: absolute; z-index: 2; left: 50%; bottom: clamp(18px, 4vh, 40px); transform: translateX(-50%); display: flex; align-items: center; gap: 6px; border: 0; font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 6px 18px color-mix(in srgb, var(--green) 35%, transparent); animation: bounce 1.6s ease-in-out infinite; }
#to-install svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
#to-install:hover { animation-play-state: paused; }
/* Shown while this section is on screen and the install section isn't yet (.shown, demo.js). */
#to-install { opacity: 0; pointer-events: none; transition: opacity 0.25s; }
#to-install.shown { opacity: 1; pointer-events: auto; }
@keyframes bounce { 0%, 100% { translate: 0 0; } 50% { translate: 0 7px; } }
#demo h2 { margin: 0; font-size: clamp(26px, min(3vw, 5.4vh), 50px); line-height: 1.15; letter-spacing: -0.02em; text-align: center; text-wrap: balance; }
#demo h2 span { padding: 0 0.08em; border-radius: 0.08em; }
#demo .bad { color: var(--on-accent); background: var(--accent); }
#demo .good { color: #fff; background: var(--green); }
#demo svg { aspect-ratio: 1; height: auto; flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
#demo svg.dots { fill: currentColor; stroke: none; }

/* The screens, in the screenshot's pixels: --u is one of them (1440 wide on desktops, 390 on phones),
   whatever size the mockup is drawn at. The tabs' pages fade from one to the next. */
.screen { container-type: inline-size; display: flex; flex-direction: column; overflow: hidden; background: #fff; }
.view { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.shot { position: absolute; top: 0; left: 0; display: block; width: 100%; height: auto; opacity: 0; transition: opacity 0.6s ease; }
.shot.on { opacity: 1; }

/* The stage: under the title, a fixed space below it; the mockup takes its width (cqw). */
.stage { width: 100%; margin-top: 32px; container-type: inline-size; display: flex; justify-content: center; }

/* The MacBook: as wide as the stage allows, up to 1500px, and no taller than fits the window
   under the title (its height is 0.575 of its width; 140px for the title and the spacing). The
   section is as tall as it comes out: on tall windows the install section shows under it.
   Inside it, sizes in cqw are in hundredths of its own width. */
.laptop { width: min(100cqw, 1500px, (100svh - 140px) / 0.575); container-type: inline-size; }
.lid { position: relative; margin: 0 7%; padding: 2cqw 1.5cqw 1.3cqw; background: #0e0e10; border-radius: 2.4cqw 2.4cqw 0 0; box-shadow: inset 0 0 0 0.15cqw #3a3a3e; }
.lid::before { content: ""; position: absolute; top: 0.75cqw; left: 50%; translate: -50% 0; width: 0.5cqw; height: 0.5cqw; border-radius: 50%; background: #2a2a30; }
.base { position: relative; height: 1.6cqw; background: linear-gradient(#e2e3e6, #b9bbbf 70%, #8e9095); border-radius: 0 0 1.6cqw 1.6cqw / 0 0 1.4cqw 1.4cqw; box-shadow: 0 1.2cqw 2.4cqw rgb(0 0 0 / 0.18); }
.base::before { content: ""; position: absolute; top: 0; left: 50%; translate: -50% 0; width: 14%; height: 45%; background: linear-gradient(#a5a7ab, #c9cacd); border-radius: 0 0 0.8cqw 0.8cqw; }

/* Chrome, light theme, on macOS. */
.chrome { --u: calc(100cqw / 1440); aspect-ratio: 1440 / 900; border-radius: 0.3cqw; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.tabstrip { display: flex; align-items: flex-end; flex: none; height: calc(44 * var(--u)); padding: 0 calc(10 * var(--u)); background: #dfe3e9; }
.lights { display: flex; align-self: center; gap: calc(8 * var(--u)); margin: 0 calc(18 * var(--u)) 0 calc(6 * var(--u)); }
.lights i { width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: 50%; background: #ff5f57; }
.lights i:nth-child(2) { background: #febc2e; }
.lights i:nth-child(3) { background: #28c840; }
.tabs { display: flex; min-width: 0; }
.tab { all: unset; position: relative; box-sizing: border-box; display: flex; align-items: center; gap: calc(8 * var(--u)); width: calc(232 * var(--u)); height: calc(36 * var(--u)); padding: 0 calc(10 * var(--u)) 0 calc(12 * var(--u)); font-size: calc(12.5 * var(--u)); color: #3c4043; border-radius: calc(9 * var(--u)) calc(9 * var(--u)) 0 0; cursor: pointer; }
.tab img { flex: none; width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: calc(3 * var(--u)); }
.tab span { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tab:hover { background: rgb(255 255 255 / 0.5); }
.tab[aria-selected=true] { background: #fff; color: #1f1f1f; }
.tab:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.tab + .tab::before { content: ""; position: absolute; left: 0; top: 25%; width: 1px; height: 50%; background: #a8adb5; }
.tab[aria-selected=true]::before, .tab[aria-selected=true] + .tab::before, .tab:hover::before, .tab:hover + .tab::before { display: none; }
.newtab { display: flex; align-self: center; margin-left: calc(10 * var(--u)); color: #3c4043; }
.newtab svg { width: calc(18 * var(--u)); stroke-width: 2; }
.toolbar { display: flex; align-items: center; flex: none; gap: calc(4 * var(--u)); height: calc(42 * var(--u)); padding: 0 calc(10 * var(--u)); border-bottom: 1px solid #e3e3e3; color: #474747; }
.toolbar > svg { box-sizing: content-box; width: calc(18 * var(--u)); padding: calc(7 * var(--u)); stroke-width: 2; }
.toolbar > svg.off { color: #b5b5b5; }
.omnibox { flex: 1; display: flex; align-items: center; gap: calc(10 * var(--u)); height: calc(32 * var(--u)); margin: 0 calc(8 * var(--u)); padding: 0 calc(14 * var(--u)); background: #f1f3f4; border-radius: 999px; font-size: calc(14 * var(--u)); color: #1f1f1f; }
.omnibox svg { width: calc(16 * var(--u)); stroke-width: 2; color: #474747; }

/* Phones: Firefox for Android, as tall as fits under the title, in a phone's frame that fades out
   at the bottom, as if the phone went on. */
.phones { display: none; flex-direction: column; align-items: center; width: 100%; height: 100%; }
/* The whole phone, its screen shaped like a Galaxy S24's (19.5:9; the screenshot's bottom is cut
   off), inside a 10px frame: taller than the window, scrolled past like a page. */
.phone { --w: min(100cqw, 400px); width: var(--w); }
.firefox { --u: calc(100cqw / 390); height: calc((var(--w) - 20px) * 19.5 / 9 + 20px); font-family: system-ui, -apple-system, Roboto, sans-serif; color: #15141a; border: 10px solid #111; border-radius: 44px; box-shadow: 0 0 0 1.5px #3a3a3a, 0 16px 40px rgb(17 17 17 / 0.22); }
.status { position: relative; display: flex; justify-content: space-between; align-items: center; flex: none; height: calc(30 * var(--u)); padding: 0 calc(22 * var(--u)); background: #f9f9fb; font-size: calc(14 * var(--u)); font-weight: 600; }
.status::before { content: ""; position: absolute; top: calc(8 * var(--u)); left: 50%; translate: -50% 0; width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; background: #111; }
.sys { display: flex; align-items: center; gap: calc(5 * var(--u)); }
.sys i { background: #15141a; }
.signal { width: calc(15 * var(--u)); height: calc(11 * var(--u)); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.wifi { width: calc(15 * var(--u)); height: calc(11 * var(--u)); clip-path: polygon(50% 100%, 0 25%, 15% 8%, 50% 0, 85% 8%, 100% 25%); }
.battery { width: calc(22 * var(--u)); height: calc(11 * var(--u)); border-radius: calc(3 * var(--u)); }
.ffbar { display: flex; align-items: center; flex: none; gap: calc(6 * var(--u)); height: calc(56 * var(--u)); padding: 0 calc(8 * var(--u)); background: #f9f9fb; border-bottom: 1px solid #e0e0e6; }
.nav-step { all: unset; display: grid; place-items: center; flex: none; width: calc(36 * var(--u)); height: calc(40 * var(--u)); border-radius: calc(8 * var(--u)); color: #15141a; cursor: pointer; }
.nav-step:active { background: #e0e0e6; }
.nav-step:focus-visible { outline: 2px solid var(--green); }
.nav-step svg { width: calc(24 * var(--u)); stroke-width: 2.4; }
.urlfield { flex: 1; display: flex; align-items: center; gap: calc(8 * var(--u)); height: calc(40 * var(--u)); padding: 0 calc(12 * var(--u)); background: #f0f0f4; border-radius: calc(8 * var(--u)); font-size: calc(16 * var(--u)); }
.urlfield svg { width: calc(16 * var(--u)); stroke-width: 2; }

/* Phones: the section is as tall as the phone; little room above it. "Įrašyti" is pinned to
   the bottom of the window (shown as on desktops, see #to-install above). */
@media (max-width: 959.98px) {
  #demo { height: auto; min-height: 0; padding: 18px 16px 32px; }
  #demo h2 { font-size: 22px; }
  .stage { flex: none; margin-top: 12px; container-type: inline-size; }
  .laptop { display: none; }
  .phones { display: flex; height: auto; }
  #to-install { position: fixed; bottom: calc(16px + env(safe-area-inset-bottom)); }
  /* The screen: the pages side by side, swiped one at a time (demo.js keeps the address bar and
     the dots in step). */
  .firefox .view { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
  .firefox .view::-webkit-scrollbar { display: none; }
  .firefox .shot { position: static; flex: 0 0 100%; align-self: flex-start; opacity: 1; transition: none; scroll-snap-align: start; scroll-snap-stop: always; }
  .dots { display: flex; gap: 8px; margin-top: 16px; }
  .dot { all: unset; width: 8px; height: 8px; border-radius: 4px; background: #cfd3d8; cursor: pointer; transition: width 0.25s, background 0.25s; }
  .dot[aria-selected=true] { width: 22px; background: var(--green); }
  .dot:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
}

.panel { border-radius: 20px; padding: 24px 28px 28px; }
h2 { font-size: 28px; margin: 56px 0 16px; }
h3 { margin: 0 0 8px; font-size: 20px; }
.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card { border: 1px solid var(--line); border-radius: 12px; padding: 20px; background: #fff; }
.card ol { padding-left: 20px; margin: 12px 0 0; }
.card li { margin-bottom: 6px; }
.card .button { margin-top: 8px; }
.step { display: flex; align-items: flex-start; gap: 16px; }
.step h3 { margin: 6px 0 6px; }
.step p { margin: 0; }
.step > span { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--green); color: #fff; font-weight: 800; font-size: 20px; }
.icons { display: flex; gap: 8px; margin-bottom: 12px; }
.icons img { width: 40px; height: 40px; }

/* Įrašymas: with the browser detected, only its card shows, centred (install.js). */
#irasymas { background: var(--panel); }
#irasymas h2 { margin: 0 0 16px; }
.install.notice { display: none; }
#irasymas[data-detected] h2 { text-align: center; }
#irasymas[data-detected] .install:not(.match) { display: none; }
#irasymas[data-detected] .install.match { display: block; }
#irasymas[data-detected] .cards { grid-template-columns: minmax(0, 560px); justify-content: center; }
.notice p { font-size: 19px; font-weight: 600; margin: 0; }
.other { display: none; text-align: center; color: var(--muted); font-size: 15px; margin: 14px 0 0; }
#irasymas[data-detected] .other { display: block; }
code { background: #f3f3f3; padding: 1px 5px; border-radius: 4px; font-size: 15px; }
footer { border-top: 1px solid var(--line); margin-top: 64px; padding-top: 24px; color: var(--muted); font-size: 15px; }