html

<div id="knyga-root"></div>

<style>
  #knyga-root, #knyga-root * { box-sizing: border-box; }
  #knyga-root {
    --ink: #111111;
    --ink-soft: #5a5a5a;
    --parchment: #ffffff;
    --parchment-2: #ececec;
    --gold: #8a8a8a;
    --oxblood: #111111;
    --line: #cfcfcf;
    font-family: 'Lora', Georgia, serif;
    color: var(--ink);
    background: var(--parchment);
    max-width: 1000px;
    margin: 0 auto;
    line-height: 1.6;
    border: 1px solid var(--line);
  }
  #knyga-root .knyga-fonts { display: none; }

  /* ---------- HERO ---------- */
  #knyga-root .hero {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 40px;
    padding: 48px;
    background:
      linear-gradient(180deg, rgba(10,10,20,0.72) 0%, rgba(20,15,35,0.85) 100%),
      url('https://hostinger-agent-assets.hostinger.com/api/files/7b24d1a1-2d66-4a5e-b931-4ae4d167d95f/download') center/cover no-repeat;
    border-bottom: 1px solid var(--line);
    color: #f0f0f5;
  }
  #knyga-root .hero .hero-eyebrow { color: #a0a0c0; }
  #knyga-root .hero .hero-title { color: #f0f0f5; }
  #knyga-root .hero .hero-author { color: #c0bfd5; }
  #knyga-root .hero .hero-author b { color: #f0f0f5; }
  #knyga-root .hero .hero-synopsis { color: #c0bfd5; }
  #knyga-root .hero .chip {
    border-color: rgba(255,255,255,0.2);
    color: #c0bfd5;
    background: rgba(255,255,255,0.08);
  }
  #knyga-root .hero-cover-wrap { position: relative; }
  #knyga-root .hero-cover {
    width: 100%;
    display: block;
    box-shadow: 0 14px 28px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.08);
    border-radius: 2px;
  }
  #knyga-root .hero-seal {
    position: absolute;
    bottom: -16px;
    right: -16px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--oxblood);
    color: var(--parchment);
    font-family: 'Fraunces', Georgia, serif;
    font-size: 11px;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.45);
    transform: rotate(-8deg);
    border: 2px solid rgba(255,255,255,0.3);
  }
  #knyga-root .hero-body { min-width: 0; }
  #knyga-root .hero-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0 0 10px;
  }
  #knyga-root .hero-title {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 44px;
    line-height: 1.08;
    margin: 0 0 12px;
  }
  #knyga-root .hero-author {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    margin: 0 0 22px;
  }
  #knyga-root .hero-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 22px;
  }
  #knyga-root .chip {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    padding: 5px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-soft);
    background: rgba(255,255,255,0.35);
  }
  #knyga-root .hero-synopsis {
    font-size: 16px;
    margin: 0 0 28px;
    max-width: 60ch;
  }
  #knyga-root .cta {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.03em;
    color: var(--parchment);
    background: var(--oxblood);
    border: none;
    padding: 14px 28px;
    border-radius: 3px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    position: relative;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 3px 0 rgba(0,0,0,0.3);
  }
  #knyga-root .cta:hover { transform: translateY(-2px); box-shadow: 0 5px 10px rgba(0,0,0,0.35); }

  /* ---------- READING AREA ---------- */
  #knyga-root .reader {
    display: grid;
    grid-template-columns: 200px 1fr;
  }
  #knyga-root .tabs {
    background: var(--ink);
    padding: 28px 0;
  }
  #knyga-root .tab {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #b5b5b5;
    background: transparent;
    border: none;
    text-align: left;
    width: 100%;
    padding: 12px 22px 12px 24px;
    cursor: pointer;
    position: relative;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  }
  #knyga-root .tab + .tab { margin-top: 4px; }
  #knyga-root .tab.active {
    background: var(--parchment);
    color: var(--ink);
    font-weight: 600;
  }
  #knyga-root .tab.active::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--oxblood);
  }
  #knyga-root .page {
    padding: 52px 56px;
    background: var(--parchment);
  }
  #knyga-root .page h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 26px;
    margin: 0 0 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
  }
  #knyga-root .page p { margin: 0 0 18px; font-size: 17px; }
  #knyga-root .page p:first-of-type::first-letter {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 58px;
    font-weight: 600;
    float: left;
    line-height: 0.8;
    padding: 6px 10px 0 0;
    color: var(--oxblood);
  }
  #knyga-root .page-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 36px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    font-family: 'Inter', sans-serif;
  }
  #knyga-root .page-nav button {
    background: none;
    border: 1px solid var(--line);
    padding: 10px 18px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    border-radius: 3px;
    cursor: pointer;
    color: var(--ink);
  }
  #knyga-root .page-nav button:disabled { opacity: 0.35; cursor: default; }

  @media (max-width: 720px) {
    #knyga-root .hero { grid-template-columns: 1fr; padding: 28px; }
    #knyga-root .hero-cover-wrap { max-width: 180px; }
    #knyga-root .hero-title { font-size: 32px; }
    #knyga-root .reader { grid-template-columns: 1fr; }
    #knyga-root .tabs { display: flex; overflow-x: auto; padding: 14px; gap: 6px; }
    #knyga-root .tab { clip-path: none; white-space: nowrap; border-radius: 3px; }
    #knyga-root .tab + .tab { margin-top: 0; }
    #knyga-root .page { padding: 30px 22px; }
  }
</style>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Fraunces:wght@500;600;700&family=Lora:ital,wght@0,400;0,500;1,400&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">

<script>
(function () {

  /* ====================================================================
     ČIA REDAGUOJI SAVO KNYGOS INFORMACIJĄ. Nieko kito keisti nereikia.
     ==================================================================== */
  var CONFIG = {
    virsutinisTekstas: "Psichologinis trileris",
    pavadinimas: "Šešėlių architektas",
    autorius: "Živilė Kalsytė",
    zenkliukai: ["Tęsiama", "1 skyrius", "Trileris"],
    plombosTekstas: "NAUJA",
    virselioNuoroda: "https://lightpink-gorilla-744058.hostingersite.com/wp-content/uploads/2026/07/abstract-deep-space-universe-artwork-swirling-dark-nebula-i_.jpg",
    anotacija: "Didžiausia žmogaus baimė nėra mirtis. Didžiausia baimė – tapti tuo, kuo jis iš tikrųjų yra.",

    skyriai: [
      {
        pavadinimas: "I skyrius. Pacientė Nr. 417",
        tekstas: `– Aš vėl sapnavau tą miestą.

Moteris kalbėjo tyliai. Tarsi bijotų, kad kažkas už durų klausosi.

Lina nepakėlė akių nuo užrašų knygelės.

– Ką šį kartą matei?

– Tą pačią gatvę.

– Ir?

– Ji buvo tuščia.

Tyla.

– Kas joje buvo keisto?

Moteris suspaudė delnus.

– Žmonės.

– Bet sakei, kad gatvė buvo tuščia.

– Taip.

Ji nutilo.

Po kelių sekundžių pridūrė:

– Jie ėjo. Tik... neturėjo šešėlių.

Lina užvertė knygelę.

Pirmą kartą per visą konsultaciją pažvelgė pacientei tiesiai į akis.

– Kelintą kartą sapnuoji šį miestą?

– Nežinau.

– Apytiksliai.

– Gal... pusę metų.

– O prieš tai?

– Niekada.

Lina linktelėjo.

Nieko nepasakė.

Tik padėjo rašiklį.

Pacientė išėjo.

Kabinete liko tyla.

Lina priėjo prie lentynos.

Ištraukė storą juodą sąsiuvinį.

Ant viršelio nebuvo jokio pavadinimo.

Tik skaičius.

Ji atsivertė paskutinį puslapį.

Po juo parašė vieną sakinį.

„Tas pats miestas. Penktas žmogus šią savaitę."

Ji užvertė sąsiuvinį.

Langas atspindėjo kabinetą.

Akimirką pasirodė, kad jos atspindys vis dar rašo.

Lina mirktelėjo.

Viskas buvo savo vietoje.

Ji nusišypsojo.

– Per daug dirbi.

Taip sau sakydavo jau kelis mėnesius.

Lina nebuvo mistikė.

Ir tikrai ne ragana.

Ji buvo psichologė.

Bent jau taip buvo parašyta ant kabineto durų.

Dr. Lina Vaitkutė. Analitinė psichologija.

Žmonės pas ją ateidavo dėl nerimo.

Dėl depresijos.

Dėl skyrybų.

Dėl panikos.

Išeidavo kalbėdami apie vaikystę.

Apie tėvus.

Apie sapnus.

Kartais apie save.

Ji nekentė greitų atsakymų.

Niekada nesakydavo žmogui, ką jis turi daryti.

Tik užduodavo klausimus.

Kai kurie dėl to pykdavo.

Kiti nebegrįždavo.

Treti grįždavo po metų.

Visada su ta pačia fraze.

– Jūsų klausimas manęs nebepaleido.

Vakare ji ėjo namo pėsčiomis.

Galėjo važiuoti automobiliu.

Bet miestas geriausiai atsiverdavo einant.

Žmonės eidavo nuleidę galvas.

Žiūrėjo į telefonus.

Kalbėjosi su ausinėmis.

Prasilenkdavo vieni su kitais nė karto nepažvelgę į akis.

Lina mėgo stebėti.

Vienas vyras garsiai juokėsi.

Jo pečiai buvo sustingę.

Moteris šypsojosi.

Jos kumščiai buvo sugniaužti.

Paauglys atrodė ramus.

Jo kvėpavimas buvo toks greitas, lyg jis bėgtų.

Žmonės beveik niekada nemeluodavo kūnu.

Tik žodžiais.

Prie sankryžos ji sustojo.

Raudona.

Stiklinio dangoraižio sienoje atsispindėjo visas miestas.

Ji pažvelgė į save.

Kažkas nepatiko.

Ne veidas.

Ne žvilgsnis.

Laikas.

Ji žengė žingsnį.

Atspindys liko stovėti.

Trumpiau nei sekundę.

Bet pakankamai ilgai.

Paskui nuėjo.

Lyg nieko nebūtų įvykę.

Lina nekrustelėjo.

Automobiliai už jos pradėjo pypsėti.

Kažkas nusikeikė.

Ji atsisuko.

Viskas buvo normalu.

Kai dar kartą pažvelgė į stiklą, atspindys jau ėjo kartu.

Tą vakarą ji negrįžo namo.

Pati nesuprato kodėl.

Kojos pasuko į senamiestį.

Ne tą, kuriame fotografuodavosi turistai.

Dar senesnę miesto dalį.

Ten, kur grindinys buvo nelygus.

Kur sienos atrodė prisimenančios daugiau negu žmonės.

Kur siaurose gatvėse aidėdavo žingsniai net tada, kai eidavai viena.

Ji čia ateidavo retai.

Bet kiekvieną kartą jausdavo tą patį.

Lyg ši miesto dalis jos lauktų.

Senos bažnyčios kieme kažkas rinko stiklo šukes.

Ne.

Veidrodžių šukes.

Sena moteris.

Vilnonis paltas.

Pilki plaukai.

Mažas drobinis maišas.

Ji rinko kiekvieną gabalėlį taip atsargiai, tarsi liestų paukščio kaulus.

Lina sustojo.

– Kam jums tiek sudužusių veidrodžių?

Moteris nepakėlė galvos.

– Jie nesudužo.

– O kas tada?

– Žmonės juos paliko.

Lina tylėjo.

– Veidrodžiai niekada neskyla patys.

Tik tada moteris pažvelgė į ją.

Jos akys buvo keistai gyvos.

Ne senos.

Gyvos.

– Tu jau pradėjai matyti.

Tai nebuvo klausimas.

– Mes pažįstamos?

– Dar ne.

– Iš kur žinote, ką matau?

– Nes sustojai.

– Daugelis būtų sustoję.

– Ne.

Moteris papurtė galvą.

– Daugelis būtų praėję greičiau.

Ji paėmė vieną veidrodžio šukę.

Ištiesė Linai.

– Paimk.

– Kodėl?

– Todėl, kad dar klausi.

Lina neėmė.

– Kas jūs?

– Nesvarbu.

– Vis tiek.

Moteris nusišypsojo.

– Žmonės mane vadina Kaulų rinkėja.

– O jūs?

– Aš savęs vardais nebevadinu.

Ji įdėjo šukę Linai į delną.

– Kai ateis laikas, suprasi, kodėl veidrodžiai lūžta pirmiau negu žmonės.

Ji apsisuko.

Nuėjo.

Lina liko stovėti.

Delne gulėjo mažas stiklo gabalėlis.

Jame atsispindėjo tik viena jos akis.

Ir kažkodėl atrodė, kad ta akis žiūri ne į pasaulį.

O į ją pačią.`
      }
    ]
  };
  /* ==================== ČIA BAIGIASI REDAGUOJAMA DALIS ==================== */


  var root = document.getElementById('knyga-root');
  var current = 0;

  function escapeHtml(s) {
    return String(s).replace(/[&<>]/g, function (c) {
      return { '&': '&amp;', '<': '&lt;', '>': '&gt;' }[c];
    });
  }

  function renderParagraphs(text) {
    return text.split(/\n\s*\n/).map(function (p) {
      return '<p>' + escapeHtml(p).replace(/\n/g, '<br>') + '</p>';
    }).join('');
  }

  function render() {
    var tabsHtml = CONFIG.skyriai.map(function (ch, i) {
      return '<button class="tab' + (i === current ? ' active' : '') + '" data-i="' + i + '">' +
        escapeHtml(ch.pavadinimas) + '</button>';
    }).join('');

    var chipsHtml = CONFIG.zenkliukai.map(function (z) {
      return '<span class="chip">' + escapeHtml(z) + '</span>';
    }).join('');

    var ch = CONFIG.skyriai[current];

    root.innerHTML =
      '<section class="hero">' +
        '<div class="hero-cover-wrap">' +
          '<img class="hero-cover" src="' + CONFIG.virselioNuoroda + '" alt="' + escapeHtml(CONFIG.pavadinimas) + ' viršelis">' +
          (CONFIG.plombosTekstas ? '<div class="hero-seal">' + escapeHtml(CONFIG.plombosTekstas) + '</div>' : '') +
        '</div>' +
        '<div class="hero-body">' +
          '<p class="hero-eyebrow">' + escapeHtml(CONFIG.virsutinisTekstas) + '</p>' +
          '<h1 class="hero-title">' + escapeHtml(CONFIG.pavadinimas) + '</h1>' +
          '<p class="hero-author">Autorius: <b>' + escapeHtml(CONFIG.autorius) + '</b></p>' +
          '<div class="hero-meta">' + chipsHtml + '</div>' +
          '<p class="hero-synopsis">' + escapeHtml(CONFIG.anotacija) + '</p>' +
          '<a href="#knyga-skaitymas" class="cta" id="knyga-skaityti-btn">SKAITYTI</a>' +
        '</div>' +
      '</section>' +
      '<section class="reader" id="knyga-skaitymas">' +
        '<nav class="tabs">' + tabsHtml + '</nav>' +
        '<article class="page">' +
          '<h2>' + escapeHtml(ch.pavadinimas) + '</h2>' +
          renderParagraphs(ch.tekstas) +
          '<div class="page-nav">' +
            '<button id="knyga-prev"' + (current === 0 ? ' disabled' : '') + '>&larr; Ankstesnis</button>' +
            '<button id="knyga-next"' + (current === CONFIG.skyriai.length - 1 ? ' disabled' : '') + '>Kitas &rarr;</button>' +
          '</div>' +
        '</article>' +
      '</section>';

    var tabButtons = root.querySelectorAll('.tab');
    for (var i = 0; i < tabButtons.length; i++) {
      tabButtons[i].addEventListener('click', function (e) {
        current = parseInt(e.currentTarget.getAttribute('data-i'), 10);
        render();
        document.getElementById('knyga-skaitymas').scrollIntoView({ behavior: 'smooth' });
      });
    }
    var prevBtn = document.getElementById('knyga-prev');
    var nextBtn = document.getElementById('knyga-next');
    if (prevBtn) prevBtn.addEventListener('click', function () {
      if (current > 0) { current--; render(); document.getElementById('knyga-skaitymas').scrollIntoView({ behavior: 'smooth' }); }
    });
    if (nextBtn) nextBtn.addEventListener('click', function () {
      if (current < CONFIG.skyriai.length - 1) { current++; render(); document.getElementById('knyga-skaitymas').scrollIntoView({ behavior: 'smooth' }); }
    });
  }

  render();
})();
</script>