/* work */
.work{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.app{grid-column:span 2;display:flex;flex-direction:column;gap:14px;padding:24px}
.app.feat{grid-column:span 4}
.app-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--accent);background:var(--accent-soft);padding:5px 10px;border-radius:999px;white-space:nowrap}
.app h3{font-family:var(--f-display);font-weight:600;font-size:clamp(22px,2.2vw,26px);letter-spacing:-.02em;line-height:1.1;margin:4px 0 0}
.app.feat h3{font-size:clamp(26px,3vw,34px)}
.app p{margin:0;color:var(--muted);font-size:15px;max-width:54ch}
.meta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.meta b{color:var(--text);font-weight:700}
.meta .star{color:var(--warm)}
.feat-list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.feat-list li{font-size:13px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2)}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:6px}
.store{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;padding:9px 12px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface-2);cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.store svg{width:14px;height:14px;transition:transform .3s}
.store:hover{background:var(--text);color:var(--bg);border-color:transparent}
.store:hover svg{transform:translate(2px,-2px)}
.more{display:inline-flex;align-items:center;gap:6px;margin-left:auto;padding:9px 2px;border:0;background:none;cursor:pointer;font-size:13px;font-weight:700;color:var(--accent)}
.more svg{width:15px;height:15px;transition:transform .3s}
.more:hover svg{transform:translateX(4px)}
.app-glyph{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;border:1px solid var(--line-2);
  background:linear-gradient(145deg,var(--surface-2),color-mix(in srgb,var(--accent) 16%,var(--surface)));font-family:var(--f-display);font-weight:700;font-size:16px;flex:none}

/* modal */
.modal{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:16px}
.modal-bg{position:absolute;inset:0;background:color-mix(in srgb,var(--bg) 65%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity .35s}
.sheet{position:relative;display:flex;flex-direction:column;width:min(640px,100%);max-height:min(86vh,760px);overflow:hidden;border-radius:24px;border:1px solid var(--line-2);background:var(--surface);box-shadow:0 40px 80px -30px rgba(0,0,0,.45);
  transform:translateY(24px) scale(.97);opacity:0;transition:transform .45s var(--ease),opacity .35s}
.sheet-scroll{overflow-y:auto;overscroll-behavior:contain;padding:clamp(22px,4vw,34px);padding-right:clamp(18px,3.4vw,28px);scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--accent) 45%,transparent) transparent}
.sheet-scroll::-webkit-scrollbar{width:12px}
.sheet-scroll::-webkit-scrollbar-track{background:transparent;margin-block:22px}
.sheet-scroll::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent) 38%,transparent);border-radius:999px;border:4px solid var(--surface);background-clip:padding-box}
.sheet-scroll::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--accent) 65%,transparent);background-clip:padding-box}
.x{z-index:2}
.modal.open .modal-bg{opacity:1}
.modal.open .sheet{transform:none;opacity:1}
.sheet-head{display:flex;gap:16px;align-items:center;margin-bottom:18px;padding-right:44px}
.sheet-head h3{font-family:var(--f-display);font-size:clamp(24px,3vw,30px);letter-spacing:-.02em;margin:0;line-height:1.1}
.sheet-head .app-glyph{width:58px;height:58px;font-size:19px;border-radius:17px}
.x{position:absolute;right:16px;top:16px;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--surface-2);display:grid;place-items:center;cursor:pointer;transition:transform .3s,border-color .3s}
.x:hover{transform:rotate(90deg);border-color:var(--line-2)}
.x svg{width:16px;height:16px}
.sheet p.d{color:var(--muted);margin:0 0 20px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:0 0 22px}
.fact{padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}
.fact dt{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.fact dd{margin:4px 0 0;font-weight:700;font-size:15px;font-variant-numeric:tabular-nums}
.checks{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:15px}
.checks svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--accent)}
.src{font-size:12.5px;color:var(--faint);margin-top:16px}
@media (max-width:560px){.modal{place-items:end center;padding:0}.sheet{border-radius:24px 24px 0 0;max-height:88vh}.sheet-scroll{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}}