*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:auto;overscroll-behavior:none}body{background:#05070d;color:#e8f4ff;font-family:ui-sans-serif,system-ui,-apple-system,sans-serif;overscroll-behavior:none}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}#spacer{width:1px}canvas#c{position:fixed;inset:0;width:100vw;height:100vh;display:block}#brand{position:fixed;top:22px;left:24px;z-index:20;font-family:ui-monospace,Menlo,monospace}#brand .name{font-size:14px;font-weight:650;color:#e8f4ff;letter-spacing:.02em}#brand .role{font-size:11px;color:#56708a;letter-spacing:.08em;margin-top:2px}#overlay{position:fixed;inset:0;z-index:5;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transition:opacity .2s linear}#overlay .scrolldown{position:absolute;bottom:64px;font-size:11px;color:#56708a;letter-spacing:.2em;animation:bob 2.2s ease-in-out infinite;opacity:0;transition:opacity .8s ease}#overlay.ready .scrolldown{opacity:1}@keyframes bob{50%{transform:translateY(8px)}}#card{position:fixed;z-index:10;width:300px;opacity:0;pointer-events:none;cursor:pointer}#card .inner{background:#090f1bc7;border:1px solid rgba(77,232,255,.35);border-radius:14px;padding:18px 20px;color:#dfeefb;backdrop-filter:blur(16px) saturate(160%);box-shadow:0 8px 40px #00000080;transform:translateY(10px);transition:transform .35s cubic-bezier(.22,1,.36,1)}#card.on .inner{transform:translateY(0)}#card .meta{font-size:11px;color:#4de8ff;letter-spacing:.08em;margin-bottom:8px}#card h3{font-size:20px;font-weight:650;letter-spacing:-.01em;margin-bottom:8px}#card .desc{font-size:13px;line-height:1.55;color:#9db4c8;margin-bottom:12px}#card .more{font-size:11px;color:#4de8ff;letter-spacing:.06em;font-family:ui-monospace,Menlo,monospace}#nav{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:20;display:flex;flex-direction:column;gap:4px;align-items:flex-end;font-family:ui-monospace,Menlo,monospace}#nav .item{display:flex;align-items:center;gap:10px;cursor:pointer;color:#56708a;font-size:10px;letter-spacing:.08em;padding:4px 0;transition:color .2s;background:none;border:none;font-family:inherit}#nav .item:after{content:"";width:8px;height:8px;border:1px solid currentColor;transform:rotate(45deg);transition:background .2s}#nav .item .label{opacity:0;transition:opacity .2s}#nav .item:hover .label{opacity:1}#nav .item.active{color:#4de8ff}#nav .item.active:after{background:#4de8ff;box-shadow:0 0 10px #4de8ffb3}#nav .link{width:1px;height:14px;background:#4de8ff40;margin-right:4px;align-self:flex-end}#detail{position:fixed;z-index:30;top:24px;right:24px;width:min(460px,calc(100vw - 48px));max-height:calc(100vh - 48px);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='260' viewBox='0 0 100 130'%3E%3Cg fill='none' stroke='%234de8ff' stroke-opacity='.055' stroke-width='7' stroke-linecap='round'%3E%3Crect x='18' y='42' width='64' height='36' rx='10'/%3E%3Cpath d='M50 8v114'/%3E%3C/g%3E%3C/svg%3E") no-repeat right -36px bottom -30px / 200px auto,repeating-linear-gradient(0deg,transparent 0 23px,rgba(77,232,255,.035) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,rgba(77,232,255,.035) 23px 24px),#080d18e6;border:1px solid rgba(77,232,255,.32);border-radius:12px;padding:0;color:#e8f4ff;overflow:hidden;display:flex;flex-direction:column;backdrop-filter:blur(24px) saturate(160%);box-shadow:inset 0 0 0 1px #ffffff08,0 20px 80px #0009;opacity:0;pointer-events:none;transform:translate(80px) scale(.92);transform-origin:left center;transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .35s ease}#detail .scroll{overflow-y:auto;min-height:0;padding:26px;scrollbar-width:thin;scrollbar-color:rgba(77,232,255,.25) transparent}#detail .scroll::-webkit-scrollbar{width:6px}#detail .scroll::-webkit-scrollbar-thumb{background:#4de8ff38;border-radius:3px}#detail.open{opacity:1;pointer-events:auto;transform:none}#detail img{display:block;width:calc(100% + 52px);max-width:none;margin:-26px -26px 18px;max-height:min(36vh,320px);object-fit:cover;border:none;border-bottom:1px solid rgba(77,232,255,.16);border-radius:12px 12px 0 0}#detail .meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:11px;margin-bottom:12px;min-width:0}#detail.no-img .meta{padding-right:36px}#detail .meta b{color:var(--wc, #4de8ff);font-weight:600;letter-spacing:.22em;font-size:12px;white-space:nowrap}#detail .meta span{color:#5c7590;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#detail h2{font-size:28px;letter-spacing:-.015em;margin-bottom:0}#detail h2:after{content:"";display:block;width:30px;height:2px;border-radius:1px;background:var(--wc, #4de8ff);margin:12px 0 14px;box-shadow:0 0 12px color-mix(in srgb,var(--wc, #4de8ff) 60%,transparent)}#detail .desc{font-size:14px;line-height:1.75;color:#a9bfd2;margin-bottom:18px}#detail .tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}#detail .tags span{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:#8fd8ea;border:1px solid rgba(77,232,255,.28);border-radius:4px;padding:4px 9px;letter-spacing:.04em;background:#4de8ff0a}#detail .links{display:flex;gap:10px}#detail .links a{font-size:13px;color:#05070d;background:var(--wc, #4de8ff);text-decoration:none;padding:9px 18px;border-radius:7px;font-weight:600;transition:transform .2s,box-shadow .2s}#detail .links a:hover{transform:translateY(-1px);box-shadow:0 4px 22px color-mix(in srgb,var(--wc, #4de8ff) 45%,transparent)}#detail .links a.ghost{background:transparent;color:var(--wc, #4de8ff);border:1px solid color-mix(in srgb,var(--wc, #4de8ff) 50%,transparent)}#detail .links a.ghost:hover{box-shadow:0 4px 18px color-mix(in srgb,var(--wc, #4de8ff) 30%,transparent)}#detail .pager{display:flex;align-items:center;justify-content:space-between;margin-top:22px;padding-top:14px;border-top:1px solid rgba(77,232,255,.14)}#detail .pager button{background:none;border:none;cursor:pointer;font-family:inherit;color:#7fa0b8;font-size:11px;letter-spacing:.08em;padding:6px 4px;transition:color .2s,transform .2s}#detail .pager button:hover:not(:disabled){color:var(--wc, #4de8ff)}#detail .pager #prev:hover:not(:disabled){transform:translate(-2px)}#detail .pager #next:hover:not(:disabled){transform:translate(2px)}#detail .pager button:disabled{opacity:.3;cursor:default}#detail .pager .count{font-size:11px;color:#56708a;letter-spacing:.14em}#detail #close{position:absolute;top:0;right:0;z-index:3;display:grid;place-items:center;width:30px;height:30px;padding:0;font-family:ui-monospace,Menlo,monospace;background:#060b14b8;backdrop-filter:blur(8px);border:1px solid rgba(77,232,255,.3);border-top:none;border-right:none;border-radius:0 11px 0 8px;color:#8fd8ea;font-size:13px;line-height:1;cursor:pointer;transition:color .2s,border-color .2s,box-shadow .2s}#detail #close:hover,#detail #close:focus-visible{color:#fff;outline:none;border-color:color-mix(in srgb,var(--wc, #4de8ff) 70%,transparent);box-shadow:0 0 12px color-mix(in srgb,var(--wc, #4de8ff) 35%,transparent)}#loader{position:fixed;inset:0;z-index:40;background:#05070d;display:flex;align-items:center;justify-content:center;transition:opacity .6s ease}#loader.done{opacity:0;pointer-events:none}#loader span{font-size:12px;color:#4de8ff;letter-spacing:.3em;animation:pulse 1.4s ease-in-out infinite}@keyframes pulse{50%{opacity:.3}}#fallback{display:none;max-width:720px;margin:0 auto;padding:72px 24px}#fallback header{margin-bottom:48px}#fallback h1{font-size:32px;letter-spacing:-.02em}#fallback .sub{color:#56708a;margin-top:8px;font-size:14px}#fallback ol{list-style:none;display:flex;flex-direction:column;gap:20px}#fallback li{border:1px solid rgba(77,232,255,.25);border-radius:14px;padding:22px 24px;background:#090f1b99}#fallback .meta{font-size:11px;color:#4de8ff;letter-spacing:.08em;margin-bottom:8px}#fallback h2{font-size:20px;margin-bottom:8px}#fallback p{font-size:14px;line-height:1.65;color:#9db4c8;margin-bottom:12px}#fallback .tags{display:flex;flex-wrap:wrap;gap:8px}#fallback .tags span{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:#8fd8ea;border:1px solid rgba(77,232,255,.3);border-radius:999px;padding:3px 10px}body.static #spacer,body.static canvas#c,body.static #overlay,body.static #card,body.static #nav,body.static #detail{display:none}body.static{overscroll-behavior:auto}body.static #fallback,html.no-js #fallback{display:block}html.no-js #spacer,html.no-js canvas#c,html.no-js #overlay,html.no-js #card,html.no-js #nav,html.no-js #loader{display:none}@media (max-width: 720px){#nav{display:none}#detail{inset:auto 12px 12px;width:auto;max-height:78vh}#detail img{max-height:24vh}#detail h2{font-size:23px}#card{width:min(300px,calc(100vw - 32px))}#brand{top:16px;left:16px}}