body{margin:0;font-family:Helvetica Neue,Helvetica,Arial,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg, #FAFAFA);color:var(--text, #1A1A1A);transition:background .3s ease,color .3s ease}a{text-decoration:none;color:inherit}html{scroll-behavior:smooth}::selection{background:#d93025;color:#fafafa}[data-theme=dark] ::selection{background:#d93025;color:#141414}:root{--bg: #FAFAFA;--text: #1A1A1A;--text-muted: #999999;--border: #E0E0E0;--accent: #D93025;--accent-light: rgba(217, 48, 37, .1);--unit: 8px}[data-theme=dark]{--bg: #141414;--text: #E8E8E8;--text-muted: #888888;--border: #2A2A2A;--accent: #D93025;--accent-light: rgba(217, 48, 37, .15)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}.pages{height:100vh;overflow-y:scroll;scroll-snap-type:y mandatory;background:var(--bg);color:var(--text);-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.pages::-webkit-scrollbar{display:none}.page{height:100vh;scroll-snap-align:start;scroll-snap-stop:always}.page-center{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;padding:calc(var(--unit) * 8) calc(var(--unit) * 6)}.header{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:calc(var(--unit) * 3) calc(var(--unit) * 4);background:linear-gradient(to bottom,var(--bg) 60%,transparent);pointer-events:none}.header-logo{display:flex;align-items:center;height:32px;text-decoration:none;transition:opacity .3s ease;pointer-events:auto}.header-logo:hover{opacity:.7}.header-logo-img{height:20px;width:auto;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.header-controls{display:flex;align-items:center;gap:calc(var(--unit) * 1.5);pointer-events:auto}.theme-toggle{background:none;border:1px solid var(--border);width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted);transition:border-color .3s ease,color .3s ease;padding:0;flex-shrink:0}.theme-toggle:hover{border-color:var(--accent);color:var(--accent)}.theme-toggle svg{width:14px;height:14px;transition:transform .3s ease}.theme-toggle:hover svg{transform:rotate(15deg)}.lang-toggle{background:none;border:1px solid var(--border);padding:calc(var(--unit) * .75) calc(var(--unit) * 2);font-size:12px;font-weight:400;letter-spacing:1px;color:var(--text-muted);cursor:pointer;font-family:inherit;transition:border-color .3s ease;display:flex;align-items:center;gap:4px}.lang-toggle:hover{border-color:var(--accent)}.lang-sep{color:var(--border);font-weight:300}.lang-active{color:var(--accent);font-weight:500}.page-indicator{position:fixed;right:calc(var(--unit) * 3);top:50%;transform:translateY(-50%);z-index:100;display:flex;flex-direction:column;align-items:center;gap:calc(var(--unit) * 1);opacity:.35;transition:opacity .3s ease}.page-indicator:hover{opacity:.7}.page-indicator-current,.page-indicator-total{font-size:9px;font-weight:400;letter-spacing:1px;font-variant-numeric:tabular-nums;color:var(--text-muted);transition:color .3s ease}.page-indicator-current{color:var(--text)}.page-indicator-dots{display:flex;flex-direction:column;align-items:center;gap:calc(var(--unit) * .75)}.page-indicator-dot{width:4px;height:4px;border-radius:50%;background:var(--border);transition:all .3s ease}.page-indicator-dot.active{background:var(--text-muted);transform:scale(1.3)}.section-title{font-size:12px;font-weight:500;letter-spacing:6px;color:var(--text-muted);text-transform:uppercase}.section-divider{width:32px;height:2px;background:var(--accent);margin:calc(var(--unit) * 2) 0 calc(var(--unit) * 3)}.hero{height:100%;display:flex;align-items:center;justify-content:center;padding:calc(var(--unit) * 6)}.bento-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);gap:calc(var(--unit) * 1.5);max-width:800px;width:100%;height:60vh;max-height:520px}.bento-card{border:1px solid var(--border);display:flex;flex-direction:column;justify-content:center;padding:calc(var(--unit) * 3);transition:all .3s ease;animation:bentoFadeIn .6s ease forwards;opacity:0;position:relative;overflow:hidden;text-decoration:none;color:var(--text);cursor:pointer}.bento-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 16px #d930250f}@keyframes bentoFadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.bento-logo{grid-column:1 / 3;grid-row:1 / 3;background:var(--bg);align-items:center}.bento-logo-bg{position:absolute;top:0;left:0;right:0;bottom:0;background-repeat:no-repeat;background-position:center center;background-size:80%;opacity:.15;animation:breathe 8s ease-in-out infinite;pointer-events:none;z-index:0}@keyframes breathe{0%,to{transform:scale(1);opacity:.15}50%{transform:scale(1.05);opacity:.25}}.bento-logo-img{width:55%;max-width:180px;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;transition:transform .4s ease;position:relative;z-index:1}.bento-logo:hover .bento-logo-img{transform:scale(1.04)}.bento-role{grid-column:3;grid-row:1;justify-content:center;align-items:center}.bento-label{font-size:12px;font-weight:500;letter-spacing:3px;color:var(--text-muted);text-align:center;line-height:2}.bento-stars{grid-column:4;grid-row:1;align-items:center;gap:calc(var(--unit) * 1)}.bento-big-number{font-size:36px;font-weight:200;color:var(--accent);letter-spacing:1px;font-variant-numeric:tabular-nums;line-height:1}.bento-small-label{font-size:10px;font-weight:500;letter-spacing:2px;color:var(--text-muted);text-transform:uppercase}.bento-tagline{grid-column:3 / 5;grid-row:2;justify-content:center;align-items:flex-start;padding:calc(var(--unit) * 4)}.bento-tagline-text{font-size:20px;font-weight:300;letter-spacing:1px;color:var(--text);line-height:1.8;margin:0}.bento-project{grid-column:1;grid-row:3;gap:calc(var(--unit) * .5);cursor:pointer}.bento-project-name{font-size:15px;font-weight:500;letter-spacing:.3px;color:var(--text);margin-top:calc(var(--unit) * 1)}.bento-project-desc{font-size:12px;font-weight:300;color:var(--text-muted);line-height:1.5}.bento-project-arrow{font-size:14px;color:var(--text-muted);opacity:0;transform:translate(-4px);transition:all .3s ease;margin-top:auto}.bento-project:hover .bento-project-arrow{opacity:1;transform:translate(0);color:var(--accent)}.bento-tech{grid-column:2;grid-row:3;gap:calc(var(--unit) * 1.5)}.bento-tech-tags{display:flex;flex-wrap:wrap;gap:calc(var(--unit) * .75)}.bento-tech-tag{font-size:11px;font-weight:400;letter-spacing:1px;color:var(--text-muted);border:1px solid var(--border);border-radius:100px;padding:calc(var(--unit) * .5) calc(var(--unit) * 1.5);white-space:nowrap;transition:all .25s ease}.bento-tech:hover .bento-tech-tag{border-color:var(--accent);color:var(--accent)}.bento-connect{grid-column:3 / 5;grid-row:3;justify-content:space-between}.bento-connect-links{display:flex;align-items:center;gap:calc(var(--unit) * 1.5);margin-top:calc(var(--unit) * 1.5)}.bento-link{font-size:13px;font-weight:400;letter-spacing:1px;color:var(--text);text-decoration:none;transition:color .3s ease}.bento-link:hover{color:var(--accent)}.bento-link-sep{font-size:13px;color:var(--border)}.bento-scroll-hint{display:flex;align-items:center;gap:calc(var(--unit) * 1);background:none;border:none;font-family:inherit;font-size:11px;font-weight:400;letter-spacing:2px;color:var(--text-muted);cursor:pointer;padding:0;margin-top:auto;transition:color .3s ease;align-self:flex-end}.bento-scroll-hint:hover{color:var(--accent)}.bento-scroll-hint svg{animation:hint-bounce 2.4s ease-in-out infinite}@keyframes hint-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(3px)}}.about-layout{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--unit) * 8);max-width:800px;width:100%;align-items:center}.about-left,.about-right{min-width:0}.about-text{font-size:15px;line-height:2;color:var(--text);font-weight:300;letter-spacing:.3px;margin-bottom:0}.stats-section{margin-bottom:0}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--unit) * 1.5)}.stat-card{border:1px solid var(--border);padding:calc(var(--unit) * 2.5) calc(var(--unit) * 2);text-align:center;transition:all .3s ease}.stat-card:hover{border-color:var(--accent);transform:translateY(-2px)}.stat-number{font-size:28px;font-weight:200;color:var(--accent);letter-spacing:.5px;font-variant-numeric:tabular-nums;transition:transform .3s ease;margin-bottom:calc(var(--unit) * .5)}.stat-card:hover .stat-number{transform:scale(1.05)}.stat-label{font-size:10px;font-weight:500;letter-spacing:2px;color:var(--text-muted);text-transform:uppercase}.tech-stack-section{margin-bottom:0}.tech-category{margin-bottom:calc(var(--unit) * 3)}.tech-category:last-child{margin-bottom:0}.tech-category-title{font-size:10px;font-weight:500;letter-spacing:2px;color:var(--text-muted);margin-bottom:calc(var(--unit) * 1.5)}.tech-skills{display:flex;flex-wrap:wrap;gap:calc(var(--unit) * 1)}.skill-tag{font-size:11px;font-weight:400;letter-spacing:1px;color:var(--text-muted);border:1px solid var(--border);border-radius:100px;padding:calc(var(--unit) * .75) calc(var(--unit) * 2);white-space:nowrap;transition:all .25s ease;animation:fadeInUp .6s ease forwards;opacity:0}.skill-tag:hover{color:var(--accent);border-color:var(--accent);transform:scale(1.05)}.journey-section{margin-bottom:0}.journey-timeline{margin-top:calc(var(--unit) * 1)}.timeline-item{display:flex;gap:calc(var(--unit) * 3);margin-bottom:calc(var(--unit) * 3);animation:slideInFromLeft .6s ease forwards;opacity:0}.timeline-item:last-child{margin-bottom:0}.timeline-year{font-size:18px;font-weight:500;color:var(--text);min-width:60px;padding-top:2px;line-height:1.3}.timeline-year-sep{font-weight:300;color:var(--text-muted)}.timeline-content{flex:1;border-left:2px solid var(--accent);padding-left:calc(var(--unit) * 2)}.timeline-event{display:flex;align-items:flex-start;gap:calc(var(--unit) * 1);margin-bottom:calc(var(--unit) * 1.5);font-size:13px;line-height:1.6;color:var(--text)}.timeline-event:last-child{margin-bottom:0}.timeline-dot{color:var(--accent);flex-shrink:0}.timeline-text{font-weight:300;letter-spacing:.3px}.tech-journey-layout{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--unit) * 8);max-width:800px;width:100%;align-items:start}.tech-journey-left,.tech-journey-right{min-width:0}.philosophy-layout{max-width:720px;width:100%}.philosophy-header{margin-bottom:calc(var(--unit) * 2)}.philosophy-grid{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--unit) * 5)}.philosophy-item{display:flex;align-items:flex-start;gap:calc(var(--unit) * 2.5);animation:fadeInUp .6s ease forwards;opacity:0}.philosophy-number{font-size:48px;font-weight:100;color:var(--accent);line-height:1;min-width:56px;font-variant-numeric:tabular-nums;letter-spacing:-2px}.philosophy-body{flex:1;padding-top:8px}.philosophy-title{font-size:16px;font-weight:500;color:var(--text);letter-spacing:.5px;margin-bottom:calc(var(--unit) * 1)}.philosophy-desc{font-size:14px;font-weight:300;line-height:1.9;color:var(--text-muted);letter-spacing:.3px}.works-layout{max-width:800px;width:100%}.works-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--unit) * 2)}.card{display:flex;flex-direction:column;padding:calc(var(--unit) * 2.5);border:1px solid var(--border);text-decoration:none;color:var(--text);transition:all .25s ease;min-height:calc(var(--unit) * 18);will-change:transform;backface-visibility:hidden}.card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 12px #d9302514}.card:active{transform:translateY(-1px) scale(.98)}.card:hover .card-arrow{opacity:1;transform:translate(0);color:var(--accent)}.card-category{font-size:10px;font-weight:500;letter-spacing:2px;color:var(--text-muted);margin-bottom:calc(var(--unit) * 1.5)}.card-name{font-size:15px;font-weight:500;letter-spacing:.3px;line-height:1.4}.card-desc{font-size:12px;color:var(--text-muted);margin-top:calc(var(--unit) * .5);line-height:1.5}.card-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:calc(var(--unit) * 1.5)}.card-tag{font-size:10px;letter-spacing:1px;color:var(--text-muted);border:1px solid var(--border);border-radius:100px;padding:2px calc(var(--unit) * 1);transition:all .25s ease}.card:hover .card-tag{border-color:var(--accent);color:var(--accent)}.card-arrow{font-size:14px;color:var(--text-muted);opacity:0;transform:translate(-4px);transition:all .25s ease}.content-layout{max-width:800px;width:100%}.content-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--unit) * 2)}.content-card{min-height:calc(var(--unit) * 16)}.footer{position:absolute;bottom:calc(var(--unit) * 3)}.footer-link{display:inline-block;font-size:11px;font-weight:400;letter-spacing:1px;color:var(--text-muted);text-decoration:none;opacity:.5;transition:opacity .3s ease,color .3s ease}.footer-link:hover{opacity:.8;color:var(--text)}.back-to-top{position:fixed;bottom:calc(var(--unit) * 4);right:calc(var(--unit) * 4);z-index:100;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--bg);border:1px solid var(--border);color:var(--text-muted);cursor:pointer;padding:0;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease,border-color .3s ease,color .3s ease}.back-to-top.visible{opacity:1;pointer-events:auto;transform:translateY(0)}.back-to-top:hover{border-color:var(--accent);color:var(--accent)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInFromLeft{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.bento-scroll-hint svg{animation:none}.bento-logo-bg{animation:none}}@media(max-width:960px){.pages{scroll-snap-type:y proximity}.page{min-height:100vh;min-height:100dvh;height:auto}.page-center{padding:calc(var(--unit) * 6) calc(var(--unit) * 4);min-height:100vh;min-height:100dvh}.hero{height:auto;min-height:100vh;min-height:100dvh;padding:calc(var(--unit) * 4)}.bento-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:auto;height:auto;max-height:none;gap:calc(var(--unit) * 1.5)}.bento-logo{grid-column:1 / 3;grid-row:auto;min-height:180px}.bento-role{grid-column:1;grid-row:auto}.bento-stars{grid-column:2;grid-row:auto}.bento-tagline{grid-column:1 / 3;grid-row:auto;padding:calc(var(--unit) * 3)}.bento-project{grid-column:1;grid-row:auto}.bento-tech{grid-column:2;grid-row:auto}.bento-connect{grid-column:1 / 3;grid-row:auto}.about-layout,.tech-journey-layout{grid-template-columns:1fr;gap:calc(var(--unit) * 5);max-width:560px}.philosophy-grid{grid-template-columns:1fr;gap:calc(var(--unit) * 4)}.works-grid,.content-grid{grid-template-columns:repeat(2,1fr);gap:calc(var(--unit) * 1.5)}}@media(max-width:640px){.pages{scroll-snap-type:none;height:auto;min-height:100vh;min-height:100dvh}.page{height:auto;min-height:100vh;min-height:100dvh;scroll-snap-align:none;scroll-snap-stop:normal}.page-center{padding:calc(var(--unit) * 8) calc(var(--unit) * 2.5);padding-top:max(calc(var(--unit) * 8),calc(var(--unit) * 6 + env(safe-area-inset-top)));padding-bottom:max(calc(var(--unit) * 5),calc(var(--unit) * 3 + env(safe-area-inset-bottom)));padding-left:max(calc(var(--unit) * 2.5),calc(var(--unit) * 1 + env(safe-area-inset-left)));padding-right:max(calc(var(--unit) * 2.5),calc(var(--unit) * 1 + env(safe-area-inset-right)));min-height:100vh;min-height:100dvh}.header{padding:max(calc(var(--unit) * 2),env(safe-area-inset-top)) max(calc(var(--unit) * 2),env(safe-area-inset-right)) calc(var(--unit) * 3) max(calc(var(--unit) * 2),env(safe-area-inset-left))}.header-logo{height:36px}.header-logo-img{height:16px}.header-controls{gap:calc(var(--unit) * 1)}.theme-toggle{width:36px;height:36px}.theme-toggle svg{width:14px;height:14px}.lang-toggle{padding:calc(var(--unit) * 1) calc(var(--unit) * 2);font-size:12px;min-height:36px;display:flex;align-items:center}.page-indicator{display:none}.hero{height:auto;min-height:100vh;min-height:100dvh;padding:calc(var(--unit) * 7) calc(var(--unit) * 2);align-items:center}.bento-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto;height:auto;max-height:none;gap:calc(var(--unit) * 1)}.bento-card{padding:calc(var(--unit) * 2)}.bento-logo{grid-column:1 / 3;min-height:120px}.bento-logo-img{width:45%;max-width:130px}.bento-role{grid-column:1 / 3}.bento-label{font-size:11px;letter-spacing:2px}.bento-stars{grid-column:1}.bento-big-number{font-size:28px}.bento-tagline{grid-column:2;padding:calc(var(--unit) * 2)}.bento-tagline-text{font-size:14px;line-height:1.6}.bento-project{grid-column:1}.bento-project-name{font-size:14px}.bento-project-desc{font-size:11px}.bento-project-arrow{opacity:.5;transform:translate(0)}.bento-tech{grid-column:2}.bento-tech-tag{font-size:10px;padding:calc(var(--unit) * .4) calc(var(--unit) * 1.2)}.bento-connect{grid-column:1 / 3}.bento-connect-links{flex-wrap:wrap;gap:calc(var(--unit) * 1)}.bento-link,.bento-link-sep{font-size:12px}.bento-scroll-hint{font-size:10px}.about-layout{grid-template-columns:1fr;gap:calc(var(--unit) * 4)}.about-text{font-size:14px;line-height:1.9}.stats-grid{grid-template-columns:1fr 1fr;gap:calc(var(--unit) * 1)}.stat-card{padding:calc(var(--unit) * 2) calc(var(--unit) * 1.5)}.stat-number{font-size:22px}.tech-journey-layout{grid-template-columns:1fr;gap:calc(var(--unit) * 5)}.tech-category{margin-bottom:calc(var(--unit) * 2)}.timeline-item{gap:calc(var(--unit) * 2)}.timeline-year{font-size:16px;min-width:50px;line-height:1.3}.timeline-content{padding-left:calc(var(--unit) * 1.5)}.timeline-event{font-size:12px;margin-bottom:calc(var(--unit) * 1)}.philosophy-grid{grid-template-columns:1fr;gap:calc(var(--unit) * 3)}.philosophy-number{font-size:32px;min-width:42px}.philosophy-title{font-size:14px}.philosophy-desc{font-size:13px}.works-grid{grid-template-columns:1fr 1fr;gap:calc(var(--unit) * 1)}.content-grid{grid-template-columns:1fr;gap:calc(var(--unit) * 1)}.card{min-height:auto;padding:calc(var(--unit) * 2.5)}.content-card{min-height:auto}.card-name{font-size:14px}.card-arrow{opacity:.5;transform:translate(0)}.back-to-top{bottom:max(calc(var(--unit) * 3),calc(var(--unit) * 1 + env(safe-area-inset-bottom)));right:max(calc(var(--unit) * 2),env(safe-area-inset-right))}.footer{position:relative;bottom:auto;margin-top:calc(var(--unit) * 4);padding-bottom:env(safe-area-inset-bottom)}}@media(max-width:380px){.bento-grid{grid-template-columns:1fr}.bento-logo,.bento-role,.bento-stars,.bento-tagline,.bento-project,.bento-tech,.bento-connect{grid-column:1}.bento-tagline-text{font-size:13px}.bento-big-number{font-size:24px}.stats-grid,.works-grid{grid-template-columns:1fr}.philosophy-item{gap:calc(var(--unit) * 1.5)}.philosophy-number{font-size:28px;min-width:36px}}