/* Midz's page (views/creators/midz.php): a dive. The page itself is the
   ocean — sunlit at the surface, then one gradient from teal down to black —
   so every section is deeper than the last, and the deeper it gets the more
   of his eyes open behind it. Namskow for his name and the headings, fat
   rounded letters with water gleaming through them; Shippori Mincho for the
   smaller lines, a sharp serif for the haori and the horn; Raleway for
   everything said.
   Text is dark ink only on the bright surface and pale everywhere below, so
   it never sinks into the water. Bubbles, eyes, the depth gauge and the
   light in the abyss are creators/midz.js. */
@font-face { font-family: 'Shippori Mincho'; src: url('/assets/fonts/shippori-mincho-800-latin.woff2') format('woff2'); font-weight: 800; font-display: swap; }
/* Namskow (Gluk Fonts, SIL OFL), with its colour layer (the SVG table)
   taken out: Safari and Firefox would otherwise draw that layer over our
   water and show solid black letters. Without it every browser draws the
   same plain letters, and the gleam is ours. */
@font-face { font-family: 'Namskow'; src: url('/assets/fonts/namskow-water.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Raleway'; src: url('/assets/fonts/Raleway-VariableFont_wght.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

body.cp-theme-midz {
  --foam: #F2FFFD; --aqua: #8FF3E8; --teal: #22C3B9; --sea: #0E8A96; --deep: #08405E; --night: #041A2B; --ink: #062433; --glow: #5FFBF1; --violet: #8C6CFF;
  background: #010A12; color: var(--foam);
}
html:has(> body.cp-theme-midz) { --scroll-acc: #22C3B9; background: #010A12; }
body.cp-theme-midz ::selection { background: #5FFBF1; color: #062433; }

/* The ocean: sunlight at the top, nothing at the bottom. */
.mz { position: relative; overflow-x: clip; font-family: 'Raleway', 'Nunito', system-ui, sans-serif; font-weight: 500;
  background: linear-gradient(180deg, #158E95 0%, #0C6676 12%, #08485F 26%, #052E47 42%, #031B2C 60%, #020F1A 78%, #010509 100%); }
.mz > :not(.mz-bubbles):not(.mz-depth):not(.mz-eyes):not(.mz-murk) { position: relative; z-index: 1; }
.mz-bubbles { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.mz-wrap { width: min(1220px, 100% - 40px); margin-inline: auto; }
.mz section[id] { scroll-margin-top: 96px; }

/* ------------------------------------------------------------------ type */
.mz-kick { margin: 0 0 8px; font-weight: 700; font-size: .82rem; letter-spacing: .26em; text-transform: uppercase; color: #9EF7EE; }
.mz-h { margin: 0 0 28px; text-wrap: balance; font-family: 'Namskow', 'Shippori Mincho', serif; font-weight: 400; font-size: clamp(2.4rem, 5.6vw, 4.4rem); line-height: 1.12; letter-spacing: .18em; word-spacing: -.14em; text-transform: uppercase; }
/* The gleam: light rolling over water (first layer), the water (second),
   clipped to the letters; the outline and glow are filters, which follow
   the letters' own shape. */
.mz-h, .mz-h3, .mz-skills b { color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .95) 48%, rgba(255, 255, 255, .15) 53%, transparent 60%), linear-gradient(180deg, #FFFFFF 0%, #E6FFFC 30%, #B4FBF5 58%, #6FE9E0 100%);
  background-size: 260% 100%, 100% 100%; background-repeat: no-repeat; background-position: 140% 0, 0 0;
  padding: .06em .2em .12em .04em; margin-left: -.04em; margin-right: -.2em;
  /* Namskow draws its own dark outline; this only lifts it off the water. */
  filter: drop-shadow(0 3px 0 #021824) drop-shadow(0 0 12px rgba(95, 251, 241, .35));
  animation: mzGleam 5.5s ease-in-out infinite; }
.mz-h em, .mz-h3 em { font-style: normal; color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .95) 48%, rgba(255, 255, 255, .15) 53%, transparent 60%), linear-gradient(180deg, #E9FFFD 0%, #7FF6EC 42%, #22C6BC 75%, #0E93A3 100%);
  background-size: 260% 100%, 100% 100%; background-repeat: no-repeat; background-position: 140% 0, 0 0; animation: mzGleam 5.5s .25s ease-in-out infinite; }
@keyframes mzGleam { 0%, 45% { background-position: 140% 0, 0 0; } 80%, 100% { background-position: -60% 0, 0 0; } }
.mz-h3 { margin: 0; font-family: 'Namskow', 'Shippori Mincho', serif; font-weight: 400; font-size: clamp(1.9rem, 3.4vw, 2.6rem); letter-spacing: .18em; word-spacing: -.14em; text-transform: uppercase; }
.mz-h3 small { margin-left: 8px; letter-spacing: .04em; word-spacing: normal; font-family: 'Raleway', sans-serif; font-size: .85rem; font-weight: 500; opacity: .7; }

/* ---------------------------------------------------------------- buttons */
.mz-do { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.mz-btn { display: inline-flex; align-items: center; gap: 9px; padding: 14px 26px; border: 0; border-radius: 999px; background: var(--ink); color: var(--foam); font-weight: 600; font-size: 1rem; text-decoration: none;
  box-shadow: 0 6px 0 #021018, 0 14px 28px -12px rgba(2, 16, 24, .7); transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), box-shadow .18s; }
.mz-btn svg { width: 18px; height: 18px; fill: currentColor; }
.mz-btn:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 9px 0 #021018, 0 18px 30px -12px rgba(2, 16, 24, .7); }
.mz-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #021018; }
.mz-btn--ghost { background: rgba(242, 255, 253, .55); color: var(--ink); box-shadow: 0 6px 0 rgba(6, 36, 51, .35); backdrop-filter: blur(6px); }
.mz-btn:focus-visible, .mz a:focus-visible, .mz button:focus-visible { outline: 3px solid var(--glow); outline-offset: 4px; }

/* ---------------------------------------------------------------- surface */
/* His wave scene, edge to edge, drifting very slowly; light ripples over it
   and the water darkens at the bottom where the words sit. */
.mz-hero { position: relative; display: flex; align-items: flex-end; min-height: min(100vh, 980px); padding: 104px 0 130px; overflow: hidden; color: #fff; background: #158E95; }
.mz-hero-art { position: absolute; inset: 0; }
.mz-hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 46% 38%; transform-origin: 46% 40%; animation: mzTide 26s ease-in-out infinite alternate; }
@keyframes mzTide { from { transform: scale(1.04); } to { transform: scale(1.12) translate(-1.2%, 1%); } }
.mz-hero-scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 38, 58, .35) 0%, transparent 18%, transparent 42%, rgba(6, 64, 84, .55) 64%, rgba(10, 92, 110, .92) 86%, #158E95 100%),
              linear-gradient(90deg, rgba(4, 38, 58, .55) 0%, rgba(4, 38, 58, .2) 45%, transparent 70%); }
.mz-caustics { position: absolute; inset: -20%; pointer-events: none; opacity: .35; mix-blend-mode: soft-light;
  background:
    radial-gradient(ellipse 18% 9% at 20% 30%, #fff 0 30%, transparent 70%), radial-gradient(ellipse 12% 7% at 60% 20%, #fff 0 30%, transparent 70%),
    radial-gradient(ellipse 16% 8% at 80% 55%, #fff 0 30%, transparent 70%), radial-gradient(ellipse 14% 7% at 35% 70%, #fff 0 30%, transparent 70%),
    radial-gradient(ellipse 10% 6% at 70% 85%, #fff 0 30%, transparent 70%);
  filter: blur(2px); animation: mzDrift 14s ease-in-out infinite alternate; }
@keyframes mzDrift { to { transform: translate(4%, 3%) scale(1.08) rotate(3deg); } }
.mz-hero-in { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; width: min(1220px, 100% - 40px); }
.mz-hero-words { flex: 1 1 auto; min-width: 0; text-shadow: 0 2px 14px rgba(2, 20, 32, .55); }
.mz-hello { margin: 0 0 4px; font-weight: 700; font-size: 1.2rem; letter-spacing: .02em; color: #D7FFFB; }

/* His name, half under the water. One size for all its layers: the real
   text (.mz-name-text) sets the box and stays invisible; .mz-name-above is
   the part above the waterline, bright glossy water with an outline and a
   light rolling across it; .mz-name-below is the part under it, darker and
   wavering (#mz-refract); the two are cut by the same moving wave, and a
   bright waterline (.mz-name-line) rides the cut. Namskow's letters reach
   past their boxes, so every layer carries the same padding. */
.mz-name { --pad: .05em .24em .1em .08em; position: relative; width: fit-content; max-width: 100%; margin: 0 0 6px -.08em; font-family: 'Namskow', 'Shippori Mincho', serif; font-weight: 400;
  font-size: clamp(7.4rem, 23vw, 22rem); line-height: .92; letter-spacing: .2em; text-transform: uppercase; text-shadow: none; animation: mzPop .9s cubic-bezier(.3, 1.6, .5, 1) both; }
.mz-name > span { display: block; padding: var(--pad); white-space: nowrap; }
.mz-name-text { color: transparent; }
.mz-name-above, .mz-name-below, .mz-name-line, .mz-name-bubbles { position: absolute; inset: 0; pointer-events: none; }
.mz-name-above, .mz-name-below { color: transparent; -webkit-background-clip: text; background-clip: text;
  -webkit-mask-size: 400px 100%; mask-size: 400px 100%; -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; animation: mzTideMask 7s linear infinite; }
.mz-name-above { z-index: 2;
  background-image: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .95) 48%, rgba(255, 255, 255, .15) 53%, transparent 60%), linear-gradient(180deg, #FFFFFF 0%, #E9FFFD 30%, #A9FBF4 52%, #63E9DF 64%);
  background-size: 260% 100%, 100% 100%; background-repeat: no-repeat; background-position: 140% 0, 0 0;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='100' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H400V57C350 50 300 50 250 57S150 64 100 57S50 50 0 57Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='100' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H400V57C350 50 300 50 250 57S150 64 100 57S50 50 0 57Z'/%3E%3C/svg%3E");
  filter: drop-shadow(0 .03em 0 #021824) drop-shadow(0 0 24px rgba(95, 251, 241, .55));
  animation: mzTideMask 7s linear infinite, mzShine 5s 1.2s ease-in-out infinite; }
.mz-name-below { z-index: 1;
  background-image: linear-gradient(180deg, #5FF2E8 0%, #26C4BC 50%, #12889C 72%, #0A5874 100%);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='100' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 57C50 50 100 50 150 57S250 64 300 57S350 50 400 57V100H0Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='100' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 57C50 50 100 50 150 57S250 64 300 57S350 50 400 57V100H0Z'/%3E%3C/svg%3E");
  filter: url(#mz-refract) drop-shadow(0 .02em 0 #03263A) drop-shadow(0 0 18px rgba(5, 50, 70, .7)); }
.mz-name-line { z-index: 3; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 86%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 86%, transparent 100%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='100' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 57C50 50 100 50 150 57S250 64 300 57S350 50 400 57' fill='none' stroke='%23E9FFFD' stroke-width='1.6' vector-effect='non-scaling-stroke' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 400px 100% repeat-x; animation: mzTideLine 7s linear infinite; filter: drop-shadow(0 0 4px rgba(233, 255, 253, .9)); opacity: .9; }
@keyframes mzTideMask { to { -webkit-mask-position: 400px 0; mask-position: 400px 0; } }
@keyframes mzTideLine { to { background-position: 400px 0; } }
@keyframes mzShine { 0%, 40% { background-position: 140% 0, 0 0; } 75%, 100% { background-position: -60% 0, 0 0; } }
.mz-name-bubbles { z-index: 2; overflow: hidden; }
.mz-name-bubbles i { position: absolute; left: var(--x); top: 92%; width: var(--s); height: var(--s); border-radius: 50%; border: 1.5px solid rgba(233, 255, 253, .8); background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .7), transparent 60%);
  animation: mzRise 6.2s var(--d) ease-in infinite; opacity: 0; }
@keyframes mzRise { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .9; } 55% { transform: translate(6px, -1.6em) ; opacity: .8; } 62% { opacity: 0; transform: translate(-4px, -1.9em); } 100% { opacity: 0; transform: translate(-4px, -1.9em); } }
@keyframes mzPop { from { opacity: 0; transform: translateY(30px) scale(.9); } }
.perf-lite .mz-name-below { filter: none; }

.mz-tagline { margin: 6px 0 0; font-family: 'Shippori Mincho', serif; font-weight: 800; font-size: clamp(1.2rem, 2.2vw, 1.7rem); color: #fff; }
.mz-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.mz-tags li { padding: 7px 15px; border-radius: 999px; background: rgba(3, 38, 58, .5); border: 1.5px solid rgba(182, 251, 243, .6); color: #E9FFFD; font-weight: 700; font-size: .9rem; text-shadow: none;
  backdrop-filter: blur(6px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); animation: mzBob 3.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s); }
@keyframes mzBob { 50% { transform: translateY(-5px); } }
.mz-hero .mz-btn--ghost { background: rgba(3, 38, 58, .45); color: #fff; box-shadow: 0 6px 0 rgba(2, 20, 32, .55); border: 1.5px solid rgba(182, 251, 243, .55); }
.mz-hero .mz-btn { background: #5FFBF1; color: #03263A; box-shadow: 0 6px 0 #0B6E7C, 0 14px 28px -12px rgba(2, 16, 24, .7); text-shadow: none; }
.mz-hero .mz-btn:active { box-shadow: 0 2px 0 #0B6E7C; }
.mz-hero .mz-btn--ghost:active { box-shadow: 0 2px 0 rgba(2, 20, 32, .55); }
.mz-socials { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; }
.mz-socials a { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(3, 38, 58, .5); border: 1.5px solid rgba(182, 251, 243, .6); color: #fff; backdrop-filter: blur(6px);
  transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), background-color .2s, color .2s; }
.mz-socials a:hover { transform: translateY(-4px) scale(1.12); background: #5FFBF1; color: #03263A; }
.mz-socials svg { width: 19px; height: 19px; fill: currentColor; }
.mz-discord { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: 999px; background: rgba(3, 38, 58, .7); color: #fff; font-weight: 700; font-size: .9rem; text-shadow: none; }
.mz-discord svg { width: 17px; height: 17px; fill: currentColor; }
.mz-chibi { flex: 0 0 auto; width: clamp(110px, 13vw, 190px); height: auto; margin-bottom: 10px; filter: drop-shadow(0 12px 18px rgba(2, 20, 32, .55)); cursor: pointer; animation: mzBob 3s ease-in-out infinite; transform-origin: 50% 100%; }

/* The waves at the bottom of the surface, rolling. */
.mz-waves { position: absolute; left: 0; bottom: -1px; width: 200%; height: 110px; }
.mz-wave { fill: rgba(14, 138, 150, .5); }
.mz-wave--back { animation: mzRoll 16s linear infinite; }
.mz-wave--front { fill: rgba(14, 138, 150, .85); animation: mzRoll 10s linear infinite reverse; }
@keyframes mzRoll { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------- shallows */
.mz-sec { padding: 90px 0 30px; }
.mz-shallows { color: var(--foam); padding-top: 40px; }
.mz-shallows-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 50px; align-items: center; }
.mz-about p:not(.mz-kick) { margin: 0 0 14px; font-size: 1.12rem; line-height: 1.75; color: #EAFBF9; max-width: 56ch; }
.mz-floaters { position: relative; height: 520px; }
.mz-floater { position: absolute; display: block; overflow: hidden; border-radius: 28px; border: 4px solid rgba(255, 255, 255, .75); background: rgba(242, 255, 253, .2); cursor: zoom-in;
  box-shadow: 0 24px 40px -20px rgba(2, 16, 24, .7); animation: mzFloat 6s ease-in-out infinite; animation-delay: calc(var(--i) * -2s); transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.mz-floater img { width: 100%; height: 100%; object-fit: cover; }
.mz-floater--profile { left: 0; top: 30px; width: 46%; aspect-ratio: 1; background: radial-gradient(circle at 50% 40%, #B6FBF3, #22C3B9); }
.mz-floater--profile img { object-fit: contain; }
.mz-floater--teal { right: 4%; top: 0; width: 40%; aspect-ratio: 713 / 841; --r: 4deg; }
.mz-floater--two { left: 18%; bottom: 0; width: 62%; aspect-ratio: 2024 / 1239; --r: -3deg; }
.mz-floater:hover { z-index: 3; animation-play-state: paused; transform: scale(1.06) rotate(0deg); }
@keyframes mzFloat { 0%, 100% { transform: translateY(0) rotate(var(--r, -2deg)); } 50% { transform: translateY(-14px) rotate(calc(var(--r, -2deg) * -1)); } }

/* ---------------------------------------------------------------- currents */
.mz-row-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; margin: 40px 0 16px; }
.mz-row-head > a { color: var(--glow); font-weight: 600; text-decoration: none; }
.mz-row-head > a:hover { text-decoration: underline; text-underline-offset: 4px; }
#currents .mz-h { margin-bottom: 0; }
.mz-row-head--main { align-items: flex-end; margin-top: 0; margin-bottom: 22px; }
.mz-media-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.mz-media-grid--tall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mz-media-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 22px; border: 3px solid rgba(143, 243, 232, .35); background: var(--deep); transition: transform .3s cubic-bezier(.3, 1.4, .5, 1), border-color .2s; }
.mz-media-grid--tall .mz-media-thumb { aspect-ratio: 9 / 16; }
.mz-media-thumb:hover { transform: translateY(-5px) rotate(-.6deg); border-color: var(--glow); }
.mz-media-thumb a { display: block; width: 100%; height: 100%; }
.mz-media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mz-media-play { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; background: rgba(242, 255, 253, .85); border: 2px solid #fff;
  box-shadow: inset -5px -6px 12px rgba(34, 195, 185, .4), inset 3px 3px 6px #fff, 0 8px 20px -6px rgba(0, 0, 0, .5); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.mz-media-play::after { content: ''; position: absolute; left: 24px; top: 18px; border-left: 17px solid var(--ink); border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.mz-media-thumb:hover .mz-media-play { transform: scale(1.15); }
.mz-media-chip, .mz-media-len { position: absolute; top: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(4, 26, 43, .8); color: var(--aqua); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.mz-media-chip { left: 10px; } .mz-media-len { right: 10px; }
.mz-media-title { margin: 10px 4px 0; font-family: 'Raleway', sans-serif; font-weight: 600; font-size: 1rem; line-height: 1.35; letter-spacing: 0; text-transform: none; color: var(--foam); }
.mz-empty, .mz-note { margin: 16px 0 0; color: rgba(242, 255, 253, .75); }

/* ---------------------------------------------------------------- arsenal */
.mz-arsenal { position: relative; display: block; overflow: hidden; border-radius: 28px; border: 3px solid rgba(140, 108, 255, .45); background: #8F96A0; cursor: zoom-in;
  box-shadow: 0 0 60px -10px rgba(140, 108, 255, .45), 0 30px 60px -30px #000; }
.mz-arsenal img { display: block; width: 100%; height: auto; }
.mz-arsenal-glow { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(95, 251, 241, .35) 45%, rgba(140, 108, 255, .3) 55%, transparent 70%) -100% 0 / 200% 100% no-repeat; mix-blend-mode: screen; animation: mzCharge 4.5s ease-in-out infinite; }
@keyframes mzCharge { 60%, 100% { background-position: 200% 0; } }
.mz-skills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 20px 0 0; padding: 0; list-style: none; }
.mz-skills li { padding: 16px 18px; border-radius: 20px; background: rgba(4, 26, 43, .55); border: 1px solid rgba(143, 243, 232, .2); }
.mz-skills b { display: block; width: fit-content; margin-bottom: 4px; font-family: 'Namskow', 'Shippori Mincho', serif; font-weight: 400; font-size: 1.7rem; letter-spacing: .16em; word-spacing: -.14em; text-transform: uppercase; }
.mz-skills span { color: rgba(242, 255, 253, .8); }

/* ------------------------------------------------------------------ abyss */
.mz-abyss { position: relative; padding: 110px 0 60px; overflow: hidden; }
.mz-abyss-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 40px; align-items: center; }
.mz-abyss-hint { color: rgba(242, 255, 253, .6); font-size: 1.05rem; }
/* His portrait in the dark: a veil you push aside with a light (--x/--y
   from midz.js). Without the script, or on touch, it fades up on its own. */
.mz-dark { position: relative; margin: 0; overflow: hidden; border-radius: 30px; background: #000; aspect-ratio: 1638 / 2048; box-shadow: 0 0 80px -20px rgba(95, 251, 241, .35); }
.mz-dark img { width: 100%; height: 100%; object-fit: cover; }
.mz-dark-veil { position: absolute; inset: 0; background: radial-gradient(circle 150px at var(--x, 50%) var(--y, 34%), transparent 0, rgba(1, 10, 18, .55) 55%, rgba(1, 6, 10, .96) 100%); transition: opacity 1.2s; }
.mz-dark.is-lit .mz-dark-veil { opacity: .25; }
.mz-dark figcaption { position: absolute; right: 14px; bottom: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, .6); color: rgba(242, 255, 253, .75); font-size: .75rem; }


/* ------------------------------------------------------------- join, end */
.mz-join { padding: 60px 0 30px; }
.mz-join-card { position: relative; overflow: hidden; padding: clamp(28px, 5vw, 56px); border-radius: 36px; border: 2px solid rgba(143, 243, 232, .25);
  background: radial-gradient(80% 120% at 0% 0%, rgba(34, 195, 185, .3), transparent 60%), rgba(4, 26, 43, .75); backdrop-filter: blur(8px); }
.mz-join-card > * { position: relative; max-width: 780px; }
.mz-join-card .mz-h { max-width: none; font-size: clamp(2rem, 4.4vw, 3.4rem); }
.mz-join-card p:not(.mz-kick) { color: rgba(242, 255, 253, .85); line-height: 1.7; }
.mz-join-card .mz-btn { background: var(--glow); color: var(--ink); box-shadow: 0 6px 0 #0E8A96; }
.mz-join-card .mz-btn--ghost { background: rgba(242, 255, 253, .12); color: var(--foam); box-shadow: 0 6px 0 rgba(0, 0, 0, .4); }
.mz-end { padding: 40px 0 90px; color: rgba(242, 255, 253, .7); }
.mz-end a { color: var(--glow); }

/* The murk: slow dark clouds drifting in the deep, thicker the deeper you
   are (--deep from midz.js), and the eyes surface through them. */
.mz-murk { position: fixed; inset: -10%; z-index: 0; pointer-events: none; opacity: calc(var(--deep, 0) * .9);
  background: radial-gradient(40% 30% at 20% 30%, rgba(1, 8, 14, .7), transparent 70%), radial-gradient(35% 28% at 80% 65%, rgba(1, 8, 14, .65), transparent 70%), radial-gradient(30% 25% at 50% 90%, rgba(3, 30, 40, .6), transparent 70%);
  animation: mzMurk 30s ease-in-out infinite alternate; }
@keyframes mzMurk { to { transform: translate(-4%, -3%) scale(1.1); } }

/* His eyes: one large pair at a time. midz.js places it, sets its size and
   adds .is-on to bring it up through the murk, .is-blink to blink, and
   takes .is-on away to let it sink; the pupils follow the pointer. */
.mz-eyes { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.mz-eyes-pair { position: absolute; left: 0; top: 0; width: 300px; height: auto; overflow: visible; opacity: 0; transform: scale(.82) translateY(30px); filter: blur(10px);
  transition: opacity 2.2s ease, transform 3s cubic-bezier(.2, .8, .2, 1), filter 2.4s ease; }
.mz-eyes-pair.is-on { opacity: var(--o, .9); transform: none; filter: blur(var(--b, .6px)); }
.mz-eye-socket { fill: #010A10; }
.mz-eye-rim { fill: none; stroke: rgba(95, 251, 241, .5); stroke-width: 1.4; }
.mz-eye-look { transform: translate(var(--px, 0px), var(--py, 0px)); transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.mz-eye-pupil { fill: #01070B; }
.mz-eye-shine { fill: rgba(255, 255, 255, .85); }
.mz-eye { transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 8px rgba(95, 251, 241, .6)); }
.mz-eyes-pair.is-blink .mz-eye { animation: mzBlink .32s ease-in-out; }
@keyframes mzBlink { 50% { transform: scaleY(.05); } }

/* The depth gauge, down the right edge. */
.mz-depth { position: fixed; z-index: 40; right: 18px; top: 50%; display: grid; justify-items: center; gap: 8px; transform: translateY(-50%); pointer-events: none; font-family: 'Shippori Mincho', serif; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.mz-depth-track { position: relative; width: 6px; height: 160px; border-radius: 6px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.mz-depth-track i { position: absolute; left: 0; right: 0; top: 0; height: var(--p, 0%); border-radius: 6px; background: linear-gradient(180deg, #B6FBF3, #22C3B9, #8C6CFF); }
.mz-depth-read { font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 1.05rem; }
.mz-depth-zone { font-family: 'Raleway', sans-serif; font-weight: 600; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; opacity: .85; writing-mode: vertical-rl; }
/* Water rings where you click. */
.mz-ring { position: fixed; z-index: 70; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid rgba(182, 251, 243, .9); pointer-events: none; animation: mzRing .7s ease-out forwards; }
@keyframes mzRing { to { transform: scale(7); opacity: 0; border-width: 1px; } }

/* ------------------------------------------------------------- header bar */
body.cp-theme-midz .cpnav { font-family: 'Raleway', 'Nunito', sans-serif; }
body.cp-theme-midz .cpnav-in { background: rgba(4, 26, 43, .55); border-color: rgba(143, 243, 232, .3); box-shadow: 0 14px 34px -20px rgba(34, 195, 185, .7), inset 0 1px 0 rgba(242, 255, 253, .12); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { body.cp-theme-midz .cpnav-in { background: rgba(4, 26, 43, .95); } }
.perf-lite body.cp-theme-midz .cpnav-in { background: rgba(4, 26, 43, .95); }
body.cp-theme-midz .cpnav-who { color: var(--foam); font-family: 'Shippori Mincho', serif; font-weight: 800; font-size: 19px; border-left-color: rgba(143, 243, 232, .3); }
body.cp-theme-midz .cpnav-av { border-color: var(--glow); box-shadow: 0 0 12px -2px rgba(95, 251, 241, .7); background: #63E4DA; }
body.cp-theme-midz .cpnav-av img { object-position: 62% 30%; transform-origin: 62% 30%; transform: scale(2); }
body.cp-theme-midz .cpnav-links a { color: #BFEFEA; font-weight: 600; }
body.cp-theme-midz .cpnav-links a:hover { color: #fff; background: rgba(143, 243, 232, .14); }
body.cp-theme-midz .cpnav-links a[aria-current="true"] { background: var(--glow); color: var(--ink); box-shadow: 0 6px 16px -8px var(--glow); }
body.cp-theme-midz .cpnav-cart { background: var(--glow); color: var(--ink); box-shadow: 0 8px 18px -10px var(--glow); font-weight: 700; }
body.cp-theme-midz .cpnav-cart:hover { background: #fff; }
body.cp-theme-midz .cpnav-account { background: rgba(143, 243, 232, .14); color: var(--glow); }
body.cp-theme-midz .cpnav-account:hover { background: var(--glow); color: var(--ink); }
body.cp-theme-midz .cpnav-burger { background: rgba(143, 243, 232, .14); }
body.cp-theme-midz .cpnav-burger span { background: var(--glow); }

/* ---------------------------------------------------------------- smaller */
@media (max-width: 960px) {
  .mz-media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mz-media-grid--tall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mz-shallows-in { grid-template-columns: 1fr; }
  .mz-floaters { height: 460px; max-width: 560px; }
}
@media (max-width: 860px) {
  .mz-hero { min-height: 92vh; padding: 110px 0 130px; }
  .mz-hero-art img { object-position: 30% 6%; }
  .mz-chibi { position: absolute; right: 0; top: -40px; width: 96px; }
  .mz-abyss-in { grid-template-columns: 1fr; }
  .mz-dark { max-width: 440px; }
  .mz-depth { right: 8px; }
  .mz-depth-track { height: 110px; }
}
@media (max-width: 560px) {
  .mz-wrap { width: calc(100% - 32px); }
  /* On a phone the words would sit on his face, so the art takes the top
     of the screen to itself and the name overlaps its bottom edge. */
  .mz-hero { display: block; min-height: 0; padding: 104px 0 120px; }
  .mz-hero-art { position: relative; height: 56vh; }
  .mz-hero-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 38, 58, .35) 0%, transparent 22%, transparent 62%, #158E95 100%); }
  .mz-hero-art img { object-position: 30% 0%; }
  .mz-hero-scrim { display: none; }
  .mz-hero-in { width: calc(100% - 32px); margin: -96px auto 0; }
  .mz-hero .mz-chibi { top: -110px; }
  .mz-name { font-size: 40vw; letter-spacing: .16em; margin-bottom: 0; }
  .mz-tagline { margin-top: 0; }
  .mz-floaters { height: 380px; }
  /* Each video row becomes a strip you swipe along. */
  .mz-media-grid, .mz-media-grid--tall { display: flex; gap: 14px; margin-inline: -16px; padding: 4px 16px 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; }
  .mz-media-grid::-webkit-scrollbar { display: none; }
  .mz-media { flex: 0 0 78%; scroll-snap-align: start; }
  .mz-media-grid--tall .mz-media { flex-basis: 56%; }
  .mz-skills { grid-template-columns: 1fr; }
  .mz-depth { display: none; }

}
@media (prefers-reduced-motion: reduce) {
  .mz *, .mz *::before, .mz *::after { animation: none !important; transition-duration: .01ms !important; }
  .mz-dark-veil { opacity: .2; }
}

/* ---------------- His words (the quote band) ------------------------------
   Each word rises out of the water in turn (.is-in from midz.js), then they
   all sway a little, out of step, like something seen through water. The
   glowing words carry the page's gleam. */
.mz-quote { position: relative; padding: 80px 0 40px; text-align: center; }
.mz-quote-in { position: relative; margin: 0 auto; max-width: 980px; }
.mz-quote-mark { position: absolute; left: 50%; top: -.38em; transform: translateX(-50%); font-family: 'Namskow', 'Shippori Mincho', serif; font-size: clamp(7rem, 16vw, 12rem); line-height: 1; padding-block: .18em;
  color: transparent; background: linear-gradient(180deg, #fff 0%, #B4FBF5 50%, #22C6BC 100%); -webkit-background-clip: text; background-clip: text; opacity: .32; filter: drop-shadow(0 0 30px rgba(95, 251, 241, .45)); pointer-events: none; }
.mz-quote blockquote { position: relative; margin: 0; }
.mz-quote blockquote p { margin: 0; font-family: 'Shippori Mincho', serif; font-weight: 800; font-size: clamp(2.2rem, 5.6vw, 4.6rem); line-height: 1.15; letter-spacing: .01em; text-transform: uppercase; color: #fff; text-wrap: balance; text-shadow: 0 4px 24px rgba(1, 10, 18, .55); }
.mz-word { display: inline-block; padding-block: .14em; animation: mzSway 6s ease-in-out infinite; animation-delay: calc(var(--w) * -.7s); }
.mz-word.is-glow { color: transparent; background: linear-gradient(180deg, #F2FFFD 0%, #8FF3E8 45%, #22C6BC 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 18px rgba(95, 251, 241, .6)); }
@keyframes mzSway { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(-1deg); } }
/* Rising out of the water, a word at a time. */
.mz-js .mz-quote .mz-word { opacity: 0; translate: 0 .9em; filter: blur(6px); transition: opacity .7s calc(var(--w) * .12s), translate .9s calc(var(--w) * .12s) cubic-bezier(.2, .8, .2, 1), filter .9s calc(var(--w) * .12s); }
.mz-js .mz-quote.is-in .mz-word { opacity: 1; translate: 0 0; filter: none; }
.mz-js .mz-quote.is-in .mz-word.is-glow { filter: drop-shadow(0 0 18px rgba(95, 251, 241, .6)); }
.mz-quote figcaption { display: grid; justify-items: center; gap: 10px; margin-top: 28px; }
.mz-bio-line { font-family: 'Raleway', sans-serif; font-weight: 700; font-size: clamp(1.1rem, 2vw, 1.4rem); color: #EAFBF9; }
.mz-aka { font-family: 'Shippori Mincho', serif; font-weight: 800; font-size: 1.15rem; letter-spacing: .06em; color: #A8FFF7; }
.mz-tags-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 4px; }
.mz-hash { padding: 8px 16px; border-radius: 999px; border: 1.5px solid rgba(182, 251, 243, .55); background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .22), rgba(3, 38, 58, .55) 70%); color: #fff; font-weight: 800; font-size: .92rem; letter-spacing: .03em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 8px 20px -10px rgba(95, 251, 241, .6); animation: mzBob 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * -1.1s); }
@media (max-width: 560px) {
  .mz-quote { padding: 60px 0 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .mz-js .mz-quote .mz-word { opacity: 1; translate: none; filter: none; }
}

/* Phones and tablets ------------------------------------------------------
   Measured on a throttled phone, this page dropped 91 frames in one scroll.
   The costs were effects a phone repaints every frame: the name's ripple (an
   animated SVG turbulence filter), the caustics (blended, blurred and
   moving over the whole hero), frosted tags that also bob, and quote words
   swaying under glow filters. Touch screens keep the look, standing still:
   the name keeps its tide line and gleam, the light stays on the water. */
@media (hover: none) and (pointer: coarse) {
  .mz-name-below { filter: drop-shadow(0 .02em 0 #03263A); }
  .mz-caustics { animation: none; filter: none; }
  .mz-tags li, .mz-btn--ghost, .mz-socials a, .mz-join-card { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .mz-tags li { background: rgba(3, 38, 58, .78); }
  .mz-word { animation: none; }
  .mz-eyes-pair, .mz-eyes-pair.is-on { filter: none; }
}