/* MatchPoint · ON COURT (oncourt.js, 11 Nov). Its own colour is pink (Duolingo-style: one colour per feature).
   The page follows the locked va look (white page, 2px #E5E5E5 cards, Nunito); filming and watching back are dark full-screen flows. */
.oc{--oc:#FF4B6E;--ocd:#D93558;--oct:#FFE9EE}
/* hero: the Journal's pattern (tinted card, 2px border, shadow, character on the right), in On Court pink with Phoebe filming her serve */
.oc-hero{position:relative;isolation:isolate;margin-top:14px;padding:24px 22px;border:2px solid #F59AB5;border-radius:22px;background:#FFDDE7;box-shadow:0 4px 0 #F59AB5;overflow:hidden}
.oc-ph{position:absolute;z-index:-1;right:-6px;bottom:-14px;height:112%;max-width:46%;object-fit:contain;object-position:right bottom;pointer-events:none}
.oc-k{display:block;font:900 11.5px/1 Nunito,system-ui,sans-serif;letter-spacing:1px;text-transform:uppercase;color:#D6336C}
.oc-t{display:block;max-width:58%;margin:12px 0 4px;font:800 22px/1.12 Nunito,system-ui,sans-serif;letter-spacing:-.4px;color:#191919}
.oc-go{display:inline-flex;align-items:center;gap:8px;height:44px;margin-top:18px;padding:0 20px;border:0;border-radius:12px;background:#FF4B6E;box-shadow:0 3px 0 #D93558;color:#fff;font:800 15.5px Nunito,system-ui,sans-serif;cursor:pointer}
.oc-go svg{width:20px;height:20px}.oc-go:active{transform:translateY(3px);box-shadow:none}
.oc-new{display:flex;align-items:center;gap:12px;width:100%;margin-top:14px;padding:12px 14px;border:2px dashed #F7C3D2;border-radius:18px;background:#FFF6F9;text-align:left;cursor:pointer;font-family:inherit;color:#191919}
.oc-new i{flex:none;width:38px;height:38px;border-radius:12px;background:#FF4B6E;box-shadow:0 3px 0 #D93558;display:grid;place-items:center;color:#fff}.oc-new i svg{width:20px;height:20px}
.oc-new b{display:block;font:800 15.5px Nunito,system-ui,sans-serif}.oc-new small{display:block;margin-top:2px;font:600 12.5px Nunito,system-ui,sans-serif;color:#8C7A80}
.oc-how{display:flex;flex-direction:column;border:2px solid #E5E5E5;border-radius:18px;box-shadow:0 2px 0 #E5E5E5;background:#fff}
.oc-how>div{display:flex;align-items:center;gap:12px;padding:13px 14px}.oc-how>div+div{border-top:2px solid #F1F1F4}
.oc-how i{flex:none;width:30px;height:30px;border-radius:50%;background:#FFE3EA;color:#D6336C;display:grid;place-items:center;font:900 14px Nunito,system-ui,sans-serif;font-style:normal}
.oc-how b{display:block;font:800 15px Nunito,system-ui,sans-serif;color:#191919}.oc-how small{display:block;margin-top:1px;font:600 13px Nunito,system-ui,sans-serif;color:#8A8A96}
.oc-h{display:flex;align-items:baseline;justify-content:space-between;margin:24px 2px 10px}.oc-h b{font:900 20px Nunito,system-ui,sans-serif;color:#191919}.oc-h span{font:700 13px Nunito,system-ui,sans-serif;color:#9A9AA6}
.oc-seg{display:flex;gap:8px;overflow-x:auto;margin:0 -18px 12px;padding:0 18px 2px;scrollbar-width:none}.oc-seg::-webkit-scrollbar{display:none}
.oc-seg button{flex:none;height:36px;padding:0 14px;border:2px solid #E5E5E5;border-radius:12px;background:#fff;font:800 14px Nunito,system-ui,sans-serif;color:#5E6070;cursor:pointer}
.oc-seg button.on{border-color:var(--oc);background:var(--oct);color:#C22C51}
.oc-list{display:grid;gap:10px}
.oc-clip,.oc-cmp{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px 10px 10px;border:2px solid #E5E5E5;border-radius:18px;background:#fff;box-shadow:0 2px 0 #E5E5E5;text-align:left;font:inherit;color:#191919;cursor:pointer}
.oc-clip>svg,.oc-cmp>svg{flex:none;width:18px;height:18px;color:#C4C4CC}
.oc-th{position:relative;flex:none;width:62px;height:62px;border-radius:12px;overflow:hidden;background:#F3F3F6}
.oc-th img{width:100%;height:100%;object-fit:cover;display:block}.oc-th img.ph{object-fit:contain;padding:6px;box-sizing:border-box}
.oc-th em{position:absolute;right:4px;bottom:4px;padding:1px 5px;border-radius:6px;background:rgba(0,0,0,.6);color:#fff;font:800 10.5px Nunito,system-ui,sans-serif;font-style:normal}
.oc-ci{flex:1;min-width:0}.oc-ci b{display:block;font:800 16px/1.2 Nunito,system-ui,sans-serif}.oc-ci small{display:block;margin-top:2px;font:600 13px Nunito,system-ui,sans-serif;color:#8A8A96}
.oc-ci i{display:inline-block;margin-top:5px;padding:2px 8px;border-radius:8px;background:#FFE3EA;color:#D6336C;font:800 11.5px Nunito,system-ui,sans-serif;font-style:normal}
.oc-cmp{margin-bottom:10px;border-color:#F2C2CD;background:#FFF7F9;box-shadow:0 2px 0 #F2C2CD}
.oc-cmpi{flex:none;display:flex;gap:3px}.oc-cmpi img{width:30px;height:44px;border-radius:8px;object-fit:cover;background:#eee}
.oc-cmp b{display:block;font:800 15.5px/1.2 Nunito,system-ui,sans-serif}.oc-cmp small{display:block;margin-top:2px;font:600 12.5px Nunito,system-ui,sans-serif;color:#8A8A96}.oc-cmp>span:nth-child(2){flex:1;min-width:0}
.oc-dr{margin-top:14px;padding:13px 16px;border-radius:18px;background:#F4FAEF;border:2px solid #DDEFD0}
.oc-dr img{flex:none;width:44px;height:44px;object-fit:contain}.oc-dr small{display:block;font:800 12px Nunito,system-ui,sans-serif;color:#3A8A57}.oc-dr b{display:block;margin-top:2px;font:700 14.5px/1.3 Nunito,system-ui,sans-serif;color:#191919}
.oc-empty{display:flex;flex-direction:column;align-items:center;text-align:center;margin:30px 20px 0}
.oc-empty img{width:96px;height:auto;opacity:.9}.oc-empty b{margin-top:12px;font:900 18px Nunito,system-ui,sans-serif;color:#191919}.oc-empty span{margin-top:6px;font:600 14px/1.42 Nunito,system-ui,sans-serif;color:#8A8A96}
html.va .tabs [data-tab="court"] .ti img{width:31px;height:31px;object-fit:contain}   /* 12 Nov: the camera is wide, so a touch bigger than the square icons */

/* Profile › My rewards (the old Rewards tab's four parts) */
.prf-rw{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.prf-rw button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px 10px;border:2px solid #E5E5E5;border-radius:16px;background:#fff;box-shadow:0 2px 0 #E5E5E5;font:800 12.5px Nunito,system-ui,sans-serif;color:#3B3F52;cursor:pointer}
.prf-rw img{width:36px;height:36px;object-fit:contain}
html.va .cbv .cab-back{color:#0096C7!important;margin:2px 0 4px 2px!important}
/* Journal › one line pointing at On Court */
.jx-oc{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 12px;padding:10px 14px 10px 10px;border:2px solid #F2C2CD;border-radius:16px;background:#FFF7F9;text-align:left;font:inherit;cursor:pointer}
.jx-oc img{flex:none;width:40px;height:40px;object-fit:contain}.jx-oc span{flex:1;min-width:0}.jx-oc b{display:block;font:800 15px Nunito,system-ui,sans-serif;color:#191919}.jx-oc small{display:block;font:600 12.5px Nunito,system-ui,sans-serif;color:#8A8A96}.jx-oc svg{width:18px;height:18px;color:#C4C4CC}

/* ---------- the flows ---------- */
.ocf{z-index:60;padding:calc(env(safe-area-inset-top,0px) + 14px) 0 calc(env(safe-area-inset-bottom,0px) + 16px);gap:0;animation:none}
.ocf.light{background:#fff;color:#191919;padding-left:18px;padding-right:18px}
.ocf.dark{background:#0E0E12;color:#fff}
.ocf-top{flex:none;display:flex;align-items:center;gap:10px;padding:0 16px;min-height:44px}.ocf.light .ocf-top{padding:0}
.ocf-x,.ocf-flip{flex:none;width:40px;height:40px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;background:rgba(255,255,255,.12);color:#fff}
.ocf.light .ocf-x{border:2px solid #E5E5E5;background:#fff;color:#3B3F52;box-shadow:0 2px 0 #E5E5E5}
.ocf-x svg,.ocf-flip svg{width:19px;height:19px}.ocf-flip{margin-left:auto}
.ocf-t{flex:1;min-width:0;font:900 17px/1.15 Nunito,system-ui,sans-serif}.ocf-t small{display:block;font:700 12.5px Nunito,system-ui,sans-serif;color:rgba(255,255,255,.55)}
.ocf-h{margin:22px 0 0;font:900 26px/1.12 Nunito,system-ui,sans-serif;letter-spacing:-.4px}
.ocf-s{margin:6px 0 0;font:600 15px/1.4 Nunito,system-ui,sans-serif;color:#7A7C8A}
/* shot picker (11 Nov, Joshua: "just little simple pills that we can use as tags") */
.ocf-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.ocf-tags button{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 20px;border:2px solid #E5E5E5;border-radius:999px;background:#fff;box-shadow:0 3px 0 #E5E5E5;font:800 16.5px Nunito,system-ui,sans-serif;color:#2B2B33;cursor:pointer}
.ocf-tags button:active{transform:translateY(3px);box-shadow:none}
/* option B (11 Nov): white pills with a colour dot per shot; this week's shot (and a pressed pill) fills with its soft colour */
.ocf-tags button{--c:#9A9AA6;--f:#F1F1F3;--e:#D3D3D8;--d:#5A5A66}
.ocf-tags [data-s="Serve"]{--c:#F2B705;--f:#FFF3CC;--e:#F4D36B;--d:#9A6B00}
.ocf-tags [data-s="Forehand"]{--c:#1CB0F6;--f:#DFF3FF;--e:#94D3FA;--d:#1C6FA8}
.ocf-tags [data-s="Backhand"]{--c:#8B6CF0;--f:#ECE5FF;--e:#BDAAF6;--d:#5B3FC4}
.ocf-tags [data-s="Volley"]{--c:#3CB96B;--f:#E0F6E7;--e:#93D9AB;--d:#23824A}
.ocf-tags [data-s="Footwork"]{--c:#FF4B6E;--f:#FFE6EC;--e:#F6AFC1;--d:#C2335A}
.ocf-tags button i{width:10px;height:10px;border-radius:50%;background:var(--c);flex:none}
.ocf-tags button.on,.ocf-tags button:active{border-color:var(--c);background:var(--f);box-shadow:0 3px 0 var(--e);color:var(--d)}
.ocf-tags button:active{box-shadow:none}
.ocf-tags small{padding:3px 7px;border-radius:8px;background:var(--c);color:#fff;font:900 10.5px/1 Nunito,system-ui,sans-serif;letter-spacing:.4px;text-transform:uppercase}

/* camera */
.ocf-cam{position:relative;flex:1;min-height:0;margin:10px 12px 0;border-radius:22px;overflow:hidden;background:#000}
.ocf-cam video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.ocf-cam video.mir{transform:scaleX(-1)}
.ocf-guide{position:absolute;left:50%;top:50%;height:74%;width:auto;transform:translate(-50%,-48%);opacity:.75;pointer-events:none;transition:opacity .3s}
.ocf-say{position:absolute;left:50%;top:14px;transform:translateX(-50%);padding:7px 13px;border-radius:12px;background:rgba(0,0,0,.55);font:800 13px Nunito,system-ui,sans-serif;white-space:nowrap}
.ocf-cam.rec .ocf-guide,.ocf-cam.rec .ocf-say{opacity:0}
.ocf-cd{position:absolute;inset:0;display:none;place-items:center;font:900 120px/1 Nunito,system-ui,sans-serif;color:#fff;text-shadow:0 6px 30px rgba(0,0,0,.5);background:rgba(0,0,0,.25)}
.ocf-cam.cdn .ocf-cd{display:grid}.ocf-cd.pop{animation:ocpop .5s cubic-bezier(.2,.9,.3,1.3)}
@keyframes ocpop{from{transform:scale(1.5);opacity:0}to{transform:none;opacity:1}}
.ocf-rt{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:none;align-items:center;gap:6px;padding:6px 12px;border-radius:12px;background:rgba(0,0,0,.6);font:800 14px Nunito,system-ui,sans-serif;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.7)}
.ocf-rt b{color:#fff}.ocf-rt i{width:9px;height:9px;border-radius:50%;background:#FF3B4E;animation:ocblink 1s infinite}
.ocf-cam.rec .ocf-rt{display:flex}
@keyframes ocblink{50%{opacity:.25}}
.ocf-no{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;text-align:center;background:#16161C}
.ocf-no[hidden]{display:none}.ocf-no b{font:900 20px Nunito,system-ui,sans-serif}.ocf-no span{font:600 14.5px/1.42 Nunito,system-ui,sans-serif;color:rgba(255,255,255,.65)}
.ocf-no .b3{width:auto;margin-top:14px;--c:#FF4B6E;--d:#D93558}
.ocf-recbar{flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:18px 20px 4px}
.ocf-recbar[hidden]{display:none}
.ocf-cdb{justify-self:start;height:36px;padding:0 13px;border:0;border-radius:12px;background:rgba(255,255,255,.12);color:rgba(255,255,255,.7);font:800 13.5px Nunito,system-ui,sans-serif;cursor:pointer}.ocf-cdb.on{background:#fff;color:#191919}
.ocf-hint{justify-self:end;font:700 13px Nunito,system-ui,sans-serif;color:rgba(255,255,255,.5)}
.ocf-shut{width:76px;height:76px;padding:0;border:4px solid #fff;border-radius:50%;background:none;display:grid;place-items:center;cursor:pointer}
.ocf-shut i{width:60px;height:60px;border-radius:50%;background:#FF3B4E;transition:all .2s}.ocf-shut.on i{width:28px;height:28px;border-radius:7px}

/* watch it back */
.ocf-st{flex:1;min-height:150px;display:flex;align-items:center;justify-content:center;padding:8px 12px 0}
.ocf-rv{position:relative;flex:none;border-radius:18px;overflow:hidden;background:#000}
.ocf-rv video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.ocf-rv canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:pointer}
.ocf-rv.marking canvas{cursor:crosshair}
.ocf-spd{position:absolute;left:10px;top:10px;padding:4px 9px;border-radius:9px;background:rgba(0,0,0,.55);font:800 12px Nunito,system-ui,sans-serif;pointer-events:none}.ocf-spd:empty{display:none}
.ocf-strip{position:relative;flex:none;height:56px;margin:14px 16px 0;touch-action:none;cursor:grab}
.ocf-strip.drag{cursor:grabbing}
.ocf-fr{display:flex;gap:3px;height:100%}
.ocf-fr i{flex:1;min-width:0;border-radius:9px;background:#24242C center/cover no-repeat;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.ocf-ph{position:absolute;top:-5px;bottom:-5px;width:6px;margin-left:-3px;border-radius:4px;background:#fff;box-shadow:0 0 0 1.5px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.5);pointer-events:none}
.ocf-dots{position:absolute;left:0;right:0;top:-12px;height:0;pointer-events:none}
.ocf-dots .mkdot{position:absolute;top:0;width:13px;height:13px;margin-left:-6.5px;padding:0;border-radius:50%;background:var(--c,#3D8BFF);border:2.5px solid #0E0E12;pointer-events:auto;cursor:pointer}
.ocf-dots .mkdot.on{transform:scale(1.3);border-color:#fff}.ocf-dots .mkdot.draft{background:transparent;border:2.5px dashed #fff;pointer-events:none}
.ocf-pl{flex:none;display:flex;align-items:center;gap:4px;padding:14px 16px 0}
.ocf-pl>button{flex:none;width:42px;height:42px;padding:0;border:0;border-radius:12px;background:none;color:rgba(255,255,255,.8);display:grid;place-items:center;cursor:pointer}
.ocf-pl>button svg{width:21px;height:21px}.ocf-pl>button:active{background:rgba(255,255,255,.12)}
.ocf-pl>.ocf-pp{width:52px;height:52px;border-radius:50%;background:#fff;color:#111}.ocf-pp svg{width:22px!important;height:22px!important}
.ocf-tm{flex:none;min-width:50px;font:800 13px Nunito,system-ui,sans-serif;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.65)}
.ocf-sp{margin-left:auto;display:flex;padding:3px;border-radius:12px;background:rgba(255,255,255,.1)}
.ocf-sp button{height:32px;min-width:38px;padding:0 8px;border:0;border-radius:9px;background:none;color:rgba(255,255,255,.7);font:900 13.5px Nunito,system-ui,sans-serif;cursor:pointer}.ocf-sp button.on{background:#fff;color:#111}
.ocf-mk{flex:none;padding:12px 16px 0}
.ocf-mkb{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border:0;border-radius:12px;background:rgba(255,255,255,.1);color:#fff;font:800 14px Nunito,system-ui,sans-serif;cursor:pointer}
.ocf-mkb svg{width:17px;height:17px}.ocf-mkb.on{background:#3D8BFF}
.ocf-tools{position:relative;display:flex;align-items:center;gap:4px;margin-top:10px}.ocf-tools[hidden]{display:none}
.ocf-tools>button{display:flex;flex-direction:column;align-items:center;gap:2px;width:52px;padding:6px 0 4px;border:0;border-radius:12px;background:none;color:rgba(255,255,255,.75);cursor:pointer}
.ocf-tools>button svg{width:20px;height:20px}.ocf-tools small{font:700 10.5px Nunito,system-ui,sans-serif}
.ocf-tools>button.on{background:rgba(255,255,255,.14);color:#fff}
.ocf-tools>.ocf-col{width:28px;height:28px;padding:0;margin:0 6px;border-radius:50%;box-shadow:0 0 0 2px #0E0E12,0 0 0 4px rgba(255,255,255,.6)}
.ocf-tools>[data-oc="undo"]{margin-left:auto}
.ocf-tools .colpick{left:auto;right:40px}
.ocf-list .mklist{padding:10px 0 0}.ocf-list .mkhint{padding:8px 0 0}
.ocf-foot{flex:none;padding:12px 16px 0}.ocf-foot .b3{margin-top:0;--c:#FF4B6E;--d:#D93558}

/* compare */
.ocf-two{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 12px 0}
.ocf-cv{position:relative;border-radius:16px;overflow:hidden;background:#000}
.ocf-cv video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.ocf-cv span{position:absolute;left:8px;top:8px;padding:4px 8px;border-radius:8px;background:rgba(0,0,0,.6);font:800 11.5px Nunito,system-ui,sans-serif}
.ocf-cr{flex:none;margin:14px 16px 0;accent-color:#FF4B6E}
.ocf-cmpn{flex:none;margin:12px 18px 0;font:600 13px/1.4 Nunito,system-ui,sans-serif;color:rgba(255,255,255,.55);text-align:center}
.ocf-ask{position:absolute;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);z-index:5;padding:18px;border-radius:20px;background:#fff;color:#191919;box-shadow:0 12px 40px rgba(0,0,0,.4)}
.ocf-ask b{display:block;font:900 19px Nunito,system-ui,sans-serif}.ocf-ask p{margin:4px 0 0;font:600 14px Nunito,system-ui,sans-serif;color:#7A7C8A}
.ocf-ask .b3{--c:#E5484D;--d:#B8363A}.ocf-ask .lk{display:block;width:100%;margin-top:12px;border:0;background:none;font:800 15px Nunito,system-ui,sans-serif;color:#5E6070;cursor:pointer}
/* the app's .flow paints every flow with the page colour (clean-kit.css); these flows set their own */
#app .ocf.dark{background:#0E0E12!important;color:#fff}
#app .ocf.light{background:#fff!important}

/* markup.js pieces (note box typed on the clip, colour picker, notes list), copied from coach/coach.css and kept inside On Court */
.ocf .mked{position:absolute;left:0;top:0;z-index:3;display:none;align-items:center;gap:6px;padding:4px 4px 4px 6px;border-radius:9px;background:rgba(16,16,20,.9);box-shadow:0 0 0 1.5px var(--c),0 6px 18px rgba(0,0,0,.35);cursor:default}
.ocf .mked.on{display:flex}
.ocf .mked .mkn{margin:0;cursor:grab;touch-action:none;user-select:none}
.ocf .mked input{height:26px;min-width:60px;border:0;outline:0;background:none;padding:0;color:#fff;font:600 13px -apple-system,BlinkMacSystemFont,Inter,system-ui,sans-serif;caret-color:var(--c)}
.ocf .mked input::placeholder{color:rgba(255,255,255,.5)}
.ocf .mked button{flex:none;width:26px;height:26px;border-radius:7px;display:grid;place-items:center}
.ocf .mked .mkok{background:var(--c);color:#111}
.ocf .mked .mkx{background:rgba(255,255,255,.12);color:rgba(255,255,255,.8)}
@media (pointer:coarse){.ocf .mked input{font-size:16px;height:30px}.ocf .mked button{width:30px;height:30px}}
.ocf .colpick{position:absolute;left:16px;bottom:calc(100% + 8px);z-index:6;display:none;gap:10px;padding:10px 12px;border-radius:16px;background:#1C1C22;box-shadow:0 10px 30px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.08)}
.ocf .colpick.open{display:flex;animation:pg .18s ease both}
.ocf .colpick button{width:30px;height:30px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.ocf .colpick button.on{box-shadow:0 0 0 2px #1C1C22,0 0 0 4px #fff}
.ocf .mklist{display:flex;gap:6px;overflow-x:auto;padding:10px 16px 0;scrollbar-width:none}
.ocf .mklist button{flex:none;display:flex;align-items:center;gap:6px;max-width:220px;height:34px;padding:0 11px 0 8px;border-radius:12px;background:rgba(255,255,255,.1);color:#fff;font:700 12.5px Nunito,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ocf .mklist button i{flex:none;width:10px;height:10px;border-radius:50%}
.ocf .mklist button b{font-weight:900;color:rgba(255,255,255,.65);font-variant-numeric:tabular-nums}
.ocf .mklist button.on{background:#fff;color:#191919}.mklist button.on b{color:#8A8A94}
.ocf .mkhint{padding:10px 16px 0;font:700 12.5px/1.35 Nunito,sans-serif;color:rgba(255,255,255,.5)}
.ocf .mklist button{background:rgba(255,255,255,.07);color:rgba(255,255,255,.85)}
.ocf .mkn,.ocf .mklist button i{flex:none;display:grid;place-items:center;border-radius:50%;background:var(--c,#FFE23D);color:#111;font:700 11px -apple-system,BlinkMacSystemFont,Inter,system-ui,sans-serif;font-style:normal}
.ocf .mkn{width:22px;height:22px;margin-left:-4px}
.ocf .mklist button i{width:18px;height:18px}
.ocf .mklist button,.ocf .mkbar input{font-family:-apple-system,BlinkMacSystemFont,Inter,system-ui,sans-serif}
.ocf .mklist button b{font-variant-numeric:tabular-nums;font-weight:600}
.ocf .mkn,.ocf .mklist button i{color:var(--k,#fff)}
.ocf .mked button,.ocf .colpick button,.ocf .mklist button{border:0;padding:0;cursor:pointer}.ocf .mklist button{padding:0 11px 0 8px}
.ocf-go{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;margin:0;padding:0 20px;border:0;border-radius:18px;background:#FF4B6E;box-shadow:0 5px 0 #D93558;color:#fff;font:900 17px Nunito,system-ui,sans-serif;cursor:pointer}
.ocf-go:active{transform:translateY(4px);box-shadow:none}
.ocf-ask .ocf-go{margin-top:14px;background:#E5484D;box-shadow:0 5px 0 #B8363A}.ocf-no .ocf-go{width:auto;margin-top:14px}
/* watching a saved clip: no tools, the notes underneath, a pencil top right opens the editor */
.ocf-ed{background:#fff!important;color:#111!important}
.ocf.watch .ocf-mk{padding-top:4px}
.ocf.watch .ocf-list .mklist{padding-top:12px}
.ocf.watch .ocf-st{padding-bottom:4px}
.ocf.watch{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 26px)}
.ocf-none{margin:14px 0 0;font:700 13.5px Nunito,system-ui,sans-serif;color:rgba(255,255,255,.5)}