:root{color-scheme:dark;--bg:#0b0d10;--panel:#10141a;--line:#1e242c;--line-light:#262c34;--text:#e8eaed;--secondary:#c5cbd3;--muted:#9aa3ae;--accent:#7cc4ff;--mono:"Geist Mono",monospace}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;margin:0;font-family:Geist,system-ui,sans-serif}a{color:var(--accent);text-decoration:none}a:hover{color:#b5ddff}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.skip-link{background:var(--accent);color:var(--bg);z-index:10;padding:12px;position:absolute;top:-100px;left:16px}.skip-link:focus{top:12px}.container{max-width:1200px;margin:0 auto;padding:0 24px}.container.narrow{max-width:860px}.header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:28px 0;display:flex}.brand{color:var(--text);font:500 16px var(--mono);align-items:center;gap:12px;display:flex}.brand-mark{border:1px solid var(--line-light);width:34px;height:34px;color:var(--accent);background:#161b22;border-radius:8px;justify-content:center;align-items:center;font:18px Noto Serif JP,serif;display:inline-flex}.accent{color:var(--accent)}.header nav{flex-wrap:wrap;align-items:center;gap:28px;font-size:15px;display:flex}.header nav>a:not(.button),.back-link{color:var(--secondary)}.header nav>a:hover,.back-link:hover{color:var(--accent)}.button{background:var(--accent);color:var(--bg);border:1px solid var(--accent);border-radius:10px;justify-content:center;align-items:center;padding:13px 21px;font-weight:500;transition:background .15s,border-color .15s;display:inline-flex}.button:hover{color:var(--bg);background:#b5ddff;border-color:#b5ddff}.button-small{border-radius:8px;padding:9px 15px;font-size:14px}.button-outline{color:var(--text);background:0 0;border-color:#2e3540}.button-outline:hover{color:var(--text);background:#161b22;border-color:#596473}.hero{flex-direction:column;gap:28px;max-width:920px;padding:96px 0 72px;display:flex}.availability{color:var(--muted);font:14px var(--mono);flex-wrap:wrap;align-items:center;gap:10px;margin:0;display:flex}.status-dot{background:#4ade80;border-radius:50%;flex:none;width:8px;height:8px}.hero h1{letter-spacing:-.035em;margin:0;font-size:clamp(40px,6vw,76px);font-weight:600;line-height:1.04}.hero-copy{color:#b4bbc5;max-width:700px;margin:0;font-size:20px;line-height:1.55}.actions{flex-wrap:wrap;gap:12px;padding-top:8px;display:flex}.panel{border:1px solid var(--line);background:var(--panel);border-radius:16px}.stack{flex-direction:column;gap:28px;padding:32px;display:flex}.section-heading{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;display:flex}.section-heading h2{letter-spacing:-.02em;margin:0;font-size:36px;font-weight:600}.section-heading p{color:var(--muted);margin:0;font-size:15px}.stack .section-heading h2{letter-spacing:0;font-size:22px}.stack .section-heading p{font:13px var(--mono)}.stack-nodes{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.stack-item{align-items:center;gap:10px;display:flex}.stack-node{cursor:pointer;text-align:left;min-width:150px;min-height:64px;color:var(--text);background:var(--bg);border:1px solid var(--line-light);font:inherit;border-radius:12px;padding:14px 18px}.stack-node:hover{border-color:#647587}.stack-node.selected{border-color:var(--accent);background:#16202b}.stack-node span{font:11px var(--mono);color:var(--muted);letter-spacing:.06em;text-transform:uppercase;display:block}.stack-node strong{margin-top:6px;font-size:16px;display:block}.stack-arrow{color:#3a424d;font-size:22px}.stack-detail{border-top:1px solid var(--line);grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding-top:24px;display:grid}.stack-detail h3{margin:8px 0 0;font-size:24px}.stack-detail>p{color:#b4bbc5;margin:0;font-size:16px;line-height:1.6}.eyebrow{font:12px var(--mono);letter-spacing:.06em;text-transform:uppercase;margin:0}.muted{color:var(--muted)}.section{padding-top:112px}.project-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:32px;display:grid}.project-card{flex-direction:column;gap:16px;padding:28px;display:flex}.project-card h3{margin:0;font-size:22px;font-weight:600;line-height:1.25}.project-description{color:#b4bbc5;flex-grow:1;margin:0;font-size:15px;line-height:1.6}.tags,.skills{color:var(--secondary);font:12px var(--mono);flex-wrap:wrap;gap:8px;display:flex}.tags>.tech-tag{border:1px solid var(--line-light);border-radius:6px;padding:5px 9px}.story-link{font-weight:500}.lab-list{border-top:1px solid var(--line);margin-top:24px}.lab-item{border-bottom:1px solid var(--line);color:var(--text);flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;padding:22px 0;display:flex}.lab-copy{flex-direction:column;flex:520px;gap:6px;display:flex}.lab-copy strong{font-size:19px}.lab-copy>span{color:#b4bbc5;font-size:15px;line-height:1.5}.lab-stack{font:13px var(--mono);color:var(--muted)}.lab-arrow{color:var(--accent);margin-left:8px}.lab-item:hover strong{color:var(--accent)}.about{flex-wrap:wrap;align-items:flex-start;gap:48px;display:flex}.about-mark{aspect-ratio:1;background:var(--panel);border:1px solid var(--line-light);color:var(--accent);border-radius:20px;flex:0 280px;justify-content:center;align-items:center;font:128px Noto Serif JP,serif;display:flex}.about-copy{flex-direction:column;flex:480px;gap:20px;display:flex}.about-copy h2{letter-spacing:-.02em;margin:0;font-size:36px}.about-copy p{color:var(--secondary);margin:0;font-size:18px;line-height:1.65}.skills{padding-top:4px;font-size:13px}.skills>.tech-tag{background:#161b22;border-radius:6px;padding:6px 10px}.contact{flex-direction:column;align-items:flex-start;gap:24px;padding:128px 0 96px;display:flex}.contact h2{letter-spacing:-.035em;margin:0;font-size:clamp(40px,6vw,72px);font-weight:600;line-height:1.05}.contact p{color:#b4bbc5;max-width:600px;margin:0;font-size:18px;line-height:1.6}footer{border-top:1px solid var(--line);font:13px var(--mono);color:var(--muted);flex-wrap:wrap;justify-content:space-between;gap:12px;padding:28px 0 40px;display:flex}.case-study{padding-top:72px}.case-label{color:var(--accent);font:13px var(--mono);margin:0 0 24px}.case-study h1{letter-spacing:-.03em;margin:0 0 24px;font-size:clamp(36px,5vw,56px);font-weight:600;line-height:1.08}.case-study .case-intro{color:#b4bbc5;margin:0 0 24px;font-size:20px;line-height:1.6}.case-study .case-meta{font:14px/1.7 var(--mono);color:var(--muted);margin:0 0 40px}.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}.stats>div{border:1px solid var(--line);border-radius:14px;flex-direction:column;gap:8px;padding:24px;display:flex}.stats strong{letter-spacing:-.03em;color:var(--accent);font-size:40px}.stats span{color:#b4bbc5;font-size:15px;line-height:1.5}.case-study h2{letter-spacing:-.02em;margin:80px 0 20px;font-size:26px}.case-study h3{margin:28px 0 8px;font-size:18px}.case-study>p:not(.case-label):not(.case-intro):not(.case-meta){color:var(--secondary);margin:0;font-size:17px;line-height:1.7}.auth-diagram{border:1px solid var(--line);background:var(--panel);border-radius:16px;flex-direction:column;align-items:center;gap:24px;margin:0;padding:36px 28px;display:flex}.auth-flow{flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;display:flex}.auth-flow span,.auth-result{border:1px solid var(--line-light);text-align:center;border-radius:12px;min-width:110px;padding:14px 18px;font-weight:600}.auth-flow .auth-active{border-color:var(--accent);background:#16202b;min-width:150px}.auth-flow b,.auth-down{color:#4a5360;font-size:24px;font-weight:400}.auth-result{min-width:240px}.auth-result small{color:var(--muted);margin-top:4px;font-size:13px;font-weight:400;display:block}.auth-diagram figcaption{color:var(--muted);text-align:center;max-width:600px;font-size:15px;line-height:1.6}.case-nav{border-top:1px solid var(--line);justify-content:space-between;gap:16px;margin-top:96px;padding:32px 0 64px;display:flex}.case-nav a:first-child{color:var(--secondary)}@media (width<=800px){.project-grid{grid-template-columns:1fr 1fr}.project-card:last-child{grid-column:1/-1}.about-mark{flex-basis:200px}}@media (width<=560px){.container{padding:0 20px}.header{padding:20px 0}.header nav{gap:16px}.header nav>a:not(.button){font-size:14px}.hero{padding:72px 0 56px}.hero-copy{font-size:18px}.stack{padding:22px}.stack-nodes,.stack-item{gap:8px}.stack-node{min-width:0;padding:12px}.stack-arrow{font-size:18px}.stack-detail{grid-template-columns:1fr;gap:12px}.section{padding-top:80px}.section-heading h2,.about-copy h2{font-size:30px}.project-grid{grid-template-columns:1fr}.project-card:last-child{grid-column:auto}.about{gap:28px}.about-mark{flex-basis:160px;font-size:80px}.contact{padding:96px 0 72px}.stats{grid-template-columns:1fr}.case-study{padding-top:52px}.auth-diagram{padding:28px 16px}.auth-flow{gap:8px}.auth-flow span{min-width:0;padding:12px}.auth-flow .auth-active{min-width:0}.case-study h2{margin-top:64px}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}.contact-actions{flex-wrap:wrap;align-items:stretch;gap:12px;display:flex}.email-copy{border:1px solid var(--accent);background:#10141a;border-radius:10px;align-items:center;min-height:54px;padding:4px;display:flex}.email-address{font:14px var(--mono);color:var(--text);white-space:nowrap;padding:0 12px}.copy-button{background:var(--accent);color:var(--bg);cursor:pointer;border:0;border-radius:7px;align-self:stretch;padding:0 16px;font:500 14px Geist,system-ui,sans-serif}.copy-button:hover:not(:disabled){background:#b5ddff}.copy-button:disabled{cursor:not-allowed}.contact-link{min-height:54px;padding:13px 22px}.contact-link.unavailable{cursor:not-allowed}.copy-status{color:var(--secondary);font-size:14px}.copy-status:empty{display:none}@media (width<=420px){.email-copy{max-width:100%}.email-address{padding:0 8px;font-size:12px}.contact-actions{gap:8px}.contact-link{padding:13px 16px}}.contact-form{flex-direction:column;align-self:center;align-items:stretch;gap:8px;width:min(100%,704px);margin-top:2.4px;padding:28px;display:flex}.contact-form h3{margin:0 0 12px;font-size:18px;font-weight:600}.contact-form label{color:var(--secondary);font-size:14px}.contact-form input,.contact-form textarea{border:1px solid var(--line-light);background:var(--bg);width:100%;color:var(--text);border-radius:10px;margin-bottom:10px;padding:12px;font:16px Geist,system-ui,sans-serif}.contact-form input{height:47px}.contact-form textarea{resize:vertical;min-height:130px}.contact-form input:focus-visible,.contact-form textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.contact-form .button{cursor:pointer;align-self:flex-start;font:500 15px Geist,system-ui,sans-serif}.contact-form .button:disabled{cursor:not-allowed}.contact .contact-form .form-note{color:var(--muted);margin:4px 0 0;font-size:13px;line-height:1.5}@media (width<=560px){.contact-form{padding:24px}}.contact-fields{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px;display:grid}.contact-field{flex-direction:column;gap:8px;min-width:0;display:flex}.contact-field input{margin-bottom:10px}.stack-node{transition:background-color .22s,border-color .22s,transform .22s}.stack-node.selected{transform:translateY(-2px)}.stack-detail-content{display:contents}.stack-detail-content>div,.stack-detail-content>p{animation:.24s ease-out both stack-glide}.stack-detail-content>p{color:#b4bbc5;margin:0;font-size:16px;line-height:1.6}@keyframes stack-glide{0%{opacity:.55;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.stack-node.selected{transform:none}.stack-detail-content>div,.stack-detail-content>p{animation:none}}.button-icon{flex:none;width:17px;height:17px}.button,.copy-button{gap:8px}.copy-button{justify-content:center;align-items:center;display:inline-flex}.about-mark{isolation:isolate;position:relative;overflow:hidden;box-shadow:0 18px 48px #0000003d}.about-mark img{object-fit:cover;object-position:center;border-radius:12px;width:calc(100% - 32px);height:calc(100% - 32px);display:block;mask-image:radial-gradient(#000 36%,#000000c2 60%,#0000 94%)}.about-mark:after{content:"";pointer-events:none;background:linear-gradient(#0000 58%,#10141a2e 100%);border-radius:12px;position:absolute;inset:16px;mask-image:radial-gradient(#000 36%,#000000c2 60%,#0000 94%)}.tags>.tech-tag,.skills>.tech-tag{background:color-mix(in srgb,var(--tech-color) 9%,#11151b);border:1px solid color-mix(in srgb,var(--tech-color) 23%,#1e242c)}.tech-part{white-space:pre-wrap}.contact-direct{flex-wrap:wrap;align-items:center;gap:20px;max-width:100%;display:flex}.arch-sticker{color:#8bb6cc;font:16px var(--mono);white-space:nowrap;opacity:.78;background:#121b24;border:1px solid #344353;border-radius:7px;align-items:center;gap:7px;padding:7px 10px;display:inline-flex;transform:rotate(-10deg)}.arch-sticker svg{color:#80b9d2;flex:none;width:30px;height:30px}@media (width<=800px){.contact-direct{gap:14px}.arch-sticker{transform:none}}.contact-form-area{flex-direction:column;align-items:center;width:100%;display:flex;position:relative}.contact-form-area .arch-sticker{margin-top:18px;transform:none}@media (width>=1100px){.contact-form-area .arch-sticker{margin-top:0;position:absolute;top:20px;left:calc(50% + 368px);transform:rotate(-10deg)}}.status-dot{position:relative}.status-dot:after{content:"";pointer-events:none;border:1px solid #4ade80;border-radius:50%;animation:2.4s ease-out infinite status-radar;position:absolute;inset:0}@keyframes status-radar{0%{opacity:.7;transform:scale(1)}75%,to{opacity:0;transform:scale(2.8)}}@media (prefers-reduced-motion:reduce){.status-dot:after{animation:none;display:none}}.copy-button{transition:background-color .2s}.copy-button.copied,.copy-button.copied:hover:not(:disabled){background:#4ade80}.copy-icon,.check-icon{line-height:0}.check-icon,.copy-button.copied .copy-icon{display:none}.copy-button.copied .check-icon{display:inline-flex}@media (width<=870px){.about{flex-direction:column;align-items:center}.about-copy{display:contents}.about-copy h2{text-align:center;order:-2}.about-mark{flex:none;order:-1;width:240px}}.contact-honeypot{width:1px;height:1px;position:absolute;left:-10000px;overflow:hidden}.contact .contact-form .contact-form-status{color:#a3d5b5;margin:0;font-size:14px;line-height:1.5}.contact-form-status:empty{display:none}.contact .contact-form .contact-form-status.is-error{color:#efaaa5}.contact-form .button:disabled{opacity:.65}