/* Vordenk — Help: a library of books. Library → 3D cover → open book with Previous / Next.
   Self-contained; uses the site's gold accent when present. */

.header-left{ justify-self:start; display:flex; align-items:center; gap:4px; min-width:0; }
.header-left .header-corner{ justify-self:auto; }
.header-help .ico{ width:19px; height:19px; }

html.vkh-lock, html.vkh-lock body{ overflow:hidden; }

.vkh{
  --g1:var(--teal-300,#ecdca0); --g2:var(--teal-400,#d8be84); --g3:var(--teal-600,#a58c52);
  --ink:#2a2418; --paper:#f6efdf; --paper2:#ece1c8;
  position:fixed; inset:0; z-index:9500; display:flex; flex-direction:column; color:#eef3ea;
  font-family:var(--font-latin,'Google Sans',Roboto,sans-serif);
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(216,190,132,.16), transparent 60%),
    radial-gradient(900px 600px at 90% 110%, rgba(26,93,94,.35), transparent 60%),
    linear-gradient(180deg,#07161b,#030c10);
  animation:vkh-in .35s ease both;
}
@keyframes vkh-in{ from{ opacity:0; transform:scale(1.015); } to{ opacity:1; transform:none; } }
.vkh-top{
  display:flex; align-items:center; gap:10px; padding:calc(10px + env(safe-area-inset-top)) 16px 10px;
  border-bottom:1px solid rgba(216,190,132,.14); background:rgba(3,12,16,.55); backdrop-filter:blur(8px);
}
.vkh-title{ flex:1; min-width:0; font-weight:600; letter-spacing:.02em; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vkh-title small{ display:block; font-weight:400; font-size:11.5px; color:var(--slate-400,#9db8b3); letter-spacing:0; }
.vkh-btn{
  appearance:none; border:1px solid rgba(216,190,132,.28); color:#eef3ea; cursor:pointer;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  height:36px; padding:0 14px; border-radius:11px; font:inherit; font-size:13.5px; font-weight:500;
  display:inline-flex; align-items:center; gap:7px; transition:transform .15s, border-color .2s, background .2s, opacity .2s;
}
.vkh-btn:hover:not(:disabled){ border-color:var(--g2); background:rgba(216,190,132,.12); transform:translateY(-1px); }
.vkh-btn:active:not(:disabled){ transform:none; }
.vkh-btn:disabled{ opacity:.35; cursor:default; }
.vkh-btn svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.vkh-btn.icon{ width:36px; padding:0; justify-content:center; }
.vkh-btn:focus-visible, .vkh-book:focus-visible{ outline:2px solid var(--g1); outline-offset:3px; }
.vkh-body{ position:relative; flex:1; min-height:0; overflow:hidden; }
.vkh-view{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; overflow:auto; animation:vkh-view .45s ease both; }
@keyframes vkh-view{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* ------------------------------------------------ 1. library */
.vkh-lib{ padding:22px 16px calc(28px + env(safe-area-inset-bottom)); gap:6px; }
.vkh-lib h2{ margin:4px 0 0; font-size:22px; font-weight:600; letter-spacing:.01em; }
.vkh-lib p.sub{ margin:0 0 14px; color:var(--slate-400,#9db8b3); font-size:13.5px; text-align:center; }
.vkh-shelf{ width:min(940px,100%); display:flex; flex-wrap:wrap; justify-content:center; gap:0 18px; }
.vkh-row{ width:100%; display:flex; justify-content:center; align-items:flex-end; gap:16px; padding:10px 14px 0; position:relative; min-height:216px; }
.vkh-row::after{
  content:""; position:absolute; left:-2px; right:-2px; bottom:-14px; height:16px; border-radius:3px;
  background:linear-gradient(180deg,#7b5a34 0,#5a3f22 40%,#3c2914 100%);
  box-shadow:0 14px 22px -8px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,214,150,.35);
}
.vkh-row::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:46px; background:linear-gradient(180deg,transparent,rgba(0,0,0,.35)); pointer-events:none; }
.vkh-rowwrap{ width:100%; margin-bottom:30px; }
.vkh-book{
  all:unset; box-sizing:border-box; cursor:pointer; position:relative; z-index:1; width:96px; height:var(--bh,190px); flex:none;
  border-radius:3px 7px 7px 3px; color:#fff; display:block; transform-origin:50% 100%;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
  background:
    linear-gradient(90deg,rgba(0,0,0,.45) 0,rgba(255,255,255,.14) 7%,rgba(0,0,0,.12) 9%,transparent 14%,transparent 92%,rgba(0,0,0,.28)),
    repeating-radial-gradient(circle at 30% 20%,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),
    linear-gradient(160deg,var(--c1),var(--c2));
  box-shadow:0 10px 18px -8px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.06);
}
.vkh-book:hover, .vkh-book:focus-visible{ transform:translateY(-14px) rotate(-1.5deg); box-shadow:0 22px 26px -10px rgba(0,0,0,.85), 0 0 24px -4px rgba(216,190,132,.35); }
.vkh-book .bn{
  position:absolute; top:10px; left:50%; transform:translateX(-50%); font-size:11px; font-weight:700; letter-spacing:.08em;
  color:var(--g1); opacity:.9; padding-left:6px;
}
.vkh-book .bt{
  position:absolute; left:12px; right:6px; top:34px; bottom:12px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
  font-weight:700; font-size:12px; line-height:1.25; letter-spacing:.01em; padding:8px 2px; overflow-wrap:normal; border-top:1px solid rgba(236,220,160,.55); border-bottom:1px solid rgba(236,220,160,.55);
  background:linear-gradient(180deg,var(--g1),var(--g3)); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}
.vkh-book .bt em{ font-style:normal; font-weight:500; font-size:9.5px; margin-top:6px; letter-spacing:.03em; }
.vkh-hint{ margin-top:6px; font-size:12.5px; color:var(--slate-500,#7a9995); text-align:center; }

/* ------------------------------------------------ 2. 3D cover */
.vkh-cover{ justify-content:center; gap:0; padding:10px 16px calc(18px + env(safe-area-inset-bottom)); }
.vkh-stage{ position:relative; width:min(420px,100%); height:min(430px,56vh); display:grid; place-items:center; perspective:1300px; touch-action:none; cursor:grab; user-select:none; }
.vkh-stage:active{ cursor:grabbing; }
.vkh-stage::before{ content:""; position:absolute; left:50%; bottom:6%; width:62%; height:30px; transform:translateX(-50%); border-radius:50%; background:radial-gradient(closest-side,rgba(0,0,0,.65),transparent); filter:blur(6px); }
.vkh-stage::after{ content:""; position:absolute; inset:12% 14%; border-radius:50%; background:radial-gradient(closest-side,rgba(216,190,132,.18),transparent); filter:blur(18px); pointer-events:none; }
.vkh-3d{ --w:230px; --h:316px; --d:46px; position:relative; width:var(--w); height:var(--h); transform-style:preserve-3d; will-change:transform; }
.vkh-face{ position:absolute; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.vkh-front, .vkh-back{ inset:0; border-radius:3px 9px 9px 3px; }
.vkh-front{
  transform:translateZ(calc(var(--d)/2));
  background:
    linear-gradient(90deg,rgba(0,0,0,.5) 0,rgba(255,255,255,.16) 3.5%,rgba(0,0,0,.22) 5.5%,transparent 10%,transparent 94%,rgba(0,0,0,.3)),
    var(--gloss,linear-gradient(115deg,rgba(255,255,255,.16),transparent 38%,transparent 62%,rgba(255,255,255,.07))),
    repeating-radial-gradient(circle at 30% 20%,rgba(255,255,255,.04) 0 1px,transparent 1px 3px),
    linear-gradient(160deg,var(--c1),var(--c2));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), inset 0 0 40px rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center; padding:26px 22px 26px 30px;
}
.vkh-frame{
  width:100%; height:100%; border:1.5px solid rgba(236,220,160,.7); border-radius:4px; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:20px 14px;
  box-shadow:inset 0 0 0 5px transparent, inset 0 0 0 6px rgba(236,220,160,.28);
}
.vkh-frame .no{ font-size:12px; letter-spacing:.3em; color:var(--g1); opacity:.85; margin-bottom:16px; }
.vkh-frame h3{
  margin:0; font-size:25px; line-height:1.15; font-weight:700; letter-spacing:.02em;
  background:linear-gradient(180deg,var(--g1),var(--g3) 80%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.55)) drop-shadow(0 0 8px rgba(216,190,132,.2));
}
.vkh-frame hr{ width:52px; border:0; height:2px; background:linear-gradient(90deg,transparent,var(--g1),transparent); margin:16px 0; }
.vkh-frame p{ margin:0; font-size:12px; color:rgba(238,243,234,.82); line-height:1.5; letter-spacing:.04em; }
.vkh-frame .mark{ position:absolute; bottom:12px; font-size:10px; letter-spacing:.35em; color:var(--g2); opacity:.8; }
.vkh-back{ transform:rotateY(180deg) translateZ(calc(var(--d)/2)); background:linear-gradient(200deg,var(--c1),var(--c2)); box-shadow:inset 0 0 40px rgba(0,0,0,.5); }
.vkh-spine{ width:var(--d); height:100%; left:0; top:0; transform:rotateY(-90deg); left:calc(var(--d) / -2); background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(255,255,255,.15) 30%,rgba(0,0,0,.3)),linear-gradient(180deg,var(--c1),var(--c2)); }
.vkh-spine::after{ content:""; position:absolute; inset:18px 10px; border-top:1px solid rgba(236,220,160,.6); border-bottom:1px solid rgba(236,220,160,.6); }
.vkh-pagesr, .vkh-pagest, .vkh-pagesb{ background:repeating-linear-gradient(90deg,#f3ead2 0 2px,#d9ccab 2px 3px); }
.vkh-pagesr{ width:var(--d); height:calc(100% - 8px); top:4px; right:calc(var(--d) / -2); transform:rotateY(90deg); background:repeating-linear-gradient(0deg,#f6efdc 0 2px,#d6c8a4 2px 3px); box-shadow:inset 0 0 12px rgba(80,60,20,.35); }
.vkh-pagest{ width:calc(100% - 8px); height:var(--d); left:0; top:calc(var(--d) / -2); transform:rotateX(90deg); }
.vkh-pagesb{ width:calc(100% - 8px); height:var(--d); left:0; bottom:calc(var(--d) / -2); transform:rotateX(-90deg); }
.vkh-face.vkh-pagest, .vkh-face.vkh-pagesb{ backface-visibility:visible; }
.vkh-face.vkh-pagesr{ backface-visibility:visible; }
.vkh-shine{ position:absolute; inset:0; border-radius:3px 9px 9px 3px; pointer-events:none; mix-blend-mode:screen; opacity:.55; background:radial-gradient(circle at var(--sx,30%) var(--sy,20%),rgba(255,255,255,.35),transparent 45%); }
.vkh-info{ text-align:center; max-width:480px; margin-top:4px; }
.vkh-info p{ margin:6px 0 0; font-size:13.5px; color:var(--slate-400,#9db8b3); line-height:1.5; }
.vkh-open-hint{
  margin-top:12px; display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px; font-size:13px; font-weight:500; color:var(--g1);
  border:1px solid rgba(216,190,132,.35); background:rgba(216,190,132,.08); cursor:pointer; font-family:inherit; animation:vkh-pulse 2.4s ease-in-out infinite;
}
.vkh-open-hint svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@keyframes vkh-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(216,190,132,.0); } 50%{ box-shadow:0 0 18px 1px rgba(216,190,132,.28); } }
.vkh-opening .vkh-3d{ transition:transform .7s cubic-bezier(.5,0,.2,1) !important; }
.vkh-opening{ animation:vkh-zoom .65s cubic-bezier(.5,0,.2,1) forwards; }
@keyframes vkh-zoom{ to{ opacity:0; transform:scale(1.35); } }

/* ------------------------------------------------ 3. reader */
.vkh-read{ justify-content:center; padding:14px 12px calc(14px + env(safe-area-inset-bottom)); gap:14px; }
.vkh-book-open{
  position:relative; width:min(960px,100%); height:min(560px,calc(100% - 64px)); perspective:2200px; display:flex; flex:none;
  border-radius:8px; padding:10px; background:linear-gradient(160deg,var(--c1),var(--c2)); box-shadow:0 30px 60px -20px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.08);
}
.vkh-spread{ position:relative; flex:1; display:flex; border-radius:3px; background:var(--paper2); box-shadow:inset 0 0 0 1px rgba(0,0,0,.18); }
.vkh-pg{
  position:relative; flex:1; min-width:0; padding:30px 34px 38px; color:var(--ink); overflow:hidden; display:flex; flex-direction:column;
  background:
    radial-gradient(120% 80% at 50% 0,rgba(255,255,255,.55),transparent 60%),
    repeating-linear-gradient(0deg,rgba(120,90,40,.025) 0 1px,transparent 1px 4px),
    var(--paper);
}
.vkh-pg.l{ border-radius:3px 0 0 3px; box-shadow:inset -34px 0 38px -26px rgba(60,40,10,.55), inset 5px 0 12px -8px rgba(60,40,10,.25); }
.vkh-pg.r{ border-radius:0 3px 3px 0; box-shadow:inset 34px 0 38px -26px rgba(60,40,10,.55), inset -5px 0 12px -8px rgba(60,40,10,.25); }
.vkh-pg h4{ margin:0 0 4px; font-size:21px; font-weight:700; line-height:1.2; color:#3a2d12; letter-spacing:.01em; }
.vkh-pg h4::after{ content:""; display:block; width:44px; height:2px; margin-top:10px; background:linear-gradient(90deg,var(--g3),transparent); }
.vkh-pg .txt{ margin-top:14px; overflow:hidden; font-size:14.5px; line-height:1.65; flex:1; padding-right:4px; }
.vkh-pg .txt p{ margin:0 0 10px; }
.vkh-pg .txt ul{ margin:0 0 10px; padding-left:20px; }
.vkh-pg .txt li{ margin:0 0 6px; }
.vkh-pg .txt b{ color:#5a3f10; }
.vkh-pg .txt kbd{ font:600 12px/1 inherit; padding:2px 6px; border-radius:5px; background:#fff8e6; border:1px solid #cdbb8a; box-shadow:0 1px 0 #cdbb8a; }
.vkh-pg .num{ position:absolute; bottom:14px; left:0; right:0; text-align:center; font-size:11.5px; color:#8a7647; letter-spacing:.15em; }
.vkh-pg.blank .num{ display:none; }
.vkh-pg.cover-pg{ align-items:center; justify-content:center; text-align:center; }
.vkh-pg.cover-pg h4::after{ margin-inline:auto; }
.vkh-pg.cover-pg .txt{ flex:none; }
.vkh-narrow .vkh-pg.l{ display:none; }
.vkh-narrow .vkh-pg.r{ border-radius:3px; box-shadow:inset 6px 0 14px -8px rgba(60,40,10,.4); }
.vkh-leaf{
  position:absolute; top:0; bottom:0; width:50%; transform-style:preserve-3d; z-index:5; pointer-events:none;
  transition:transform .85s cubic-bezier(.45,.05,.25,1);
}
.vkh-leaf.next{ right:0; transform-origin:left center; }
.vkh-leaf.prev{ left:0; transform-origin:right center; }
.vkh-leaf .f, .vkh-leaf .b{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; display:flex; }
.vkh-leaf .b{ transform:rotateY(180deg); }
.vkh-leaf .vkh-pg{ flex:1; }
.vkh-leaf::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(0,0,0,.18),transparent 40%); opacity:0; transition:opacity .85s; }
.vkh-leaf.go::after{ opacity:1; }
.vkh-narrow .vkh-spread.tilt-next .vkh-pg.r{ animation:vkh-tn .45s ease; }
.vkh-narrow .vkh-spread.tilt-prev .vkh-pg.r{ animation:vkh-tp .45s ease; }
@keyframes vkh-tn{ from{ opacity:0; transform:perspective(1200px) rotateY(-14deg) translateX(18px); } to{ opacity:1; transform:none; } }
@keyframes vkh-tp{ from{ opacity:0; transform:perspective(1200px) rotateY(14deg) translateX(-18px); } to{ opacity:1; transform:none; } }
.vkh-nav{ display:flex; align-items:center; gap:12px; justify-content:center; flex:none; }
.vkh-nav .vkh-btn{ min-width:128px; justify-content:center; height:40px; white-space:nowrap; }
.vkh-count{ min-width:92px; text-align:center; font-size:12.5px; color:var(--slate-400,#9db8b3); letter-spacing:.06em; }

@media (max-width:640px){
  .vkh-book{ width:84px; }
  .vkh-row{ gap:10px; padding-inline:6px; min-height:200px; }
  .vkh-pg{ padding:22px 20px 34px; }
  .vkh-pg h4{ font-size:18px; }
  .vkh-pg .txt{ font-size:14px; }
  .vkh-nav .vkh-btn{ min-width:0; flex:1; padding:0 8px; font-size:13px; }
  .vkh-book .bt{ font-size:11px; }
  .vkh-book.long .bt{ font-size:9.5px; letter-spacing:0; }
  .vkh-book-open{ height:calc(100% - 64px); }
  .vkh-3d{ --w:200px; --h:276px; --d:40px; }
  .vkh-frame h3{ font-size:21px; }
}
@media (prefers-reduced-motion:reduce){
  .vkh, .vkh-view, .vkh-open-hint{ animation:none; }
  .vkh-leaf{ transition-duration:.01s; }
}

/* ------------------------------------------------ the empty book: pages you write on */
.vkh-note{
  flex:1; width:100%; resize:none; border:0; outline:0; background:transparent; color:var(--ink); font:inherit; font-size:15px; line-height:28px; padding:0; min-height:0;
  background-image:repeating-linear-gradient(transparent 0 27px,rgba(120,90,40,.22) 27px 28px); background-attachment:local;
}
.vkh-note::placeholder{ color:#a89a74; }
.vkh-ntitle{
  width:min(420px,100%); flex:none; text-align:center; font:inherit; font-size:15px; font-weight:600; color:#eef3ea; padding:8px 12px; border-radius:11px;
  background:rgba(255,255,255,.05); border:1px solid rgba(216,190,132,.28); outline:0;
}
.vkh-ntitle:focus{ border-color:var(--g2); }
.vkh-book-open.has-title{ height:min(560px,calc(100% - 118px)); }
.vkh-nav{ flex-wrap:wrap; }
@media (max-width:640px){ .vkh-book-open.has-title{ height:calc(100% - 118px); } }

/* the reader never scrolls: the book fits the screen and each page fits the book */
.vkh-read{ overflow:hidden; }
.vkh-pg .txt p:last-child, .vkh-pg .txt ul:last-child{ margin-bottom:0; }

/* refined spine labels: a printed cream plate with dark ink, so every cover colour (the blue one included) reads clearly */
.vkh-book .bt{
  left:13px; right:8px; top:36px; bottom:18px; padding:8px 4px; border:1px solid rgba(70,48,12,.55); border-radius:3px;
  background:linear-gradient(180deg,#f7f0de,#e3d4ae); -webkit-background-clip:border-box; background-clip:border-box;
  color:#2a2012; -webkit-text-fill-color:#2a2012; text-shadow:0 1px 0 rgba(255,255,255,.55);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.35), inset 0 0 0 3px rgba(120,90,30,.25), 0 2px 3px rgba(0,0,0,.45);
}
.vkh-book .bt em{ color:#6a4a12; -webkit-text-fill-color:#6a4a12; font-weight:600; border-top:1px solid rgba(106,74,18,.35); padding-top:5px; width:78%; }
.vkh-book .bn{ color:#f1e3b4; text-shadow:0 1px 2px rgba(0,0,0,.6); opacity:1; }

/* =====================================================================================================================
   Library makeover: a lit reading room (switchable bulb), richer shelves, serif title; notebook with fountain pen
   ===================================================================================================================== */
.vkh{
  background:
    radial-gradient(1000px 620px at 50% -8%, rgba(255,214,140,.15), transparent 62%),
    radial-gradient(900px 600px at 92% 112%, rgba(26,93,94,.30), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.016) 0 2px, transparent 2px 14px),
    linear-gradient(180deg,#08181d,#030c10);
}
.vkh::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:1; background:radial-gradient(ellipse at 50% 38%, transparent 52%, rgba(0,0,0,.5)); }
.vkh-top{ position:relative; z-index:4; }
.vkh-body{ transition:filter .55s ease; }

/* the hanging bulb: tap it to switch the light on or off */
.vkh-glow{ position:absolute; inset:0; z-index:5; pointer-events:none; opacity:0; transition:opacity .6s ease; mix-blend-mode:screen;
  background:radial-gradient(ellipse 58% 52% at 50% 0, rgba(255,214,140,.30), rgba(255,214,140,.10) 42%, transparent 74%); }
.vkh.lit .vkh-glow{ opacity:1; }
.vkh:not(.lit) .vkh-body{ filter:brightness(.4) saturate(.8); }
.vkh[data-level="read"]:not(.lit) .vkh-body, .vkh[data-level="cover"]:not(.lit) .vkh-body{ filter:brightness(.62) saturate(.85); }
.vkh-bulbwrap{ position:absolute; top:0; left:50%; width:44px; height:74px; margin-left:-22px; z-index:7; pointer-events:none; }
.vkh-bulb{ all:unset; box-sizing:border-box; pointer-events:auto; cursor:pointer; display:block; width:44px; height:74px; transform-origin:50% 0; }
.vkh-bulb svg{ width:44px; height:74px; overflow:visible; }
.vkh-bulb .wire{ stroke:#a8936a; stroke-width:2; fill:none; }
.vkh-bulb .sock{ fill:#6d5a38; stroke:#3b2f19; stroke-width:1; }
.vkh-bulb .ridge{ stroke:#3b2f19; stroke-width:1.2; fill:none; }
.vkh-bulb .glass{ fill:#33403f; stroke:rgba(255,255,255,.28); stroke-width:1; transition:fill .4s; }
.vkh-bulb .fil{ fill:none; stroke:#5b574d; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:stroke .4s; }
.vkh-bulb .shine{ fill:none; stroke:rgba(255,255,255,.35); stroke-width:1.8; stroke-linecap:round; }
.vkh.lit .vkh-bulb .glass{ fill:url(#vkh-gl); stroke:rgba(255,236,170,.9); }
.vkh.lit .vkh-bulb .fil{ stroke:#ff9d1f; }
.vkh.lit .vkh-bulb svg{ filter:drop-shadow(0 0 9px rgba(255,205,100,.95)) drop-shadow(0 0 26px rgba(255,190,80,.6)); }
.vkh-bulb:focus-visible{ outline:2px solid var(--g1); outline-offset:4px; border-radius:12px; }
.vkh-bulb.swing{ animation:vkh-swing 1s cubic-bezier(.3,.1,.3,1); }
@keyframes vkh-swing{ 0%{ transform:rotate(0); } 18%{ transform:rotate(9deg); } 40%{ transform:rotate(-7deg); } 60%{ transform:rotate(4deg); } 80%{ transform:rotate(-2deg); } 100%{ transform:rotate(0); } }
.vkh-title{ flex:0 1 auto; max-width:calc(50% - 58px); }
.vkh-top [data-act="close"]{ margin-inline-start:auto; }

/* library: serif title with an ornament, recessed shelves with wood grain, banded spines */
.vkh-lib{ padding-top:30px; }
.vkh-lib h2{
  font-family:Georgia,"Times New Roman",serif; font-size:27px; font-weight:700; letter-spacing:.07em; margin-top:16px;
  background:linear-gradient(180deg,var(--g1),var(--g3)); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}
.vkh-lib h2::after{ content:"❖"; display:block; font-size:12px; letter-spacing:0; margin-top:3px; opacity:.75; -webkit-text-fill-color:var(--g2); }
.vkh-lib p.sub{ font-style:italic; }
.vkh-rowwrap{
  position:relative; padding:8px 8px 0; border-radius:8px 8px 0 0;
  background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.12) 72%,rgba(0,0,0,.30));
  box-shadow:inset 0 12px 20px -12px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.035);
}
.vkh-row::after{
  height:18px; bottom:-16px; border-radius:2px 2px 4px 4px;
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.10) 0 2px,transparent 2px 11px),
    linear-gradient(180deg,#9a7343 0,#76552d 34%,#4a3419 100%);
  box-shadow:0 16px 24px -8px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,224,170,.5), inset 0 -2px 0 rgba(0,0,0,.35);
}
.vkh-book::before, .vkh-book::after{ content:""; position:absolute; left:9px; right:0; height:3px; background:linear-gradient(90deg,transparent,rgba(236,220,160,.55) 25%,rgba(236,220,160,.55) 75%,transparent); pointer-events:none; }
.vkh-book::before{ top:25px; } .vkh-book::after{ bottom:7px; }
.vkh.lit .vkh-book{ box-shadow:0 10px 18px -8px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.08), inset 0 22px 26px -18px rgba(255,236,190,.28); }
.vkh-hint{ font-style:italic; }

/* notebook toolbar: Keyboard / Fountain pen */
.vkh-nbbar{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px 12px; flex:none; width:min(640px,100%); }
.vkh-seg{ display:inline-flex; gap:6px; }
.vkh-btn.sm{ height:32px; padding:0 11px; font-size:13px; border-radius:10px; }
.vkh-btn.sm.icon{ width:32px; padding:0; }
.vkh-btn.on{ border-color:var(--g2); background:rgba(216,190,132,.22); color:var(--g1); }
.vkh-btn.warn{ border-color:#e08a70; background:rgba(224,138,112,.22); }
.vkh-btn .short{ display:none; }
.vkh-pentools{ display:none; align-items:center; gap:6px; }
.vkh.pen .vkh-pentools{ display:inline-flex; flex-wrap:wrap; justify-content:center; }
.vkh-sep{ width:1px; height:20px; background:rgba(216,190,132,.28); margin:0 2px; }
.vkh-sw{ all:unset; box-sizing:border-box; width:24px; height:24px; border-radius:50%; cursor:pointer; border:2px solid rgba(255,255,255,.3); }
.vkh-sw.on{ border-color:var(--g1); box-shadow:0 0 0 2px rgba(0,0,0,.45), 0 0 10px rgba(216,190,132,.45); }
.vkh-nib{ all:unset; box-sizing:border-box; width:28px; height:28px; border-radius:8px; cursor:pointer; display:inline-grid; place-items:center; border:1px solid rgba(216,190,132,.28); }
.vkh-nib i{ display:block; border-radius:50%; background:#eef3ea; }
.vkh-nib.on{ border-color:var(--g2); background:rgba(216,190,132,.22); }
.vkh-sw:focus-visible, .vkh-nib:focus-visible{ outline:2px solid var(--g1); outline-offset:2px; }
.vkh-book-open.has-bar{ height:min(560px,calc(100% - 168px)); }
.vkh-ink{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; }
.vkh.pen .vkh-ink{ pointer-events:auto; touch-action:none; cursor:crosshair; }
.vkh.pen .vkh-note{ pointer-events:none; }
@media (max-width:640px){
  .vkh-book-open.has-bar{ height:calc(100% - 172px); }
  .vkh-btn .long{ display:none; } .vkh-btn .short{ display:inline; }
  .vkh-nbbar{ gap:4px 8px; }
  .vkh-sw{ width:22px; height:22px; } .vkh-nib{ width:26px; height:26px; }
  .vkh-lib h2{ font-size:24px; }
}
@media (prefers-reduced-motion:reduce){ .vkh-bulb.swing{ animation:none; } .vkh-body, .vkh-glow{ transition:none; } }
@media (max-width:640px){ .vkh-nav .vkh-btn svg{ display:none; } .vkh-nav{ gap:8px; } }

/* phone: three buttons and the page count must all fit on one row (the notebook has "+ Add pages" too) */
@media (max-width:640px){
  .vkh-count{ min-width:46px; padding:0 2px; font-size:12px; letter-spacing:0; }
  .vkh-nav .vkh-btn{ padding:0 6px; font-size:12.5px; }
}

.founder-pg h4{ margin-bottom:10px; }
.founder-pg .txt p{ margin:0 0 .7em; }