/* Portraits behind the name, with one quiet glass layer in front. */
.header nav{font-size:12px}
.intro.hero-portrait{position:relative;height:510px;padding:0;overflow:hidden;isolation:isolate;border-radius:25px;background:radial-gradient(ellipse at 50% 25%,#363638 0%,#1b1b1e 38%,#101012 77%);border:1px solid #ffffff0b}
.hero-scene{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-character{position:absolute;pointer-events:none;filter:saturate(.82)}
.hero-character img{width:100%;height:100%;object-fit:contain;display:block}
.hero-character--person{height:690px;width:460px;left:calc(50% - 230px);top:8px;z-index:2}
.hero-character--pinyu{height:330px;width:370px;left:5%;top:68px;z-index:1}
.hero-character--pinyu>img{height:380px;width:380px;max-width:none;position:absolute;top:-28px;left:0}
.hero-character--pinyu canvas{pointer-events:none!important}
.hero-character--king{height:300px;width:300px;right:9%;top:62px;z-index:1;animation:hero-king-breathe 7s ease-in-out infinite}
.hero-veil{position:absolute;inset:0;z-index:3;pointer-events:none;backdrop-filter:blur(1.1px);-webkit-backdrop-filter:blur(1.1px);background:linear-gradient(180deg,#10101208 0%,#10101212 32%,#10101236 57%,#101012f0 100%)}
.hero-portrait .intro-kicker{position:absolute;inset:24px 30px auto;z-index:4;letter-spacing:1.2px;font-size:9px;color:#bababa}
.hero-portrait .intro-kicker span:last-child{letter-spacing:.3px;color:#999}
.hero-portrait h1{position:absolute;z-index:5;left:0;right:0;top:253px;width:100%;margin:0;text-align:center;font-size:clamp(78px,10.7vw,150px);line-height:1.08;letter-spacing:-6.5px;font-weight:500;text-shadow:0 2px 35px #0004;color:#f3f3f3}
.hero-portrait .name-period{color:#adadad}
.hero-portrait .intro-baseline{position:absolute;z-index:5;left:31px;right:31px;bottom:27px;display:flex;align-items:flex-end;justify-content:space-between;margin:0;gap:35px}
.hero-portrait .intro-baseline p{font-size:12px;line-height:1.9;color:#aaa;max-width:440px}
.hero-portrait .intro-baseline a{font-size:12px;letter-spacing:.3px;gap:18px;color:#d3d3d3;margin:0}
@keyframes hero-king-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.site-reaction-bar{border:0;padding:23px 0 25px;gap:7px 30px;margin:0 0 8px}
.reaction-introduction>p{font-size:12px!important;color:#9c9c9c!important;margin:0!important}
.site-reaction-bar .reaction-help{font-size:9px!important;color:#656565;margin-top:0!important}
.about-tile .about-tile-copy{margin:0;padding-top:32px}
.about-tile h2{font-size:47px;letter-spacing:-1.8px;line-height:1.15;margin:0;font-weight:500}
.about-tile h2>span{display:inline;white-space:normal;color:#6f6f6f}
.about-tile-copy p{font-size:12px;line-height:2.2;margin-top:23px;max-width:265px;color:#a0a0a0}
.about-tile .tile-foot>span:first-child{font-size:12px;color:#8e8e8e}
.contact-tile h2{font-size:44px;font-weight:500;letter-spacing:-1.7px;line-height:1.2;margin-top:35px;max-width:300px}
.contact-tile h2>span{color:#777}
.contact-tile .tile-foot>span:first-child{font-size:11px;color:#aaa}
.pigne-visual{animation:none;inset:54px 25px 72px;display:flex;align-items:center;justify-content:center;gap:8px;pointer-events:none;z-index:5}
.pinyu-card-viewer{height:210px;width:220px;flex:0 1 220px;min-width:0;z-index:7;pointer-events:auto}
.pigne-caption{position:relative;z-index:0;font-size:19px;pointer-events:none}
.pigne-caption>span{font-size:7px;margin-top:9px}
.pinyu-detail-scene{position:relative;min-height:500px;background:radial-gradient(ellipse at 55% 45%,#2a2a2d77,transparent 66%),#151517;margin-bottom:25px}
.pinyu-detail-copy{position:absolute;top:32px;left:34px;z-index:2;pointer-events:none}
.pinyu-detail-copy h2{font-size:30px;font-weight:500;margin-top:13px}
.pinyu-detail-copy p{font-size:11px;color:#999;margin-top:11px;line-height:2}
.pinyu-detail-viewer{height:500px;width:100%}
.pinyu-scene-note{position:absolute;bottom:25px;right:32px;pointer-events:none;font-size:10px;color:#888;letter-spacing:.4px}
/* A portfolio gallery, rather than a table of names. */
.project-gallery-index.directory{padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;overflow:visible}
.project-gallery-index .directory-toolbar{padding:0;margin-bottom:28px;gap:24px;align-items:center}
.project-gallery-index .filters{display:flex;gap:8px;flex-wrap:wrap}
.project-gallery-index .filters button{font-size:11px;padding:9px 13px;border-radius:7px;background:transparent;color:#777;transition:background .2s,color .2s}
.project-gallery-index .filters button:hover{color:#ddd;background:#ffffff05}
.project-gallery-index .filters button.active{color:#e5e5e5;background:#ffffff0c;box-shadow:none}
.project-gallery-index .project-count{font-size:11px;color:#717171;letter-spacing:.2px;white-space:nowrap;margin:0}
.project-gallery-index .project-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:31px 22px}
.project-card{position:relative;min-width:0;display:flex;flex-direction:column;isolation:isolate}
.project-card-art{position:relative;height:230px;overflow:hidden;border-radius:19px;background:radial-gradient(ellipse at 50% 85%,#30303470,transparent 70%),#151517;border:1px solid #ffffff0b;transition:background .4s,border-color .4s}
.project-card:hover .project-card-art{border-color:#ffffff25}
.project-card-art:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#10101255,transparent 46%);pointer-events:none}
.project-card-open{position:absolute;right:17px;top:14px;font-size:22px;color:#b9b9b9;z-index:1;line-height:1;transition:transform .3s}
.project-card:hover .project-card-open{transform:translate(2px,-2px)}
.project-preview-phone{position:absolute;width:126px;height:auto;border-radius:16px;border:2px solid #ffffff24;box-shadow:0 16px 30px #0005;top:29px;object-fit:cover}
.project-preview-phone.preview-left{left:calc(50% - 128px)}
.project-preview-phone.preview-right{right:calc(50% - 128px);top:49px}
.project-card--pulse .project-preview-phone{width:131px}
.project-card--pulse .preview-left{left:calc(50% - 133px)}
.project-card--pulse .preview-right{right:calc(50% - 133px)}
.project-preview-phone.preview-solo{width:161px;left:calc(50% - 80.5px);top:26px}
.project-preview-site{position:absolute;width:96%;max-width:none;height:auto;top:35px;left:2%;border-radius:9px;border:1px solid #ffffff14;opacity:.66}
.project-preview-mascot{position:absolute;width:153px;height:153px;object-fit:contain;right:11px;bottom:2px;filter:drop-shadow(0 6px 15px #0009)}
.project-preview-pinyu{position:absolute;width:260px;height:260px;max-width:none;object-fit:contain;top:-14px;left:calc(50% - 130px);filter:drop-shadow(0 9px 15px #0006)}
.project-card--pigne .project-card-art{background:radial-gradient(ellipse at 50% 50%,#46464b75,transparent 80%),#1b1b1e}
.project-card-copy{padding:19px 2px 0;flex:1;display:flex;flex-direction:column}
.project-card-title{display:flex;align-items:center;gap:11px;min-width:0}
.project-card-title>img{width:27px;height:27px;border-radius:8px;flex-shrink:0}
.project-card-title h3{font-size:19px;font-weight:500;letter-spacing:-.35px;line-height:1.7;overflow-wrap:anywhere}
.project-card-description{font-size:12px;line-height:2;color:#939393;margin-top:12px;flex:1}
.project-card-meta{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:18px}
.project-card-meta>span{font-size:10px;color:#737373}
.project-card-meta>.reaction-button{position:relative;z-index:4}
.project-card-link{position:absolute;inset:0;z-index:2;border-radius:19px}
.project-card-link:focus-visible{outline-offset:7px}
.project-card--brain{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;margin-top:4px;padding:25px 28px;background:#141416;border-radius:19px}
.project-card--brain .project-card-art{height:175px;border:0;background:none;overflow:visible}
.project-card--brain .project-card-copy{padding:0 12px 0 0}
.project-card--brain .project-card-art:after{display:none}
.project-card--brain .project-card-open{right:0;top:0}
.brain-wordmark{padding:4px 0 0 5px;display:flex;flex-direction:column}
.brain-wordmark>span{font-size:13px;letter-spacing:4px;color:#85858c}
.brain-wordmark>strong{font-size:77px;letter-spacing:-3.7px;font-weight:500;line-height:1.2;color:#d9d9df;margin-top:6px}
.brain-wordmark>small{font-size:8px;letter-spacing:1.25px;color:#67676f;margin-top:12px}
.project-gallery-index .directory-note{border:0;font-size:10px;line-height:2;color:#666;margin-top:25px;padding:0}
@media(min-width:1500px){.hero-portrait h1{font-size:154px}.hero-character--pinyu{left:8%}.hero-character--king{right:10%}}
@media(max-width:1050px){
 .intro.hero-portrait{height:470px}.hero-portrait h1{font-size:112px;top:252px;letter-spacing:-5px}
 .hero-character--person{height:620px;width:413px;left:calc(50% - 206px);top:10px}
 .hero-character--pinyu{width:300px;height:300px;left:0;top:75px}.hero-character--pinyu>img{width:330px;height:330px;left:-15px;top:-17px}
 .hero-character--king{width:260px;height:260px;right:4%;top:80px}
 .hero-portrait .intro-baseline{bottom:25px}.hero-portrait .intro-baseline p{font-size:11px;max-width:400px}
 .about-tile h2{font-size:39px}.about-tile-copy p{font-size:10px}.about-tile .about-tile-copy{padding-top:30px}
 .contact-tile h2{font-size:35px}
 .pigne-visual{left:15px;right:15px;gap:0}.pinyu-card-viewer{width:176px;height:190px;flex-basis:176px}.pigne-caption{font-size:17px}
 .project-gallery-index .project-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 21px}
 .project-card-art{height:250px}.project-card--brain{gap:23px}.brain-wordmark>strong{font-size:69px}
}
@media(max-width:760px){
 .intro.hero-portrait{height:415px;border-radius:20px;margin-top:3px}
 .hero-portrait .intro-kicker{inset:20px 18px auto;font-size:7px;letter-spacing:1px}.hero-portrait .intro-kicker span:last-child{font-size:6px;max-width:90px;text-align:right;line-height:1.6}
 .hero-character--person{width:270px;height:405px;left:calc(50% - 135px);top:35px}
 .hero-character--pinyu{width:205px;height:215px;left:-23px;top:94px}.hero-character--pinyu>img{width:231px;height:231px;left:-12px;top:-6px}
 .hero-character--king{width:185px;height:185px;right:-5px;top:111px}
 .hero-portrait h1{font-size:clamp(51px,13.4vw,94px);letter-spacing:-2.7px;top:249px;line-height:1.1}
 .hero-portrait .intro-baseline{left:19px;right:19px;bottom:22px;gap:17px;display:flex;align-items:flex-end}
 .hero-portrait .intro-baseline p{font-size:10px;max-width:240px;line-height:1.9}.hero-portrait .intro-baseline a{font-size:9px;gap:8px;flex-shrink:0;margin:0}
 .hero-veil{backdrop-filter:blur(.65px);-webkit-backdrop-filter:blur(.65px);background:linear-gradient(180deg,#10101205,#10101217 45%,#10101270 75%,#101012eb)}
 .site-reaction-bar{padding:20px 0 23px}.reaction-introduction>p{font-size:10px!important}.site-reaction-bar .reaction-help{font-size:8px!important;margin-top:7px!important}
 .about-tile .about-tile-copy{padding-top:25px}.about-tile h2{font-size:32px;letter-spacing:-1.2px;line-height:1.3;white-space:normal}.about-tile-copy p{font-size:10px;line-height:2.1;margin-top:20px;max-width:150px}
 .about-tile .tile-foot>span:first-child{font-size:10px}.contact-tile h2{font-size:31px;line-height:1.25;letter-spacing:-1px;margin-top:34px}
 .contact-tile .tile-foot>span:first-child{font-size:9px}.contact-tile .tile-index{font-size:6px;letter-spacing:.35px}
 .pigne-visual{inset:43px 21px 69px;justify-content:center;gap:17px}.pinyu-card-viewer{height:190px;width:208px;flex-basis:208px}.pigne-caption{font-size:21px}.pigne-caption>span{font-size:7px}
 .pinyu-detail-scene{min-height:430px}.pinyu-detail-copy{top:25px;left:25px}.pinyu-detail-copy h2{font-size:25px}.pinyu-detail-copy p{font-size:10px}.pinyu-detail-viewer{height:430px}.pinyu-scene-note{font-size:8px;bottom:22px;right:23px}
 .project-gallery-index .directory-toolbar{display:flex;align-items:flex-start;margin-bottom:23px;gap:12px}.project-gallery-index .filters{gap:4px;margin:0;max-width:calc(100% - 60px)}
 .project-gallery-index .filters button{padding:7px 8px;font-size:9px}.project-gallery-index .project-count{font-size:9px;line-height:29px}
 .project-gallery-index .project-list{gap:29px 18px}.project-card-art{height:211px}.project-preview-phone{width:106px;border-radius:13px}.project-preview-phone.preview-left{left:calc(50% - 108px)}.project-preview-phone.preview-right{right:calc(50% - 108px)}
 .project-card-title h3{font-size:18px}.project-card-description{font-size:11px;line-height:2}.project-card-copy{padding-top:17px}.project-card-meta{margin-top:16px}
 .project-card--brain{padding:23px 23px;gap:20px}.project-card--brain .project-card-art{height:157px}.brain-wordmark>strong{font-size:57px}.brain-wordmark>small{font-size:6px;letter-spacing:.8px}.brain-wordmark>span{font-size:11px}
 .project-gallery-index .directory-note{font-size:9px;margin-top:24px}
}
@media(max-width:620px){
 .project-gallery-index .project-list{grid-template-columns:1fr}
 .project-card-art{height:230px}.project-card-description{font-size:12px;line-height:1.95}.project-card-title h3{font-size:20px}
 .project-card--brain{display:block;padding:25px}.project-card--brain .project-card-art{height:150px}.project-card--brain .project-card-copy{padding:18px 0 0}.brain-wordmark>strong{font-size:65px}
}
@media(max-width:355px){
 .hero-character--person{width:245px;height:367px;left:calc(50% - 122px);top:55px}.hero-character--pinyu{left:-31px;width:184px;height:190px;top:109px}.hero-character--pinyu>img{width:210px;height:210px}.hero-character--king{width:160px;height:160px;right:-9px;top:131px}
 .hero-portrait h1{font-size:46px;letter-spacing:-2.7px;top:250px}.hero-portrait .intro-baseline p{font-size:9px}.hero-portrait .intro-baseline{gap:12px}.hero-portrait .intro-baseline a{font-size:8px}
 .about-tile h2{font-size:29px}.about-tile-copy p{font-size:9px;line-height:2}.contact-tile h2{font-size:28px}.pigne-visual{gap:5px}.pinyu-card-viewer{width:180px;flex-basis:180px}.pigne-caption{font-size:18px}
 .project-gallery-index .filters button{font-size:8px;padding:7px 6px}.project-gallery-index .project-count{font-size:8px}
}
@media(prefers-reduced-motion:reduce){.hero-character--king{animation:none}}
.pigne-tile .pigne-visual{position:absolute}
.contact-detail h3{font-size:43px;letter-spacing:-1.5px}
.contact-detail h3>span{color:#747478}
@media(max-width:760px){.contact-detail h3{font-size:36px}}
/* Keep every character inside the hero, clear of the lower introduction. */
.hero-character--person{height:420px;width:280px;left:calc(50% - 140px);top:20px}
.hero-character--pinyu{height:310px;width:330px;min-height:0;left:7%;top:63px}
.hero-character--pinyu>img{height:330px;width:330px;left:0;top:-9px}
.hero-character--king{height:280px;width:280px;right:9%;top:70px}
@media(max-width:1050px){
 .hero-character--person{height:390px;width:260px;left:calc(50% - 130px);top:16px}
 .hero-character--pinyu{height:280px;width:280px;left:2%;top:67px}.hero-character--pinyu>img{width:300px;height:300px;left:-10px;top:-8px}
 .hero-character--king{height:250px;width:250px;right:4%;top:76px}
}
@media(max-width:760px){
 .hero-character--person{height:300px;width:200px;left:calc(50% - 100px);top:32px}
 .hero-character--pinyu{height:180px;width:160px;left:4px;top:105px}.hero-character--pinyu>img{height:180px;width:180px;left:-10px;top:0}
 .hero-character--king{height:145px;width:145px;right:3px;top:116px}
}
@media(max-width:355px){
 .hero-character--person{height:267px;width:178px;left:calc(50% - 89px);top:52px}
 .hero-character--pinyu{height:170px;width:135px;left:1px;top:115px}.hero-character--pinyu>img{width:160px;height:160px;left:-12px}
 .hero-character--king{height:123px;width:123px;right:4px;top:137px}
}
/* Open hero: the characters sit on the page, with no surrounding card. */
.intro.hero-portrait{border:0;border-radius:0;background:transparent;overflow:visible}
.hero-scene:before{content:'';position:absolute;inset:0 3% 12%;background:radial-gradient(ellipse at 50% 45%,#ffffff08,transparent 68%);filter:blur(25px);pointer-events:none}
.hero-veil{background:linear-gradient(180deg,#08080800 0%,#08080814 30%,#08080838 65%,#080808e6 100%);mask-image:radial-gradient(ellipse at 50% 40%,#000 45%,transparent 82%);-webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 45%,transparent 82%)}
.about-tile .about-tile-copy{padding-top:47px}
.about-page-heading{font-size:64px;font-weight:500;letter-spacing:-2.8px;line-height:1.15;padding:31px 0 35px;margin:0}
.about-page-heading .title-period{color:#686868}
.about-page .about-detail{margin-bottom:15px}
.header nav a[aria-current="page"]{color:#f1f1f1}
.connect-grid .contact-detail h3{font-size:43px;letter-spacing:-1.5px}
@media(max-width:760px){
 .intro.hero-portrait{border-radius:0;border:0;background:transparent}
 .hero-veil{background:linear-gradient(180deg,#08080800,#08080818 45%,#08080855 75%,#080808df);backdrop-filter:blur(.65px);-webkit-backdrop-filter:blur(.65px)}
 .about-tile .about-tile-copy{padding-top:36px}.about-tile h2{font-size:28px;letter-spacing:-.8px}
 .about-page-heading{font-size:43px;letter-spacing:-1.5px;padding:24px 0 29px}
 .connect-grid .contact-detail h3{font-size:36px}
}
@media(max-width:355px){.about-tile h2{font-size:25px;letter-spacing:-.8px}}
.site-reaction-bar{display:flex;flex-direction:column;align-items:center;gap:9px;padding:14px 0 28px}
.site-reaction-bar .reaction-help{margin:0!important;text-align:center}
@media(max-width:760px){.about-tile h2{font-size:24px;letter-spacing:-.7px;white-space:nowrap}.site-reaction-bar{padding-top:10px;gap:8px}}
@media(max-width:355px){.about-tile h2{font-size:21px;letter-spacing:-.7px}}
.about-page .about-description p{font-size:14px;line-height:2.15}
.about-page .about-description .about-first{font-size:21px;line-height:1.85}
.about-page .about-technologies>p{font-size:11px}
@media(max-width:760px){.about-page .about-description p{font-size:13px}.about-page .about-description .about-first{font-size:19px}}
/* Match the native Japanese type used by PULSE and CookingSI. */
:root{font-synthesis:none}
body{font-family:var(--font);font-weight:400;letter-spacing:normal}
.hero-portrait h1,.section-title h2,.about-tile h2,.contact-tile h2,.contact-detail h3,.about-page-heading,.project-heading h1,.pulse-text h2,.tile-foot h3,.project-card-title h3,.brain-wordmark{font-family:var(--font-display)}
.tile-index,.section-index,.header-role,.header nav,.status-tag,.row-status,.project-platform,.project-count,.project-card-meta,.project-technology-tag,.tech-tags>span,.reaction-help,.screen-caption,.portrait-label,.portrait-en,.pigne-caption>span,.directory-note,.contact-note,.project-release-note,.project-gallery figcaption{font-family:var(--font);font-weight:400;letter-spacing:normal}
.connect-people h3{font-family:var(--font);font-weight:500;letter-spacing:normal}
.connect-people p,.section-title>p,.contact-detail p,.about-description p,.project-explanation p{font-family:var(--font);font-weight:400;letter-spacing:normal}
.reaction-button,.connect-reaction,.button,.filters button{font-family:var(--font);font-weight:500;letter-spacing:normal}
/* PULSE's figures belong to its explanation, not the portfolio's front page. */
.project-explanation .project-stats-wrap{margin:28px 0 32px;padding:23px 0 18px}
.project-explanation .project-stats{gap:18px}
.project-explanation .project-stat+.project-stat{padding-left:20px}
.project-explanation .project-stat-label{font-size:11px;min-height:42px;line-height:1.8;margin:0}
.project-explanation .project-stat-value{font-family:var(--font-display);font-size:41px;line-height:1.3;margin:10px 0 0;font-weight:500;letter-spacing:-1px}
.project-explanation .project-stat-unit{font-family:var(--font);font-size:13px;letter-spacing:normal;margin-left:6px}
.project-explanation .project-stat-note{font-size:11px;line-height:1.8;margin:7px 0 0}
.project-explanation .project-stats-date{font-size:10px;letter-spacing:normal;margin-top:17px}
@media(max-width:760px){
 .about-tile{display:grid;place-items:center}
 .about-tile .about-tile-copy{display:flex;align-items:center;justify-content:center;width:100%;padding:0;margin:0;text-align:center}
 .about-tile h2{margin:0;max-width:100%;text-align:center}
 .project-explanation .project-stats-wrap{margin:24px 0 28px;padding:10px 0 17px}
 .project-explanation .project-stat-label{min-height:0;font-size:11px}
 .project-explanation .project-stat-value{font-size:35px;margin:0}
 .project-explanation .project-stat-note{font-size:10px;margin-top:4px}
}
@media(max-width:760px){.about-page-heading{text-align:center}}