@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--ink:#171d2b;--muted:#5e6573;--blue:#2546ed;--line:#dce0e7;--paper:#fff;--wash:#f4f6f9;--display:'Space Grotesk',sans-serif;--body:'DM Sans',sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;color:var(--ink);background:var(--paper);font:16px/1.65 var(--body)}button,a,summary{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,summary:focus-visible,[role=button]:focus-visible{outline:3px solid #7491ff;outline-offset:5px}button:disabled{cursor:default}[hidden]{display:none!important}h1,h2,h3,h4,p{margin:0}h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.12}p+p{margin-top:16px}::selection{background:#c9d3ff}.section-wrap,.header,.footer{width:min(1216px,calc(100% - 96px));margin-inline:auto}.header{height:100px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{display:flex;gap:12px;align-items:center;font-weight:600}.brand-mark{font-family:var(--display);color:var(--blue);font-size:20px;letter-spacing:-2px}.header nav{display:flex;align-items:center;gap:34px;font-size:14px}.header nav a:hover,.hero-actions a:hover,.about-links a:hover{color:var(--blue)}.nav-contact{border-bottom:1px solid var(--ink)}.skip-link{position:fixed;top:-100px;left:16px;background:var(--blue);color:white;padding:12px;z-index:20}.skip-link:focus{top:16px}.hero{padding-top:34px;padding-bottom:66px}.hero-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;letter-spacing:.08em}.hero-meta span:last-child{letter-spacing:0;font-size:14px}.hero h1{font-size:clamp(70px,11.7vw,168px);letter-spacing:-.065em;line-height:1.18;margin-top:23px;white-space:nowrap}.name-dot{color:var(--blue)}.hero-intro{display:grid;grid-template-columns:1fr 1fr;gap:80px;margin-top:34px;align-items:start}.hero-intro h2{font-size:34px;letter-spacing:-.04em}.hero-intro p{max-width:530px;color:var(--muted);line-height:1.65}.hero-intro p+p{margin-top:10px}.hero-actions{display:flex;gap:30px;margin-top:22px;font-size:14px}.hero-actions a{border-bottom:1px solid var(--ink);padding-bottom:3px}.hero-actions a:first-child{color:var(--blue);border-color:var(--blue)}.work-heading{border-top:1px solid var(--ink);border-bottom:1px solid var(--line);padding:22px 0;display:flex;justify-content:space-between;align-items:center;gap:24px}.work-heading h2{font-size:20px}.project-tabs{display:flex;gap:8px}.project-tabs button{border:0;background:none;padding:9px 17px;color:var(--muted);font-size:14px;border-radius:4px}.project-tabs [aria-selected=true]{background:var(--ink);color:#fff}.project-tabs button:hover{background:var(--wash);color:var(--ink)}.project-tabs [aria-selected=true]:hover{background:var(--ink);color:#fff}.feature{display:grid;grid-template-columns:1fr 1fr;gap:80px;padding:46px 0;min-height:570px;align-items:start}.project-kicker,.eyebrow{font-size:12px;letter-spacing:.09em;font-weight:500;color:var(--muted)}.feature-copy{padding-top:10px}.feature h3{font-size:43px;letter-spacing:-.045em;margin:17px 0 22px}.feature-copy>p:not(.project-kicker){color:var(--muted);max-width:510px}.feature-copy .feature-lead{font-size:18px;color:var(--ink)!important}.feature-details{margin-top:24px;border-top:1px solid var(--line)}summary{list-style:none;cursor:pointer;font-size:14px;padding:17px 0;display:flex;justify-content:space-between;gap:15px;align-items:center}summary::-webkit-details-marker{display:none}summary span{font-size:22px;font-weight:400;line-height:1}details[open]>summary span{transform:rotate(45deg)}summary:hover{color:var(--blue)}.expanded-grid{display:grid;gap:20px;padding:4px 0 22px}.expanded-grid h4{font-size:14px;font-weight:600;margin-bottom:5px}.expanded-grid p{font-size:14px;color:var(--muted)}.tool-section{padding:30px 0 72px}.section-heading h2{font-size:26px;letter-spacing:-.03em}.section-heading>p{color:var(--muted);margin-top:12px}.tool-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 64px;margin-top:30px}.tool{padding:24px 0;border-top:1px solid var(--line)}.tool h3{font-size:20px;letter-spacing:-.02em;margin:10px 0}.tool>p,.tool details>p{font-size:14px;color:var(--muted)}.tool summary{padding:14px 0 0}.tool details>p{padding:13px 0 5px}.experience,.about{padding:58px 0 65px;border-top:1px solid var(--ink)}.section-intro h2{font-size:30px;letter-spacing:-.03em}.experience-list{margin-top:28px}.experience-entry{display:grid;grid-template-columns:280px 1fr;gap:48px;padding:25px 0;border-top:1px solid var(--line)}.experience-date{font-size:14px;color:var(--ink)}.experience-date span{display:block;font-size:12px;color:var(--muted);margin-top:6px}.experience-entry h3{font-size:22px;letter-spacing:-.02em}.experience-company{font-size:14px;margin-top:7px}.experience-company span{color:var(--muted);font-size:12px;margin-left:12px}.experience-entry p:last-child:not(.experience-company){color:var(--muted);font-size:14px;max-width:710px;margin-top:12px}.about-body{display:grid;grid-template-columns:1fr 1fr;gap:80px;margin-top:30px}.about-copy p{color:var(--muted);max-width:540px}.about-links{display:flex;gap:30px;font-size:14px;margin-top:24px}.about-links a{border-bottom:1px solid var(--line)}.education{padding-left:50px;border-left:1px solid var(--line)}.education>div{position:relative;margin-top:25px;padding-right:45px}.education h3{font-size:19px;line-height:1.3;letter-spacing:-.02em}.education p{font-size:14px;color:var(--muted);margin-top:5px}.education-year{position:absolute;right:0;top:3px;font-size:12px;color:var(--muted)}.contact{padding:48px 0;border-top:1px solid var(--ink)}.contact-main{display:flex;justify-content:space-between;gap:40px;align-items:center;margin-top:20px}.contact h2{font-size:48px;letter-spacing:-.04em}.contact-main p{color:var(--muted)}.contact-button{display:inline-flex;background:var(--blue);color:#fff;padding:10px 22px;border-radius:4px;margin-top:20px;font-size:14px}.email-link{display:block;font-size:14px;margin-top:12px}.email-link:hover{text-decoration:underline}.footer{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:30px 0;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}.footer .brand{color:var(--ink)}.footer p{display:none}
@keyframes flow{to{stroke-dashoffset:-18}}@keyframes ring{from{stroke-opacity:.2}to{stroke-opacity:1}}@keyframes readout{from{opacity:.4;transform:translateY(3px)}to{opacity:1;transform:none}}
@media(min-width:1500px){.hero h1{font-size:168px}}
@media(max-width:1000px){.section-wrap,.header,.footer{width:calc(100% - 64px)}.hero-intro,.feature,.about-body{gap:40px}.feature h3{font-size:34px}.feature-visual{padding:18px}.experience-entry{grid-template-columns:210px 1fr;gap:30px}.ai-actions{flex-wrap:wrap}.ai-actions button{flex-basis:40%}.visual-heading{flex-wrap:wrap}.education{padding-left:30px}}
@media(max-width:700px){.section-wrap,.header,.footer{width:calc(100% - 40px)}.header{height:78px}.header nav{gap:18px}.header nav a[href='#about']{display:none}.brand{font-size:14px;gap:8px}.header nav{font-size:12px}.nav-contact{display:none}.hero{padding-top:27px;padding-bottom:42px}.hero-meta{font-size:12px;letter-spacing:0;gap:20px}.hero-meta span:last-child{font-size:12px}.hero h1{font-size:clamp(48px,12.7vw,88px);margin-top:24px;letter-spacing:-.065em}.hero-intro{grid-template-columns:1fr;gap:22px;margin-top:30px}.hero-intro h2{font-size:26px}.hero-intro p{font-size:16px}.hero-actions{margin-top:20px}.work-heading{align-items:flex-start;flex-direction:column;gap:16px;padding:22px 0 16px}.project-tabs{width:100%;gap:3px;justify-content:space-between}.project-tabs button{padding:10px 9px;font-size:12px;min-height:44px}.feature{grid-template-columns:1fr;gap:26px;padding:24px 0 35px;min-height:0}.feature-copy{padding-top:0}.feature h3{font-size:36px;margin:15px 0 20px}.feature-details{margin-top:18px}.feature-visual{padding:20px}.visual-readout{min-height:124px}.local-boundary{padding:22px 12px 16px}.ai-actions{flex-wrap:wrap}.ai-actions button{font-size:14px;padding:10px 5px;flex-basis:45%;min-height:44px}.visual-heading{font-size:12px;gap:9px}.visual-heading span:last-child{font-size:12px}.rf-node text,.rf-center text{font-size:28px}.tool-section{padding-top:10px;padding-bottom:45px}.section-heading h2{font-size:24px}.section-heading>p{font-size:14px}.tool-grid{grid-template-columns:1fr;margin-top:22px}.tool{padding:23px 0}.experience,.about{padding:36px 0 42px}.section-intro h2{font-size:27px}.experience-entry{grid-template-columns:1fr;gap:12px;padding:22px 0}.experience-date{font-size:12px}.experience-date span{display:inline;margin-left:12px}.experience-entry h3{font-size:20px}.experience-company{margin-top:5px}.about-body{grid-template-columns:1fr;gap:35px;margin-top:24px}.education{border-left:0;border-top:1px solid var(--line);padding:25px 0 0}.contact{padding:36px 0}.contact-main{flex-direction:column;align-items:flex-start;gap:23px}.contact h2{font-size:40px}.footer{align-items:flex-start;font-size:11px;gap:16px}.footer .brand-mark{display:none}.footer .brand{font-size:12px}.desktop-break{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

@media(max-width:360px){.rf-node text,.rf-center text{font-size:30px}}

/* Name interaction: preserve the semantic heading and a readable no-JS fallback. */
#hero-title{position:relative;isolation:isolate}
.tech-text{letter-spacing:normal;--tech-pad:32px;position:absolute;inset:calc(-1 * var(--tech-pad));display:block;touch-action:pan-y;user-select:none;z-index:1}
.tech-text-canvas{display:block;width:100%;height:100%}
.tech-text-ready .name-fallback{opacity:0}
@media(prefers-reduced-motion:reduce){.tech-text{display:none}.tech-text-ready .name-fallback{opacity:1}}
@media(max-width:700px){.tech-text{--tech-pad:16px;inset:-32px calc(-1 * var(--tech-pad))}}

/* Engineering projects: reuse the portfolio's typography and quiet blue accents. */
.systems-section{padding:16px 0 64px}
.systems-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:30px;align-items:start}
.system-card{padding:30px;border:1px solid var(--line);border-top:3px solid var(--blue);border-radius:4px;background:var(--paper)}
.system-card h3{font-size:32px;letter-spacing:-.035em;margin:18px 0}
.system-card>p:not(.project-kicker){font-size:15px;color:var(--muted)}
.system-tags{display:flex;flex-wrap:wrap;gap:7px;margin:24px 0}
.system-tags span{padding:4px 9px;background:var(--wash);color:var(--muted);border-radius:3px;font-size:12px}
.system-card details{border-top:1px solid var(--line)}
.system-card summary{padding:16px 0 0;font-size:14px}
.system-details{padding-top:18px}
.system-details h4{font-size:15px;margin:0 0 7px}
.system-details p{font-size:14px;color:var(--muted)}
.system-details p+h4{margin-top:18px}
.project-link{display:inline-flex;gap:14px;color:var(--blue);font-size:14px;border-bottom:1px solid var(--blue);padding-bottom:3px;margin-top:24px}
.project-link:hover{color:var(--ink);border-color:var(--ink)}
@media(max-width:1000px){.systems-grid{gap:24px}.system-card{padding:24px}.system-card h3{font-size:28px}}
@media(max-width:700px){.systems-section{padding:10px 0 42px}.systems-grid{grid-template-columns:1fr;gap:20px;margin-top:24px}.system-card{padding:24px 20px}.system-card h3{font-size:28px}.system-card>p:not(.project-kicker){font-size:16px}.system-card summary{min-height:44px}.hero-meta span:first-child{max-width:60%}}
@media(max-width:360px){.project-tabs button{font-size:11px;padding-inline:6px}}

/* React Bits-inspired spotlight: a small composited layer, no blur or WebGL. */
.system-card{position:relative;isolation:isolate;overflow:hidden}
.system-card::before{content:"";position:absolute;left:0;top:0;width:360px;height:360px;z-index:-1;pointer-events:none;opacity:0;background:radial-gradient(circle,rgba(37,70,237,.10),rgba(37,70,237,0) 70%);transform:translate(calc(var(--spot-x,0px) - 180px),calc(var(--spot-y,0px) - 180px));transition:opacity .2s ease}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.system-card.spotlight-active::before{opacity:1}.system-card:hover{border-color:#a9b7ee;border-top-color:var(--blue)}}
.system-card:focus-within{border-color:var(--blue)}

/* Editorial rhythm: bespoke engineering schematics, shared baselines, calm surfaces. */
.systems-grid{align-items:stretch}
.system-card{display:flex;flex-direction:column;border-top-width:1px}
.system-card-head{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:24px}
.system-card-head .project-link{margin:0;font-size:12px;white-space:nowrap;gap:7px;padding:0}
.system-card-head .project-kicker{font-size:11px}
.system-art{margin:-30px -30px 28px;aspect-ratio:2.8;overflow:hidden;border-bottom:1px solid var(--line);flex:none}
.system-art svg{width:100%;height:100%;display:block}
.change-art{background:#f3f6fc}
.agent-art{background:#19243a;border-bottom-color:#19243a}
.system-card .system-tags{margin-top:auto;padding-top:24px}
.system-card h3{font-size:30px;line-height:1.16}
.system-card details{flex:none}
.system-card summary{padding-bottom:2px}
.section-heading h2{font-size:30px;letter-spacing:-.04em}
.systems-section{padding-bottom:72px}
.tool-section{padding-top:0}
.contact h2{font-size:clamp(40px,4.5vw,62px);line-height:1.1}
@media(max-width:1000px){.system-art{margin:-24px -24px 24px}.system-card-head{gap:12px;flex-wrap:wrap}.system-card h3{font-size:28px}}
@media(max-width:700px){.system-art{margin:-24px -20px 24px}.system-card-head{flex-wrap:nowrap}.system-card h3{font-size:28px}.section-heading h2{font-size:26px}.systems-section{padding-bottom:48px}.contact h2{font-size:42px}}
@media(max-width:480px){.hero-meta{flex-direction:column;gap:4px}.hero-meta span:first-child{max-width:none}.hero-meta span:last-child{color:#7a8291}.hero h1{margin-top:34px}.system-card-head{align-items:flex-start}.system-card-head .project-kicker{max-width:75%;line-height:1.6}}
.hero h1{letter-spacing:-.055em}
.experience-entry p:last-child:not(.experience-company){max-width:68ch}
@media(max-width:700px){.tool>p,.tool details>p,.expanded-grid p,.system-details p,.experience-entry p:last-child:not(.experience-company){font-size:16px;line-height:1.65}.system-details h4,.expanded-grid h4{font-size:16px}}
.updated{animation:none}
.rf-connections path.active{animation-iteration-count:3}

/* Motion Prompt #057 · MIT License (c) 2026 Shohei Ohtaki
   https://showheyohtaki.github.io/motion-prompt/#057 — native, input-driven tabs. */
.project-tabs{position:relative;isolation:isolate}
@media(max-width:700px){.project-tabs{justify-content:flex-start;gap:8px}}
.project-tabs button{position:relative;border-radius:3px 3px 0 0;border-bottom:2px solid transparent;transition:color .2s ease,background-color .2s ease}
.project-tabs [aria-selected=true],.project-tabs [aria-selected=true]:hover{color:var(--blue);background:#f1f4ff;border-bottom-color:var(--blue)}
.project-tabs button:hover{background:var(--wash)}
.project-tabs.indicator-ready button{border-bottom-color:transparent}
.project-tabs.indicator-ready::after{content:"";position:absolute;left:0;bottom:0;width:1px;height:2px;background:var(--blue);pointer-events:none;transform-origin:left center;transform:translateX(var(--tab-x,0px)) scaleX(var(--tab-width,1));transition:transform .25s cubic-bezier(.65,0,.35,1)}

/* Motion Prompt #086 · MIT License (c) 2026 Shohei Ohtaki
   https://showheyohtaki.github.io/motion-prompt/#086 — left-in / right-out links. */
.header nav a,.hero-actions a,.about-links a,.project-link,.email-link{position:relative}
.email-link{width:fit-content}
.email-link:hover{text-decoration:none}
.header nav a::after,.hero-actions a::after,.about-links a::after,.project-link::after,.email-link::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--blue);pointer-events:none;transform:scaleX(0);transform-origin:right center;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
@media(hover:hover){.header nav a:hover::after,.hero-actions a:hover::after,.about-links a:hover::after,.project-link:hover::after,.email-link:hover::after{transform:scaleX(1);transform-origin:left center}}
.header nav a:focus-visible::after,.hero-actions a:focus-visible::after,.about-links a:focus-visible::after,.project-link:focus-visible::after,.email-link:focus-visible::after{transform:scaleX(1);transform-origin:left center}

/* Motion Prompt #145 · MIT License (c) 2026 Shohei Ohtaki
   https://showheyohtaki.github.io/motion-prompt/#145 — only the timeline is animated. */
.experience-list{position:relative;isolation:isolate;--spine-x:304px}
.experience-list::before,.experience-list::after{content:"";position:absolute;left:var(--spine-x);top:var(--timeline-top,40px);height:var(--timeline-length,calc(100% - 80px));width:1px;background:var(--line);pointer-events:none;z-index:-1}
.experience-list::after{background:var(--blue);transform:scaleY(var(--timeline-progress,1));transform-origin:center top}
.experience-entry{position:relative;border-top:0;padding:28px 0}
.experience-entry::before{content:"";position:absolute;left:calc(var(--spine-x) - 4.5px);top:35px;width:10px;height:10px;border:1px solid var(--blue);border-radius:50%;background:var(--paper);box-shadow:0 0 0 5px var(--paper);pointer-events:none}
.timeline-enhanced .experience-entry::before{border-color:#bac4d7}
.experience-entry.timeline-reached::before{border-color:var(--blue);background:var(--blue)}
.experience-entry.timeline-current .experience-date{color:var(--blue)}
.experience-date{transition:color .25s ease}
@media(max-width:1000px){.experience-list{--spine-x:224px}}
@media(max-width:700px){.experience-list{--spine-x:5px}.experience-entry{padding:28px 0 28px 28px}.experience-date span{display:block;margin:5px 0 0}.experience-entry::before{top:35px}}
@media(prefers-reduced-motion:reduce){.experience-list::after{transform:none!important}}