/* OING UI — the product-studio page system for every OING page except photo.oing.space.
 * Served from https://oing.space/oing-ui.css, paired with oing-nav.js (site nav + reveal)
 * and oing-ui.js (cards, filters).
 *
 * Rules
 *   colour   neutral greys, one accent (vermilion) for primary buttons and the current place only
 *   type     system sans (SF / PingFang), tight display tracking, no serif
 *   shape    containers 20px radius, anything you press is a full pill
 *   images   real product screenshots in phone frames (assets/shots/*.webp)
 *   nav      two layers, both pinned: the site nav (oing-nav.js, solid #141417) on top,
 *            the section's own nav (.ui-subnav) right below it
 *   theme    follows the system: light and dark share every rule below
 */
:root{
  --bg:#f4f4f5;--surface:#fcfcfc;--surface-2:#ebebed;--surface-3:#e1e1e4;
  --ink:#18181b;--ink-2:#3f3f46;--muted:#5b5b63;--line:rgba(24,24,27,.09);--line-2:rgba(24,24,27,.16);
  --accent:#d9381e;--on-accent:#fff;--accent-soft:rgba(217,56,30,.1);
  --night:#141417;--on-night:#f4f4f5;--on-night-2:#a1a1aa;
  --shadow:0 1px 1px rgba(24,24,27,.04),0 12px 32px -12px rgba(24,24,27,.18);
  --shadow-lift:0 1px 1px rgba(24,24,27,.04),0 28px 60px -20px rgba(24,24,27,.28);
  --sans:"SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC","MiSans","Microsoft YaHei",sans-serif;
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  --r:20px;--gutter:clamp(16px,4vw,40px);--max:1240px;--nav-h:56px;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0f0f11;--surface:#18181b;--surface-2:#202024;--surface-3:#2a2a2f;
    --ink:#f4f4f5;--ink-2:#d4d4d8;--muted:#a1a1aa;--line:rgba(244,244,245,.09);--line-2:rgba(244,244,245,.16);
    --accent:#ff5a3d;--on-accent:#18181b;--accent-soft:rgba(255,90,61,.14);
    --night:#09090b;
    --shadow:0 1px 1px rgba(0,0,0,.3),0 12px 32px -12px rgba(0,0,0,.6);
    --shadow-lift:0 1px 1px rgba(0,0,0,.3),0 28px 60px -20px rgba(0,0,0,.75);
  }
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body.ui{margin:0;min-height:100dvh;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.ui a{color:inherit;text-decoration:none}
.ui img{display:block;max-width:100%}
.ui :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
.ui-skip{position:absolute;left:12px;top:-80px;z-index:40;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:999px;font-size:14px}
.ui-skip:focus{top:12px}
.ui-shell{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.ui-main{flex:1}
[id]{scroll-margin-top:124px}

/* ---------- Layer 1: site nav (oing-nav.js, fixed on top, one solid colour); the slot is its spacer ---------- */
[data-oing-nav-slot]{display:block;height:var(--nav-h);background:#141417}

/* ---------- Layer 2: the section's own nav, directly under the site nav ---------- */
.ui-subnav{position:sticky;top:var(--nav-h);z-index:20;background:var(--bg);background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.ui-subnav .ui-shell{display:flex;align-items:center;gap:4px;height:52px;overflow-x:auto;scrollbar-width:none}
.ui-subnav .ui-shell::-webkit-scrollbar{display:none}
.ui-subnav strong{flex:none;margin-right:10px;font-size:15px;font-weight:650;letter-spacing:-.01em}
.ui-subnav a{flex:none;display:flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;font-size:14px;color:var(--muted);transition:background-color .2s ease,color .2s ease}
.ui-subnav a:hover{color:var(--ink);background:var(--surface-2)}
.ui-subnav a[aria-current]{color:var(--ink);background:var(--surface-2);font-weight:600}

/* ---------- Type ---------- */
.ui-display{margin:0;font-weight:650;font-size:clamp(44px,8.6vw,96px);line-height:1.02;letter-spacing:-.045em;text-wrap:balance}
.ui-h1{margin:0;font-weight:650;font-size:clamp(38px,7vw,72px);line-height:1.04;letter-spacing:-.04em;text-wrap:balance}
.ui-h2{margin:0;font-weight:620;font-size:clamp(26px,4.2vw,40px);line-height:1.1;letter-spacing:-.03em}
.ui-h3{margin:0;font-weight:620;font-size:clamp(20px,2.4vw,24px);line-height:1.25;letter-spacing:-.02em}
.ui-lede{margin:0;max-width:30em;font-size:clamp(16px,2vw,19px);line-height:1.6;color:var(--muted);text-wrap:pretty}
.ui-small{font-size:13px;line-height:1.5;color:var(--muted)}
.ui-num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- Buttons (always pills) ---------- */
.ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:999px;font:600 15px/1 var(--sans);letter-spacing:-.01em;white-space:nowrap;cursor:pointer;border:0;transition:transform .2s var(--ease),background-color .2s ease,box-shadow .2s ease}
.ui-btn:active{transform:scale(.97)}
.ui-btn--primary{background:var(--accent);color:var(--on-accent);box-shadow:0 8px 20px -8px var(--accent)}
.ui-btn--primary:hover{box-shadow:0 12px 28px -10px var(--accent)}
.ui-btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.ui-btn--ghost:hover{background:var(--surface-2)}
.ui-btn .ui-arrow{transition:transform .25s var(--ease)}
.ui-btn:hover .ui-arrow{transform:translateX(3px)}
.ui-actions{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- Pills (status / tags / filters) ---------- */
.ui-pill{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);font:500 12px/1 var(--sans);white-space:nowrap}
.ui-pill--warn{background:var(--accent-soft);color:var(--accent)}
.ui-pill--night{background:rgba(244,244,245,.12);color:var(--on-night)}
.ui-filters{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 2px 6px;margin:0 -2px;scrollbar-width:none}
.ui-filters::-webkit-scrollbar{display:none}
.ui-filter{flex:none;scroll-snap-align:start;height:40px;padding:0 18px;border-radius:999px;border:0;background:var(--surface);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line);font:500 14px/1 var(--sans);cursor:pointer;transition:background-color .2s ease,color .2s ease}
.ui-filter:hover{background:var(--surface-2)}
.ui-filter[aria-pressed="true"]{background:var(--ink);color:var(--bg);box-shadow:none}
.ui-filter small{margin-left:6px;opacity:.6;font:inherit;font-size:12px}

/* ---------- Phone frame: wraps a real screenshot ---------- */
.ui-phone{position:relative;aspect-ratio:390/844;border-radius:clamp(22px,3.2vw,36px);padding:clamp(4px,.55vw,7px);background:#1c1c1f;box-shadow:var(--shadow-lift),inset 0 0 0 1px rgba(255,255,255,.08)}
.ui-phone img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:calc(clamp(22px,3.2vw,36px) - clamp(4px,.55vw,7px));background:var(--surface-2)}

/* ---------- Page head (section pages) ---------- */
.ui-crumbs{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:clamp(18px,3vw,30px) 0 0;list-style:none;font-size:13px;color:var(--muted)}
.ui-crumbs li+li::before{content:"/";margin-right:6px;opacity:.5}
.ui-crumbs a:hover{color:var(--ink)}
.ui-crumbs [aria-current]{color:var(--ink)}
.ui-pagehead{display:grid;gap:18px;padding:clamp(16px,3.4vw,36px) 0 clamp(28px,5vw,52px)}

/* ---------- Card grid (products) ---------- */
.ui-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:clamp(12px,1.6vw,20px)}
.ui-grid>li{display:flex;min-width:0}
.ui-grid>li>.ui-card{flex:1;min-width:0}
.ui-card{position:relative;display:flex;flex-direction:column;border-radius:var(--r);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.ui-card__stage{position:relative;height:clamp(240px,30vw,320px);overflow:hidden;background:var(--surface-2);display:flex;justify-content:center;padding-top:28px}
.ui-card__stage .ui-phone{width:clamp(150px,46%,190px);height:auto;transition:transform .5s var(--ease)}
.ui-card__body{display:grid;gap:8px;padding:18px 20px 20px}
.ui-card__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ui-card__title{margin:0;font-weight:620;font-size:18px;line-height:1.3;letter-spacing:-.02em}
.ui-card__text{margin:0;font-size:14px;line-height:1.55;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ui-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:4px;font-size:12px;color:var(--muted)}
.ui-card__go{flex:none;width:32px;height:32px;border-radius:999px;display:grid;place-items:center;background:var(--surface-2);color:var(--ink);font-size:15px;transition:background-color .25s ease,color .25s ease,transform .35s var(--ease)}
@media (hover:hover){
  .ui-card:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--line),var(--shadow-lift)}
  .ui-card:hover .ui-card__stage .ui-phone{transform:translateY(-10px)}
  .ui-card:hover .ui-card__go{background:var(--ink);color:var(--bg);transform:rotate(-45deg)}
}
.ui-card:active{transform:scale(.99)}
.ui-card--night .ui-card__stage{background:var(--night)}
@media (min-width:760px){
  .ui-grid--duo{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ui-grid--duo .ui-card__stage{height:clamp(320px,34vw,440px)}
  .ui-grid--duo .ui-card__stage .ui-phone{width:clamp(180px,40%,240px)}
}

/* ---------- Feature block (one lead product per section) ---------- */
.ui-feature{position:relative;display:grid;grid-template-columns:minmax(0,1fr);border-radius:var(--r);overflow:hidden;background:var(--night);color:var(--on-night);isolation:isolate}
@media (min-width:860px){.ui-feature{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:460px}}
.ui-feature__copy{display:grid;gap:16px;align-content:center;justify-items:start;padding:clamp(28px,4.4vw,60px)}
.ui-feature__copy p{margin:0;max-width:26em;color:var(--on-night-2);font-size:16px;line-height:1.6}
.ui-feature__art{position:relative;display:flex;justify-content:center;align-items:flex-start;gap:18px;padding-top:clamp(8px,4vw,56px);height:clamp(300px,40vw,460px);overflow:hidden}
.ui-feature__art .ui-phone{flex:none;width:clamp(140px,17vw,224px);box-shadow:0 40px 80px -24px rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,255,255,.1);transition:transform .6s var(--ease)}
.ui-feature__art .ui-phone:nth-child(2){margin-top:48px}
@media (hover:hover){.ui-feature:hover .ui-feature__art .ui-phone{transform:translateY(-10px)}}

/* ---------- Section ---------- */
.ui-section{padding:clamp(40px,7vw,88px) 0 0}
.ui-section__head{display:grid;gap:10px;margin-bottom:clamp(18px,3vw,28px)}

/* ---------- Empty / loading ---------- */
.ui-empty{padding:40px 24px;border-radius:var(--r);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);color:var(--muted);text-align:center;list-style:none}
.ui-skeleton{flex:1;border-radius:var(--r);background:linear-gradient(100deg,var(--surface) 30%,var(--surface-2) 50%,var(--surface) 70%) 0 0/200% 100%;box-shadow:inset 0 0 0 1px var(--line);height:420px;animation:ui-shimmer 1.4s linear infinite}
@keyframes ui-shimmer{to{background-position:-200% 0}}

/* ---------- Footer ---------- */
.ui-foot{margin-top:clamp(56px,9vw,120px);padding:28px 0 calc(28px + env(safe-area-inset-bottom));border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.ui-foot .ui-shell{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.ui-foot nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.ui-foot a:hover{color:var(--ink)}
.ui-mark{display:inline-flex;align-items:center;gap:8px;font-weight:650;letter-spacing:.06em;color:var(--ink)}
.ui-mark::before{content:"";width:16px;height:16px;border-radius:999px;box-shadow:inset 0 0 0 3.5px currentColor}

/* ---------- Reveal on scroll (only when oing-nav.js turned motion on) ---------- */
.ui-motion [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
.ui-motion [data-reveal].is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ui *,.ui *::before,.ui *::after{transition:none!important;animation:none!important}
  .ui-motion [data-reveal]{opacity:1;transform:none}
}
.ui-visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}