.vk-recent{position:absolute;z-index:60;box-sizing:border-box;padding:6px;border-radius:14px;
  background:var(--vk-pop,#141417);border:1px solid var(--vk-line2,#2A2A2F);box-shadow:var(--vk-pop-shadow,0 18px 44px -12px rgba(0,0,0,.85));
  font:500 14px/20px Inter,system-ui,sans-serif;text-align:left}
[data-theme="light"] .vk-recent{background:var(--vk-pop,#FFFFFF);border-color:var(--vk-line2,rgba(11,15,13,.14));box-shadow:var(--vk-pop-shadow,0 12px 32px -12px rgba(11,15,13,.18))}
.vk-recent[hidden]{display:none}
.vk-recent-hd{margin:4px 10px 4px;font-size:12px;line-height:16px;font-weight:500;color:var(--vk-faint,#80808A)}
.vk-recent-row{display:flex;align-items:center;gap:4px;border-radius:9px}
.vk-recent-row.on,.vk-recent-row:hover{background:var(--vk-fill,rgba(255,255,255,.05))}
[data-theme="light"] .vk-recent-row.on,[data-theme="light"] .vk-recent-row:hover{background:var(--vk-fill,rgba(11,15,13,.045))}
.vk-recent-pick{flex:1;min-width:0;display:flex;align-items:center;gap:12px;height:44px;padding:0 10px;border:0;background:none;font:inherit;color:var(--vk-ink,#F4F4F5);text-align:left;cursor:pointer}
[data-theme="light"] .vk-recent-pick{color:var(--vk-ink,#0B0F0D)}
.vk-recent-ic{flex:none;width:20px;height:20px;border-radius:5px;object-fit:cover;display:grid;place-items:center;font-size:11px;font-weight:600;line-height:1;
  background:var(--vk-fill,rgba(255,255,255,.06));color:var(--vk-faint,#80808A)}
[data-theme="light"] .vk-recent-ic{background:var(--vk-fill,rgba(11,15,13,.06))}
.vk-recent-tx{min-width:0;display:flex;align-items:baseline;gap:8px;white-space:nowrap;overflow:hidden}
.vk-recent-nm{flex:none;max-width:60%;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.vk-recent-h{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:13px;font-weight:400;color:var(--vk-faint,#80808A)}
.vk-recent-h b{font-weight:600;color:var(--vk-ink,#F4F4F5)}
[data-theme="light"] .vk-recent-h b{color:var(--vk-ink,#0B0F0D)}
.vk-recent-x{flex:none;width:30px;height:30px;margin-right:6px;border:0;border-radius:8px;background:none;color:var(--vk-faint,#80808A);cursor:pointer;display:grid;place-items:center;opacity:0;transition:opacity .12s}
.vk-recent-row.on .vk-recent-x,.vk-recent-row:hover .vk-recent-x,.vk-recent-x:focus-visible{opacity:1}
.vk-recent-x:hover{color:var(--vk-ink,#F4F4F5);background:var(--vk-fill,rgba(255,255,255,.06))}
[data-theme="light"] .vk-recent-x:hover{color:var(--vk-ink,#0B0F0D);background:var(--vk-fill,rgba(11,15,13,.06))}
.vk-recent-ft{display:flex;justify-content:flex-end;margin:2px 4px 0;padding-top:4px;border-top:1px solid var(--vk-line,rgba(255,255,255,.06))}
[data-theme="light"] .vk-recent-ft{border-top-color:var(--vk-line,rgba(11,15,13,.07))}
.vk-recent-clear{height:28px;padding:0 8px;border:0;border-radius:7px;background:none;font:500 12px/16px Inter,system-ui,sans-serif;color:var(--vk-faint,#80808A);cursor:pointer}
.vk-recent-clear:hover{color:var(--vk-ink,#F4F4F5)}
[data-theme="light"] .vk-recent-clear:hover{color:var(--vk-ink,#0B0F0D)}
@media (hover:none){.vk-recent-x{opacity:1}}
@media (prefers-reduced-motion:reduce){.vk-recent-x{transition:none}}

/* Every width since 2026-10-28 (phones get the same animated hero; their sizes are in src/homeDesk.js). */
@media all{
  .vkrh.r4,.vkrh.r4 *{box-sizing:border-box}
  .r4.r4{--K:1;--S:.6;--bgh:732px;--bt:-300px;--ease:cubic-bezier(.16,1,.3,1);--ink:#050506;--snow:#F2F1EE;--stone:#9C9A95;--ash:#82807B;
    --h1:53px;--h1l:55px;--subm:11px;--subf:17px;--subl:26px;--urlm:24px;--urlw:500px;--urlh:50px;--uf:15px;--bh:36px;--nm:28px;--nf:12.5px;--fh:144px;
    position:relative;overflow:hidden;contain:paint;isolation:isolate;text-align:center;background:var(--ink);color:var(--snow);
    padding:47px 28px 34px;border:1px solid var(--vkr-line);border-radius:18px}
  .r4.r4 .bgk{position:absolute;left:0;top:0;width:1440px;height:var(--bgh);transform:scale(var(--K));transform-origin:0 0;pointer-events:none;z-index:0}
  .r4.r4 .beams{position:absolute;left:-280px;top:var(--bt);width:2000px;height:1150px}
  .r4.r4 .beams b,.r4.r4 .beams i{position:absolute;inset:0;display:block}
  .r4.r4 .beams i.lay{inset:auto;left:260px;top:30px;width:1480px;height:860px;background-size:100% 100%}
  .r4.r4 .b-back{background-image:url(/hero/beams/m-b-back.webp);opacity:.55}
  .r4.r4 .b-mid{background-image:url(/hero/beams/m-b-mid.webp)}
  .r4.r4 .b-front{background-image:url(/hero/beams/m-b-front.webp)}
  .r4.r4 .front-blend{mix-blend-mode:normal}
  .r4.r4 .beams i.core{position:absolute;inset:auto;left:550px;top:388px;width:900px;height:420px;background:url(/hero/beams/m-core.webp) 0 0/100% 100%}
  .r4.r4 .grain{position:absolute;inset:-96px;z-index:0;pointer-events:none;opacity:.07;background:url(/hero/grain.webp) 176px 130px}
  .r4.r4 .veil2{position:absolute;z-index:0;pointer-events:none;left:50%;top:var(--vy);width:calc(var(--vrx) * 2);height:calc(var(--vry) * 2);margin:calc(var(--vry) * -1) 0 0 calc(var(--vrx) * -1);
    background:radial-gradient(closest-side,rgba(5,5,6,.82),transparent 75%)}
  .r4.r4 .fade{position:absolute;z-index:0;left:0;right:0;bottom:0;height:var(--fh);background:linear-gradient(transparent,var(--ink));pointer-events:none}
  .r4.r4 .in{position:relative;z-index:2}
  .r4.r4 .pgrain{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background:url(/hero/grain-page.webp)}
  .r4.r4 .shelfbox{height:calc(208px * var(--S));margin-bottom:calc(52px * var(--S))}
  .r4.r4 .shelfbox[data-rows="1"]{height:calc(96px * var(--S))}
  .r4.r4 .shelf2{position:relative;width:544px;height:208px;left:50%;margin-left:-272px;transform:scale(var(--S));transform-origin:50% 0}
  .r4.r4 .shelf2[data-rows="1"]{height:96px}
  .r4.r4 .slot{position:absolute;width:96px;height:96px}
  .r4.r4 .slot b{position:absolute;inset:0;display:block}
  .r4.r4 .sx,.r4.r4 .sm{transform-style:preserve-3d}
  .r4.r4 .drop,.r4.r4 .tile2{position:absolute;inset:0}
  .r4.r4 .face{position:absolute;inset:0;border-radius:26px;display:grid;place-items:center;overflow:hidden;
    background:rgba(12,12,14,.72);border:1px solid rgba(255,255,255,.1);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 18px 40px -18px rgba(0,0,0,.85)}
  .r4.r4 .face::before{content:attr(data-let);font:600 22px/1 Inter,sans-serif;color:rgba(242,241,238,.72)}
  .r4.r4 .face:has(.mark)::before{content:none}
  .r4.r4 .face .mark{position:absolute;width:52px;height:52px;object-fit:contain;border-radius:12px;pointer-events:none}
  .r4.r4 .glow{position:absolute;inset:0;border-radius:26px;opacity:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(52,211,153,.4),0 18px 44px -14px rgba(16,185,129,.6)}
  .r4.r4 .ring{position:absolute;inset:-6px;border-radius:30px;border:1.5px solid rgba(52,211,153,.8);opacity:0;pointer-events:none}
  .r4.r4 .frost{position:absolute;inset:0;border-radius:26px;overflow:hidden;pointer-events:none}
  .r4.r4 .frost b{position:absolute;display:block}
  .r4.r4 .fw{left:0;top:0;width:0;height:0;transform-origin:0 0}
  .r4.r4 .fv{width:1210px;background:radial-gradient(closest-side,rgba(5,5,6,.82),transparent 75%)}
  .r4.r4 .fb{width:0;height:0}
  .r4.r4 .frost .fg{inset:0;background:rgba(187,186,186,.035)}
  .r4.r4 .fwin .bm,.r4.r4 .fwin .bx,.r4.r4 .fwin .by{inset:0}
  .r4.r4 .fwin i{position:absolute;inset:0;display:block;background-size:1480px 860px;background-repeat:no-repeat}
  .r4.r4 .fwin i.b-mid{background-image:url(/hero/beams/m-frost-b-mid.webp)}
  .r4.r4 .fwin i.b-front{background-image:url(/hero/beams/m-frost-b-front.webp)}
  .r4.r4 .fwin i.fc{background-image:url(/hero/beams/m-core.webp);background-size:900px 420px}
  .r4.r4 #vkrhH1{font:600 var(--h1)/var(--h1l) Inter,sans-serif;letter-spacing:normal;margin:0;color:var(--snow)}
  .r4.r4 .sub{margin:var(--subm) auto 0;max-width:none;font-size:var(--subf);line-height:var(--subl);color:var(--stone)}
  .r4.r4 .url{position:relative;margin:var(--urlm) auto 0;width:min(var(--urlw),100%);height:var(--urlh);display:flex;align-items:center;gap:8px;padding:0 7px 0 18px;border-radius:17px;text-align:left;
    background:#0B0B0C;border:1px solid rgba(255,255,255,.11);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 24px 60px -28px rgba(0,0,0,.9)}
  .r4.r4 .url:hover{border-color:rgba(255,255,255,.22)}
  .r4.r4 .url .line{display:flex;align-items:center;flex:1;min-width:0;height:100%;gap:0;overflow:hidden}
  .r4.r4 .url .pre{color:#8A8883;font:400 var(--uf)/1 Inter,sans-serif;letter-spacing:normal;flex:none;white-space:nowrap;margin:0;padding:0;cursor:text;user-select:none;-webkit-user-select:none;transition:none}
  .r4.r4 .url .ellip{display:none;flex:none;margin:0;padding:0;color:#8A8883;font:400 var(--uf)/1 Inter,sans-serif;letter-spacing:normal;pointer-events:none;user-select:none;-webkit-user-select:none}
  .r4.r4 .url.scrolled .ellip{display:block}
  .r4.r4 .url.has .pre{color:var(--snow)}
  .r4.r4 .field{position:relative;flex:1;min-width:0;height:100%;display:flex;align-items:center;margin:0;padding:0;overflow:hidden}
  .r4.r4 .field input::placeholder{color:transparent}
  .r4.r4 .url input{flex:1;width:100%;min-width:0;height:100%;margin:0;border:0;outline:none;background:transparent;font:400 var(--uf)/1 Inter,sans-serif;letter-spacing:normal;line-height:var(--uf);color:var(--snow);caret-color:var(--snow);padding:0;position:relative;z-index:1;-webkit-appearance:none;appearance:none;border-radius:0}
  .r4.r4 .url input:focus{outline:none;box-shadow:none}
  .r4.r4 .url input:invalid{box-shadow:none;outline:none}
  /* Chrome draws a picked or previewed history entry in its own smaller font unless the first line is set (owner 2026-10-27:
     "when selecting a history, the font text in the search bar gets really weird"). */
  .r4.r4 .url input:-webkit-autofill::first-line{font:400 var(--uf)/1 Inter,sans-serif;letter-spacing:normal}
  .r4.r4 .url input:-webkit-autofill,.r4.r4 .url input:-webkit-autofill:hover,.r4.r4 .url input:-webkit-autofill:focus{ -webkit-text-fill-color:var(--snow);caret-color:var(--snow);font:400 var(--uf)/1 Inter,sans-serif;letter-spacing:normal;border-radius:0;-webkit-box-shadow:0 0 0 1000px #0B0B0C inset;box-shadow:0 0 0 1000px #0B0B0C inset;transition:background-color 99999s ease-out 0s;animation:vkAutofill 0s 1}
  .r4.r4 .url-msg{position:absolute;left:18px;right:7px;top:calc(100% + 4px);height:16px;margin:0;padding:0;font:400 12px/16px Inter,sans-serif;color:#C98484;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* The one button (src/siteChrome.js): flat (owner 2026-10-27: "semi 3d, i hate it"). */
  .r4.r4 .url .btn{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:var(--bh);padding:0 16px 0 18px;margin:0;border:0;border-radius:var(--vk-btn-r);cursor:pointer;flex:none;
    color:var(--vk-btn-ink);font:600 14px/1 Inter,sans-serif;background:var(--vk-btn);box-shadow:none;filter:none;transition:background-color .15s}
  .r4.r4 .url .btn:hover{background:var(--vk-btn-hi)}
  .r4.r4 .url .btn:active{transform:translateY(1px)}
  .r4.r4 .url .btn:focus{outline:none}
  .r4.r4 .url .btn:focus-visible{outline:2px solid rgba(52,211,153,.7);outline-offset:2px}
  .r4.r4 .url .btn svg{transition:transform .2s var(--ease)}
  .r4.r4 .url .btn:hover svg{transform:translateX(2px)}
  .r4.r4 .typer{position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:0;font:400 var(--uf)/1 Inter,sans-serif;color:#8A8883;pointer-events:none;display:flex;align-items:center;white-space:pre;max-width:100%;overflow:hidden}
  .r4.r4 .typer .caret{display:inline-block;width:1.5px;height:calc(var(--uf) + 2px);margin-left:1px;background:#34D399;border-radius:1px}
  .r4.r4 .url.has .typer,.r4.r4 .url.busy .typer,.r4.r4 .url:focus-within .typer{display:none}
  .r4.r4 .url input.vkp-shake{animation:vkrShake .35s ease}
  .r4.r4 .note{margin:var(--nm) 0 0;font-size:var(--nf);line-height:24px;color:var(--ash)}
  .r4.r4 .url:focus-within{border-color:rgba(16,185,129,.6);box-shadow:0 0 0 3px rgba(16,185,129,.16),0 20px 50px -24px rgba(0,0,0,.9)}
  @media (prefers-reduced-motion:no-preference){
    .r4.r4 .beams{animation:vkrFadeUp 1.6s var(--ease) both}
    .r4.r4 .b-back{animation:vkrSweep 26s ease-in-out infinite alternate}
    .r4.r4 .b-mid{animation:vkrSweep 17s ease-in-out infinite alternate-reverse}
    .r4.r4 .b-front{animation:vkrSweep 12s ease-in-out infinite alternate,vkrBreathe 6s ease-in-out infinite}
    .r4.r4 .core{animation:vkrBreathe 7s ease-in-out infinite}
    .r4.r4 .grain{animation:vkrGrain .9s steps(6) infinite}
    .r4.r4 .tile2{animation:vkrBob var(--bd,7s) ease-in-out infinite;animation-delay:var(--bdl,0s)}
  }
  @keyframes vkrFadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
  @keyframes vkrSweep{from{transform:translate3d(-60px,0,0)}to{transform:translate3d(80px,10px,0)}}
  @keyframes vkrBreathe{0%,100%{opacity:.7}50%{opacity:1}}
  @keyframes vkrGrain{0%{transform:translate(0,0)}20%{transform:translate(-86px,29px)}40%{transform:translate(58px,-44px)}60%{transform:translate(-58px,-15px)}80%{transform:translate(86px,44px)}100%{transform:translate(0,0)}}
  @keyframes vkrBob{0%,100%{transform:translate3d(0,0,0) rotateX(0) rotateY(0)}33%{transform:translate3d(0,-6px,0) rotateX(5deg) rotateY(-4deg)}66%{transform:translate3d(0,3px,0) rotateX(-3deg) rotateY(4deg)}}
  @keyframes vkrShake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
  .r4.r4:not(.frost-live) .fwin,.r4.r4:not(.frost-live) .fwin *{animation:none!important}
  /* Light mode hero: the same card and layout; an emerald orb panel instead of the beams (Goddess of Taste's spec,
     the owner's picks Stripe + ElevenLabs). The two big orbs drift slowly; the spheres stay still. */
  .r4.r4 .orbp{display:none}
  [data-theme=light] .r4.r4{--ink:#FDFCFB;--snow:#0B0F0D;--stone:#3F4A45;--ash:#5F6662;background:#FDFCFB;border-color:rgba(11,15,13,.08);box-shadow:none}
  [data-theme=light] .r4.r4 .bgk,[data-theme=light] .r4.r4 .grain,[data-theme=light] .r4.r4 .veil2,[data-theme=light] .r4.r4 .fade,[data-theme=light] .r4.r4 .pgrain,[data-theme=light] .r4.r4 .frost{display:none}
  /* The card takes the page's colour and its orbs fade out before the edge, so the hero blends into the page like the
     dark beams fade into black (owner 2026-10-27: "make the hero visaul blend in more into the light mode website"). */
  [data-theme=light] .r4.r4 .orbp{display:block;position:absolute;inset:0;z-index:0;overflow:hidden;isolation:isolate;border-radius:inherit;pointer-events:none;-webkit-mask-image:radial-gradient(64% 70% at 50% 46%,#000 50%,transparent 100%);mask-image:radial-gradient(64% 70% at 50% 46%,#000 50%,transparent 100%)}
  [data-theme=light] .r4.r4 .orbp i{position:absolute;z-index:-2;border-radius:50%}
  [data-theme=light] .r4.r4 .orbp .o1{width:560px;height:460px;left:-160px;top:220px;background:radial-gradient(closest-side,rgba(52,211,153,.5),rgba(110,231,183,.25) 55%,rgba(110,231,183,0));filter:blur(60px)}
  [data-theme=light] .r4.r4 .orbp .o2{width:560px;height:460px;right:-140px;top:-160px;background:radial-gradient(closest-side,rgba(190,242,100,.5),rgba(217,249,157,.25) 55%,rgba(217,249,157,0));filter:blur(70px)}
  [data-theme=light] .r4.r4 .orbp .o4{width:420px;height:340px;left:30%;top:-170px;background:radial-gradient(closest-side,rgba(103,232,249,.38),rgba(165,243,252,.18) 55%,rgba(165,243,252,0));filter:blur(60px)}
  [data-theme=light] .r4.r4 .orbp .o5{width:420px;height:340px;right:10%;bottom:-170px;background:radial-gradient(closest-side,rgba(253,230,138,.42),rgba(254,243,199,.18) 55%,rgba(254,243,199,0));filter:blur(60px)}
  [data-theme=light] .r4.r4 .orbp .s1{display:none}
  [data-theme=light] .r4.r4 .orbp .s2{display:none}
  [data-theme=light] .r4.r4 .orbp .s3{display:none}
  [data-theme=light] .r4.r4 .orbp::before,[data-theme=light] .r4.r4 .orbp::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
  [data-theme=light] .r4.r4 .orbp::before{opacity:.13;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
  [data-theme=light] .r4.r4 .orbp::after{background:radial-gradient(50% 56% at 50% 64%,rgba(253,252,251,.82),rgba(253,252,251,.4) 55%,transparent 82%)}
  @keyframes vkrOrbA{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(40px,-30px,0) scale(1.06)}}
  @keyframes vkrOrbB{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-36px,28px,0) scale(1.06)}}
  @media (prefers-reduced-motion:no-preference){
    [data-theme=light] .r4.r4 .orbp .o1{animation:vkrOrbA 24s ease-in-out infinite alternate}
    [data-theme=light] .r4.r4 .orbp .o2{animation:vkrOrbB 30s ease-in-out infinite alternate}
  }
  [data-theme=light] .r4.r4 .tile2{animation:none!important}
  [data-theme=light] .r4.r4 #vkrhH1,[data-theme=light] .r4.r4 .sub,[data-theme=light] .r4.r4 .note{animation:none!important}
  [data-theme=light] .r4.r4 .face{background:#fff;border-color:rgba(11,15,13,.08);box-shadow:0 1px 2px rgba(11,15,13,.05)}
  [data-theme=light] .r4.r4 .face::before{color:rgba(11,15,13,.55)}
  [data-theme=light] .r4.r4 .glow{box-shadow:0 0 0 1px rgba(16,185,129,.45)}
  [data-theme=light] .r4.r4 .ring{border-color:rgba(16,185,129,.85)}
  [data-theme=light] .r4.r4 #vkrhH1{color:#0B0F0D}
  [data-theme=light] .r4.r4 .sub{color:#3F4A45}
  [data-theme=light] .r4.r4 .url{background:#fff;border:1px solid rgba(11,15,13,.14);border-radius:999px;box-shadow:0 1px 2px rgba(11,15,13,.04)}
  [data-theme=light] .r4.r4 .url:hover{border-color:rgba(11,15,13,.24)}
  [data-theme=light] .r4.r4 .url .line{gap:0}
  [data-theme=light] .r4.r4 .url .pre{color:#626C67;margin:0;padding:0}
  [data-theme=light] .r4.r4 .url .ellip{color:#626C67}
  [data-theme=light] .r4.r4 .url.has .pre{color:#0B0F0D}
  [data-theme=light] .r4.r4 .note{color:#5F6662}
  [data-theme=light] .r4.r4 .url input:-webkit-autofill,[data-theme=light] .r4.r4 .url input:-webkit-autofill:hover,[data-theme=light] .r4.r4 .url input:-webkit-autofill:focus{-webkit-text-fill-color:var(--snow);caret-color:var(--snow);-webkit-box-shadow:0 0 0 1000px #FFFFFF inset;box-shadow:0 0 0 1000px #FFFFFF inset}
  [data-theme=light] .r4.r4 .url-msg{color:#8E4545}
  [data-theme=light] .r4.r4 .typer{color:#3F4A45}
  [data-theme=light] .r4.r4 .typer .caret{background:#059669}
  /* One quiet focus state, as on the submit page (no green ring). */
  [data-theme=light] .r4.r4 .url:focus-within{border-color:rgba(11,15,13,.32);box-shadow:0 1px 2px rgba(11,15,13,.04)}
}



/* Every width since 2026-10-28; phones get their overrides in src/homeDesk.js (the phone block). */
@media all{
  .vkb .vkb-sticky{position:sticky;top:60px;z-index:30;margin:0 -10px;padding:10px 10px 0;background:var(--vkr-bg)}
  .vkb-bar{padding-bottom:10px;border-bottom:1px solid var(--vkr-line)}
  .vkb-row{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:nowrap}
  .vkb-row-note{margin-top:8px}
  .vkb-sp{flex:1 1 auto;min-width:8px}
  .vkb-note{font:400 12.5px/1 Inter,sans-serif;color:var(--vkr-t3);white-space:nowrap}
  .vkb button{font-family:inherit}
  .vkb-btn{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:8px;border:1px solid var(--vkr-line);background:transparent;color:var(--vkr-t2);font:500 13px/1 Inter,sans-serif;white-space:nowrap;cursor:pointer}
  .vkb-btn:hover{color:var(--vkr-t1);border-color:var(--vkr-line2)}
  .vkb-btn.on{color:var(--vkr-emt);background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.35)}
  .vkb-pop button:disabled{opacity:.35;cursor:default}
  .vkb-btn svg{flex:none;color:var(--vkr-t3)}
  .vkb-btn.on svg{color:var(--vkr-em)}
  .vkb-ico{width:30px;padding:0;justify-content:center;position:relative}
  .vkb-ico .vkb-dot{position:absolute;top:5px;right:5px}
  .vkb-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--vkr-em)}
  .vkb-menu{position:relative;flex:none}
  .vkb-pop{display:none;position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:200px;max-height:340px;overflow:auto;padding:6px;border-radius:12px;background:#141416;border:1px solid var(--vkr-line2);box-shadow:0 18px 44px -12px rgba(0,0,0,.9)}
  .vkb-seg3~.vkb-menu .vkb-list{left:0;right:auto}
  .vkb-menu.open .vkb-pop{display:block}
  .vkb-list button{appearance:none;-webkit-appearance:none;display:flex;align-items:center;width:100%;height:32px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--vkr-t1);font:500 13px/1 Inter,sans-serif;text-align:left;cursor:pointer;white-space:nowrap}
  .vkb-list button:hover{background:rgba(255,255,255,.06)}
  .vkb-list button[aria-checked=true]{color:var(--vkr-emt);background:rgba(16,185,129,.10)}
  .vkb-fpop{width:320px;padding:14px}
  .vkb-pg+.vkb-pg{margin-top:14px}
  .vkb-ph{font:600 12.5px/16px Inter,sans-serif;color:var(--vkr-t2);margin-bottom:8px}
  .vkb-seg{display:flex;gap:2px;padding:2px;border-radius:8px;border:1px solid var(--vkr-line)}
  .vkb-seg button{appearance:none;-webkit-appearance:none;flex:1;height:26px;padding:0 8px;border:0;border-radius:6px;background:transparent;color:var(--vkr-t2);font:500 12.5px/1 Inter,sans-serif;cursor:pointer}
  .vkb-seg button[aria-checked=true]{color:var(--vkr-emt);background:rgba(16,185,129,.12)}
  .vkb-tags{display:flex;flex-wrap:wrap;gap:6px}
  .vkb-tag{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-radius:7px;border:1px solid var(--vkr-line);background:transparent;color:var(--vkr-t2);font:500 12.5px/1 Inter,sans-serif;cursor:pointer}
  .vkb-tag[aria-pressed=true]{color:var(--vkr-emt);background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.35)}
  .vkb-pf{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:12px;border-top:1px solid var(--vkr-line)}
  .vkb-clr{appearance:none;-webkit-appearance:none;border:0;background:transparent;color:var(--vkr-t2);font:500 13px/1 Inter,sans-serif;cursor:pointer;padding:0}
  .vkb-clr:disabled{opacity:.45;cursor:default}
  .vkb-done{appearance:none;-webkit-appearance:none;height:30px;padding:0 14px;border:0;border-radius:8px;background:var(--vk-btn);color:var(--vk-btn-ink);font:600 13px/1 Inter,sans-serif;cursor:pointer}
  .vkb-done:hover{background:var(--vk-btn-hi)}

  /* The tabs, the time window and the rest of the line. */
  .vkb-seg3{display:inline-flex;gap:2px;height:36px;padding:3px;border-radius:10px;border:1px solid var(--vkr-line);background:var(--vkr-s1);flex:none}
  .vkb-seg3 button{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px 0 8px;border:0;border-radius:7px;background:transparent;color:var(--vkr-t2);font:500 13px/1 Inter,sans-serif;cursor:pointer;white-space:nowrap}
  .vkb-seg3 button svg{color:var(--vkr-t3)}
  .vkb-seg3 button[aria-selected=true]{color:var(--vkr-t1);background:rgba(255,255,255,.07)}
  .vkb-seg3 button[aria-selected=true] svg{color:var(--vkr-em)}
  .vkb-wins3{display:inline-flex;gap:4px;flex:none}
  .vkb-wins3 button{appearance:none;-webkit-appearance:none;height:30px;padding:0 9px;border:1px solid var(--vkr-line);border-radius:8px;background:transparent;color:var(--vkr-t3);font:600 12px/1 Inter,sans-serif;cursor:pointer}
  .vkb-wins3 button:hover{color:var(--vkr-t1)}
  .vkb-wins3 button[aria-pressed=true]{color:var(--vkr-emt);border-color:rgba(16,185,129,.35);background:rgba(16,185,129,.12)}
  .vkb-find{display:flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:1px solid var(--vkr-line);border-radius:8px;color:var(--vkr-t3);width:180px;flex:0 1 180px;min-width:120px;cursor:text}
  /* One quiet highlight while typing. The input's own focus ring plus a green border used to stack
     into a double green frame (owner 2026-10-27: "it has that green frame effect i think its a bug?"). */
  .vkb-find:focus-within{border-color:var(--vkr-line2);background:var(--vkr-s1)}
  .vkb-find input{appearance:none;-webkit-appearance:none;border:0;outline:0;background:transparent;color:var(--vkr-t1);font:400 13px/1 Inter,sans-serif;width:100%;min-width:0;padding:0}
  .vkb .vkb-find input:focus,.vkb .vkb-find input:focus-visible{outline:none;box-shadow:none}
  .vkb-find input::-webkit-search-cancel-button{display:none}

  /* The rows, as on the homepage before this bar. */
  .vkr-row{display:grid;grid-template-columns:24px 44px minmax(0,1fr) 56px 40px;gap:14px;align-items:center;height:72px;padding:0 10px;border-bottom:1px solid var(--vkr-line)}
  .vkr-rk{display:grid;place-items:center;font:600 13.5px/1 Inter,sans-serif;color:var(--vkr-t3);font-variant-numeric:tabular-nums}
  .vkr-row:hover{background:var(--vkr-s1)}
  .vkr-row.is-paid{background:linear-gradient(90deg,rgba(16,185,129,.055),transparent 55%)}
  .vkb .vkr-list{border-top:0}
  .vkb-rows .vkr-fgroup{margin:14px 0}
  .vkb-empty{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:22px 10px;border-bottom:1px solid var(--vkr-line);color:var(--vkr-t2);font-size:14px}
  .vkb-empty p{margin:0}
  .vkb-morew{display:flex;justify-content:center;padding:16px 0 4px}
  .vkb-tight .vkb-bar .vkb-row:first-child{flex-wrap:wrap;row-gap:8px;gap:6px}
  .vkb-tight .vkb-seg3 button{padding:0 8px 0 6px}
  .vkb-tight .vkb-find{min-width:100px}
  @media (max-width:1279px){
    .vkb-find{width:140px;flex-basis:140px}
  }
}
@media all{
  /* Light mode (owner 2026-10-27, "the page layout should be the same!"): the same bar, recoloured. White pills on
     hairlines, the active choice a black pill (Goddess of Taste's spec), no inset highlights or shadows.
     Owner 2026-10-28 ("dont' u see that u forgot to apply the same change to these button"): the active choice is the
     brand button colour (VK_BUTTON, deep emerald + white, siteChrome.js), not black. */
  [data-theme="light"] .vkb .vkb-sticky{background:var(--vkr-bg)}
  [data-theme="light"] .vkb-seg3,[data-theme="light"] .vkb-btn,[data-theme="light"] .vkb-wins3 button,[data-theme="light"] .vkb-find,[data-theme="light"] .vkb-tag,[data-theme="light"] .vkb-seg{background:#fff;border-color:rgba(11,15,13,.1);box-shadow:none}
  [data-theme="light"] .vkb-seg3,[data-theme="light"] .vkb-seg3 button,[data-theme="light"] .vkb-btn,[data-theme="light"] .vkb-wins3 button,[data-theme="light"] .vkb-find,[data-theme="light"] .vkb-tag{border-radius:999px}
  [data-theme="light"] .vkb-seg3 button[aria-selected=true]{color:#FFFFFF;background:#047857;box-shadow:none}
  [data-theme="light"] .vkb-seg3 button[aria-selected=true] svg{color:#FFFFFF}
  [data-theme="light"] .vkb-btn.on,[data-theme="light"] .vkb-tag[aria-pressed=true],[data-theme="light"] .vkb-wins3 button[aria-pressed=true],[data-theme="light"] .vkb-seg button[aria-checked=true]{background:#047857;border-color:#047857;color:#FFFFFF}
  [data-theme="light"] .vkb-btn.on svg{color:#FFFFFF}
  [data-theme="light"] .vkb-find:focus-within{border-color:rgba(11,15,13,.24);background:#fff}
  [data-theme="light"] .vkb-pop{background:#fff;border-color:rgba(11,15,13,.1);box-shadow:0 12px 32px -12px rgba(11,15,13,.18)}
  [data-theme="light"] .vkb-list button:hover{background:rgba(11,15,13,.035)}
  [data-theme="light"] .vkb-list button[aria-checked=true]{background:rgba(16,185,129,.08);color:#047857}
  [data-theme="light"] .vkb-done{border-radius:999px}
  [data-theme="light"] .vkr-row:hover{background:rgba(11,15,13,.025)}
  [data-theme="light"] .vkr-row.is-paid{background:linear-gradient(90deg,rgba(200,150,30,.07),rgba(200,150,30,0) 60%)}
}



.vkb-pvn{display:none}
@media (min-width:1025px){
  .vkb-pvn{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;display:block;margin:0;padding:9px 14px;border-radius:10px;background:#141416;border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 44px -12px rgba(0,0,0,.9);color:#C9C7C2;font:500 12.5px/1 Inter,sans-serif;white-space:nowrap}
}



/* Every width since 2026-10-28 (owner: bring the new staging to mobile view); phones get the overrides at the end. */
@media all{
  .vkr,.vkr *{box-sizing:border-box}
  /* Page, text, lines and the accent come from the site palette (src/siteChrome.js), the same as /submit and /pricing. */
  body{--vkr-bg:var(--vk-page);--vkr-bg2:#0B0B0C;--vkr-s1:rgba(255,255,255,.035);--vkr-s2:rgba(255,255,255,.055);
    --vkr-line:var(--vk-line);--vkr-line2:var(--vk-line2);
    --vkr-t1:var(--vk-ink);--vkr-t2:var(--vk-mute);--vkr-t3:var(--vk-faint);--vkr-nav:var(--vk-nav-link);
    --vkr-em:#10B981;--vkr-emt:var(--vk-acc-tx);--vkr-on:#04130D;--vkr-gold:var(--vk-gold);
    --vkr-tile:rgba(255,255,255,.05);--vkr-glow1:rgba(16,185,129,.22);--vkr-glow2:rgba(45,212,191,.10)}
  @media (min-width:1025px){
    body{background:var(--vkr-bg);color:var(--vkr-t1);
      font:400 15px/24px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased}
  }
  .vkr{display:block;padding-top:60px}
  .vkr [hidden]{display:none!important}
  .vkr-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .vkr :focus-visible{outline:2px solid rgba(52,211,153,.7);outline-offset:2px}
  .vkr-arw{transition:transform .2s cubic-bezier(.16,1,.3,1)}
  a:hover .vkr-arw,.vkr-btn:hover .vkr-arw{transform:translateX(2px)}
  /* The one button (src/siteChrome.js): flat, no gradient or inner highlight (owner 2026-10-27: "semi 3d, i hate it"). */
  .vkr-btn{appearance:none;-webkit-appearance:none;display:flex;align-items:center;justify-content:center;gap:7px;width:100%;height:40px;padding:0 18px;border:0;border-radius:var(--vk-btn-r);cursor:pointer;text-decoration:none;
    background:var(--vk-btn);color:var(--vk-btn-ink);font:600 14px/1 Inter,sans-serif;box-shadow:none;transition:background-color .15s}
  .vkr-btn:hover{background:var(--vk-btn-hi);color:var(--vk-btn-ink)}
  .vkr-btn:active{transform:translateY(1px)}
  .vkr-btn:focus{outline:none}
  .vkr-btn:focus-visible{outline:2px solid var(--vk-focus);outline-offset:2px}

  .vkr-wrap{max-width:1400px;margin:0 auto;padding:24px 24px 0}
  .vkr-grid{display:grid;grid-template-columns:232px minmax(0,1fr) 304px;gap:40px;align-items:stretch}
  .vkr-grid>aside{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;min-width:0}
  .vkr-grid>aside>section+section{margin-top:28px}
  .vkr-pool{display:none!important}
  .vkr-main{min-width:0;display:flex;flex-direction:column}
  /* /#categories (the site bar's Categories): lands with the feed's sort bar just under the site bar. */
  .vkr-anchor{display:block;height:0;margin:0;scroll-margin-top:44px}
  .vkr-feed{margin-top:28px;flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
  .vkr-sheet{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
  .vkr-main>.vkr-fgroup{margin-top:28px}
  .vkr-rail h4{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:0;padding:0 2px 10px;border-bottom:1px solid var(--vkr-line);font:600 13.5px/20px Inter,sans-serif;color:var(--vkr-t1)}
  .vkr-rail h4 a{font:400 12.5px/1 Inter,sans-serif;color:var(--vkr-t3);text-decoration:none;white-space:nowrap}
  .vkr-rail h4 a:hover{color:var(--vkr-t1)}

  .vkr-list{border-top:1px solid var(--vkr-line)}
  .vkr-fgroup .vkr-list{border-top:1px solid var(--vkr-line)}
  .vkr-fgroup{margin:22px 0 4px}
  .vkr-pl{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;position:relative;flex:none;background:var(--vkr-tile);border:1px solid var(--vkr-line);color:var(--vkr-t3)}
  .vkr-pl::before{content:attr(data-let);font:600 15px/1 Inter,sans-serif;color:var(--vkr-t1)}
  .vkr-pl img{position:absolute;width:28px;height:28px;object-fit:contain;border-radius:6px}
  .vkr-pl-sm{width:36px;height:36px;border-radius:10px}
  .vkr-pl-sm img{width:22px;height:22px}
  .vkr-lt{font:600 15px/1 Inter,sans-serif}
  .vkr-cell{min-width:0;overflow:hidden}
  .vkr-t1{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap}
  .vkr-nm{display:inline-flex;align-items:center;gap:6px;min-width:0;flex:0 1 auto;color:var(--vkr-t1);font:600 15px/22px Inter,sans-serif;text-decoration:none}
  .vkr-nt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .vkr-crown{flex:none;color:var(--vkr-gold)}
  .vkr-prem{flex:none;font:500 12.5px/1 Inter,sans-serif;color:var(--vkr-t2)}
  .vkr-chip{flex:none;display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:6px;background:var(--vkr-s1);border:1px solid var(--vkr-line);color:var(--vkr-t2);font:500 12px/1 Inter,sans-serif;text-decoration:none;white-space:nowrap}
  .vkr-tg{display:block;max-width:100%;margin:1px 0 0;font:400 14px/20px Inter,sans-serif;color:var(--vkr-t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .vkr-hype{width:48px;height:4px;border-radius:2px;background:var(--vkr-line);overflow:hidden;justify-self:end}
  .vkr-hype i{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,#0EA371,#34D399)}
  .vkr .vkr-up{appearance:none;-webkit-appearance:none;width:40px;height:40px;min-width:40px;min-height:40px;padding:0!important;margin:0;border:1px solid var(--vkr-line2)!important;border-radius:10px;background:var(--vkr-s1)!important;box-shadow:none!important;color:var(--vkr-t2);display:grid;place-items:center;cursor:pointer;justify-self:end}
  .vkr .vkr-up:hover{color:var(--vkr-t1);border-color:rgba(16,185,129,.55)!important}
  .vkr .vkr-up:focus{outline:none}
  .vkr .vkr-up:focus-visible{outline:2px solid rgba(52,211,153,.7);outline-offset:2px}
  .vkr .vkr-up.active{color:var(--vkr-emt);border-color:rgba(16,185,129,.6)!important;background:rgba(16,185,129,.12)!important}
  .vkr-sech{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 10px;padding:0 2px}
  .vkr-sech h3{margin:0;font:600 15px/22px Inter,sans-serif}
  .vkr-sech a{font-size:13px;color:var(--vkr-t3);text-decoration:none}
  .vkr-sech a:hover{color:var(--vkr-t1)}
  .vkr-frow{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;height:68px;padding:0 10px;border-bottom:1px solid var(--vkr-line);background:linear-gradient(90deg,rgba(16,185,129,.055),transparent 55%);color:inherit;text-decoration:none}
  .vkr-frow.is-empty{background:none}
  .vkr-frow.is-empty .vkr-pl{border-style:dashed;background:none;color:var(--vkr-t3)}
  .vkr-frow.is-empty .vkr-pl::before{content:none}
  .vkr-frow.is-empty .vkr-nm{color:var(--vkr-t2);font-weight:500}
  .vkr-frow.is-empty .vkr-lab{color:var(--vkr-t2)}
  .vkr-lab{font:500 12.5px/1 Inter,sans-serif;color:var(--vkr-emt);white-space:nowrap}
  .vkr-frow:hover .vkr-nt{color:var(--vkr-t1)}

  .vkr-what{padding:18px 18px 16px;border:1px solid var(--vkr-line);border-radius:14px;background:radial-gradient(80% 100% at 0% 0%,rgba(16,185,129,.10),transparent 60%),var(--vkr-s1)}
  .vkr-what h3{margin:0;font:600 15px/22px Inter,sans-serif}
  .vkr-what p{margin:6px 0 0;font:400 13.5px/20px Inter,sans-serif;color:var(--vkr-t2)}
  .vkr-what ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
  .vkr-what li{display:flex;gap:8px;align-items:center;font-size:13.5px;color:var(--vkr-t1)}
  .vkr-what li svg{color:var(--vkr-emt);flex:none}

  /* Oct 26 mockup pieces (owner 2026-10-28: "yes its this one"). */
  .vkr-grid>aside{align-self:start}
  .vkr-grid>aside.is-stick{position:sticky;top:84px}
  .vkr-house{display:grid;grid-template-columns:24px 44px minmax(0,1fr) auto;gap:14px;align-items:center;min-height:72px;margin:8px 0;padding:0 14px 0 10px;border:1px dashed rgba(231,180,22,.5);border-radius:12px;background:rgba(231,180,22,.07);color:inherit;text-decoration:none}
  .vkr-house:hover{border-color:rgba(231,180,22,.8)}
  .vkr-house .vkr-rk .vkr-crown,.vkr-house .vkr-hl .vkr-crown{color:var(--vkr-gold)}
  .vkr-house .vkr-hl{background:transparent;border:1px dashed rgba(231,180,22,.45)}
  .vkr-house .vkr-hl::before{content:none}
  .vkr-house b{display:block;font:600 15px/22px Inter,sans-serif;color:var(--vkr-t1)}
  .vkr-hbtn{display:inline-flex;align-items:center;height:32px;padding:0 12px;border:1px solid var(--vkr-line2);border-radius:8px;background:var(--vkr-s1);font:600 13px/1 Inter,sans-serif;color:var(--vkr-t1);white-space:nowrap}
  .vkr-right>section+section{margin-top:16px}
  .vkr-right>section[hidden]+section{margin-top:0}
  .vkr-card{padding:16px;border:1px solid var(--vkr-line);border-radius:16px;background:var(--vkr-s1)}
  .vkr-card h4{padding:0 0 10px;border-bottom:0}
  .vkr-tagl{font:600 11.5px/1 Inter,sans-serif;color:var(--vkr-t3)}
  .vkr-pl-xs{width:28px;height:28px;border-radius:8px}
  .vkr-pl-xs img{width:18px;height:18px;border-radius:4px}
  .vkr-pl-xs::before{font-size:12px}
  .vkr-rec a{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:center;min-height:40px;padding:5px 8px;margin:1px -8px;border-radius:9px;color:inherit;text-decoration:none}
  .vkr-rn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 14px/20px Inter,sans-serif;color:var(--vkr-t1)}
  .vkr-rec{display:flex;flex-direction:column;padding-top:6px}
  .vkr-rec a:hover{background:var(--vkr-s2)}
  .vkr-all{appearance:none;-webkit-appearance:none;width:100%;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;height:36px;margin-top:10px;border:1px solid var(--vkr-line2);border-radius:10px;font:500 13.5px/1 Inter,sans-serif;color:var(--vkr-t1);text-decoration:none}
  .vkr-all:hover{border-color:rgba(16,185,129,.55)}
  .vkr-ht{display:inline-flex;align-items:center;gap:8px;min-width:0}
  .vkr-hi{flex:none;color:var(--vkr-emt)}
  .vkr-hi-gold{color:var(--vkr-gold)}
  .vkr-tc{display:flex;flex-direction:column;padding-top:6px}
  .vkr-tc a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:40px;padding:5px 8px;margin:1px -8px;border-radius:9px;color:inherit;text-decoration:none}
  .vkr-tc a:hover{background:var(--vkr-s2)}
  .vkr-tc a[hidden],.vkr-rail [hidden]{display:none!important}
  .vkr-stack{display:flex;flex:none}
  .vkr-stack .vkr-pl{margin-left:-6px;box-shadow:0 0 0 2px var(--vkr-bg)}
  .vkr-pl-xxs{width:22px;height:22px;border-radius:6px}
  .vkr-pl-xxs img{width:14px;height:14px;border-radius:3px}
  .vkr-pl-xxs::before{font-size:10px}
  .vkr-wk{display:flex;flex-direction:column}
  .vkr-wk a{display:grid;grid-template-columns:16px 28px minmax(0,1fr);gap:10px;align-items:center;min-height:40px;padding:5px 8px;margin:1px -8px;border-radius:9px;color:inherit;text-decoration:none}
  .vkr-wk a:hover{background:var(--vkr-s2)}
  .vkr-wn{font:600 13px/1 Inter,sans-serif;color:var(--vkr-t3);text-align:center;font-variant-numeric:tabular-nums}
  .vkr-arn{color:var(--vkr-gold);font-weight:600}
  .vkr-launch h3{margin:0;font:600 16px/22px Inter,sans-serif}
  .vkr-launch p{margin:6px 0 14px;font:400 13.5px/20px Inter,sans-serif;color:var(--vkr-t2)}
  .vkr-cmp{display:block;margin-top:10px;text-align:center;font:500 13px/1 Inter,sans-serif;color:var(--vkr-t3);text-decoration:none}
  .vkr-cmp:hover{color:var(--vkr-t1)}
  .vkr-plans{display:flex;flex-direction:column;gap:8px;margin:0 0 14px}
  .vkr-pb{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--vkr-line);border-radius:12px;background:var(--vkr-s2)}
  .vkr-pb b{display:block;font:600 14px/20px Inter,sans-serif}
  .vkr-pb small{display:block;font:400 12.5px/17px Inter,sans-serif;color:var(--vkr-t2)}
  .vkr-pp{font:700 14px/1 Inter,sans-serif;color:var(--vkr-t1)}
  .vkr-pb.is-king{border-color:rgba(231,180,22,.55);background:linear-gradient(135deg,rgba(231,180,22,.10),transparent 70%),var(--vkr-s2)}
  .vkr-mini2{display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px;align-items:center;color:inherit;text-decoration:none}
  .vkr-mini2 b{display:block;font:600 14px/20px Inter,sans-serif}
  .vkr-mini2 .vkr-tg{font-size:13px;line-height:18px}
  .vkr-mini2:hover b{color:var(--vkr-emt)}
  .vkr-houseAd{padding:16px;border:1px dashed var(--vkr-line2);border-radius:16px}
  .vkr-houseAd b{display:block;margin-bottom:4px;font:600 14px/20px Inter,sans-serif}
  .vkr-houseAd p{margin:0 0 12px;font:400 13px/19px Inter,sans-serif;color:var(--vkr-t2)}
  .vkr-houseAd a{display:inline-flex;align-items:center;height:32px;padding:0 12px;border:1px solid var(--vkr-line2);border-radius:8px;font:600 13px/1 Inter,sans-serif;color:var(--vkr-t1);text-decoration:none}
  .vkr-houseAd a:hover{border-color:rgba(16,185,129,.55)}
  .vkr-vcp{margin:0 0 10px;font:400 13px/19px Inter,sans-serif;color:var(--vkr-t2)}
  .vkr-vc{display:flex;gap:6px;margin:0}
  .vkr-vc input{flex:1;min-width:0;height:36px;padding:0 10px;border:1px solid var(--vkr-line2);border-radius:9px;background:var(--vkr-bg);color:var(--vkr-t1);font:400 13px/1 Inter,sans-serif;outline:0}
  .vkr-vc input:focus{border-color:rgba(16,185,129,.55)}
  .vkr-vc button{flex:none;height:36px;padding:0 14px;border:0;border-radius:9px;background:var(--vk-btn);color:var(--vk-btn-ink);font:600 13px/1 Inter,sans-serif;cursor:pointer}
  .vkr-vc button:hover{background:var(--vk-btn-hi)}
  body:has(.vkr) .vkp-hero,
  body:has(.vkr) .vkp-dir,
  body:has(.vkr) .arena-teaser,
  body:has(.vkr) .hm-reports,
  body:has(.vkr) .faq-sec,
  body:has(.vkr) .vkf,
  body:has(.vkr) .vkp-sticky{display:none!important}

  @media (min-width:1025px) and (max-width:1279px){
    .vkr-grid{grid-template-columns:196px minmax(0,1fr) 264px;gap:26px}
  }
}
@media all{
  /* Light mode: the dark page's exact layout, its own look (owner 2026-10-27: "need to make homepage and submit page
     light mode prettier", "the page layout should be the same!"). Goddess of Taste's spec: warm white, black pill
     buttons, rows on hairlines with no grey fills or shadows, thin dashed lines between the columns (Stripe). */
  /* Page, text, lines, accent and the button come from the site palette (src/siteChrome.js); only the homepage's own surfaces differ. */
  [data-theme="light"] body{--vkr-bg2:#FFFFFF;--vkr-s1:rgba(11,15,13,.025);--vkr-s2:rgba(11,15,13,.045);
    --vkr-em:#10B981;--vkr-tile:#FFFFFF;
    --vkr-glow1:rgba(16,185,129,.16);--vkr-glow2:rgba(45,212,191,.08)}
  /* thin dashed lines between the three columns */
  [data-theme="light"] .vkr-wrap{position:relative;isolation:isolate}
  [data-theme="light"] .vkr-wrap::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:0;right:0;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(11,15,13,.08) 0 4px,transparent 4px 8px) 276px 0/1px 100% no-repeat,repeating-linear-gradient(180deg,rgba(11,15,13,.08) 0 4px,transparent 4px 8px) calc(100% - 348px) 0/1px 100% no-repeat}
  /* rails and rows: white or clear, hairlines, no shadows */
  [data-theme="light"] .vkr-what{background:rgba(255,255,255,.6);border:1px solid rgba(11,15,13,.08);box-shadow:none}
  [data-theme="light"] .vkr-pl{background:#fff;border-color:rgba(11,15,13,.08);box-shadow:none}
  [data-theme="light"] .vkr-hype i{background:#10B981}
  [data-theme="light"] .vkr-frow{background:linear-gradient(90deg,rgba(200,150,30,.07),rgba(200,150,30,0) 60%)}
  [data-theme="light"] .vkr .vkr-up{border:1px solid rgba(11,15,13,.12)!important;border-radius:10px;background:#FFFFFF!important;color:#3F4A45}
  [data-theme="light"] .vkr-card{background:#FFFFFF;border-color:rgba(11,15,13,.08)}
  [data-theme="light"] .vkr-pb{background:rgba(11,15,13,.02);border-color:rgba(11,15,13,.08)}
  [data-theme="light"] .vkr-pb.is-king{border-color:rgba(201,154,6,.5);background:linear-gradient(135deg,rgba(201,154,6,.10),transparent 70%),#FFFFFF}
  [data-theme="light"] .vkr-house{border-color:rgba(201,154,6,.5);background:rgba(201,154,6,.07)}
  [data-theme="light"] .vkr-hbtn,[data-theme="light"] .vkr-houseAd a{background:#FFFFFF;border-color:rgba(11,15,13,.14)}
  [data-theme="light"] .vkr-houseAd{border-color:rgba(11,15,13,.16)}
  [data-theme="light"] .vkr-vc input{background:#FFFFFF;border-color:rgba(11,15,13,.14)}
  [data-theme="light"] .vkr .vkr-up:hover{border-color:rgba(11,15,13,.28)!important;background:#FFFFFF!important;color:#0B0F0D}
  [data-theme="light"] .vkr .vkr-up.active{border-color:#10B981!important;color:#047857}
  @media (max-width:1279px){
    [data-theme="light"] .vkr-wrap::before{background:repeating-linear-gradient(180deg,rgba(11,15,13,.08) 0 4px,transparent 4px 8px) 233px 0/1px 100% no-repeat,repeating-linear-gradient(180deg,rgba(11,15,13,.08) 0 4px,transparent 4px 8px) calc(100% - 301px) 0/1px 100% no-repeat}
  }
}

/* ---- Phones and tablets (owner 2026-10-28: bring the new staging to mobile view) ----
   One column: the hero card, the sort bar, the rows with Featured after row 2. The side columns stay hidden here
   for now. No hype bars or chips on a narrow row; the rank, the logo, the name with its crown, the tagline and the
   upvote stay. */
@media (max-width:1024px){
  body:has(.vkr){background:var(--vkr-bg);color:var(--vkr-t1);font:400 15px/24px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased}
  .vkr{padding-top:56px}
  .vkr-wrap{padding:12px 16px 0}
  .vkr-grid{display:block}
  .vkr-grid>aside{display:none}
  [data-theme="light"] .vkr-wrap::before{content:none}
  /* the site footer: the desktop one is desktop-only, so phones keep the old footer under the homepage too */
  html body:has(.vkr) .vkf{display:block!important;margin-top:56px}

  /* the hero: the desktop hero itself, animated, at phone size (owner 2026-10-28: "homepage hero visual SUCKS", "no
     animation", "not elegant or professional"). homeHeroCss and its script now run at every width; this only sizes it.
     The link field sits above the button, and its grey "https://yoursite.com" is the typing line, gone on tap. */
  .vkrh.r4{--S:.5;--h1:32px;--h1l:38px;--subm:8px;--subf:15px;--subl:22px;--urlm:20px;--urlh:50px;--uf:16px;--nm:14px;--nf:12.5px;--fh:110px;padding:30px 18px 22px}
  .vkrh.r4 #vkrhH1{letter-spacing:-.02em}
  .vkrh.r4 .url{flex-wrap:wrap;height:auto;gap:10px;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
  .vkrh.r4 .url:focus-within,.vkrh.r4 .url:hover{border:0;box-shadow:none}
  .vkrh.r4 .url .line{flex:1 1 100%;height:var(--urlh);padding:0 16px;border:1px solid rgba(255,255,255,.11);border-radius:14px;background:#0B0B0C;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
  .vkrh.r4 .url .line:focus-within{border-color:rgba(16,185,129,.6)}
  .vkrh.r4 .url .pre,.vkrh.r4 .url .ellip{display:none!important}
  .vkrh.r4 .typer::before{content:"https://"}
  .vkrh.r4 .url .btn{flex:1 1 100%;height:48px;border-radius:12px;font-size:15px}
  .vkrh.r4 .url-msg{position:static;flex:1 1 100%;height:auto;white-space:normal;text-align:left}
  .vkrh.r4 .url-msg:empty{display:none}
  [data-theme="light"] .vkrh.r4 .url,[data-theme="light"] .vkrh.r4 .url:focus-within{border:0;border-radius:0;background:none;box-shadow:none}
  [data-theme="light"] .vkrh.r4 .url .line{border-color:rgba(11,15,13,.14);border-radius:999px;background:#FFFFFF;box-shadow:0 1px 2px rgba(11,15,13,.04)}
  [data-theme="light"] .vkrh.r4 .url .btn{border-radius:999px}
  /* Variant 2 (/?hero=2): no frame. The hero runs edge to edge from the very top of the screen, under the clear top
     bar, and its beams fade into the page */
  .vkh2 .vkrh.r4,.vkh3 .vkrh.r4{margin:-68px -16px 0;padding:96px 20px 30px;border:0;border-radius:0}
  /* the 4px solid strip above the top bar (it stops Safari showing the page through while scrolling) drew a black line
     over the hero at the top (owner 2026-10-28: "homepage still has a black gap at the top"); it comes back once the
     page scrolls and the bar turns solid */
  html.vkh2 body:not(:has(#navbar.scrolled)) .vk-tint,html.vkh3 body:not(:has(#navbar.scrolled)) .vk-tint{display:none}
  .vkh2 .vkrh.r4 .url .line,.vkh3 .vkrh.r4 .url .line{background:rgba(11,11,12,.82)}
  /* Variant 3 (/?hero=3), after Raycast's hero (owner 2026-10-28: "create a nice hero visual animation", "study raycast
     and orb"): no frame and no logo tiles; wide grainy emerald light bars on the diagonal drift slowly behind one big
     headline, and fade into the page. Transform-only motion, still for reduced motion. Light mode keeps the soft orb
     panel, Orb-style. */
  .vkh3 .vkrh.r4{--h1:40px;--h1l:44px;--subf:16px;--subl:24px;--urlm:28px;min-height:640px;padding:150px 20px 36px;background:#050506}
  .vkh3 .vkrh.r4 .bgk,.vkh3 .vkrh.r4 .grain,.vkh3 .vkrh.r4 .veil2,.vkh3 .vkrh.r4 .pgrain,.vkh3 .vkrh.r4 .shelfbox{display:none!important}
  .vkh3 .vkrh.r4 #vkrhH1{letter-spacing:-.03em;text-shadow:0 2px 24px rgba(0,0,0,.45)}
  .vkh3 .vkrh.r4 .sub{color:rgba(242,241,238,.82);text-shadow:0 1px 12px rgba(0,0,0,.5)}
  .vkh3 .vkrh.r4::before{content:"";position:absolute;z-index:-1;left:-70%;right:-70%;top:-30%;height:150%;pointer-events:none;will-change:transform;
    background:linear-gradient(90deg,transparent 6%,rgba(20,184,166,.32) 10%,rgba(16,185,129,.95) 14.5%,rgba(167,243,208,.85) 16%,rgba(16,185,129,.85) 18.5%,rgba(13,148,136,.28) 23%,transparent 27%,
      transparent 33%,rgba(16,185,129,.22) 36%,rgba(16,185,129,.78) 40%,rgba(52,211,153,.7) 43%,rgba(4,120,87,.28) 47%,transparent 51%,
      transparent 56%,rgba(20,184,166,.3) 59%,rgba(16,185,129,.92) 63%,rgba(167,243,208,.8) 64.5%,rgba(16,185,129,.7) 67%,rgba(13,148,136,.2) 70%,transparent 73%,
      transparent 79%,rgba(16,185,129,.45) 83%,rgba(4,120,87,.18) 87%,transparent 90%);
    filter:blur(12px) saturate(120%);transform:rotate(-38deg) translate3d(0,0,0);
    -webkit-mask-image:radial-gradient(56% 46% at 50% 44%,#000 30%,transparent 100%);mask-image:radial-gradient(56% 46% at 50% 44%,#000 30%,transparent 100%)}
  .vkh3 .vkrh.r4::after{content:"";position:absolute;z-index:-1;inset:-60px;pointer-events:none;opacity:.16;mix-blend-mode:overlay;background:url(/hero/grain.webp) 0 0/220px 220px}
  @media (prefers-reduced-motion:no-preference){
    .vkh3 .vkrh.r4::before{animation:vkh3Drift 16s ease-in-out infinite alternate}
    .vkh3 .vkrh.r4::after{animation:vkrGrain .9s steps(6) infinite}
  }
  @keyframes vkh3Drift{from{transform:rotate(-38deg) translate3d(-34px,0,0)}to{transform:rotate(-38deg) translate3d(46px,-10px,0)}}
  [data-theme="light"] .vkh3 .vkrh.r4{background:#FDFCFB}
  [data-theme="light"] .vkh3 .vkrh.r4::before,[data-theme="light"] .vkh3 .vkrh.r4::after{content:none}
  [data-theme="light"] .vkh3 .vkrh.r4 #vkrhH1,[data-theme="light"] .vkh3 .vkrh.r4 .sub{text-shadow:none}
  [data-theme="light"] .vkh3 .vkrh.r4 .sub{color:#3F4A45}

  /* the sort bar: the tabs, the time window and the category menu; search and filters stay on desktop */
  .vkr-feed{margin-top:20px}
  .vkb .vkb-sticky{position:static;margin:0;padding:0}
  .vkb-row{flex-wrap:wrap;row-gap:8px}
  .vkb-find,.vkb-ico{display:none}
  .vkb-sp{display:none}
  .vkb-pop{max-width:calc(100vw - 32px)}

  /* rows */
  .vkr-row{grid-template-columns:22px 40px minmax(0,1fr) 36px;gap:12px;height:64px;padding:0 2px}
  .vkr-hype,.vkr-chip{display:none}
  .vkr-pl{width:40px;height:40px;border-radius:11px}
  .vkr-pl img{width:26px;height:26px}
  .vkr-tg{font-size:13.5px;line-height:19px}
  .vkr .vkr-up{width:36px;height:36px;min-width:36px;min-height:36px}
  .vkr-frow{grid-template-columns:40px minmax(0,1fr) auto;gap:12px;height:64px;padding:0 2px}
  .vkr-house{grid-template-columns:22px 40px minmax(0,1fr);gap:12px;padding:10px}
  .vkr-house .vkr-hbtn{display:none}
}
/* Phone homepage polish, both themes (owner 2026-11-01: "why is light mode homepage sooo ugly", "lots of UI/UX big no
   nos", "not just light mode, both dark and light"). One real input field in light, one calm light in the light hero
   with no edge where it ends, the sort controls on a grid instead of wrapped chips, and one solid green per row. */
@media (max-width:1024px){
  /* the link field: the variant-2 rule painted it near-black in light mode too (it came later than the light rule).
     data-theme and vkh2 sit on the same <html>, so the selectors join them with no space */
  [data-theme="light"].vkh2 .vkrh.r4 .url .line,[data-theme="light"].vkh3 .vkrh.r4 .url .line{background:#FFFFFF;border:1px solid rgba(11,15,13,.14);box-shadow:0 1px 2px rgba(11,15,13,.04)}
  [data-theme="light"].vkh2 .vkrh.r4 .url .line:focus-within,[data-theme="light"].vkh3 .vkrh.r4 .url .line:focus-within{border-color:rgba(4,120,87,.55);box-shadow:0 0 0 3px rgba(16,185,129,.14)}
  [data-theme="light"] .vkrh.r4 .typer{color:#7C8580}
  [data-theme="light"] .vkrh.r4 .url input{color:#0B0F0D}
  /* light hero: one soft emerald light from the top instead of four coloured blobs under grain; it fades into the
     page colour before the hero ends, so there is no seam */
  [data-theme="light"] .vkrh.r4 .orbp{display:none!important}
  [data-theme="light"].vkh2 .vkrh.r4{background:radial-gradient(140% 62% at 50% 0%,rgba(16,185,129,.14),rgba(16,185,129,.05) 48%,rgba(253,252,251,0) 78%),#FDFCFB}
  [data-theme="light"] .vkrh.r4 .face{box-shadow:0 1px 2px rgba(11,15,13,.06),0 6px 16px -10px rgba(11,15,13,.18)}
  /* the small print under the button: tighter lines, balanced */
  .vkrh.r4 .note{max-width:34ch;margin-left:auto;margin-right:auto;line-height:20px;text-wrap:balance}
  /* sort bar: the three tabs share the full width; under them the time window is one segmented control and the
     category menu takes the rest of the line */
  .vkb-bar .vkb-row:first-child{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px}
  .vkb-bar .vkb-fmenu,.vkb-bar .vkb-sp{display:none!important}
  .vkb-seg3{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));height:42px;padding:3px}
  .vkb-seg3 button{justify-content:center;height:34px;padding:0 6px;font-size:14px}
  .vkb-wins3{gap:2px;height:36px;padding:2px;border:1px solid var(--vkr-line);border-radius:10px}
  .vkb-wins3 button{height:30px;min-width:40px;padding:0 10px;border:0;border-radius:8px;background:transparent;font-size:13px}
  .vkb-wins3 button[aria-pressed=true]{border:0;color:var(--vkr-emt);background:rgba(16,185,129,.14)}
  .vkb-bar .vkb-row:first-child>.vkb-menu{justify-self:stretch;min-width:0}
  .vkb-bar .vkb-row:first-child>.vkb-menu>.vkb-btn{width:100%;height:36px;justify-content:space-between}
  .vkb-row-note{margin-top:12px}
  .vkb-note{font-size:13px}
  /* light: white controls on hairlines; the chosen tab is the brand green (owner 10/28), the time window only tints, so
     there is one solid green on the line, as in dark mode */
  [data-theme="light"] .vkb-wins3{border-color:rgba(11,15,13,.1);border-radius:999px;background:#fff}
  [data-theme="light"] .vkb-wins3 button{border:0;border-radius:999px;background:transparent;color:#5F6662}
  [data-theme="light"] .vkb-wins3 button[aria-pressed=true]{border:0;background:rgba(16,185,129,.12);color:#047857}
  /* Phone sort bar = "B+" with icons (owner picked it 2026-11-01 after a 3-way trial: "Okay decided"; Goddess of Taste
     + SEO God agreed): one compact row like desktop, categories as words on the small line under it. Both rows become one
     grid so the category menu can sit on the second line. :root keeps the specificity the trial class had. */
  html:root .vkb-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;row-gap:8px;margin-bottom:12px}
  html:root .vkb-bar>.vkb-row{display:contents}
  html:root .vkb-bar .vkb-fmenu,html:root .vkb-bar .vkb-sp,html:root .vkb-bar .vkb-find{display:none!important}
  html:root .vkb-seg3{grid-column:1;grid-row:1;display:flex;height:38px;padding:2px}
  html:root .vkb-seg3 button{flex:1 0 auto}
  html:root .vkb-bar:not(:has(.vkb-wins3)) .vkb-seg3{grid-column:1/-1}
  html:root .vkb-seg3 button{justify-content:center;gap:5px;height:32px;padding:0 3px;font-size:13.5px}
  /* owner 2026-11-01: "I like the icons for sort bars" -> the icons stay */
  html:root .vkb-seg3 button svg{width:14px;height:14px;flex:none}
  html:root .vkb-wins3,html[data-theme="light"]:root .vkb-wins3{grid-column:2;grid-row:1;height:38px;padding:0;gap:2px;border:0;border-radius:0;background:none}
  html:root .vkb-wins3 button,html[data-theme="light"]:root .vkb-wins3 button{min-width:0;height:38px;padding:0 6px;border:0;border-radius:0;background:none;box-shadow:none;color:var(--vkr-t3);font:500 13.5px/1 Inter,sans-serif}
  html:root .vkb-wins3 button[aria-pressed=true]{color:#34D399;font-weight:600;background:none;box-shadow:inset 0 -2px 0 #10B981}
  html[data-theme="light"]:root .vkb-wins3 button[aria-pressed=true]{color:#047857;font-weight:600;background:none;box-shadow:inset 0 -2px 0 #047857}
  html:root .vkb-bar .vkb-row>.vkb-menu:not(.vkb-fmenu){grid-column:2;grid-row:2;justify-self:end}
  html:root .vkb-bar .vkb-row>.vkb-menu:not(.vkb-fmenu)>.vkb-btn,html[data-theme="light"]:root .vkb-bar .vkb-row>.vkb-menu:not(.vkb-fmenu)>.vkb-btn{width:auto;height:28px;padding:0 2px 0 6px;border:0;border-radius:0;background:none;box-shadow:none;color:var(--vkr-t2);font:500 13px/1 Inter,sans-serif}
  html[data-theme="light"]:root .vkb-bar .vkb-row>.vkb-menu:not(.vkb-fmenu)>.vkb-btn{color:#5F5F5A}
  html:root .vkb-bar .vkb-row>.vkb-menu:not(.vkb-fmenu)>.vkb-btn.on{color:var(--vkr-emt)}
  html[data-theme="light"]:root .vkb-bar .vkb-row>.vkb-menu:not(.vkb-fmenu)>.vkb-btn.on{color:#047857}
  html:root .vkb-bar .vkb-row>.vkb-menu:not(.vkb-fmenu) .vkb-pop{left:auto;right:0}
  html:root .vkb-row-note{margin:0}
  html:root .vkb-note{grid-column:1;grid-row:2;font-size:12.5px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html[data-theme="light"]:root .vkb-note{color:#5F5F5A}
}



.vkshell-grid>aside{display:none}
@media (min-width:1025px){
  .vkshell{max-width:1400px;margin:0 auto;padding:0 24px;box-sizing:border-box}
  .vkshell-grid{display:grid;grid-template-columns:232px minmax(0,1fr) 304px;gap:40px;align-items:start}
  .vkshell-grid>aside{display:flex;flex-direction:column;min-width:0;margin-top:84px;align-self:start}
  .vkshell-grid>aside>section+section{margin-top:28px}
  .vkshell-grid>.vkr-right>section+section{margin-top:16px}
  .vkshell-grid>.vkr-right>section[hidden]+section{margin-top:0}
  .vkshell-main{min-width:0}
  /* the page's own wide wrappers fit the middle column */
  .vkshell-main>*{max-width:100%}
}
@media (min-width:1025px) and (max-width:1279px){
  .vkshell-grid{grid-template-columns:196px minmax(0,1fr) 264px;gap:26px}
}