:root{--bg:#0b0c0e;--panel:#131519;--line:#23262c;--ink:#e9ebee;--dim:#7a8089;--scrub:#d7e3ea}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;font-family:Space Grotesk,system-ui,sans-serif}a{color:inherit;text-decoration:none}.mono{font-family:JetBrains Mono,monospace}header{z-index:40;background:linear-gradient(var(--bg), #0b0c0ebf 70%, #0b0c0e00);justify-content:space-between;align-items:center;padding:20px 22px;display:flex;position:sticky;top:0}.brand .name{letter-spacing:.06em;font-size:15px;font-weight:700;line-height:1}.brand .role{letter-spacing:.22em;color:var(--dim);margin-top:5px;font-size:10px}.menuzone{position:relative}.burger{border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:2px;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:40px;height:40px;transition:border-color .2s;display:flex}.burger:hover{border-color:var(--dim)}.burger span{background:var(--ink);width:16px;height:1.5px;transition:all .25s}.burger.open span:first-child{transform:translateY(5.5px)rotate(45deg)}.burger.open span:nth-child(2){opacity:0}.burger.open span:nth-child(3){transform:translateY(-5.5px)rotate(-45deg)}.dropdown{background:var(--panel);border:1px solid var(--line);opacity:0;transform-origin:100% 0;pointer-events:none;border-radius:4px;width:230px;padding:8px;transition:all .2s;position:absolute;top:52px;right:0;transform:translateY(-6px)scale(.98);box-shadow:0 20px 50px #00000080}.dropdown.open{opacity:1;pointer-events:auto;transform:none}.dropdown a{color:var(--ink);border-radius:3px;justify-content:space-between;align-items:center;padding:11px 12px;font-size:15px;transition:background .15s;display:flex}.dropdown a:hover{background:#1c1f25}.dropdown a .en{letter-spacing:.2em;color:var(--dim);font-size:9px}.dropdown .sep{background:var(--line);height:1px;margin:6px 8px}.dropdown .foot{letter-spacing:.16em;color:var(--dim);padding:8px 12px 4px;font-size:9px}.dropdown .lang{letter-spacing:.2em;gap:10px;padding:8px 12px 4px;font-size:9px;display:flex}.dropdown .lang a{color:var(--dim);padding:0;display:inline}.dropdown .lang a:hover{color:var(--ink);background:0 0}.dropdown .lang a[aria-current=true]{color:var(--scrub)}.filters{flex-wrap:wrap;align-items:center;gap:2px;padding:0 22px 14px;display:flex}.filters button{letter-spacing:.14em;color:var(--dim);cursor:pointer;background:0 0;border:none;padding:6px 12px 6px 0;font-family:inherit;font-size:11px;transition:color .2s}.filters button:hover,.filters button.active{color:var(--ink)}.filters button:after{content:"";background:0 0;height:1px;margin-top:4px;display:block}.filters button.active:after{background:var(--scrub)}.grid{background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line);grid-template-columns:repeat(3,1fr);gap:1px;display:grid}@media (width<=900px){.grid{grid-template-columns:repeat(2,1fr)}}@media (width<=560px){.grid{grid-template-columns:1fr}}.tile{aspect-ratio:16/10;background:var(--panel);cursor:pointer;isolation:isolate;position:relative;overflow:hidden}.tile.hidden{display:none}.tile .frame{background-position:50%;background-size:cover;transition:transform .4s;position:absolute;inset:0}.tile:hover .frame{transform:scale(1.02)}.tile .veil{display:none}.tile .meta{z-index:3;position:absolute;bottom:14px;left:16px;right:16px}.tile .title{opacity:0;font-size:19px;font-weight:500;transition:all .35s;transform:translateY(6px)}.tile:hover .title{opacity:1;transform:none}.tile .sub{letter-spacing:.16em;color:var(--dim);text-transform:uppercase;opacity:0;margin-top:6px;font-size:10px;transition:all .35s 50ms}.tile:hover .sub{opacity:1}.tile:focus-visible{outline:1px solid var(--scrub);outline-offset:-2px}.tile:focus-visible .title,.tile:focus-visible .sub{opacity:1;transform:none}.totop{z-index:45;background:var(--panel);border:1px solid var(--line);width:44px;height:44px;color:var(--ink);cursor:pointer;opacity:0;pointer-events:none;border-radius:3px;justify-content:center;align-items:center;font-size:16px;transition:all .25s;display:flex;position:fixed;bottom:22px;right:22px;transform:translateY(10px)}.totop.show{opacity:1;pointer-events:auto;transform:none}.totop:hover{border-color:var(--dim)}.scrubplayer{isolation:isolate;position:relative}.scrubplayer-media{background:var(--panel);position:relative;overflow:hidden}.scrubplayer.hero{border-bottom:1px solid var(--line)}.scrubplayer.hero .scrubplayer-media{height:60vh;min-height:320px}.scrubplayer-frame{background-position:50%;background-repeat:no-repeat;background-size:contain;position:absolute;inset:0}.scrubplayer-veil{display:none}.scrubplayer-play{z-index:3;cursor:pointer;backdrop-filter:blur(6px);width:56px;height:56px;color:var(--ink);background:#1315198c;border:1px solid #e9ebee59;border-radius:50%;justify-content:center;align-items:center;transition:all .2s;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.scrubplayer-play svg{margin-left:2px}.scrubplayer-play:hover{border-color:var(--scrub);background:#131519bf;transform:translate(-50%,-50%)scale(1.06)}.scrubplayer-iframe{background:var(--panel);object-fit:contain;border:0;width:100%;height:100%;position:absolute;inset:0}.scrubplayer-video{background:var(--panel);object-fit:contain;width:100%;height:100%;position:absolute;inset:0}.videothumbs{border-bottom:1px solid var(--line);flex-wrap:wrap;justify-content:center;gap:2px;padding:14px 22px;display:flex}.videothumbs button{letter-spacing:.1em;color:var(--dim);background:var(--panel);border:1px solid var(--line);cursor:pointer;padding:8px 14px;font-family:inherit;font-size:11px;transition:all .2s}.videothumbs button:hover{color:var(--ink);border-color:var(--dim)}.videothumbs button.active{color:var(--ink);border-color:var(--scrub)}.proj{max-width:760px;margin:0 auto;padding:48px 22px 24px}.proj h1{letter-spacing:-.01em;font-size:34px;font-weight:500}.projmeta{letter-spacing:.16em;color:var(--dim);text-transform:uppercase;margin-top:10px;font-size:11px}.projmeta .tag{color:inherit;text-decoration:none;transition:color .15s}.projmeta .tag:hover{color:var(--ink);text-underline-offset:3px;text-decoration:underline}.proj .stub{color:var(--dim);border-left:1px solid var(--line);margin-top:28px;padding-left:14px;font-size:14px;line-height:1.6}.proj .body{color:var(--ink);margin-top:28px;font-size:15px;line-height:1.7}.proj .body>*+*{margin-top:1em}.proj .body h2{margin-top:1.6em;font-size:18px;font-weight:500}.proj .body ul,.proj .body ol{padding-left:1.2em}.proj .body img{border:1px solid var(--line);max-width:100%;display:block}.proj .body a{color:var(--scrub);text-underline-offset:2px;text-decoration:underline}.prevnext{letter-spacing:.12em;max-width:760px;color:var(--dim);justify-content:space-between;gap:16px;margin:0 auto;padding:24px 22px 8px;font-size:11px;display:flex}.prevnext a{color:var(--dim);transition:color .2s}.prevnext a:hover{color:var(--ink)}footer{letter-spacing:.14em;color:var(--dim);text-align:center;padding:40px 22px;font-size:11px}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
