:root{--indigo:#141b41;--ocean:#306bac;--cornflower:#6f9ceb;--baby-blue:#98b9f2;--periwinkle:#918ef4;--paper:#f5f7fc;--ink:var(--indigo);--muted:#59647e;--line:#d8dfed;--highlight:var(--baby-blue);--primary:var(--ocean);--font:'DM Sans','Noto Sans JP',sans-serif;--display:'Manrope','Noto Sans JP',sans-serif;color-scheme:light}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:115px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}a,button{-webkit-tap-highlight-color:transparent}button{touch-action:manipulation}img{display:block;max-width:100%;height:auto}h1,h2,h3,h4,p{margin:0}h1,h2,h3{font-family:var(--display);font-weight:600}h2{font-size:clamp(2.6rem,4.5vw,4.4rem);line-height:1.1;letter-spacing:-.055em}::selection{background:var(--highlight);color:var(--ink)}:focus-visible{outline:3px solid var(--primary);outline-offset:6px}.shell{max-width:1360px;padding-inline:64px;margin-inline:auto}.header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 42px;position:sticky;top:0;z-index:20;background:#f5f7fcf0;backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:14px;font-weight:650;line-height:1.3;white-space:nowrap}.brand-symbol{font-family:var(--display);font-size:34px;letter-spacing:-3px;display:flex;align-items:center}.brand-symbol>span{font-size:25px;letter-spacing:0;color:var(--primary);margin:0 2px 17px 4px}.brand-sub{display:block;font-size:12px;color:var(--muted);font-weight:400;margin-top:3px}.header nav{display:flex;gap:28px;font-size:14px}.header nav a{position:relative;padding-block:6px}.header nav a:after{content:'';height:2px;background:var(--ink);position:absolute;bottom:0;left:0;right:100%;transition:right .25s}.header nav a:hover:after,.header nav a[aria-current]:after{right:0}.header-actions{display:flex;align-items:center;gap:22px}.languages{display:flex;align-items:center;gap:5px;font-size:13px;white-space:nowrap}.languages button{border:0;background:none;padding:5px;color:var(--muted);font-size:13px}.languages button[aria-pressed=true]{font-weight:700;color:var(--ink)}.languages>span{color:#939db4}.contact-button{background:var(--ink);color:var(--paper);border-radius:100px;display:flex;gap:25px;padding:12px 20px;font-size:14px}.contact-button:hover{background:var(--primary)}.menu{display:none}.hero{padding-top:70px;display:grid;grid-template-columns:1.26fr 1fr;gap:0 64px}.eyebrow{display:flex;align-items:center;gap:9px;font-size:13px;margin-bottom:28px}.dot{width:7px;height:7px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 5px #306bac16}.hero h1{font-size:clamp(4.6rem,7.4vw,7.2rem);line-height:.99;letter-spacing:-.075em;font-weight:650;position:relative;z-index:2}.hero-second{display:block;color:var(--primary);margin-top:10px}.lime-period{color:var(--primary)}.hero-bottom{display:flex;gap:30px;align-items:center;margin-top:33px}.hero-bottom p{max-width:390px;font-size:16px;line-height:1.65;color:var(--muted)}.round-link{width:62px;height:62px;flex-shrink:0;display:grid;place-items:center;border:1px solid var(--ink);border-radius:50%;font-size:33px;transition:background .25s,transform .25s}.round-link:hover{background:var(--highlight);transform:rotate(45deg)}.hero-person{position:relative;align-self:center;margin:10px 0 0 10px}.photo-frame{position:relative;transform:rotate(3deg);border-radius:48% 48% 12px 12px;overflow:hidden;background:#98b9f2;aspect-ratio: .83}.photo-frame>img{width:100%;height:100%;object-fit:cover;object-position:50% 44%;transition:transform .8s}.photo-frame:hover>img{transform:scale(1.035)}.photo-label{position:absolute;bottom:25px;left:24px;display:flex;gap:24px;background:var(--paper);padding:10px 18px;border-radius:5px;transform:rotate(-7deg);font-size:16px}.photo-label>span:last-child{font-size:24px;line-height:1}.hello-sticker{width:144px;height:144px;position:absolute;right:-26px;top:-16px;background:var(--highlight);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;transform:rotate(15deg);box-shadow:0 3px 0 #141b4115;border:1px solid #141b4118}.hello-sticker span{font-size:9px;letter-spacing:1.5px}.hello-sticker b{font-size:19px;font-weight:500}.portrait-caption{display:flex;justify-content:space-between;gap:10px;margin-top:27px;font-size:12px;color:var(--muted)}.hero-footer{grid-column:1/-1;border-bottom:1px solid var(--line);margin-top:65px;padding-bottom:25px;display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:.06em}.hero-footer>span:last-child{display:flex;align-items:center;gap:18px;letter-spacing:0;font-size:13px}.small-star{font-size:30px;color:var(--primary)}.about{padding-top:85px;padding-bottom:100px;display:grid;grid-template-columns:1fr 3fr;gap:30px}.section-label{display:flex;gap:15px;font-size:13px;line-height:1.5}.section-label>span:first-child{color:var(--muted)}.about>.section-label{margin-top:8px}.about h2{font-size:clamp(2.3rem,3.5vw,3.4rem)}.green{color:var(--primary)}.about-columns{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:30px;color:var(--muted)}.about-columns p{font-size:16px;line-height:1.8}.about-footer{display:flex;align-items:start;gap:30px;justify-content:space-between;margin-top:28px}.mini-tags{display:flex;gap:7px;flex-wrap:wrap;max-width:400px}.mini-tags span{border:1px solid var(--line);border-radius:30px;padding:6px 12px;font-size:12px}.text-link{display:flex;gap:10px;align-items:center;border-bottom:1px solid var(--ink);padding-bottom:6px;font-size:14px;white-space:nowrap}.file-type{font-size:10px;background:#e4eaf7;padding:1px 4px}.section-top{display:flex;align-items:end;justify-content:space-between;margin-bottom:43px;gap:28px}.section-top .section-label{margin-bottom:24px}.section-top>p{font-size:16px;line-height:1.7;color:var(--muted);padding-bottom:5px}.projects{padding-bottom:110px}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:45px 30px}.project-card{min-width:0}.card-visual{height:370px;border-radius:17px;position:relative;overflow:hidden;padding:26px 28px;transition:transform .45s}.project-card:hover .card-visual{transform:translateY(-5px)}.drivr .card-visual{background:#dbe8bf}.vn .card-visual{background:#ded0f6}.santa .card-visual{background:#c6dcec}.kanji .card-visual{background:#f0d3b5}.card-kicker{display:flex;justify-content:space-between;gap:12px;font-size:10px;letter-spacing:.07em;font-weight:600;position:relative;z-index:2}.visual-title{font-family:var(--display);font-size:30px;letter-spacing:-1.5px;line-height:1.2;font-weight:650;display:flex;justify-content:space-between;margin-top:17px}.visual-title>span{font-weight:400;font-size:23px}.screenshot-window{width:88%;margin-top:25px;transform:rotate(-5deg);border:5px solid #292e24;border-radius:12px;overflow:hidden;box-shadow:0 15px 30px #1d281b22}.window-chrome{display:flex;gap:4px;align-items:center;background:#292e24;color:#dce1d2;padding:2px 6px 6px;font-size:7px}.window-chrome i{width:5px;height:5px;border-radius:50%;background:#68735c}.window-chrome span{margin-left:10px}.screenshot-window img{width:100%}.visual-sticker{position:absolute;bottom:26px;right:20px;padding:12px 17px;background:var(--highlight);font-size:13px;transform:rotate(6deg);border-radius:40px;box-shadow:0 3px 0 #21281c10}.vn-screenshot{width:90%;height:285px;object-fit:cover;object-position:top;margin:25px auto 0;transform:rotate(5deg);border:5px solid #393041;border-radius:12px;box-shadow:0 16px 25px #30263e25}.vn-caption{position:absolute;bottom:18px;left:22px;color:white;background:#3c304ce8;border-radius:35px;padding:10px 17px;font-size:13px;transform:rotate(-4deg)}.santa-image{margin-top:23px;transform:rotate(-3deg);border:5px solid #f9fcff;border-radius:8px;box-shadow:0 12px 20px #2b4c6020}.santa-image img{width:100%}.evidence-line{display:flex;align-items:center;justify-content:center;gap:15px;margin-top:20px;font-size:12px}.evidence-line span{padding:3px 14px;border:1px solid #597a9350;border-radius:25px}.evidence-line i{font-style:normal}.kanji-composition{display:flex;align-items:center;gap:12px;margin-top:20px}.kanji-letter{width:32%;font-size:90px;font-family:'Noto Sans JP',sans-serif;font-weight:500;line-height:1.1;text-align:center;color:#845c41}.kanji-letter span{display:block;font:10px var(--font);letter-spacing:.5px;white-space:nowrap;margin-top:13px}.kanji-composition>img{width:66%;border:4px solid #343748;border-radius:12px;transform:rotate(7deg);box-shadow:0 15px 30px #67452922}.card-content{padding:20px 3px 0}.card-title{display:flex;justify-content:space-between;align-items:center;gap:15px}.card-title h3{font-size:25px;letter-spacing:-.8px}.project-open{width:39px;height:39px;border-radius:50%;background:transparent;border:1px solid var(--line);font-size:24px;line-height:1;transition:background .2s,transform .2s}.project-open:hover{background:var(--highlight);border-color:var(--highlight);transform:rotate(45deg)}.card-content>p{color:var(--muted);margin-top:6px;font-size:15px;max-width:440px}.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:15px}.tags span{font-size:11px;border:1px solid var(--line);border-radius:20px;padding:4px 10px}.tools-section{background:#141b41;color:var(--paper);border-radius:34px 34px 0 0}.tools-inner{display:grid;grid-template-columns:1fr 1.5fr;gap:80px;padding-block:80px}.tools-inner h2{margin-top:27px;font-size:clamp(2.6rem,4vw,3.8rem)}.tools-inner .lime-period{color:var(--highlight)}.tools-inner .section-label>span:first-child{color:#98b9f2}.tools-inner>div>p{color:#b8c6e2;margin-top:27px;font-size:15px}.tool-group{padding:23px 0 27px;border-bottom:1px solid #35416a}.tool-group:first-child{padding-top:0}.tool-group h3{display:flex;align-items:center;gap:16px;font-family:var(--font);font-size:18px;font-weight:500}.tool-group h3>span:first-child{font-size:12px;color:#98b9f2}.tool-group>div{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}.tool-group>div>span{font-size:13px;border:1px solid #35416a;padding:8px 12px;border-radius:7px;color:#e4eafa}.journey{display:grid;grid-template-columns:1fr 1.4fr;gap:100px;padding-block:100px 105px}.journey-intro h2{margin-top:28px}.journey-intro>p{color:var(--muted);font-size:16px;line-height:1.75;margin-top:28px;max-width:350px}.badge-note{margin-top:40px;display:flex;align-items:center;gap:20px}.badge-note img{width:110px;height:110px;object-fit:contain;transform:rotate(-9deg)}.badge-note strong{font-size:15px;font-weight:600}.badge-note p,.badge-note span{font-size:12px;color:var(--muted);margin-top:4px}.badge-note span{display:block;letter-spacing:1px}.timeline{padding-left:27px;border-left:1px solid #c3cee5}.timeline article{position:relative;padding-bottom:37px;margin-bottom:27px;border-bottom:1px solid var(--line)}.timeline article:before{content:'';width:10px;height:10px;border-radius:50%;background:var(--paper);border:1px solid var(--primary);position:absolute;top:5px;left:-33px}.timeline article:first-child:before{background:var(--primary);box-shadow:0 0 0 5px var(--paper)}.timeline article:last-child{padding-bottom:0;border:0;margin-bottom:0}.timeline-date{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted);gap:12px;margin-bottom:11px}.current{font-size:10px;color:var(--primary);background:#e3edfc;padding:3px 8px;border-radius:20px}.spark-label{color:#b12f91;font-weight:600;font-size:17px;letter-spacing:-1px}.timeline h3{font-size:22px;line-height:1.3;letter-spacing:-.7px}.timeline h4{font-size:14px;font-weight:500;margin:7px 0 12px}.timeline p{color:var(--muted);font-size:14px;line-height:1.8}.contact-section{background:var(--highlight);border-radius:40px 40px 0 0;padding-block:46px 57px;overflow:hidden}.contact-top{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:12px}.contact-top .section-label>span:first-child{color:#34436d}.contact-section h2{font-size:clamp(4rem,8.8vw,8.4rem);line-height:1.04;position:relative;letter-spacing:-.07em;margin-top:40px;max-width:1100px}.contact-section h2 em{font-family:Georgia,serif;font-weight:400}.contact-star{display:inline-block;font-size:.9em;font-weight:400;position:absolute;right:6%;top:10%;animation:rotate 40s linear infinite}.contact-bottom{display:flex;align-items:end;justify-content:space-between;gap:35px;margin-top:40px}.contact-bottom>p{font-size:15px}.contact-links>a{display:flex;gap:40px;justify-content:space-between;font-size:clamp(1.1rem,2.4vw,2rem);letter-spacing:-.045em;border-bottom:1px solid #6588bd;padding-bottom:11px}.contact-links>div{display:flex;justify-content:space-between;gap:20px;margin-top:15px;font-size:14px}.contact-links a:hover{color:var(--indigo);text-decoration:underline;text-underline-offset:5px}.contact-links small{font-size:10px}.footer{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-block:30px;font-size:12px}.footer-name{font-size:16px;font-weight:600;display:flex;align-items:center;gap:13px}.footer-name span{font-size:25px;color:var(--primary)}.footer>p{color:var(--muted)}dialog{border:0;background:var(--paper);color:var(--ink);max-width:920px;width:calc(100% - 48px);max-height:90dvh;padding:0;border-radius:20px;box-shadow:0 30px 100px #0005}dialog::backdrop{background:#141b41bb;backdrop-filter:blur(8px)}.dialog-bar{position:sticky;top:0;background:var(--paper);display:flex;justify-content:space-between;align-items:center;padding:17px 32px;border-bottom:1px solid var(--line);z-index:2;font-size:13px}.dialog-close{border:1px solid var(--line);background:transparent;border-radius:50%;width:37px;height:37px;font-size:17px}#detail-content{padding:35px 40px 45px}.detail-kicker{font-size:12px;color:var(--primary);margin-bottom:10px}.detail-title{font-size:40px;line-height:1.15;margin-bottom:15px}.detail-lead{font-size:19px;color:var(--muted);line-height:1.6;margin-bottom:25px}.detail-image{width:100%;max-height:500px;object-fit:contain;background:#e7ecf7;border-radius:9px;margin-block:23px}.detail-section{margin-top:26px}.detail-section h3{font-size:20px;margin-bottom:9px}.detail-section p{font-size:16px;line-height:1.8;color:var(--muted)}.detail-flow{display:flex;gap:8px;align-items:stretch;margin-block:24px}.detail-flow>span{flex:1;border:1px solid var(--line);border-radius:9px;padding:13px;font-size:13px;background:#edf1fb}.detail-flow b{display:block;color:var(--primary);font-size:11px;margin-bottom:6px}.detail-link{display:inline-flex;align-items:center;gap:14px;padding:12px 18px;background:var(--ink);color:var(--paper);border-radius:28px;font-size:14px;margin-top:25px}.detail-credit{font-size:12px;color:var(--muted);margin-top:25px;padding-top:18px;border-top:1px solid var(--line)}body.dialog-open{overflow:hidden}.skip{position:fixed;top:-100px;left:20px;background:var(--ink);color:white;z-index:100;padding:15px}.skip:focus{top:10px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.language-shift [data-ja]{animation:language-in .5s ease both}html[lang=ja] h1{font-size:clamp(3.2rem,5.8vw,5.4rem);line-height:1.4;letter-spacing:-.045em}html[lang=ja] .hero-second{margin-top:0}html[lang=ja] h2{line-height:1.4;letter-spacing:-.045em}html[lang=ja] .hero-main h1>span{display:block}html[lang=ja] .about h2{font-size:clamp(2rem,3.1vw,3rem)}html[lang=ja] .contact-section h2{font-size:clamp(3rem,6.5vw,6.2rem);max-width:900px}html[lang=ja] .section-top h2{max-width:680px}html[lang=ja] .card-kicker{letter-spacing:0}html[lang=ja] .header nav{gap:20px}html[lang=ja] .contact-star{display:none}@keyframes language-in{from{filter:blur(8px);opacity:.1;transform:translateY(5px)}to{filter:blur(0);opacity:1;transform:translateY(0)}}@keyframes rotate{to{transform:rotate(360deg)}}
@media(min-width:1450px){.hero{padding-top:85px}.hero h1{font-size:7.4rem}.photo-frame{max-height:600px}.header{padding-inline:max(42px,calc((100vw - 1320px)/2))}.card-visual{height:400px}}
@media(max-width:1100px){.shell{padding-inline:40px}.header{padding:20px 26px;gap:16px}.header nav{gap:18px}.brand-sub{display:none}.brand{font-size:14px;gap:8px}.header-actions{gap:15px}.hero{gap:0 40px;padding-top:55px}.hero h1{font-size:7.5vw}.hero-person{margin-left:0}.hello-sticker{width:118px;height:118px;right:-16px}.hello-sticker b{font-size:16px}.hello-sticker span{font-size:8px}.portrait-caption{font-size:11px}.hero-bottom{gap:20px}.hero-bottom p{font-size:14px}.round-link{width:48px;height:48px;font-size:27px}.about{grid-template-columns:1fr 3fr}.about-footer{flex-direction:column;gap:18px}.card-visual{height:330px;padding:24px}.visual-title{font-size:26px}.evidence-line{margin-top:18px;gap:8px}.evidence-line span{padding:3px 8px;font-size:11px}.kanji-letter{font-size:70px}.tools-inner{gap:45px}.journey{gap:55px}.contact-star{right:0}.contact-button{padding:10px 15px;gap:15px}}
@media(max-width:850px){.header nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);padding:23px 30px;border-bottom:1px solid var(--line)}.header nav.open{display:flex}.menu{display:block;border:0;background:transparent;padding:6px;font-size:13px}.header{padding:17px 24px}.header-actions{gap:12px}.contact-button{font-size:12px}.hero{gap:0 30px}.hero h1{font-size:8.5vw}.eyebrow{font-size:11px;margin-bottom:22px}.hero-person{align-self:start;margin-top:45px}.hero-bottom{display:block}.round-link{margin-top:20px}.hero-footer{margin-top:40px}.about{display:block;padding-block:60px}.about-body{margin-top:23px}.about-columns{gap:24px}.section-top>p{max-width:220px;font-size:14px}.card-visual{height:285px;padding:20px}.card-kicker{font-size:8px}.visual-title{font-size:23px}.screenshot-window{margin-top:23px;width:95%}.vn-screenshot{margin-top:22px;width:95%}.visual-sticker,.vn-caption{font-size:10px;padding:9px 12px}.santa-image{margin-top:25px}.evidence-line{gap:6px}.evidence-line span{font-size:10px;padding:3px 7px}.kanji-letter{font-size:57px}.kanji-letter span{font-size:8px}.card-title h3{font-size:22px}.card-content>p{font-size:14px}.tools-inner{grid-template-columns:1fr;gap:36px;padding-block:60px}.tools-inner h2 br{display:none}.tools-inner>div>p{margin-top:20px}.journey{grid-template-columns:1fr;gap:45px;padding-block:65px}.journey-intro>p{max-width:600px}.journey-intro h2 br{display:none}.badge-note{margin-top:22px}.timeline{margin-left:5px}.contact-bottom{align-items:start;flex-direction:column;gap:24px}.contact-links{width:100%}.contact-links>a{font-size:26px}.contact-section h2{font-size:10vw}.contact-top{font-size:11px}.footer{padding-block:23px}.footer-name{font-size:14px}}
@media(max-width:600px){html{scroll-padding-top:95px}.shell{padding-inline:24px}.header{padding:14px 18px;gap:12px}.brand-symbol{font-size:29px}.brand-symbol>span{font-size:20px;margin-left:3px}.brand>span:last-child{display:none}.header-actions{gap:10px}.contact-button{padding:9px 13px;gap:9px}.languages button{font-size:12px;padding:4px}.menu{font-size:12px;padding:4px}.header nav.open{justify-content:space-between;padding-inline:24px;gap:12px;font-size:13px}.hero{display:flex;flex-direction:column;padding-top:40px}.eyebrow{font-size:12px;margin-bottom:25px}.hero h1{font-size:clamp(4rem,15vw,5.8rem);letter-spacing:-.075em}.hero h1 br{display:none}.hero h1>span{display:block}.hero-main{width:100%}.hero-bottom{display:flex;align-items:end;gap:16px;margin-top:25px}.hero-bottom p{font-size:15px;max-width:330px}.round-link{margin:0;width:46px;height:46px}.hero-person{width:80%;max-width:350px;align-self:center;margin-top:44px}.photo-frame{aspect-ratio:.94;border-radius:46% 46% 10px 10px}.photo-frame>img{object-position:50% 36%}.hello-sticker{width:110px;height:110px;top:-18px;right:-25px}.hello-sticker b{font-size:15px}.hello-sticker span{font-size:7px}.photo-label{bottom:18px;left:17px;font-size:13px;padding:8px 14px}.portrait-caption{margin-top:20px;font-size:10px}.hero-footer{width:100%;margin-top:34px;padding-bottom:16px;gap:16px;font-size:9px;letter-spacing:0}.hero-footer>span:last-child{font-size:11px;gap:10px}.small-star{font-size:24px}.about{padding-block:48px 62px}.section-label{font-size:12px;gap:12px}.about h2{font-size:34px}.about-columns{grid-template-columns:1fr;gap:18px;margin-top:23px}.about-columns p{font-size:15px;line-height:1.8}.about-footer{margin-top:23px}.mini-tags span{font-size:11px}.text-link{font-size:14px}.section-top{display:block;margin-bottom:28px}.section-top .section-label{margin-bottom:20px}.section-top h2{font-size:42px}.section-top>p{max-width:none;margin-top:20px;font-size:15px}.section-top>p br{display:none}.project-grid{grid-template-columns:1fr;gap:34px}.card-visual{height:340px;padding:24px}.card-kicker{font-size:9px}.visual-title{font-size:29px}.screenshot-window{width:87%;margin-top:26px}.vn-screenshot{height:320px;width:90%;margin-top:26px}.santa-image{margin-top:28px}.evidence-line{margin-top:24px;gap:14px}.evidence-line span{font-size:12px;padding:3px 10px}.kanji-letter{font-size:82px}.kanji-letter span{font-size:10px}.visual-sticker,.vn-caption{font-size:12px;padding:10px 14px}.card-content{padding-top:17px}.card-title h3{font-size:25px}.card-content>p{font-size:15px}.tags span{font-size:11px}.projects{padding-bottom:62px}.tools-section{border-radius:25px 25px 0 0}.tools-inner{padding-block:48px;gap:35px}.tools-inner h2{font-size:39px;max-width:340px}.tool-group h3{font-size:17px}.tool-group>div>span{font-size:12px;padding:7px 10px}.journey{padding-block:58px;gap:40px}.journey h2{font-size:41px}.journey-intro>p{font-size:15px}.timeline{padding-left:22px}.timeline article:before{left:-28px}.timeline h3{font-size:21px}.timeline p{font-size:14px}.timeline-date{font-size:11px}.current{font-size:9px}.badge-note img{width:100px;height:100px}.contact-section{border-radius:25px 25px 0 0;padding-block:32px 38px}.contact-top{align-items:start;gap:15px}.contact-top>span:last-child{max-width:145px;text-align:right;font-size:10px}.contact-section h2{font-size:14vw;margin-top:30px}.contact-star{font-size:.72em;right:0;top:0}.contact-bottom{margin-top:25px}.contact-bottom>p{font-size:14px}.contact-links>a{font-size:20px;gap:12px;letter-spacing:-.04em}.contact-links>div{font-size:13px}.footer{flex-wrap:wrap;gap:8px 20px;font-size:11px;padding-block:20px}.footer-name{font-size:13px}.footer>p{order:3;width:100%}.footer>a:last-child{margin-left:auto}dialog{width:calc(100% - 24px);max-height:93dvh;border-radius:15px}.dialog-bar{padding:14px 20px}#detail-content{padding:25px 22px 32px}.detail-title{font-size:31px}.detail-lead{font-size:17px}.detail-flow{flex-direction:column;gap:7px}.detail-flow>span{padding:10px 13px}.detail-flow b{display:inline;margin-right:10px}.detail-section p{font-size:15px}html[lang=ja] .hero h1{font-size:12vw;line-height:1.5}html[lang=ja] .hero h1>span{display:block}html[lang=ja] h2{font-size:34px}html[lang=ja] .about h2{font-size:30px}html[lang=ja] .contact-section h2{font-size:11vw}html[lang=ja] .header nav{gap:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.photo-frame:hover>img{transform:none}.project-card:hover .card-visual{transform:none}}

/* Brand accents keep the toolkit connected to the surrounding indigo palette. */
.tool-group>div{gap:10px}
.tool-group>div>.tool-chip{
 display:inline-flex;align-items:center;gap:9px;min-height:43px;
 padding:9px 13px;border-radius:10px;font-size:14px;line-height:1.4;
 color:#f0f3fc;border:1px solid rgba(var(--tool-rgb),.27);
 background:linear-gradient(115deg,rgba(var(--tool-rgb),.13),rgba(var(--tool-rgb),.045)),#101735;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
 transition:background .2s,border-color .2s,box-shadow .2s;
}
.tool-group>div>.tool-chip:hover{
 border-color:rgba(var(--tool-rgb),.52);
 background:linear-gradient(115deg,rgba(var(--tool-rgb),.2),rgba(var(--tool-rgb),.09)),#101735;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 3px 12px rgba(0,0,0,.08);
}
.tool-logo{width:20px;height:20px;flex:0 0 20px;object-fit:contain}
.tool-logo--light,.tool-logo--mono{filter:brightness(0) invert(1);opacity:.94}
.tool-logo--secondary{width:18px;height:18px;flex-basis:18px;margin-left:-4px}
.tool-label{min-width:0}
.tool-monogram{display:grid;place-items:center;width:22px;height:22px;flex:0 0 22px;
 border-radius:5px;background:rgba(var(--tool-rgb),.15);color:rgb(var(--tool-rgb));
 font-size:8px;font-weight:700;letter-spacing:.025em;line-height:1}
@media(max-width:600px){.tool-group>div{gap:8px}.tool-group>div>.tool-chip{padding:9px 11px;gap:8px}}

/* Blue accents across the page; the project-card pastel surfaces stay multicolored. */
.hello-sticker{background:var(--periwinkle)}
.contact-section{background:var(--baby-blue)}
.contact-star{color:var(--ocean)}
.tools-inner .lime-period{color:var(--cornflower)}
/* Date and status stay together; all institution marks share the right-hand column. */
.timeline-date{display:grid;grid-template-columns:minmax(0,1fr) 84px;align-items:center;gap:16px;min-height:36px}
.timeline-date-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;min-width:0}
.timeline-date-meta>.current{white-space:nowrap}
.timeline-brand-group{display:flex;align-items:center;justify-content:flex-end;width:84px;min-height:36px}
.timeline-brand{display:block;object-fit:contain;flex-shrink:0}
.timeline-brand--unitec{width:84px;height:32px}
.timeline-brand--nols{width:36px;height:36px;border-radius:5px}
.timeline-brand-group>.spark-label{font-size:23px;line-height:1;white-space:nowrap}
@media(max-width:600px){.timeline-date{grid-template-columns:minmax(0,1fr) 76px;gap:12px}.timeline-date-meta{gap:7px}.timeline-brand-group{width:76px}.timeline-brand--unitec{width:76px;height:29px}.timeline-brand-group>.spark-label{font-size:22px}}

/* Stretch the existing native button across its card: one action and one keyboard stop. */
.project-card{position:relative;isolation:isolate;cursor:pointer;border-radius:17px}
.project-open::after{content:"";position:absolute;inset:0;z-index:3;border-radius:17px;cursor:pointer}
.project-open:hover{transform:none}
.project-card:hover .project-open,.project-card:focus-within .project-open{background:var(--highlight);border-color:var(--highlight)}
.project-card:has(.project-open:focus-visible){outline:3px solid var(--primary);outline-offset:7px}
.project-open:focus-visible{outline:none}

/* A quiet mesh of color beneath the page, without moving or intercepting content. */
body{position:relative;isolation:isolate;background:#fff}
body::before{
 content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
 background-color:hsla(0,0%,100%,1);
 background-image:
  radial-gradient(circle at 5% 5%,hsla(56,100%,91%,1) 0%,transparent 50%),
  radial-gradient(circle at 95% 5%,hsla(202,100%,89%,1) 0%,transparent 37.3744%),
  radial-gradient(circle at 3% 95%,hsla(24,100%,82%,1) 4.6685%,transparent 50%),
  radial-gradient(circle at 70% 68%,hsla(180,100%,96%,1) 0%,transparent 50%);
 background-blend-mode:normal,normal,normal,normal;
 opacity:.8;animation:mesh-breathe 24s ease-in-out infinite alternate;
}
.header{background:rgba(255,255,255,.76)}
@keyframes mesh-breathe{from{opacity:.72}to{opacity:.9}}
@media(prefers-reduced-motion:reduce){body::before{animation:none;opacity:.8}}

/* Full-width project stories: artwork on the left, context on the right. */
.project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
.project-card{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:rgba(255,255,255,.58);border:1px solid rgba(20,27,65,.09);transition:box-shadow .25s,border-color .25s}
.project-card .card-visual{height:100%;min-height:390px;border-radius:16px 0 0 16px}
.project-card .card-content{padding:34px 36px;align-self:center}
.project-card:hover .card-visual{transform:none}
.project-card:hover{border-color:rgba(48,107,172,.25);box-shadow:0 12px 35px rgba(20,27,65,.06)}
.project-card .card-title h3{font-size:28px}
.project-card .card-content>p{font-size:16px;line-height:1.6;margin-top:9px;max-width:none;color:var(--primary)}
.project-overview{margin-top:20px;font-size:15px;line-height:1.75;color:var(--muted)}
.project-contribution{margin-top:17px}
.project-contribution strong{display:block;font-size:12px;letter-spacing:.025em;font-weight:600;color:var(--ink);margin-bottom:4px}
.project-contribution>span{display:block}
.project-card .tags{margin-top:22px}
@media(max-width:1000px){.project-card .card-content{padding:26px}.project-card .card-visual{min-height:420px}.project-card .card-title h3{font-size:25px}}
@media(max-width:750px){.project-grid{grid-template-columns:minmax(0,1fr)}.project-card{grid-template-columns:minmax(0,1fr)}.project-card .card-visual{height:340px;min-height:0;border-radius:16px 16px 0 0}.project-card .card-content{padding:25px}.project-overview{margin-top:17px}}

/* Section headings lead directly, without numbered eyebrow labels. */
.about{display:block}
.about-body{max-width:980px;margin-inline:auto}
.tools-inner h2,.journey-intro h2{margin-top:0}
.contact-top{justify-content:flex-end}

/* Keep each headline sentence on one line within its own column. */
.hero-main{container-type:inline-size;min-width:0}
.hero .hero-main h1,html[lang=ja] .hero .hero-main h1{font-size:clamp(1rem,8.3cqw,3.4rem);line-height:1.2;letter-spacing:-.045em}
.hero .hero-main h1>span{display:block;white-space:nowrap}
.hero .hero-main .hero-second{margin-top:8px}

/* Direct profile and resume access beneath the landing introduction. */
.hero-badges{display:flex;flex-wrap:wrap;gap:12px;margin-top:25px}
.hero-badge{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:11px 17px;border:1px solid var(--ink);border-radius:12px;font-size:14px;font-weight:500;line-height:1.4;transition:background .2s,border-color .2s}
.hero-badge--github{background:var(--ink);color:#fff}
.hero-badge--github img{width:20px;height:20px;filter:brightness(0) invert(1)}
.hero-badge--github:hover{background:var(--primary);border-color:var(--primary)}
.hero-badge--resume{background:rgba(255,255,255,.55);border-color:#b9c8e3}
.hero-badge--resume:hover{background:#e3edfc;border-color:var(--primary)}
.badge-format{font-size:10px;letter-spacing:.04em;color:var(--muted);padding:2px 5px;border-radius:4px;background:#e4eaf7}
@media(max-width:600px){.hero-badges{gap:10px}.hero-badge{padding:10px 13px;font-size:13px}}

.hello-sticker .sticker-question{max-width:110px;padding:0 8px;font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.025em;text-align:center;text-wrap:balance}
@media(max-width:1100px){.hello-sticker .sticker-question{font-size:15px;max-width:100px}}
@media(max-width:600px){.hello-sticker .sticker-question{font-size:14px;max-width:95px}}

/* A small, conversational note pointing back toward the portrait. */
.hello-sticker{width:174px;height:auto;min-height:108px;padding:20px 16px;top:-18px;right:-26px;border-radius:28px 30px 28px 10px;transform:rotate(6deg);border:0;box-shadow:0 4px 0 #141b4112;z-index:1}
.hello-sticker::after{content:"";position:absolute;left:18px;bottom:-17px;width:27px;height:23px;background:var(--periwinkle);clip-path:polygon(0 0,100% 0,0 100%)}
.hello-sticker .sticker-question{max-width:140px;padding:0;font-size:17px;line-height:1.35}
@media(max-width:1100px){.hello-sticker{width:152px;min-height:98px;padding:17px 14px;right:-16px}.hello-sticker .sticker-question{font-size:16px;max-width:124px}}
@media(max-width:600px){.hello-sticker{width:142px;min-height:90px;padding:15px 12px;right:-12px;top:-18px}.hello-sticker .sticker-question{font-size:15px;max-width:118px}}

/* Equal side space keeps the contact label centered in either language. */
.contact-button{position:relative;justify-content:center;align-items:center;gap:0;padding-inline:34px;text-align:center}
.contact-button>span[aria-hidden="true"]{position:absolute;right:13px;top:50%;transform:translateY(-50%);line-height:1}
@media(max-width:600px){.contact-button{padding-inline:28px}.contact-button>span[aria-hidden="true"]{right:10px}}

.hero-bottom p{font-size:19px;line-height:1.7;max-width:440px}
@media(max-width:600px){.hero-bottom p{font-size:17px;line-height:1.65}}

/* Let the introduction use the full text column. */
.hero-bottom{display:block;margin-top:36px}
.hero-bottom p{max-width:100%;line-height:1.8}
.hero-bottom p br{display:block;content:"";margin-top:12px}
.hero-badges{margin-top:28px}
@media(max-width:600px){.hero-bottom{margin-top:28px}.hero-bottom p{line-height:1.75}}

.learning-progress{margin-top:30px;padding-top:23px;border-top:1px solid rgba(48,107,172,.16)}
.learning-progress h2{font-size:12px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 13px}
.learning-cards{display:flex;flex-wrap:wrap;gap:12px}
.learning-card{display:flex;align-items:center;gap:12px;flex:1 1 190px;padding:14px;border:1px solid rgba(48,107,172,.16);border-radius:15px;background:rgba(152,185,242,.13)}
.learning-card--jlpt{background:rgba(145,142,244,.11);border-color:rgba(145,142,244,.22)}
.learning-logo{display:flex;align-items:center;justify-content:center;width:72px;height:48px;flex-shrink:0;background:rgba(255,255,255,.8);border-radius:9px;padding:7px}
.learning-logo img{width:100%;height:100%;object-fit:contain}
.learning-card h3{margin:0;font-size:15px;line-height:1.4;font-weight:600;letter-spacing:-.02em}
.learning-status{display:flex;align-items:center;gap:6px;margin-top:5px;font-size:12px;color:var(--muted)}
.learning-status::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ocean)}
.learning-card--jlpt .learning-status::before{background:var(--periwinkle)}

.projects>.section-top{border-top:1px solid var(--line);padding-top:24px}

.projects{padding-top:56px}
@media(max-width:600px){.projects{padding-top:36px}}

.badge-note .qualification-date{display:block;font-size:12px;color:var(--muted);letter-spacing:0;margin:0 0 11px;line-height:1.4}
@media(max-width:600px){.badge-note .qualification-date{font-size:11px}}