/* Work grid */
.work-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(36px,4vw,56px) clamp(16px,2vw,28px)}
.wk{grid-column:span 6;display:flex;flex-direction:column;gap:18px}
.wk.c7{grid-column:span 7}.wk.c5{grid-column:span 5}
.wk-vis{position:relative;height:clamp(380px,44vw,660px);border-radius:var(--radius);overflow:hidden;container-type:size;isolation:isolate}
.wk-vis>*{transition:transform 1.1s var(--ease)}
.wk:hover .wk-vis>.lift{transform:translateY(-1.5%) scale(1.015)}
.wk-meta{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.wk-meta h3{font-size:clamp(1.3rem,1.8vw,1.6rem);letter-spacing:-.03em;font-weight:500}
.wk-meta .ind{color:var(--muted);font-size:1rem}
.wk-tags{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.wk-tags span{font-size:.76rem;padding:4px 10px;border:1px solid var(--line);border-radius:999px;color:var(--muted)}
.wk p{color:var(--muted);margin:-6px 0 0;max-width:56ch}
.work-note{margin-top:clamp(40px,5vw,64px);font-size:.82rem;color:var(--muted)}
@media (max-width:860px){.wk,.wk.c7,.wk.c5{grid-column:1/-1}.wk-vis{height:clamp(320px,92vw,520px)}.wk-tags{margin-left:0;width:100%}}

/* Browser frame */
.bw{position:absolute;border-radius:1.4cqw;overflow:hidden;box-shadow:0 2cqw 6cqw -1.5cqw rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.06)}
.bw-bar{height:4.2cqh;min-height:14px;display:flex;align-items:center;gap:.7cqw;padding:0 1.6cqw;background:rgba(255,255,255,.92)}
.bw-bar i{width:1cqw;height:1cqw;min-width:5px;min-height:5px;border-radius:50%;background:#d7d4cf}
.bw-bar b{margin:0 auto;font-weight:500;font-size:max(7px,1.15cqw);color:#7a7a80;background:#efeeea;padding:.35cqw 3cqw;border-radius:99px}
.bw.dark .bw-bar{background:#16181d}.bw.dark .bw-bar i{background:#2c2f36}.bw.dark .bw-bar b{background:#22252b;color:#8b8f98}
.bw-body{position:absolute;inset:max(14px,4.2cqh) 0 0 0;overflow:hidden}

/* Phone frame */
.ph{position:absolute;aspect-ratio:9/19.3;height:86cqh;border-radius:7.5cqh;padding:1.1cqh;background:#0c0c0e;
  box-shadow:0 3cqh 8cqh -2cqh rgba(0,0,0,.5),inset 0 0 0 .3cqh #2a2a2e}
.ph-s{position:relative;width:100%;height:100%;border-radius:6.6cqh;overflow:hidden}
.ph-s::before{content:"";position:absolute;top:1.6cqh;left:50%;translate:-50% 0;width:30%;height:3.6cqh;border-radius:99px;background:#000;z-index:5}
.ph-s .st{height:7cqh}

/* Shared micro-UI */
.ui{font-family:var(--f-sans);letter-spacing:-.01em;line-height:1.2}
.ui .pill{display:inline-block;border-radius:99px}
.ui img{width:100%;height:100%;object-fit:cover}
.wk-vis .ui,.wk-vis .nv-chart{pointer-events:none}
.wk-vis .ph{box-shadow:0 3cqh 8cqh -2cqh rgba(0,0,0,.45)}