/* The page sits above the original ink-water study. Its controls remain submerged. */
html,body{width:100%;height:100svh;overflow:hidden;overscroll-behavior:none}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
body[data-tone="night"]{--paper:#1e1f1c;--text:#f8f8f2;--muted:#ccccc7;--line:#414339;--panel:#272822;--selected:#f8f8f2;--on-selected:#1e1f1c}
.blog-copy{position:fixed;z-index:2;left:var(--blog-left,9vw);top:var(--blog-top,28vh);width:min(520px,calc(100vw - var(--blog-left,9vw)));max-width:520px;margin:0;padding:0 20px 0 0;text-align:left;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:var(--blog-font-size,14px);font-weight:400;line-height:1.7;pointer-events:none}
.blog-copy h1{margin:0 0 1.7em;font:inherit;letter-spacing:normal}
.blog-copy p{margin:0 0 1.7em}
.blog-copy p,.blog-copy h1{pointer-events:auto;cursor:text}
.blog-copy a{color:inherit;text-decoration:underline;text-underline-offset:2px;font-family:inherit}
body[data-tone="night"] .blog-copy{color:#90908a}
body[data-tone="night"] .blog-copy h1{color:#f8f8f2}
body[data-tone="night"] .blog-copy a{text-decoration-color:rgba(144,144,138,.3)}
body[data-tone="night"] .blog-copy a:hover{color:#ccccc7;text-decoration-color:rgba(204,204,199,.5)}
.blog-copy a:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.blog-links{margin-top:0;font:inherit;pointer-events:auto}
.blog-links span{padding:0 4px}
.blog-links>*{display:inline-block}
.blog-links .water-refracting,.water-dock .water-refracting{filter:var(--water-refraction-filter,none)}
.blog-links :is(a,button).water-refracting:is(:hover,:focus-visible){filter:none}
body[data-tone="night"] .blog-links{color:#ccccc7}
.stage canvas{cursor:default;touch-action:pan-y}
.loading,.error{pointer-events:none;background:transparent;font-size:12px;inset:auto 24px 22px auto;max-width:240px;padding:0}
.water-dock{left:auto;top:auto;right:28px;bottom:22px;transform:none;width:280px;max-width:calc(100vw - 40px)}
.water-dock:has(.is-expanded){top:auto}
.water-dock>*{min-width:0;flex-shrink:0}
.water-dock.water-refracting:is(:hover,:has(:focus-visible)){filter:var(--water-refraction-filter,none)}
.water-dock>.music-trigger{min-height:44px;width:100%;border-radius:22px}
/* The sun/moon toggle closes the contact row; its 2em hit area does not change the line height. */
#blog-theme{width:2em;height:2em;margin:-.5em -.5em -.5em .45em;padding:0;border:0;border-radius:50%;background:none;color:inherit;font:inherit;line-height:0;vertical-align:middle;cursor:pointer}
#blog-theme svg{width:1.15em;height:1.15em}
#blog-theme:focus-visible{outline:2px solid currentColor;outline-offset:-2px}
body[data-tone="night"] .theme-sun,body[data-tone="green-light"] .theme-moon{display:none}
body[data-tone="night"]{color-scheme:dark}
body[data-tone="green-light"]{color-scheme:light}
.youtube-frame:hover{transform:var(--water-video-transform,none)}
::selection{background:var(--text);color:var(--paper)}
@media(max-width:700px){.water-dock{left:auto;top:auto;right:20px;bottom:12px;width:280px}}
@media(max-height:700px){.water-dock,.water-dock:has(.is-expanded){top:auto;transform:none}}
/* Keep the original video, bar and details accessible in short phone landscapes. */
@media(min-width:600px) and (max-height:450px){
  .music-panel.is-expanded{width:500px;align-self:flex-end;display:grid;grid-template-columns:202px minmax(0,1fr);gap:8px}
  .music-panel.is-expanded .youtube-slot{grid-column:1;grid-row:1 / span 2;width:202px;height:202px}
  .music-panel.is-expanded .music-bar{grid-column:2;grid-row:1}
  .music-panel.is-expanded .music-details{grid-column:2;grid-row:2;max-height:100px}
}
@media(prefers-reduced-motion:reduce){.water-refracting{filter:none!important}}

/* Theme Blur Transition Effect using View Transitions API */
::view-transition-old(root) {
  animation: theme-blur-out 1.6s ease-in-out both;
}

::view-transition-new(root) {
  animation: theme-blur-in 1.6s ease-in-out both;
}

@keyframes theme-blur-out {
  0% {
    opacity: 1;
    filter: blur(0) saturate(1);
    transform: scale(1);
  }

  20% {
    opacity: 0.85;
    filter: blur(4px) saturate(1.1);
    transform: scale(1.005);
  }

  45% {
    opacity: 0.5;
    filter: blur(12px) saturate(1.2);
    transform: scale(1.012);
  }

  70% {
    opacity: 0.2;
    filter: blur(20px) saturate(1.0);
    transform: scale(1.018);
  }

  100% {
    opacity: 0;
    filter: blur(24px) saturate(0.7);
    transform: scale(1.02);
  }
}

@keyframes theme-blur-in {
  0% {
    opacity: 0;
    filter: blur(24px) saturate(0.7);
    transform: scale(0.98);
  }

  30% {
    opacity: 0.2;
    filter: blur(18px) saturate(1.0);
    transform: scale(0.985);
  }

  55% {
    opacity: 0.5;
    filter: blur(10px) saturate(1.2);
    transform: scale(0.992);
  }

  80% {
    opacity: 0.85;
    filter: blur(3px) saturate(1.1);
    transform: scale(0.998);
  }

  100% {
    opacity: 1;
    filter: blur(0) saturate(1);
    transform: scale(1);
  }
}

.animate-theme-blur-in {
  animation: theme-blur-in 1.6s ease-in-out both;
}

/* Dreamy home page entrance */
@keyframes home-dream-in {
  0% {
    opacity: 0;
    filter: blur(28px) saturate(0.35) brightness(1.7);
    transform: translateY(14px) scale(0.988);
  }
  10% {
    opacity: 0.02;
    filter: blur(25px) saturate(0.4) brightness(1.6);
    transform: translateY(12.5px) scale(0.9895);
  }
  20% {
    opacity: 0.06;
    filter: blur(22px) saturate(0.45) brightness(1.5);
    transform: translateY(11px) scale(0.991);
  }
  32% {
    opacity: 0.16;
    filter: blur(17.5px) saturate(0.54) brightness(1.37);
    transform: translateY(8.8px) scale(0.9925);
  }
  44% {
    opacity: 0.3;
    filter: blur(13.5px) saturate(0.63) brightness(1.25);
    transform: translateY(6.4px) scale(0.9945);
  }
  56% {
    opacity: 0.46;
    filter: blur(9.5px) saturate(0.72) brightness(1.16);
    transform: translateY(4.3px) scale(0.9962);
  }
  68% {
    opacity: 0.62;
    filter: blur(5.8px) saturate(0.83) brightness(1.09);
    transform: translateY(2.7px) scale(0.9978);
  }
  80% {
    opacity: 0.78;
    filter: blur(3px) saturate(0.91) brightness(1.04);
    transform: translateY(1.3px) scale(0.999);
  }
  90% {
    opacity: 0.9;
    filter: blur(1.3px) saturate(0.97) brightness(1.015);
    transform: translateY(0.5px) scale(0.9997);
  }
  100% {
    opacity: 1;
    filter: blur(0) saturate(1) brightness(1);
    transform: translateY(0) scale(1);
  }
}

.home-dream-in {
  animation: home-dream-in 2s linear both;
}

main.animate-theme-blur-in{height:100svh}
/* As on hy-ms, the page dreams in over still paper. The body's paper fills the canvas (the
   root keeps no color of its own), and the water only fades, so the paper is never
   brightened, blurred or pulled away from the screen edges. The copy's children animate,
   not the copy itself, so a resize mid-entrance still measures its untransformed box. */
html{background:none}
html.dream-pending main{visibility:hidden}
html.dream-in .blog-copy>*,html.dream-in .water-dock{animation:home-dream-in 2s linear both}
html.dream-in .stage{animation:water-dream-in 2s linear both}
@keyframes water-dream-in{0%{opacity:0}10%{opacity:.02}20%{opacity:.06}32%{opacity:.16}44%{opacity:.3}56%{opacity:.46}68%{opacity:.62}80%{opacity:.78}90%{opacity:.9}100%{opacity:1}}
::view-transition-group(root){pointer-events:none}
@view-transition{navigation:auto}
@media(prefers-reduced-motion:reduce){
  .home-dream-in,.animate-theme-blur-in{animation:none!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
}