/* „Prima impresie": one browser window that turns into four kinds of static sites on scroll.
   Positions and sizes come from presentation-sites.js; this file only draws the pieces. */
/* --pv-run: how many screens of scrolling the four sites take. 03.10.2026: 75% longer at Gabi's request (was 4.125 / 3.5). */
.pv{--pv-top:78px;--pv-bottom:18px;--pv-cap:96px;--pv-run:7.21875;position:relative;margin-top:8px}
.pv-sticky{position:relative;display:flex;flex-direction:column;justify-content:center}
.pv-ready .pv-sticky{position:sticky;top:var(--pv-top)}
/* The violet aura behind the window, same as the online store (.shop-glass .shop-aura): the window box grown by
   120px top/bottom and 160px sideways. The script passes the window's place inside the sticky box. */
.pv-sticky:before{content:'';position:absolute;left:-160px;right:-160px;top:calc(var(--pv-win-top,0px) - 120px);height:calc(var(--pv-win-h,100%) + 240px);z-index:-1;background:radial-gradient(ellipse closest-side at 50% 45%,#7045ff2b 0%,#7045ff0f 62%,#7045ff00 100%);pointer-events:none}

.pv-window{position:relative;display:flex;flex-direction:column;border:1px solid #ffffff1f;border-radius:20px;overflow:hidden;background:#0a0a0d;box-shadow:0 40px 110px #000b;clip-path:inset(0 round 20px)}
.pv-chrome{flex:none;height:40px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 20px;border-bottom:1px solid #ffffff0d;background:#0d0d11;color:#62636e;font-size:10px;letter-spacing:.02em}
.pv-dots{display:flex;gap:6px;flex:none}.pv-dots i{width:7px;height:7px;border-radius:50%;background:#ff605c}.pv-dots i:nth-child(2){background:#ffbd44}.pv-dots i:nth-child(3){background:#00ca4e}
.pv-url{position:relative;flex:0 1 300px;height:22px;border-radius:7px;background:#ffffff08;border:1px solid #ffffff0d}
.pv-url .pv-swap{justify-content:center;white-space:nowrap}.pv-url b{font-weight:500;color:#a7a8b3}
.pv-plus{flex:none;font-size:12px}

.pv-body{--pv-p:18px;--pv-g:14px;--pv-t:52px;--pv-r:12px;position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background:#060607;color:#f5f3ef;font-size:12px;line-height:1.5}
/* The satin photo is only the source of the frosted panes: the gaps between them stay black. */
.pv-bg{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;visibility:hidden;pointer-events:none}

/* Frosted panes, as in the reference: tint, inner highlight and a soft drop shadow.
   The blur is not a live backdrop-filter (too heavy while panes move): the script blurs the
   background once into --pv-frost and each pane shows its own slice of it. */
.pv-pane,.pv-glass{background-image:linear-gradient(140deg,#ffffff17,#ffffff08 55%,#ffffff0d);box-shadow:inset 1px 1px 1px #ffffff29,inset -1px -1px 1px #ffffff0d,0 8px 26px #00000059;border-radius:var(--pv-r)}
.pv-frost-on .pv-pane{background-image:linear-gradient(140deg,#ffffff1c,#ffffff0a 55%,#ffffff12),var(--pv-frost);background-size:100% 100%,var(--pv-bw) var(--pv-bh);background-position:0 0,var(--pv-bx,0) var(--pv-by,0);background-repeat:no-repeat}
.pv-glass{-webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15)}

.pv-swaps{position:relative}
.pv-swap{position:absolute;inset:0;display:flex;align-items:center;opacity:0;visibility:hidden}
.pv-swap[data-s="0"]{opacity:1;visibility:visible}

.pv-top{position:absolute;z-index:5;left:var(--pv-p);right:var(--pv-p);top:var(--pv-p);height:var(--pv-t);display:grid;grid-template-columns:1fr 3fr;gap:var(--pv-g)}
.pv-logo .pv-swap{padding:0 20px;white-space:nowrap}
.pv-mark-drum{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:20px;letter-spacing:-.02em;color:#f6efe6}.pv-mark-drum i{font-style:normal;color:#f2b36b}
.pv-mark-nord{display:flex;align-items:center;gap:11px;font-size:12px;font-weight:600;letter-spacing:.34em;color:#f1ede6}.pv-mark-nord i{width:11px;height:11px;border:1.5px solid currentColor;transform:rotate(45deg)}
.pv-mark-gust{font-family:Georgia,'Times New Roman',serif;font-weight:700;font-size:23px;letter-spacing:-.04em;color:#fff4ec}.pv-mark-gust i{font-style:normal;color:#ff6a4d}
.pv-mark-noc{font-size:13px;font-weight:300;letter-spacing:.5em;color:#efe8ff}
.pv-nav .pv-swap{justify-content:space-between;gap:16px;padding:0 9px 0 24px}
.pv-links{display:flex;gap:26px;white-space:nowrap;color:#d6d2db;font-size:12px}
.pv-burger{display:none;flex-direction:column;gap:5px}.pv-burger i{display:block;width:17px;height:1.5px;border-radius:2px;background:#f2eee8}
.pv-btn{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;padding:9px 15px;border-radius:999px;border:1px solid #ffffff24;background:#ffffff14;color:#fff;font-size:11px;font-weight:500;line-height:1.2}
.pv-nav [data-s="0"] .pv-btn{background:#f2b36b;border-color:transparent;color:#1b1208}
.pv-btn-light{background:#efe9df;border-color:transparent;color:#17140f}
.pv-btn-red{background:#ff6a4d;border-color:transparent;color:#1d0904}
.pv-btn-violet{background:#b6a0ff;border-color:transparent;color:#140d24}
.pv-btn-ghost{background:#ffffff0d;border-color:#ffffff40}

.pv-side,.pv-tile{position:absolute;left:0;top:0;z-index:1;overflow:hidden;transform-origin:0 0;will-change:transform}
.pv-tile:after{content:'';position:absolute;inset:0;z-index:4;border-radius:inherit;box-shadow:inset 1px 1px 1px #ffffff29,inset -1px -1px 1px #ffffff0f;pointer-events:none}
.pv-face{position:absolute;left:0;top:0;width:100%;height:100%;container-type:size;opacity:0;visibility:hidden;transform-origin:50% 50%}
.pv-face[data-s="0"]{opacity:1;visibility:visible}
.pv img{display:block}

/* Sidebar */
.pv-side .pv-face{display:flex;flex-direction:column;gap:12px;padding:22px 20px 20px}
.pv-eyebrow{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#a6a1ad}
.pv-side-title{display:block;font-size:clamp(18px,9.4cqw,27px);font-weight:500;line-height:1.08;letter-spacing:-.045em;color:#f7f3ee}
.pv-side p{margin:0;font-size:12px;line-height:1.6;color:#aaa5b1}
.pv-side-drum .pv-side-title{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;letter-spacing:-.02em}
.pv-chips{display:flex;flex-wrap:wrap;gap:6px}.pv-chips>span{padding:6px 10px;border-radius:999px;border:1px solid #ffffff17;background:#ffffff0d;font-size:11px;color:#e3ded7}.pv-chips i{font-style:normal;color:#f2b36b;margin-left:3px}
.pv-news{margin-top:auto;display:flex;flex-direction:column;gap:8px;font-size:11px;color:#9e99a6}
.pv-field{display:flex;align-items:center;justify-content:space-between;height:38px;padding:0 5px 0 12px;border-radius:10px;border:1px solid #ffffff1c;background:#00000047;color:#77737f}
.pv-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}.pv-stats>span{padding:12px;border-radius:10px;border:1px solid #ffffff12;background:#ffffff0a;font-size:10.5px;line-height:1.3;color:#a39eab}.pv-stats b{display:block;margin-bottom:3px;font-size:23px;font-weight:500;letter-spacing:-.045em;color:#fff}
.pv-side-nord .pv-btn{margin-top:auto;align-self:flex-start;padding:11px 16px}
.pv-crumbs{font-size:11px;color:#9a95a2}.pv-crumbs i{font-style:normal;color:#5f5b66;margin:0 4px}
.pv-author{display:flex;align-items:center;gap:11px;padding:14px 0;border-top:1px solid #ffffff12;border-bottom:1px solid #ffffff12;font-size:11px;color:#99949f}
.pv-author>i{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid #ff6a4d66;background:#ff6a4d1f;color:#ffb3a3;font-style:normal;font-size:11px;font-weight:600}
.pv-author b{display:block;font-size:13px;font-weight:500;color:#f2eeea}
.pv-toc{display:flex;flex-direction:column;gap:9px;font-size:12px;color:#a19ca8}.pv-toc .pv-eyebrow{margin-bottom:2px}
.pv-share{margin-top:auto;display:flex;align-items:center;gap:8px;font-size:11px;color:#8f8a96}

.pv-popular,.pv-review,.pv-ingredients{display:flex;flex-direction:column;gap:9px;padding-top:14px;border-top:1px solid #ffffff12}
.pv-popular>span:not(.pv-eyebrow){display:flex;gap:10px;font-family:Georgia,'Times New Roman',serif;font-size:13px;line-height:1.3;color:#ebe5dc}.pv-popular b{flex:none;padding-top:2px;font-family:inherit;font-size:10px;color:#f2b36b}
.pv-review{padding:14px;border:1px solid #ffffff12;border-radius:10px;background:#ffffff08;font-size:12.5px;line-height:1.55;color:#dcd7d0}.pv-review b{display:block;margin-top:4px;font-size:10.5px;font-weight:500;color:#9d98a4}
.pv-ingredients{gap:8px}.pv-ingredients>span:not(.pv-eyebrow){display:flex;justify-content:space-between;gap:10px;padding-bottom:7px;border-bottom:1px dashed #ffffff17;font-size:12px;color:#c9c3cc}.pv-ingredients b{font-weight:500;color:#fff}
@container (max-height:500px){.pv-extra{display:none}}

/* 01 Blog cards */
.pv-card{display:flex;flex-direction:column;gap:9px;padding:8px 8px 14px}
.pv-card-img{position:relative;flex:1 1 auto;min-height:0;border-radius:8px;overflow:hidden;background:#15151a}
.pv-card-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pv-card-meta{display:flex;gap:10px;padding:0 6px;font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#f2b36b}.pv-card-meta span+span{color:#8f8a95;font-weight:500}
.pv-card-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:2.5em;padding:0 6px;font-family:Georgia,'Times New Roman',serif;font-size:clamp(12px,6.1cqw,17px);line-height:1.25;color:#f5efe7}
@container (max-height:215px){.pv-card-meta{display:none}.pv-card{gap:7px;padding-bottom:11px}}
@container (max-height:150px){.pv-card-title{-webkit-line-clamp:1;min-height:0}}

/* 02 Presentation site services */
.pv-service img,.pv-figure img,.pv-landing img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pv-service:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#07070a59 0%,transparent 26%,transparent 42%,#07070aeb 100%)}
.pv-service-num{position:absolute;z-index:2;left:18px;top:16px;font-size:11px;letter-spacing:.2em;color:#ffffffcc}
.pv-service-copy{position:absolute;z-index:2;left:18px;right:60px;bottom:18px;display:flex;flex-direction:column;gap:7px}
.pv-service-copy strong{font-size:clamp(16px,9cqw,25px);font-weight:500;line-height:1.05;letter-spacing:-.04em;color:#fff}
.pv-service-copy span{max-width:28ch;font-size:12px;line-height:1.5;color:#d2cdd6}
.pv-service-go{position:absolute;z-index:2;right:16px;bottom:18px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#efe9df;color:#17140f;font-size:14px}
/* 03.10.2026 — the arrow is drawn (SVG), not the „↗” character: a glyph is centred by its font box, so it sat low. */
.pv-service-go svg{display:block;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@container (max-height:190px){.pv-service-copy span{display:none}.pv-service-num{top:12px;left:14px}.pv-service-copy{left:14px;bottom:14px}.pv-service-go{bottom:12px;right:12px;width:30px;height:30px}}

/* 03 Article with caption */
.pv-figure{margin:0}
.pv-legend{position:absolute;z-index:2;left:12px;right:12px;bottom:12px;padding:11px 13px;border-radius:10px;background:#0b0a0bc4;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:11.5px;line-height:1.45;color:#dcd6d0}
.pv-legend b{margin-right:9px;font-size:10px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:#ff8a70}
.pv-article{display:flex;flex-direction:column;gap:13px;padding:clamp(18px,7cqw,30px) clamp(18px,7cqw,30px) 0;overflow:hidden;-webkit-mask-image:linear-gradient(#000 76%,transparent);mask-image:linear-gradient(#000 76%,transparent)}
.pv-article-kicker{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#ff8a70}
.pv-article-title{display:block;font-family:Georgia,'Times New Roman',serif;font-size:clamp(21px,8.6cqw,36px);font-weight:400;line-height:1.05;letter-spacing:-.02em;color:#fbf6f0}
.pv-article-lead{font-size:clamp(12.5px,4.3cqw,15px);line-height:1.55;color:#d6d0c9}
.pv-article-p{display:block;font-size:12px;line-height:1.75;color:#a9a3ad}
.pv-drop{float:left;margin:5px 9px 0 0;font-family:Georgia,'Times New Roman',serif;font-size:44px;font-weight:400;line-height:.8;color:#ff8a70}
.pv-article-h{display:block;margin-top:4px;font-size:13px;font-weight:600;color:#f3ede6}
.pv-article-quote{padding-left:13px;border-left:2px solid #ff6a4d;font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:clamp(14px,5cqw,17px);line-height:1.35;color:#f1ebe4}

/* 04 Landing page */
.pv-landing img{object-position:50% 38%}
.pv-landing:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0b0714f0 0%,#0b0714a6 36%,#0b071400 68%),linear-gradient(0deg,#0b0714d9 0%,transparent 42%)}
.pv-landing-copy{position:absolute;z-index:2;left:6cqw;bottom:13cqh;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(10px,1.6cqw,16px);max-width:48cqw}
.pv-landing-date{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#cdbfff}
.pv-landing-copy strong{font-size:clamp(34px,8.4cqw,96px);font-weight:500;line-height:.95;letter-spacing:-.06em;color:#fff}
.pv-landing-text{max-width:34ch;font-size:clamp(12px,1.35cqw,15px);line-height:1.55;color:#d9d1e6}
.pv-landing-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}.pv-landing-cta .pv-btn{padding:12px 18px;font-size:12px}
.pv-landing-count{position:absolute;z-index:2;right:5cqw;bottom:13cqh;display:flex;align-items:flex-end;gap:18px;padding:14px 18px;border-radius:16px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#bcb4c9}
.pv-landing-count b{display:block;font-size:24px;font-weight:500;letter-spacing:-.03em;text-transform:none;color:#fff}
.pv-landing-left{display:flex;align-items:center;gap:7px;padding-left:18px;border-left:1px solid #ffffff21;text-transform:none;letter-spacing:0;font-size:11px;color:#e4defa}.pv-landing-left i{width:7px;height:7px;border-radius:50%;background:#6dffa8;box-shadow:0 0 10px #6dffa8}
@container (max-width:760px){.pv-landing-count{left:6cqw;right:auto;bottom:6cqh}.pv-landing-copy{bottom:calc(6cqh + 92px);max-width:none;right:6cqw}}
@container (max-width:460px){.pv-landing-copy{left:18px;right:18px;bottom:128px}.pv-landing-copy strong{font-size:40px}.pv-landing-count{left:14px;right:14px;bottom:14px;gap:12px;padding:12px 14px;justify-content:space-between}.pv-landing-count b{font-size:20px}.pv-landing-left{padding-left:12px}.pv-landing:after{background:linear-gradient(0deg,#0b0714f5 0%,#0b0714a6 50%,#0b071433 100%)}}

/* Caption under the window */
.pv-caption{flex:none;height:var(--pv-cap);display:flex;justify-content:space-between;align-items:flex-end;gap:32px;padding-bottom:4px}
.pv-cap-main{display:flex;align-items:flex-end;gap:20px;min-width:0}
.pv-cap-count{display:flex;white-space:nowrap;align-items:flex-end;gap:7px;padding-bottom:9px;font-size:12px;color:#6f6c78;font-variant-numeric:tabular-nums}
.pv-cap-num{position:relative;display:inline-block;width:2.2ch;height:1.3em;color:#f5f5f7}
.pv-cap-title{position:relative;display:block;width:10.5em;height:1.12em;font-size:clamp(34px,4vw,54px);font-weight:500;line-height:1.1;letter-spacing:-.05em;color:#f5f5f7}
.pv-chars{position:absolute;left:0;bottom:0;white-space:nowrap}
.pv-char{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.24em;margin-bottom:-.24em}
.pv-char>span{display:inline-block}
.pv-chars:not([data-s="0"]) .pv-char>span{transform:translateY(110%)}
.pv-cap-side{display:flex;flex-direction:column;align-items:flex-end;gap:14px;width:min(360px,40%);padding-bottom:9px}
.pv-cap-desc{display:block;width:100%;height:3em;font-size:13px;line-height:1.5;color:#9195a1;text-align:right}
.pv-cap-desc .pv-swap{align-items:flex-end;justify-content:flex-end}
.pv-steps{display:flex;gap:6px}.pv-steps i{position:relative;width:34px;height:2px;border-radius:2px;overflow:hidden;background:#ffffff1f}
.pv-steps i:after{content:'';position:absolute;inset:0;background:#b6a0ff;transform:scaleX(var(--f,0));transform-origin:0 50%}
.pv-steps i:first-child{--f:1}

/* ---------- Look switch (glow / satin), same control as the online store ---------- */
.presentation-eyebrow{flex-wrap:wrap}
.pv-look{display:inline-flex;align-items:center;gap:4px;margin-left:14px;padding:3px 3px 3px 10px;border:1px solid #ffffff1f;border-radius:999px;background:#ffffff08;white-space:nowrap;letter-spacing:0}
.pv-look>b{margin-right:6px;font-size:9px;font-weight:600;letter-spacing:.12em;color:#8f8a96}
.pv-look button{padding:6px 11px;border:0;border-radius:999px;background:transparent;color:#a9a4b1;font:inherit;font-size:10px;font-weight:600;letter-spacing:.06em;cursor:pointer;transition:background-color .2s,color .2s}
.pv-look button:hover{color:#fff}
.pv-look button[aria-pressed="true"]{background:#b6a0ff;color:#140d24}
.pv-look button:focus-visible{outline:2px solid #cdbfff;outline-offset:2px}

/* ---------- Look "satin-glow" = „Neon dark" (default): black window with a faint satin, flat panes lit from the top
   with a light satin overlay, a neon impulse on the top edge of the menu. Without a look the panes are frosted glass. */
.presentation-section[data-look="satin-glow"] .pv-body{background:radial-gradient(110% 60% at 50% 0%,#141220 0%,#09090c 50%,#050507 100%)}
.presentation-section[data-look="satin-glow"] .pv-bg{visibility:visible;opacity:.16;-webkit-mask-image:radial-gradient(85% 65% at 55% 45%,#000 15%,transparent 75%);mask-image:radial-gradient(85% 65% at 55% 45%,#000 15%,transparent 75%)}
.presentation-section[data-look="satin-glow"] .pv-pane{background:linear-gradient(180deg,#17161ded,#0e0e12f2);box-shadow:inset 0 1px 0 #ffffff17,inset 0 0 0 1px #ffffff0e,0 12px 30px #0000008c}
.presentation-section[data-look="satin-glow"] .pv-tile:after{box-shadow:inset 0 1px 0 #ffffff17,inset 0 0 0 1px #ffffff0e}
/* The satin overlay inside the panes: the flat pane stays on top, slightly see-through, so about a fifth of the frosted slice shows through. */
.presentation-section[data-look="satin-glow"] .pv-frost-on .pv-pane{background-image:linear-gradient(180deg,#17161dc7,#0e0e12d4),var(--pv-frost);background-size:100% 100%,var(--pv-bw) var(--pv-bh);background-position:0 0,var(--pv-bx,0) var(--pv-by,0);background-repeat:no-repeat}
/* Neon impulse (timing in presentation-sites.js): a head runs left to right, the violet-to-blue line forms
   behind it, holds, fades. On the wide menu pill; on phones, where the menu is a small burger, on the logo pill. */
@property --pvline{syntax:'<number>';inherits:true;initial-value:0}
@property --pvline-o{syntax:'<number>';inherits:true;initial-value:0}
@property --pvhead-o{syntax:'<number>';inherits:true;initial-value:0}
.presentation-section:is([data-look="satin-glow"],[data-look="aurora"],[data-look="liquid"]) .pv-nav:before{content:'';position:absolute;z-index:2;left:18px;right:18px;top:0;height:1px;background:linear-gradient(90deg,transparent,#b6a0ff 30%,#6fa2ff 70%,transparent);box-shadow:0 0 12px #8f7bff;clip-path:inset(-20px calc((1 - var(--pvline)) * 100%) -20px -20px);opacity:var(--pvline-o);pointer-events:none}
.presentation-section:is([data-look="satin-glow"],[data-look="aurora"],[data-look="liquid"]) .pv-nav:after{content:'';position:absolute;z-index:2;top:-1px;left:calc(18px + (100% - 36px) * var(--pvline));width:90px;height:3px;border-radius:2px;transform:translateX(-100%);background:linear-gradient(90deg,transparent,#d9d0ff 80%,#fff);box-shadow:6px 0 14px #a88bff;opacity:var(--pvhead-o);pointer-events:none}
.presentation-section:is([data-look="satin-glow"],[data-look="aurora"],[data-look="liquid"]) .pv-top.is-pulsing{animation:pv-line 2.8s linear both}
@keyframes pv-line{
  0%{--pvline:0;--pvline-o:1;--pvhead-o:0;animation-timing-function:cubic-bezier(.3,.05,.3,1)}
  8%{--pvhead-o:1}
  46%{--pvline:1}
  54%{--pvhead-o:0}
  70%{--pvline-o:1}
  100%{--pvline:1;--pvline-o:0;--pvhead-o:0}
}

/* The looks change only what is inside the browser window; the section around it (halo, eyebrow, progress) stays as it is.
   ---------- Look "aurora": colour instead of violet — teal, blue and pink light behind dark glass panes.
   The rim is teal on the top-left edges and pink on the bottom-right ones; the neon impulse runs teal to pink. */
.presentation-section[data-look="aurora"] .pv-window{border-color:#ffffff26}
.presentation-section[data-look="aurora"] .pv-body{background:radial-gradient(60% 55% at 10% 6%,#14e0c236,transparent 70%),radial-gradient(55% 60% at 94% 96%,#ff4fa130,transparent 70%),radial-gradient(70% 60% at 60% 42%,#4f5dff26,transparent 75%),#06070d}
.presentation-section[data-look="aurora"] .pv-pane{background:linear-gradient(160deg,#151b2ce0,#0b0d17ed);box-shadow:inset 1px 1px 0 #43f0d852,inset -1px -1px 0 #ff5fa245,0 14px 34px #0000008c}
.presentation-section[data-look="aurora"] .pv-tile:after{box-shadow:inset 1px 1px 0 #43f0d852,inset -1px -1px 0 #ff5fa245}
.presentation-section[data-look="aurora"] .pv-nav:before,.presentation-section[data-look="aurora"] .pv-logo:before{background:linear-gradient(90deg,transparent,#3ff0d5 30%,#ff5fa2 70%,transparent);box-shadow:0 0 12px #3ff0d5}
.presentation-section[data-look="aurora"] .pv-nav:after,.presentation-section[data-look="aurora"] .pv-logo:after{background:linear-gradient(90deg,transparent,#c9fff6 80%,#fff);box-shadow:6px 0 14px #3ff0d5}
/* ---------- Look "liquid" (Liquid glass): clear glass over colour. A vivid, dark backdrop inside the window; panes that
   let it through, with a sheen on top, a glint in the top-left corner and bright specular edges; the impulse on the
   menu becomes a white glint running along the glass. */
.presentation-section[data-look="liquid"] .pv-body{background:radial-gradient(42% 52% at 16% 20%,#6a4bffa6,transparent 70%),radial-gradient(38% 46% at 86% 14%,#ff4f9a80,transparent 70%),radial-gradient(48% 52% at 72% 90%,#ff8a3d73,transparent 70%),radial-gradient(44% 50% at 22% 92%,#1fb6ff66,transparent 70%),#0a0914}
.presentation-section[data-look="liquid"] .pv-pane{background:radial-gradient(120% 70% at 0% 0%,#ffffff1f,transparent 55%),linear-gradient(180deg,#ffffff1a,#ffffff06 45%,#ffffff03 70%,#ffffff0f),#0e0c1c5c;box-shadow:inset 0 1px 0 #ffffff8c,inset 1px 0 0 #ffffff38,inset -1px 0 0 #ffffff1a,inset 0 -1px 0 #ffffff29,inset 0 0 22px #ffffff0d,0 18px 40px #00000066}
.presentation-section[data-look="liquid"] .pv-tile:after{box-shadow:inset 0 1px 0 #ffffff8c,inset 1px 0 0 #ffffff38,inset -1px 0 0 #ffffff1a,inset 0 -1px 0 #ffffff29}
.presentation-section[data-look="liquid"] .pv-nav:before,.presentation-section[data-look="liquid"] .pv-logo:before{background:linear-gradient(90deg,transparent,#ffffffd9 30%,#ffffffd9 70%,transparent);box-shadow:0 0 10px #ffffffa6}
.presentation-section[data-look="liquid"] .pv-nav:after,.presentation-section[data-look="liquid"] .pv-logo:after{background:linear-gradient(90deg,transparent,#fff 80%,#fff);box-shadow:6px 0 14px #fff}

.pv+.presentation-features{margin-top:26px}

/* Without the script the window simply shows the blog. */
.pv:not(.pv-ready) .pv-window{height:auto}
.pv:not(.pv-ready) .pv-body{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:84px 18px 18px}
.pv:not(.pv-ready) .pv-tile{position:relative;height:250px}
.pv:not(.pv-ready) .pv-side,.pv:not(.pv-ready) .pv-face:not([data-s="0"]){display:none}

/* Interactive demo sites: categories, chapters, newsletters and share (presentation-sites.js). */
:where(.pv) button{margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pv button:focus-visible{outline:2px solid #f2b36b;outline-offset:3px}
.pv-link{position:relative;padding:6px 0;color:#bdb8c4;transition:color .3s cubic-bezier(.4,0,.2,1)}
.pv-link:after{content:'';position:absolute;left:0;right:0;bottom:1px;height:1.5px;border-radius:2px;background:#f2b36b;transform:scaleX(0);transform-origin:0 50%;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.pv-link:hover,.pv-link[aria-pressed="true"]{color:#fff}
.pv-link[aria-pressed="true"]:after{transform:scaleX(1)}
.pv button.pv-btn{transition:filter .25s,transform .2s,background-color .3s,border-color .3s,color .3s}
.pv button.pv-btn:hover{filter:brightness(1.08)}
.pv button.pv-btn:active{transform:scale(.97)}
.pv .pv-btn[data-done]{gap:6px;background:#f2b36b14;border-color:#f2b36b66;color:#f2b36b}
.pv .pv-btn-red[data-done]{background:#ff6a4d14;border-color:#ff6a4d66;color:#ff8a70}
.pv-btn svg{flex:none;width:13px;height:13px}
.pv-side-head{display:flex;flex-direction:column;gap:12px}
.pv-news-note{transition:color .25s}.pv-news-note[data-error]{color:#ff8a70}
.pv-field{transition:border-color .3s,background-color .3s}
.pv-field:focus-within{border-color:#f2b36b80}
.pv-field input{flex:1 1 auto;min-width:0;height:100%;padding:0;border:0;background:none;outline:none;font:inherit;font-size:11.5px;color:#f2eee8}
.pv-field input::placeholder{color:#77737f;opacity:1}
.pv-field button{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#f2b36b;color:#1b1208;transition:transform .25s cubic-bezier(.22,1,.36,1),background-color .3s,color .3s}
.pv-field button:hover{transform:translateX(2px)}
.pv-field button svg{width:14px;height:14px}
.pv-field[data-error]{border-color:#ff6a4d99;animation:pv-shake .36s}
.pv-field[data-done]{border-color:#35d07f47;background:#35d07f0d}
.pv-field[data-done] input::placeholder{color:#9fe6bd}
.pv-field[data-done] button{background:#35d07f29;color:#5be39a;cursor:default;transform:none}
@keyframes pv-shake{20%,60%{transform:translateX(-3px)}40%,80%{transform:translateX(3px)}}
.pv-toc button{position:relative;align-self:flex-start;padding-left:0;color:#a19ca8;transition:color .3s,padding-left .4s cubic-bezier(.22,1,.36,1)}
.pv-toc button:before{content:'';position:absolute;left:0;top:3px;bottom:3px;width:2px;border-radius:2px;background:#ff6a4d;transform:scaleY(0);transition:transform .4s cubic-bezier(.22,1,.36,1)}
.pv-toc button:hover{color:#f2eee8}
.pv-toc button[aria-pressed="true"]{padding-left:12px;color:#fff}
.pv-toc button[aria-pressed="true"]:before{transform:scaleY(1)}
.pv-share button{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid #ffffff21;background:#ffffff08;color:#cfc9d2;transition:transform .3s cubic-bezier(.22,1,.36,1),color .3s,background-color .3s,border-color .3s}
.pv-share svg{width:14px;height:14px}
.pv-share button:hover{transform:translateY(-2px);color:#fff}
.pv-share [data-share="Facebook"]:hover{background:#1877f2;border-color:#1877f2}
.pv-share [data-share="Instagram"]:hover{background:linear-gradient(45deg,#f9a13a,#e1306c 55%,#833ab4);border-color:transparent}
.pv-share [data-share="TikTok"]:hover{background:#050505;border-color:#25f4ee99;box-shadow:2px 2px 0 -1px #fe2c55}
.pv-chapter-body{display:flex;flex-direction:column;gap:13px}
.pv-next{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin-top:2px;padding:6px 0;font-size:12px;font-weight:600;color:#ff8a70;transition:color .3s,gap .35s cubic-bezier(.22,1,.36,1)}.pv-next:after{content:'→'}.pv-next[data-chapter="0"]:after{content:'↑'}
.pv-next:hover{gap:12px;color:#ffb3a3}
/* Content swap: out quickly, in with a soft landing; the face itself (and its size) never changes. */
.pv-card-img img,.pv-figure>img{transition:opacity .45s cubic-bezier(.22,1,.36,1)}
.pv-card-meta,.pv-card-title,.pv-legend,.pv-chapter-body,.pv-side-head{transition:opacity .45s cubic-bezier(.22,1,.36,1),transform .45s cubic-bezier(.22,1,.36,1)}
.pv-card[data-swap] .pv-card-img img,.pv-figure[data-swap]>img{opacity:0;transition-duration:.19s;transition-timing-function:ease-in}
.pv-card[data-swap] :is(.pv-card-meta,.pv-card-title),.pv-figure[data-swap] .pv-legend,.pv-chapter-body[data-swap],.pv-side-head[data-swap]{opacity:0;transform:translateY(6px);transition-duration:.19s;transition-timing-function:ease-in}
/* Phone menu of the blog (the burger) and the notice every action answers with. */
button.pv-burger{padding:12px 10px}
.pv-burger i{transition:transform .35s cubic-bezier(.22,1,.36,1)}
.pv-burger[aria-expanded="true"] i:first-child{transform:translateY(3.25px) rotate(45deg)}
.pv-burger[aria-expanded="true"] i:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.pv-menu{position:absolute;z-index:7;top:calc(var(--pv-p) + var(--pv-t) + 6px);right:var(--pv-p);display:none;flex-direction:column;gap:2px;min-width:180px;padding:6px;border:1px solid #ffffff1f;border-radius:12px;background:#121117;box-shadow:0 18px 40px #000000b3;opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:100% 0;transition:opacity .2s,transform .25s cubic-bezier(.22,1,.36,1),visibility 0s .25s}
.pv-menu[data-open]{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .35s cubic-bezier(.22,1,.36,1),visibility 0s}
.pv-menu [data-cat]{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:8px;font-size:13px;color:#d6d2db}
.pv-menu [data-cat][aria-pressed="true"]{background:#ffffff0d;color:#fff}
.pv-menu [data-cat][aria-pressed="true"]:after{content:'';width:6px;height:6px;border-radius:50%;background:#f2b36b}
.pv-menu .pv-btn{justify-content:center;margin-top:6px;padding:11px 14px;background:#f2b36b;border-color:transparent;color:#1b1208;font-size:12px}
.pv-toast{position:absolute;z-index:8;left:50%;bottom:calc(var(--pv-p) + 10px);display:flex;align-items:center;gap:9px;max-width:calc(100% - 2 * var(--pv-p) - 20px);padding:9px 16px 9px 10px;border:1px solid #ffffff24;border-radius:999px;background:#141318f2;box-shadow:0 14px 34px #000000b3;font-size:12px;line-height:1.35;color:#f2eee8;white-space:nowrap;opacity:0;visibility:hidden;transform:translate(-50%,10px);transition:opacity .25s,transform .35s cubic-bezier(.22,1,.36,1),visibility 0s .35s;pointer-events:none}
.pv-toast[data-on]{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .25s,transform .5s cubic-bezier(.22,1,.36,1),visibility 0s}
.pv-toast svg{flex:none;width:20px;height:20px;padding:3px;border-radius:50%;background:#35d07f26;color:#5be39a}
.pv-toast[data-tone="out"] svg{background:#ffffff14;color:#cfc9d2}


@media(max-width:900px){.pv-side{display:none}}
@media(max-width:700px){
  .pv{--pv-top:12px;--pv-bottom:12px;--pv-cap:118px;--pv-run:6.125}
  .pv-window{border-radius:16px;clip-path:inset(0 round 16px)}
  .pv-chrome{height:33px;padding:0 12px;font-size:9px}.pv-dots{gap:5px}.pv-dots i{width:6px;height:6px}.pv-url{flex-basis:210px;height:20px}.pv-plus{display:none}
  .pv-body{--pv-p:10px;--pv-g:8px;--pv-t:42px;--pv-r:10px}
  .pv-top{grid-template-columns:1fr 50px}
  .pv-logo .pv-swap{padding:0 14px}.pv-mark-drum{font-size:17px}.pv-mark-nord{font-size:10px;gap:9px}.pv-mark-gust{font-size:19px}.pv-mark-noc{font-size:11px}
  .presentation-section:is([data-look="satin-glow"],[data-look="aurora"],[data-look="liquid"]) .pv-nav:before,.presentation-section:is([data-look="satin-glow"],[data-look="aurora"],[data-look="liquid"]) .pv-nav:after{display:none}
  .presentation-section:is([data-look="satin-glow"],[data-look="aurora"],[data-look="liquid"]) .pv-logo:before{content:'';position:absolute;z-index:2;left:14px;right:14px;top:0;height:1px;background:linear-gradient(90deg,transparent,#b6a0ff 30%,#6fa2ff 70%,transparent);box-shadow:0 0 12px #8f7bff;clip-path:inset(-20px calc((1 - var(--pvline)) * 100%) -20px -20px);opacity:var(--pvline-o);pointer-events:none}
  .presentation-section:is([data-look="satin-glow"],[data-look="aurora"],[data-look="liquid"]) .pv-logo:after{content:'';position:absolute;z-index:2;top:-1px;left:calc(14px + (100% - 28px) * var(--pvline));width:60px;height:3px;border-radius:2px;transform:translateX(-100%);background:linear-gradient(90deg,transparent,#d9d0ff 80%,#fff);box-shadow:6px 0 14px #a88bff;opacity:var(--pvhead-o);pointer-events:none}
  .pv-look{margin:10px 0 0}
  .pv-nav .pv-swap{justify-content:center;padding:0}.pv-nav .pv-links,.pv-nav .pv-btn{display:none}.pv-burger{display:flex}
  .pv-card{padding:6px 6px 10px;gap:7px}.pv-card-meta{padding:0 4px}.pv-card-title{padding:0 4px;font-size:12.5px}
  .pv-legend{left:8px;right:8px;bottom:8px;padding:9px 11px;font-size:11px}
  .pv-menu{display:flex}
  .pv-toast{width:max-content;white-space:normal;border-radius:14px;font-size:11.5px}
  .pv-caption{flex-direction:column;align-items:stretch;justify-content:flex-end;gap:8px;padding-bottom:0}
  .pv-cap-main{gap:14px}.pv-cap-count{padding-bottom:6px}.pv-cap-title{font-size:32px}
  .pv-cap-side{width:100%;flex-direction:row;align-items:center;justify-content:space-between;gap:16px;padding-bottom:4px}
  .pv-cap-desc{height:3em;font-size:12px;text-align:left}.pv-cap-desc .pv-swap{justify-content:flex-start;align-items:center}
  .pv-steps{flex:none}.pv-steps i{width:18px}
  .pv:not(.pv-ready) .pv-body{grid-template-columns:1fr 1fr;padding:62px 10px 10px;gap:8px}
  .pv:not(.pv-ready) .pv-tile{height:180px}
}