/* =====================================================================
   IN BOTH LOOKS (comes after style.css): the Features page, the player's real top right buttons, the day / night button.
   The colours follow the look: --green, --panel-tint and --fx-tint.
   ===================================================================== */
:root { --fx-tint: rgba(8, 30, 16, .34); }

/* ---- the player: the same live player on Home and Features. It only moves and zooms (features.js moves .player-move) ---- */
.player-zone { will-change: auto; z-index: 3; }
.player-move { position: absolute; inset: 0; transform-origin: 0 0; transition: transform .95s cubic-bezier(.3,.75,.2,1); pointer-events: none; }
.player-move .player { pointer-events: auto; }
body[data-page="features"] .player.page-el { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .6s ease; }

/* the player's top right buttons, in the real player's places (333, 355, 377, 399, 421 of 460): only while the mouse is on the player */
.win-btns { left: calc(var(--k) * 322); right: auto; top: calc(var(--k) * 7); gap: 0; opacity: 0; transition: opacity .3s ease; }
.player:hover .win-btns, .player:focus-within .win-btns { opacity: 1; transition-duration: .18s; }
.win-btns span { position: relative; display: block; width: calc(var(--k) * 22); height: calc(var(--k) * 26); line-height: 0; color: rgba(255,255,255,.94); }
.win-btns svg { position: relative; display: block; width: 100%; height: 100%; }
.win-btns span::before { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--k) * 20); height: calc(var(--k) * 20); margin: calc(var(--k) * -10) 0 0 calc(var(--k) * -10); border-radius: 50%; background: rgba(255,255,255,.15); opacity: 0; transition: opacity .15s; }
.win-btns span:hover::before { opacity: 1; }
.win-hint { display: none; }
.player.btn-hint .song-hint:not(.win-hint) { visibility: hidden; }
.player.btn-hint .win-hint { display: block; }

/* ===================== FEATURES ===================== */
.features-scroll { display: none; }
.fx-title, .fx-heads, .fx-lines, .fx-text { display: none; }
body[data-page="features"] .fx-title, body[data-page="features"] .fx-lines { display: block; }
body[data-page="features"] .fx-heads { display: block; }
body[data-page="features"] .fx-text { display: block; }

.fx-title { position: fixed; z-index: 4; left: 0; right: 0; top: calc(var(--u) * 5.5); margin: 0; text-align: center; font-weight: 700; font-size: calc(var(--u) * 4.2); line-height: 1.05; text-shadow: 0 2px 10px rgba(0,0,0,.65); transition: opacity .4s; }
.fx-title span { color: var(--green); }
.fx-title b { display: block; font-weight: 800; letter-spacing: .05em; }
.fx-title small { display: block; margin-top: .22em; font-size: .46em; font-weight: 700; }
body.fx-zoomed .fx-title { opacity: 0; }

/* opening Features: the player appears first, then the title, then the headings slide out from behind it to their places */
@keyframes fxHeadIn { from { opacity: 0; transform: translateX(calc(var(--fx-from) * var(--u) * 11)) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes fxTitleIn { from { opacity: 0; transform: translateY(calc(var(--u) * -1)); } to { opacity: 1; transform: none; } }
body[data-page="features"] .fx-head { animation: fxHeadIn 1.5s cubic-bezier(.22,.8,.24,1) backwards; }
body[data-page="features"] .fx-title { animation: fxTitleIn 1.1s ease .5s backwards; }

/* the dotted line and the dot: only for the heading the mouse is on */
.fx-lines { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none; }
.fx-lines path { fill: none; stroke: rgba(255,255,255,.9); stroke-width: 1.3; stroke-dasharray: 2 5; stroke-linecap: round; }
.fx-lines .dot { fill: #fff; }
.fx-lines .halo { fill: none; stroke: var(--green); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: fxPulse 1.8s ease-out infinite; }
@keyframes fxPulse { from { transform: scale(.6); opacity: .9; } to { transform: scale(2); opacity: 0; } }

/* the headings: around the player, and one bar under it once one is open */
.fx-head { position: fixed; z-index: 12; margin: 0; display: flex; align-items: center; gap: .55em; padding: 0 calc(var(--u) * .95); border: 0; border-radius: calc(var(--u) * .8); cursor: pointer;
           color: #fff; font: inherit; font-weight: 700; font-size: max(calc(var(--u) * 1.02), 12px); line-height: 1.2; text-align: left; text-shadow: 0 1px 3px rgba(0,0,0,.75);
           background: linear-gradient(150deg, rgba(255,255,255,.13), rgba(255,255,255,.03) 50%, rgba(255,255,255,.06)), var(--fx-tint);
           -webkit-backdrop-filter: blur(6px) saturate(1.1); backdrop-filter: blur(6px) saturate(1.1);
           box-shadow: 0 calc(var(--u) * .4) calc(var(--u) * 1.4) rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.4), inset 0 0 0 1px rgba(255,255,255,.2);
           transition: left .8s cubic-bezier(.3,.75,.2,1), top .8s cubic-bezier(.3,.75,.2,1), width .8s cubic-bezier(.3,.75,.2,1), height .8s cubic-bezier(.3,.75,.2,1), box-shadow .25s, color .25s; }
.fx-head:hover, .fx-head:focus-visible { outline: none; box-shadow: 0 calc(var(--u) * .4) calc(var(--u) * 1.4) rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px var(--green); }
.fx-head svg { width: 1.3em; height: 1.3em; flex: none; fill: none; stroke: var(--green); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.fx-zoomed .fx-head { font-size: max(calc(var(--u) * .8), 11px); justify-content: center; text-align: center; padding: 0 calc(var(--u) * .35); }
body.fx-zoomed .fx-head svg { display: none; }
.fx-head.on { color: var(--green); box-shadow: 0 calc(var(--u) * .3) calc(var(--u) * 1) rgba(0,0,0,.35), inset 0 0 0 1.5px var(--green); }

/* the heading's own text, and its clip below it */
.fx-text { position: fixed; z-index: 11; padding: calc(var(--u) * 1.7) calc(var(--u) * 1.8); border-radius: calc(var(--u) * 1.1); overflow: auto; opacity: 0; visibility: hidden; transform: translateX(calc(var(--u) * 3));
           background: var(--panel-tint); -webkit-backdrop-filter: var(--panel-glass); backdrop-filter: var(--panel-glass); box-shadow: var(--panel-edge);
           transition: opacity .3s, transform .6s cubic-bezier(.3,.75,.2,1), visibility 0s linear .3s; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.3) transparent; }
.fx-text.on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s .25s, transform .75s cubic-bezier(.3,.75,.2,1) .15s, visibility 0s; }
.fx-text h2 { margin: 0 2em .55em 0; font-size: max(calc(var(--u) * 1.5), 15px); line-height: 1.2; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.fx-text p { margin: 0 0 .75em; font-size: max(calc(var(--u) * .95), 12px); line-height: 1.45; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.fx-text p strong { color: var(--green); }
.fx-text video { display: block; width: 100%; aspect-ratio: 16 / 10; margin-top: calc(var(--u) * .9); border-radius: calc(var(--u) * .6); background: rgba(0,0,0,.3); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.fx-close { position: absolute; right: calc(var(--u) * .8); top: calc(var(--u) * .8); width: 1.7em; height: 1.7em; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.08); color: #fff; font: inherit; font-size: max(calc(var(--u) * 1.05), 13px); line-height: 1; cursor: pointer; }
.fx-close:hover, .fx-close:focus-visible { outline: none; border-color: var(--green); color: var(--green); }

/* tablets held upright */
@media (max-aspect-ratio: 1/1) {
  .fx-title { top: 66px; font-size: max(calc(var(--u) * 5), 36px); }
  .fx-head { font-size: max(calc(var(--u) * 1.7), 14px); }
  body.fx-zoomed .fx-head { font-size: max(calc(var(--u) * 1.35), 12px); }
  .fx-text h2 { font-size: max(calc(var(--u) * 2.4), 20px); }
  .fx-text p { font-size: max(calc(var(--u) * 1.8), 15px); }
  .fx-text video { max-height: 32vh; object-fit: contain; }
}
/* phones */
@media (max-width: 699px) {
  .fx-title { top: 58px; font-size: 32px; }
  .fx-title small { font-size: .5em; }
  .fx-head { font-size: 13px; padding: 0 8px; gap: .4em; line-height: 1.15; }
  body[data-page="features"].fx-zoomed .fx-head { visibility: hidden; }
  .fx-text { padding: 14px 16px; border-radius: 14px; }
  .fx-text h2 { font-size: 18px; }
  .fx-text p { font-size: 14px; }
  .fx-text video { max-height: 34vh; margin-top: 10px; border-radius: 8px; }
  .fx-close { right: 10px; top: 10px; font-size: 16px; }
}
/* the smallest phones: long headings stay inside their boxes */
@media (max-width: 349px) {
  .fx-head { font-size: 11.5px; line-height: 1.08; }
}
/* phones on their side: everything is small, so the text stays readable */
@media (max-height: 479px) {
  .fx-title { top: 44px; font-size: 22px; }
  .fx-head { font-size: 11px; padding: 0 6px; line-height: 1.12; }
  body[data-page="features"].fx-zoomed .fx-head { visibility: hidden; }
  .fx-text p { font-size: 12px; }
  .fx-text h2 { font-size: 14px; }
}

/* ===================== THE RAIN FOREST LOOK: clear glass with a little blur, as in the night look, on every page except Home (Home keeps its frost) ===================== */
html[data-theme="day"] {
  --panel-tint:  linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.02) 45%, rgba(255,255,255,.04)), rgba(3, 20, 9, .42);
  --panel-glass: blur(7px) saturate(1.1);
  --panel-edge:  0 calc(var(--u) * .5) calc(var(--u) * 2) rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.42), inset 0 0 0 1px rgba(255,255,255,.2);
}
html[data-theme="day"] .about-inner { line-height: 1.24; text-shadow: 0 1px 3px rgba(0,0,0,.8), 0 1px 8px rgba(0,0,0,.45); }
html[data-theme="day"] .download { -webkit-backdrop-filter: var(--panel-glass); backdrop-filter: var(--panel-glass); text-shadow: 0 1px 3px rgba(0,0,0,.75), 0 1px 8px rgba(0,0,0,.4); }
html[data-theme="day"] .download .sp-box, html[data-theme="day"] .download .wp-card, html[data-theme="day"] .download .wp-bundle, html[data-theme="day"] .download .th-step, html[data-theme="day"] .download .safe-box, html[data-theme="day"] .dl-req { background-color: rgba(150, 255, 170, .05); }
html[data-theme="day"] .wp-body {
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03) 50%, rgba(255, 255, 255, .02)), rgba(30, 110, 50, .08);
  -webkit-backdrop-filter: blur(3px) saturate(1.1); backdrop-filter: blur(3px) saturate(1.1);
  border-top: 1px solid rgba(255, 255, 255, .22);
}
/* the player on Features */
html[data-theme="day"] body[data-page="features"] .player {
  background: linear-gradient(135deg, rgba(255,255,255,.11), rgba(255,255,255,.02) 45%, rgba(255,255,255,.05)), rgba(3,20,9,.34);
  -webkit-backdrop-filter: blur(calc(var(--k) * 2.5)) saturate(1.1); backdrop-filter: blur(calc(var(--k) * 2.5)) saturate(1.1);
}
/* the glass strip on About (on Home it stays frosted) */
html[data-theme="day"] body[data-page="about"] .glass-strip {
  -webkit-backdrop-filter: blur(calc(var(--u) * .55)); backdrop-filter: blur(calc(var(--u) * .55));
  background: linear-gradient(100deg, rgba(255,255,255,.07), rgba(255,255,255,.015) 40%, rgba(255,255,255,.03)), rgba(3,20,9,.2);
}
html[data-theme="day"] body[data-page="about"] .leaf-text { -webkit-text-stroke: max(1px, calc(var(--u) * .07)) rgba(255,255,255,.8); }
/* going between Home and About: the glass and the GLASS PLAYER title are one layer. Together they slide away to the right and come back from there with the other glass */
@media (prefers-reduced-motion: no-preference) {
  .glass-strip.to-clear { animation: glassToClear 1.25s linear; }
  .glass-strip.to-frost { animation: glassToFrost 1.25s linear; }
  .big-title.to-clear, .big-title.to-frost { animation: titleWithGlass 1.25s linear; }
  .big-title.to-clear .leaf-text { animation: lettersToClear 1.25s linear; }
  .big-title.to-frost .leaf-text { animation: lettersToFrost 1.25s linear; }
}
@keyframes titleWithGlass {
  0% { translate: 0 0; animation-timing-function: cubic-bezier(.5,0,.9,.6); }
  34%, 34.1% { translate: 100vw 0; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
  100% { translate: 0 0; }
}
/* the letters' thin edge belongs to the clear glass: it changes while everything is off the screen */
@keyframes lettersToClear {
  0%, 34% { -webkit-text-stroke-width: 0; }
  34.1%, 100% { -webkit-text-stroke-width: max(1px, calc(var(--u) * .07)); }
}
@keyframes lettersToFrost {
  0%, 34% { -webkit-text-stroke: max(1px, calc(var(--u) * .07)) rgba(255,255,255,.8); }
  34.1%, 100% { -webkit-text-stroke: 0 transparent; }
}
@keyframes glassToClear {
  0% { translate: 0 0; animation-timing-function: cubic-bezier(.5,0,.9,.6);
       -webkit-backdrop-filter: blur(calc(var(--u) * 2.1)) saturate(1.05) brightness(1.15); backdrop-filter: blur(calc(var(--u) * 2.1)) saturate(1.05) brightness(1.15);
       background: radial-gradient(ellipse 80% 60% at 40% 45%, rgba(150, 230, 110, .16), rgba(90, 170, 70, .06) 70%); }
  34% { translate: 100vw 0; animation-timing-function: step-end;
       -webkit-backdrop-filter: blur(calc(var(--u) * 2.1)) saturate(1.05) brightness(1.15); backdrop-filter: blur(calc(var(--u) * 2.1)) saturate(1.05) brightness(1.15);
       background: radial-gradient(ellipse 80% 60% at 40% 45%, rgba(150, 230, 110, .16), rgba(90, 170, 70, .06) 70%); }
  34.1% { translate: 100vw 0; animation-timing-function: cubic-bezier(.2,.8,.2,1);
       -webkit-backdrop-filter: blur(calc(var(--u) * .55)); backdrop-filter: blur(calc(var(--u) * .55));
       background: linear-gradient(100deg, rgba(255,255,255,.07), rgba(255,255,255,.015) 40%, rgba(255,255,255,.03)), rgba(3,20,9,.2); }
  100% { translate: 0 0;
       -webkit-backdrop-filter: blur(calc(var(--u) * .55)); backdrop-filter: blur(calc(var(--u) * .55));
       background: linear-gradient(100deg, rgba(255,255,255,.07), rgba(255,255,255,.015) 40%, rgba(255,255,255,.03)), rgba(3,20,9,.2); }
}
@keyframes glassToFrost {
  0% { translate: 0 0; animation-timing-function: cubic-bezier(.5,0,.9,.6);
       -webkit-backdrop-filter: blur(calc(var(--u) * .55)); backdrop-filter: blur(calc(var(--u) * .55));
       background: linear-gradient(100deg, rgba(255,255,255,.07), rgba(255,255,255,.015) 40%, rgba(255,255,255,.03)), rgba(3,20,9,.2); }
  34% { translate: 100vw 0; animation-timing-function: step-end;
       -webkit-backdrop-filter: blur(calc(var(--u) * .55)); backdrop-filter: blur(calc(var(--u) * .55));
       background: linear-gradient(100deg, rgba(255,255,255,.07), rgba(255,255,255,.015) 40%, rgba(255,255,255,.03)), rgba(3,20,9,.2); }
  34.1% { translate: 100vw 0; animation-timing-function: cubic-bezier(.2,.8,.2,1);
       -webkit-backdrop-filter: blur(calc(var(--u) * 2.1)) saturate(1.05) brightness(1.15); backdrop-filter: blur(calc(var(--u) * 2.1)) saturate(1.05) brightness(1.15);
       background: radial-gradient(ellipse 80% 60% at 40% 45%, rgba(150, 230, 110, .16), rgba(90, 170, 70, .06) 70%); }
  100% { translate: 0 0;
       -webkit-backdrop-filter: blur(calc(var(--u) * 2.1)) saturate(1.05) brightness(1.15); backdrop-filter: blur(calc(var(--u) * 2.1)) saturate(1.05) brightness(1.15);
       background: radial-gradient(ellipse 80% 60% at 40% 45%, rgba(150, 230, 110, .16), rgba(90, 170, 70, .06) 70%); }
}
/* no shadow on the words on the buttons and price tags of the Download page */
.sp2-btn, .dl-btn, .dl-version, .wp-buy, .wp-price, .safe-go, .qr-btn, .sp-x, .tc-buy { text-shadow: none; }

/* ===================== THE DAY / NIGHT BUTTON (only in the website with both looks) =====================
   A groove pressed into the header's glass, with only the symbol in it, no word: the moon on the left in the night look, the sun on the right in the day look.
   The glass circle round the symbol shows only while the mouse is on the button (or while it slides, after a click). */
.theme-btn { position: relative; flex: none; align-self: center; width: calc(var(--u) * 3.9); height: calc(var(--u) * 1.9); margin: calc(var(--u) * -.41) calc(var(--u) * .25) 0 calc(var(--u) * -1.5); padding: 0; border: 0; border-radius: 99px; cursor: pointer; color: #fff; font: inherit;
             background: linear-gradient(rgba(0, 0, 0, .34), rgba(0, 0, 0, .1) 55%, rgba(255, 255, 255, .05)), rgba(var(--green-rgb), .2);
             box-shadow: inset 0 2px 5px rgba(0, 0, 0, .62), inset 0 1px 1px rgba(0, 0, 0, .45), inset 0 -1px 1px rgba(255, 255, 255, .14), 0 1px 0 rgba(255, 255, 255, .26); transition: background .45s; }
.theme-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.tb-bubble { position: absolute; top: 50%; left: calc(var(--u) * -.2); width: calc(var(--u) * 2.5); height: calc(var(--u) * 2.5); margin-top: calc(var(--u) * -1.25); border-radius: 50%; pointer-events: none; transition: left .52s cubic-bezier(.34,1.28,.5,1); }
.tb-bubble::before { content: ""; position: absolute; inset: 0; transform: translateY(2.5%); border-radius: 50%; opacity: 0; transition: opacity .22s;
             background: radial-gradient(ellipse 52% 26% at 40% 13%, rgba(255,255,255,.62), rgba(255,255,255,0) 100%), radial-gradient(circle at 50% 50%, rgba(255,255,255,.02) 56%, rgba(255,255,255,.13) 80%, rgba(255,255,255,.38) 100%);
             box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), inset -2px -3px 5px rgba(255,255,255,.2), 0 3px 9px rgba(0,0,0,.45);
             -webkit-backdrop-filter: blur(1px) brightness(1.15); backdrop-filter: blur(1px) brightness(1.15); }
.theme-btn.flip .tb-bubble::before, .theme-btn:focus-visible .tb-bubble::before { opacity: 1; }
@media (hover: hover) { .theme-btn:hover .tb-bubble::before { opacity: 1; } }
/* (the groove's dark top makes its middle look lower than it is, so the symbol and its circle sit 2.5 % lower, to look centred) */
.tb-bubble svg { position: absolute; left: 21%; top: 23.5%; width: 58%; height: 58%; fill: #fff; stroke: #fff; filter: drop-shadow(0 0 3px rgba(255,255,255,.55)); transition: opacity .25s; }
.tb-sun { opacity: 0; }
/* the day look of the button: in the day look, and during the slide towards day */
html[data-theme="day"] .theme-btn:not(.flip) .tb-bubble, html[data-theme="night"] .theme-btn.flip .tb-bubble { left: calc(100% - var(--u) * 2.3); }
html[data-theme="day"] .theme-btn:not(.flip) .tb-sun, html[data-theme="night"] .theme-btn.flip .tb-sun { opacity: 1; }
html[data-theme="day"] .theme-btn:not(.flip) .tb-moon, html[data-theme="night"] .theme-btn.flip .tb-moon { opacity: 0; }
@keyframes tbSquash { 0%, 100% { transform: none; } 45% { transform: scale(1.22, .88); } 75% { transform: scale(.95, 1.04); } }
.theme-btn.flip .tb-bubble { animation: tbSquash .52s ease; }
/* the whole page fades as the look changes */
html::after { content: ""; position: fixed; inset: 0; z-index: 9999; background: #000; opacity: 0; pointer-events: none; transition: opacity .55s ease; }
html.theme-arrive::after { opacity: 1; transition: none; }
html.theme-leave::after { opacity: 1; transition-duration: .3s; }
/* phones and upright tablets: the menu is full, so a small button under its right end */
@media (max-aspect-ratio: 4/5), (max-width: 760px) {
  .theme-btn { position: fixed; z-index: 21; top: calc(env(safe-area-inset-top, 0px) + 50px); right: 12px; width: 44px; height: 18px; margin: 0; }
  .tb-bubble { left: -4px; width: 26px; height: 26px; margin-top: -13px; }
  html[data-theme="day"] .theme-btn:not(.flip) .tb-bubble, html[data-theme="night"] .theme-btn.flip .tb-bubble { left: calc(100% - 22px); }
}

/* the panels start below the button (only in the website that has the button) */
@media (max-aspect-ratio: 4/5), (max-width: 760px) and (min-height: 480px) {
  body:has(.theme-btn) .about { top: calc(env(safe-area-inset-top, 0px) + 76px); }
  body:has(.theme-btn) .download-scroll { top: calc(env(safe-area-inset-top, 0px) + 74px); }
}
/* phones on their side: the button stays in the menu row, big enough for a finger */
@media (max-height: 479px) and (min-aspect-ratio: 4/5) {
  .theme-btn { position: relative; top: auto; right: auto; z-index: auto; width: 44px; height: 20px; margin: 0 2px; }
  .tb-bubble { left: -4px; width: 26px; height: 26px; margin-top: -13px; }
  html[data-theme="day"] .theme-btn:not(.flip) .tb-bubble, html[data-theme="night"] .theme-btn.flip .tb-bubble { left: calc(100% - 22px); }
}
/* touch screens: the button answers in a wider area; held sideways it is never smaller than on a phone */
@media (pointer: coarse) { .theme-btn::after { content: ""; position: absolute; inset: -12px -6px; } }
@media (pointer: coarse) and (min-aspect-ratio: 4/5) {
  .theme-btn { width: max(calc(var(--u) * 3.9), 44px); height: max(calc(var(--u) * 1.9), 20px); }
  .tb-bubble { left: -4px; width: max(calc(var(--u) * 2.5), 26px); height: max(calc(var(--u) * 2.5), 26px); margin-top: min(calc(var(--u) * -1.25), -13px); }
  html[data-theme="day"] .theme-btn:not(.flip) .tb-bubble, html[data-theme="night"] .theme-btn.flip .tb-bubble { left: calc(100% - max(calc(var(--u) * 2.5), 26px) + 4px); }
}

@media (prefers-reduced-motion: reduce) { .player-move, .fx-head, .fx-text, .tb-bubble { transition: none !important; } body[data-page="features"] .fx-head, body[data-page="features"] .fx-title, .theme-btn.flip .tb-bubble { animation: none; } .fx-lines .halo { animation: none; } }