:root{
  --bg:#0F0E13;
  --surface:#17161B;
  --surface-2:#1C1B20;
  --text:#EDECE8;
  --muted:#9B9AA1;
  --muted-2:#6B6A71;
  --rule:rgba(255,255,255,0.09);
  --rule-strong:rgba(255,255,255,0.16);
  --rule-status:rgba(255,255,255,0.12);
  --rule-chip:rgba(255,255,255,0.14);
  --grid:rgba(255,255,255,0.035);
  --coral:#FF5E6B;
  --coral-strong:#FF7787;
  --green:#4ADA8D;
  --amber:#FFC940;
  --hover:rgba(255,94,107,0.06);
  --green-glow:0 0 6px rgba(74,218,141,0.6);
  --green-pulse:0 0 0 4px rgba(74,218,141,0.25);
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:"Jost", system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text)}
body{
  font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background-image:
    linear-gradient(to right,var(--grid) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid) 1px,transparent 1px);
  background-size:24px 24px;
}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px dashed var(--coral);outline-offset:3px;box-shadow:inset 0 0 0 1px rgba(237,236,232,0.25)}
button,a,input,[role=button]{font-family:inherit}
::selection{background:var(--coral);color:var(--bg)}
.wrap{max-width:1320px;margin:0 auto;padding:0 32px}

/* ============ HEADER / NAV ============ */
header.site{position:sticky;top:0;z-index:40;background:rgba(15,14,19,0.88);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--rule)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:18px;padding-bottom:18px;gap:24px}
.brand{display:flex;align-items:center;gap:12px;min-height:44px}
.brand svg.kite{width:20px;height:26px;display:block}
.brand .prompt{font-family:var(--mono);font-weight:500;font-size:14px;color:var(--text)}
.brand .prompt .sh{color:var(--coral);margin-right:6px}
.brand .prompt .name{letter-spacing:.02em}
.brand .prompt .flag{color:var(--muted)}

nav.primary{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
nav.primary a{font-family:var(--mono);font-size:13px;padding:10px 12px;color:var(--muted);border:1px solid transparent;min-height:44px;display:inline-flex;align-items:center;transition:background .15s ease,border-color .15s ease,color .15s ease}
nav.primary a:hover{text-decoration:none;background:var(--hover);border-color:var(--rule);color:var(--coral)}
nav.primary a .fl{color:var(--coral)}
nav.primary .cta{border:1px solid var(--coral);background:transparent;color:var(--coral);padding:10px 16px}
nav.primary .cta:hover{background:var(--coral);border-color:var(--coral);color:var(--bg)}

/* ============ BUTTONS ============ */
.btn{font-family:var(--mono);font-size:13px;padding:14px 20px;border:1px solid var(--coral);background:var(--coral);color:var(--bg);display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}
.btn:hover{background:var(--coral-strong);border-color:var(--coral-strong);text-decoration:none}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--rule-strong)}
.btn.ghost:hover{background:var(--hover);color:var(--text);border-color:var(--coral)}
.btn svg{width:14px;height:14px}

/* ============ SECTIONS ============ */
section{padding:88px 0;border-top:1px solid var(--rule);background:var(--bg)}
section.alt{background:var(--surface)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:40px}
.sec-head .idx{font-family:var(--mono);font-size:12px;color:var(--coral);letter-spacing:.08em}
.sec-head h2{font-family:var(--mono);font-weight:500;font-size:clamp(26px,3.4vw,40px);line-height:1.15;margin:10px 0 0;letter-spacing:-.01em;color:var(--text)}
.sec-head .note{font-family:var(--mono);font-size:12px;color:var(--muted);max-width:360px;line-height:1.6}
.sec-head .note::before{content:"// ";color:var(--coral)}

/* ============ JSON BLOCK (shared by .case + .proj-meta) ============ */
.json-block,.case pre.json,pre.proj-meta{font-family:var(--mono);font-size:13px;line-height:1.7;margin:0;white-space:pre-wrap;color:var(--text)}
.json-block .open,.json-block .close,.case .open,.case .close,pre.proj-meta .open,pre.proj-meta .close{color:var(--muted-2)}
.json-block .k,.case .k,pre.proj-meta .k{color:var(--coral)}
.json-block .s,.case .s,pre.proj-meta .s{color:var(--muted-2)}
.json-block .str,.case .str,pre.proj-meta .str{color:var(--green)}
.json-block .str::before,.json-block .str::after,
.case .str::before,.case .str::after,
pre.proj-meta .str::before,pre.proj-meta .str::after{content:'"';color:var(--muted-2)}
.json-block .num,.case .num,pre.proj-meta .num{color:var(--amber)}

/* ============ HOME: HERO ============ */
.hero{position:relative;padding:80px 0 72px}
.hero .kicker{
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-bottom:32px;
}
.hero .kicker span.num{color:var(--coral)}
.hero h1{font-family:var(--mono);font-weight:500;font-size:clamp(36px,6.4vw,84px);line-height:1.04;letter-spacing:-0.01em;margin:0 0 28px;color:var(--text)}
.hero h1 .caret{color:var(--coral);margin-right:10px}
.hero h1 .cursor{
  display:inline-block;width:0.55em;height:0.95em;vertical-align:-0.08em;
  background:var(--green);margin-left:4px;
  box-shadow:var(--green-glow);
  animation:blink 1s steps(2,jump-none) infinite;
}
.hero p.lead{font-family:var(--sans);font-size:clamp(17px,1.4vw,20px);color:var(--muted);max-width:640px;margin:0 0 40px;line-height:1.55}
.hero .cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ============ HOME: WORK ============ */
.work-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.case{grid-column:span 4;border:1px solid var(--rule);background:var(--surface-2);padding:22px 24px 24px;font-family:var(--mono);font-size:13px;line-height:1.7;color:var(--text);position:relative;transition:border-color .15s ease,background .15s ease;display:block}
.case:hover{border-color:var(--rule-strong);background:var(--surface);text-decoration:none}
.case .idx{position:absolute;top:18px;right:18px;font-family:var(--mono);font-size:11px;color:var(--muted-2)}
.case .title{font-family:var(--sans);font-size:22px;font-weight:500;letter-spacing:-.01em;margin:14px 0 2px;line-height:1.2;color:var(--text)}
.case .desc{font-family:var(--sans);color:var(--muted);font-size:15px;line-height:1.55;margin:12px 0 6px}
.case .view{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:10px 12px;border:1px solid var(--rule);font-size:12px;color:var(--text);min-height:36px;transition:background .15s ease,border-color .15s ease,color .15s ease}
.case:hover .view{background:var(--coral);color:var(--bg);border-color:var(--coral)}

/* ============ HOME: STUDIO ============ */
.studio-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:40px;align-items:start}
.studio-copy{grid-column:span 7}
.studio-copy h3{font-family:var(--sans);font-weight:400;font-size:clamp(22px,2.4vw,32px);line-height:1.35;margin:0;color:var(--text);letter-spacing:-.01em}
.studio-copy h3 em{font-style:normal;color:var(--coral)}
.studio-side{grid-column:span 5;font-family:var(--mono);font-size:12px;color:var(--muted);border:1px solid var(--rule);padding:20px;background:var(--surface-2)}
.studio-side dl{margin:0;display:grid;grid-template-columns:max-content 1fr;gap:10px 18px}
.studio-side dt{color:var(--coral)}
.studio-side dd{margin:0;color:var(--text)}
.languages{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.lang{font-family:var(--mono);font-size:11px;padding:6px 10px;border:1px solid var(--rule-chip);color:var(--muted);background:transparent}
.lang::before{content:"//";color:var(--coral);margin-right:6px}

/* ============ HOME: SERVICES ============ */
.services{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--rule);background:var(--bg)}
.svc{padding:28px 28px 32px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--bg);transition:background .15s ease}
.svc:nth-child(2n){border-right:0}
.svc:nth-last-child(-n+2){border-bottom:0}
.svc:hover{background:var(--hover)}
.svc .cmd{font-family:var(--mono);font-size:13px;color:var(--text);margin-bottom:14px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.svc .cmd .sh{color:var(--coral)}
.svc .cmd .sub{color:var(--muted)}
.svc .cmd .flag{color:var(--coral-strong)}
.svc h4{font-family:var(--sans);font-weight:500;font-size:22px;margin:0 0 8px;letter-spacing:-.01em;color:var(--text)}
.svc p{font-family:var(--sans);color:var(--muted);margin:0 0 18px;font-size:15px;line-height:1.55;max-width:48ch}
.tags{display:flex;gap:8px;flex-wrap:wrap}
.tag{font-family:var(--mono);font-size:11px;padding:6px 10px;border:1px solid var(--rule-chip);color:var(--muted);background:transparent}

/* ============ FILE TREE ============ */
.tree-block{border:1px solid var(--rule);background:var(--surface-2);padding:28px;font-family:var(--mono);font-size:13px;line-height:1.75;color:var(--text);overflow-x:auto;white-space:pre;margin:0}
.tree-block .c,.tree-block .dim{color:var(--muted-2)}
.tree-block .v{color:var(--text)}
.tree-block .k{color:var(--coral)}
.tree-head{font-family:var(--mono);font-size:12px;color:var(--muted);margin-bottom:14px}
.tree-head::before{content:"// tree ";color:var(--coral)}

/* ============ HOME: CONTACT ============ */
.contact-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:48px;align-items:stretch}
.contact-grid h3{font-family:var(--mono);font-weight:500;font-size:clamp(26px,3vw,40px);line-height:1.15;margin:0 0 18px;letter-spacing:-.01em;color:var(--text)}
.contact-grid h3 .caret{color:var(--coral);margin-right:8px}
.contact-grid p{font-family:var(--sans);color:var(--muted);margin:0 0 28px;max-width:44ch}
.contact-list{list-style:none;padding:0;margin:0;font-family:var(--mono);font-size:13px;border-top:1px solid var(--rule)}
.contact-list li{display:grid;grid-template-columns:140px 1fr auto;gap:18px;align-items:center;padding:18px 4px;border-bottom:1px solid var(--rule);transition:background .15s ease}
.contact-list li:hover{background:var(--hover)}
.contact-list li .k{color:var(--coral);font-size:12px;letter-spacing:.02em}
.contact-list li .v a,.contact-list li .v{color:var(--text)}
.contact-list li .act{color:var(--muted);font-size:11px}
.contact-card{border:1px solid var(--rule);background:var(--surface);color:var(--text);padding:28px;font-family:var(--mono);font-size:12px;line-height:1.7;display:flex;flex-direction:column;justify-content:space-between}
.contact-card .logo{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.contact-card .logo svg{width:18px;height:23px}
.contact-card .logo b{font-weight:500;font-family:var(--mono);font-size:13px}
.contact-card .meta{color:var(--muted)}
.contact-card .meta b{color:var(--coral)}
.contact-card .status{display:flex;align-items:center;gap:10px;margin-top:24px;font-size:11px;color:var(--muted)}
.contact-card .status .dot{width:8px;height:8px;background:var(--green);display:inline-block;animation:blink 1.4s steps(2,jump-none) infinite;box-shadow:var(--green-pulse)}

/* ============ PROJECT DETAIL ============ */
.proj-hero{padding:56px 0 48px}
.proj-hero .kicker{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-bottom:24px}
.proj-hero .kicker span.num{color:var(--coral)}
.back-link{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;color:var(--muted);padding:8px 12px;border:1px solid var(--rule);min-height:36px;margin-bottom:32px;transition:background .15s ease,border-color .15s ease,color .15s ease}
.back-link:hover{text-decoration:none;background:var(--hover);border-color:var(--coral);color:var(--coral)}
.back-link .fl{color:var(--coral)}
.proj-hero h1{font-family:var(--mono);font-weight:500;font-size:clamp(36px,6vw,72px);line-height:1.04;letter-spacing:-.01em;margin:0 0 28px;color:var(--text)}
.proj-hero h1 .caret{color:var(--coral);margin-right:10px}
.proj-hero h1 em{font-style:normal;color:var(--coral)}
.proj-meta-wrap{border:1px solid var(--rule);background:var(--surface-2);padding:24px;margin-bottom:40px}
pre.proj-meta{margin:0}
.proj-image{border:1px solid var(--rule);background:var(--surface-2);padding:8px;margin:0}
.proj-image img{width:100%;height:auto;display:block}
.proj-image figcaption{font-family:var(--mono);font-size:11px;color:var(--muted-2);padding:10px 8px 4px;letter-spacing:.04em}
.proj-image figcaption::before{content:"// ";color:var(--coral)}

.proj-overview{display:grid;grid-template-columns:repeat(12,1fr);gap:40px;align-items:start}
.proj-overview .head{grid-column:span 4}
.proj-overview .body{grid-column:span 8}
.proj-overview .body p{font-family:var(--sans);font-size:17px;line-height:1.7;color:var(--muted);margin:0 0 20px;max-width:62ch}
.proj-overview .body p:first-of-type{color:var(--text);font-size:19px}
.proj-overview .body a{color:var(--coral);border-bottom:1px solid currentColor}
.proj-overview .body a:hover{color:var(--coral-strong);text-decoration:none}

.gallery-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.gal{grid-column:span 6;border:1px solid var(--rule);background:var(--surface-2);padding:8px;transition:border-color .15s ease}
.gal:hover{border-color:var(--rule-strong)}
.gal img{width:100%;height:auto;display:block}
.gal.full{grid-column:1/-1}

.proj-next{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--rule);background:var(--bg)}
.proj-next a{padding:28px;font-family:var(--mono);font-size:13px;color:var(--text);display:flex;flex-direction:column;gap:6px;transition:background .15s ease,color .15s ease}
.proj-next a:first-child{border-right:1px solid var(--rule)}
.proj-next a:hover{text-decoration:none;background:var(--hover);color:var(--coral)}
.proj-next .label{font-size:11px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.proj-next .label .fl{color:var(--coral)}
.proj-next b{font-family:var(--sans);font-weight:500;font-size:20px;color:var(--text);letter-spacing:-.01em}
.proj-next a:hover b{color:var(--coral)}
.proj-next .right{text-align:right;align-items:flex-end}

/* ============ FOOTER ============ */
footer.site{background:var(--surface);color:var(--text);padding:56px 0 40px;border-top:1px solid var(--rule)}
footer.site .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
footer.site h5{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-2);margin:0 0 16px}
footer.site ul{list-style:none;padding:0;margin:0;font-family:var(--mono);font-size:13px}
footer.site ul li{margin-bottom:10px}
footer.site ul li a{color:var(--text)}
footer.site ul li a:hover{color:var(--coral)}
footer.site .fine{grid-column:1/-1;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;color:var(--muted-2);padding-top:40px;margin-top:32px;border-top:1px solid var(--rule)}

@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0.18}}

/* ============ MENU BUTTON ============ */
.menu-btn{
  display:none;align-items:center;justify-content:center;
  width:44px;height:44px;border:1px solid var(--rule);background:transparent;
  color:var(--text);font-family:var(--mono);font-size:12px;cursor:pointer;
}
.menu-btn:hover{background:var(--hover);border-color:var(--coral);color:var(--coral)}

/* ============ RESPONSIVE ============ */
@media (max-width:1440px){
  .wrap{max-width:1280px}
}
@media (max-width:1024px){
  .work-grid{grid-template-columns:repeat(6,1fr)}
  .case{grid-column:span 6}
  .studio-copy,.studio-side{grid-column:span 12}
  .services{grid-template-columns:1fr}
  .svc{border-right:0;border-bottom:1px solid var(--rule)}
  .svc:last-child{border-bottom:0}
  .contact-grid{grid-template-columns:1fr}
  footer.site .wrap{grid-template-columns:1fr 1fr}
  .proj-overview .head,.proj-overview .body{grid-column:span 12}
}
@media (max-width:768px){
  .wrap{padding:0 20px}
  .hero{padding:56px 0 40px}
  section{padding:64px 0}
  header.site .wrap{padding:14px 0}
  nav.primary{display:none}
  nav.primary.open{display:flex;position:absolute;top:100%;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--rule);padding:12px 20px;flex-direction:column;gap:2px;align-items:stretch}
  nav.primary.open a{width:100%;min-height:44px}
  .menu-btn{display:inline-flex}
  .contact-list li{grid-template-columns:1fr;gap:4px;align-items:flex-start;padding:14px 4px}
  footer.site .wrap{grid-template-columns:1fr}
  .gal{grid-column:1/-1}
  .proj-next{grid-template-columns:1fr}
  .proj-next a:first-child{border-right:0;border-bottom:1px solid var(--rule)}
  .proj-next .right{text-align:left;align-items:flex-start}
}
@media (max-width:420px){
  .hero h1{font-size:40px}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  .hero h1 .cursor,
  .contact-card .status .dot{animation:none !important;opacity:1}
}