@font-face{font-family:"Inter";src:url(fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Pix";src:url(fonts/ps2p.woff2) format("woff2");font-display:swap}
:root{--bar:#4d4d4d;--bar-h:#333;--blue:#4398cd;--red:#d82d17;--green:#47a639;--yellow:#edcb1f;--px:8px;--logo-w:768px;--logo-h:352px}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-tap-highlight-color:transparent;background:#000;color:#fff;overscroll-behavior:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:Inter,system-ui,sans-serif;background:#000;overscroll-behavior:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
html.js:not(.lite) body{position:fixed;inset:0;overflow:hidden;touch-action:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
::selection{background:var(--blue);color:#fff}
@keyframes cyc{0%{background:var(--blue)}25%{background:var(--red)}50%{background:var(--green)}75%{background:var(--yellow)}100%{background:var(--blue)}}
.cyc,.cta .col,.cta .corner,.lframe:after,.dots:before{animation:cyc 4s steps(1,end) infinite}
#view{position:fixed;inset:0;width:100vw;height:100vh;display:block;touch-action:none;outline:none}
html.lite #view{display:none}
/* ---------- intro ---------- */
#intro{position:fixed;inset:0;z-index:5;pointer-events:none;opacity:0}
html.ready #intro{opacity:1}
#intro>*{pointer-events:auto}
.lockup{position:absolute;left:calc(50% - var(--logo-w)/2);top:calc(50% + var(--logo-h)/2 + 16px);display:flex;align-items:flex-end;gap:16px}
.lockup b{font-weight:800;font-size:38px;line-height:.98;letter-spacing:-.035em;display:block}
.chip{font-family:Pix,monospace;font-size:8px;line-height:16px;color:#9a9a9a;text-transform:uppercase;padding:0 8px;background:#1d1d1d;margin-bottom:4px;white-space:nowrap}
.btn{position:absolute;right:calc(50% - var(--logo-w)/2);top:calc(50% + var(--logo-h)/2 + 16px);width:268px;height:64px;background:var(--bar);display:flex;align-items:center;justify-content:space-between;padding:0 24px;font-family:Inter,sans-serif;font-weight:700;font-size:17px;line-height:1;letter-spacing:-.01em;transition:none;color:#fff}
.btn:hover,.btn:focus-visible{background:var(--bar-h);outline:none}
.arr{display:inline-block;width:20px;height:12px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' shape-rendering='crispEdges'%3E%3Cpath d='M5 0h2v1H5zM6 1h2v1H6zM0 2h9v2H0zM6 4h2v1H6zM5 5h2v1H5z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' shape-rendering='crispEdges'%3E%3Cpath d='M5 0h2v1H5zM6 1h2v1H6zM0 2h9v2H0zM6 4h2v1H6zM5 5h2v1H5z'/%3E%3C/svg%3E") center/contain no-repeat}
.btn .arr{margin-left:16px}
.remark{position:absolute;right:calc(50% - var(--logo-w)/2);top:calc(50% + var(--logo-h)/2 + 92px);font-family:Inter,sans-serif;font-size:12px;line-height:16px;color:#8a8a8a;display:flex;gap:8px;align-items:center}
.spk{width:8px;height:8px;background:linear-gradient(#8a8a8a,#8a8a8a) 0 2px/4px 4px no-repeat,linear-gradient(#8a8a8a,#8a8a8a) 4px 0/2px 8px no-repeat}
html.entered #intro .lockup,html.entered #intro .remark,html.entered #intro .chip{opacity:0;transition:opacity .3s steps(3)}
html.entered #intro .btn{width:64px;padding:0;justify-content:center;font-size:0;opacity:0;transition:width .25s steps(4),opacity .3s steps(3) .5s}
html.entered #intro .btn .arr{margin:0}
html.entered #intro{pointer-events:none}html.entered #intro>*{pointer-events:none}
/* ---------- nav ---------- */
#nav{position:fixed;left:22px;top:22px;z-index:6;width:150px;display:flex;flex-direction:column;gap:24px;visibility:hidden}
html.entered #nav{visibility:visible;animation:pop .5s steps(5) both .9s}
@keyframes pop{0%{opacity:0}100%{opacity:1}}
html.lite #nav{animation:none}
.name{display:block;position:relative;background:var(--bar);padding:16px 16px 18px;height:96px}
.name:hover{background:var(--bar-h)}
.name b{font-weight:800;font-size:21px;line-height:1;letter-spacing:-.03em;display:block}
.name .cyc{position:absolute;right:0;top:0;width:16px;height:16px}
.menu{list-style:none;display:flex;flex-direction:column;gap:2px}
.menu a{display:flex;align-items:center;gap:8px;font-family:Pix,monospace;font-size:8px;line-height:16px;text-transform:uppercase;color:#9a9a9a;padding:4px 0}
.menu a i{width:4px;height:4px;background:transparent;flex:none}
.menu a:hover{color:#fff}
.menu a.on{color:#fff}.menu a.on i{background:#fff}
.tog span{display:block;font-family:Pix,monospace;font-size:8px;line-height:16px;color:#6a6a6a;text-transform:uppercase;margin-bottom:4px}
.pill{display:flex;background:#1a1a1a;padding:2px;gap:2px;width:max-content}
.pill button{font-family:Pix,monospace;font-size:8px;line-height:16px;padding:4px 10px;color:#8a8a8a;text-transform:uppercase}
.pill button:hover{color:#fff;background:var(--bar-h)}
.pill button.on{background:var(--bar);color:#fff}
.burger{display:none}
/* ---------- cta ---------- */
.cta{position:fixed;right:22px;bottom:53px;z-index:6;width:292px;height:116px;background:var(--bar);padding:20px 24px 20px 40px;display:flex;flex-direction:column;justify-content:space-between;visibility:hidden}
html.entered .cta{visibility:visible;animation:pop .5s steps(5) both 1.1s}
html.lite .cta{animation:none}
.cta:hover{background:var(--bar-h)}
.cta .col{position:absolute;left:0;top:0;bottom:0;width:16px}
.cta .corner{position:absolute;right:0;top:0;width:16px;height:16px;animation-delay:-1s}
.cta .k{font-family:Pix,monospace;font-size:8px;line-height:16px;text-transform:uppercase;color:#bdbdbd}
.cta .v{font-weight:700;font-size:17px;letter-spacing:-.01em}
.cta .arr{position:absolute;right:24px;bottom:24px}
#toast{position:fixed;left:50%;top:22px;transform:translateX(-50%);z-index:9;background:var(--bar);font-family:Pix,monospace;font-size:8px;line-height:16px;padding:8px 16px;opacity:0;pointer-events:none;transition:opacity .2s steps(2);text-transform:uppercase;white-space:nowrap}
#toast.show{opacity:1}
/* ---------- lite ---------- */
#lite{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:normal}
html.lite #lite{position:static;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;display:block;min-height:100vh;
 background:#000 radial-gradient(circle at 1px 1px,#2b2b2b 1px,transparent 1.5px) 0 0/16px 16px;padding:120px 0 200px}
html.lite #lite>*{width:768px;margin-left:max(240px,calc(50% - 384px))}
.lhead{position:relative;margin-bottom:96px}
.lframe{width:384px;height:176px;border:8px solid var(--bar);display:grid;place-items:center;position:relative}
.lframe span{font-family:Pix,monospace;font-size:96px;line-height:1;color:var(--bar)}
.lframe:after{content:"";position:absolute;right:16px;top:16px;width:16px;height:16px}
.lhead h1{font-weight:800;font-size:38px;line-height:1;letter-spacing:-.035em;margin-top:24px}
.lhead .chip{display:inline-block;margin-top:12px}
.ls{margin-bottom:112px}
.lbar{position:relative;height:16px;background:var(--bar);margin:56px 0 40px;display:flex;align-items:center}
.lbar span{position:absolute;left:64px;top:32px;font-family:Pix,monospace;font-size:16px;line-height:16px;text-transform:uppercase}
.flag{position:absolute;left:16px;bottom:16px;width:4px;height:56px;background:#ddd}
.flag:after{content:"";position:absolute;left:4px;top:0;width:28px;height:20px;background:var(--acc);animation:wave .8s steps(1) infinite}
@keyframes wave{0%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}50%{clip-path:polygon(0 0,30% 0,30% 20%,70% 20%,70% 0,100% 0,100% 100%,70% 100%,70% 80%,30% 80%,30% 100%,0 100%)}}
.ls .lead{font-family:Pix,monospace;font-weight:400;font-size:40px;line-height:56px;margin:80px 0 32px;letter-spacing:0}
.ls p{font-size:17px;line-height:1.65;color:#c4c4c4;max-width:560px;margin-bottom:24px}
.sub{font-family:Pix,monospace;font-weight:400;font-size:16px;line-height:24px;display:flex;align-items:center;gap:16px;margin:48px 0 20px}
.dots{display:inline-flex;gap:4px}.dots:before,.dots:after{content:"";width:8px;height:8px;background:#707070}.dots:before{animation-delay:-2s}
.work,.pr{list-style:none;display:grid;gap:40px}
.work li,.pr li{position:relative;padding-right:96px;min-height:64px}
.work h3,.pr h3{font-family:Pix,monospace;font-weight:400;font-size:20px;line-height:32px;margin-bottom:8px}
.work p,.pr p{margin:0}
.num{position:absolute;right:0;top:0;width:72px;height:44px;background:var(--bar);font-family:Pix,monospace;font-size:16px;line-height:44px;text-align:center;box-shadow:0 6px 0 #2e2e2e}
.pr .n0{color:var(--blue)}.pr .n1{color:var(--red)}.pr .n2{color:var(--green)}.pr .n3{color:var(--yellow)}
.ico{display:none}
.ls h4{font-family:Pix,monospace;font-weight:400;font-size:8px;line-height:16px;color:#7a7a7a;text-transform:uppercase;margin:32px 0 12px}
.boards{list-style:none;display:grid;gap:8px}
.board{display:flex;align-items:center;gap:16px;min-height:56px;padding:0 20px;background:var(--bar);box-shadow:0 6px 0 #2a2a2a;font-family:Pix,monospace;font-size:12px;line-height:16px}
.board b{font-weight:400}
.board em{font-style:normal;font-family:Inter,sans-serif;font-size:14px;color:#cfcfcf;flex:1}
.board .arr{margin-left:auto}
a.board:hover{background:var(--blue)}
#l-work a.board:hover{background:var(--red)}#l-sites a.board:hover{background:#b39a17}
.board.here{background:#141414;box-shadow:none;color:#8a8a8a}.board.here em{color:#6a6a6a}
.outro{font-family:Pix,monospace;font-size:12px!important;color:#8a8a8a!important;margin-top:56px}
.lfoot{display:flex;justify-content:space-between;font-family:Pix,monospace;font-size:8px;line-height:16px;color:#7a7a7a;text-transform:uppercase;padding-top:24px;border-top:4px solid #1d1d1d}
.lfoot a:hover{color:#fff}
html.lite #intro{display:none}
/* ---------- small screens ---------- */
@media (max-width:767px){
 .lockup{left:calc(50% - var(--logo-w)/2);right:calc(50% - var(--logo-w)/2);bottom:auto;top:calc(50% + var(--logo-h)/2 + 16px);justify-content:space-between;align-items:flex-start}
 .lockup b{font-size:26px}
 .chip{margin:4px 0 0}
 .btn{left:16px;right:16px;top:auto;width:auto;bottom:calc(40px + env(safe-area-inset-bottom));height:56px;font-size:16px}
 .remark{left:16px;right:auto;top:auto;bottom:calc(14px + env(safe-area-inset-bottom))}
 html.entered #intro .btn{width:56px;left:auto}
 #nav{left:0;top:0;bottom:0;width:min(300px,82vw);background:#000;padding:76px 16px 24px;gap:28px;transform:translateX(-100%);transition:transform .32s cubic-bezier(.5,0,.5,1);border-right:4px solid #1d1d1d}
 html.nav-open #nav{transform:none}
 html.entered #nav{animation:none}
 .name{height:auto}
 .menu a{font-size:12px;line-height:20px;padding:10px 0}
 .menu a i{width:6px;height:6px}
 .pill button{padding:14px 16px;font-size:10px;line-height:16px}
 .burger{display:flex;position:fixed;left:12px;top:12px;z-index:7;width:48px;height:48px;background:var(--bar);flex-direction:column;justify-content:center;align-items:center;gap:5px;visibility:hidden}
 html.entered .burger{visibility:visible}
 .burger i{display:block;width:20px;height:3px;background:#fff;transition:transform .2s steps(2),opacity .2s steps(2)}
 html.nav-open .burger i:nth-child(1){transform:translateY(8px) rotate(45deg)}html.nav-open .burger i:nth-child(2){opacity:0}html.nav-open .burger i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
 .cta{right:12px;bottom:calc(12px + env(safe-area-inset-bottom));width:auto;height:48px;padding:0 16px 0 28px;flex-direction:row;align-items:center;gap:12px}
 .cta .col{width:12px}.cta .corner{width:12px;height:12px}
 .cta .v{display:none}.cta .k{font-size:10px;line-height:16px;color:#fff}
 .cta .arr{position:static;width:16px;height:10px}
 html.lite #lite{padding:84px 16px 140px}
 html.lite .cta{display:none}
 html.lite #lite>*{width:auto;margin-left:0}
 .lframe{width:100%;height:auto;aspect-ratio:48/22}
 .lframe span{font-size:72px}
 .lhead h1{font-size:30px}
 .ls .lead{font-size:24px;line-height:36px;margin:64px 0 24px}
 .lbar span{left:48px;font-size:12px}
 .ls p{font-size:16px}
 .work li,.pr li{padding-right:72px}
 .num{width:56px;height:36px;line-height:36px;font-size:12px}
 .work h3,.pr h3{font-size:14px;line-height:24px}
 .board{font-size:10px;padding:12px 14px;flex-wrap:wrap;gap:6px 12px}
 .board em{font-size:13px;flex-basis:100%;order:3}
 .board .arr{order:2}
}
@media (prefers-reduced-motion:reduce){.cyc,.cta .col,.cta .corner,.flag:after{animation:none}}