:root{--bg: #111111;--fg: #f0ece4;--accent: #ffe500;--muted: #444444;--border: #222222;--overlay: rgba(0,0,0,.82);--font: "DM Mono", "Courier New", monospace;color-scheme:dark}*{box-sizing:border-box;margin:0;padding:0}html{background:var(--bg);color:var(--fg);font-family:var(--font);font-size:16px;-webkit-font-smoothing:antialiased;scroll-behavior:smooth}body{min-height:100vh;display:flex;flex-direction:column}#root{display:flex;flex-direction:column;min-height:100vh}a{color:inherit;text-decoration:none}button{background:none;border:none;font:inherit;color:inherit;cursor:pointer;padding:0}.onepiece-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;background-image:url(/bg-onepiece.jpg);background-size:cover;background-position:center top;pointer-events:none}nav{position:fixed;top:0;left:0;right:0;z-index:10;background:#111111bf;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.split-layout{position:relative}.onepiece-mode nav{border-bottom:none!important;background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}.onepiece-mode nav:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:#00000073;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;transition:opacity .4s ease;z-index:-1}.onepiece-mode nav.nav-scrolled:before{opacity:1}.onepiece-mode nav span{color:#ffffffa6!important}.onepiece-mode .nav-link{color:#ffffffa6}.onepiece-mode .nav-link--muted{color:#fff6}.onepiece-mode .nav-blog-link{color:#ffffffa6}.onepiece-mode .site-footer{background:#00000059;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:none}.onepiece-mode .footer-link{color:#ffffffa6}.onepiece-mode .footer-link:hover{color:#fff!important}.onepiece-mode .footer-sep{color:#ffffff40}.onepiece-mode .footer-muted{color:#ffffffa6}.cursor{animation:blink 1.1s steps(1) infinite;margin-left:1px;color:var(--accent);font-weight:700;letter-spacing:0}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.site-footer{width:100%;display:flex;align-items:center;gap:12px;padding:28px 48px;border-top:1px solid var(--border);font-size:.85rem;letter-spacing:.06em;background:#111111bf;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:10;position:fixed;bottom:0;left:0;right:0}.footer-link{display:inline-block;color:var(--muted);transition:color .1s,transform .08s}.footer-link:hover{color:var(--fg)!important}.footer-link:active{transform:scale(.95)}.footer-sep{color:var(--border)}.footer-muted{color:var(--muted);margin-left:auto;font-style:italic}.app-root{display:flex;flex-direction:column;min-height:100vh;-webkit-user-select:none;user-select:none;padding-top:var(--nav-h, 72px);padding-bottom:var(--footer-h, 80px)}.split-layout{display:flex;flex:1;overflow:hidden}.left-panel{width:45%;min-width:0;overflow:hidden;display:flex;flex-direction:column}.right-panel-wrap{width:55%;min-width:0;display:flex;flex-direction:column}.image-grid-wrap{flex:1;position:relative;overflow:hidden;min-height:0}.image-grid-container{position:relative;width:100%;height:100%;overflow:hidden}.avatar-layer img{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 84%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 84%,transparent 100%)}.glitch-layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;mix-blend-mode:screen;animation-duration:.42s;animation-timing-function:steps(1);animation-fill-mode:forwards}.glitch-red{filter:saturate(3) hue-rotate(300deg) brightness(1.5);animation-name:glitch-rgb-r;opacity:.5}.glitch-blue{filter:saturate(3) hue-rotate(180deg) brightness(1.5);animation-name:glitch-rgb-b;opacity:.5}.glitch-scanlines{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0px,transparent 3px,rgba(0,0,0,.35) 3px,rgba(0,0,0,.35) 4px);animation:scanline-flash .42s steps(1) forwards;z-index:20}@keyframes glitch-jitter{0%{transform:translate(0)}10%{transform:translate(-3px,1px)}20%{transform:translate(3px,-2px)}30%{transform:translate(-2px,3px)}40%{transform:translate(4px,-1px)}50%{transform:translate(-1px,2px)}60%{transform:translate(2px,-3px)}70%{transform:translate(-4px,1px)}80%{transform:translate(1px,-2px)}90%{transform:translate(-2px,2px)}to{transform:translate(0)}}@keyframes glitch-rgb-r{0%{transform:translate(0);clip-path:inset(0 0 100% 0)}10%{transform:translate(-6px);clip-path:inset(20% 0 60% 0)}20%{transform:translate(4px);clip-path:inset(5% 0 80% 0)}30%{transform:translate(-4px);clip-path:inset(55% 0 20% 0)}40%{transform:translate(8px);clip-path:inset(30% 0 40% 0)}50%{transform:translate(-6px);clip-path:inset(70% 0 10% 0)}60%{transform:translate(3px);clip-path:inset(10% 0 70% 0)}70%{transform:translate(-8px);clip-path:inset(45% 0 30% 0)}80%{transform:translate(5px);clip-path:inset(80% 0 5% 0)}90%{transform:translate(-3px);clip-path:inset(15% 0 65% 0)}to{transform:translate(0);clip-path:inset(0 0 100% 0)}}@keyframes glitch-rgb-b{0%{transform:translate(0);clip-path:inset(0 0 100% 0)}10%{transform:translate(5px);clip-path:inset(60% 0 15% 0)}20%{transform:translate(-3px);clip-path:inset(10% 0 75% 0)}30%{transform:translate(6px);clip-path:inset(40% 0 35% 0)}40%{transform:translate(-5px);clip-path:inset(75% 0 8% 0)}50%{transform:translate(3px);clip-path:inset(25% 0 55% 0)}60%{transform:translate(-7px);clip-path:inset(50% 0 25% 0)}70%{transform:translate(4px);clip-path:inset(85% 0 3% 0)}80%{transform:translate(-5px);clip-path:inset(35% 0 45% 0)}90%{transform:translate(2px);clip-path:inset(65% 0 18% 0)}to{transform:translate(0);clip-path:inset(0 0 100% 0)}}@keyframes scanline-flash{0%{opacity:0}10%{opacity:1}30%{opacity:.6}50%{opacity:1}70%{opacity:.4}90%{opacity:.8}to{opacity:0}}@media (max-width: 640px){html,body,#root,.app-root{height:auto;overflow:visible}nav{padding:20px 24px!important}main{padding:20px 20px 12px!important}.left-panel main p{font-size:clamp(.85rem,3.8vw,1rem)!important;line-height:1.6!important}.left-panel main>div{margin-bottom:0!important}.site-footer{padding:16px 20px!important;padding-bottom:max(16px,env(safe-area-inset-bottom))!important;gap:10px!important;flex-wrap:wrap;font-size:.8rem!important}.app-root{padding-bottom:56px}.footer-muted{width:100%;margin-left:0!important}.split-layout{flex-direction:column}.left-panel{width:100%;border-right:none;border-bottom:none}.right-panel-wrap{width:100%;height:60vh}.image-grid-container{height:100%}.avatar-layer{width:74%!important;left:13%!important}.caption-card{left:5%!important;width:90%!important}.logo-item{width:13%!important}}@media (orientation: landscape) and (max-height: 500px){html,body,#root,.app-root{height:auto;overflow:visible}.split-layout{flex-direction:row!important;align-items:flex-start}.left-panel{width:45%!important}.right-panel-wrap{width:55%!important;height:100dvh!important;position:sticky!important;top:0!important}nav{padding:8px max(24px,env(safe-area-inset-left))!important}main{padding:8px max(20px,env(safe-area-inset-left))!important;justify-content:center!important}.left-panel main p{font-size:clamp(.72rem,1.8vw,.9rem)!important;line-height:1.55!important}.left-panel main>div{margin-bottom:8px!important}.site-footer{padding:8px max(24px,env(safe-area-inset-left))!important;font-size:.875rem!important;gap:8px!important}.caption-card{width:78%!important;left:11%!important;top:62%!important;padding:7px 10px!important}.caption-card span{font-size:.6rem!important;line-height:1.45!important}}.nav-link{display:inline-block;font-family:var(--font);font-size:.875rem;font-weight:400;letter-spacing:.08em;text-decoration:none;color:var(--fg);transition:color .1s,transform .08s}.nav-link--muted{color:var(--muted)}.nav-link:hover{color:var(--fg)}.nav-link:active{transform:scale(.95)}.nav-blog-link{display:inline-block;font-family:var(--font);font-size:.875rem;font-weight:400;letter-spacing:.08em;text-decoration:none;margin-left:auto;color:var(--muted);transition:color .1s,transform .08s}.nav-blog-link--active,.nav-blog-link:hover{color:var(--accent)}.nav-blog-link:active{transform:scale(.95)}.term{display:inline-block;cursor:pointer;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px;padding:0 3px;border-radius:1px;background:transparent;color:var(--fg);transition:background .12s,color .12s,transform .08s}.term:hover{background:var(--accent);color:var(--bg);text-decoration-color:transparent}.term:active{transform:scale(1.03)}.term-active{background:var(--accent);color:var(--bg);text-decoration-color:transparent}.blog-layout{flex:1;display:flex;justify-content:center;padding:56px 24px 80px}.blog-list{width:100%;max-width:640px;display:flex;flex-direction:column;gap:0}.blog-list-item{display:flex;flex-direction:column;gap:6px;padding:28px 0;border-bottom:1px solid var(--border);text-decoration:none;color:inherit;transition:filter .12s}.blog-list-item:first-child{border-top:1px solid var(--border)}.blog-list-item:hover{filter:brightness(1.2)}.blog-list-cover{width:100%;aspect-ratio:2 / 1;object-fit:cover;border-radius:6px;margin-bottom:6px}.blog-list-title{font-size:1.2rem;font-weight:400;color:var(--accent);line-height:1.4}.blog-list-date{font-size:.875rem;color:var(--muted);letter-spacing:.04em}.blog-list-excerpt{font-size:1rem;color:var(--fg);line-height:1.5;margin-top:2px}.blog-post-layout{display:grid;grid-template-columns:48px minmax(0,680px) 200px;gap:48px;width:100%;max-width:1100px;align-items:start}.blog-post{width:100%;min-width:0}.blog-share-sidebar{display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:4px;position:sticky;top:80px}.blog-share-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:transparent;color:var(--muted);transition:color .1s,background .1s}.blog-share-btn:hover{color:var(--fg);background:var(--border)}.blog-toc{position:sticky;top:80px;padding-top:4px}.blog-toc-label{font-size:.75rem;letter-spacing:.08em;color:var(--muted);margin-bottom:12px;text-transform:uppercase}.blog-toc ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}.blog-toc-link{font-size:.8rem;line-height:1.4;color:var(--muted);text-decoration:none;transition:color .1s;display:block}.blog-toc-link:hover{color:var(--fg)}.blog-toc-link--active{color:var(--accent)}.blog-back{display:inline-block;font-size:.95rem;color:var(--muted);text-decoration:none;margin-bottom:40px;transition:color .12s}.blog-back:hover{color:var(--fg)}.blog-post-header{margin-bottom:40px}.blog-post-cover{width:100%;aspect-ratio:2 / 1;object-fit:cover;border-radius:8px;margin-top:24px}.blog-post-title{font-size:1.65rem;font-weight:400;line-height:1.35;color:var(--fg);margin-bottom:10px}.blog-post-date{font-size:.875rem;color:var(--muted);letter-spacing:.04em}.blog-prose{font-size:1.05rem;line-height:1.8;color:var(--fg);font-family:DM Sans,sans-serif;-webkit-user-select:text;user-select:text}.blog-prose p{margin-bottom:1.25em}.blog-prose h2{font-family:var(--font);font-size:1.2rem;font-weight:700;color:var(--accent);margin:2.25em 0 .75em;letter-spacing:.02em;scroll-margin-top:calc(var(--nav-h, 72px) + 24px)}.blog-prose h3{font-family:var(--font);font-size:1.075rem;font-weight:700;color:var(--fg);margin:1.75em 0 .5em;scroll-margin-top:calc(var(--nav-h, 72px) + 24px)}.blog-prose a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}.blog-prose a:hover{color:var(--accent)}.blog-prose strong{font-weight:600;color:var(--fg)}.blog-prose code{font-family:var(--font);font-size:.82em;background:#1c1c1e;color:#e8e8e8;padding:2px 6px;border-radius:4px;border:1px solid #2e2e30}.blog-prose pre{background:#1c1c1e;border:1px solid #2e2e30;border-radius:8px;padding:20px 24px;overflow-x:auto;margin:1.75em 0}.blog-prose pre code{background:none;border:none;padding:0;color:#e8e8e8;font-size:.875rem;line-height:1.7}.blog-prose ul,.blog-prose ol{padding-left:1.4em;margin-bottom:1.25em}.blog-prose li{margin-bottom:.35em}.blog-prose hr{border:none;border-top:1px solid var(--border);margin:2.5em 0}.blog-loading-bar{width:100%;height:2px;background:transparent;overflow:hidden;margin-top:40px}.blog-loading-bar:after{content:"";display:block;height:100%;width:40%;background:var(--accent);animation:blog-load-sweep 1.1s cubic-bezier(.4,0,.6,1) infinite}@keyframes blog-load-sweep{0%{transform:translate(-150%)}to{transform:translate(375%)}}@media (max-width: 960px){.blog-post-layout{grid-template-columns:1fr;gap:0}.blog-share-sidebar,.blog-toc,.blog-toc-placeholder{display:none}}@media (max-width: 640px){.blog-layout{padding:36px 20px 60px}.blog-prose{font-size:.92rem;line-height:1.65}}