/* The Flick app, live in the page: the screens of the film rebuilt 1:1 from the Flutter source (G:\TKB\Flick\lib), the same way as
   apps/flick.html, here in the LIGHT theme of the launch film (app/theme.dart: surface #FAFAF8, container #F0F0EC; derived
   roles sampled from the recording: onSurface #181D18, onSurfaceVariant #414941, outline #727970). One root, .fa, is 400 x 888.9 logical
   px (the recording: 1080 x 2400 at dpr 2.7) and is scaled into the phone. Everything is scoped under .fa so it can sit in any page. */
@font-face{font-family:FaRoboto;src:url(media/fonts/roboto400.woff) format("woff");font-weight:400;ascent-override:92.7734%;descent-override:24.4141%;line-gap-override:0%}
@font-face{font-family:FaRoboto;src:url(media/fonts/roboto500.woff) format("woff");font-weight:500;ascent-override:92.7734%;descent-override:24.4141%;line-gap-override:0%}
@font-face{font-family:FaRoboto;src:url(media/fonts/roboto700.woff) format("woff");font-weight:700;ascent-override:92.7734%;descent-override:24.4141%;line-gap-override:0%}
@font-face{font-family:FaGrotesk;src:url(/assets/ui/fonts/space-grotesk/SpaceGrotesk.ttf);font-weight:300 700;ascent-override:98.4%;descent-override:29.2%;line-gap-override:0%}

.fa{--surface:#FAFAF8;--high:#F0F0EC;--on:#181D18;--onVar:#414941;--outline:#727970;--primary:#2E9E52;--del:#C2553B;--keep:#2E9E52;--card:#111114;
  position:absolute;left:0;top:0;width:400px;height:888.889px;overflow:hidden;background:var(--surface);color:var(--on);
  font:400 14px/1.43 FaRoboto,Roboto,sans-serif;letter-spacing:.25px;font-kerning:normal;-webkit-font-smoothing:antialiased;text-align:left;transform-origin:0 0}
.fa *{box-sizing:border-box;margin:0;padding:0}
.fa svg{display:block;fill:currentColor;flex:none}
.fa button{font:inherit;letter-spacing:inherit;color:inherit;border:0;background:none}
/* Material 3 2021 type scale (app/theme.dart:176-210) */
.fa .t-dl{font:700 57px/1.12 FaGrotesk,sans-serif;letter-spacing:-1.5px}
.fa .t-dm{font:700 45px/1.16 FaGrotesk,sans-serif;letter-spacing:-1px}
.fa .t-hm{font:600 28px/1.29 FaGrotesk,sans-serif;letter-spacing:0}
.fa .t-hs{font:600 24px/1.33 FaGrotesk,sans-serif;letter-spacing:0}
.fa .t-tl{font:600 22px/1.27 FaGrotesk,sans-serif;letter-spacing:0}
.fa .t-tm{font:500 16px/1.5 FaRoboto,Roboto,sans-serif;letter-spacing:.15px}
.fa .t-ts{font:500 14px/1.43 FaRoboto,Roboto,sans-serif;letter-spacing:.1px}
.fa .t-bl{font:400 16px/1.5 FaRoboto,Roboto,sans-serif;letter-spacing:.5px}
.fa .t-bm{font:400 14px/1.43 FaRoboto,Roboto,sans-serif;letter-spacing:.25px}
.fa .t-bs{font:400 12px/1.33 FaRoboto,Roboto,sans-serif;letter-spacing:.4px}
.fa .t-ll{font:500 14px/1.43 FaRoboto,Roboto,sans-serif;letter-spacing:.1px}
.fa .t-lm{font:500 12px/1.33 FaRoboto,Roboto,sans-serif;letter-spacing:.5px}
.fa .t-ls{font:500 11px/1.45 FaRoboto,Roboto,sans-serif;letter-spacing:.5px}
.fa .t-sl{font:700 24px/1.33 FaGrotesk,sans-serif;letter-spacing:1.2px}
.fa .t-cb{font:600 12px/1.43 FaRoboto,Roboto,sans-serif;letter-spacing:.25px}
.fa .t-bt{font:600 16px/normal FaGrotesk,sans-serif;letter-spacing:0}
/* baselines moved to Flutter's (even leading, unrounded metrics); FlickApp.calibrate() measures Chrome's per style */
.fa .t-dl{translate:0 var(--fa-dl,0px)}.fa .t-dm{translate:0 var(--fa-dm,0px)}.fa .t-hm{translate:0 var(--fa-hm,0px)}.fa .t-hs{translate:0 var(--fa-hs,0px)}
.fa .t-tl{translate:0 var(--fa-tl,0px)}.fa .t-tm{translate:0 var(--fa-tm,0px)}.fa .t-ts{translate:0 var(--fa-ts,0px)}.fa .t-bl{translate:0 var(--fa-bl,0px)}
.fa .t-bm{translate:0 var(--fa-bm,0px)}.fa .t-bs{translate:0 var(--fa-bs,0px)}.fa .t-ll{translate:0 var(--fa-ll,0px)}.fa .t-lm{translate:0 var(--fa-lm,0px)}
.fa .t-ls{translate:0 var(--fa-ls,0px)}.fa .t-sl{translate:0 var(--fa-sl,0px)}.fa .t-cb{translate:0 var(--fa-cb,0px)}.fa .t-bt{translate:0 var(--fa-bt,0px)}

/* routes: each screen fills the app; FadeForwards transitions are driven from script */
.fa .fa-scr{position:absolute;inset:0;background:var(--surface);display:flex;flex-direction:column;overflow:hidden;visibility:hidden}
.fa .fa-scr.on{visibility:inherit}
.fa .i24{width:24px;height:24px}

/* buttons (theme.dart filledButtonTheme / outlinedButtonTheme: 56 tall, stadium, Grotesk 16/600) */
.fa .fa-fb{display:flex;align-items:center;justify-content:center;width:100%;height:56px;padding:0 24px;border-radius:28px;background:var(--primary);color:#fff;white-space:nowrap}
.fa .fa-ob{display:flex;align-items:center;justify-content:center;width:100%;height:56px;padding:0 24px;border-radius:28px;border:1px solid var(--outline);color:var(--primary);white-space:nowrap}
.fa .fa-tb{display:flex;align-items:center;justify-content:center;width:100%;height:48px;color:var(--onVar)}

/* ---------- the shell: rooms behind the liquid bar (features/root/shell_screen.dart, app/liquid_nav_bar.dart) ---------- */
.fa .fa-room{position:absolute;inset:0;visibility:hidden}
.fa .fa-room.on{visibility:inherit}
.fa .fa-nav{position:absolute;left:26px;right:26px;bottom:14px;height:85px;pointer-events:none}
.fa .fa-nav svg{position:absolute;left:0;top:0;overflow:visible}

/* ---------- hub (features/hub/hub_screen.dart) ---------- */
.fa .hub{position:absolute;inset:0;padding:12px 20px 0}
.fa .hub-r{display:flex;align-items:center;height:48px}
.fa .hub-r .t-hs{flex:1}
.fa .ib48{flex:none;width:48px;height:48px;display:grid;place-items:center;color:var(--onVar)}
.fa .mc{margin-top:6px;padding:22px;border-radius:24px;background:var(--high)}
.fa .mc-r{display:flex;align-items:center}
.fa .mc-r .t-ll{flex:1;color:var(--onVar);letter-spacing:1px}
.fa .mc-pill{padding:5px 11px;border-radius:99px;background:var(--surface);color:var(--onVar)}
.fa .mc-n{margin-top:14px}
.fa .mc-sub{color:var(--onVar)}
.fa .mc .fa-fb{margin-top:18px}
.fa .hub-line{padding:10px 6px 0;color:var(--onVar)}
.fa .hub-cap{padding:18px 4px 8px;color:var(--onVar);letter-spacing:1.2px}
.fa .nc{display:flex;align-items:center;padding:16px;border-radius:16px;background:var(--high)}
.fa .nc+.nc{margin-top:12px}
.fa .nc>svg{width:24px;height:24px;color:var(--onVar)}
.fa .nc-t{flex:1;min-width:0;margin-left:12px}
.fa .nc-t .t-lm{color:var(--onVar)}

/* ---------- deck (features/swipe/swipe_screen.dart, app/deck_pile.dart, app/decision_stamp.dart) ---------- */
.fa .dk-hd{flex:none;padding:12px 10px 4px 22px}
.fa .dk-r1{display:flex;align-items:center;height:48px}
.fa .dk-tbox{flex:1;min-width:0;height:48px;display:flex;align-items:center}
.fa .dk-ttl{white-space:nowrap;transform-origin:0 50%}
.fa .dk-fin{flex:none;min-width:64px;height:48px;padding:0 12px;color:var(--primary);display:none;align-items:center;justify-content:center}
.fa .dk-fin.on{display:flex}
.fa .dk-r2{display:flex;align-items:center;height:40px;padding-right:12px}
.fa .dk-rem{flex:1;min-width:0;color:var(--onVar);white-space:nowrap}
.fa .dk-trash{flex:none;position:relative;width:40px;height:40px;color:rgba(65,73,65,.45)}
.fa .dk-trash>svg{position:absolute;left:8px;top:8px;width:24px;height:24px}
.fa .dk-trash.has{color:var(--on)}
.fa .dk-badge{position:absolute;left:20px;top:4px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--del);color:#fff;display:none;align-items:center;justify-content:center}
.fa .dk-trash.has .dk-badge{display:flex}
.fa .chip{flex:none;display:flex;align-items:center;margin-left:10px;padding:6px 12px;border-radius:20px;background:rgba(46,158,82,.1);color:var(--primary);white-space:nowrap}
.fa .chip svg{width:15px;height:15px;margin-right:6px}
.fa .chip .t-lm{font-weight:600}
.fa .dk-prog{height:5px;margin:10px 12px 0 0;border-radius:3px;background:var(--high);overflow:hidden}
.fa .dk-prog i{display:block;height:100%;width:0;background:var(--primary)}
.fa .dk-wrap{flex:1;min-height:0;position:relative}
.fa .dk-deck{position:absolute;left:20px;top:14px;right:20px;bottom:30px}
.fa .dk-pile{position:absolute;inset:0}
.fa .fcard,.fa .fblank{position:absolute;inset:0;border-radius:28px;transform-origin:50% 50%}
.fa .fcard{overflow:hidden;background:var(--card)}
.fa .fblank{border:1px solid transparent}
.fa .fph{position:absolute;inset:0;background:center/contain no-repeat}
.fa .ftop,.fa .fghost{box-shadow:0 27px 12.55px rgba(0,0,0,.0875)}
.fa .fplay{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:rgba(0,0,0,.4);display:grid;place-items:center;color:#fff}
.fa .fplay svg{width:40px;height:40px}
.fa .fbadge{position:absolute;left:14px;top:14px;display:flex;align-items:center;padding:6px 10px;border-radius:20px;background:rgba(0,0,0,.7);color:#fff}
.fa .fbadge svg{width:15px;height:15px;margin-right:4px}
.fa .stamp{position:absolute;inset:0;display:none;align-items:center;justify-content:center;pointer-events:none}
.fa .stamp .wash{position:absolute;inset:0}
.fa .stamp .col{position:relative;display:flex;flex-direction:column;align-items:center}
.fa .stamp .sd{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:0 10px 35.64px rgba(0,0,0,.35)}
.fa .stamp .sd svg{width:50px;height:50px}
.fa .stamp b{margin-top:10px;color:#fff;white-space:nowrap;text-shadow:0 2px 14.86px rgba(0,0,0,.6)}
.fa .dk-bar{flex:none;display:flex;align-items:center;justify-content:space-between;padding:6px 28px 14px}
.fa .dk-mid{display:flex;align-items:center}
.fa .dk-mid .pul+.pul{margin-left:18px}
.fa .pul{display:block;flex:none}
.fa .disc{display:grid;place-items:center;border-radius:50%}
.fa .disc.big{width:64px;height:64px;color:#fff}.fa .disc.big svg{width:26.88px;height:26.88px}
.fa .disc.sm{width:48px;height:48px;background:var(--high);color:var(--onVar)}.fa .disc.sm svg{width:20.16px;height:20.16px}
.fa .disc.del{background:var(--del)}.fa .disc.kp{background:var(--keep)}
.fa .pul.off{opacity:.3}

/* ---------- app bar (Flutter AppBar 56, leading 56, title at 72) ---------- */
.fa .ab{flex:none;height:56px;display:flex;align-items:center}
.fa .ab-lead{flex:none;width:56px;height:56px;display:grid;place-items:center;color:var(--on)}
.fa .ab-lead svg{width:24px;height:24px}
.fa .ab h1{margin-left:16px;white-space:nowrap;color:var(--on)}

/* ---------- review deletes (features/review/review_screen.dart) ---------- */
.fa .rv-p{flex:none;padding:4px 22px 12px;color:var(--onVar)}
.fa .rv-g{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 16px;align-content:start}
.fa .rv-t{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--high)}
.fa .rv-t .tph{position:absolute;inset:0;background:center/cover no-repeat}
.fa .rv-t .pc{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;color:#fff}
.fa .rv-t .ov{position:absolute;inset:0;background:rgba(0,0,0,.18)}
.fa .rv-b{flex:none;padding:8px 22px 16px}

/* ---------- payoff (features/payoff/payoff_screen.dart) ---------- */
.fa .po{flex:1;display:flex;flex-direction:column;align-items:center;padding:28px;text-align:center}
.fa .po-sp{flex:1}
.fa .po-tr{width:150px;height:150px;transform:scale(0)}
.fa .po-tr img{display:block;width:150px;height:150px}
.fa .po-body{margin-top:28px;display:flex;flex-direction:column;align-items:center;opacity:0}
.fa .po-mb{color:var(--primary);white-space:nowrap}
.fa .po-fr{color:var(--onVar)}
.fa .po-n{margin-top:18px}
.fa .po-pill{margin-top:22px;display:flex;align-items:center;padding:10px 16px;border-radius:99px;background:rgba(46,158,82,.1);color:var(--primary)}
.fa .po-pill .fl22{width:22px;height:22px;margin-right:8px}
.fa .po-rec{margin-top:12px;color:var(--onVar)}
.fa .po-next{align-self:stretch;display:flex;flex-direction:column;text-align:left;opacity:0}
.fa .po-next .fa-fb{margin-top:10px}
.fa .po-next .fa-ob{margin-top:8px}
.fa .po-next .fa-tb{margin-top:4px}

/* ---------- touches: the film's hand and green rings (Flick5.tsx Touches), drawn over the app in its own px ---------- */
.fa .fa-touch{position:absolute;inset:0;pointer-events:none;z-index:50}
.fa .fa-hand{position:absolute;left:0;top:0;width:118.52px;height:118.52px;transform-origin:41% 24%;filter:drop-shadow(0 6.67px 9.63px rgba(0,0,0,.28));opacity:0}
.fa .fa-hand svg{width:100%;height:100%}
.fa .fa-ring{position:absolute;left:0;top:0;border-radius:50%;border:solid #2E9E52;opacity:0;box-sizing:content-box}

/* ================= the film's second half ================= */
.fa .t-ds{font:600 36px/1.2222 FaGrotesk,sans-serif;letter-spacing:0;translate:0 var(--fa-ds,0px)}
.fa .onv{color:var(--onVar)}.fa .pri{color:var(--primary)}
.fa .fa-room>div{position:absolute;inset:0;overflow:hidden}
.fa [data-press]{transform-origin:50% 50%}
.fa .fa-snap{position:absolute;inset:0;z-index:40;pointer-events:none}
.fa .bl{display:flex;align-items:baseline}
.fa .ab-acts{margin-left:auto;display:flex;align-items:center}
.fa .abt{flex:1;min-width:0;margin:0 16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--on)}

/* Streak room (streak_tab.dart: ListView 20,12,20; streak_hero.dart; progress_screen.dart) */
.fa .sk{padding:12px 20px 0}
.fa .sk-hd{display:flex;align-items:center;height:48px}
.fa .sk-hd .t-hs{flex:1;padding-left:2px}
.fa .hero{margin-top:6px;padding:22px;border-radius:26px;background:var(--high)}
.fa .hero-r{display:flex;align-items:center}
.fa .hero-fc{flex:none;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.fa .hero-c{flex:1;min-width:0;margin-left:14px}
.fa .hero-c>span{display:block}
.fa .hero-ms{margin-left:7px;padding-bottom:6px}
.fa .hero-r>svg{width:24px;height:24px}
.fa .hero-lv{margin-top:18px;display:flex;align-items:center;justify-content:space-between}
.fa .bar8{margin-top:7px;height:8px;border-radius:99px;background:rgba(46,158,82,.14);overflow:hidden}
.fa .bar8 i{display:block;height:100%;background:var(--primary)}
.fa .hero-fr{margin-top:18px;padding:14px 16px;border-radius:16px;background:var(--surface);display:flex;align-items:center}
.fa .hero-fr svg{width:22px;height:22px;color:var(--primary)}
.fa .hero-fr .t-tl{flex:1;margin-left:12px;color:var(--primary)}
.fa .hero-st{margin-top:10px;display:flex;gap:10px}
.fa .hero-st>div,.fa .pg-s>div{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center}
.fa .hero-st>div{padding:12px 0;border-radius:14px;background:var(--surface)}
.fa .pg-h{margin-top:16px;padding:30px 0;border-radius:26px;background:var(--high);display:flex;flex-direction:column;align-items:center}
.fa .pg-h svg{width:30px;height:30px;color:var(--primary)}
.fa .pg-h .t-dm{margin-top:12px;color:var(--primary)}
.fa .pg-s{margin-top:16px;display:flex;gap:12px}
.fa .pg-s>div{padding:16px 8px;border-radius:16px;background:var(--high)}
.fa .pg-s .t-ls{margin-top:2px}
.fa .pg-k{margin-top:12px;padding:18px;border-radius:16px;background:var(--high);display:flex;align-items:center}
.fa .pg-kf{flex:none;width:28px;height:28px}
.fa .pg-k>div{flex:1;margin-left:14px}
.fa .pg-k>div>span{display:block}
.fa .pg-ms{margin-left:6px}
.fa .pg-t{margin-top:26px}
.fa .pg-b{margin-top:14px;height:150px;display:flex;align-items:flex-end}
.fa .pg-b>div{flex:1;min-width:0;padding:0 5px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.fa .pg-b>div>span:first-child{padding-bottom:4px;white-space:nowrap}
.fa .pg-b i{display:block;width:100%;border-radius:8px;background:var(--primary)}
.fa .pg-b>div>span:last-child{margin-top:8px}

/* Journey (journey_screen.dart, light) */
.fa .jl{position:absolute;left:0;right:0;top:56px;bottom:0;overflow:hidden;padding:8px 16px 28px}
.fa .jr-hero{border-radius:24px;background:var(--high);padding:24px 20px 20px;display:flex;flex-direction:column;align-items:center;text-align:center}
.fa .jr-flb{align-self:stretch;height:104px;display:flex;align-items:center;justify-content:center}
.fa .jr-flc{padding:8px;border-radius:50%}
.fa .jr-lv{margin-top:8px;color:var(--primary);font-weight:600;letter-spacing:1.2px}
.fa .jr-xp{align-self:stretch;height:10px;margin-top:16px;border-radius:99px;background:rgba(46,158,82,.16);overflow:hidden}
.fa .jr-xp i{display:block;height:100%;width:0;background:var(--primary)}
.fa .jr-xr{align-self:stretch;display:flex;justify-content:space-between;margin-top:8px;color:var(--onVar)}
.fa .jr-sec{padding:0 0 8px 2px;margin-top:22px;color:var(--onVar)}
.fa .jr-tiers{border-radius:20px;background:var(--high);padding:16px 8px 14px}
.fa .jr-row{display:flex;align-items:flex-end}
.fa .jr-tier{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;opacity:.7}
.fa .jr-tier.on{opacity:1}
.fa .jr-tier span{margin-top:4px;color:var(--onVar);font-weight:400;white-space:nowrap}
.fa .jr-tier.on span{font-weight:600}
.fa .jr-cap{padding-top:12px;text-align:center;color:var(--onVar)}
.fa .jr-sec2{margin-top:24px;padding:0 0 4px 2px;color:var(--onVar)}
.fa .jr-path{position:relative;display:flex;flex-direction:column}
.fa .jr-path::before{content:"";position:absolute;left:23px;top:28px;bottom:28px;width:2px;background:rgba(65,73,65,.22)}
.fa .pr{position:relative;display:flex;align-items:center;margin:3px 0;padding:4px 12px 4px 0}
.fa .pr.cur{padding:6px 12px 6px 0;border-radius:16px;background:rgba(46,158,82,.1)}
.fa .pr.nr{opacity:.6}
.fa .pb{flex:none;width:48px;display:flex;justify-content:center}
.fa .pbd{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--primary);color:#fff}
.fa .pr.cur .pbd,.fa .pbd.cur{width:46px;height:46px;border:3px solid rgba(46,158,82,.3)}
.fa .pr.nr .pbd{background:var(--high);border:1px solid rgba(193,201,190,.6);color:rgba(65,73,65,.7)}
.fa .pbd svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}
.fa .pr.cur .pbd svg,.fa .pbd.cur svg{width:24px;height:24px}
.fa .prt{flex:1;min-width:0;margin-left:6px}
.fa .prt b{display:block;font-weight:400;color:var(--on)}
.fa .pr.cur .prt b{font-weight:600}
.fa .prt i{display:block;font-style:normal;color:var(--primary);font-weight:500}
.fa .prx{flex:none;color:var(--onVar)}

/* Library room (library_screen.dart) + the scan banner (full_scan.dart, idle) */
.fa .lb{padding:12px 20px 0}
.fa .lb-hd{display:flex;align-items:center;height:48px;padding-left:2px;margin-bottom:10px}
.fa .lb-hd .t-hs{flex:1}
.fa .lb-tiles{display:flex;gap:12px}
.fa .lb-t{position:relative;flex:1;min-width:0;aspect-ratio:1;border-radius:22px;background:var(--high);overflow:hidden}
.fa .lb-m{position:absolute;inset:0;display:grid;grid-template:1fr 1fr/1fr 1fr;gap:2px}
.fa .lb-m>span{min-width:0;min-height:0;display:flex;align-items:center}
.fa .lb-m img{width:100%;height:auto;max-height:100%;object-fit:cover;display:block}
.fa .lb-fb{display:flex;align-items:center;justify-content:center;color:rgba(65,73,65,.6)}
.fa .lb-fb svg{width:34px;height:34px}
.fa .lb-bar{position:absolute;left:0;right:0;bottom:0;padding:9px 12px 10px;background:rgba(0,0,0,.55);color:#fff}
.fa .lb-bar span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fa .lb-bar .t-ts{font-weight:600;color:#fff}
.fa .lb-bar .t-ls{color:rgba(255,255,255,.7)}
.fa .lb-bl{margin-top:12px;padding:14px;border-radius:22px;background:var(--high);display:flex;align-items:center}
.fa .lb-bx{flex:none;width:96px;height:64px;border-radius:14px;background:rgba(46,158,82,.12);display:flex;align-items:center;justify-content:center;color:var(--primary)}
.fa .lb-bx svg{width:30px;height:30px}
.fa .lb-bc{flex:1;min-width:0;margin-left:14px}
.fa .lb-bc span{display:block}
.fa .lb-bc .t-bs{margin-top:2px}
.fa .lb-bl>svg{width:24px;height:24px}
.fa .lb .sb{margin-top:32px}
.fa .lb-ft{display:block;margin-top:4px}
.fa .sb{margin:14px 16px 4px;padding:18px;border-radius:18px;background:rgba(46,158,82,.1);border:1px solid rgba(46,158,82,.25)}
.fa .sb-r{display:flex;align-items:center}
.fa .sb-i{flex:none;width:22px;height:22px;color:var(--primary)}
.fa .sb-i svg{width:22px;height:22px}
.fa .sb-r .t-ts{flex:1;margin-left:8px;font-weight:600}
.fa .sb-b{display:block;margin-top:8px;line-height:1.4}
.fa .sb-btn{margin-top:14px;padding:0 24px 0 16px}
.fa .sb-btn svg{width:18px;height:18px;margin-right:8px}

/* Collection (CollectionView, empty) */
.fa .cv{position:absolute;left:0;right:0;top:56px;bottom:0;display:flex;flex-direction:column;overflow:hidden}
.fa .cv-hd{flex:none;display:flex;align-items:center;padding:10px 16px 12px}
.fa .cv-n{flex:1;min-width:0;line-height:0;white-space:nowrap}
.fa .cv-n span{display:inline-block;white-space:pre}
.fa .cv-n .t-ds{font-weight:700}
.fa .cv-lv{flex:none;margin-left:2px;padding:7px 12px;border-radius:99px;background:var(--high);display:flex;align-items:center}
.fa .cv-f{width:20px;height:20px}
.fa .cv-lv .t-lm{margin-left:7px}
.fa .cv-e{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 24px 24px;text-align:center}
.fa .cv-ct{position:relative;flex:none;width:220px;height:132px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--primary)}
.fa .cv-dash{position:absolute;left:0;top:0;overflow:visible}
.fa .cv-dash rect{fill:none;stroke:var(--primary);stroke-width:1.5;stroke-dasharray:6 5}
.fa .cv-ct>svg:not(.cv-dash){width:32px;height:32px}
.fa .cv-ct .t-ll{margin-top:8px}
.fa .cv-e .t-tl{margin-top:18px}
.fa .cv-e .t-bm{margin-top:6px}

/* New album (TrainableCreateScreen, _StepRail, _TypeCard) */
.fa .ca{position:absolute;left:0;right:0;top:56px;bottom:0;overflow:hidden;padding:8px 16px 24px}
.fa .rail{display:flex;justify-content:center;padding:6px 0}
.fa .rail i{width:26px;height:5px;margin:0 4px;border-radius:99px;background:#C1C9BE}
.fa .rail i.on{background:var(--primary)}
.fa .ca-t{padding:12px 4px 14px}
.fa .tc{display:flex;align-items:center;padding:16px;margin-bottom:12px;border-radius:16px;background:var(--high)}
.fa .tc-a{flex:none;width:48px;height:48px;border-radius:50%;background:rgba(46,158,82,.16);color:var(--primary);display:flex;align-items:center;justify-content:center}
.fa .tc-a svg{width:24px;height:24px}
.fa .tc-c{flex:1;min-width:0;margin-left:16px}
.fa .tc-c span{display:block}
.fa .tc-c .t-tm{font-weight:600}
.fa .tc-c .t-bs{margin-top:2px}

/* the media sheet (M3 modal bottom sheet with the theme's drag handle) */
.fa .sh-l{position:absolute;inset:0;z-index:1;visibility:hidden}
.fa .sh-scrim{position:absolute;inset:0;background:rgba(0,0,0,.54)}
.fa .sh{position:absolute;left:0;right:0;bottom:0;border-radius:28px 28px 0 0;background:var(--high)}
.fa .sh-h{height:48px;display:flex;align-items:center;justify-content:center}
.fa .sh-h i{width:32px;height:4px;border-radius:2px;background:var(--onVar)}
.fa .sh-t{padding:18px 20px 6px}
.fa .sh-r{height:56px;display:flex;align-items:center;padding:0 24px 0 16px}
.fa .sh-r svg{width:24px;height:24px;color:var(--primary)}
.fa .sh-r .t-bl{margin-left:16px}
.fa .sh-e{height:8px}

/* the photo picker (TrainableSeedScreen + photo_grid.dart) */
.fa .sd-nx{flex:none;min-width:64px;height:40px;padding:0 12px;display:flex;align-items:center;justify-content:center;color:rgba(24,29,24,.38)}
.fa .sd-nx.on{color:var(--primary)}
.fa .sd-top{flex:none;padding-top:8px}
.fa .sd-r{display:flex;align-items:center;padding:8px 16px 4px}
.fa .sd-note{flex:1;min-width:0;font:400 13px/1.4286 FaRoboto,Roboto,sans-serif;letter-spacing:.25px;color:var(--onVar)}
.fa .sd-pill{flex:none;padding:5px 10px;border-radius:99px;font:400 12px/1.4286 FaRoboto,Roboto,sans-serif;letter-spacing:.25px}
.fa .sd-h{display:flex;align-items:center;padding:0 16px 4px}
.fa .sd-h svg{width:14px;height:14px;color:var(--primary);margin-right:6px}
.fa .sd-h span{flex:1;min-width:0;font:400 12px/1.4286 FaRoboto,Roboto,sans-serif;letter-spacing:.25px;color:var(--onVar)}
.fa .sd-tl{flex:1;min-height:0;overflow:hidden}
.fa .sd-day{padding:18px 14px 8px;font-weight:600}
.fa .sd-g{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:0 2px}
.fa .pt{position:relative;aspect-ratio:1;background:var(--high);overflow:hidden}
.fa .pt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fa .pt-w{position:absolute;inset:0;background:rgba(46,158,82,.36);display:none}
.fa .pt-ok{position:absolute;right:6px;top:6px;width:22px;height:22px;border-radius:50%;background:var(--primary);color:#fff;display:none;align-items:center;justify-content:center}
.fa .pt-ok svg{width:15px;height:15px}
.fa .pt-cr{position:absolute;left:10px;bottom:10px;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:none;align-items:center;justify-content:center}
.fa .pt-cr svg{width:15px;height:15px}
.fa .pt.sel .pt-w{display:block}.fa .pt.sel .pt-ok,.fa .pt.sel .pt-cr{display:flex}

/* the frame / face box (crop_picker.dart) */
.fa .fa-scr.cp{background:#000}
.fa .cp .ab-lead,.fa .cp .ab h1,.fa .cp .ib48{color:#fff}
.fa .cp-hint{flex:none;padding:4px 20px 10px;text-align:center;color:rgba(255,255,255,.8)}
.fa .cp-a{position:relative;flex:1;min-height:0;overflow:hidden}
.fa .cp-img{position:absolute;display:block}
.fa .cp-dim{position:absolute;overflow:visible}
.fa .cp-dim path{fill:rgba(0,0,0,.5)}
.fa .cp-face{position:absolute;border:2px solid rgba(255,255,255,.85);border-radius:10px}
.fa .cp-box{position:absolute;border:3px solid var(--primary);border-radius:6px}
.fa .cp-x{position:absolute;top:-5px;left:calc(50% - 14px);width:28px;height:28px;display:flex;align-items:center;justify-content:center}
.fa .cp-x svg{width:22px;height:22px;padding:4px;border-radius:50%;background:rgba(0,0,0,.7);color:#fff}
.fa .cp-hd{position:absolute;width:22px;height:22px;border-radius:50%;background:var(--primary);border:3px solid #fff}
.fa .cp-btns{flex:none;display:flex;gap:12px;padding:8px 16px 12px}
.fa .cp-whole,.fa .cp-use{flex:1;height:56px;border-radius:28px;display:flex;align-items:center;justify-content:center;white-space:nowrap}
.fa .cp-whole{border:1px solid rgba(255,255,255,.4);color:#fff}

/* the dark theme (app/theme.dart dark: true-dark surface #0C0C0E, container #17171A; roles as the site replica apps/flick.html) */
.fa.fa-dark{--surface:#0C0C0E;--high:#17171A;--on:#DFE4DC;--onVar:#C1C9BE;--outline:#8B9389}
.fa.fa-dark .dk-trash{color:rgba(193,201,190,.45)}
.fa.fa-dark .jr-path::before{background:rgba(193,201,190,.22)}
.fa.fa-dark .pr.nr .pbd{border-color:rgba(65,73,65,.6);color:rgba(193,201,190,.7)}
.fa.fa-dark .lb-fb{color:rgba(193,201,190,.6)}
.fa.fa-dark .rail i{background:#414941}
.fa.fa-dark .sd-nx{color:rgba(223,228,220,.38)}
.fa.fa-dark .rail i.on{background:var(--primary)}
.fa.fa-dark .sd-nx.on{color:var(--primary)}