:root { color-scheme:light dark; --background:#f7f7f5; --surface:#fff; --text:#202124; --muted:#5f6368; --border:#d9d9d4; --accent:#315cc7; --accent-contrast:#fff; --stream-bg:url(/enzin/img/stream-bg.webp); }
@media (prefers-color-scheme:dark) { :root { --background:#121315; --surface:#1b1d20; --text:#f2f3f5; --muted:#c5c9cf; --border:#35383c; --accent:#8da7ff; --accent-contrast:#121315; } }
* { box-sizing:border-box; } html { background:var(--background); scroll-behavior:smooth; } body { max-width:1080px; margin:0 auto; padding:0 1.25rem; background:var(--background); color:var(--text); font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:16px; line-height:1.75; } a { color:var(--accent); text-underline-offset:.16em; } a:hover { text-decoration-thickness:.14em; } h1 > span { display:block; }
header { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.25rem 0; border-bottom:1px solid var(--border); } .brand { display:inline-flex; align-items:center; gap:.55rem; color:var(--text); font-size:1.05rem; font-weight:700; letter-spacing:-.02em; text-decoration:none; } .brand-mark { width:2.3rem; height:1rem; } .language { font-size:.9rem; white-space:nowrap; }
main { padding:3.5rem 0 2.5rem; } h1,h2,h3 { line-height:1.25; letter-spacing:-.03em; } h1 { max-width:17ch; margin:0 0 1rem; font-size:clamp(2.45rem,7vw,5.2rem); text-wrap:balance; word-break:keep-all; overflow-wrap:normal; } h2 { margin:0 0 .7rem; font-size:clamp(1.45rem,3vw,2.2rem); } h3 { margin:0 0 .35rem; font-size:1.12rem; } p,li { max-width:70ch; } .lead { max-width:39ch; color:var(--muted); font-size:clamp(1.1rem,2vw,1.35rem); } .eyebrow,.feature-label { margin:0 0 .7rem; color:var(--accent); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.button { display:inline-block; padding:.72rem 1rem; border:1px solid var(--accent); border-radius:.35rem; background:var(--accent); color:var(--accent-contrast); font-weight:700; text-decoration:none; } .button:hover { filter:brightness(1.08); } .hero { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr); align-items:center; gap:clamp(2rem,7vw,5rem); min-height:470px; } .hero-copy { padding:2rem 0; } .hero-visual { position:relative; min-height:350px; } .hero-visual .phone { position:absolute; right:7%; top:0; width:min(259px,82%); } .hero-visual .wakka { position:absolute; bottom:0; left:2%; width:100px; }
.phone { aspect-ratio:390 / 844; max-height:560px; padding:.48rem; overflow:hidden; border:5px solid #25272b; border-radius:1.8rem; background:#25272b; box-shadow:0 18px 45px rgb(0 0 0 / .18); } .phone img { display:block; width:100%; height:100%; border-radius:1.35rem; object-fit:cover; } .section { padding:clamp(3.5rem,7vw,5.5rem) 0; border-top:1px solid var(--border); } .section-heading { display:grid; grid-template-columns:9rem minmax(0,1fr); gap:1rem; margin-bottom:2rem; } .section-heading .eyebrow { padding-top:.35rem; }
.card { display:block; margin:1.5rem 0; padding:1.4rem; border:1px solid var(--border); border-radius:.5rem; background:var(--surface); color:var(--text); text-decoration:none; } .card:hover { border-color:var(--accent); } .card h2 { margin:0 0 .25rem; color:var(--accent); } .card p { margin:0; } .app-card { display:grid; grid-template-columns:150px 1fr; gap:1.5rem; align-items:center; max-width:720px; } .app-card .phone { width:125px; max-height:none; padding:.25rem; border-width:3px; border-radius:1rem; } .app-card .phone img { border-radius:.7rem; }
.problem-grid,.value-grid,.trust-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; } .problem,.trust-item { padding:1.25rem; border-top:2px solid var(--accent); background:var(--surface); } .problem p,.trust-item p { margin-bottom:0; color:var(--muted); } .problem .label { color:var(--accent); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.75rem; letter-spacing:.08em; } .feature-list { display:grid; gap:clamp(3rem,6vw,5rem); } .feature { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,.7fr); align-items:center; gap:clamp(2rem,7vw,6rem); } .feature:nth-child(even) .feature-copy { order:2; } .feature .phone { width:min(259px,100%); margin:auto; } .feature-label { color:var(--muted); }
.microcopy { color:var(--muted); font-size:.92rem; } .price { display:flex; align-items:baseline; gap:1rem; padding:1.5rem; border-left:3px solid var(--accent); background:var(--surface); } .price strong { font-size:clamp(1.8rem,4vw,3rem); letter-spacing:-.04em; } .faq { border-top:1px solid var(--border); } .faq details { border-bottom:1px solid var(--border); padding:1rem 0; } .faq summary { cursor:pointer; font-weight:700; } .faq p { margin:.75rem 0 0; color:var(--muted); } .cta { padding:clamp(2rem,6vw,4rem); border:1px solid var(--border); border-radius:.5rem; background:var(--surface); } .cta h2 { max-width:16ch; } .links { display:flex; flex-wrap:wrap; gap:.75rem 1.25rem; margin:2rem 0; } .links a { font-weight:600; }
.stream-section { display:grid; grid-template-columns:minmax(0,.85fr) minmax(300px,1.15fr); align-items:center; gap:clamp(2rem,6vw,5rem); } .stream-copy h2 { max-width:15ch; } .stream-note { margin:1.25rem 0 0; color:var(--accent); font-size:.92rem; font-weight:700; } .stream-demos { display:flex; align-items:center; gap:clamp(.75rem,2vw,1.25rem); min-width:0; } .stream-demo { position:relative; min-width:0; overflow:hidden; border:1px solid var(--border); border-radius:.7rem; background-color:#1d2733; box-shadow:0 18px 45px rgb(0 0 0 / .12); } .stream-demo--landscape { flex:1 1 auto; aspect-ratio:16 / 9; background:var(--stream-bg) 0% 35% / 145% auto no-repeat; } .live-badge { position:absolute; top:.65rem; right:.65rem; display:flex; align-items:center; gap:.3rem; padding:.18rem .38rem; border-radius:.2rem; background:#c92836; color:#fff; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.62rem; font-weight:800; letter-spacing:.08em; } .live-badge span { width:.36rem; height:.36rem; border-radius:50%; background:#fff; } .score-overlay { position:absolute; top:.65rem; left:.65rem; width:min(45%,20rem); min-height:8%; display:flex; align-items:center; padding:.28rem .45rem; overflow:hidden; border-radius:.22rem; background:rgb(16 25 34 / .91); color:#fff; box-shadow:0 .35rem 1rem rgb(0 0 0 / .22); font-size:clamp(.58rem,1.25vw,.81rem); font-variant-numeric:tabular-nums; font-weight:750; line-height:1.15; white-space:nowrap; } .score-piece { display:inline-flex; align-items:center; min-width:0; } .score-piece + .score-piece::before { margin:0 .35em; color:rgb(255 255 255 / .55); content:"|"; } .team { gap:.18em; } .serve-mark { color:#ffd85f; } .timeout-dots { color:rgb(255 255 255 / .72); font-size:.8em; letter-spacing:-.12em; } .score-number { position:relative; margin:0 .18em; font-size:1.15em; } .score-number--updating { display:inline-grid; } .score-number--updating > span:first-child { grid-area:1 / 1; } .score-update { grid-area:1 / 1; background:rgb(16 25 34 / .91); color:#fff; opacity:0; animation:score-update 1.6s ease 2.8s forwards; } .stream-demo--portrait .live-badge { top:.55rem; right:auto; left:50%; transform:translateX(-50%); } .stream-demo--portrait .score-overlay { top:auto; right:.45rem; bottom:.45rem; left:.45rem; width:auto; min-height:0; justify-content:center; padding:.4rem .35rem; border-radius:.4rem; font-size:clamp(.48rem,1.4vw,.65rem); } @keyframes score-update { 0% { opacity:0; transform:translateY(.35em); } 20%,100% { opacity:1; transform:translateY(0); } } @media (prefers-reduced-motion:reduce) { .score-update { display:none; } }
table { width:100%; border-collapse:collapse; margin:1rem 0 1.5rem; } th,td { padding:.75rem; border:1px solid var(--border); text-align:left; vertical-align:top; } th { background:var(--surface); } footer { padding:1.5rem 0 2.5rem; border-top:1px solid var(--border); color:var(--muted); font-size:.92rem; } footer nav { display:flex; flex-wrap:wrap; gap:.5rem 1rem; margin-top:.4rem; } code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
@media (max-width:680px) { body { padding:0 1rem; } header { align-items:flex-start; flex-direction:column; gap:.25rem; } main { padding-top:2.5rem; } .hero,.feature,.stream-section { grid-template-columns:1fr; } .hero { min-height:0; } .hero-visual { display:grid; min-height:0; place-items:center; padding:1rem 0 2rem; } .hero-visual .phone { position:static; width:min(222px,100%); max-height:480px; } .hero-visual .wakka { display:none; } .section-heading { grid-template-columns:1fr; gap:.25rem; } .problem-grid,.value-grid,.trust-grid { grid-template-columns:1fr; } .feature { gap:1.5rem; } .feature:nth-child(even) .feature-copy { order:initial; } .feature .phone { width:min(222px,100%); max-height:480px; } .app-card { grid-template-columns:105px 1fr; gap:1rem; } .app-card .phone { width:95px; } } @media (max-width:420px) { h1 { font-size:2.35rem; } th,td { padding:.55rem; } .stream-demos { gap:.65rem; } .score-overlay { top:.45rem; left:.45rem; } .stream-demo--portrait .score-overlay { top:auto; right:.3rem; bottom:.3rem; left:.3rem; } }

.stream-portrait { flex:0 1 34%; min-width:0; margin:0; } .stream-portrait figcaption { margin-top:.35rem; color:var(--muted); font-size:.72rem; line-height:1.4; text-align:center; }
@media (min-width:681px) { .stream-section { display:block; } .stream-copy { margin-bottom:2rem; } }
@media (max-width:680px) { .stream-demos { align-items:flex-start; flex-direction:column; } .stream-demo--landscape,.stream-portrait { width:min(100%,34rem); } .stream-portrait { align-self:center; flex-basis:auto; width:min(60%,15rem); } }

.score-piece + .score-piece::before { margin:0; } .team { gap:0; } .score-number { margin:0; }
.stream-demo--landscape .score-overlay { padding-right:.12rem; padding-left:.12rem; }
.stream-demo--landscape .score-overlay { font-size:clamp(.58rem,1.2vw,.78rem); }

.stream-demo--portrait { display:flex; flex:0 1 34%; flex-direction:column; aspect-ratio:9 / 16; padding:.35rem; background:#111a27; color:#f7f9ff; } .portrait-stream { position:relative; flex:0 0 auto; aspect-ratio:16 / 9; overflow:hidden; border-radius:.35rem; background:var(--stream-bg) 0% 35% / 145% auto no-repeat; } .portrait-stream .live-badge { top:.35rem; right:.35rem; } .portrait-score-bug { position:absolute; top:.35rem; left:.35rem; max-width:72%; overflow:hidden; padding:.14rem .22rem; border-radius:.14rem; background:rgb(16 25 34 / .91); color:#fff; font-size:clamp(.35rem,1vw,.55rem); font-weight:750; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; } .watch-score { display:flex; flex:1 1 auto; flex-direction:column; justify-content:center; padding:.35rem .25rem .2rem; font-size:clamp(.45rem,1.1vw,.68rem); line-height:1.25; } .watch-score-meta,.watch-teams,.watch-flow { display:flex; justify-content:space-between; gap:.25rem; } .watch-score-meta { color:#9db5ff; font-size:.84em; font-weight:800; } .watch-teams { margin-top:.4rem; color:#dce4f6; font-weight:700; } .watch-teams span:last-child { text-align:right; } .watch-teams b,.watch-serving { color:#ffd85f; } .watch-teams i { color:#aeb8cb; font-size:.8em; font-style:normal; letter-spacing:-.1em; } .watch-points { display:flex; align-items:baseline; justify-content:center; gap:.24em; margin:.12rem 0; font-variant-numeric:tabular-nums; } .watch-points strong { font-size:clamp(1.5rem,5vw,2.35rem); line-height:1; } .watch-points span { color:#98a4ba; font-size:1.15em; } .watch-serving { font-size:.82em; font-weight:800; text-align:center; } .watch-flow { align-items:center; margin-top:.5rem; padding-top:.35rem; border-top:1px solid rgb(255 255 255 / .13); color:#aeb8cb; font-size:.78em; } .watch-flow span { margin-right:auto; } .watch-flow b { display:grid; width:.8em; height:.8em; place-items:center; border:1px solid #91a2c4; border-radius:50%; color:#ffd85f; font-size:.75em; line-height:1; }

.portrait-stream .live-badge { left:auto; transform:none; }

/* stream overlay demos (v3) */
.stream-section { display:block; }
.stream-copy { max-width:44rem; margin-bottom:2rem; }
.ov-demos { display:flex; gap:clamp(1rem,3vw,2rem); align-items:center; }
.ov-frame { position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:.6rem; background:#1d2733 var(--stream-bg, url(/enzin/img/stream-bg.webp)) 0% 35% / 145% auto no-repeat; }
.ov-land { flex:1 1 0; min-width:0; box-shadow:0 18px 45px rgb(0 0 0 / .14); }
.ov-live { position:absolute; top:4%; right:3%; padding:.15em .45em; border-radius:.2em; background:#c92836; color:#fff; font:800 clamp(.5rem,1vw,.68rem)/1.4 ui-monospace,Menlo,monospace; letter-spacing:.08em; }
.ov-live::before { content:"● "; }
.ov-bug { position:absolute; top:4%; left:3%; width:30%; min-width:9.5rem; overflow:hidden; border-radius:.25rem; background:rgb(14 22 32 / .88); color:#fff; font-size:clamp(.55rem,1vw,.72rem); line-height:1.25; font-variant-numeric:tabular-nums; }
.ov-head { padding:.15em .55em; background:rgb(255 255 255 / .14); font-size:.85em; font-weight:700; letter-spacing:.04em; }
.ov-row { display:grid; grid-template-columns:.8em 1fr 1.4em 2em; align-items:center; gap:.25em; padding:.2em .55em; font-weight:700; }
.ov-row + .ov-row { border-top:1px solid rgb(255 255 255 / .12); }
.ov-name { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ov-sets { color:rgb(255 255 255 / .7); text-align:center; }
.ov-pt { position:relative; display:block; text-align:right; font-size:1.15em; }
.ov-serve { display:inline-block; width:.5em; height:.5em; border-radius:50%; background:#ffd85f; }
.ov-up span { display:block; }
.ov-up span + span { position:absolute; inset:0; opacity:0; background:rgb(14 22 32 / 1); animation:ov-up 1.2s ease 2.5s forwards; }
@keyframes ov-up { from { opacity:0; transform:translateY(.3em); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { .ov-up span + span { display:none; } }
.ov-phone-wrap { flex:0 0 clamp(11rem,24%,15rem); margin:0; }
.ov-phone { display:flex; flex-direction:column; aspect-ratio:9/19; padding:.4rem; border:2px solid #2b3442; border-radius:1.4rem; background:#0f1722; color:#eef2f8; box-shadow:0 18px 45px rgb(0 0 0 / .18); overflow:hidden; }
.ov-mini { border-radius:1rem 1rem .3rem .3rem; flex:0 0 auto; }
.ov-mini .ov-bug { width:52%; min-width:0; font-size:.45rem; }
.ov-mini .ov-live { font-size:.42rem; }
.ov-panel { display:flex; flex:1; flex-direction:column; gap:.55rem; padding:.7rem .45rem .3rem; font-size:.62rem; }
.ov-meta { display:flex; justify-content:space-between; color:#8fb0ff; font-weight:700; }
.ov-big { display:flex; align-items:flex-end; justify-content:space-between; gap:.3rem; }
.ov-big > div { display:flex; flex-direction:column; gap:.1rem; }
.ov-big > div:last-child { align-items:flex-end; }
.ov-big small { display:flex; align-items:center; gap:.25rem; color:#c8d2e2; font-size:.6rem; font-weight:700; }
.ov-big strong { font-size:2.2rem; line-height:1; font-variant-numeric:tabular-nums; }
.ov-big > span { padding-bottom:.4rem; color:#6d7a8f; }
.ov-to { display:flex; justify-content:space-between; color:#9aa6b8; font-size:.55rem; }
.ov-flow { border-top:1px solid #253042; padding-top:.45rem; }
.ov-flow > span { color:#9aa6b8; font-size:.55rem; }
.ov-flow ol { margin:.3rem 0 0; padding:0; list-style:none; }
.ov-flow li { display:grid; grid-template-columns:2.6em 1fr auto; gap:.3em; padding:.22rem 0; border-bottom:1px solid #1c2636; font-size:.56rem; }
.ov-flow li b { font-variant-numeric:tabular-nums; }
.ov-flow li em { color:#9aa6b8; font-style:normal; }
.ov-phone-wrap figcaption { margin-top:.5rem; color:var(--muted); font-size:.75rem; text-align:center; }
@media (max-width:680px) { .ov-demos { flex-direction:column; } .ov-land { width:100%; flex:none; } .ov-phone-wrap { flex:none; width:62%; } .ov-bug { min-width:0; width:46%; } }
.ov-flow li { grid-template-columns:3.4em 1fr auto; } .ov-flow li b { white-space:nowrap; }

/* stream overlay demos (v4: same phone, sideways and upright) */
.ov-demos { display:flex; gap:clamp(1.5rem,4vw,3rem); align-items:flex-end; justify-content:center; --ph-w:min(15rem,40vw); --ph-h:calc(var(--ph-w) * 2.1); }
.ov-dev { margin:0; }
.ov-dev figcaption { margin-top:.6rem; color:var(--muted); font-size:.78rem; text-align:center; }
.ov-phone { box-sizing:border-box; display:flex; overflow:hidden; padding:.45rem; border:2px solid #2b3442; border-radius:1.6rem; background:#000; box-shadow:0 18px 45px rgb(0 0 0 / .18); }
.ov-phone--land { width:var(--ph-h); height:var(--ph-w); align-items:center; justify-content:center; }
.ov-phone--land .ov-frame { height:100%; border-radius:.9rem; }
.ov-phone--port { width:var(--ph-w); height:var(--ph-h); flex-direction:column; background:#0b111b; color:#eef2f8; }
.ov-frame { position:relative; aspect-ratio:16/9; overflow:hidden; background:#1d2733 var(--stream-bg, url(/enzin/img/stream-bg.webp)) 0% 35% / 145% auto no-repeat; }
.ov-mini { width:100%; flex:0 0 auto; border-radius:1.1rem 1.1rem .3rem .3rem; }
.ov-live { position:absolute; top:5%; right:3%; padding:.1em .4em; border-radius:.2em; background:#c92836; color:#fff; font:800 .5rem/1.4 ui-monospace,Menlo,monospace; letter-spacing:.08em; }
.ov-live::before { content:"● "; }
.ov-bug { position:absolute; top:5%; left:3%; width:34%; overflow:hidden; border-radius:.2rem; background:rgb(14 22 32 / .88); color:#fff; font-size:.5rem; line-height:1.25; font-variant-numeric:tabular-nums; }
.ov-mini .ov-bug { width:48%; font-size:.4rem; }
.ov-mini .ov-live { font-size:.38rem; }
.ov-head { padding:.12em .5em; background:rgb(255 255 255 / .14); font-size:.85em; font-weight:700; }
.ov-row { display:grid; grid-template-columns:.8em 1fr 1.2em 1.8em; align-items:center; gap:.2em; padding:.15em .5em; font-weight:700; }
.ov-row + .ov-row { border-top:1px solid rgb(255 255 255 / .12); }
.ov-name { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ov-sets { color:rgb(255 255 255 / .7); text-align:center; }
.ov-pt { position:relative; display:block; text-align:right; font-size:1.1em; }
.ov-serve { display:inline-block; width:.5em; height:.5em; margin-right:.25em; border-radius:50%; background:#5b8cff; vertical-align:middle; }
.ov-bug .ov-serve { background:#ffd85f; margin:0; }
.ov-up span { display:block; }
.ov-up span + span { position:absolute; inset:0; opacity:0; background:rgb(14 22 32); animation:ov-up 1.2s ease 2.5s forwards; }
@keyframes ov-up { from { opacity:0; transform:translateY(.3em); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { .ov-up span + span { display:none; } }
.ov-panel { display:flex; flex:1; flex-direction:column; gap:.4rem; padding:.55rem .35rem .2rem; font-size:.55rem; min-height:0; }
.ov-title small { display:block; color:#8b97aa; font:600 .42rem/1.2 ui-monospace,Menlo,monospace; letter-spacing:.12em; }
.ov-title b { font-size:.85rem; }
.ov-card { padding:.4rem .45rem; border:1px solid #1e2a3c; border-radius:.5rem; background:#111a28; }
.ov-meta { display:flex; justify-content:space-between; color:#c8d2e2; font-weight:700; font-size:.5rem; }
.ov-big { display:flex; align-items:center; justify-content:space-between; }
.ov-big strong { font-size:1.9rem; line-height:1.05; font-weight:300; font-variant-numeric:tabular-nums; }
.ov-big .ov-a { color:#5b8cff; }
.ov-big div { text-align:center; color:#8b97aa; } .ov-big div small { display:block; font-size:.42rem; } .ov-big div b { color:#eef2f8; font-size:.65rem; }
.ov-setchips { display:grid; grid-template-columns:repeat(3,1fr); gap:.25rem; }
.ov-setchips span { padding:.25rem .3rem; border:1px solid #1e2a3c; border-radius:.4rem; background:#111a28; font-weight:700; font-size:.62rem; }
.ov-setchips small { display:block; color:#8b97aa; font:600 .38rem/1.3 ui-monospace,Menlo,monospace; }
.ov-setchips .is-live { border-color:#3d63c9; color:#8fb0ff; }
.ov-lbl { color:#8b97aa; font:600 .42rem/1.3 ui-monospace,Menlo,monospace; letter-spacing:.06em; }
.ov-card svg { display:block; width:100%; height:2rem; margin-top:.2rem; }
.ov-card polyline { fill:none; stroke:#5b8cff; stroke-width:1.4; } .ov-zero { stroke:#2a3549; stroke-width:.6; }
.ov-card ol { margin:.2rem 0 0; padding:0; list-style:none; }
.ov-card li { display:grid; grid-template-columns:2.6em 1fr auto; gap:.25em; padding:.18rem 0; border-top:1px solid #1c2636; font-size:.5rem; }
.ov-card li b { white-space:nowrap; font-variant-numeric:tabular-nums; } .ov-card li em { color:#8b97aa; font-style:normal; }
.ov-dot-a,.ov-dot-b { display:inline-block; width:.4em; height:.4em; margin-right:.3em; vertical-align:middle; background:#5b8cff; } .ov-dot-b { background:#8b97aa; }
@media (max-width:680px) { .ov-demos { flex-direction:column; align-items:center; --ph-w:min(10.5rem,44vw); } }
.ov-badges { display:flex; flex-wrap:wrap; gap:.2rem; } .ov-badges span { padding:.12rem .35rem; border-radius:99px; background:#162235; color:#c8d2e2; font-size:.45rem; font-weight:700; } .ov-badges .is-run { background:#24407f; color:#fff; }
.dev-note { margin:1rem 0 0; color:var(--muted); font-size:.78rem; }
.ov-frame { background-position:center; background-size:cover; }
.ov-strip { position:absolute; top:5%; left:3%; display:flex; align-items:center; gap:.45em; padding:.18em .55em; border-radius:.2em; background:rgb(14 22 32 / .85); color:#fff; font-size:.46rem; font-weight:700; line-height:1.3; white-space:nowrap; font-variant-numeric:tabular-nums; }
.ov-s-set { padding-right:.45em; border-right:1px solid rgb(255 255 255 / .25); color:rgb(255 255 255 / .75); }
.ov-s-team { display:flex; align-items:center; gap:.3em; } .ov-strip .ov-serve { width:.45em; height:.45em; margin:0; background:#ffd85f; }
.ov-s-sets { padding:0 .3em; border-radius:.15em; background:rgb(255 255 255 / .14); }
.ov-s-pt { position:relative; display:inline-block; min-width:1.2em; text-align:center; font-size:1.15em; } .ov-s-dash { color:rgb(255 255 255 / .6); }

/* portrait panel v5: same look as the app's watch screen, with the serve fog */
.ov-phone--port { background:#05070b; }
.ov-panel { position:relative; gap:.35rem; padding:.5rem .35rem .25rem; isolation:isolate; }
.ov-fog { position:absolute; inset:0 -10% auto -10%; height:70%; z-index:-1; background:radial-gradient(78% 80% at 8% 0%, rgb(61 103 230 / .55), rgb(61 103 230 / .18) 55%, transparent 80%); animation:ov-fog 6s ease-in-out infinite alternate; }
@keyframes ov-fog { from { transform:translateX(-4%); } to { transform:translateX(4%); } }
@media (prefers-reduced-motion:reduce) { .ov-fog { animation:none; } }
.ov-title b { font-size:.9rem; letter-spacing:.02em; }
.ov-ruler { display:block; height:.3rem; margin-top:.2rem; background:repeating-linear-gradient(90deg, rgb(255 255 255 / .25) 0 1px, transparent 1px 6px); opacity:.6; }
.ov-card { border-color:rgb(80 110 200 / .25); background:rgb(12 18 30 / .78); backdrop-filter:blur(2px); }
.ov-score { padding:.45rem .5rem .35rem; }
.ov-meta { align-items:flex-start; }
.ov-meta > span { display:flex; flex-direction:column; gap:.05rem; } .ov-meta .r { align-items:flex-end; }
.ov-meta small { color:#8b97aa; font:600 .36rem/1.2 ui-monospace,Menlo,monospace; letter-spacing:.1em; }
.ov-big strong { font-size:2.3rem; font-weight:200; }
.ov-big .ov-a { color:#4f7dff; text-shadow:0 0 14px rgb(79 125 255 / .6); }
.ov-big div small { font-family:ui-monospace,Menlo,monospace; letter-spacing:.1em; }
.ov-setchips span { background:rgb(12 18 30 / .78); }
.ov-setchips .is-live { border-color:#3d63c9; color:#6f97ff; box-shadow:0 0 10px rgb(61 99 201 / .35); }
.ov-cardhead { display:flex; justify-content:space-between; color:#8b97aa; } .ov-cardhead small { font:600 .38rem/1.3 ui-monospace,Menlo,monospace; letter-spacing:.08em; }
.ov-card svg { height:1.7rem; } .ov-card polyline { stroke:#4f7dff; stroke-width:1.2; } .ov-area { fill:rgb(79 125 255 / .18); }
.ov-run { display:flex; align-items:center; gap:.3rem; margin-top:.2rem; color:#8b97aa; } .ov-run small { flex:1; font:600 .36rem/1.2 ui-monospace,Menlo,monospace; }
.ov-run span { display:flex; gap:.12rem; } .ov-run i { width:.55rem; height:.18rem; background:#243049; } .ov-run i.on { background:#4f7dff; } .ov-run b { color:#4f7dff; font-size:.6rem; }
.ov-card li span i { display:inline-block; width:.35em; height:.35em; margin-right:.35em; background:#4f7dff; vertical-align:middle; }
.ov-card li em { font-family:ui-monospace,Menlo,monospace; font-size:.42rem; letter-spacing:.08em; }
.ov-badges { display:none; }
.enzin-lockup { display:flex; align-items:center; gap:.75rem; margin-bottom:1.25rem; } .enzin-lockup img { width:56px; height:56px; border-radius:14px; box-shadow:0 6px 18px rgb(42 82 212 / .25); } .enzin-wordmark { display:block; width:150px; height:34px; background:currentColor; -webkit-mask:url(/enzin/img/enzin-wordmark.png) left center / contain no-repeat; mask:url(/enzin/img/enzin-wordmark.png) left center / contain no-repeat; }