:root {



  --c-paper:     #FFFFFF;
  --c-ink:       #101010;
  --c-ink-rev:   #FFFFFF;


  --c-surface:   #EAF4F5;


  --c-accent:    #186D77;
  --c-accent-in: #FFFFFF;


  --c-turq:      hsl(186 52% 62%);


  --c-rule:      #101010;
  --rule:        1px solid var(--c-rule);
  --rule-faint:  1px solid rgba(16, 16, 16, 0.16);





  --f-ja:  "Zen Kaku Gothic New", system-ui, sans-serif;
  --f-en:  "Poppins", var(--f-ja);

  --w-normal: 400;
  --w-mid:    500;



  --t-h2:    1.375rem;
  --t-h3:    1.125rem;
  --t-lead:  1rem;
  --t-body:  0.9375rem;
  --t-small: 0.875rem;
  --t-label: 0.6875rem;
  --t-fine:  0.625rem;





  --lh-body:  2.1;
  --lh-head:  1.9;
  --lh-tight: 1.5;

  --ls-ja:    0.02em;
  --ls-head:  0.06em;
  --ls-wide:  0.12em;
  --ls-en:    0.14em;



  --s-1:   0.25rem;
  --s-2:   0.5rem;
  --s-3:   0.75rem;
  --s-4:   1rem;
  --s-5:   1.5rem;
  --s-6:   2rem;
  --s-7:   3rem;
  --s-8:   4rem;
  --s-9:   6rem;
  --s-10:  8rem;


  --s-section: 11rem;


  --pad-side: 4.375rem;











  --panel:
           radial-gradient(84% 46% at 28% 6%, hsl(172 78% 86%) 0%, hsl(172 78% 86% / 0) 74%),
           radial-gradient(66% 40% at 88% 10%, hsl(178 72% 82%) 0%, hsl(178 72% 82% / 0) 74%),

           radial-gradient(70% 46% at 12% 96%, hsl(190 84% 54%) 0%, hsl(190 84% 54% / 0) 78%),
           radial-gradient(58% 40% at 92% 92%, hsl(184 78% 57%) 0%, hsl(184 78% 57% / 0) 78%),





           linear-gradient(to bottom, hsl(174 75% 84%)  0%,
                                      hsl(178 69% 78%) 20%,
                                      hsl(184 75% 68%) 40%,
                                      hsl(188 78% 59%) 58%,
                                      hsl(190 81% 56%) 100%);






  --shade:
           radial-gradient(78% 58% at 34% 70%,
                             hsl(191 62% 16% / 0.72) 0%,
                             hsl(191 62% 16% / 0.46) 46%,
                             hsl(191 62% 16% / 0)   90%),

           radial-gradient(26% 22% at 94% 90%,
                             hsl(191 62% 16% / 0.34) 0%,
                             hsl(191 62% 16% / 0)   100%),

           linear-gradient(to top, hsl(191 62% 16% / 0.58) 0%, hsl(191 62% 16% / 0) 38%);



  --glow-a: linear-gradient(96deg,
              hsl(174 80% 97% / 0)    9%, hsl(174 80% 97% / 0.9)  13%, hsl(174 80% 97% / 0) 18%,
              hsl(178 76% 95% / 0)   32%, hsl(178 76% 95% / 0.68) 36%, hsl(178 76% 95% / 0) 41%,
              hsl(170 82% 97% / 0)   56%, hsl(170 82% 97% / 0.86) 63%, hsl(170 82% 97% / 0) 71%);
  --glow-b: linear-gradient(93deg,
              hsl(180 78% 96% / 0)   20%, hsl(180 78% 96% / 0.74) 24%, hsl(180 78% 96% / 0) 29%,
              hsl(174 82% 97% / 0)   47%, hsl(174 82% 97% / 0.94) 53%, hsl(174 82% 97% / 0) 60%,
              hsl(184 76% 95% / 0)   80%, hsl(184 76% 95% / 0.62) 84%, hsl(184 76% 95% / 0) 89%);



  --glow-mask: linear-gradient(to bottom, rgb(0 0 0 / 1) 0%,
                                          rgb(0 0 0 / 0.9) 22%,
                                          rgb(0 0 0 / 0) 48%);


  --d-drift-a: 14s;
  --d-drift-b: 19s;



  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.40' intercept='0.60'/%3E%3CfeFuncG type='linear' slope='0.40' intercept='0.60'/%3E%3CfeFuncB type='linear' slope='0.40' intercept='0.60'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");

  --grain-opacity: 1;
  --grain-faint:   1;







  --panel-b: radial-gradient(58% 62% at 18% 20%, hsl(179.1 48.4% 81.3%) 0%, hsl(179.1 48.4% 81.3% / 0) 100%),
             radial-gradient(50% 56% at 74% 12%, hsl(185.1 46.4% 79.3%) 0%, hsl(185.1 46.4% 79.3% / 0) 100%),
             radial-gradient(52% 46% at 88% 92%, hsl(189.1 58.4% 43.3%) 0%, hsl(189.1 58.4% 43.3% / 0) 100%),
             radial-gradient(46% 40% at 8% 96%, hsl(191.1 54.4% 45.3%) 0%, hsl(191.1 54.4% 45.3% / 0) 100%),

             linear-gradient(to bottom, hsl(179.1 48.4% 75.3%)   0%,
                                        hsl(183.1 48.4% 67.3%)  22%,
                                        hsl(187.1 52.4% 59.3%)  45%,
                                        hsl(189.1 54.4% 55.3%)  70%,
                                        hsl(191.1 56.4% 51.3%) 100%);





  --r-pill:  999px;
  --r-deco:  5rem;



  --e-out:   cubic-bezier(0.39, -0.01, 0.21, 1);
  --d-slow:  1s;
  --d-mid:   0.72s;
  --d-fast:  0.36s;



  --e-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --e-back:  cubic-bezier(0.34, 1.56, 0.64, 1);


  --e-read:  cubic-bezier(0.45, 0, 0.4, 1);


  --d-fade:  0.2s;
  --d-move:  0.5s;
  --d-zoom:  0.6s;


  --d-stagger: 0.03s;


  --d-tour: 4.5s;


  --d-track: 0.42s;


  --d-ripple: 1.8s;
}

@media (max-width: 768px) {
  :root {
    --t-h2:    1.25rem;
    --t-h3:    1.125rem;
    --t-body:  1rem;
    --t-small: 0.875rem;

    --s-section: 6.5rem;
    --pad-side:  1.875rem;






    --shade: linear-gradient(to bottom,
                             hsl(191 62% 16% / 0)    18%,
                             hsl(191 62% 16% / 0.56) 38%,
                             hsl(191 62% 16% / 0.60) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}