/* Owner Cards: Topps-style season trading cards. Sizes are in em off the card width (container query), so the same
   card works as a binder thumbnail and full size in the viewer. */
.ocp-head{position:relative;margin:12px 0 8px;padding:12px 14px;border-radius:14px;color:#fff;background:linear-gradient(135deg,var(--c1),color-mix(in srgb,var(--c1) 70%,#000));box-shadow:0 2px 14px rgba(16,32,64,.16);overflow:hidden}
.ocp-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--c2),transparent)}
.ocp-head h1{margin:2px 0 0;font-size:24px;line-height:1.1;color:#fff}
.ocp-back{color:#fff;opacity:.85;font-size:13px;font-weight:600}.ocp-back:hover{opacity:1;text-decoration:none}
.ocp-sub{font-size:13px;opacity:.85;margin-top:2px}
.ocp-h1{margin:12px 0 6px}
.ocp-seasons{display:flex;gap:6px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none}
.ocp-seasons a{flex:none;padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:var(--card,#fff);color:var(--ink);font-weight:600;font-size:13.5px}
.ocp-seasons a.on{background:var(--appbar,#101c3d);border-color:transparent;color:#fff}
.ocp-hint{margin:4px 0 10px}.ocp-foot{margin-top:16px}

/* binder: two pockets across on a phone */
.ocx-binder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px;padding:14px 12px;border-radius:14px;
  background:color-mix(in srgb,var(--ink) 4%,transparent);border:1px solid var(--line)}
@media (min-width:620px){.ocx-binder{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){.ocx-binder{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ocx-slot{container-type:inline-size;min-width:0}

/* the card */
.ocx{position:relative;display:block;width:100%;aspect-ratio:5/7;font-size:calc(100cqw / 30);perspective:140em;cursor:pointer;
  -webkit-tap-highlight-color:transparent;outline:none;color:#fff;line-height:1.2;text-align:left;user-select:none}
.ocx:focus-visible .ocx-face{box-shadow:0 0 0 .3em var(--brand,#5a7dac)}
.ocx-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,.7,.2,1)}
.ocx.flipped .ocx-inner{transform:rotateY(180deg)}
.ocx-face{position:absolute;inset:0;border-radius:1em;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;
  box-shadow:0 .15em .4em rgba(0,0,0,.25),0 .9em 2.2em rgba(10,20,40,.22)}
.ocx-back{transform:rotateY(180deg)}
.ocx-slot .ocx:hover .ocx-inner{transform:translateY(-.3em)}
.ocx-slot .ocx-back{display:none}

/* front: the team-page power header (.th-hero) as a card — avatar-palette gradient, faded logo watermark,
   avatar tile with white + accent rings, name / owner / conference, big record + chips, white stat tiles, accent bar */
.ocx-front{background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--c1) 80%,#fff 20%) 0%,var(--c1) 45%,color-mix(in srgb,var(--c1) 55%,#000 45%) 100%)}
.ocx-front::after{content:"";position:absolute;left:0;right:0;bottom:0;height:.55em;z-index:3;
  background:linear-gradient(90deg,var(--c2),color-mix(in srgb,var(--c2) 35%,transparent))}
.ocx-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.ocx-wm{position:absolute;right:-26%;top:-9%;width:92%;aspect-ratio:1;object-fit:contain;opacity:.13}
.ocx-rays{position:absolute;left:-30%;right:-30%;top:22%;height:80%;opacity:.8;
  background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,.055) 0 6deg,transparent 6deg 12deg);
  -webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent);mask-image:radial-gradient(closest-side,#000 40%,transparent)}
.ocx-ph{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;padding:1.35em 1.35em 1.5em;gap:.85em}
.ocx-chips{display:flex;align-items:center;justify-content:space-between;gap:.5em;min-height:2.3em}
.ocx-year{background:var(--c2);color:#fff;font-weight:900;font-size:1.35em;letter-spacing:.02em;border-radius:.45em;padding:.12em .55em;
  text-shadow:0 .06em .08em rgba(0,0,0,.3);box-shadow:0 .15em .4em rgba(0,0,0,.25)}
.ocx-fin{display:flex;align-items:center;gap:.25em;padding:.25em .7em .25em .45em;border-radius:999px;margin-left:auto;
  background:rgba(255,255,255,.14);border:.1em solid rgba(255,255,255,.3);font-weight:800;font-size:1.12em;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.ocx-fin:not(:has(svg)){padding-left:.7em}
.ocx-fin .ocx-medal{width:1.3em;height:1.6em;filter:drop-shadow(0 .05em .1em rgba(0,0,0,.4))}
.ocx-fin-gold{background:linear-gradient(135deg,#7a5208,#d9a521 45%,#f6e08f 60%,#b07d12);color:#2b1c00;border-color:#fbeab0}
.ocx-fin-silver{background:linear-gradient(135deg,#5d6672,#c4ccd6 50%,#eef2f6 62%,#8f99a6);color:#1d2430;border-color:#f3f6fa}
.ocx-fin-bronze{background:linear-gradient(135deg,#6a3b16,#c27a3f 50%,#ecc193 62%,#93542a);color:#2a1405;border-color:#f3d2ad}
.ocx-medal .rb1{fill:#2f6fd6}.ocx-medal .rb2{fill:#c0392b}

.ocx-id{display:flex;align-items:center;gap:1em;min-width:0}
.ocx-tile{flex:none;width:7.4em;height:7.4em;border-radius:1.6em;background:rgba(255,255,255,.95);overflow:hidden;display:grid;place-items:center;
  box-shadow:0 0 0 .28em var(--c2),0 .6em 1.5em rgba(0,0,0,.35)}
.ocx-tile img{width:100%;height:100%;object-fit:cover}
.ocx-tile span{display:none;color:var(--c1);font-weight:900;font-size:2.2em}.ocx-tile-x span{display:block}
.ocx-nomvp .ocx-tile{display:none}
.ocx-who{flex:1;min-width:0}
.ocx-team{font-weight:800;font-size:2.15em;line-height:1.08;letter-spacing:-.01em;text-shadow:0 .05em .1em rgba(0,0,0,.25);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.ocx-owner{font-size:1.3em;font-weight:600;margin-top:.25em;opacity:.95;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ocx-conf{font-size:1.1em;opacity:.8;margin-top:.1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.ocx-recrow{display:flex;align-items:center;flex-wrap:wrap;gap:.45em;min-width:0}
.ocx-rec{font-size:2.4em;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:1;margin-right:.15em}
.ocx-seed{background:var(--c2);color:#fff;font-weight:800;border-radius:.6em;padding:.15em .6em;font-size:1.1em;white-space:nowrap;text-shadow:0 .05em .05em rgba(0,0,0,.25)}
.ocx-tag{font-size:1.05em;font-weight:700;padding:.15em .6em;border-radius:.8em;background:rgba(255,255,255,.14);border:.08em solid rgba(255,255,255,.25);white-space:nowrap}

/* art window: MVP cut-out over the rays, or (no MVP) the avatar as a big header-style tile */
.ocx-art{position:relative;flex:1;min-height:0;display:flex;align-items:flex-end;justify-content:center}
.ocx-mvp{position:absolute;left:4%;width:92%;bottom:0;max-height:100%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 .5em .7em rgba(0,0,0,.45))}
.ocx-mvp.ocx-jpg{left:auto;width:auto;height:92%;aspect-ratio:1;bottom:4%;border-radius:1.2em;border:.25em solid #fff;background:#fff;filter:none;object-fit:cover;box-shadow:0 0 0 .25em var(--c2),0 .5em 1.2em rgba(0,0,0,.4)}
.ocx-mvp.ocx-mvp-logo{left:auto;width:auto;height:88%;aspect-ratio:1;bottom:6%}
.ocx-biglogo{display:none}
.ocx-nomvp .ocx-biglogo{display:block;height:100%;max-width:100%;aspect-ratio:1;object-fit:cover;border-radius:2.2em;background:rgba(255,255,255,.95);
  box-shadow:0 0 0 .35em var(--c2),0 .9em 2em rgba(0,0,0,.4)}
.ocx-nomvp .ocx-art{align-items:center;padding:.35em 0}
.ocx-mvptag{position:absolute;left:0;bottom:0;max-width:100%;z-index:2;font-size:1.05em;font-weight:700;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding:.25em .6em .25em .3em;border-radius:.6em;background:rgba(0,0,0,.42);border:.08em solid rgba(255,255,255,.2)}
.ocx-mvptag b{background:var(--c2);color:#fff;padding:0 .35em;border-radius:.3em;margin-right:.25em;font-size:.9em}
.ocx-mvptag i{font-style:normal;opacity:.75}
.ocx-nomvp .ocx-mvptag{display:none}

.ocx-stats{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:.55em}
.ocx-stats div{background:rgba(255,255,255,.95);color:#1d2633;border-radius:.9em;padding:.5em .3em;text-align:center;min-width:0}
.ocx-stats span{display:block;font-size:.9em;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#6b7686;white-space:nowrap}
.ocx-stats b{display:block;font-size:1.45em;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* champion: gold foil frame around the header + moving holo shine */
.ocx-holo .ocx-front{border:.6em solid transparent;
  background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--c1) 80%,#fff 20%) 0%,var(--c1) 45%,color-mix(in srgb,var(--c1) 55%,#000 45%) 100%) padding-box,
  linear-gradient(135deg,#8a5a0b 0%,#e7bf4f 22%,#fff1b8 34%,#c8952a 48%,#f5dc85 64%,#9b6a14 82%,#e9c968 100%) border-box}
.ocx-holo .ocx-front::before{content:"";position:absolute;inset:0;border-radius:.45em;box-shadow:inset 0 0 0 .12em rgba(255,241,184,.85);z-index:3;pointer-events:none}
.ocx-holo .ocx-front::after{background:linear-gradient(90deg,#b07d12,#f6e08f 50%,#b07d12)}
.ocx-holo .ocx-ph{padding:.8em .8em 1em}
.ocx-holo .ocx-tile,.ocx-holo.ocx-nomvp .ocx-biglogo{box-shadow:0 0 0 .3em #f1d27a,0 .9em 2em rgba(0,0,0,.4)}
.ocx-holo .ocx-stats div{box-shadow:inset 0 .18em 0 #e7bf4f}
.ocx-shine{position:absolute;inset:0;z-index:5;pointer-events:none;mix-blend-mode:color-dodge;opacity:.42;
  background:linear-gradient(115deg,transparent 30%,rgba(255,236,160,.55) 42%,rgba(140,230,255,.45) 50%,rgba(255,150,230,.4) 58%,transparent 70%);
  background-size:260% 260%;animation:ocShine 5.5s ease-in-out infinite}
@keyframes ocShine{0%{background-position:100% 100%}50%{background-position:0% 0%}100%{background-position:100% 100%}}
@media (prefers-reduced-motion:reduce){.ocx-shine{animation:none;background-position:40% 40%}.ocx-inner{transition:none}}

/* back: classic cardboard stat back */
.ocx-back{background:#efe6d0;color:#2b2416;padding:1em;display:flex;flex-direction:column;gap:.75em;
  background-image:radial-gradient(rgba(120,95,50,.07) 1px,transparent 1px),radial-gradient(rgba(120,95,50,.05) 1px,transparent 1px);background-size:.5em .5em,.8em .8em;background-position:0 0,.25em .35em;}
.ocx-back>*{flex-shrink:0}
.ocx-back::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 .45em #fbf7ec,inset 0 0 0 .6em var(--c1)}
.ocx-bhead{display:flex;align-items:center;gap:.6em;margin:.5em .5em 0;padding:.55em .7em;border-radius:.4em;background:var(--c1);color:#fff}
.ocx-bno{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:3.4em;height:3.4em;border-radius:50%;background:var(--c2);
  color:color-mix(in srgb,var(--c1) 80%,#000);font-weight:900;font-size:1.05em;line-height:1}
.ocx-bno small{font-size:.75em;font-weight:800;opacity:.8}
.ocx-bwho{min-width:0;flex:1}.ocx-bwho b{display:block;font-size:1.45em;line-height:1.05;text-transform:uppercase;overflow-wrap:anywhere}
.ocx-bwho span{display:block;font-size:1.05em;opacity:.85;margin-top:.15em}
.ocx-bhead .ocx-medal{flex:none;width:2em;height:2.4em}
.ocx-tbl{margin:0 .5em;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:1.22em;width:calc(100% - 1em)}
.ocx-tbl th{white-space:nowrap;background:color-mix(in srgb,var(--c1) 85%,#000);color:#fff;font-size:.78em;letter-spacing:.06em;padding:.3em .35em;text-align:center;font-weight:800}
.ocx-tbl td{text-align:center;padding:.35em .3em;border-bottom:.1em solid rgba(60,45,20,.25);font-weight:700;white-space:nowrap}
.ocx-tbl td:first-child,.ocx-tbl th:first-child{text-align:left}
.ocx-facts{margin:0 .5em;display:grid;gap:.35em}
.ocx-facts div{display:grid;grid-template-columns:7.4em 1fr;gap:.5em;align-items:baseline}
.ocx-facts dt{font-size:1em;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:color-mix(in srgb,var(--c1) 80%,#000)}
.ocx-facts dd{min-width:0;margin:0;font-size:1.2em;line-height:1.25}
.ocx-g{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ocx-w{color:#1a7a4f;font-weight:900}.ocx-l{color:#b0362a;font-weight:900}.ocx-t{font-weight:900}
.ocx-blurb{margin:0 .5em;padding:.55em .7em;border:.1em dashed rgba(60,45,20,.45);border-radius:.3em;font-size:1.18em;line-height:1.38;font-style:italic;
  display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.ocx-rating{margin:0 .5em;display:flex;gap:.8em;align-items:stretch}
.ocx-ovr{flex:none;width:5.2em;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(160deg,color-mix(in srgb,var(--c1) 85%,#fff),var(--c1) 55%,color-mix(in srgb,var(--c1) 60%,#000));
  clip-path:polygon(50% 0,100% 12%,100% 72%,50% 100%,0 72%,0 12%);padding:.5em 0 1em;box-shadow:inset 0 0 0 .2em var(--c2)}
.ocx-ovr b{font-size:2.6em;font-weight:900;line-height:1;letter-spacing:-.03em;text-shadow:0 .06em .1em rgba(0,0,0,.35)}
.ocx-ovr span{font-size:.85em;font-weight:900;letter-spacing:.14em;opacity:.85}
.ocx-ovr.r-elite{background:linear-gradient(160deg,#fff1b8,#d9a521 45%,#8a5a0b);color:#2b1c00}
.ocx-ovr.r-elite b{text-shadow:none}
.ocx-subs{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:.32em}
.ocx-sub{display:grid;grid-template-columns:5.2em 1fr 1.9em;gap:.45em;align-items:center}
.ocx-sl{font-size:.92em;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:color-mix(in srgb,var(--c1) 80%,#000)}
.ocx-bar{height:.6em;border-radius:.3em;background:rgba(60,45,20,.15);overflow:hidden}
.ocx-bar i{display:block;height:100%;border-radius:inherit}
.ocx-sv{font-size:1.25em;font-weight:900;text-align:right;font-variant-numeric:tabular-nums}
.r-elite{background:#c8952a}.r-good{background:#1f9e6e}.r-ok{background:#3f78c4}.r-low{background:#8d8471}
.ocx-ovr.r-good,.ocx-ovr.r-ok,.ocx-ovr.r-low{background:linear-gradient(160deg,color-mix(in srgb,var(--c1) 85%,#fff),var(--c1) 55%,color-mix(in srgb,var(--c1) 60%,#000))}
.ocx-rnote{font-size:.78em;font-weight:700;letter-spacing:.04em;opacity:.6;margin-top:.1em}
.ocx-career{margin:0 .5em;display:flex;flex-wrap:wrap;gap:.3em .9em;align-items:baseline;padding:.55em .7em;border-radius:.3em;background:color-mix(in srgb,var(--c1) 12%,transparent);font-size:1.05em}
.ocx-career b{flex-basis:100%;font-size:.85em;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--c1) 80%,#000)}
.ocx-career i{font-style:normal;font-weight:900;font-size:1.3em;margin-right:.2em}
.ocx-bfoot{margin:auto .5em .45em;display:flex;justify-content:space-between;font-size:.8em;font-weight:800;letter-spacing:.12em;opacity:.55}

/* viewer */
.ocx-lock,.ocx-lock body{overflow:hidden}
.ocx-modal{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:radial-gradient(120% 80% at 50% 40%,rgba(20,32,60,.92),rgba(4,8,18,.96));padding:16px;touch-action:pan-y}
.ocx-modal[hidden]{display:none}
.ocx-stage{width:min(84vw,360px,calc((100vh - 170px) * 5 / 7));container-type:inline-size;position:relative;touch-action:pan-y}
/* round 123: card stack in the viewer: the neighbour sits in the same spot, under (next) or over (previous) */
.ocx-stage>.ocx-big{z-index:2}.ocx-stage>.ocx-nb{position:absolute;left:0;top:0;width:100%;z-index:1;pointer-events:none;transform:scale(.96);opacity:.55;transform-origin:50% 50%}
.ocx-stage>.ocx-nb.ocx-over{z-index:3}.ocx-big.ocx-still{animation:none}
.ocx-big{animation:ocIn .28s ease-out}
@keyframes ocIn{from{transform:scale(.9);opacity:0}to{transform:none;opacity:1}}
.ocx-x{position:absolute;top:calc(10px + env(safe-area-inset-top));right:12px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.ocx-nav{display:flex;align-items:center;gap:18px;color:#fff;font-weight:700;font-variant-numeric:tabular-nums}
.ocx-nav button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.ocx-mhint{color:rgba(255,255,255,.6);font-size:12.5px}

/* power-header button (team page) */
.th-cardsbtn{display:inline-flex;align-items:center;align-self:center;gap:5px;margin:0;padding:5px 11px 5px 8px;border-radius:999px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.3);color:#fff;font-weight:700;font-size:12.5px;line-height:1.2;white-space:nowrap;text-decoration:none;position:relative;z-index:1}
.th-cardsbtn:hover{background:rgba(255,255,255,.24);text-decoration:none;color:#fff}
.th-cardsbtn svg{width:16px;height:16px;flex:none}

html[data-theme=dark] .ocx-binder{background:rgba(255,255,255,.03);border-color:var(--line)}
html[data-theme=dark] .ocx-face{box-shadow:0 .15em .4em rgba(0,0,0,.5),0 .9em 2.2em rgba(0,0,0,.45)}
html[data-theme=dark] .ocx-back{background-color:#e6dcc4}
html[data-theme=dark] .ocp-seasons a.on{background:#2c4a70}

/* Owner of the Week: emerald card — a green frame and sheen that slowly fade in and out (subtle pulse), a soft glare
   that follows tilt/pointer, green badge. Deliberately unlike the champion's gold foil (.ocx-holo). */
@property --otw-g{syntax:'<color>';initial-value:#1d8a5c;inherits:true}
@property --otw-a{syntax:'<number>';initial-value:0;inherits:true}
.otw-slot{max-width:340px;margin:0 auto}
.otw-slot .ocx-back{display:flex}
.otw-slot .ocx:not(.flipped):hover .ocx-inner{transform:none}
.otw-slot .ocx.flipped .ocx-inner{transform:rotateY(180deg)}
.ocx-otw{transform:var(--tilt,none);transition:transform .18s ease-out;animation:otwPulse 5s ease-in-out infinite}
@keyframes otwPulse{0%,100%{--otw-g:#17714b;--otw-a:0}50%{--otw-g:#4be39a;--otw-a:1}}
.ocx-otw .ocx-front{border:.6em solid transparent;
  background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--c1) 80%,#fff 20%) 0%,var(--c1) 45%,color-mix(in srgb,var(--c1) 55%,#000 45%) 100%) padding-box,
  linear-gradient(135deg,var(--otw-g) 0%,#0b4a31 30%,var(--otw-g) 55%,#0e5b3c 80%,var(--otw-g) 100%) border-box;
  box-shadow:0 .15em .4em rgba(0,0,0,.25),0 .9em 2.2em rgba(10,20,40,.22),0 0 calc(.4em + 1.6em * var(--otw-a)) rgba(60,220,140,calc(.15 + .35 * var(--otw-a)))}
.ocx-otw .ocx-front::before{content:"";position:absolute;inset:0;border-radius:.45em;z-index:3;pointer-events:none;
  box-shadow:inset 0 0 0 .12em rgba(190,255,220,.7),inset 0 0 calc(.6em + 1em * var(--otw-a)) rgba(70,225,150,calc(.15 + .3 * var(--otw-a)))}
.ocx-otw .ocx-front::after{background:linear-gradient(90deg,#0e5b3c,var(--otw-g) 50%,#0e5b3c)}
.ocx-otw .ocx-ph{padding:.8em .8em 1em}
.ocx-otw .ocx-tile,.ocx-otw.ocx-nomvp .ocx-biglogo{box-shadow:0 0 0 .28em #fff,0 0 0 .55em var(--otw-g),0 .9em 2em rgba(0,0,0,.4)}
.ocx-otw .ocx-stats div{box-shadow:inset 0 .18em 0 #3fcf8a}
.ocx-otw .otw-score{font-size:2.9em}
.otw-badge{margin-left:auto;padding:.28em .8em;border-radius:999px;font-weight:900;font-size:1.02em;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:#05301e;
  background:linear-gradient(135deg,#9ff0c6,var(--otw-g) 60%,#1d8a5c);box-shadow:0 0 0 .1em rgba(220,255,236,.85),0 0 calc(.3em + .9em * var(--otw-a)) rgba(70,225,150,.6)}
.otw-foil{position:absolute;inset:0;z-index:4;pointer-events:none;mix-blend-mode:soft-light;opacity:calc(.1 + .4 * var(--otw-a));
  background:radial-gradient(130% 90% at var(--mx,30%) var(--my,25%),rgba(120,255,185,.85),rgba(40,190,120,.35) 45%,transparent 75%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px)}
.otw-glare{position:absolute;inset:0;z-index:5;pointer-events:none;mix-blend-mode:overlay;
  background:radial-gradient(circle at var(--mx,28%) var(--my,18%),rgba(235,255,245,.5),rgba(255,255,255,0) 46%)}
@media (prefers-reduced-motion:reduce){.ocx-otw{animation:none;transform:none;--otw-g:#2fb878;--otw-a:.5}}