/* oceangram.pro: Material 3 Expressive, the same tokens as the admin panels. */
@font-face{font-family:Unbounded;src:url(/fonts/unbounded-cyrillic.woff2) format('woff2');font-weight:200 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Unbounded;src:url(/fonts/unbounded-latin.woff2) format('woff2');font-weight:200 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Onest;src:url(/fonts/onest-cyrillic.woff2) format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Onest;src:url(/fonts/onest-latin.woff2) format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --h:228;--c:.13;--th:290;color-scheme:light;
  --primary:oklch(.47 var(--c) var(--h));--on-primary:oklch(1 0 0);
  --primary-container:oklch(.9 calc(var(--c)*.55) var(--h));--on-primary-container:oklch(.27 calc(var(--c)*.8) var(--h));
  --secondary-container:oklch(.915 .035 var(--h));--on-secondary-container:oklch(.28 .04 var(--h));
  --tertiary-container:oklch(.9 .07 var(--th));--on-tertiary-container:oklch(.28 .07 var(--th));
  --surface:oklch(.985 .006 var(--h));--sc-low:oklch(.966 .009 var(--h));--sc:oklch(.951 .011 var(--h));--sc-high:oklch(.935 .013 var(--h));--sc-highest:oklch(.918 .015 var(--h));
  --on-surface:oklch(.21 .015 var(--h));--on-surface-variant:oklch(.43 .02 var(--h));--outline-variant:oklch(.86 .014 var(--h));
  --r-md:16px;--r-lg:20px;--r-xl:28px;--r-2xl:40px;--r-full:999px;
  --display:Unbounded,Onest,system-ui,sans-serif;--text:Onest,system-ui,-apple-system,'Segoe UI',sans-serif;
  --emph:cubic-bezier(.2,0,0,1);--emph-out:cubic-bezier(.05,.7,.1,1);
  --spring:cubic-bezier(.34,1.36,.5,1);--spring-soft:cubic-bezier(.3,1.18,.5,1);
  --safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);
  --circle:circle(50%);
}
:root[data-mode="dark"]{
  color-scheme:dark;
  --primary:oklch(.83 calc(var(--c)*.68) var(--h));--on-primary:oklch(.27 calc(var(--c)*.9) var(--h));
  --primary-container:oklch(.37 calc(var(--c)*.75) var(--h));--on-primary-container:oklch(.93 .05 var(--h));
  --secondary-container:oklch(.33 .035 var(--h));--on-secondary-container:oklch(.91 .03 var(--h));
  --tertiary-container:oklch(.38 .07 var(--th));--on-tertiary-container:oklch(.93 .05 var(--th));
  --surface:oklch(.17 .01 var(--h));--sc-low:oklch(.2 .011 var(--h));--sc:oklch(.222 .012 var(--h));--sc-high:oklch(.255 .013 var(--h));--sc-highest:oklch(.29 .014 var(--h));
  --on-surface:oklch(.93 .008 var(--h));--on-surface-variant:oklch(.8 .018 var(--h));--outline-variant:oklch(.36 .015 var(--h));
}
@supports (animation-timing-function:linear(0,1)){
  :root{
    --spring:linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017 19.4%,1.077,1.121 23.9%,1.149 27%,1.159 30.4%,1.152 33.7%,1.129 37.8%,1.051 47.6%,1.017 53%,.996 60.3%,.991 66.6%,1.001 86.5%,1);
    --spring-soft:linear(0,.012,.049 3.1%,.197 6.4%,.587 13.8%,.776 18.4%,.908 23.3%,.986 28.4%,1.031 34%,1.046 39.3%,1.044 45.4%,1.012 64.3%,.999 79.4%,1);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--surface);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100dvh;display:flex;flex-direction:column;background:var(--surface);color:var(--on-surface);font:400 16px/1.5 var(--text);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow-x:clip}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
svg{display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:3px solid var(--primary);outline-offset:3px}

/* top bar */
.bar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(12px + var(--safe-t)) 20px 12px;background:color-mix(in oklch,var(--surface) 88%,transparent);backdrop-filter:blur(14px)}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{width:38px;height:38px;flex:none;overflow:hidden;clip-path:var(--shape-cookie9,var(--circle));background:var(--primary-container);transition:clip-path .7s var(--spring),rotate 1.1s var(--spring)}
.brand-mark img{width:100%;height:100%;object-fit:cover;transition:rotate 1.1s var(--spring)}
.brand:hover .brand-mark{clip-path:var(--shape-clover,var(--circle));rotate:90deg}
.brand:hover .brand-mark img{rotate:-90deg}
.wordmark{font:800 19px/1 var(--display);letter-spacing:-.05em}
.bar-actions{display:flex;align-items:center;gap:6px}
.chip{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:var(--r-full);background:var(--sc-high);font:600 14px/1 var(--text);transition:background-color .2s,border-radius .35s var(--spring)}
.chip:hover{background:var(--sc-highest)}
.chip:active{border-radius:var(--r-md)}
.icon-btn{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:var(--r-full);background:transparent;color:var(--on-surface-variant);cursor:pointer;transition:background-color .2s,border-radius .35s var(--spring)}
.icon-btn:hover{background:var(--sc-high)}
.icon-btn:active{border-radius:var(--r-md)}
.icon-btn svg{width:22px;height:22px}

/* hero */
.page{flex:1;width:100%;max-width:1120px;margin:0 auto;padding:8px 20px 40px}
.hero{display:grid;gap:20px;align-items:center;padding:12px 0 28px}
.hero-copy{min-width:0;container-type:inline-size}
.display{margin:0;font:800 clamp(34px,12.6cqi,120px)/.92 var(--display);letter-spacing:-.055em}
.lead{margin:16px 0 0;max-width:34ch;color:var(--on-surface-variant);font-size:clamp(16px,4.2vw,19px);line-height:1.45}
.hero-art{position:relative;justify-self:center;width:min(62vw,300px);aspect-ratio:1;order:-1}
.hero-art .blob{position:absolute;inset:0;background:var(--primary);clip-path:var(--shape-cookie12,var(--circle));animation:morph 14s var(--emph) infinite,spin 40s linear infinite}
.hero-art .blob.two{inset:-14%;background:color-mix(in oklch,var(--primary) 16%,transparent);clip-path:var(--shape-sunny,var(--circle));animation:spin 60s linear infinite reverse}
.hero-art img{position:absolute;inset:12%;width:76%;height:76%;object-fit:cover;clip-path:var(--shape-cookie9,var(--circle))}
@keyframes morph{0%,100%{clip-path:var(--shape-cookie12)}33%{clip-path:var(--shape-clover)}66%{clip-path:var(--shape-cookie6)}}
@keyframes spin{to{rotate:360deg}}

/* destination tiles */
.tiles{display:grid;gap:10px}
.tile{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;gap:16px;min-height:104px;padding:18px 18px 18px 16px;border-radius:var(--r-xl);transition:border-radius .45s var(--spring),scale .45s var(--spring),transform .7s var(--emph-out)}
.tile:active{border-radius:var(--r-2xl);scale:.98}
.tile::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),color-mix(in oklch,currentColor 15%,transparent),transparent 62%);opacity:0;transition:opacity .45s}
.tile.t1{background:var(--primary);color:var(--on-primary)}
.tile.t2{background:var(--tertiary-container);color:var(--on-tertiary-container)}
.tile.t3{background:var(--secondary-container);color:var(--on-secondary-container)}
.tile-icon{position:relative;flex:none;width:56px;height:56px;display:grid;place-items:center}
.tile-icon::before{content:"";position:absolute;inset:0;background:currentColor;opacity:.15;clip-path:var(--shape-cookie9,var(--circle));transition:clip-path .6s var(--spring)}
.t2 .tile-icon::before{clip-path:var(--shape-clover,var(--circle))}
.t3 .tile-icon::before{clip-path:var(--shape-sunny,var(--circle))}
.tile-icon svg{position:relative;width:26px;height:26px}
.tile-text{flex:1;min-width:0;display:grid;gap:4px}
.tile-text strong{font:700 clamp(19px,5vw,24px)/1.1 var(--display);letter-spacing:-.035em}
.tile-text small{font-size:14.5px;line-height:1.35;opacity:.85}
.tile-go{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r-full);background:color-mix(in oklch,currentColor 12%,transparent);transition:translate .45s var(--spring),border-radius .35s var(--spring)}
.tile-go svg{width:22px;height:22px}
.tile-big{position:absolute;right:56px;bottom:-34px;z-index:-1;font:800 150px/1 var(--display);opacity:.1;pointer-events:none}

.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;width:100%;max-width:1120px;margin:0 auto;padding:18px 20px calc(18px + var(--safe-b));color:var(--on-surface-variant);font-size:14px}
.foot a:hover{color:var(--on-surface)}

/* one orchestrated entrance */
.word{display:inline-block;white-space:nowrap}
.ch{display:inline-block;animation:ch-in 1s var(--spring-soft) both;animation-delay:calc(var(--d) * 40ms);transition:font-weight .45s var(--emph)}
@keyframes ch-in{from{opacity:0;translate:0 .5em;font-weight:200}}
.lead{animation:rise .9s var(--emph-out) both .25s}
.hero-art{animation:pop 1s var(--spring) both .05s}
.tile{animation:rise .8s var(--emph-out) both;animation-delay:calc(.35s + var(--i,0) * 90ms)}
@keyframes rise{from{opacity:0;translate:0 26px}}
@keyframes pop{from{opacity:0;scale:.4;rotate:-40deg}}
.ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.18;pointer-events:none;transform:scale(0);animation:ripple .6s var(--emph-out) forwards;z-index:-1}
@keyframes ripple{to{transform:scale(1);opacity:0}}

/* theme switch: circular reveal */
::view-transition-old(root){animation:none}
::view-transition-new(root){animation:circle .8s var(--emph) both}
@keyframes circle{from{clip-path:circle(0 at var(--vx,50%) var(--vy,50%))}to{clip-path:circle(150vmax at var(--vx,50%) var(--vy,50%))}}

@media (min-width:760px){
  .bar{padding-left:32px;padding-right:32px}
  .page{padding:16px 32px 56px}
  .hero{grid-template-columns:1.2fr 1fr;gap:32px;padding:40px 0 48px}
  .hero-art{order:0;width:min(34vw,380px)}
  .tiles{grid-template-columns:1.25fr 1fr;grid-template-rows:1fr 1fr}
  .tile.t1{grid-row:span 2;flex-direction:column;align-items:flex-start;justify-content:space-between;min-height:320px;padding:26px}
  .tile.t1 .tile-go{position:absolute;top:22px;right:22px}
  .tile.t1 .tile-text strong{font-size:40px}
  .tile.t1 .tile-big{right:-10px;bottom:-40px;font-size:240px}
  .foot{padding-left:32px;padding-right:32px}
}
@media (hover:hover) and (pointer:fine){
  .tile{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
  .tile:hover::after{opacity:1}
  .tile:hover .tile-go{translate:4px -4px}
  .tile:hover .tile-icon::before{clip-path:var(--shape-cookie6,var(--circle))}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}