@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap";*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--white: #ffffff;--off-white: #fafafa;--gray-50: #f8fafc;--gray-100: #f1f5f9;--gray-200: #e2e8f0;--gray-300: #cbd5e1;--gray-400: #94a3b8;--gray-500: #64748b;--gray-600: #475569;--gray-700: #334155;--gray-800: #1e293b;--gray-900: #0f172a;--black: #020617;--accent: #2563eb;--accent-light: #3b82f6;--accent-bg: #eff6ff;--accent-border: #bfdbfe;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--max-width: 1200px;--section-gap: 7rem;--radius: 16px;--radius-sm: 8px;--ease: cubic-bezier(.16, 1, .3, 1)}html{font-family:var(--font-sans);color:var(--gray-700);background:var(--white);scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{line-height:1.7;font-size:15px;overflow-x:hidden}a{color:var(--accent);text-decoration:none;transition:color .2s}a:hover{color:var(--accent-light)}::selection{background:var(--accent);color:var(--white)}.fade-in{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}.fade-in.visible{opacity:1;transform:translateY(0)}.hero{min-height:90vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:4rem 2rem;position:relative}.hero__greeting{font-size:.85rem;font-weight:500;color:var(--accent);letter-spacing:.15em;text-transform:uppercase;margin-bottom:1rem}.hero__name{font-size:clamp(3rem,8vw,5.5rem);font-weight:800;letter-spacing:-.04em;line-height:1.05;background:linear-gradient(135deg,var(--gray-900),var(--gray-600));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero__bio{margin-top:1.5rem;font-size:1.1rem;color:var(--gray-500);max-width:640px;line-height:1.85;font-weight:400}.hero__links{display:flex;gap:1rem;margin-top:2.5rem}.hero__link{display:flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:500;color:var(--gray-500);padding:.6rem 1.2rem;border:1px solid var(--gray-200);border-radius:100px;transition:all .3s var(--ease)}.hero__link:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-bg);transform:translateY(-1px)}.hero__link svg{width:18px;height:18px}.hero__scroll{position:absolute;bottom:2rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--gray-400);font-size:.75rem;letter-spacing:.1em;animation:bounce 2s infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(6px)}}.story{max-width:640px;margin:0 auto;padding:0 2rem;text-align:center}.story__text{font-size:1.05rem;color:var(--gray-600);line-height:2}.story__text strong{color:var(--gray-800);font-weight:600}.story__highlight{display:inline;background:linear-gradient(transparent 60%,var(--accent-bg) 60%)}.section{max-width:var(--max-width);margin:0 auto;padding:3rem 2rem var(--section-gap)}.section--alt{max-width:100%;background:var(--gray-50);border-top:1px solid var(--gray-100);border-bottom:1px solid var(--gray-100)}.section--alt>*{max-width:var(--max-width);margin-left:auto;margin-right:auto}.section__header{display:flex;align-items:center;gap:1rem;margin-bottom:2.5rem}.section__number{font-size:.8rem;font-family:var(--font-mono);font-weight:500;color:var(--accent)}.section__title{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--gray-400)}.section__line{flex:1;height:1px;background:var(--gray-200)}.skills{display:flex;flex-wrap:wrap;gap:.5rem}.skill-tag{font-size:.8rem;font-family:var(--font-mono);font-weight:400;padding:.4rem .85rem;border:1px solid var(--gray-200);border-radius:100px;color:var(--gray-500);cursor:default;transition:all .25s var(--ease);user-select:none}.skill-tag:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg);transform:translateY(-1px)}.skill-tag.active{border-color:var(--accent);color:var(--white);background:var(--accent)}.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}.project-card{border:1px solid var(--gray-100);border-radius:var(--radius);padding:1.75rem;transition:all .35s var(--ease);cursor:pointer;display:flex;flex-direction:column;gap:.85rem;position:relative;overflow:hidden;background:var(--white)}.project-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),#7c3aed);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}.project-card:hover{border-color:var(--gray-200);box-shadow:0 8px 32px #0000000f;transform:translateY(-4px)}.project-card:hover:before{transform:scaleX(1)}.project-card__emoji{font-size:1.5rem}.project-card__title{font-size:1.1rem;font-weight:700;color:var(--gray-900);letter-spacing:-.01em}.project-card__desc{font-size:.85rem;color:var(--gray-500);line-height:1.7;flex:1}.project-card__tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.25rem}.project-card__tag{font-size:.7rem;font-family:var(--font-mono);padding:.2rem .55rem;background:var(--gray-50);border-radius:4px;color:var(--gray-500)}.project-card__cta{font-size:.8rem;font-weight:500;color:var(--accent);display:flex;align-items:center;gap:.3rem;margin-top:.25rem;opacity:0;transform:translate(-8px);transition:all .3s var(--ease)}.project-card:hover .project-card__cta{opacity:1;transform:translate(0)}.project-card--hero{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;gap:.5rem 2rem;padding:2rem}.project-card--hero .project-card__title{grid-column:1 / -1;font-size:1.3rem}.project-card--hero .project-card__desc{font-size:.95rem}.project-card--hero .project-card__tags{align-self:end}.project-card--hero .project-card__cta{grid-column:1 / -1}@media(max-width:640px){.project-card--hero{grid-template-columns:1fr}}.modal-overlay{position:fixed;inset:0;background:#00000080;backdrop-filter:blur(4px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:2rem;opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}.modal-overlay.open{opacity:1;pointer-events:auto}.modal{background:var(--white);border-radius:var(--radius);max-width:720px;width:100%;max-height:85vh;overflow-y:auto;padding:2.5rem;position:relative;transform:translateY(20px) scale(.97);transition:transform .4s var(--ease)}.modal-overlay.open .modal{transform:translateY(0) scale(1)}.modal__close{position:sticky;top:0;float:right;width:36px;height:36px;border:1px solid var(--gray-200);border-radius:50%;background:var(--white);color:var(--gray-500);font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;z-index:10}.modal__close:hover{border-color:var(--gray-400);color:var(--gray-800)}.modal__title{font-size:1.6rem;font-weight:700;color:var(--gray-900);margin-bottom:.5rem;letter-spacing:-.02em}.modal__subtitle{font-size:.95rem;color:var(--gray-500);margin-bottom:2rem;line-height:1.7}.modal h2{font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin:2rem 0 .75rem}.modal h2:first-of-type{margin-top:0}.modal p,.modal li{font-size:.9rem;color:var(--gray-600);line-height:1.8}.modal ul{list-style:none;padding:0}.modal li{padding-left:1.2rem;position:relative;margin-bottom:.4rem}.modal li:before{content:"";position:absolute;left:0;top:.65em;width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.5}.modal__tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.5rem}.modal__tag{font-size:.75rem;font-family:var(--font-mono);padding:.3rem .65rem;border:1px solid var(--accent-border);border-radius:100px;color:var(--accent);background:var(--accent-bg)}.modal pre{background:var(--gray-50);border:1px solid var(--gray-100);border-radius:var(--radius-sm);padding:1rem 1.25rem;overflow-x:auto;font-family:var(--font-mono);font-size:.8rem;line-height:1.6;color:var(--gray-700);margin:1rem 0}.footer{text-align:center;padding:3rem 2rem;font-size:.8rem;color:var(--gray-400);border-top:1px solid var(--gray-100)}.footer a{color:var(--gray-400)}.footer a:hover{color:var(--accent)}@media(max-width:640px){.hero{min-height:80vh;padding:3rem 1.5rem}.section{padding:0 1.5rem var(--section-gap)}.projects-grid{grid-template-columns:1fr}.modal{padding:1.5rem;max-height:90vh}.hero__scroll{display:none}}.story__body{max-width:840px;margin-bottom:3rem}.story__body p{font-size:1.05rem;color:var(--gray-600);line-height:2;margin-bottom:1.25rem}.story__body strong{color:var(--gray-800);font-weight:600}.story__highlight{background:linear-gradient(transparent 60%,var(--accent-bg) 60%)}.work__intro{font-size:.95rem;color:var(--gray-500);margin-bottom:1.5rem}.work-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}.work-card{border:1px solid var(--gray-200);border-radius:12px;padding:1.25rem;background:var(--white);transition:all .25s var(--ease)}.work-card:hover{border-color:var(--gray-300);box-shadow:0 2px 12px #0000000a}.work-card--featured{grid-column:1 / -1;border-color:var(--accent-border);background:var(--white);position:relative}.work-card--link{text-decoration:none;color:inherit;cursor:pointer;display:block;position:relative;overflow:hidden}.work-card--link:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),#7c3aed);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}.work-card--link:hover{border-color:var(--gray-200);box-shadow:0 8px 32px #0000000f;transform:translateY(-4px)}.work-card--link:hover:before{transform:scaleX(1)}.work-card--link:hover .project-card__cta{opacity:1;transform:translate(0)}.work-card__badge{display:inline-block;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);background:var(--accent-bg);padding:.2rem .6rem;border-radius:100px;margin-bottom:.5rem}.work-card__title{font-size:1rem;font-weight:700;color:var(--gray-900);margin-bottom:.25rem}.work-card__tech{font-size:.8rem;font-family:var(--font-mono);color:var(--accent);margin-bottom:.5rem}.work-card__desc{font-size:.85rem;color:var(--gray-600);line-height:1.7}.work-card__results{list-style:none;padding:0;margin-top:.75rem;display:flex;flex-wrap:wrap;gap:.5rem}.work-card__results li{font-size:.8rem;color:var(--gray-700);background:var(--accent-bg);padding:.3rem .7rem;border-radius:6px}.work-card__results li strong{color:var(--accent)}.work-card__cta{display:inline-flex;align-items:center;gap:.3rem;font-size:.85rem;font-weight:500;color:var(--accent);margin-top:.75rem;transition:gap .2s var(--ease)}.work-card__cta:hover{gap:.6rem}.timeline{position:relative;padding-left:2rem;max-width:840px}.timeline:before{content:"";position:absolute;left:7px;top:4px;bottom:4px;width:2px;background:linear-gradient(to bottom,var(--accent),var(--gray-200));border-radius:2px}.timeline__item{position:relative;padding-bottom:2rem;display:grid;grid-template-columns:60px 1fr;gap:.75rem;align-items:start}.timeline__item:last-child{padding-bottom:0}.timeline__dot{position:absolute;left:-2rem;top:4px;width:16px;height:16px;border-radius:50%;background:var(--white);border:3px solid var(--accent);z-index:1;transition:transform .3s var(--ease)}.timeline__item:hover .timeline__dot{transform:scale(1.3);background:var(--accent)}.timeline__year{font-family:var(--font-mono);font-size:.85rem;font-weight:500;color:var(--accent);padding-top:1px}.timeline__content{display:flex;flex-direction:column;gap:.15rem}.timeline__label{font-size:1rem;font-weight:600;color:var(--gray-800)}.timeline__desc{font-size:.85rem;color:var(--gray-500)}.skills-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.5rem}.skills-group__title{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--gray-400);margin-bottom:.6rem}.project-card{text-decoration:none;color:inherit}.about-work{max-width:840px}.about-work__status{font-size:1.1rem;color:var(--gray-700);margin-bottom:2rem}.about-work__status strong{color:var(--accent);font-weight:600}.about-work__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:2rem}.about-work__item{padding:1.25rem;border:1px solid var(--gray-200);border-radius:12px;background:var(--white)}.about-work__label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin-bottom:.5rem}.about-work__item p{font-size:.85rem;color:var(--gray-600);line-height:1.7}.about-work__contact{font-size:.9rem;color:var(--gray-500)}@media(max-width:768px){.story__body{max-width:100%}}@media(max-width:640px){.skills-grid{grid-template-columns:1fr}.timeline{padding-left:1.5rem}.work-grid,.about-work__grid{grid-template-columns:1fr}}.project-nav{max-width:820px;margin:0 auto;padding:2.5rem 2rem 0}.project-nav__back{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:500;color:var(--gray-500);transition:color .2s}.project-nav__back:hover{color:var(--accent)}.project-page{max-width:820px;margin:0 auto;padding:2rem 2rem 6rem}.project-page__header{padding-bottom:2.5rem;margin-bottom:3rem;border-bottom:1px solid var(--gray-200)}.project-page__title{font-size:clamp(2rem,5vw,3rem);font-weight:800;letter-spacing:-.03em;line-height:1.15;color:var(--gray-900);margin-bottom:.75rem}.project-page__subtitle{font-size:1.05rem;color:var(--gray-500);margin-bottom:1.5rem}.project-page__tags{display:flex;flex-wrap:wrap;gap:.4rem}.project-page__body{font-size:1rem;line-height:1.9;color:var(--gray-700)}.project-page__body>*:first-child{margin-top:0}.project-page__body h1,.project-page__body h2,.project-page__body h3,.project-page__body h4{color:var(--gray-900);font-weight:700;letter-spacing:-.02em;line-height:1.4}.project-page__body h1{font-size:1.75rem;margin:3rem 0 1rem}.project-page__body h2{font-size:1.4rem;margin:3rem 0 1rem;padding-bottom:.5rem;border-bottom:1px solid var(--gray-100)}.project-page__body h3{font-size:1.1rem;margin:2rem 0 .75rem}.project-page__body h4{font-size:1rem;margin:1.5rem 0 .5rem;color:var(--gray-600)}.project-page__body p{margin:1rem 0}.project-page__body ul,.project-page__body ol{margin:1rem 0;padding-left:1.5rem}.project-page__body li{margin:.4rem 0}.project-page__body li::marker{color:var(--gray-400)}.project-page__body strong{color:var(--gray-900);font-weight:600}.project-page__body a{text-decoration:underline;text-underline-offset:2px}.project-page__body blockquote{margin:1.5rem 0;padding:1rem 1.25rem;border-left:3px solid var(--accent-border);background:var(--accent-bg);border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--gray-600)}.project-page__body blockquote p{margin:0}.project-page__body code{font-family:var(--font-mono);font-size:.85em;background:var(--gray-100);color:var(--gray-800);padding:.15em .4em;border-radius:4px}.project-page__body pre{margin:1.5rem 0;padding:1.25rem;background:var(--gray-900);border-radius:var(--radius-sm);overflow-x:auto;line-height:1.6}.project-page__body pre code{background:none;color:var(--gray-100);padding:0;font-size:.85rem}.project-page__body hr{margin:3rem 0;border:none;border-top:1px solid var(--gray-200)}.project-page__body img{max-width:100%;height:auto;border-radius:var(--radius-sm)}.project-page__body table{width:100%;margin:1.5rem 0;border-collapse:collapse;font-size:.9rem;display:block;overflow-x:auto}.project-page__body th,.project-page__body td{border:1px solid var(--gray-200);padding:.6rem .8rem;text-align:left;vertical-align:top}.project-page__body th{background:var(--gray-50);color:var(--gray-800);font-weight:600;white-space:nowrap}@media(max-width:640px){.project-nav,.project-page{padding-left:1.25rem;padding-right:1.25rem}}.story{max-width:720px;margin:0 auto;padding:0;text-align:left}.story__text{margin-bottom:1.4rem}.story__text:last-child{margin-bottom:0}.project-card__icon{width:26px;height:26px;color:var(--accent);flex-shrink:0}.project-card:hover .project-card__icon{color:var(--accent-light)}.about-work{margin-left:auto;margin-right:auto}.about-work__item p.about-work__status{margin-bottom:0}.section--articles .work-grid{max-width:840px;margin-left:auto;margin-right:auto}.project-page__body img{display:block;margin:2rem auto .75rem;border:1px solid var(--gray-200);border-radius:var(--radius-sm);box-shadow:0 2px 14px #0206170f}.project-page__body p:has(>img:only-child){margin:0}.project-page__body p:has(>img:only-child)+p>em:only-child{display:block;margin:0 auto 2.5rem;text-align:center;font-size:.85rem;font-style:normal;color:var(--gray-500);line-height:1.6}