:root{--color-text-primary:#222;--color-text-secondary:#333;--color-text-tertiary:#444;--color-text-muted:#666;--color-text-light:#888;--color-bg-primary:#fff;--color-bg-secondary:#f5f5f5;--color-bg-tertiary:#f8f8f8;--color-bg-overlay:#f0f0f0;--color-border-primary:#ddd;--color-border-secondary:#ccc;--color-border-tertiary:#bbb;--color-border-active:#aaa;--color-accent-primary:#111;--color-accent-secondary:#000;--font-size-xs:0.75rem;--font-size-sm:0.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:2rem;--font-size-4xl:2.5rem;--font-size-hero-primary:clamp(2rem,5vw,3.5rem);--font-size-hero-secondary:clamp(1.5rem,4vw,2.5rem);--font-size-section-title:clamp(1.25rem,3vw,1.5rem);--font-size-responsive-base:clamp(1rem,2vw,1.2rem);--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--line-height-tight:1.25;--line-height-normal:1.5;--line-height-relaxed:1.6;--line-height-loose:1.8;--space-xs:0.25rem;--space-sm:0.5rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:2.5rem;--space-3xl:3rem;--space-4xl:4rem;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:20px;--radius-full:50px;--shadow-sm:0 1px 2px rgba(0,0,0,.05);--shadow-md:0 4px 6px rgba(0,0,0,.1);--shadow-lg:0 10px 15px rgba(0,0,0,.1);--shadow-hover:0 4px 12px rgba(0,0,0,.1);--transition-fast:0.15s ease;--transition-base:0.3s ease;--transition-slow:0.6s ease;--transition-slower:0.8s ease;--easing-linear:linear;--easing-ease:ease;--easing-ease-in:ease-in;--easing-ease-out:ease-out;--easing-ease-in-out:ease-in-out;--easing-smooth:cubic-bezier(0.25,0.46,0.45,0.94);--easing-bounce:cubic-bezier(0.68,-0.55,0.265,1.55);--z-dropdown:1000;--z-sticky:1020;--z-fixed:1030;--z-modal-backdrop:1040;--z-modal:1050;--z-popover:1060;--z-tooltip:1070;--container-sm:640px;--container-md:768px;--container-lg:1024px;--container-xl:1200px;--container-2xl:1400px;--breakpoint-sm:640px;--breakpoint-md:768px;--breakpoint-lg:1024px;--breakpoint-xl:1280px;--breakpoint-2xl:1536px;--font-family-sans:"MyLatin","MyJapanese",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--font-family-mono:"SF Mono",Monaco,"Cascadia Code","Roboto Mono",Consolas,"Courier New",monospace;--gradient-text-primary:linear-gradient(135deg,var(--color-text-primary),var(--color-text-secondary),var(--color-text-primary));--gradient-text-hero:linear-gradient(45deg,#222,#444,#222);--gradient-shimmer:linear-gradient(90deg,transparent,hsla(0,0%,100%,.4),transparent);--gradient-shimmer-dark:linear-gradient(90deg,transparent,hsla(0,0%,100%,.2),transparent)}.animate-fade-in{opacity:0;animation:fadeIn var(--transition-slow) var(--easing-smooth) forwards}.animate-fade-in-up{opacity:0;transform:translateY(20px);animation:fadeInUp var(--transition-slow) var(--easing-smooth) forwards;will-change:opacity,transform}.animate-fade-in-down{opacity:0;transform:translateY(-20px);animation:fadeInDown var(--transition-slow) var(--easing-smooth) forwards;will-change:opacity,transform}.animate-slide-in-left{opacity:0;transform:translateX(-20px);animation:slideInLeft var(--transition-base) var(--easing-smooth) forwards;will-change:opacity,transform}.animate-slide-in-right{opacity:0;transform:translateX(20px);animation:slideInRight var(--transition-base) var(--easing-smooth) forwards;will-change:opacity,transform}.animate-scale-in{opacity:0;transform:scale(.9);animation:scaleIn var(--transition-base) var(--easing-smooth) forwards;will-change:opacity,transform}.animate-blur-in{opacity:0;filter:blur(2px);animation:blurIn var(--transition-slow) var(--easing-smooth) forwards;will-change:opacity,filter}.animate-container-enter{opacity:0;transform:translateY(20px) scale(.98);filter:blur(2px);animation:containerEnter var(--transition-slow) var(--easing-smooth) forwards;will-change:opacity,transform,filter}.animate-divider-expand{opacity:0;transform:scaleX(0);transform-origin:left;animation:dividerExpand var(--transition-slow) var(--easing-smooth) forwards;will-change:opacity,transform}.animate-bounce-in{opacity:0;transform:translateY(10px) scale(.9);animation:bounceIn .4s var(--easing-bounce) forwards;will-change:opacity,transform}@keyframes fadeIn{to{opacity:1}}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}@keyframes fadeInDown{to{opacity:1;transform:translateY(0)}}@keyframes slideInLeft{to{opacity:1;transform:translateX(0)}}@keyframes slideInRight{to{opacity:1;transform:translateX(0)}}@keyframes scaleIn{to{opacity:1;transform:scale(1)}}@keyframes blurIn{to{opacity:1;filter:blur(0)}}@keyframes containerEnter{0%{opacity:0;transform:translateY(20px) scale(.98);filter:blur(2px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}@keyframes dividerExpand{0%{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}@keyframes bounceIn{0%{opacity:0;transform:translateY(10px) scale(.9)}70%{transform:translateY(-2px) scale(1.05)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes shimmer{0%{left:-100%}to{left:100%}}.animate-delay-75{animation-delay:75ms}.animate-delay-100{animation-delay:.1s}.animate-delay-150{animation-delay:.15s}.animate-delay-200{animation-delay:.2s}.animate-delay-300{animation-delay:.3s}.animate-delay-500{animation-delay:.5s}.animate-delay-700{animation-delay:.7s}.animate-delay-1000{animation-delay:1s}.animate-duration-75{animation-duration:75ms}.animate-duration-100{animation-duration:.1s}.animate-duration-150{animation-duration:.15s}.animate-duration-200{animation-duration:.2s}.animate-duration-300{animation-duration:.3s}.animate-duration-500{animation-duration:.5s}.animate-duration-700{animation-duration:.7s}.animate-duration-1000{animation-duration:1s}.hover-lift{transition:transform var(--transition-base)}.hover-lift:hover{transform:translateY(-2px)}.hover-scale{transition:transform var(--transition-base)}.hover-scale:hover{transform:scale(1.05)}.hover-shimmer{position:relative;overflow:hidden}.hover-shimmer:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:var(--gradient-shimmer);transition:left .5s ease}.hover-shimmer:hover:before{left:100%}.will-change-transform{will-change:transform}.will-change-opacity{will-change:opacity}.will-change-auto{will-change:auto}@media (prefers-reduced-motion:reduce){.animate-blur-in,.animate-bounce-in,.animate-container-enter,.animate-divider-expand,.animate-fade-in,.animate-fade-in-down,.animate-fade-in-up,.animate-scale-in,.animate-slide-in-left,.animate-slide-in-right{animation:none;opacity:1;transform:none;filter:none}.hover-lift:hover,.hover-scale:hover{transform:none}.hover-shimmer:before{display:none}}:root{--color-page-bg:#fff;--color-text:#222;--color-card-bg:#fff;--color-card-text:#111;--color-shadow:rgba(0,0,0,.1)}*,:after,:before{margin:0;padding:0;box-sizing:border-box}@font-face{font-family:MyLatin;src:local("Helvetica Neue"),local("Arial");unicode-range:u+00??,u+0100-024f}@font-face{font-family:MyJapanese;src:local("Hiragino Kaku Gothic Pro"),local("Meiryo");unicode-range:u+30??,u+4e00-9fff,u+ff00-ffef}body{font-family:MyLatin,MyJapanese,sans-serif;background-color:var(--color-page-bg);color:var(--color-text);line-height:1.6;transition:background-color .6s ease;font-size:16px}.header{padding:1rem;min-height:10vh}.header,.hero{width:100%;display:flex;flex-direction:column;justify-content:center;background-color:var(--color-page-bg)}.hero{padding:2rem 1rem;height:100vh;position:relative;overflow:hidden;animation:heroHeightShrink 3s cubic-bezier(.16,0,.41,1) forwards;animation-delay:2s}.hero:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 50% 50%,rgba(0,0,0,.01) 0,transparent 50%);animation:heroBackgroundPulse 8s ease-in-out infinite;pointer-events:none}.hero-content{text-align:left;padding:2rem;max-width:1200px;margin:0 auto;opacity:0;transform:translateY(30px) scale(.95);animation:heroEnhancedEntry 1.2s cubic-bezier(.25,.46,.45,.94) forwards;animation-delay:.3s;position:relative;z-index:1;transition:transform .3s ease}.hero-content h2{font-size:clamp(2rem,5vw,2.5rem);font-weight:600;letter-spacing:.01em;animation:heroTextReveal 1s cubic-bezier(.25,.46,.45,.94) forwards;animation-delay:.8s;background:linear-gradient(45deg,#222,#444,#222);background-size:200% 200%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation-fill-mode:both}.hero-content h2,.hero-content h3{margin-bottom:1rem;opacity:0;transform:translateY(20px);cursor:text;transition:all .3s ease}.hero-content h3{font-size:clamp(1rem,4vw,1.5rem);font-weight:400;letter-spacing:0;animation:heroTextReveal 1s cubic-bezier(.25,.46,.45,.94) forwards;animation-delay:1.1s;color:#333}.role{font-size:clamp(1rem,2vw,1.2rem);opacity:0;transform:translateY(15px);animation:heroTextReveal .8s cubic-bezier(.25,.46,.45,.94) forwards;animation-delay:1.4s;cursor:default;transition:all .3s ease;color:#666;position:relative;display:inline-block}.role:after{content:"";position:absolute;bottom:-2px;left:0;width:0;height:1px;background:linear-gradient(90deg,#888,transparent);transition:width .5s ease}.hero-cta{display:flex;gap:2rem;align-items:center;margin-top:3rem;opacity:0;transform:translateY(20px);animation:heroTextReveal 1s cubic-bezier(.25,.46,.45,.94) forwards;animation-delay:1.7s;flex-wrap:wrap}.cta-primary{display:inline-block;padding:1rem 2rem;background-color:#06c;color:#fff;text-decoration:none;border-radius:8px;font-weight:500;font-size:1.1rem;transition:all .3s ease;border:2px solid transparent;box-sizing:border-box}.cta-primary:hover{border:2px solid #000}.cta-secondary{color:#222;text-decoration:none;font-weight:400;font-size:1.1rem;transition:all .3s ease;position:relative}.cta-secondary:after{content:"";position:absolute;bottom:-2px;left:0;width:0;height:1px;background:#06c;transition:width .3s ease}.cta-secondary:hover:after{width:100%}.cta-secondary:hover{color:#06c;transform:translateX(4px)}@media (max-width:768px){.hero-cta{flex-direction:column;gap:1.5rem;align-items:stretch;margin-top:2rem}.cta-primary{text-align:center;padding:1.2rem 2rem;font-size:1.2rem}.cta-secondary{text-align:center;font-size:1.1rem}}@media (max-width:480px){.hero-cta{margin-top:1.5rem}.cta-primary{padding:1rem 1.5rem;font-size:1.1rem}}.project-cards-container{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:2rem;gap:2rem;max-width:1200px;margin:4rem auto;padding:0 1rem;opacity:0;transform:translateY(50px);animation:projectCardsReveal 1.5s cubic-bezier(.25,.46,.45,.94) forwards;animation-delay:2s}.section-container{max-width:1200px;margin:0 auto;padding:1rem}.section-rule{height:2px;background:#111;width:100%;margin-bottom:1rem}@media (max-width:1024px){.project-cards-container{grid-template-columns:repeat(2,1fr);gap:1.5rem}}@media (max-width:768px){.project-cards-container{grid-template-columns:1fr;gap:1.5rem;margin:2rem auto}}.header-inner{display:flex;justify-content:space-between;align-items:center;padding:1rem;max-width:1200px;margin:0 auto;width:100%}@keyframes heroEnhancedEntry{0%{opacity:0;transform:translateY(30px) scale(.95);filter:blur(2px)}50%{opacity:.8;transform:translateY(15px) scale(.98);filter:blur(1px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}@keyframes heroBackgroundPulse{0%,to{opacity:.3;transform:scale(1) rotate(0deg)}50%{opacity:.5;transform:scale(1.05) rotate(.5deg)}}@keyframes heroHeightShrink{0%{height:100vh}to{height:40vh}}@keyframes projectCardsReveal{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}@keyframes heroTextReveal{0%{opacity:0;transform:translateY(20px);filter:blur(1px)}60%{opacity:.8;transform:translateY(5px);filter:blur(.5px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}@keyframes slideUpFadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.logo{font-size:clamp(1rem,3vw,1.25rem);cursor:pointer;transition:color .3s ease}.logo:hover{color:#888}.logo .sub{display:block;font-size:clamp(.8rem,2vw,1rem);opacity:.2}.header-inner .logo{margin-right:auto}.header-inner .main-nav ul{display:flex;gap:2rem;list-style:none}.header-inner .main-nav a{text-decoration:none;color:var(--color-text);font-weight:500;position:relative;transition:color .3s ease}.header-inner .main-nav a:after{content:"";position:absolute;width:0;height:1px;bottom:-2px;left:0;background-color:#888;transition:width .3s ease}.header-inner .main-nav a:hover{color:#888}.header-inner .main-nav a:hover:after{width:100%}.header-inner .main-nav a.inactive{color:#aaa}.hamburger,.mobile-nav{display:none}.hamburger{flex-direction:column;justify-content:space-around;width:25px;height:19px;background:transparent;border:none;cursor:pointer;padding:0;z-index:1000}.hamburger span{width:100%;height:2px;background:#222;border-radius:2px;transition:all .3s ease;transform-origin:center}.hamburger.active span:first-child{transform:rotate(45deg) translate(6px,6px)}.hamburger.active span:nth-child(2){opacity:0}.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(6px,-6px)}.mobile-menu{position:fixed;top:0;right:-100%;width:100%;height:100vh;background:hsla(0,0%,100%,.98);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:right .3s ease;z-index:999;display:flex;align-items:center;justify-content:center}.mobile-menu.open{right:0}.mobile-close-btn{position:absolute;top:1.59375rem;right:1.78125rem;width:50px;height:50px;background:transparent;border:2px solid #222;border-radius:50%;cursor:pointer;z-index:1001;display:flex;align-items:center;justify-content:center;font-size:2rem;color:#222;transition:all .25s ease}.mobile-close-btn:hover{background:#222;color:#fff;transform:scale(1.05)}.mobile-close-btn span{line-height:1;font-weight:200}.mobile-nav-list{list-style:none;padding:0;margin:0;text-align:center;display:flex;flex-direction:column;gap:2rem}.mobile-nav-item{opacity:0;transform:translateY(20px);animation:mobileNavItemReveal .3s ease forwards}.mobile-nav-item:first-child{animation-delay:.1s}.mobile-nav-item:nth-child(2){animation-delay:.2s}.mobile-nav-item:nth-child(3){animation-delay:.3s}.mobile-nav-item:nth-child(4){animation-delay:.4s}@keyframes mobileNavItemReveal{to{opacity:1;transform:translateY(0)}}.mobile-nav-link{font-size:1.5rem;font-weight:500;color:#222;text-decoration:none;transition:color .2s ease}.mobile-nav-link:hover{color:#666}.mobile-lang-switch{margin-top:1rem}.mobile-lang-switch a{font-size:1.2rem;padding:.5rem 1rem}.card{background-color:var(--color-card-bg);color:var(--color-card-text);max-width:800px;padding:2rem;border-radius:8px}.card,.notebook-container{width:90%;margin:3rem auto;text-align:center}.notebook-container{max-width:900px}.notebook-container iframe{width:100%;height:auto;aspect-ratio:16/9}#notebook-shannon{max-width:900px;width:90%;margin:3rem auto}#notebook-shannon iframe{width:100%;aspect-ratio:16/9;border:none}.about-main{max-width:1200px;width:90%;margin:0 auto;padding:4rem 1rem;color:var(--color-text)}.about-intro{text-align:left;margin-bottom:4rem}.about-intro .about-inner{display:grid;grid-template-columns:minmax(auto,15rem) 1fr;grid-gap:2rem;gap:2rem;align-items:start;margin:0 auto;max-width:90%}.about-photo{width:100%;height:auto;border-radius:0;object-fit:cover;padding:.5rem;opacity:0;transform:translateX(-20px);animation:slideInFromLeft 1s ease-out forwards;animation-delay:.3s}@keyframes slideInFromLeft{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.about-text p{font-size:clamp(1.2rem,3vw,2rem);margin-bottom:1rem;line-height:1.5;color:#333;opacity:0;transform:translateY(20px);animation:slideUpFadeIn .8s ease-out forwards}.about-text .headline{color:#111;margin-bottom:0;animation-delay:.5s}.about-text .subhead{font-size:clamp(1rem,2vw,1.2rem);color:#aaa;margin-bottom:1.5rem;font-weight:300;animation-delay:.7s}.about-text .lead{color:#222;margin-bottom:2.5rem;font-size:clamp(1rem,2vw,1.15rem);line-height:1.8;font-weight:500;padding-bottom:4rem;animation-delay:.9s}.about-text .description{color:#444;margin-bottom:0;font-size:clamp(.9rem,1.5vw,1rem);font-weight:500;line-height:1.5}.what-i-do{margin-top:4rem;width:100%}.what-i-do>h2{display:none}.what-i-do h2{text-align:center;margin-bottom:2rem}.what-grid{display:grid;grid-template-columns:auto 1fr 1fr;grid-gap:2rem;gap:2rem;align-items:start;font-weight:500;letter-spacing:.03em}.what-grid .label{font-weight:500;padding-top:0;font-size:clamp(1.5rem,3vw,2rem)}.what-grid .list-en,.what-grid .list-ja{list-style:none;padding:0 2rem 3rem}.what-grid .list-en li,.what-grid .list-ja li{margin-bottom:.75rem;font-size:clamp(.85rem,1.5vw,.95rem)}.education{margin-top:4rem;width:100%}.education>h2{display:none}.education h2{text-align:center;margin-bottom:2rem}.education-grid{display:grid;grid-template-columns:auto 1fr 1fr;grid-gap:2rem;gap:2rem;align-items:start;font-weight:300;letter-spacing:.1em}.education-grid .label{font-weight:300;padding-top:0;font-size:clamp(1.5rem,3vw,2rem)}.education-grid .list-en,.education-grid .list-ja{list-style:none;padding:0 2rem 3rem}.education-grid .list-en li,.education-grid .list-ja li{margin-bottom:.75rem;font-size:clamp(.85rem,1.5vw,.95rem)}.what-i-use{margin-top:4rem;width:100%}.what-i-use>h2{display:none}.what-i-use h2{text-align:center;margin-bottom:2rem}.what-i-use-grid{display:grid;grid-template-columns:auto 1fr 1fr;grid-gap:2rem;gap:2rem;align-items:start;font-weight:300;letter-spacing:0}.what-i-use-grid .label{font-weight:300;padding-top:0;font-size:clamp(1.5rem,3vw,2rem)}.what-i-use-grid .list-en,.what-i-use-grid .list-ja{list-style:none;padding:0 2rem 3rem}.what-i-use-grid .list-en li,.what-i-use-grid .list-ja li{margin-bottom:.75rem;font-size:clamp(.85rem,1.5vw,.95rem)}@media (max-width:768px){.about-intro .about-inner{grid-template-columns:1fr;text-align:center}.about-photo{max-width:50%;margin:0 auto 2rem}.education-grid,.what-grid,.what-i-use-grid{grid-template-columns:1fr;text-align:center;gap:1rem}.education-grid .label,.what-grid .label,.what-i-use-grid .label{display:block;margin-bottom:1rem}.education-grid .list-en,.education-grid .list-ja,.what-grid .list-en,.what-grid .list-ja,.what-i-use-grid .list-en,.what-i-use-grid .list-ja{padding:0 1rem}.header-inner{flex-direction:column;gap:1rem}.header-inner .main-nav ul{gap:1rem}.desktop-nav{display:none}.mobile-nav{display:block}.hamburger{display:flex}.header-inner{justify-content:space-between;flex-direction:row;align-items:center}.logo{font-size:1.1rem}}@media (max-width:480px){.header-inner{padding:.75rem}.logo{font-size:1rem}.mobile-menu{padding:2rem}.mobile-nav-list{gap:1.5rem}.mobile-nav-link{font-size:1.3rem}}.shannon-main{display:flex;flex-direction:column;gap:2rem;padding:1.5rem;max-width:1200px;margin:0 auto;font-family:sans-serif}.shannon-controls{flex:1 1 320px;min-width:280px;max-width:400px}.shannon-visuals{flex:2 1;min-width:0}@media (min-width:768px){.shannon-main{flex-direction:row;align-items:flex-start;padding:2.5rem}.shannon-controls{max-width:400px}.shannon-visuals{margin-left:2rem}}.shannon-add-button{width:100%;padding:.75rem;background:transparent;color:#111;border:2px solid #111;border-radius:4px;cursor:pointer;margin-bottom:1rem;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.95rem;font-weight:500}.shannon-add-button:hover:not(:disabled){background:#111;color:#fff}.shannon-add-button:disabled{opacity:.6;cursor:not-allowed}.shannon-remove-button{padding:.25rem .5rem;background:#f44;color:#fff;border:none;border-radius:4px;cursor:pointer;margin-left:1rem;font-size:.8rem}.shannon-remove-button:disabled{opacity:.6;cursor:not-allowed}.shannon-control-group{margin-bottom:1rem;background:#f3f3f3;padding:.75rem;border-radius:8px}.shannon-slider{width:100%;height:4px;-webkit-appearance:none;background:#ddd;border-radius:2px;outline:none;opacity:.7;transition:opacity .2s}.shannon-result{background:#f0f0f0;padding:1.25rem;border-radius:8px;margin-top:1rem}.shannon-vis-block{margin-bottom:2rem}.nav-link{position:relative;color:#222;font-weight:500;text-decoration:none;transition:color .2s}.nav-link:after{content:"";display:block;position:absolute;left:0;bottom:-2px;width:100%;height:2px;background:#222;transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.4,0,.2,1)}.nav-link.active:after{transform:scaleX(1)}