:root {
  --works-bg:#111814;
  --works-panel:#18221d;
  --works-line:#53635a;
  --works-text:#eef1e9;
  --works-muted:#9eaca3;
  --works-lime:#d8ef65;
  --works-orange:#f16a43;
  --works-paper:#efe9da;
}
* { box-sizing:border-box; }
body.works-page { margin:0; color:var(--works-text); background:var(--works-bg); font-family:"Songti SC","STSong",serif; }
.works-grain { position:fixed; inset:0; z-index:-1; opacity:.13; pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.3) .55px,transparent .7px); background-size:5px 5px; }
.works-header,.works-main,.works-footer { width:min(1240px,calc(100% - 40px)); margin-inline:auto; }
.works-header { min-height:86px; display:flex; align-items:center; justify-content:space-between; gap:30px; border-bottom:1px solid var(--works-line); }
.works-brand { display:flex; align-items:center; gap:13px; color:inherit; text-decoration:none; }
.works-brand>span { display:grid; place-items:center; width:45px; height:45px; color:var(--works-bg); background:var(--works-lime); border-radius:50%; font:900 22px "STKaiti","KaiTi",serif; transform:rotate(-7deg); }
.works-brand strong { font-size:17px; letter-spacing:.04em; }
.works-brand small { display:block; margin-top:4px; color:var(--works-muted); font:700 7px ui-monospace,monospace; letter-spacing:.2em; }
.works-header nav { display:flex; gap:20px; }
.works-header nav a,.works-footer a { color:#d7dfd8; font-size:9px; text-decoration:none; }
.works-header nav a:hover,.works-footer a:hover { color:var(--works-lime); }
.works-header nav a.active { color:var(--works-lime); box-shadow:0 1px 0 var(--works-lime); }
.works-main { padding-bottom:90px; }
.works-topline { display:flex; justify-content:space-between; padding:23px 0; color:var(--works-muted); font:700 8px ui-monospace,monospace; letter-spacing:.12em; }
.works-topline a { color:inherit; text-decoration:none; }
.works-hero { min-height:480px; display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:70px; align-items:center; padding:60px 0 70px; }
.works-hero>div>p:first-child { margin:0 0 22px; color:var(--works-lime); font:800 9px ui-monospace,monospace; letter-spacing:.2em; }
.works-hero h1 { margin:0; font:900 clamp(56px,7.4vw,100px)/.98 "STKaiti","KaiTi",serif; letter-spacing:-.055em; }
.works-hero h1 em { color:var(--works-orange); font-style:normal; }
.works-hero>div>p:last-child { max-width:730px; margin:30px 0 0; color:var(--works-muted); font-size:12px; line-height:1.9; }
.works-index-card { min-height:310px; display:flex; flex-direction:column; padding:28px; color:var(--works-bg); background:var(--works-lime); border:1px solid #fff; box-shadow:10px 11px 0 var(--works-orange); transform:rotate(1.4deg); }
.works-index-card>span { font:800 8px ui-monospace,monospace; letter-spacing:.16em; }
.works-index-card>strong { margin:auto 0 3px; font:900 104px/.8 ui-monospace,monospace; letter-spacing:-.12em; }
.works-index-card>p { min-height:34px; margin:16px 0 22px; font-size:9px; line-height:1.65; }
.works-index-card>div { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
.works-index-card i { height:9px; background:var(--works-bg); }
.works-index-card i:nth-child(2) { opacity:.7; }.works-index-card i:nth-child(3) { opacity:.45; }.works-index-card i:nth-child(4) { opacity:.2; }
.showroom-nav { display:grid; grid-template-columns:repeat(5,1fr); border:1px solid var(--works-line); }
.showroom-nav a { min-width:0; display:grid; grid-template-columns:auto 1fr; gap:4px 10px; padding:17px; color:var(--works-muted); border-right:1px solid var(--works-line); text-decoration:none; transition:.16s ease; }
.showroom-nav a:last-child { border:0; }
.showroom-nav a span { grid-row:1/3; color:#6e8176; font:800 8px ui-monospace,monospace; }
.showroom-nav a strong { color:var(--works-text); font-size:11px; }
.showroom-nav a small { font:700 7px ui-monospace,monospace; letter-spacing:.1em; }
.showroom-nav a:hover,.showroom-nav a.active { color:var(--works-bg); background:var(--works-lime); }
.showroom-nav a:hover strong,.showroom-nav a.active strong,.showroom-nav a:hover span,.showroom-nav a.active span { color:var(--works-bg); }
.works-section-heading { display:grid; grid-template-columns:150px minmax(0,1fr) 300px; gap:25px; align-items:end; margin:75px 0 25px; padding-bottom:17px; border-bottom:1px solid var(--works-line); }
.works-section-heading>span { color:var(--works-lime); font:800 8px ui-monospace,monospace; letter-spacing:.16em; }
.works-section-heading h2 { margin:0; font:850 30px "STKaiti","KaiTi",serif; }
.works-section-heading p { margin:0; color:var(--works-muted); font-size:10px; line-height:1.7; }
.district-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.district { position:relative; min-height:245px; display:grid; grid-template-columns:75px 1fr; gap:22px; padding:29px; overflow:hidden; color:var(--works-bg); background:var(--works-paper); border:1px solid #000; text-decoration:none; transition:.18s ease; }
.district:hover { transform:translate(-3px,-4px); box-shadow:7px 8px 0 var(--works-lime); }
.district>span { display:grid; place-items:center; width:66px; height:66px; color:#fff; background:var(--works-bg); font:800 10px ui-monospace,monospace; clip-path:polygon(0 0,82% 0,100% 18%,100% 100%,18% 100%,0 82%); }
.district b { display:block; margin-bottom:21px; color:#6d766f; font:800 8px ui-monospace,monospace; letter-spacing:.12em; }
.district strong { display:block; font:850 25px "STKaiti","KaiTi",serif; }
.district p { max-width:360px; margin:12px 0 0; color:#69726c; font-size:10px; line-height:1.75; }
.district>i { position:absolute; right:-3px; bottom:-25px; color:rgba(17,24,20,.06); font:900 110px/1 ui-monospace,monospace; }
.district-ue { background:#f2c95f; }.district-lab { background:#dbe6de; }.district-code { background:#efe9da; }.district-game { background:#f1ded4; }
.works-featured { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.featured-work,.work-card { display:grid; color:inherit; background:var(--works-panel); border:1px solid var(--works-line); text-decoration:none; transition:.18s ease; animation:work-reveal .35s ease both; animation-delay:calc(var(--work-index) * 40ms); }
@keyframes work-reveal { from { opacity:0; translate:0 8px; } }
.featured-work { grid-template-columns:190px 1fr; min-height:260px; }
.work-card { min-height:390px; grid-template-rows:180px 1fr; }
.featured-work:hover,.work-card:hover { border-color:var(--works-lime); box-shadow:6px 7px 0 var(--works-lime); transform:translate(-2px,-3px); }
.work-cover { position:relative; display:grid; place-items:center; overflow:hidden; background:#28362e; border-right:1px solid var(--works-line); }
.work-card .work-cover { border-right:0; border-bottom:1px solid var(--works-line); }
.work-cover::before,.work-cover::after { content:""; position:absolute; border:1px solid rgba(255,255,255,.15); border-radius:50%; }
.work-cover::before { width:140px; height:140px; }.work-cover::after { width:210px; height:210px; }
.work-cover[data-family="game"] { background:#613f35; }.work-cover[data-family="design"] { background:#36424d; }.work-cover[data-family="media"] { background:#344b40; }
.work-cover>span { position:relative; z-index:1; color:var(--works-lime); font:900 clamp(24px,4vw,48px)/1 ui-monospace,monospace; letter-spacing:-.08em; }
.work-cover>small { position:absolute; z-index:1; left:13px; bottom:12px; color:#c5d0c8; font:700 7px ui-monospace,monospace; letter-spacing:.12em; }
.work-copy { display:flex; flex-direction:column; padding:25px; }
.work-copy>p:first-child { margin:0; color:var(--works-orange); font:800 8px ui-monospace,monospace; letter-spacing:.12em; }
.work-copy h2 { margin:17px 0 9px; font:850 24px/1.2 "STKaiti","KaiTi",serif; }
.work-copy>p:not(:first-child) { flex:1; margin:0; color:var(--works-muted); font-size:10px; line-height:1.75; }
.work-copy>strong { margin-top:23px; color:var(--works-lime); font:800 9px ui-monospace,monospace; }
.is-offline { opacity:.55; }
.works-toolbar { display:grid; grid-template-columns:minmax(280px,620px) 1fr; gap:20px; align-items:center; margin-top:38px; padding:22px 0; border-bottom:1px solid var(--works-line); }
.works-toolbar label { height:49px; display:grid; grid-template-columns:35px 1fr; align-items:center; padding:0 13px; color:var(--works-bg); background:var(--works-paper); border:1px solid #000; }
.works-toolbar input { min-width:0; border:0; outline:0; background:transparent; }
.works-toolbar>span { color:var(--works-muted); text-align:right; font:800 8px ui-monospace,monospace; }
.works-filters { display:flex; flex-wrap:wrap; gap:7px; padding:22px 0; }
.works-filters button { padding:7px 13px; color:var(--works-muted); background:transparent; border:1px solid var(--works-line); border-radius:99px; cursor:pointer; }
.works-filters button.active { color:var(--works-bg); background:var(--works-lime); border-color:var(--works-lime); }
.works-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.works-empty { grid-column:1/-1; min-height:260px; display:grid; place-items:center; color:var(--works-muted); border:1px dashed var(--works-line); }
.works-contact { display:grid; grid-template-columns:160px 1fr auto; gap:28px; align-items:center; margin-top:75px; padding:30px; color:var(--works-bg); background:var(--works-lime); border:1px solid #fff; }
.works-contact>span { font:800 8px ui-monospace,monospace; letter-spacing:.14em; }
.works-contact h2 { margin:0 0 5px; font:850 23px "STKaiti","KaiTi",serif; }
.works-contact p { margin:0; font-size:10px; }
.works-contact a { padding:10px 14px; color:#fff; background:var(--works-bg); border:1px solid #000; text-decoration:none; font-size:10px; }
.works-footer { min-height:105px; display:flex; align-items:center; justify-content:space-between; gap:20px; color:var(--works-muted); border-top:1px solid var(--works-line); font-size:9px; }
@media (max-width:900px) {
  .works-header nav a:nth-child(3),.works-header nav a:nth-child(4) { display:none; }
  .works-hero { grid-template-columns:1fr; }
  .works-index-card { width:min(420px,92%); margin-left:auto; }
  .showroom-nav { grid-template-columns:repeat(3,1fr); }
  .showroom-nav a { border-bottom:1px solid var(--works-line); }
  .works-section-heading { grid-template-columns:120px 1fr; }
  .works-section-heading p { grid-column:2; }
  .works-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px) {
  .works-header { align-items:flex-start; flex-direction:column; justify-content:center; padding:15px 0; }
  .works-header nav { width:100%; justify-content:space-between; }
  .works-main,.works-header,.works-footer { width:min(100% - 22px,1240px); }
  .works-topline span { display:none; }
  .works-hero { gap:38px; min-height:0; padding:45px 0 55px; }
  .works-hero h1 { font-size:52px; }
  .works-index-card { width:100%; min-height:260px; }
  .showroom-nav { grid-template-columns:1fr 1fr; }
  .works-section-heading { grid-template-columns:1fr; margin-top:55px; }
  .works-section-heading p { grid-column:auto; }
  .district-grid,.works-featured,.works-grid { grid-template-columns:1fr; }
  .district { grid-template-columns:58px 1fr; min-height:220px; padding:22px; }
  .district>span { width:52px; height:52px; }
  .featured-work { grid-template-columns:125px 1fr; }
  .works-toolbar { grid-template-columns:1fr; }
  .works-toolbar>span { text-align:left; }
  .works-contact { grid-template-columns:1fr; }
  .works-contact a { width:max-content; }
  .works-footer { align-items:flex-start; flex-direction:column; justify-content:center; padding:25px 0; }
}
@media (prefers-reduced-motion:reduce) {
  .district,.featured-work,.work-card { animation:none; transition:none; }
}