:root{--color-bg: hsl(220, 25%, 6%);--color-surface: hsl(220, 20%, 10%);--color-text: hsl(220, 10%, 90%);--color-text-secondary: hsl(220, 8%, 60%);--color-accent: hsl(172, 66%, 44%);--color-accent-hover: hsl(172, 66%, 52%);--color-border: hsl(220, 15%, 18%);--font-sans: "Inter", "Noto Sans JP", system-ui, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, monospace;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 2rem;--text-4xl: 2.5rem;--leading-tight: 1.25;--leading-normal: 1.6;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-6: 1.5rem;--space-8: 2rem;--space-12: 3rem;--space-16: 4rem;--space-20: 5rem;--space-24: 6rem;--max-width-text: 720px;--max-width-layout: 1080px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--transition-fast: .15s ease;--transition-normal: .25s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}body{font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-normal);color:var(--color-text);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img,picture,video,svg{display:block;max-width:100%}a{color:var(--color-accent);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-accent-hover)}h1,h2,h3,h4{line-height:var(--leading-tight);font-weight:700}h1{font-size:var(--text-4xl)}h2{font-size:var(--text-3xl)}h3{font-size:var(--text-2xl)}ul,ol{list-style:none}code{font-family:var(--font-mono);font-size:var(--text-sm)}.container{width:100%;max-width:var(--max-width-layout);margin-inline:auto;padding-inline:var(--space-6)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}.reveal.visible{opacity:1;transform:translateY(0)}@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}.site-header{position:fixed;top:0;left:0;right:0;z-index:100;background-color:hsl(220,25%,6% / .85);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border)}.site-header .container{display:flex;align-items:center;justify-content:space-between;height:60px}.site-header__logo{font-size:var(--text-lg);font-weight:700;color:var(--color-text);letter-spacing:-.02em}.site-header__logo:hover{color:var(--color-accent)}.site-header__nav{display:flex;align-items:center;gap:var(--space-6)}.site-header__nav a{color:var(--color-text-secondary);font-size:var(--text-sm);font-weight:500;transition:color var(--transition-fast)}.site-header__nav a:hover{color:var(--color-text)}.hero{padding-top:calc(60px + var(--space-24));padding-bottom:var(--space-20);text-align:center}.hero__name{font-size:var(--text-4xl);font-weight:700;letter-spacing:-.03em;margin-bottom:var(--space-4)}.hero__name .accent{color:var(--color-accent)}.hero__tagline{font-size:var(--text-lg);color:var(--color-text-secondary);max-width:var(--max-width-text);margin-inline:auto;margin-bottom:var(--space-8)}.hero__links{display:flex;justify-content:center;gap:var(--space-4);flex-wrap:wrap}.hero__link{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-secondary);font-size:var(--text-sm);transition:border-color var(--transition-fast),color var(--transition-fast)}.hero__link:hover{border-color:var(--color-accent);color:var(--color-text)}.hero__link svg{width:18px;height:18px;flex-shrink:0}.section{padding-block:var(--space-20)}.section__title{font-size:var(--text-3xl);margin-bottom:var(--space-12);text-align:center}.section__title .accent{color:var(--color-accent)}.project-grid{display:grid;grid-template-columns:1fr;gap:var(--space-6)}@media(min-width:640px){.project-grid{grid-template-columns:repeat(2,1fr)}}@media(min-width:1024px){.project-grid{grid-template-columns:repeat(3,1fr)}}.project-card{display:flex;flex-direction:column;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-6);transition:transform var(--transition-fast),border-color var(--transition-fast);text-decoration:none;color:inherit}.project-card:hover{transform:translateY(-2px);border-color:var(--color-accent);color:inherit}@media(prefers-reduced-motion:reduce){.project-card:hover{transform:none}}.project-card__icon{font-size:var(--text-3xl);margin-bottom:var(--space-4)}.project-card__title{font-size:var(--text-xl);font-weight:600;margin-bottom:var(--space-2)}.project-card__desc{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:var(--leading-normal);margin-bottom:var(--space-4);flex-grow:1}.project-card__tags{display:flex;flex-wrap:wrap;gap:var(--space-2)}.tag{display:inline-block;font-size:var(--text-xs);font-family:var(--font-mono);color:var(--color-accent);background-color:hsl(172,66%,44% / .1);padding:var(--space-1) var(--space-3);border-radius:var(--radius-sm)}.about-grid{display:grid;grid-template-columns:1fr;gap:var(--space-8);max-width:var(--max-width-text);margin-inline:auto}@media(min-width:640px){.about-grid{grid-template-columns:1fr 1fr}}.about-block__title{font-size:var(--text-sm);font-weight:600;color:var(--color-accent);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-3)}.about-block__text{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:var(--leading-normal)}.cert-list{display:flex;flex-direction:column;gap:var(--space-2)}.cert-list__item{font-size:var(--text-sm);color:var(--color-text-secondary)}.cert-list__year{color:var(--color-text-secondary);font-family:var(--font-mono);font-size:var(--text-xs);margin-right:var(--space-2)}.experience-list{display:flex;flex-direction:column;gap:var(--space-6);max-width:var(--max-width-text);margin-inline:auto}.experience-item{padding-left:var(--space-4);border-left:2px solid var(--color-border)}.experience-item__period{font-size:var(--text-xs);font-family:var(--font-mono);color:var(--color-accent);margin-bottom:var(--space-1)}.experience-item__title{font-size:var(--text-base);font-weight:600;margin-bottom:var(--space-2)}.experience-item__desc{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:var(--leading-normal)}.experience-item__tags{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3)}.skills-section-label{font-size:var(--text-sm);font-weight:600;color:var(--color-text-secondary);text-align:center;margin-bottom:var(--space-6)}.skills-divider{border:none;border-top:1px solid var(--color-border);margin-block:var(--space-12)}.skills-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-6)}@media(min-width:640px){.skills-grid{grid-template-columns:repeat(3,1fr)}}@media(min-width:1024px){.skills-grid{grid-template-columns:repeat(4,1fr)}}.skill-category__title{font-size:var(--text-sm);font-weight:600;color:var(--color-accent);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-3)}.skill-category__list{display:flex;flex-direction:column;gap:var(--space-2)}.skill-category__item{font-size:var(--text-sm);color:var(--color-text-secondary)}.site-footer{padding-block:var(--space-8);border-top:1px solid var(--color-border);text-align:center}.site-footer__text{font-size:var(--text-sm);color:var(--color-text-secondary)}.site-footer__text a{color:var(--color-text-secondary)}.site-footer__text a:hover{color:var(--color-accent)}.project-hero{padding-top:calc(60px + var(--space-16));padding-bottom:var(--space-12)}.project-hero__back{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-text-secondary);margin-bottom:var(--space-6)}.project-hero__back:hover{color:var(--color-accent)}.project-hero__title{font-size:var(--text-4xl);margin-bottom:var(--space-4)}.project-hero__subtitle{font-size:var(--text-lg);color:var(--color-text-secondary);max-width:var(--max-width-text);margin-bottom:var(--space-6)}.project-hero__links{display:flex;gap:var(--space-4);flex-wrap:wrap}.btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-6);border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:500;transition:background-color var(--transition-fast),border-color var(--transition-fast)}.btn--primary{background-color:var(--color-accent);color:var(--color-bg)}.btn--primary:hover{background-color:var(--color-accent-hover);color:var(--color-bg)}.btn--outline{border:1px solid var(--color-border);color:var(--color-text-secondary)}.btn--outline:hover{border-color:var(--color-accent);color:var(--color-text)}.project-content{padding-bottom:var(--space-20)}.project-content .section{padding-block:var(--space-12)}.project-content .section__title{font-size:var(--text-2xl);text-align:left;margin-bottom:var(--space-6)}.feature-list{display:grid;grid-template-columns:1fr;gap:var(--space-4)}@media(min-width:640px){.feature-list{grid-template-columns:repeat(2,1fr)}}.feature-item{padding:var(--space-4);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm)}.feature-item__title{font-size:var(--text-base);font-weight:600;margin-bottom:var(--space-2)}.feature-item__desc{font-size:var(--text-sm);color:var(--color-text-secondary)}.tech-table{width:100%;border-collapse:collapse}.tech-table th,.tech-table td{text-align:left;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);font-size:var(--text-sm)}.tech-table th{color:var(--color-text-secondary);font-weight:500;width:140px}.design-decisions{display:flex;flex-direction:column;gap:var(--space-6)}.design-decision{padding-left:var(--space-4);border-left:2px solid var(--color-accent)}.design-decision__title{font-size:var(--text-base);font-weight:600;margin-bottom:var(--space-2)}.design-decision__desc{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:var(--leading-normal)}.project-screenshot{margin-bottom:var(--space-12);border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--color-border)}.project-screenshot img{width:100%;height:auto}