@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+JP:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#0b0b0d;--panel:#141417;--line:#303034;--text:#f5f4f2;--muted:#a6a5a5;--red:#e44442;font-family:Manrope,'Noto Sans JP',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);min-width:320px}a{color:inherit;text-decoration:none}button,a{-webkit-tap-highlight-color:transparent}::selection{background:var(--red);color:white}.grain{position:fixed;inset:0;z-index:20;pointer-events:none;opacity:.12;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='.6' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E")}.site-header{height:86px;padding:0 clamp(24px,5vw,88px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;position:relative;z-index:5}.wordmark{font-size:23px;font-weight:800;letter-spacing:-.09em}.brand-mark,.red-dot{color:var(--red)}.site-header nav{display:flex;gap:clamp(20px,3vw,48px);font:500 11px 'DM Mono',monospace;letter-spacing:.1em}.site-header nav a,.github-link,footer a{transition:color .2s}.site-header nav a:hover,.github-link:hover,footer a:hover{color:var(--red)}.header-index,.eyebrow,.hero-side,.hero-number,.section-top,.project-type,.project-id,.tags,.visual-caption,.visual-corner,.skill-group h3,.skill-list,.github-link,footer,.pet-bubble{font-family:'DM Mono',monospace}.header-index{font-size:10px;color:#777;letter-spacing:.08em}.hero{min-height:min(780px,calc(100svh - 86px));position:relative;border-bottom:1px solid var(--line);display:flex;align-items:center;overflow:hidden}.hero:before{content:"";position:absolute;top:-26%;right:-20%;width:70vw;height:70vw;border:1px solid #252528;border-radius:50%;pointer-events:none}.hero:after{content:"";position:absolute;top:-12%;right:-12%;width:50vw;height:50vw;border:1px solid #1f1f22;border-radius:50%;pointer-events:none}.hero-inner{position:relative;z-index:1;width:min(1320px,100%);margin:auto;padding:84px clamp(24px,9vw,150px) 95px}.eyebrow{display:flex;align-items:center;gap:14px;color:#bbb;font-size:11px;letter-spacing:.19em}.red-line{height:2px;width:26px;background:var(--red)}h1,h2,h3,p{margin-top:0}.hero h1{font-family:'Noto Sans JP',sans-serif;font-size:clamp(62px,9vw,144px);line-height:1.23;letter-spacing:-.075em;margin:35px 0 49px;font-weight:800}.hero h1 em{font-style:normal;color:var(--red)}.hero-bottom{display:flex;align-items:end;justify-content:space-between;max-width:780px}.hero-bottom p{font-size:clamp(15px,1.4vw,18px);line-height:2;color:#c4c3c3;margin:0}.round-link{border:1px solid #777;border-radius:50%;width:62px;height:62px;display:grid;place-items:center;font-size:28px;transition:background .2s,border-color .2s,transform .2s}.round-link:hover{background:var(--red);border-color:var(--red);transform:translateY(5px)}.hero-side{position:absolute;right:32px;top:50%;writing-mode:vertical-rl;color:#656568;letter-spacing:.28em;font-size:10px}.hero-number{position:absolute;bottom:35px;right:clamp(24px,5vw,88px);font-size:11px;color:#69696b}.section-wrap{padding:105px clamp(24px,5vw,88px)}.section-top{display:flex;align-items:center;gap:25px;font-size:11px;letter-spacing:.1em}.section-label{color:var(--red);white-space:nowrap}.section-rule{height:1px;background:var(--line);flex:1}.section-note{color:#6e6d70;white-space:nowrap}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin:62px 0 38px}.section-heading h2{font-size:clamp(32px,4vw,58px);letter-spacing:-.075em;line-height:1.2;margin:0}.section-heading p{color:var(--muted);font-size:14px;margin:0 0 6px}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.project-feature{grid-column:1/-1}.project-card{border:1px solid var(--line);background:var(--panel);overflow:hidden;transition:border-color .25s,transform .25s}.project-card:hover{border-color:#777;transform:translateY(-4px)}.project-visual{height:310px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}.project-feature .project-visual{height:390px}.visual-caption,.visual-corner{position:absolute;z-index:2;font-size:10px;letter-spacing:.1em;color:#888}.visual-caption{left:26px;top:24px}.visual-corner{right:26px;bottom:22px}.robot-visual{background:radial-gradient(ellipse at 50% 48%,#272229 0,#161519 43%,#111114 80%)}.robot-visual:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff09 1px,transparent 1px),linear-gradient(90deg,#ffffff09 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(to bottom,transparent,#000 25%,#000 75%,transparent)}.diagram{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;width:min(780px,85%)}.diagram-node{border:1px solid #777;background:#17171b;padding:31px 12px;text-align:center;flex:1;font-size:clamp(16px,2.5vw,34px);font-weight:800;letter-spacing:-.06em;box-shadow:0 0 35px #0008}.diagram-node:nth-of-type(2){border-color:var(--red);box-shadow:0 0 44px #e4444218}.diagram-node span{display:block;font:400 10px 'DM Mono',monospace;letter-spacing:.12em;color:#aaa;margin-top:8px}.diagram-link{height:1px;width:clamp(18px,5vw,95px);background:var(--red);flex-shrink:0;position:relative}.diagram-link:after{content:"";position:absolute;right:0;top:-3px;border:4px solid transparent;border-left-color:var(--red)}.signal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:540px;height:540px;display:grid;place-items:center}.signal i{position:absolute;width:55%;height:55%;border:1px solid #e4444213;border-radius:50%}.signal i:nth-child(2){width:75%;height:75%}.signal i:nth-child(3){width:100%;height:100%}.project-info{padding:30px 32px 10px;display:flex;justify-content:space-between;gap:22px}.project-type{color:var(--red);font-size:10px;letter-spacing:.13em}.project-info h3{font-size:clamp(22px,2.5vw,31px);letter-spacing:-.06em;margin:10px 0 13px}.project-info p{font-size:15px;line-height:1.9;color:#bab9ba;max-width:650px;margin:0}.project-id{font-size:13px;color:#777}.tags{display:flex;flex-wrap:wrap;gap:8px;padding:24px 32px 30px}.tags span{font-size:10px;color:#aaa;border:1px solid #414146;padding:7px 10px}.game-visual{background:radial-gradient(circle at 50% 20%,#34252d,#18171c 54%,#111114)}.game-window{position:absolute;width:min(390px,75%);height:230px;left:50%;top:56%;transform:translate(-50%,-50%) rotate(-3deg);border:1px solid #6b555a;background:#1d1a20;box-shadow:18px 20px 0 #0a0a0d,0 0 80px #bd45442a}.window-dots{position:absolute;top:10px;left:15px;font-size:7px;color:#a96b75;letter-spacing:4px}.game-orbit{position:absolute;left:42%;top:20%;width:110px;height:110px;border:1px solid #b2677088;border-radius:50%;box-shadow:0 0 35px #ec646025}.game-orbit:before,.game-orbit:after{content:"";position:absolute;border:1px solid #b2677099;border-radius:50%;inset:14px}.game-orbit:after{inset:38px;background:var(--red);box-shadow:0 0 35px var(--red)}.dialogue{position:absolute;left:19px;right:19px;bottom:15px;height:66px;border:1px solid #82757a;background:#17151acc;padding:17px}.dialogue-line{display:block;width:75%;height:5px;background:#bcb2b6;margin-bottom:12px}.dialogue-line.short{width:48%;background:#736d70}.dialogue-caret{position:absolute;right:15px;bottom:8px;font-size:12px;color:var(--red)}.bot-visual{background:radial-gradient(circle at 50% 20%,#242728,#151719 65%,#101113)}.terminal{position:absolute;width:min(420px,79%);height:205px;left:50%;top:55%;transform:translate(-50%,-50%) rotate(2deg);background:#101113;border:1px solid #565e60;box-shadow:-17px 18px 0 #090a0b,0 0 70px #ffffff0b}.terminal-top{height:34px;border-bottom:1px solid #34383a;display:flex;align-items:center;justify-content:space-between;padding:0 14px;color:#7a8485;font:10px 'DM Mono',monospace}.terminal-top span:first-child{color:#e26360}.terminal-body{padding:18px 20px;font:12px/1.8 'DM Mono',monospace;color:#e2e1df}.terminal-body p{margin:0 0 7px}.terminal-body b{color:var(--red);font-weight:400}.terminal-body .muted{color:#677072;margin-top:17px}.terminal-cursor{color:var(--red);animation:blink 1s steps(2) infinite}@keyframes blink{50%{opacity:0}}.about{border-top:1px solid var(--line);background:#111113}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;padding-top:80px}.about h2{font-size:clamp(42px,5vw,76px);line-height:1.35;letter-spacing:-.08em;margin:0}.about h2 span{color:var(--red)}.about-content{max-width:590px}.about-content p{color:#aaa;line-height:2.1;font-size:16px}.about-content .about-lead{font-size:clamp(18px,2vw,25px);line-height:1.8;color:var(--text);font-weight:600;margin-bottom:30px}.skill-group{margin-top:48px}.skill-group h3{font-size:11px;letter-spacing:.12em;color:var(--red);font-weight:400;margin-bottom:17px}.skill-list{display:flex;flex-wrap:wrap;gap:9px}.skill-list span{border:1px solid #46464a;padding:10px 13px;font-size:11px;color:#d3d1d1}.contact{border-top:1px solid var(--line);padding-bottom:135px}.contact-row{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-top:77px}.contact-row p{font-size:15px;color:#aaa;margin-bottom:25px}.contact h2{font-size:clamp(44px,6vw,90px);line-height:1.3;letter-spacing:-.08em;margin:0}.github-link{border-bottom:1px solid var(--red);padding:15px 0;font-size:14px;white-space:nowrap}.github-link span{font-family:sans-serif;margin-left:40px;font-size:19px}footer{border-top:1px solid var(--line);padding:30px clamp(24px,5vw,88px);display:flex;justify-content:space-between;color:#777;font-size:10px;letter-spacing:.08em}.pet{position:fixed;z-index:30;width:108px;height:117px;left:0;top:0;pointer-events:none;transform:translate3d(calc(100vw - 140px),calc(100vh - 135px),0);filter:drop-shadow(0 8px 9px #0009)}.pet canvas{display:block;width:108px;height:117px;image-rendering:auto}.pet-bubble{position:absolute;left:50%;top:-17px;transform:translateX(-50%);padding:4px 9px;background:#fff;color:#222;border-radius:20px;font-size:10px;white-space:nowrap;opacity:0;transition:opacity .2s}.pet:hover .pet-bubble{opacity:1}
@media(max-width:760px){.site-header{height:68px}.header-index{display:none}.site-header nav{gap:17px;font-size:9px}.hero{min-height:650px}.hero-inner{padding:80px 28px 110px}.hero h1{font-size:clamp(55px,12vw,86px);margin:55px 0}.hero:before{width:100vw;height:100vw;right:-45%;top:10%}.hero:after{width:70vw;height:70vw;right:-30%;top:20%}.hero-side{display:none}.hero-number{bottom:25px}.section-wrap{padding:78px 24px}.section-heading{display:block;margin:50px 0 30px}.section-heading p{margin-top:17px}.project-grid{grid-template-columns:1fr}.project-feature{grid-column:auto}.project-feature .project-visual,.project-visual{height:265px}.diagram{width:90%}.diagram-node{padding:20px 6px;font-size:16px}.diagram-node span{font-size:7px}.diagram-link{width:18px}.signal{width:380px;height:380px}.project-info{padding:24px 22px 5px}.tags{padding:20px 22px 25px}.about-grid{grid-template-columns:1fr;gap:30px;padding-top:55px}.contact-row{display:block;margin-top:55px}.github-link{display:inline-block;margin-top:40px}footer{gap:20px;flex-wrap:wrap}.pet{width:85px;height:92px}.pet canvas{width:85px;height:92px}}@media(max-width:390px){.wordmark{font-size:19px}.site-header nav{gap:10px;font-size:8px}.eyebrow{font-size:9px}.hero h1{font-size:52px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* The same Shizuku sprite is also featured as a still portrait in the hero. */
.hero-inner .eyebrow,.hero-inner h1,.hero-inner .hero-bottom{position:relative;z-index:2}
.hero h1{font-size:clamp(60px,7.2vw,112px)}
.hero-companion{position:absolute;right:clamp(48px,8vw,130px);top:50%;transform:translateY(-50%);width:340px;height:410px;z-index:1;display:grid;place-items:center;pointer-events:none}
.hero-companion:before{content:"";position:absolute;width:330px;height:330px;border:1px solid #e4444250;border-radius:50%;background:radial-gradient(circle,#9c2a281e 5%,transparent 67%);box-shadow:0 0 85px #e4444210}
.hero-companion:after{content:"";position:absolute;width:410px;height:410px;border:1px solid #ffffff12;border-radius:50%}
.hero-character{position:relative;width:192px;height:208px;background-image:url('/assets/shizuku.png');background-repeat:no-repeat;background-position:0 0;transform:scale(1.75);filter:drop-shadow(0 18px 24px #0009)}
.companion-caption{position:absolute;bottom:-25px;font:10px 'DM Mono',monospace;letter-spacing:.16em;color:#9f9b9c}
@media(max-width:1100px){.hero-companion{right:3vw;width:270px;height:350px}.hero-companion:before{width:270px;height:270px}.hero-companion:after{width:330px;height:330px}.hero-character{transform:scale(1.45)}.hero h1{font-size:clamp(58px,7vw,83px)}}
@media(max-width:760px){.hero{min-height:690px}.hero-inner{padding-bottom:145px}.hero h1{font-size:clamp(52px,11vw,78px);margin:45px 0 110px}.hero-companion{right:0;top:53%;width:185px;height:220px}.hero-companion:before{width:170px;height:170px}.hero-companion:after{width:210px;height:210px}.hero-character{transform:scale(.97)}.companion-caption{font-size:8px;bottom:-8px}.hero-bottom{max-width:70%}.hero-bottom p{font-size:13px}.hero-bottom .round-link{display:none}}
@media(max-width:390px){.hero h1{font-size:51px}.hero-companion{right:-15px;top:54%}}
/* High-resolution Shizuku illustration replaces the scaled sprite in the hero. */
.hero-character{display:block;width:300px;height:450px;object-fit:contain;background:none;transform:none;filter:drop-shadow(0 20px 24px #0009)}
@media(max-width:1100px){.hero-character{width:250px;height:375px;transform:none}}
@media(max-width:760px){.hero-character{width:160px;height:240px;transform:none}}
/* The portrait has its own click target, while its caption stays clear below. */
.hero-companion{height:510px;pointer-events:auto}
.hero-companion:before,.hero-companion:after{pointer-events:none}
.hero-interact{position:relative;z-index:2;display:block;width:300px;height:450px;padding:0;border:0;background:none;color:inherit;cursor:pointer;animation:shizuku-float 3.6s ease-in-out infinite}
.hero-interact:focus-visible{outline:2px solid var(--red);outline-offset:8px;border-radius:18px}
.hero-character{pointer-events:none}
.companion-caption{bottom:0;left:50%;transform:translateX(-50%);white-space:nowrap;pointer-events:none}
.hero-reaction{position:absolute;z-index:4;top:14px;right:-36px;max-width:190px;padding:10px 14px;background:#f7f5f5;color:#17171a;border:1px solid var(--red);border-radius:15px 15px 15px 3px;box-shadow:0 12px 30px #0008;font-size:14px;font-weight:700;line-height:1.45;white-space:nowrap;opacity:0;visibility:hidden;transform:translateY(8px) scale(.92);transition:opacity .18s,transform .18s,visibility .18s;pointer-events:none}
.hero-interact.is-reacting .hero-reaction{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.hero-interact.is-reacting .hero-character{animation:shizuku-greet .72s ease-in-out}
@keyframes shizuku-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@keyframes shizuku-greet{0%,100%{transform:translateY(0) rotate(0)}35%{transform:translateY(-19px) rotate(-5deg)}65%{transform:translateY(-5px) rotate(5deg)}}
@media(max-width:1100px){.hero-companion{height:430px}.hero-interact{width:250px;height:375px}.companion-caption{bottom:0}}
@media(max-width:760px){.hero-companion{height:275px}.hero-interact{width:160px;height:240px}.companion-caption{bottom:0}.hero-reaction{right:0;top:-12px;font-size:12px;max-width:160px}}
/* Let the complete portrait receive clicks and swap in a closed-eye frame briefly. */
.hero-companion{z-index:6;height:530px}
.hero-interact{display:grid;place-items:center;width:340px;height:500px;touch-action:manipulation}
.hero-interact .hero-character{grid-area:1/1;max-width:none}
.hero-interact .hero-blink{opacity:0;visibility:hidden;transition:none}
.hero-interact.is-blinking .hero-blink{opacity:1;visibility:visible}
.companion-caption{bottom:-3px}
@media(max-width:1100px){.hero-companion{height:460px}.hero-interact{width:270px;height:425px}}
@media(max-width:760px){.hero-companion{height:300px}.hero-interact{width:185px;height:270px}.companion-caption{bottom:-2px}}

.social-links{display:flex;flex-direction:column;min-width:280px;max-width:100%;font-family:'DM Mono',monospace}.social-link{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:60px;padding:17px 0;border-bottom:1px solid var(--line);transition:color .2s,border-color .2s}.social-name{font-size:14px}.social-handle{font-size:11px;color:var(--muted);transition:color .2s}.social-link:hover,.social-link:hover .social-handle{color:var(--red)}.social-link:hover{border-color:var(--red)}.social-link:focus-visible{outline:2px solid var(--red);outline-offset:5px}@media(max-width:760px){.social-links{margin-top:40px;width:100%;min-width:0}}



/* A display cabinet for the doll collection. */
.collection{border-top:1px solid var(--line);background:#101013}.collection .section-heading{gap:24px;flex-wrap:wrap}.collection h2{font-size:clamp(28px,3.5vw,48px)}.display-cabinet{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));padding:25px 24px 12px;background:linear-gradient(100deg,#202025,#121215 40%,#1b1b1f);border:9px solid #34343a;border-top-color:#4b4b52;border-bottom-color:#252529;box-shadow:inset 0 0 45px #000b,0 16px 35px #0006}.display-slot{position:relative;min-width:0;padding:18px 5px 24px;display:flex;align-items:flex-end;justify-content:center;background:linear-gradient(180deg,#ffffff04,transparent 75%,#0008);border-bottom:9px solid #4a4a52;box-shadow:0 5px 0 #222226,inset 0 -8px 14px #0005;margin-bottom:20px}.display-slot:before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:#f5f4f233;box-shadow:0 3px 12px #fff1;pointer-events:none}.room-pet{appearance:none;position:relative;display:flex;flex-direction:column;align-items:center;width:100%;max-width:96px;padding:0;margin:0;border:0;background:transparent;color:var(--text);cursor:pointer;touch-action:manipulation;z-index:1}.room-pet canvas{display:block;width:100%;height:auto;aspect-ratio:192/208;filter:drop-shadow(0 5px 4px #0008);transition:filter .2s}.room-pet-name{display:block;text-align:center;white-space:nowrap;font:9px/1.5 'DM Mono',monospace;color:#aeacb3;margin-top:10px;letter-spacing:-.025em}.room-pet:hover canvas,.room-pet:focus-visible canvas{filter:drop-shadow(0 5px 4px #0008) brightness(1.12)}.room-pet:focus-visible{outline:2px solid var(--red);outline-offset:4px;border-radius:4px}.room-pet-speech{display:none}.room-pet.is-chatting{z-index:3}.pet-message{position:fixed;z-index:50;max-width:160px;padding:9px 12px;background:#f5f4f2;color:#17171a;border-radius:10px;box-shadow:0 4px 15px #0006;font:12px/1.5 'Noto Sans JP',sans-serif;pointer-events:none;opacity:0;transition:opacity .15s}.pet-message.is-visible{opacity:1}@media(max-width:1100px){.display-cabinet{grid-template-columns:repeat(5,minmax(0,1fr));padding:20px 18px 8px}.room-pet{max-width:102px}.room-pet-name{font-size:11px}}@media(max-width:760px){.collection.section-wrap{padding-left:20px;padding-right:20px}.display-cabinet{grid-template-columns:repeat(4,minmax(0,1fr));padding:12px 7px 4px;border-width:6px}.display-slot{padding:12px 3px 17px;margin-bottom:14px;border-bottom-width:7px}.room-pet-name{font-size:8px;letter-spacing:-.05em;margin-top:7px}.collection .section-note{display:none}.collection .section-heading p{font-size:14px}.room-pet{max-width:86px}}@media(max-width:380px){.display-cabinet{grid-template-columns:repeat(3,minmax(0,1fr))}.room-pet-name{font-size:9px}}