/* "What's Inside" on the home page */

.fx-grid .feat{padding:14px 14px 20px;gap:8px;transition:transform .25s ease,box-shadow .25s ease}
.fx-grid .feat:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.fx-grid .feat h3{margin:6px 6px 0}
.fx-grid .feat p{margin:0 6px}
.fx-grid .feat p a{color:var(--accent)}

.fx-stage{position:relative;height:184px;border-radius:12px;overflow:hidden;border:1px solid var(--line);
  background:var(--paper);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:16px 16px;
  font:500 .8rem/1.25 var(--body);color:var(--ink);-webkit-user-select:none;user-select:none}
.fx-stage *,.fx-stage *::before,.fx-stage *::after{box-sizing:border-box;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .4s ease,background-color .4s ease,color .4s ease,border-color .4s ease,width .6s cubic-bezier(.2,.8,.2,1),height .6s cubic-bezier(.2,.8,.2,1),left .6s cubic-bezier(.3,.7,.2,1),top .6s cubic-bezier(.3,.7,.2,1),stroke-dashoffset .9s ease}
.fx-stage>*{transition-property:transform,opacity,left,top}
.fx-stage.fx-out>*{opacity:0!important}
.fx-stage.fx-snap,.fx-stage.fx-snap *,.fx-stage.fx-snap *::before,.fx-stage.fx-snap *::after{transition:none!important}
.fx-stage.paused,.fx-stage.paused *,.fx-stage.paused *::before,.fx-stage.paused *::after{animation-play-state:paused!important}

/* course colours and small shared parts */
.c-leaf{--c:var(--leaf)}.c-blue{--c:var(--accent)}.c-tomato{--c:var(--tomato)}.c-plum{--c:var(--plum)}
.fx-stage .cd{flex:none;width:9px;height:9px;border-radius:50%;background:var(--c)}
.fx-stage .tag{font-size:.68rem;padding:2px 8px}
.fx-pill{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font:700 .74rem var(--display);box-shadow:var(--shadow)}
.qa-caret{display:inline-block;width:2px;height:15px;margin-left:1px;background:var(--accent);vertical-align:middle;animation:fx-blink 1s steps(1) infinite}
@keyframes fx-blink{50%{opacity:0}}

/* Today's Plan: the top task is ticked off and the list moves up */
.pl-head{position:absolute;left:14px;right:14px;top:12px;display:flex;align-items:center;justify-content:space-between;font:700 .9rem var(--display)}
.pl-free{font:700 .7rem var(--display);color:var(--leaf);background:color-mix(in srgb,var(--leaf) 14%,transparent);padding:3px 9px;border-radius:999px}
.pl-win{position:absolute;left:12px;right:12px;top:42px;height:130px;overflow:hidden}
.pl-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pl-list li{display:flex;align-items:center;gap:8px;height:36px;padding:0 10px;border-radius:10px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.pl-list span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
.pl-list em{font:700 .7rem var(--display);color:var(--muted);font-style:normal}
.pl-list .ck{flex:none;width:17px;height:17px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;position:relative}
.pl-list .ck::after{content:"";width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg) scale(0)}
.pl-list .r1{border-color:color-mix(in srgb,var(--accent) 50%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.s1 .pl-list .r1 .ck{background:var(--leaf);border-color:var(--leaf)}
.s1 .pl-list .r1 .ck::after{transform:translateY(-1px) rotate(45deg) scale(1)}
.s1 .pl-list .r1 span{color:var(--muted);text-decoration:line-through}
.pl-list{transition:transform .6s cubic-bezier(.3,.7,.2,1)}
.s2 .pl-list{transform:translateY(-42px)}
.s2 .pl-list .r1{opacity:0}
.s3 .pl-list .r2{border-color:color-mix(in srgb,var(--accent) 50%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}

/* Companion: it thinks, offers a quiz, you say yes */
.fx-stage .fx-comp{--cps:100px;left:8px;bottom:6px}
.fx-stage .fx-comp,.fx-stage .fx-comp *{transition:none}
.cm-bub{position:absolute;left:108px;right:14px;top:22px;min-height:58px;padding:10px 12px;border-radius:14px 14px 14px 4px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);font-weight:700;transform-origin:0 100%;transform:scale(.4);opacity:0}
.s1 .cm-bub{transform:none;opacity:1}
.cm-dots{position:absolute;left:12px;top:22px;display:flex;gap:4px}
.cm-dots i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:fx-dot 1s ease-in-out infinite}
.cm-dots i:nth-child(2){animation-delay:.15s}.cm-dots i:nth-child(3){animation-delay:.3s}
@keyframes fx-dot{50%{transform:translateY(-4px);opacity:.5}}
.cm-say{display:block;opacity:0}
.s2 .cm-dots{opacity:0}
.s2 .cm-say{opacity:1}
.cm-acts{position:absolute;left:108px;top:100px;display:flex;gap:6px;opacity:0;transform:translateY(8px)}
.cm-acts span{padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font:700 .74rem var(--display)}
.s2 .cm-acts{opacity:1;transform:none}
.s3 .cm-yes{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);transform:scale(1.08)}

/* School site sync */
.sy-sites{position:absolute;left:12px;top:12px;width:118px;display:grid;gap:6px}
.sy-sites small{font:700 .64rem var(--display);color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.sy-sites span{display:flex;align-items:center;justify-content:space-between;height:32px;padding:0 10px;border-radius:9px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);font:700 .76rem var(--display)}
.sy-sites span:not(.sy-on){opacity:.55}
.sy-on i{font-style:normal;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;background:var(--leaf);color:#fff;font-size:.62rem;opacity:0;transform:scale(.3)}
.s1 .sy-on{border-color:var(--leaf);box-shadow:0 0 0 3px color-mix(in srgb,var(--leaf) 18%,transparent)}
.s1 .sy-on i{opacity:1;transform:none}
.sy-sync{position:absolute;left:138px;top:72px;width:22px;height:22px;fill:none;stroke:var(--muted);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.5}
.s1 .sy-sync{opacity:1;stroke:var(--accent);animation:fx-spin 1.1s linear infinite}
.s3 .sy-sync{animation:none;stroke:var(--leaf)}
@keyframes fx-spin{to{transform:rotate(360deg)}}
.sy-list{list-style:none;margin:0;padding:0;position:absolute;left:168px;right:12px;top:12px;display:grid;gap:5px}
.sy-list li{display:flex;align-items:center;gap:6px;height:28px;padding:0 8px;border-radius:8px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);font:700 .72rem var(--display);white-space:nowrap;opacity:0;transform:translateX(-14px)}
.sy-list span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.sy-list em{font-style:normal;color:var(--muted);font-size:.66rem}
.s2 .sy-list li{opacity:1;transform:none}
.s2 .sy-list li:nth-child(2){transition-delay:.15s}.s2 .sy-list li:nth-child(3){transition-delay:.3s}.s2 .sy-list li:nth-child(4){transition-delay:.45s}
.sy-badge{position:absolute;right:12px;bottom:12px;padding:5px 10px;border-radius:999px;background:var(--leaf);color:#fff;font:700 .72rem var(--display);opacity:0;transform:translateY(10px)}
.s3 .sy-badge{opacity:1;transform:none}
@media (max-width:580px){.sy-sites{width:96px}.sy-sites span{padding:0 7px;font-size:.7rem}.sy-sync{left:112px;width:18px}.sy-list{left:136px;right:10px}.sy-list li{padding:0 6px;gap:5px;font-size:.68rem}}

/* Lectures: recording with live captions, a key moment, then notes and cards */
.rc-top{position:absolute;left:14px;right:14px;top:12px;display:flex;align-items:center;gap:7px;font:700 .82rem var(--display)}
.rc-dot{width:10px;height:10px;border-radius:50%;background:var(--tomato);animation:fx-rec 1.2s ease-in-out infinite}
@keyframes fx-rec{50%{opacity:.3}}
.rc-t{color:var(--muted);font-variant-numeric:tabular-nums}
.rc-pro{margin-left:auto}
.rc-wave{position:absolute;left:14px;right:14px;top:40px;height:36px;display:flex;align-items:center;justify-content:space-between}
.rc-wave i{width:4px;height:30px;border-radius:2px;background:var(--accent);transform:scaleY(.25);animation:fx-wave 1s ease-in-out infinite}
.rc-wave i:nth-child(3n){animation-duration:.8s;animation-delay:-.3s}
.rc-wave i:nth-child(3n+1){animation-duration:1.15s;animation-delay:-.6s}
.rc-wave i:nth-child(4n){animation-duration:.7s;animation-delay:-.1s}
.rc-wave i:nth-child(5n){animation-delay:-.45s}
@keyframes fx-wave{50%{transform:scaleY(1)}}
.rc-cap{position:absolute;left:14px;right:14px;top:84px;height:48px;padding:8px 10px;border-radius:10px;background:var(--navy);color:#fff;font-weight:700;overflow:hidden}
.rc-cap span{position:absolute;left:10px;right:10px;top:8px}
.rc-cap .c2{opacity:0;transform:translateY(12px)}
.s1 .rc-cap .c1{opacity:0;transform:translateY(-12px)}
.s1 .rc-cap .c2{opacity:1;transform:none}
.rc-key{position:absolute;right:8px;bottom:6px;font:700 .66rem var(--display);color:#1A1300;background:var(--mark);padding:2px 7px;border-radius:999px;opacity:0;transform:scale(.5)}
.s2 .rc-key{opacity:1;transform:none}
.rc-out{position:absolute;left:14px;right:14px;bottom:12px;display:flex;gap:6px}
.rc-out span{padding:4px 9px;border-radius:999px;background:color-mix(in srgb,var(--leaf) 14%,transparent);color:var(--leaf);font:700 .7rem var(--display);opacity:0;transform:translateY(8px)}
.rc-out span::before{content:"✓ "}
.s3 .rc-out span{opacity:1;transform:none}
.s3 .rc-out span:nth-child(2){transition-delay:.15s}.s3 .rc-out span:nth-child(3){transition-delay:.3s}

/* Flashcards: the card flips, you rate it, it comes back later */
.fc-card{position:absolute;left:50%;top:14px;width:min(250px,calc(100% - 28px));height:96px;margin-left:calc(min(250px,calc(100% - 28px)) / -2);perspective:700px}
.fc-f,.fc-b{position:absolute;inset:0;display:grid;place-content:center;gap:4px;text-align:center;padding:10px 14px;border-radius:12px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);font:700 .88rem/1.3 var(--display);-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform .7s cubic-bezier(.3,.7,.2,1)}
.fc-f small,.fc-b small{font:700 .64rem var(--display);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.fc-b{transform:rotateY(180deg);background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
.s1 .fc-f{transform:rotateY(-180deg)}
.s1 .fc-b{transform:rotateY(0)}
.fc-rate{position:absolute;left:12px;right:12px;top:120px;display:flex;justify-content:center;gap:5px;opacity:0;transform:translateY(8px)}
.fc-rate span{padding:5px 10px;border-radius:8px;border:1px solid var(--line);background:var(--surface);font:700 .72rem var(--display)}
.s1 .fc-rate{opacity:1;transform:none}
.s2 .fc-good{background:var(--leaf);border-color:var(--leaf);color:#fff;transform:scale(1.1)}
.fc-next{position:absolute;left:0;right:0;bottom:10px;text-align:center;font:700 .72rem var(--display);color:var(--muted);opacity:0}
.s3 .fc-next{opacity:1}

/* Board: a task moves from To Do to In Work to Done */
.bd-cols{position:absolute;inset:12px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bd-cols>div{border-radius:10px;background:color-mix(in srgb,var(--soft) 80%,transparent);border:1px solid var(--line);padding:7px 6px;display:grid;gap:6px;align-content:start}
.bd-cols b{font:700 .7rem var(--display);color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding-left:2px}
.bd-cols i{height:22px;border-radius:7px;background:var(--surface);border:1px solid var(--line);opacity:.75}
.bd-cols>div:first-child i:first-of-type{margin-top:36px}
.bd-cols>div:nth-child(2) i{margin-top:36px}
.bd-cols>div:nth-child(3) i:first-of-type{margin-top:36px}
.bd-card{position:absolute;top:40px;left:18px;width:calc((100% - 40px) / 3 - 12px);height:30px;display:flex;align-items:center;gap:5px;padding:0 6px;border-radius:8px;background:var(--surface);border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:0 6px 16px rgba(14,42,86,.18);font:700 .66rem var(--display);white-space:nowrap;overflow:hidden;z-index:2}
.s1 .bd-card{left:calc(12px + (100% - 40px) / 3 + 14px);transform:rotate(-3deg)}
.s2 .bd-card{left:calc(12px + 2 * (100% - 40px) / 3 + 22px);transform:none;border-color:var(--leaf)}
.bd-ok{margin-left:auto;font-style:normal;color:var(--leaf);opacity:0;transform:scale(.4)}
.s2 .bd-ok{opacity:1;transform:none}
.s3 .bd-card{box-shadow:var(--shadow)}

/* Quick Add: typing turns into a filled-in task */
.qa-box{position:absolute;left:14px;right:14px;top:18px;height:42px;display:flex;align-items:center;gap:8px;padding:0 12px;border-radius:12px;background:var(--surface);border:2px solid var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent);font:600 .95rem var(--body)}
.qa-box svg,.se-box svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round}
.qa-text{white-space:nowrap}
.qa-chips{position:absolute;left:14px;right:14px;top:74px;display:flex;flex-wrap:wrap;gap:6px}
.qa-chips span{padding:5px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font:700 .74rem var(--display);opacity:0;transform:translateY(10px) scale(.8)}
.qa-chips .c-leaf{background:var(--leaf);border-color:var(--leaf);color:#fff}
.s2 .qa-chips span{opacity:1;transform:none}
.s2 .qa-chips span:nth-child(2){transition-delay:.12s}.s2 .qa-chips span:nth-child(3){transition-delay:.24s}.s2 .qa-chips span:nth-child(4){transition-delay:.36s}
.qa-done{position:absolute;left:14px;bottom:14px;padding:5px 11px;border-radius:999px;background:color-mix(in srgb,var(--leaf) 14%,transparent);color:var(--leaf);font:700 .74rem var(--display);opacity:0}
.s3 .qa-done{opacity:1}

/* Focus: the timer runs down while your group focuses too */
.fo-ring{position:absolute;left:16px;top:22px;width:136px;height:136px}
.fo-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.fo-bg{fill:var(--surface);stroke:var(--line);stroke-width:9}
.fo-fg{fill:none;stroke:var(--tomato);stroke-width:9;stroke-linecap:round;stroke-dasharray:264;stroke-dashoffset:264;transition:stroke-dashoffset 1.2s ease,stroke .4s}
.fx-stage:not(.s1) .fo-fg{stroke-dashoffset:0}
.s1 .fo-fg{stroke-dashoffset:84}
.s2 .fo-fg{stroke-dashoffset:184}
.s3 .fo-fg{stroke-dashoffset:264}
.s3 .fo-bg{stroke:var(--leaf)}
.fo-t{position:absolute;inset:0;display:grid;place-items:center}
.fo-t b{grid-area:1/1;font:700 1.35rem var(--display);font-variant-numeric:tabular-nums;opacity:0}
.fx-stage:not(.s1) .t0,.s1:not(.s2) .t1,.s2:not(.s3) .t2,.s3 .t3{opacity:1}
.s3 .t3{color:var(--leaf)}
.fo-room{position:absolute;left:166px;right:12px;top:40px;display:grid;gap:8px}
.fo-room small{font:700 .68rem var(--display);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.fo-av,.gp-av{display:flex}
.fo-av i,.gp-av i{width:32px;height:32px;margin-right:-7px;border-radius:50%;display:grid;place-items:center;background:var(--c);color:#fff;font:700 .7rem var(--display);font-style:normal;border:2.5px solid var(--surface);box-shadow:var(--shadow)}
.fo-av i:last-child,.gp-av i:last-child{font-size:.58rem}
.fo-av i.fx-face,.gp-av i.fx-face{background:color-mix(in srgb,var(--c) 22%,var(--surface));overflow:hidden;padding:0}
.fx-face{position:relative}
.fx-stage .fx-face svg.cp-svg{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;filter:none}
.fo-av i{animation:fx-bob 2.6s ease-in-out infinite}
.fo-av i:nth-child(2){animation-delay:-.6s}.fo-av i:nth-child(3){animation-delay:-1.2s}.fo-av i:nth-child(4){animation-delay:-1.8s}
.fo-n{display:inline-flex;align-items:center;gap:6px;font:700 .74rem var(--display);color:var(--leaf)}
.fo-n::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--leaf);animation:fx-rec 1.4s ease-in-out infinite}

/* Grades: the marks fill in and it tells you what you need */
.gr-big{position:absolute;left:14px;top:14px;display:grid}
.gr-big b{font:700 1.7rem var(--display);line-height:1;opacity:.2}
.gr-big span{font:700 .72rem var(--display);color:var(--muted)}
.s1 .gr-big b{opacity:1}
.gr-bars{position:absolute;left:120px;right:14px;top:16px;height:118px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-items:end}
.gr-bars>div{height:100%;display:grid;grid-template-rows:1fr auto;gap:4px;justify-items:center}
.gr-bars i{align-self:end;width:100%;max-width:34px;height:4px;border-radius:7px 7px 3px 3px;background:var(--accent)}
.gr-bars small{font:700 .64rem var(--display);color:var(--muted)}
.s1 .g1{height:92%}.s1 .g2{height:74%;transition-delay:.1s}.s1 .g3{height:81%;transition-delay:.2s}
.gr-fin i{background:transparent;border:2px dashed var(--plum)}
.s2 .g4{height:71%}
.gr-need{position:absolute;left:14px;right:14px;bottom:12px;padding:6px 10px;border-radius:10px;background:color-mix(in srgb,var(--plum) 14%,transparent);color:var(--plum);font:700 .76rem var(--display);opacity:0;transform:translateY(10px)}
.s3 .gr-need{opacity:1;transform:none}

/* Search: a word finds notes, cards and the moment in a lecture */
.se-box{position:absolute;left:14px;right:14px;top:14px;height:40px;display:flex;align-items:center;gap:8px;padding:0 10px;border-radius:12px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);font:600 .95rem var(--body)}
.se-text{white-space:nowrap}
.se-box kbd{margin-left:auto;font:700 .64rem var(--display);color:var(--muted);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:2px 5px}
.se-res{list-style:none;margin:0;padding:0;position:absolute;left:14px;right:14px;top:62px;display:grid;gap:5px}
.se-res li{display:flex;align-items:center;gap:8px;height:33px;padding:0 9px;border-radius:9px;background:var(--surface);border:1px solid var(--line);font-weight:700;white-space:nowrap;overflow:hidden;opacity:0;transform:translateY(-6px)}
.se-res span{overflow:hidden;text-overflow:ellipsis}
.se-res mark{background:var(--mark);color:inherit;border-radius:3px;padding:0 2px}
.se-ic{flex:none;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;background:var(--c);color:#fff;font:800 .62rem var(--display)}
.s2 .se-res li{opacity:1;transform:none}
.s2 .se-res li:nth-child(2){transition-delay:.12s}.s2 .se-res li:nth-child(3){transition-delay:.24s}
.s3 .se-res li:first-child{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}

/* Notes: stickers drop onto the corkboard */
.fx[data-fx="notes"] .fx-stage{background:#C79A6B radial-gradient(rgba(90,55,20,.28) 1px,transparent 1.4px) 0 0/8px 8px;border-color:color-mix(in srgb,#7A5230 45%,var(--line))}
.nt-n{position:absolute;top:30px;width:118px;height:104px;padding:20px 12px 0;background:#FFE47A;color:#2B2410;font:700 .82rem/1.35 var(--body);box-shadow:0 8px 16px rgba(60,35,10,.3)}
.nt-n.n1{left:calc(50% - 128px);transform:rotate(-4deg)}
.nt-n.n2{left:calc(50% + 8px);top:38px;background:#FFC2D1;transform:rotate(3deg)}
.nt-pin{position:absolute;left:50%;top:6px;width:11px;height:11px;margin-left:-5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ff8a7a,#C7261A)}
.nt-st{position:absolute;width:38px;height:38px;filter:drop-shadow(0 3px 3px rgba(0,0,0,.25));opacity:0;transform:translateY(-80px) scale(1.6) rotate(-30deg)}
.nt-st path{stroke:#fff;stroke-width:3;stroke-linejoin:round}
.st1{left:calc(50% - 50px);top:96px}.st1 path{fill:#FFB400}
.st2{left:calc(50% + 86px);top:104px}.st2 path{fill:#F0506E}
.s1 .st1{opacity:1;transform:rotate(-12deg)}
.s2 .st2{opacity:1;transform:rotate(10deg)}
.s3 .nt-n.n1{transform:rotate(-1deg) translateY(-4px)}

/* Study groups: everyone's free times overlap into one pick */
.gp-av{position:absolute;left:14px;top:12px}
.gp-grid{position:absolute;left:14px;right:14px;top:50px;display:grid;grid-template-columns:34px repeat(5,1fr);gap:3px;align-items:center}
.gp-grid b{font:700 .6rem var(--display);color:var(--muted);text-align:center}
.gp-grid i{height:22px;border-radius:5px;background:var(--surface);border:1px solid var(--line)}
.s1 .gp-grid .f1{background:color-mix(in srgb,var(--accent) 22%,var(--surface))}
.s2 .gp-grid .f2{background:color-mix(in srgb,var(--accent) 22%,var(--surface))}
.s2 .gp-grid .f1.f2{background:color-mix(in srgb,var(--accent) 45%,var(--surface))}
.s3 .gp-grid .best{background:var(--leaf);border-color:var(--leaf);transform:scale(1.15);box-shadow:0 0 0 3px color-mix(in srgb,var(--leaf) 25%,transparent)}
.gp-pick{position:absolute;left:14px;bottom:10px;padding:5px 10px;border-radius:999px;background:var(--leaf);color:#fff;font:700 .7rem var(--display);opacity:0;transform:translateY(6px)}
.s3 .gp-pick{opacity:1;transform:none}

@media (max-width:380px){
  .fx-stage{font-size:.74rem}
  .gr-bars{left:104px}
}