@font-face { font-family:HeroUltra;src:url(fonts/knewave.woff2) format('woff2');font-weight:400;font-display:swap; }
@font-face { font-family:HeroImpact;src:url(fonts/hero-impact.woff2) format("woff2");font-weight:400;font-display:swap; }
html.hero-mask-experiment .hero { min-height:860px;padding:80px 0 0;overflow:hidden; }
html.hero-mask-experiment .hero-grid { display:block;position:static;min-height:0; }
html.hero-mask-experiment .hero-grid>div:first-child { position:static;padding-top:20px; }
html.hero-mask-experiment .hero-role { margin-bottom:20px; }
html.hero-mask-experiment #heroName {
 position:absolute;left:clamp(52px,9vw,144px);bottom:27px;z-index:4;
 font-family:HeroImpact,sans-serif;font-size:clamp(109.25px,19.4465vw,294.975px);font-weight:400;
 letter-spacing:-.035em;line-height:1.2;white-space:nowrap;width:max-content;max-width:none;margin:0;filter:none;
}
html.hero-mask-experiment.mask-ready #heroName,
html.hero-mask-experiment.mask-ready #heroName .jelly-char {
 background:none!important;-webkit-text-fill-color:transparent!important;color:transparent!important;text-shadow:none!important;
}
.hero-mask-canvas { position:absolute;pointer-events:none;z-index:3;filter:drop-shadow(0 1px 1px #03172ee6) drop-shadow(0 5px 8px #03172ed9); }
html.hero-mask-experiment .hero-name-en { font-size:14px;letter-spacing:.38em;margin:0 0 28px; }
html.hero-mask-experiment .hero-desc { max-width:450px;text-shadow:0 2px 15px #061b38; }
html.hero-mask-experiment .hero-grid>.avatar-wrap { display:none; }
.hero-cutout { position:absolute;width:min(93.5vw,1287px);height:auto;bottom:-44px;pointer-events:none;z-index:2; }
.hero-divider { position:absolute;left:0;bottom:0;width:100%;height:100px;z-index:4;pointer-events:none;overflow:visible; }
@media(min-width:821px) {
 html.hero-mask-experiment .hero-cutout { left:78%;right:auto;top:-6px;bottom:auto;transform:translateX(-75.6%); }
}
@media(max-width:820px) {
 html.hero-mask-experiment .hero { min-height:960px;padding:55px 0 0; }
 html.hero-mask-experiment #heroName { left:36px;bottom:40px;font-size:16.34vw; }
 html.hero-mask-experiment .hero-desc { max-width:100%; }
 html.hero-mask-experiment .hero-cutout { width:165vw;max-width:none;right:-13vw;bottom:34px; }
}

html.hero-mask-experiment main>.wave-sep { position:relative;height:40px; }
.section-waterline { position:absolute;top:0;left:0;width:100%;height:40px;overflow:hidden;pointer-events:none; }

html.hero-mask-experiment .hero-name-en { position:absolute;top:31%;left:2%;z-index:0;font-size:clamp(76px,8vw,154px);letter-spacing:.08em;line-height:1;white-space:nowrap;opacity:.24;transform:rotate(-5deg);pointer-events:none;filter:none; }
html.hero-mask-experiment .hero-name-en span { background:none!important;-webkit-text-fill-color:transparent!important;-webkit-text-stroke:1px #7397bc; }
html.hero-mask-experiment .hero .hero-desc { max-width:540px;gap:0;margin-top:34px;position:relative;z-index:3; }
html.hero-mask-experiment .hero .hero-desc p { font-family:var(--font-body);font-size:clamp(24px,2.2vw,42px);font-weight:900;line-height:1.6;letter-spacing:.03em;color:#dceaf7; }
#profile .profile-bio { white-space:pre-line; }
#profile .hero-btns { display:flex;flex-wrap:wrap;gap:12px;margin-top:26px; }
#profile .profile-actions { margin-top:14px; }
@media(max-width:820px) { html.hero-mask-experiment .hero-name-en { top:40%;left:-8%;font-size:18vw; } }

@font-face { font-family:HeroMincho;src:url(fonts/hero-mincho.woff2) format("woff2");font-weight:600;font-display:swap; }
@font-face { font-family:HeroLatin;src:url(fonts/hero-latin.woff2) format("woff2");font-weight:400;font-display:swap; }
html.hero-mask-experiment body { --font-body:"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;--font-ui:"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;--font-hand:"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif; }
html.hero-mask-experiment .hero { background:radial-gradient(ellipse at 76% 28%,#7ac1e219,transparent 52%),linear-gradient(180deg,transparent 10%,#020f263d 100%); }
html.hero-mask-experiment .hero .hero-desc p { font-family:HeroMincho,serif;font-weight:600;letter-spacing:.02em; }
html.hero-mask-experiment .hero-name-en { font-family:HeroLatin,serif;font-weight:400;letter-spacing:.07em; }
html.hero-mask-experiment .sec-title { font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;font-weight:700;letter-spacing:.045em; }
html.hero-mask-experiment .sec-tag { font-family:var(--font-ui);font-size:11px;letter-spacing:.23em; }
html.hero-mask-experiment[data-hero-font="gothic"] #heroName { font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;font-weight:900;letter-spacing:-.045em; }
html.hero-mask-experiment[data-hero-font="mincho"] #heroName { font-family:HeroMincho,serif;font-weight:600;letter-spacing:-.035em; }

/* Optional comparison: name above, portrait in front of its last letter. */
@media(min-width:821px) {
 html.hero-mask-experiment[data-hero-layout="upper"] #heroName { top:132px;bottom:auto;left:clamp(44px,5vw,96px); }
 html.hero-mask-experiment[data-hero-layout="upper"] .hero-mask-canvas { z-index:1; }
 html.hero-mask-experiment[data-hero-layout="upper"] .hero-grid>div:first-child { padding-top:430px; }
 html.hero-mask-experiment[data-hero-layout="upper"] .hero-role { position:relative;z-index:3; }
}
@media(max-width:820px) {
 html.hero-mask-experiment[data-hero-layout="upper"] #heroName { top:60px;bottom:auto;left:24px; }
 html.hero-mask-experiment[data-hero-layout="upper"] .hero-mask-canvas { z-index:1; }
 html.hero-mask-experiment[data-hero-layout="upper"] .hero-grid>div:first-child { padding-top:170px; }
}

/* Reversible, lively comparison: video belongs to the two background lines. */
html.hero-mask-experiment[data-hero-layout="roman-video"] .hero { overflow:visible;background:none; }
html.hero-mask-experiment[data-hero-layout="roman-video"] .hero::before { content:"";position:absolute;inset:-160px 0 0;pointer-events:none;z-index:0;background:radial-gradient(ellipse at 76% 28%,#7ac1e219,transparent 52%),linear-gradient(180deg,transparent 10%,#020f263d 100%); }
html.hero-mask-experiment[data-hero-layout="roman-video"] .hero-rays { top:-160px; }
html.hero-mask-experiment[data-hero-layout="roman-video"] .hero-name-en:not(.hero-roman-video) { display:none; }
html.hero-mask-experiment[data-hero-layout="roman-video"] .hero-name-en { top:170px;left:-7%;width:125%;font-family:HeroUltra,"Arial Black",sans-serif;font-size:clamp(145px,18vw,350px);font-weight:400;letter-spacing:-.035em;line-height:.78;opacity:1;transform:none; }
html.hero-mask-experiment[data-hero-layout="roman-video"] .hero-name-en span { display:block;width:max-content;max-width:100%;-webkit-text-stroke:0; }
html.hero-mask-experiment[data-hero-layout="roman-video"] .hero-name-en span+span { margin-left:16%; }
html.hero-mask-experiment[data-hero-layout="roman-video"] .hero-mask-canvas { z-index:1;opacity:.3;transform:none;filter:none; }
html.hero-mask-experiment[data-hero-layout="roman-video"].mask-ready #heroName,
html.hero-mask-experiment[data-hero-layout="roman-video"].mask-ready #heroName .jelly-char { color:#f2fbff!important;-webkit-text-fill-color:#f2fbff!important;text-shadow:0 3px 0 #145c83,0 7px 20px #03172e80!important; }
html.hero-mask-experiment[data-hero-layout="roman-video"] .hero-title { position:absolute;left:6%;--hero-title-bottom:90px;bottom:max(var(--hero-title-bottom),calc(100% - 100svh + var(--site-header-height,84px) + var(--header-wave-height,64px) + 24px));z-index:4;display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:max-content;max-width:88%;rotate:none;transform-origin:0 100%; }
html.hero-mask-experiment[data-hero-layout="roman-video"] #heroName { position:relative;font-size:clamp(95px,12vw,210px);bottom:auto;left:auto;transform:none; }
html.hero-mask-experiment[data-hero-layout="roman-video"] .hero-desc:empty { display:none; }
html.hero-mask-experiment[data-hero-layout="roman-video"] .hero .hero-desc { margin-top:0;max-width:650px; }
html.hero-mask-experiment[data-hero-layout="roman-video"] .hero .hero-desc p { font-family:"Yu Gothic",sans-serif;font-weight:900;font-size:clamp(24px,2.2vw,42px);line-height:1.45;transform:none;text-shadow:0 2px 12px #061b38; }
html.hero-mask-experiment[data-hero-layout="roman-video"] .hero-role { position:static;align-self:flex-start;width:max-content;max-width:100%;font-size:clamp(32px,3.333333vw,64px);font-weight:900;line-height:1.1;letter-spacing:.04em;margin:0; }
@media(max-width:820px) {
 html.hero-mask-experiment[data-hero-layout="roman-video"] .hero { min-height:0;height:clamp(560px,calc(100svh - var(--site-header-height,84px) - var(--header-wave-height,64px)),760px);padding:0; }
 html.hero-mask-experiment[data-hero-layout="roman-video"] .hero-cutout { top:clamp(8px,calc(68px - 7.2vw),40px);bottom:auto;left:66%;right:auto;transform:translateX(-69.318182%);width:min(165vw,900px,calc((100svh - var(--site-header-height,84px) - var(--header-wave-height,64px))*1.1)); }
 html.hero-mask-experiment[data-hero-layout="roman-video"] .hero-name-en { top:280px;left:2%;font-size:19vw;width:96%; }
 html.hero-mask-experiment[data-hero-layout="roman-video"] .hero-name-en span+span { margin-left:9%; }
 html.hero-mask-experiment[data-hero-layout="roman-video"] .hero-title { left:5%;--hero-title-bottom:105px;max-width:90%;gap:8px; }
 html.hero-mask-experiment[data-hero-layout="roman-video"] .hero-role { font-size:min(clamp(32px,6.5vw,54px),max(26px,calc((100svh - var(--site-header-height,84px) - var(--header-wave-height,64px))*.085))); }
 html.hero-mask-experiment[data-hero-layout="roman-video"] #heroName { font-size:min(17.6vw,max(48px,calc((100svh - var(--site-header-height,84px) - var(--header-wave-height,64px))*.195))); }
}


html.hero-mask-experiment[data-hero-layout='roman-video'] #heroName { letter-spacing:-.02em; }
@media(min-width:821px) { html.hero-mask-experiment[data-hero-layout='roman-video'] .hero-cutout { left:79%; } }

html.hero-mask-experiment[data-hero-layout='roman-video'] .hero-cutout { filter:drop-shadow(0 0 30px #a5e4ff25) drop-shadow(0 0 70px #75caff18); }
.hero-portrait-response { transform-box:fill-box;transform-origin:50% 65%;transition:transform 420ms cubic-bezier(.22,1,.36,1); }
@media(prefers-reduced-motion:reduce) { .hero-portrait-response { transform:none!important;transition:none; } }
html[data-motion-paused] .hero-portrait-response { transform:none!important;transition:none; }

.hero-scene { display:contents; }

/* Keep the accepted desktop D composition on one proportional artboard.
   ?heroScale=before is the unchanged-layout comparison for this local trial. */
@media(min-width:821px) {
  html.hero-scene-responsive[data-hero-layout="roman-video"] .hero {
    width:100%; margin:0; container-type:inline-size;
    min-height:0; height:min(44.791667vw,860px); padding:0;
  }
  html.hero-scene-responsive[data-hero-layout="roman-video"] .hero-scene {
    display:block; position:relative; width:min(100%,1920px); height:100%; margin-inline:auto; container-type:inline-size;
  }
  html.hero-scene-responsive[data-hero-layout="roman-video"] .hero-grid {
    position:static; width:100%; max-width:none; margin:0;
  }
  html.hero-scene-responsive[data-hero-layout="roman-video"] .hero-grid > div:first-child {
    position:static; padding:0;
  }
  html.hero-scene-responsive[data-hero-layout="roman-video"] .hero-title {
    left:6cqw; --hero-title-bottom:4.6875cqw; gap:clamp(8px,.625cqw,12px);
  }
  html.hero-scene-responsive[data-hero-layout="roman-video"] .hero-role {
    font-size:min(clamp(30px,3.333333cqw,64px),max(24px,calc((100svh - var(--site-header-height,84px) - var(--header-wave-height,64px))*.085)));
  }
  html.hero-scene-responsive[data-hero-layout="roman-video"] .hero .hero-desc {
    position:absolute; left:21.875cqw; top:calc(5.208333cqw + clamp(35.2px,4.4cqw,83.6px) + 18px);
    width:33.854167cqw; max-width:none; margin:0;
  }
  html.hero-scene-responsive[data-hero-layout="roman-video"] .hero .hero-desc p {
    font-size:clamp(22px,2.1875cqw,42px);
  }
  html.hero-scene-responsive[data-hero-layout="roman-video"] .hero-name-en {
    top:8.854167cqw; font-size:18cqw;
  }
  html.hero-scene-responsive[data-hero-layout="roman-video"] #heroName {
    font-size:min(10.9375cqw,calc((100svh - var(--site-header-height,84px) - var(--header-wave-height,64px))*.28));
  }
  html.hero-scene-responsive[data-hero-layout="roman-video"] .hero-cutout {
    width:67.03125cqw; top:-.3125cqw;
  }
  html.hero-scene-responsive[data-hero-layout="roman-video"] .hero::before {
    top:-8.333333cqw;
  }
  html.hero-scene-responsive[data-hero-layout="roman-video"] .hero-rays {
    top:-8.333333cqw;
  }
}

@media(min-width:821px) and (max-height:520px) {
 html.hero-scene-responsive[data-hero-layout="roman-video"] #heroName { font-size:min(10.9375cqw,calc((100svh - var(--site-header-height,84px) - var(--header-wave-height,64px))*.35)); }
 html.hero-scene-responsive[data-hero-layout="roman-video"] .hero-role { font-size:min(3.333333cqw,max(24px,calc((100svh - var(--site-header-height,84px) - var(--header-wave-height,64px))*.115))); }
 html.hero-scene-responsive[data-hero-layout="roman-video"] .hero-cutout { width:min(67.03125cqw,calc((100svh - var(--site-header-height,84px) - var(--header-wave-height,64px))*2.65)); }
}