:root{--header-bg: rgba(22, 34, 53, .45);--header-border: rgba(255, 237, 237, .15)}body:not(.dark){--header-bg: rgba(245, 239, 230, .55);--header-border: rgba(28, 28, 26, .12)}.site-header{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}#page-wrap h1{font-size:clamp(3rem,10vw,6rem)}h2{color:var(--color-blush);text-decoration:underline;text-decoration-color:var(--nav-accent, var(--color-salmon));text-decoration-thickness:1px;text-underline-offset:8px}:lang(ja) h2+p{font-weight:300}#page-wrap li{font-size:1.125rem}p{color:var(--color-blush);opacity:.7;font-size:1.125rem}.shoko-s{color:transparent;animation:shoko-s-appear .5s ease forwards}.shoko-rest{color:transparent;background:linear-gradient(to right,var(--shoko-fill-color, #FFEDED) 50%,transparent 50%);background-size:200% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;animation:shoko-fill 2s ease forwards;animation-delay:.6s}@keyframes shoko-s-appear{to{color:var(--shoko-fill-color, #FFEDED)}}@keyframes shoko-fill{to{background-position:0% 0}}body{transition:background-color 1.2s ease}.kit-group{opacity:0;transform:translate(-16px);transition:opacity .6s ease,transform .6s ease}.kit-group.kit-revealed{opacity:1;transform:translate(0)}section[id]{opacity:0;transform:translate(-24px);transition:opacity .7s ease,transform .7s ease}section[id].section-revealed{opacity:1;transform:translate(0)}.shoko-letters{display:flex;flex-direction:column;line-height:1;gap:.1rem}.shoko-letter{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:900;color:var(--color-cream);opacity:0;transform:translate(-10px);transition:opacity .5s ease,transform .5s ease,color .3s ease;display:flex;align-items:baseline}.shoko-letter.revealed{opacity:.2;transform:translate(0)}.shoko-letter.active{opacity:1;color:var(--nav-accent, var(--color-salmon))}.letter-rest{font-size:.8rem;font-weight:300;color:#ffededbf;margin-left:.25rem;opacity:0;transform:translate(-6px);transition:opacity .4s ease .1s,transform .4s ease .1s}.shoko-letter.active .letter-rest{opacity:1;transform:translate(0)}.btn-lang{padding:4px 14px;border-radius:999px;border:1px solid rgba(255,237,237,.4);color:#ffeded80;background:transparent;font-size:.875rem;cursor:pointer;transition:all .2s}.btn-lang:hover{border-color:#ffededb3;color:#ffedede6}.btn-lang.active{background:#ffeded;color:#111b18;border-color:#ffeded}.timeline{position:relative;display:flex;flex-direction:column}.timeline:before{content:"";position:absolute;left:72px;top:14px;bottom:14px;width:1px;background:linear-gradient(to bottom,#ffeded47,#ffeded0d)}.timeline-item{display:grid;grid-template-columns:72px 24px 1fr;align-items:center;gap:0 1rem;padding:1.1rem 0;opacity:0;transform:translate(-10px);transition:opacity .55s ease,transform .55s ease}.timeline-item.visible{opacity:1;transform:translate(0)}.timeline-year{text-align:right;font-size:.72rem;color:#ffeded4d;letter-spacing:.06em;font-variant-numeric:tabular-nums}.timeline-dot{width:7px;height:7px;border-radius:50%;justify-self:center;position:relative;z-index:1;border:1px solid rgba(255,237,237,.28);background:transparent}.timeline-dot--now{width:9px;height:9px;background:var(--nav-accent, var(--color-salmon));border-color:#6dccc5;box-shadow:0 0 10px #fff;animation:dot-pulse 1.4s ease-in-out infinite}.timeline-dot--sub{width:5px;height:5px;border-style:dashed;border-color:#ffeded33}.timeline-item--sub{padding-top:.2rem;padding-bottom:.6rem}.timeline-item--sub .timeline-year{font-size:.9rem;color:#ffeded33;letter-spacing:0}.timeline-item--sub .timeline-title{font-size:.8rem;color:#ffeded80}@keyframes dot-pulse{0%,to{opacity:1;box-shadow:0 0 6px #6dccc580,0 0 14px #6dccc533}50%{opacity:.35;box-shadow:0 0 18px #4beee3e6,0 0 36px var(--color-salmon)}}.timeline-title{font-size:1.125rem;font-weight:500;color:#ffededd1;letter-spacing:.01em}.photo-stack{position:relative;width:200px;height:200px;margin:2.5rem 0}.photo-card{position:absolute;width:180px;height:180px;border-radius:10px;cursor:pointer;transform:rotate(var(--r)) translate(var(--x),var(--y));transition:box-shadow .2s ease;user-select:none}.photo-card img{width:100%;height:100%;object-fit:cover;border-radius:4px;display:block;pointer-events:none}.photo-card:hover{box-shadow:0 8px 28px #00000080}.photo-card.on-top{z-index:10}.trait-chip{display:inline-block;font-size:1rem;color:#ffeded;border:1px solid var(--nav-accent, #F4A8AD);border-radius:999px;padding:4px 14px;opacity:.85}.skill-chip{display:inline-block;font-size:1rem;color:#ffeded;border:1px solid var(--nav-accent, #633D26);border-radius:999px;padding:4px 14px;opacity:.8}.dot{width:10px;height:10px;border-radius:50%;border:1.5px solid rgba(255,237,237,.5);display:inline-block}.dot.filled{background:#ffeded;border-color:#ffeded}.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}.photo-grid-item{aspect-ratio:1;border-radius:8px;overflow:hidden;position:relative;border:1px solid var(--nav-accent, #633D26)}.photo-grid-item:after{content:"";position:absolute;inset:0;background:var(--nav-accent, #F4A8AD);opacity:.15;pointer-events:none;border-radius:8px}.photo-grid-item.kit-group{transition:opacity 1.1s ease,transform 1.1s ease}body:not(.dark) .photo-grid-item:after{opacity:.06}.photo-grid-item:nth-child(2){transition-delay:.25s}.photo-grid-item:nth-child(3){transition-delay:.5s}.photo-grid-item:nth-child(4){transition-delay:.75s}.photo-grid-item:nth-child(5){transition-delay:1s}.photo-grid-item:nth-child(6){transition-delay:1.25s}.photo-grid-item .photo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.photo-grid-item .photo-back{z-index:0}.photo-grid-item .photo-front{z-index:1;transition:opacity 1.2s ease}.photo-grid-item .photo-front.fading-out{opacity:0}.shuffle-btn{display:inline-flex;align-items:center;justify-content:center;background:none;border:1px solid var(--nav-accent, #F4A8AD);border-radius:999px;color:var(--nav-accent, #F4A8AD);font-size:1rem;font-family:inherit;padding:.4rem 1.2rem;cursor:pointer;transition:background .2s}.shuffle-btn:hover{background:#f4a8ad12}.photo-img[src*=hobby-3]{object-fit:contain;transform:scale(1.2);background:#fff}.cta-main{font-size:1rem;font-weight:600;font-family:inherit;color:var(--nav-accent, #F4A8AD);text-decoration:none;display:inline-flex;align-items:center;gap:.75rem;border:1px solid var(--nav-accent, #F4A8AD);border-radius:999px;padding:.6rem 1.4rem .6rem 1.8rem;transition:gap .2s,background .2s}.cta-main svg{width:1rem;height:1rem;flex-shrink:0}.cta-main:hover{gap:1.25rem;background:#f4a8ad12}body:not(.dark){--color-blush: #2A2420;--color-teal: #2F8DA2;--shoko-fill-color: #2A2420}body:not(.dark) h2{color:#2a2420}body:not(.dark) p{color:#2a2420}body:not(.dark) nav a{color:var(--nav-accent)}body:not(.dark) .shoko-letter{color:#1c1c1a}body:not(.dark) .shoko-letter.active{color:var(--nav-accent, var(--color-salmon))}body:not(.dark) .letter-rest{color:#1c1c1abf}body:not(.dark) .timeline:before{background:linear-gradient(to bottom,#1c1c1a33,#1c1c1a0a)}body:not(.dark) .timeline-year{color:#1c1c1a66}body:not(.dark) .timeline-title{color:#1c1c1acc}body:not(.dark) .timeline-dot{border-color:#1c1c1a40}body:not(.dark) .dot{border-color:#1c1c1a66}body:not(.dark) .dot.filled{background:#1c1c1a;border-color:#1c1c1a}body:not(.dark) .skill-chip,body:not(.dark) .trait-chip{color:#1c1c1a}body:not(.dark) .btn-lang{border-color:#1c1c1a4d;color:#1c1c1a80}body:not(.dark) .btn-lang:hover{border-color:#1c1c1a99;color:#1c1c1ad9}body:not(.dark) .btn-lang.active{background:#1c1c1a;color:#f5efe6;border-color:#1c1c1a}body:not(.dark) .cta-top{color:#1c1c1a40}body:not(.dark) .cta-top:hover{color:#1c1c1a99}body:not(.dark) .timeline-dot--now{animation-name:dot-pulse-light}@keyframes dot-pulse-light{0%,to{box-shadow:0 0 8px var(--nav-accent),0 0 18px #4beee380}50%{box-shadow:0 0 18px var(--nav-accent),0 0 36px #4beee3cc}}.cta-top{font-size:2rem;line-height:1;color:#ffeded33}.cta-top svg{width:3rem;height:3rem}.cta-top{background:none;border:none;cursor:pointer;font-family:inherit;padding:8px 32px;transition:color .2s,transform .2s}.cta-top:hover{color:#ffeded99;transform:translateY(-4px)}@media(max-width:400px){#page-wrap section{padding-top:3rem;padding-bottom:3rem}.photo-grid{grid-template-columns:repeat(2,1fr);gap:1rem}}@media(max-width:640px){p,#page-wrap li,.timeline-title{font-size:1rem}.trait-chip,.skill-chip{font-size:.875rem}.timeline-item{grid-template-columns:48px 18px 1fr;padding:.7rem 0}.timeline:before{left:48px}.timeline-year{font-size:.65rem}.timeline-title{font-size:.9rem}.timeline-item--sub{padding-top:.15rem;padding-bottom:.4rem}}
