@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap');
:root{--ink:#111;--paper:#f5f4ef;--muted:#aaa9a2;--line:#d8d7cf;--lime:#dfff4f;--blue:#5a73ff;--orange:#ff6a36;--max:1240px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Zen Kaku Gothic New',sans-serif}a{color:inherit;text-decoration:none}button{font:inherit}.noise{position:fixed;inset:0;pointer-events:none;opacity:.04;z-index:20;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.section-pad{padding-left:max(6vw,24px);padding-right:max(6vw,24px)}.site-header{height:80px;display:flex;align-items:center;justify-content:space-between;max-width:var(--max);margin:auto;padding:0 max(6vw,24px);border-bottom:1px solid var(--line)}.brand{display:flex;gap:11px;align-items:center;font:700 14px 'Space Grotesk';letter-spacing:.08em}.brand-mark{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:var(--ink);color:var(--lime);font-size:10px}.accent{color:var(--orange)}.desktop-nav{display:flex;gap:34px;font:500 11px 'DM Mono';letter-spacing:.04em}.desktop-nav a,.mobile-menu a{transition:color .2s}.desktop-nav a:hover,.mobile-menu a:hover,.project-link:hover{color:var(--orange)}.desktop-nav span,.filter span{color:var(--muted);margin-left:5px}.menu-button{display:none;background:none;border:0;font:500 11px 'DM Mono'}.menu-button span{font-size:18px;margin-left:8px}.mobile-menu{padding:20px 24px;background:var(--ink);color:var(--paper);display:grid;gap:15px;font:500 13px 'DM Mono'}.hero{max-width:var(--max);margin:auto;padding-top:48px;padding-bottom:60px;min-height:calc(100vh - 80px);display:flex;flex-direction:column}.hero-kicker,.eyebrow,.project-meta,.filter-bar,.scroll-cue{font:500 10px 'DM Mono';letter-spacing:.07em}.hero-kicker{display:flex;gap:13px;color:#5f5e57;align-items:center}.hero-kicker span:last-child{margin-left:auto}.status-dot{width:7px;height:7px;background:#42be5c;border-radius:50%;box-shadow:0 0 0 5px #42be5c20}.hero-layout{display:grid;grid-template-columns:1.02fr .98fr;gap:4vw;align-items:center;flex:1}.hero-copy{padding:70px 0}.hero h1{font:900 clamp(56px,9vw,128px)/.94 'Zen Kaku Gothic New';letter-spacing:-.095em;margin:22px 0 30px}.hero h1 em,.section-heading h2 em,.about-grid h2 em{font-style:normal;color:var(--blue)}.hero-lede{max-width:450px;color:#5c5b55;line-height:2;font-size:15px}.hero-actions{display:flex;gap:28px;align-items:center;margin-top:35px}.button{display:inline-flex;align-items:center;gap:28px;padding:16px 20px;border:1px solid var(--ink);font:700 11px 'DM Mono';letter-spacing:.04em;transition:transform .2s,box-shadow .2s}.button:hover{transform:translate(-3px,-3px);box-shadow:5px 5px var(--ink)}.button-primary{background:var(--lime)}.button-light{background:var(--paper)}.text-link,.project-link{font:500 11px 'DM Mono';border-bottom:1px solid var(--ink);padding-bottom:4px}.hero-art{height:min(550px,50vw);min-height:360px;background:var(--ink);position:relative;overflow:hidden;color:var(--paper)}.art-grid{position:absolute;inset:0;opacity:.14;background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);background-size:42px 42px}.art-ring{position:absolute;border:1px solid var(--lime);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}.ring-one{width:65%;aspect-ratio:1}.ring-two{width:38%;aspect-ratio:1;border-color:var(--blue)}.art-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-25deg);font:900 60px 'Space Grotesk';color:var(--orange)}.art-label{position:absolute;font:500 10px/1.4 'DM Mono';letter-spacing:.1em}.label-top{top:23px;left:24px}.label-top strong{font-size:22px;color:var(--lime)}.label-bottom{right:24px;bottom:23px;text-align:right}.scroll-cue{display:flex;align-items:center;gap:13px;color:var(--muted)}.scroll-cue span{width:32px;height:1px;background:var(--ink)}.section-heading{display:flex;justify-content:space-between;align-items:end;border-top:1px solid var(--ink);padding-top:17px;margin-bottom:55px}.section-heading h2{font:900 clamp(42px,7vw,92px)/.95 'Zen Kaku Gothic New';letter-spacing:-.09em;margin:22px 0 0}.section-note{color:#73716b;font-size:13px;line-height:1.9;text-align:right}.works{max-width:var(--max);margin:auto;padding-top:100px;padding-bottom:130px}.filter-bar{display:flex;gap:25px;border-bottom:1px solid var(--line);padding-bottom:15px;margin-bottom:28px}.filter{cursor:pointer;border:0;background:none;color:var(--muted);font:500 10px 'DM Mono';padding:0}.filter.is-active,.filter:hover{color:var(--ink)}.filter.is-active:before{content:'●';color:var(--orange);margin-right:8px}.project-list{display:grid;grid-template-columns:repeat(2,1fr);gap:70px 24px}.project-card{position:relative;display:grid;grid-template-columns:44% 1fr;gap:23px;align-items:center}.project-featured{grid-column:span 2;grid-template-columns:52% 1fr}.project-card.is-hidden{display:none}.project-number{position:absolute;top:-23px;left:0;font:500 10px 'DM Mono';color:var(--muted)}.project-visual{aspect-ratio:1.25;position:relative;overflow:hidden}.visual-mojule{background:var(--blue);padding:12%;display:grid;place-items:center}.visual-window{width:90%;height:75%;background:var(--paper);border:1px solid var(--ink);box-shadow:10px 10px var(--ink);padding:14px;display:grid;grid-template-columns:repeat(3,8px) 1fr;gap:6px;align-content:start}.visual-window i{width:7px;height:7px;border-radius:50%;background:var(--orange)}.visual-window i:nth-child(2){background:var(--lime)}.visual-window i:nth-child(3){background:var(--blue)}.visual-window b{grid-column:4;font:500 8px 'DM Mono';text-align:right}.visual-window div{height:10px;background:#d9d9d2;margin-top:20px}.visual-window div:nth-of-type(2){width:70%;background:var(--lime)}.visual-window div:nth-of-type(3){width:55%;background:var(--orange)}.visual-stamp{position:absolute;bottom:17px;left:17px;font:700 12px/1.1 'Space Grotesk';letter-spacing:.05em;color:var(--paper)}.visual-asobi{background:var(--orange);color:var(--ink)}.pixel-sun{position:absolute;top:15%;right:15%;font-size:58px}.pixel-ground{position:absolute;bottom:0;inset-inline:0;height:30%;background:var(--lime);clip-path:polygon(0 35%,20% 0,45% 32%,63% 5%,100% 40%,100% 100%,0 100%)}.visual-title{position:absolute;left:11%;bottom:19%;font:700 35px/.85 'Space Grotesk';letter-spacing:-.08em}.visual-title span{color:var(--paper)}.visual-koko{background:var(--lime);padding:14%;display:grid;place-items:center}.koko-lines{position:absolute;inset:10%;background:repeating-linear-gradient(0deg,transparent 0 22px,#111 23px 24px);opacity:.18}.koko-window{position:relative;background:var(--paper);padding:18px 22px;font:700 18px/1.15 'DM Mono';box-shadow:8px 8px var(--ink)}.koko-window span{color:var(--orange);font-size:32px}.visual-asl{background:var(--ink);color:var(--paper);padding:12%;font:500 17px/1.3 'DM Mono'}.asl-code{position:relative;z-index:1}.asl-code span{color:var(--lime)}.asl-code b{color:var(--orange)}.asl-orbit{position:absolute;right:-8%;bottom:-35%;width:80%;aspect-ratio:1;border:1px solid var(--blue);border-radius:50%;box-shadow:0 0 0 30px #5a73ff22,0 0 0 60px #5a73ff17}.project-meta{display:flex;justify-content:space-between;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:10px}.project-info h3{font:700 clamp(25px,3vw,42px) 'Space Grotesk';margin:18px 0 12px;letter-spacing:-.05em}.project-info p{color:#686760;line-height:1.9;font-size:13px;margin:0 0 24px}.github-pulse{max-width:var(--max);margin:auto;padding-top:100px;padding-bottom:110px;display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center;border-top:1px solid var(--ink)}.github-pulse h2{font:900 clamp(42px,6vw,78px)/.95 'Zen Kaku Gothic New';letter-spacing:-.09em;margin:22px 0}.github-pulse h2 em{font-style:normal;color:var(--blue)}.pulse-copy>p:not(.eyebrow){max-width:430px;color:#686760;line-height:1.95;font-size:14px;margin-bottom:30px}.tech-stack{display:flex;flex-wrap:wrap;gap:10px}.tech-stack span{padding:12px 15px;border:1px solid var(--ink);font:500 11px 'DM Mono';background:var(--paper);transition:background .2s,transform .2s}.tech-stack span:nth-child(3n){background:var(--lime)}.tech-stack span:nth-child(4n){background:var(--orange)}.tech-stack span:hover{transform:translate(-2px,-2px)}.approach{background:var(--ink);color:var(--paper);padding-top:110px;padding-bottom:120px}.approach .section-heading{border-color:#555}.approach .section-note,.approach .eyebrow{color:#aaa}.approach h2 em{color:var(--lime)}.steps{max-width:var(--max);margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#555}.step{background:var(--ink);padding:30px 25px 10px;min-height:250px}.step>span{font:500 11px 'DM Mono';color:var(--orange)}.step h3{font-size:28px;margin:55px 0 15px}.step p{color:#aaa;line-height:1.9;font-size:13px}.about{max-width:var(--max);margin:auto;padding-top:110px;padding-bottom:110px}.about-card{background:var(--orange);padding:22px 30px 65px}.about-top{display:flex;justify-content:space-between;border-bottom:1px solid #111;padding-bottom:16px;font:500 10px 'DM Mono'}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:8vw;margin-top:75px}.about-grid h2{font:900 clamp(45px,6vw,80px)/.95 'Zen Kaku Gothic New';letter-spacing:-.09em;margin:0}.about-grid p{line-height:2;font-size:14px;margin-top:0;margin-bottom:18px}.site-footer{max-width:var(--max);margin:auto;border-top:1px solid var(--ink);padding-top:22px;padding-bottom:35px;display:flex;justify-content:space-between;font:500 10px 'DM Mono'}.site-footer a{border-bottom:1px solid var(--ink)}
@media(max-width:760px){.github-pulse{display:block;padding-top:75px;padding-bottom:85px}.tech-stack{margin-top:45px}.github-pulse h2{font-size:55px}.site-header{height:66px}.desktop-nav{display:none}.menu-button{display:block}.hero{min-height:auto;padding-top:30px}.hero-kicker{font-size:8px}.hero-kicker span:last-child{display:none}.hero-layout{display:block}.hero-copy{padding:70px 0 55px}.hero h1{font-size:clamp(57px,17vw,100px)}.hero-lede{font-size:13px}.hero-art{height:380px}.hero-actions{flex-wrap:wrap}.section-heading{display:block;margin-bottom:35px}.section-note{text-align:left;margin-top:25px}.works,.about,.approach{padding-top:75px;padding-bottom:85px}.project-list{display:block}.project-card,.project-featured{display:grid;grid-template-columns:1fr;gap:18px;margin-bottom:65px}.project-visual{aspect-ratio:1.5}.project-info h3{font-size:31px}.steps{display:block;background:none}.step{border-bottom:1px solid #555;padding:25px 0;min-height:auto}.step h3{margin:28px 0 12px}.about-card{padding:18px 19px 35px}.about-grid{display:block;margin-top:45px}.about-grid h2{font-size:52px;margin-bottom:35px}.site-footer{display:grid;gap:15px}.filter-bar{overflow:auto;white-space:nowrap}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}}


/* リッチな表現レイヤー: Tailwindのテーマトークンと共存するサイト固有表現 */
::selection { background: var(--lime); color: var(--ink); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
#api-status { transition: background .25s ease, color .25s ease, border-color .25s ease; }
.api-pill { border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; color: var(--muted); background: rgba(255,255,255,.45); }
.api-pill[data-ready="true"] { color: #25783c; border-color: #8ad49c; background: #e7f7e9; }
.hero { position: relative; isolation: isolate; }
.hero::before { content: ""; position: absolute; width: 34vw; height: 34vw; max-width: 480px; max-height: 480px; left: -18vw; top: 16%; border: 1px solid var(--line); border-radius: 50%; z-index: -1; opacity: .7; }
.hero-art { box-shadow: 18px 18px 0 var(--lime); transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease; }
.hero-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 45%, rgba(223,255,79,.12) 45%, transparent 62%); pointer-events: none; }
.hero-art:hover { transform: translate(-5px,-5px) rotate(.5deg); box-shadow: 24px 24px 0 var(--orange); }
.art-ring { animation: orbit 18s linear infinite; }
.ring-two { animation-direction: reverse; animation-duration: 12s; }
.project-card { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.project-card:hover { transform: translateY(-8px); }
.project-card:hover .project-visual { box-shadow: 10px 10px 0 var(--ink); }
.project-visual { transition: box-shadow .35s ease, transform .35s ease; }
.project-link { position: relative; display: inline-block; }
.project-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: right; transition: transform .3s ease; }
.project-link:hover::after { transform: scaleX(1); transform-origin: left; }
.tech-stack span { box-shadow: 3px 3px 0 transparent; }
.tech-stack span:hover { box-shadow: 3px 3px 0 var(--ink); }
.step { position: relative; overflow: hidden; }
.step::after { content: "→"; position: absolute; right: 24px; top: 24px; color: var(--orange); font: 24px 'Space Grotesk'; opacity: .35; transition: transform .3s ease, opacity .3s ease; }
.step:hover::after { opacity: 1; transform: translateX(7px); }
.about-card { position: relative; overflow: hidden; }
.about-card::after { content: "IN"; position: absolute; right: 2%; bottom: -22%; color: rgba(17,17,17,.08); font: 900 30vw/.7 'Space Grotesk'; pointer-events: none; }
@keyframes orbit { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .art-ring, .hero-art, .project-card, .project-visual, .button, .project-link::after { animation: none; transition: none; }
  .hero-art:hover, .project-card:hover { transform: none; }
}
@media (max-width: 760px) {
  .hero-art { box-shadow: 10px 10px 0 var(--lime); }
  .hero-art:hover { box-shadow: 10px 10px 0 var(--orange); }
  .api-pill { padding: 4px 7px; font-size: 8px; }
}

.repo-links { display:flex; flex-wrap:wrap; gap:9px 18px; margin: 8px 0 28px; max-width: 520px; }
.repo-links a { font:500 11px 'DM Mono'; border-bottom:1px solid var(--ink); padding-bottom:4px; }
.repo-links a:hover { color:var(--orange); }
.profile-details { display:grid; gap:8px; }
.profile-details span { display:block; }
.profile-details a { border-bottom:1px solid rgba(17,17,17,.35); }
.profile-actions { display:flex; align-items:center; gap:22px; margin-top:28px; }
@media(max-width:760px){.profile-actions{flex-wrap:wrap}.repo-links{gap:9px 14px}}