.page-shell{background-image:radial-gradient(var(--bg-dot) 1px, transparent 1px);background-size:32px 32px;background-position:calc(var(--mouse-x,0) * -10px) calc(var(--mouse-y,0) * -10px);background-color:var(--bg-base);flex-direction:column;width:min(100%,1440px);height:100dvh;margin:0 auto;padding:16px 20px 24px;transition:background-color .5s,background-position .1s ease-out;display:flex;position:relative;overflow:hidden}.main-content-container{will-change:transform, filter;flex-direction:column;flex:1;min-height:0;transition:transform .6s cubic-bezier(.22,1,.36,1),filter .6s cubic-bezier(.22,1,.36,1),opacity .6s;display:flex}.main-content-container.is-pushed-back{filter:blur(8px)brightness(.9);pointer-events:none;opacity:.6;transform:scale(.96)translateY(10px)}.topbar{z-index:150;flex-shrink:0;justify-content:space-between;align-items:center;height:64px;display:flex;position:relative}.topbar-identity-group{align-items:center;gap:16px;display:flex}.topbar-identity{letter-spacing:.12em;color:var(--text-main);align-items:center;gap:10px;font-size:13px;font-weight:600;display:flex}.theme-toggle{all:unset;cursor:pointer;background:var(--pill-bg);border:1px solid var(--border-color);width:32px;height:32px;color:var(--text-muted);border-radius:50%;justify-content:center;align-items:center;transition:all .3s;display:flex}.theme-toggle:hover{background:var(--text-main);color:var(--bg-base);transform:translateY(-1px)}.identity-dot{background:var(--text-main);border-radius:50%;width:6px;height:6px}.simple-menu-trigger{all:unset;cursor:pointer;background:0 0;border-radius:999px;align-items:center;gap:12px;padding:4px 4px 4px 16px;transition:all .3s cubic-bezier(.22,1,.36,1);display:flex}.trigger-text{color:var(--text-main);letter-spacing:.05em;font-size:14px;font-weight:500}.trigger-icon-wrap{background:var(--pill-bg);border:1px solid var(--border-color);width:38px;height:38px;color:var(--text-main);border-radius:50%;justify-content:center;align-items:center;transition:all .5s cubic-bezier(.34,1.56,.64,1);display:flex}.simple-menu-trigger:hover .trigger-icon-wrap{background:var(--text-main);color:var(--bg-base);transform:scale(1.1)}.simple-menu-trigger.is-active .trigger-icon-wrap{background:var(--accent);color:#fff;transform:rotate(90deg)scale(1.1)}.index-overlay{background:var(--glass-bg);-webkit-backdrop-filter:blur(40px);z-index:100;opacity:0;visibility:hidden;justify-content:center;align-items:center;transition:opacity .5s,visibility .5s;display:flex;position:fixed;inset:0}.index-overlay.is-open{opacity:1;visibility:visible}.index-content{flex-direction:column;gap:10vh;width:min(100%,1100px);padding:0 40px;display:flex}.index-nav{flex-direction:column;gap:16px;display:flex}.index-link{letter-spacing:-.04em;color:var(--text-main);opacity:0;align-items:baseline;gap:24px;font-size:clamp(42px,9vw,84px);font-weight:600;text-decoration:none;display:flex;transform:translateY(30px)}.index-overlay.is-open .index-link{opacity:1;transition:all .7s cubic-bezier(.23,1,.32,1);transition-delay:calc(var(--index) * 80ms + .15s);transform:translateY(0)}.link-number{color:var(--text-muted);font-family:monospace;font-size:14px;font-weight:400}.link-arrow{opacity:0;transition:all .3s;transform:translate(-10px,10px)}.index-link:hover{color:var(--accent);transform:translate(16px)}.index-link:hover .link-arrow{opacity:1;transform:translate(0)}.index-footer{border-top:1px solid var(--border-color);opacity:0;gap:64px;padding-top:32px;display:flex}.index-overlay.is-open .index-footer{opacity:1;transition:all .7s .5s}.footer-item{flex-direction:column;gap:6px;display:flex}.footer-label{letter-spacing:.1em;color:var(--text-dim);font-size:10px;font-weight:600}.footer-value{color:var(--text-muted);font-family:monospace;font-size:13px;font-weight:500}.hero{flex-direction:column;flex-shrink:0;justify-content:center;gap:28px;padding:24px 0 16px;display:flex}.hero-avatar-placeholder{background:var(--card-bg);border:1px solid var(--border-color);border-radius:20px;flex-shrink:0;width:72px;height:72px;overflow:hidden}.hero-avatar-placeholder img{object-fit:cover;width:100%;height:100%;display:block}.hero-copy h1{letter-spacing:-.03em;color:var(--text-main);opacity:0;margin:0;font-size:clamp(26px,7.5vw,38px);font-weight:500;line-height:1.3;animation:1.2s cubic-bezier(.22,1,.36,1) forwards hero-reveal}.hero-skills{flex-direction:column;gap:12px;display:flex}.skill-tags{flex-wrap:wrap;gap:10px;transition:opacity .3s;display:flex}.skill-tag{border:1px solid var(--border-color);background:var(--pill-bg);min-height:36px;color:var(--text-muted);cursor:pointer;border-radius:999px;padding:0 18px;font-size:13px;transition:all .4s cubic-bezier(.23,1,.32,1)}.skill-tag.active{background:var(--pill-active-bg);color:var(--pill-active-text);transform:translateY(-2px);box-shadow:0 8px 20px #0000001a}.skill-tags.has-active .skill-tag:not(.active){opacity:.4;filter:grayscale();transform:scale(.95)}.skill-content-container{grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.22,1,.36,1);display:grid}.skill-content-container.expanded{grid-template-rows:1fr}.skill-content-inner{min-height:0;overflow:hidden}.skill-content-inner p{background:var(--card-bg);border:1px solid var(--border-color);opacity:0;border-radius:18px;margin:12px 0 0;padding:18px 20px;font-size:14px;line-height:1.6;transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .4s;transform:translateY(-10px)}.skill-content-container.expanded .skill-content-inner p{opacity:1;transform:translateY(0)}.status-section{flex-direction:column;flex:1;min-height:0;padding-top:12px;display:flex}.section-heading-compact{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.section-heading-compact h2{letter-spacing:-.02em;color:var(--text-main);font-size:clamp(26px,6vw,32px);font-weight:600}.presence-indicator{align-items:center;gap:10px;display:flex}.live-dot{background:#10b981;border-radius:50%;width:8px;height:8px;position:relative}.live-dot:after{content:"";border:2px solid #10b981;border-radius:50%;animation:2s cubic-bezier(.455,.03,.515,.955) infinite pulse-ring;position:absolute;inset:-4px}.status-hint{color:var(--text-muted);font-size:11px}.stacked-cards.ios-style{flex:1;width:100%;position:relative}.ios-card{background:var(--card-bg);border:1px solid var(--border-color);width:100%;height:auto;min-height:140px;box-shadow:var(--card-shadow);z-index:calc(10 - var(--card-index));will-change:transform, opacity;border-radius:32px;padding:24px 28px;position:absolute;top:0;left:0;overflow:hidden}.ios-card.swiping-out{opacity:0;transform:translateY(-120px)scale(1.02)}.ios-card-content{align-items:flex-start;gap:20px;display:flex}.ios-card-time{color:var(--text-muted)}.ios-card-text{color:var(--text-main)}.ios-card-thumbnail{transform-origin:100%;border:1px solid var(--border-color);border-radius:14px;flex-shrink:0;width:84px;height:112px;position:relative;overflow:hidden;transform:rotate(1.5deg)}.progressive-image-wrap{background:var(--border-color);width:100%;height:100%;position:relative;overflow:hidden}.progressive-image-wrap .main-img{object-fit:cover;width:100%;height:100%;display:block}.progressive-image-wrap .img-placeholder{background:var(--card-bg);position:absolute;inset:0}.zine-reader{background:var(--bg-base);z-index:200;background-image:radial-gradient(var(--bg-dot) 1px, transparent 1px);background-size:32px 32px;background-position:calc(var(--mouse-x,0) * -10px) calc(var(--mouse-y,0) * -10px);flex-direction:column;display:flex;position:fixed;inset:0;overflow:hidden}.zine-fixed-controls{z-index:250;pointer-events:none;justify-content:flex-end;align-items:center;height:80px;padding:0 24px;display:flex;position:absolute;top:0;left:0;right:0}.zine-fixed-controls button{pointer-events:auto}.zine-scroll-container{-webkit-overflow-scrolling:touch;flex:1;padding:0;position:relative;overflow-y:auto}.zine-article{max-width:800px;margin:0 auto 160px;position:relative}.zine-article-header.sticky-header{z-index:100;flex-direction:column;justify-content:center;min-height:80px;padding:24px 24px 20px;display:flex;position:sticky;top:0}.header-glass-bg{background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);opacity:1;z-index:-1;pointer-events:none;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 60%,#0000);mask-image:linear-gradient(#000 60%,#0000)}.zine-article-meta{color:var(--text-main);letter-spacing:.12em;opacity:.7;font-family:monospace;font-size:13px;font-weight:600}.zine-article-id{letter-spacing:-.04em;color:var(--text-main);margin:4px 0 0;font-size:clamp(32px,8vw,48px);font-weight:800;line-height:1}.article-inner-content{padding:0 24px}.zine-article-body{color:var(--text-main);margin-top:48px;font-size:18px;line-height:1.8}.zine-image-grid{gap:16px;margin:48px 0;display:grid}.zine-image-item{background:var(--border-color);aspect-ratio:4/3;border-radius:16px;position:relative;overflow:hidden}.zine-image-item img{object-fit:cover;width:100%;height:100%;display:block}.skeleton-loader{background:linear-gradient(90deg,#0000,#ffffff1a,#0000) 0 0/200% 100%;background-color:var(--border-color);animation:1.5s infinite shimmer;position:absolute;inset:0}.images-1{grid-template-columns:1fr}.images-2{grid-template-columns:1fr 1fr}.images-3{grid-template-rows:1fr 1fr;grid-template-columns:2fr 1fr}.images-3 .zine-image-item:first-child{grid-row:span 2}.images-4{grid-template-rows:1fr 1fr;grid-template-columns:1fr 1fr}.images-9{grid-template-columns:repeat(3,1fr)}.photo-count-badge{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;background:#000000b3;border-radius:6px;padding:4px 8px;font-family:monospace;font-size:10px;font-weight:700;position:absolute;bottom:8px;right:8px}.zine-article-divider{color:var(--text-dim);align-items:center;gap:20px;margin-top:100px;display:flex}.divider-line{background:var(--border-color);flex:1;height:1px}.zine-end-cap{text-align:center;color:var(--text-dim);padding:100px 0}.back-to-top{all:unset;cursor:pointer;border:1px solid var(--border-color);border-radius:999px;padding:12px 36px;font-size:13px;transition:all .3s}.back-to-top:hover{background:var(--text-main);color:var(--bg-base)}@media (width>=840px){.page-shell{flex-direction:row;align-items:flex-start;gap:8vw;padding:14vh 10vw 0}.topbar{position:fixed;top:40px;left:10vw;right:10vw}.hero{flex:1;max-width:640px;height:auto}.hero-copy h1{font-size:clamp(32px,4.5vw,64px);line-height:1.1}.skill-tags{flex-wrap:nowrap;gap:14px}.status-section{flex:1;max-width:580px;height:auto;padding-top:0}.ios-card{padding:32px 40px}.ios-card-thumbnail{width:114px;height:152px}.zine-article-header.sticky-header{padding:24px 40px 20px}.article-inner-content{padding:0 40px}}.page-footer{text-align:center;color:var(--text-muted);flex-shrink:0;padding:16px 0 8px;font-size:11px;transition:all .4s cubic-bezier(.22,1,.36,1)}.page-footer.is-hidden{opacity:0;transform:translateY(10px)}@media (width>=840px){.page-footer{position:absolute;bottom:32px;left:0;right:0}}.scroll-progress-bar{background:var(--accent);transform-origin:0%;z-index:300;height:2px;position:absolute;top:0;left:0;right:0}@keyframes hero-reveal{0%{opacity:0;filter:blur(10px);transform:translateY(30px)}to{opacity:1;filter:blur();transform:translateY(0)}}@keyframes typing{0%{width:0}to{width:100%}}@keyframes blink-caret{0%,to{border-color:#0000}50%{border-color:var(--accent)}}@keyframes image-reveal{0%{filter:blur(20px);opacity:0}to{filter:blur();opacity:1}}@keyframes ambient-drift{0%{transform:translate(0)scale(1)}to{transform:translate(-5%,8%)scale(1.05)}}@keyframes pulse-ring{0%{opacity:1;transform:scale(.33)}80%,to{opacity:0;transform:scale(1.2)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes card-entrance{0%{opacity:0;filter:blur(10px);transform:translate3d(0,40px,-100px)scale(.9)}to{opacity:1;transform:translate3d(0, var(--ty), var(--tz)) scale(var(--sc));filter:blur(var(--bl))}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}:root{--bg-base:#fff;--bg-base-rgb:255, 255, 255;--bg-dot:#0000000a;--text-main:#111;--text-muted:#888;--text-dim:#aaa;--accent:#f43f5e;--glass-bg:#fffc;--card-bg:linear-gradient(180deg, #fffffffa, #fcfcfbf5);--card-shadow:0 20px 40px #0000000a;--border-color:#0000000d;--pill-bg:#fff;--pill-active-bg:#111;--pill-active-text:#fff;color:var(--text-main);background:var(--bg-base);text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:PingFang SC,Hiragino Sans GB,Noto Sans SC,sans-serif;font-weight:400;line-height:1.5;transition:background-color .5s,color .5s}[data-theme=dark]{--bg-base:#0e0e11;--bg-base-rgb:14, 14, 17;--bg-dot:#ffffff0f;--text-main:#ededed;--text-muted:#a1a1aa;--text-dim:#71717a;--accent:#fb7185;--glass-bg:#0e0e11cc;--card-bg:linear-gradient(180deg, #1c1c20fa, #161619f5);--card-shadow:0 20px 40px #0003;--border-color:#ffffff14;--pill-bg:#1c1c21;--pill-active-bg:#ededed;--pill-active-text:#0e0e11}*{box-sizing:border-box;transition:border-color .5s,background-color .5s,color .5s,box-shadow .5s,filter .5s}html,body,#root{height:100dvh;margin:0;overflow:hidden}body{background-color:var(--bg-base);min-width:320px}button,input,textarea,select{font:inherit}a{color:inherit;text-decoration:none}ul{margin:0;padding:0;list-style:none}p,h1,h2{margin:0}