/* Welcome Discoveries (Nov 11, 2026): homepage lesson card + phone-shaped MyDopa preview.
   Card = approved homepage mockup (cover provisional). Phone screens reuse the Stage 3 Flutter
   design: tokens from lib/design/tokens (ground #06000D, surface #0F0C1C, purple #A855F7,
   amber #FFB020), Playfair Display / DM Sans, ambient bloom, four-tab bar + amber plus. */

/* ───────────── Homepage card ───────────── */
.wd-card{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:264px minmax(0,1fr);gap:40px;align-items:center;
  width:min(972px,calc(100vw - 48px));margin:44px 0 8px calc(50% - min(486px,50vw - 24px));padding:28px 32px 28px 30px;text-align:left;
  border-radius:22px;border:1.5px solid rgba(199,155,250,.55);background:linear-gradient(135deg,rgba(32,20,52,.86),rgba(18,11,32,.9) 60%,rgba(24,14,40,.88));
  box-shadow:0 0 0 1px rgba(168,85,247,.08),0 30px 80px rgba(8,2,20,.55);transition:border-color .25s,transform .25s,box-shadow .25s;
  font-family:'DM Sans',system-ui,sans-serif;color:#FAFAF7;opacity:0;animation:rise .7s ease forwards .75s;position:relative;z-index:2}
.wd-card:hover{border-color:rgba(199,155,250,.9);transform:translateY(-2px);box-shadow:0 0 0 1px rgba(168,85,247,.2),0 34px 90px rgba(8,2,20,.6),0 0 60px rgba(168,85,247,.16)}
.wd-card:focus-visible{outline:3px solid #FFB020;outline-offset:4px}
.wd-cover{position:relative;display:block;aspect-ratio:1;border-radius:16px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.wd-cover img{display:block;width:100%;height:100%;object-fit:cover}
.wd-cover-t,.wd-cover-n{position:absolute;top:7.5%;font-family:'Playfair Display',Georgia,serif;color:#2A1B3D;line-height:1}
.wd-cover-t{left:7%;font-weight:700;font-size:17px;letter-spacing:-.01em}
.wd-cover-n{right:7%;font-style:italic;font-weight:700;font-size:21px}
.wd-body{display:flex;flex-direction:column;min-width:0}
.wd-eb{font-weight:600;font-size:14px;letter-spacing:.28em;text-transform:uppercase;color:#A855F7}
.wd-h{margin-top:12px;font:700 36px/1.15 'Playfair Display',Georgia,serif;letter-spacing:-.01em;color:#FAFAF7}
.wd-sub{margin-top:8px;font-size:18px;line-height:1.4;color:#C9BED8}
.wd-player{display:flex;align-items:center;gap:22px;margin-top:26px}
.wd-play{flex:none;width:62px;height:62px;border-radius:50%;background:#FFB020;color:#17131F;display:grid;place-items:center;box-shadow:0 8px 24px rgba(255,176,32,.28);transition:transform .25s}
.wd-play svg{width:26px;height:26px;margin-left:3px}
.wd-card:hover .wd-play{transform:scale(1.06)}
.wd-wave{flex:1;min-width:0;height:44px;display:flex;align-items:center;gap:3px;overflow:hidden}
.wd-wave i{flex:1 0 2px;max-width:3px;height:var(--h);min-height:4px;border-radius:2px;background:rgba(199,155,250,.72)}
.wd-rate{flex:none;font-weight:600;font-size:18px;color:#A855F7}
.wd-times{display:flex;justify-content:space-between;margin:6px 46px 0 84px;font-size:16px;color:#C9BED8}
.wd-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px;font-size:17px;color:#E6DEF0}
.wd-voices{color:#C9BED8}
.wd-voices b{font-weight:500;color:#FAFAF7;padding-bottom:5px;border-bottom:3px solid #A855F7;margin-right:4px}
.wd-voices span{margin-left:4px}
@media (max-width:760px){
  .wd-card{grid-template-columns:112px minmax(0,1fr);gap:8px 18px;padding:18px;margin-top:36px;align-items:start}
  .wd-body{display:contents}
  .wd-cover{grid-row:1/4}
  .wd-eb{font-size:11px;letter-spacing:.22em;grid-column:2}
  .wd-h{grid-column:2;margin-top:0;font-size:23px}
  .wd-sub{grid-column:2;margin-top:0;font-size:15px}
  .wd-player,.wd-times,.wd-foot{grid-column:1/-1}
  .wd-player{margin-top:12px;gap:14px}.wd-play{width:52px;height:52px}
  .wd-times{margin:2px 34px 0 66px;font-size:14px}.wd-foot{margin-top:10px;font-size:14px}
  .wd-cover-t{font-size:9px}.wd-cover-n{font-size:12px}}
@media (prefers-reduced-motion:reduce){.wd-card{animation:none;opacity:1;transition:none}}

/* ───────────── Modal over the dimmed site ───────────── */
html.wd-lock,html.wd-lock body{overflow:hidden}
.wd-modal{position:fixed;inset:0;z-index:2147483001;display:flex;align-items:center;justify-content:center;gap:12px;flex-direction:column;
  background:rgba(6,0,13,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .25s;
  padding:max(20px,env(safe-area-inset-top,0px)) 16px max(16px,env(safe-area-inset-bottom,0px))}
.wd-modal.on{opacity:1}
.wd-modal[hidden]{display:none!important}
.wd-close{position:absolute;top:max(18px,env(safe-area-inset-top,0px));right:20px;display:inline-flex;align-items:center;gap:8px;padding:10px 16px 10px 14px;border-radius:999px;
  border:1px solid rgba(201,190,216,.3);background:rgba(15,12,28,.8);color:#FAFAF7;font:600 14px/1 'DM Sans',system-ui,sans-serif;cursor:pointer}
.wd-close svg{width:18px;height:18px}
.wd-close:hover{border-color:rgba(201,190,216,.6)}
.wd-close:focus-visible,.wp :focus-visible{outline:2px solid #FFB020;outline-offset:2px}
.wd-cap{margin:0;font:500 12px/16px 'DM Sans',system-ui,sans-serif;color:#C9BED8;text-align:center;max-width:390px}
.wd-frame{--ph-h:min(844px,calc(100dvh - 76px));height:var(--ph-h);width:calc(var(--ph-h) * 390 / 844);min-width:320px;border-radius:46px;padding:10px;background:#1A1622;
  box-shadow:0 0 0 1px #2C2638,0 40px 100px rgba(0,0,0,.6);flex:none}
.wd-frame>.wp{border-radius:37px}
@media (max-width:560px),(max-height:560px) and (pointer:coarse){
  .wd-modal{padding:0;background:#06000D;backdrop-filter:none}
  .wd-frame{width:100vw;height:100dvh;min-width:0;border-radius:0;padding:0;background:none;box-shadow:none}
  .wd-frame>.wp{border-radius:0}
  .wd-cap,.wd-close{display:none}}

/* ───────────── The phone app (base rules; Light theme overrides follow below) ───────────── */
.wp{--bg:#06000D;--card:#0F0C1C;--card2:#141022;--ink:#FAFAF7;--ink2:#C9BED8;--ink3:#8D8299;--purple:#A855F7;--pcore:#7B2FBE;--amber:#FFB020;--rose:#FF8CBA;
  --line:rgba(168,85,247,.22);--div:rgba(201,190,216,.12);--display:'Playfair Display',Georgia,serif;--body:'DM Sans',system-ui,sans-serif;
  position:relative;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font:400 15px/1.45 var(--body);text-align:left;isolation:isolate;
  -webkit-font-smoothing:antialiased;letter-spacing:normal}
.wp *{box-sizing:border-box}
.wp button{font:inherit;color:inherit}
.wp h1,.wp h2,.wp h3,.wp h4,.wp h5,.wp p{letter-spacing:normal}
.wp .bloom{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(90% 38% at 62% 96%,rgba(255,140,24,.20),transparent 70%),radial-gradient(120% 50% at 30% 0%,rgba(76,29,149,.30),transparent 65%),linear-gradient(180deg,#0E0620 0%,#06000D 55%)}
.wp .shell{position:absolute;inset:0;display:flex;flex-direction:column;z-index:1}
.wp .strip{display:none}
@media (max-width:560px),(max-height:560px) and (pointer:coarse){
  .wp .strip{display:flex;justify-content:space-between;align-items:center;padding:calc(6px + env(safe-area-inset-top,0px)) 12px 6px 22px;font:600 12px/16px var(--body);color:var(--ink2);border-bottom:1px solid var(--div);position:relative;z-index:30;background:rgba(6,0,13,.9)}
  .wp .strip button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;color:var(--ink);font:600 13px/1 var(--body);border:1px solid var(--div)}
  .wp .strip svg{width:16px;height:16px}}
.wp .views{flex:1;min-height:0;position:relative}
.wp .view{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding:22px 24px 110px}
.wp .view::-webkit-scrollbar{display:none}
.wp .ctx{margin:0;font:500 12px/16px var(--body);color:var(--ink2)}
.wp .title{margin:2px 0 0;font:700 30px/36px var(--display);letter-spacing:-.005em}
.wp .title span{color:var(--purple)}
.wp .note{margin:0;font:400 13px/19px var(--body);color:var(--ink3)}
.wp .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;padding:12px 18px;border-radius:14px;border:1.5px solid var(--purple);background:transparent;color:var(--purple);font:600 16px/1.2 var(--body);cursor:pointer;text-align:center}
.wp .btn.fill{background:var(--pcore);border-color:var(--pcore);color:#fff}
.wp .btn.small{min-height:40px;width:auto;padding:8px 14px;font-size:14px;border-radius:12px}
.wp .btn.quiet{border-color:var(--div);color:var(--ink2)}
.wp .btn:disabled{opacity:.45;cursor:default}
.wp .link{all:unset;cursor:pointer;color:var(--purple);font:600 14px/20px var(--body)}

.wp input[type=text],.wp input[type=email],.wp textarea{width:100%;border-radius:14px;border:1.5px solid rgba(168,85,247,.35);background:rgba(15,12,28,.85);color:var(--ink);font:400 16px/1.45 var(--body);padding:13px 14px;resize:none;margin:0}
.wp input::placeholder,.wp textarea::placeholder{color:var(--ink3)}
.wp input:focus,.wp textarea:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(168,85,247,.2)}
.wp .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* MyDiscoveries */
.wp .lcard{margin-top:22px;padding:12px 12px 18px;border-radius:20px;border:1.5px solid var(--purple);background:linear-gradient(180deg,rgba(25,14,44,.9),rgba(14,9,26,.92));box-shadow:0 0 30px rgba(168,85,247,.12)}
.wp .lcard.done{border-color:var(--amber)}
.wp .lcard img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px}
.wp .lcard .in{padding:16px 8px 0}
.wp .lab{display:flex;align-items:center;gap:8px;margin:0;font:600 14px/18px var(--body);color:var(--purple)}
.wp .lab i{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#FFE29A,#FFB020 55%,#B86E00);box-shadow:0 0 8px rgba(255,176,32,.6)}
.wp .lh{margin:8px 0 0;font:700 30px/36px var(--display)}
.wp .lh em{font-style:normal;color:var(--amber)}
.wp .lmeta{margin:6px 0 16px;font:500 14px/20px var(--body);color:var(--ink2)}

.wp .dots{display:flex;gap:4px;margin-bottom:6px}
.wp .dots i{width:6px;height:6px;border-radius:50%;background:rgba(201,190,216,.3)}
.wp .dots i.done{background:var(--purple)}.wp .dots i.cur{background:var(--amber)}

.wp .prow{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:12px;width:100%;padding:12px 4px;border-top:1px solid var(--div)}
.wp .prow .ck{width:28px;height:28px;flex:none;border-radius:50%;display:grid;place-items:center;font:700 13px/1 var(--body);border:1.5px solid rgba(201,190,216,.3);color:var(--ink2)}
.wp .prow.done .ck{background:var(--purple);border-color:var(--purple);color:#17131F}
.wp .prow.cur .ck{border-color:var(--amber);color:var(--amber)}
.wp .prow .nm{flex:1;font:600 15px/20px var(--body)}
.wp .prow .nm small{display:block;font:500 12px/16px var(--body);color:var(--ink2)}
.wp .prow svg{width:18px;height:18px;color:var(--ink3);flex:none}

/* Reader */
.wp .reader{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;background:var(--bg)}
.wp .reader>*{position:relative;z-index:1}
.wp .reader>.bloom{position:absolute;z-index:0}
.wp .rtop{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;padding:14px 18px 6px}
.wp .rtop p{margin:0;text-align:center;font:600 12px/16px var(--body);color:var(--ink2)}
.wp .round{all:unset;box-sizing:border-box;width:44px;height:44px;border-radius:50%;border:1px solid var(--div);background:rgba(15,12,28,.6);display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.wp .round svg{width:20px;height:20px}
.wp .rbody{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;padding:10px 24px 28px}
.wp .rbody::-webkit-scrollbar{display:none}
.wp .rlab{margin:0;font:500 13px/18px var(--body);color:var(--purple)}
.wp .rh{margin:4px 0 12px;font:900 30px/36px var(--display);color:var(--amber)}
.wp .seg{display:inline-flex;padding:3px;border-radius:12px;background:var(--card2);border:1px solid var(--div)}
.wp .seg button{all:unset;cursor:pointer;padding:8px 14px;border-radius:9px;font:600 13px/1 var(--body);color:var(--ink2)}
.wp .seg button[aria-pressed=true]{background:#2A2140;color:var(--ink)}
.wp .seg button:focus-visible{outline:2px solid #FFB020}
.wp .vrow{display:flex;align-items:center;gap:10px;margin-bottom:18px;font:500 13px/16px var(--body);color:var(--ink2)}
.wp .para{margin:0 0 14px -14px;padding-left:12px;border-left:2px solid transparent;font:400 17px/28px var(--body);color:rgba(201,190,216,.6);transition:color .3s;cursor:pointer}
.wp .para.lead{font:500 21px/30px var(--display);color:var(--ink)}
.wp .para.now{color:var(--ink);border-left-color:var(--amber)}
.wp .finish{margin-top:22px}
.wp .rplayer{padding:10px 24px 14px;border-top:1px solid var(--div);background:rgba(6,0,13,.9)}
.wp .seek{width:100%;margin:0;accent-color:var(--purple);height:24px;cursor:pointer}
.wp .times{display:flex;justify-content:space-between;font:500 12px/16px var(--body);color:var(--ink2);font-variant-numeric:tabular-nums}
.wp .ctrls{display:grid;grid-template-columns:repeat(5,1fr);align-items:center;justify-items:center;margin-top:4px}
.wp .ic{all:unset;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:var(--ink2)}
.wp .ic svg{width:24px;height:24px}
.wp .ic.rate{font:700 14px/1 var(--body);color:var(--ink)}
.wp .bigplay{all:unset;cursor:pointer;width:62px;height:62px;border-radius:50%;background:var(--pcore);display:grid;place-items:center;color:#fff;box-shadow:0 8px 24px rgba(123,47,190,.45)}
.wp .bigplay svg{width:26px;height:26px}
.wp .bigplay.pulse{animation:wpPulse 1.6s ease-in-out infinite}
@keyframes wpPulse{50%{box-shadow:0 0 0 12px rgba(168,85,247,.2),0 8px 24px rgba(123,47,190,.45)}}
.wp .rhint{margin:4px 0 0;text-align:center;font:500 12px/16px var(--body);color:var(--ink2)}
.wp .rhint.err{color:#FFB4C8;font-weight:600}

.wp form.su{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.wp .fine{margin:0;font:400 12px/17px var(--body);color:var(--ink3)}
.wp .fine a{color:var(--ink2)}
.wp .msg{margin:0;font:500 13px/19px var(--body)}
.wp .ok{color:#B9F5C9}.wp .warn{color:#FFD58A}

.wp .h3{margin:0 0 10px;font:700 21px/26px var(--display)}

/* Sheets inside the phone */
.wp .scrim{position:absolute;inset:0;z-index:40;background:rgba(0,0,0,.5);opacity:0;transition:opacity .25s}
.wp .scrim.on{opacity:1}
.wp .sheet{position:absolute;left:0;right:0;bottom:0;max-height:90%;z-index:41;display:flex;flex-direction:column;border-radius:28px 28px 0 0;
  background:rgba(20,13,38,.94);backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);border-top:1px solid rgba(168,85,247,.28);
  transform:translateY(105%);transition:transform .34s cubic-bezier(.22,1,.36,1)}
.wp .sheet.on{transform:none}
.wp .sh-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:16px 22px 6px}
.wp .sh-h h3{margin:4px 0 0;font:700 22px/28px var(--display);text-wrap:balance}
.wp .sh-b{overflow-y:auto;padding:6px 22px calc(26px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:12px}
.wp .x{all:unset;cursor:pointer;flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--div);display:grid;place-items:center}
.wp .x svg{width:18px;height:18px}
.wp .toast{position:absolute;left:50%;bottom:100px;z-index:60;transform:translate(-50%,12px);opacity:0;transition:.25s;width:max-content;max-width:86%;padding:10px 14px;border-radius:12px;background:#2A2140;color:var(--ink);font:500 13px/18px var(--body);box-shadow:0 10px 30px rgba(0,0,0,.4);pointer-events:none;text-align:center}
.wp .toast.on{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.wp .sheet,.wp .scrim,.wp .toast,.wd-modal{transition:none}.wp .bigplay.pulse{animation:none}}

/* Unsubscribe panel (site level, not the phone) */
.wd-panel{width:min(440px,100%);padding:28px;border-radius:22px;background:#0F0C1C;border:1px solid rgba(168,85,247,.3);color:#FAFAF7;font:400 15px/1.5 'DM Sans',system-ui,sans-serif;text-align:left}
.wd-panel h2{margin:0 0 10px;font:700 24px/30px 'Playfair Display',Georgia,serif}
.wd-panel p{margin:0 0 16px;color:#C9BED8}
.wd-panel .row{display:flex;gap:10px;flex-wrap:wrap}
.wd-panel button{cursor:pointer;padding:12px 18px;border-radius:12px;border:1.5px solid #A855F7;background:transparent;color:#A855F7;font:600 15px/1 'DM Sans',system-ui,sans-serif}
.wd-panel button.fill{background:#7B2FBE;border-color:#7B2FBE;color:#fff}

/* Focus and seek bar */

.wp [tabindex="-1"]:focus{outline:none}
.wp .seek{-webkit-appearance:none;appearance:none;background:transparent}
.wp .seek::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--purple) var(--f,0%),rgba(201,190,216,.2) var(--f,0%))}
.wp .seek::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;margin-top:-6px;border-radius:50%;background:var(--purple);box-shadow:0 0 0 4px rgba(168,85,247,.25)}
.wp .seek::-moz-range-track{height:4px;border-radius:2px;background:rgba(201,190,216,.2)}
.wp .seek::-moz-range-progress{height:4px;border-radius:2px;background:var(--purple)}
.wp .seek::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:var(--purple)}
.wp .seek:focus-visible{outline:2px solid #FFB020;outline-offset:4px;border-radius:4px}

/* ═════════ Approved Stage 3 LIGHT theme for the phone (lib/design/tokens/mydopa_colors.dart `light`;
   Light reference stills rendered from the Flutter gallery). The website around it stays dark. ═════════ */
.wp{--bg:#FAFAF7;--card:#FFFFFF;--card2:#EEEBEF;--ink:#1B1424;--body-ink:#17131F;--ink2:#5E5868;--ink3:#6B6770;--purple:#7B2FBE;--pcore:#7B2FBE;--amber:#FFB020;
  --line:#ECE7F1;--div:rgba(23,19,31,.09);--sec-border:#D9C4EF;color-scheme:light}
.wp .bloom{background:radial-gradient(70% 34% at 72% 100%,rgba(255,176,32,.20),transparent 72%),radial-gradient(120% 45% at 40% 0%,rgba(243,232,255,.95),transparent 70%),linear-gradient(180deg,#F5F0FA 0%,#FAFAF7 45%,#FCF7F0 100%)}
@media (max-width:560px),(max-height:560px) and (pointer:coarse){.wp .strip{background:rgba(250,250,247,.97)}}
.wp input[type=text],.wp input[type=email],.wp textarea{background:#FFFFFF;border-color:var(--sec-border);color:var(--body-ink)}
.wp input:focus,.wp textarea:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(123,47,190,.14)}
.wp .btn{border-color:var(--sec-border);background:#FFFFFF;color:var(--purple)}
.wp .btn.fill{background:var(--pcore);border-color:var(--pcore);color:#FFFFFF}
.wp .btn.quiet{background:#FFFFFF;border-color:var(--line);color:var(--ink2)}
.wp .lcard{background:linear-gradient(180deg,#FBF7FE,#F7F1FB);border-color:rgba(123,47,190,.55);box-shadow:0 10px 30px rgba(59,20,102,.07)}
.wp .lcard .btn{border-color:var(--purple)}
.wp .dots i{background:rgba(23,19,31,.15)}
.wp .prow .ck{border-color:rgba(23,19,31,.2)}
.wp .prow.done .ck{color:#FFFFFF}
.wp .round{background:#FFFFFF;border-color:rgba(23,19,31,.10);color:#17131F}
.wp .seg{background:var(--card2);border-color:transparent}
.wp .seg button[aria-pressed=true]{background:#FFFFFF;color:var(--ink);box-shadow:0 1px 3px rgba(27,20,36,.12)}
.wp .para{color:#8E8796}
.wp .para.lead,.wp .para.now{color:var(--body-ink)}
.wp .rplayer{background:rgba(250,250,247,.94)}
.wp .seek::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--purple) var(--f,0%),rgba(23,19,31,.12) var(--f,0%))}
.wp .seek::-moz-range-track{background:rgba(23,19,31,.12)}
.wp .ic{color:#17131F}.wp .ic.rate{color:#17131F}
.wp .bigplay{box-shadow:0 8px 22px rgba(123,47,190,.28)}
.wp .rhint.err{color:#DC2626}
.wp .ok{color:#15803D}.wp .warn{color:#9A5B00}

.wp .scrim{background:rgba(23,19,31,.22)}
.wp .sheet{background:rgba(255,255,255,.96);border-top-color:rgba(123,47,190,.16);box-shadow:0 -10px 40px rgba(59,20,102,.10)}
.wp .toast{background:#1B1424;color:#FAFAF7}
.wp .fine{color:var(--ink3)}.wp .fine a{color:var(--ink2)}

/* Dopa: approved still, shown exactly as delivered (no filter, tint, blend or opacity). */

/* Separate email invitation (replaces the view; not a stacked panel) */
.wp .dialogv .inv{display:flex;flex-direction:column;justify-content:center;gap:14px;min-height:100%;padding:28px 26px}
.wp .saved-note{display:flex;align-items:center;gap:6px;margin:0;font:600 13px/18px var(--body);color:#15803D}
.wp .saved-note svg{width:16px;height:16px}
.wp .inv-h{margin:0;font:700 27px/33px var(--display);color:var(--ink);text-wrap:balance}

.wp .lcard img{height:auto}
.wp .toast{top:calc(64px + env(safe-area-inset-top,0px));bottom:auto;transform:translate(-50%,-8px)}
.wp .toast.on{transform:translate(-50%,0)}

/* ═════════ Approved ambient bloom, Light (lib/design/components/ambient_bloom.dart `_light`,
   finalized Oct 13, 2026; breath approved Oct 14): top purple oval 468×506 at top −300 px,
   bottom amber oval 546×675 at bottom −200 px, colours .30/.12/.04, 7 s breath that rises from
   the bottom edge (1.22× wide, 1.25× tall; intensity .45→1.45, held at .81 with Reduce Motion). ═════════ */
.wp .bloom{position:absolute;inset:0;overflow:hidden;background:#FAFAF7;pointer-events:none}
.wp .bloom::before,.wp .bloom::after{content:"";position:absolute;left:50%;border-radius:50%}
.wp .bloom::before{width:468px;height:506px;margin-left:-234px;top:-300px;
  background:radial-gradient(ellipse at 50% 0%,rgba(109,40,217,.08) 0%,rgba(123,47,190,.03) 40%,rgba(123,47,190,0) 70%)}
.wp .bloom::after{width:546px;height:675px;margin-left:-273px;bottom:-200px;transform-origin:50% 100%;
  background:radial-gradient(ellipse at 50% 100%,rgba(255,176,32,.435) 0%,rgba(255,107,0,.174) 30%,rgba(123,47,190,.058) 55%,rgba(123,47,190,0) 72%);
  opacity:.31;animation:wpBreath 7s ease-in-out infinite}
@keyframes wpBreath{0%,100%{opacity:.31;transform:scale(1,1)}50%{opacity:1;transform:scale(1.22,1.25)}}
@media (prefers-reduced-motion:reduce){.wp .bloom::after{animation:none;opacity:.56}}
/* Surfaces let the bloom through (translucent, as the app's translucent surfaces) */

.wp .lcard{background:linear-gradient(180deg,rgba(251,247,254,.78),rgba(247,241,251,.62));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.wp .rplayer{background:rgba(250,250,247,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top-color:rgba(23,19,31,.07)}

.wp .reader{background:transparent}
.wp .btn,.wp .btn.quiet{background:rgba(255,255,255,.72)}
.wp .btn.fill{background:var(--pcore)}

/* Amber label (AmberLabel, Light): ink chip #17131F at 90 %, amber hairline, 6 px corners, amber
   lettering. Never dark text on amber. */
.wp .saved-note{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;width:max-content;padding:4px 7px;border-radius:6px;
  background:rgba(23,19,31,.9);border:1px solid rgba(255,176,32,.4);color:#FFB020;font:700 12px/16px var(--body);letter-spacing:.02em;text-transform:none}
.wp .saved-note svg{width:14px;height:14px}

.wp .ok{color:var(--body-ink)}

/* Small layout helpers */
.wp .rnav{display:flex;justify-content:space-between;align-items:center;gap:16px}
.wp .rnav{margin-top:6px}
.wp .rnav .link{padding:6px 2px;font-size:14px}
.wp .link:disabled{color:var(--ink3);opacity:.6;cursor:default}

.wp .rhint:empty{display:none}

/* Dopa's welcome beside the phone (wide screens); exact approved still, no colour changes */
.wd-frame{position:relative}
.wd-intro{position:absolute;right:calc(100% + 28px);bottom:14%;width:230px;display:flex;flex-direction:column;align-items:center;gap:14px;pointer-events:none}
.wd-intro[hidden]{display:none}
.wd-intro img{width:150px;height:auto;display:block}
.wd-bubble{position:relative;pointer-events:auto;padding:14px 34px 14px 16px;border-radius:18px;background:#FFFFFF;color:#17131F;font:500 15px/21px 'DM Sans',system-ui,sans-serif;box-shadow:0 14px 40px rgba(0,0,0,.35)}
.wd-bubble::after{content:"";position:absolute;left:50%;bottom:-9px;margin-left:-9px;border:9px solid transparent;border-bottom:0;border-top-color:#FFFFFF}
.wd-bx{all:unset;cursor:pointer;position:absolute;top:8px;right:8px;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;color:#5E5868}
.wd-bx svg{width:14px;height:14px}
.wd-bx:focus-visible{outline:2px solid #FFB020}
@media (max-width:979px),(max-height:599px){.wd-intro{display:none}}
/* Phones: compact, dismissible, above the player */
.wp .mintro{display:flex;align-items:center;gap:10px;margin:0 16px 8px;padding:8px 8px 8px 10px;border-radius:16px;background:rgba(255,255,255,.8);border:1px solid var(--line);box-shadow:0 6px 20px rgba(59,20,102,.08)}
.wp .mintro img{width:40px;height:auto;flex:none;display:block}
.wp .mintro p{margin:0;flex:1;font:500 13px/18px var(--body);color:var(--body-ink)}
.wp .mintro .x{width:32px;height:32px}
/* Bloom stays visible: breath runs from the approved rest intensity (.81) to the peak (1.45);
   bars over the bloom are lighter so the warm light shows through them. */
.wp .bloom::after{opacity:.56;animation-name:wpBreath2}
@keyframes wpBreath2{0%,100%{opacity:.56;transform:scale(1,1)}50%{opacity:1;transform:scale(1.22,1.25)}}
.wp .rplayer{background:rgba(250,250,247,.28)}

.wp .mintro{background:rgba(255,255,255,.72)}
/* Calibrated against the Flutter Light reference still (pixel-sampled): the breath swings around it. */
.wp .bloom::after{background:radial-gradient(ellipse at 50% 100%,rgba(255,176,32,.50) 0%,rgba(255,107,0,.20) 30%,rgba(123,47,190,.067) 55%,rgba(123,47,190,0) 72%);opacity:.8;animation-name:wpBreath3}
@keyframes wpBreath3{0%,100%{opacity:.8;transform:scale(1,1)}50%{opacity:1;transform:scale(1.22,1.25)}}
@media (prefers-reduced-motion:reduce){.wp .bloom::after{animation:none;opacity:.88}}

/* Returning listeners: a discreet secondary link */
.wp details.ret{margin-top:2px}
.wp details.ret summary{list-style:none;cursor:pointer;width:max-content;font:500 13px/18px var(--body);color:var(--ink2);text-decoration:underline;text-underline-offset:3px}
.wp details.ret summary::-webkit-details-marker{display:none}
.wp details.ret[open] summary{margin-bottom:8px}
.wp .dialogv .inv{gap:16px}
.wp .btn svg{width:20px;height:20px;flex:none}
.wp .toast{white-space:normal;width:max-content;max-width:calc(100% - 40px)}

/* ═════════ Final scope (Nov 11): MyDiscoveries only ═════════ */
/* Desktop phone frame: exactly 390 CSS px of content inside a 10 px bezel. */
.wd-frame{width:410px;min-width:0;height:min(864px,calc(100dvh - 64px))}
@media (max-width:560px),(max-height:560px) and (pointer:coarse){.wd-frame{width:100vw;height:100dvh}}
.wp .view{padding:22px 24px 32px}
/* Home: lesson list on a translucent card so the bloom shows through */
.wp .lessons{margin-top:22px;padding:6px 14px 4px;border-radius:20px;border:1px solid var(--line);background:rgba(255,255,255,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 2px rgba(27,20,36,.04),0 10px 30px rgba(59,20,102,.05)}
.wp .lhead{display:flex;justify-content:space-between;align-items:baseline;padding:10px 2px 8px}
.wp .lhead .h3{margin:0;font-size:19px}
.wp .lrows .prow{padding:11px 2px}
.wp .lrows .prow:first-child{border-top:1px solid var(--div)}
.wp .prow .ck svg{width:15px;height:15px;color:#FFFFFF}
.wp .prow.cur{background:rgba(123,47,190,.06);border-radius:12px}
.wp .prow:focus-visible{outline:2px solid #FFB020;outline-offset:-2px;border-radius:12px}
/* Reader top: back · lesson count · Share lesson */
.wp .rtop{grid-template-columns:44px 1fr auto;gap:8px}
.wp .pill{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--sec-border);background:rgba(255,255,255,.72);color:var(--purple);font:600 13px/1 var(--body)}
.wp .pill svg{width:16px;height:16px}
.wp .pill:focus-visible{outline:2px solid #FFB020;outline-offset:2px}
.wp .rlab{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wp .rlab .saved-note{font-size:11px;line-height:14px;padding:3px 6px}
/* Replay from beginning sits between the times (not near ±15 s) */
.wp .times{align-items:center}
.wp .replay{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:999px;color:var(--purple);font:600 12px/16px var(--body)}
.wp .replay svg{width:14px;height:14px}
.wp .replay:focus-visible{outline:2px solid #FFB020}
/* Lesson navigation: three labelled buttons, clearly separate from the ±15 s icons */
.wp .rnav{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:10px}
.wp .lnav{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:4px;min-height:40px;padding:6px 8px;border-radius:12px;border:1px solid var(--sec-border);background:rgba(255,255,255,.66);color:var(--purple);font:600 12.5px/15px var(--body);text-align:center}
.wp .lnav svg{width:15px;height:15px;flex:none}
.wp .lnav:disabled{color:var(--ink3);border-color:var(--line);opacity:.55;cursor:default}
.wp .lnav:focus-visible{outline:2px solid #FFB020;outline-offset:2px}
.wp .ctrls{margin-top:2px}
.wp .rplayer{padding:8px 20px 14px}
@media (max-width:360px){.wp .lnav{font-size:11.5px;padding:6px 4px}.wp .pill span{display:none}.wp .pill{padding:0 10px}}
.wp .rnav{grid-template-columns:1.2fr 1fr 1fr;gap:6px}
.wp .lnav{gap:2px;padding:6px 4px;font-size:12px;white-space:nowrap}
.wp .lnav svg{width:13px;height:13px}

/* ═════════ One primary action per state; Dopa's first reveal (Nov 11, final pass) ═════════ */
.wp .bigplay.soft{width:48px;height:48px;background:rgba(123,47,190,.12);color:var(--purple);box-shadow:none}
.wp .nextwrap{position:relative;margin:10px 0 4px}
.wp .nextwrap[hidden]{display:none}
.wp .nextbig{all:unset;box-sizing:border-box;cursor:pointer;width:100%;min-height:52px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:16px;background:var(--pcore);color:#FFFFFF;font:700 16px/1.2 var(--body);box-shadow:0 8px 22px rgba(123,47,190,.28)}
.wp .nextbig svg{width:18px;height:18px}
.wp .nextbig:focus-visible{outline:2px solid #FFB020;outline-offset:3px}
.wp .nb-pointer{position:absolute;left:-18px;top:50%;margin-top:-9px;width:18px;height:18px;color:#FFB020;opacity:0}
.wp .nb-pointer svg{width:18px;height:18px;stroke-width:2.6}
.wp .nextwrap.cue .nb-pointer{opacity:1;animation:wdNudge .7s ease-in-out 2}
.wp .nextwrap.cue .nextbig{animation:wdPulse 1.3s ease-in-out 1}
@keyframes wdNudge{50%{transform:translateX(4px)}}
@keyframes wdPulse{50%{box-shadow:0 0 0 10px rgba(168,85,247,.22),0 8px 22px rgba(123,47,190,.28)}}
/* MyYesterday illustration inside the phone (replaces the lesson text briefly; player stays) */
.wp .reader.revealing .rbody{display:none}
/* Dopa beside the phone (desktop): bloom brightens, she rises, settles, greets */
@media (max-width:979px),(max-height:599px){.wd-reveal{display:none}}
@media (prefers-reduced-motion:reduce){
  .wp .nextwrap.cue .nb-pointer,.wp .nextwrap.cue .nextbig{animation:none}
}
.wp .exbadge{display:inline-flex;align-items:center;width:max-content;padding:4px 8px;border-radius:6px;background:rgba(23,19,31,.9);border:1px solid rgba(255,176,32,.4);color:#FFB020;font:700 11px/14px var(--body);letter-spacing:.06em;text-transform:uppercase}

/* ═════════ Lesson-end presentations: approved Light screen building blocks (from tag welcome-practice-previews-2026-11-11) ═════════ */
.wp .ytop{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.wp .plus{all:unset;cursor:pointer;width:56px;height:56px;border-radius:50%;background:var(--amber);color:#17131F;display:grid;place-items:center;box-shadow:0 10px 26px rgba(255,176,32,.35)}
.wp .plus svg{width:26px;height:26px}
.wp .plus.sm{width:44px;height:44px}
.wp .plus.sm svg{width:22px;height:22px}
.wp .thread{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.wp .dmsg{display:flex;gap:10px;align-items:flex-end}
.wp .dmsg img{width:54px;height:auto;flex:none}
.wp .bub{padding:13px 15px;border-radius:18px;background:var(--card);border:1px solid var(--div);font:400 16px/23px var(--body)}
.wp .bub small{display:block;margin-bottom:4px;font:600 11px/14px var(--body);color:var(--ink2)}
.wp .bub.dopa{border-bottom-left-radius:6px;font:500 17px/24px var(--display)}
.wp .bub.me{align-self:flex-end;max-width:86%;background:#1C1430;border-color:var(--line);border-bottom-right-radius:6px;white-space:pre-wrap}
.wp .bub.me .saved{display:block;margin-top:6px;font:600 11px/14px var(--body);color:var(--amber)}
.wp .kept{display:flex;align-items:center;gap:8px;margin-top:12px;font:600 14px/18px var(--body)}
.wp .kept i{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--ink2)}
.wp .kept i.on{background:var(--amber);border-color:var(--amber)}
.wp .hr{height:1px;background:var(--div);margin:18px 0}
.wp .h3{margin:0 0 10px;font:700 21px/26px var(--display)}
.wp .rowh{display:flex;justify-content:space-between;align-items:baseline;margin-top:22px}
.wp .rowh .h3{margin:0}
.wp .moment{padding:12px 14px;border-radius:14px;background:var(--card);border:1px solid var(--div);margin-top:10px}
.wp .moment p{margin:0;font:400 15px/22px var(--body);white-space:pre-wrap}
.wp .moment .mm{display:flex;justify-content:space-between;align-items:center;margin-top:6px;font:500 12px/16px var(--body);color:var(--ink2)}
.wp .moment .mm button{all:unset;cursor:pointer;color:var(--ink3);font:600 12px/16px var(--body)}
.wp .moment .feel{color:var(--ink2);font-style:italic}
.wp .rings{display:grid;grid-template-columns:116px minmax(0,1fr);gap:16px;align-items:center;margin-top:18px;padding:18px;border-radius:22px;background:linear-gradient(135deg,#1A1626,#14111E 60%,#17131F);border:1px solid var(--line)}
.wp .rings svg{width:116px;height:116px;display:block}
.wp .rw{display:flex;flex-direction:column}
.wp .rw .l{font:500 13px/17px var(--body);color:var(--c)}
.wp .rw .v{font:700 24px/28px var(--body);color:var(--c);font-variant-numeric:tabular-nums}
.wp .rw .v small{font:600 14px/18px var(--body);color:var(--ink2)}
.wp .rws{display:flex;flex-direction:column;gap:10px}
.wp .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.wp .tile{padding:14px 14px 16px;border-radius:20px;background:linear-gradient(160deg,#1A1626,#13101C);border:1px solid var(--line);display:flex;flex-direction:column;gap:4px;min-height:128px}
.wp .tile h5{margin:0;font:700 16px/20px var(--body)}
.wp .tile .big{font:700 26px/30px var(--body);color:var(--tc)}
.wp .tile .sub{font:500 12px/16px var(--body);color:var(--ink2)}
.wp .mini{display:flex;gap:4px;margin-top:auto}
.wp .mini i{height:6px;flex:1;border-radius:3px;background:var(--tc)}
.wp .mini i.o{opacity:.2}
.wp .week{display:flex;justify-content:space-between;margin-top:10px}
.wp .week div{display:flex;flex-direction:column;align-items:center;gap:6px;font:500 11px/14px var(--body);color:var(--ink2)}
.wp .week i{width:14px;height:14px;border-radius:50%;border:1.5px solid rgba(201,190,216,.3)}
.wp .week i.on{background:var(--amber);border-color:var(--amber);box-shadow:0 0 10px rgba(255,176,32,.5)}
.wp .set{padding:16px;border-radius:18px;background:var(--card);border:1px solid var(--div);margin-top:12px;display:flex;flex-direction:column;gap:10px}
.wp .set h4{margin:0;font:700 16px/20px var(--body)}
.wp .plus{box-shadow:inset 0 0 0 1.5px #17131F,0 8px 20px rgba(23,19,31,.18)}
.wp .bub{background:#FFFFFF;border-color:var(--line);color:var(--body-ink);box-shadow:0 1px 2px rgba(27,20,36,.04)}
.wp .bub.me{background:#F3E8FF;border-color:var(--sec-border)}
.wp .bub.me .saved{color:#8A5300}
.wp .kept i{border-color:var(--ink2)}
.wp .moment,.wp .set{background:#FFFFFF;border-color:var(--line);box-shadow:0 1px 2px rgba(27,20,36,.04),0 10px 30px rgba(59,20,102,.05)}
.wp .rings{background:#FFFFFF;border-color:var(--line);box-shadow:0 1px 2px rgba(27,20,36,.04),0 10px 30px rgba(59,20,102,.07)}
.wp .tile{background:#FFFFFF;border-color:var(--line);box-shadow:0 1px 2px rgba(27,20,36,.04),0 10px 30px rgba(59,20,102,.05)}
.wp .week i{border-color:rgba(23,19,31,.2)}
.wp .week i.on{box-shadow:none}
.wp .dopa-av{flex:none;width:54px;height:54px;border-radius:50%;overflow:hidden;background:#F3E8FF;display:block}
.wp .dopa-av img{width:100%;height:auto;display:block;transform:translateY(-6%) scale(1.25);transform-origin:50% 20%}
.wp .plus.attn{animation:wpAttn 1.6s ease-in-out infinite}
.wp .fakefield{display:flex;flex-direction:column;gap:6px;padding:13px 14px;border-radius:14px;border:1.5px dashed var(--sec-border);background:#FFFFFF;color:var(--ink3);font:400 15px/22px var(--body)}
.wp .previews .h3{margin:0}
.wp .moment,.wp .set,.wp .tile,.wp .rings,.wp .bub,.wp .fakefield{background:rgba(255,255,255,.66);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.wp .bub.me{background:rgba(243,232,255,.78)}
/* ═════════ Lesson-end presentations: composition ═════════ */
.wd-modal{--dopa-w:300px;--pv-w:440px;--gap:28px;--shift:398px}
@media (max-width:1299px){.wd-modal{--dopa-w:230px;--pv-w:380px;--shift:333px}}
.wd-frame{transition:transform .7s cubic-bezier(.22,1,.36,1)}
.wd-modal.dm-right .wd-frame{transform:translateX(var(--shift))}
.wd-modal.dm-left .wd-frame{transform:translateX(calc(var(--shift) * -1))}
.wd-modal.demoing .wd-cap{opacity:0}
.wd-demo{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:min(864px,calc(100dvh - 64px));width:calc(var(--dopa-w) + var(--pv-w) + 410px + 2 * var(--gap));display:flex;align-items:center;gap:var(--gap);pointer-events:none;z-index:2}
.wd-demo[hidden]{display:none}
.wd-demo.dm-1::after,.wd-demo.dm-3::after,.wd-demo.dm-2::before{content:"";flex:0 0 410px}
.dm-dopa{flex:0 0 var(--dopa-w);display:flex;flex-direction:column;align-items:center;gap:18px;position:relative}
.dm-dopa img{width:min(100%,280px);height:auto;display:block;position:relative;z-index:1;opacity:0;transform:translateY(60px);transition:transform 1s cubic-bezier(.22,1,.36,1),opacity .6s}
.dm-glow{position:absolute;left:50%;bottom:-40px;width:420px;height:420px;margin-left:-210px;border-radius:50%;opacity:0;transition:opacity 1.2s;
  background:radial-gradient(circle,rgba(255,176,32,.48) 0%,rgba(255,107,0,.18) 40%,rgba(123,47,190,.10) 58%,rgba(123,47,190,0) 72%)}
.dm-bubble{position:relative;z-index:2;padding:22px 24px;border-radius:28px;background:#FFF8EE;color:#17131F;font:500 18px/26px 'DM Sans',system-ui,sans-serif;box-shadow:0 18px 50px rgba(0,0,0,.4);opacity:0;transform:translateY(8px);transition:opacity .45s .8s,transform .45s .8s}
.dm-bubble b{display:block;margin-bottom:6px;font:700 28px/32px 'Playfair Display',Georgia,serif}
.dm-bubble::after{content:"";position:absolute;left:34%;bottom:-14px;border:14px solid transparent;border-bottom:0;border-top-color:#FFF8EE}
.pv-wrap{flex:0 0 var(--pv-w);display:flex;flex-direction:column;align-items:center;gap:14px;opacity:0;transform:translateY(10px);transition:opacity .6s .5s,transform .6s .5s}
.pv-eyebrow{margin:0;font:600 13px/16px 'DM Sans',system-ui,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:#E6DEF0;text-align:center}
.wp.pv{position:relative;width:100%;height:min(580px,calc(100dvh - 190px));border-radius:32px;overflow:hidden;border:1px solid rgba(255,255,255,.55);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.wp.pv .pv-in{position:relative;z-index:1;padding:30px 26px;display:flex;flex-direction:column;gap:12px;height:100%}
.wp.pv .title{font-size:40px;line-height:46px;margin:0}
.wp.pv .pv-label{position:absolute;left:0;right:0;bottom:14px;z-index:2;margin:0;text-align:center;font:italic 500 13px/18px var(--body);color:var(--ink2)}
.wd-demo.on .dm-dopa img,.dm-compact.on .dm-dopa img{opacity:1;transform:none}
.wd-demo.on .dm-glow{opacity:1}
.wd-demo.on .dm-bubble,.dm-compact.on .dm-bubble{opacity:1;transform:none}
.wd-demo.on .pv-wrap,.dm-compact.on .pv-wrap{opacity:1;transform:none}
.wd-demo.out,.dm-compact.out{opacity:0;transition:opacity .7s}
/* the highlighted screen element (Dopa's pointing gesture is not available yet; see PR) */
.wp.pv [data-target]{transition:box-shadow .5s}
.point .wp.pv [data-target]{box-shadow:0 0 0 3px #FFB020,0 0 0 10px rgba(255,176,32,.22)}
/* Day 1: example reply typed in */
.wp.pv .thread{margin-top:6px}
.wp.pv .bub{font-size:17px;line-height:24px}
.wp.pv .bub.me{opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s,box-shadow .5s;min-height:76px;max-width:88%}
.wp.pv .bub.me.show{opacity:1;transform:none}
.wp.pv .caret{display:inline-block;width:2px;height:18px;margin-left:2px;vertical-align:-3px;background:var(--purple);animation:pvCaret .9s steps(1) infinite}
.wp.pv .typed .caret,.wp.pv .pv-field.done .caret{display:none}
@keyframes pvCaret{50%{opacity:0}}
.wp.pv .dopa-av img{transform:translateY(-6%) scale(1.25);transform-origin:50% 20%}
/* Day 2: plus → capture → log → kept */
.wp.pv .pv-plus{position:absolute;right:22px;bottom:64px;z-index:3;transition:transform .2s,box-shadow .5s}
.wp.pv .pv-plus.press{transform:scale(.88)}
.wp.pv .pv-sheet{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:20px 22px 26px;border-radius:26px 26px 0 0;background:rgba(255,255,255,.94);border-top:1px solid rgba(123,47,190,.16);box-shadow:0 -10px 40px rgba(59,20,102,.12);display:flex;flex-direction:column;gap:12px;transform:translateY(110%);transition:transform .45s cubic-bezier(.22,1,.36,1)}
.wp.pv .pv-sheet.open{transform:none}
.wp.pv .pv-field{min-height:72px;padding:12px 14px;border-radius:14px;border:1.5px solid var(--purple);background:#FFFFFF;font:400 17px/24px var(--body);color:var(--body-ink)}
.wp.pv .pv-log{align-self:stretch;text-align:center;padding:14px;border-radius:14px;background:var(--pcore);color:#FFFFFF;font:600 16px/1 var(--body);transition:transform .15s}
.wp.pv .pv-log.press{transform:scale(.97)}
.wp.pv .pv-ack{position:absolute;top:30px;right:26px;opacity:0;transform:translateY(-6px);transition:opacity .4s,transform .4s}
.wp.pv .pv-ack.show{opacity:1;transform:none}
.wp.pv .moment.new{animation:pvIn .5s ease-out}
@keyframes pvIn{from{opacity:0;transform:translateY(-6px)}}
/* Day 3: record appears */
.wp.pv .arc{stroke-dasharray:0 var(--full);transition:stroke-dasharray 1.4s ease-out}
.grow .wp.pv .arc{stroke-dasharray:var(--len) var(--full)}
.wp.pv .week i.on{opacity:.2;transition:opacity .4s calc(var(--i) * 120ms + .6s)}
.grow .wp.pv .week i.on{opacity:1}
/* Phones and narrow windows: compact vertical panel above the player (Next lesson stays visible) */
.wp .reader.demoing .rbody{display:none}
.dm-compact{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;padding:4px 16px 8px;overflow:hidden}
.dm-compact .dm-dopa{flex:0 0 auto;flex-direction:row;align-items:center;gap:10px}
.dm-compact .dm-dopa img{width:70px;order:-1;transform:translateY(20px)}
.dm-compact .dm-glow,.dm-compact .pv-eyebrow,.dm-compact .dm-bubble::after{display:none}
.dm-compact .dm-bubble{padding:10px 12px;border-radius:16px;font-size:14px;line-height:19px;box-shadow:0 6px 18px rgba(59,20,102,.1);border:1px solid var(--line)}
.dm-compact .dm-bubble b{font-size:17px;line-height:21px;margin-bottom:2px}
.dm-compact .pv-wrap{flex:1;min-height:0;width:100%}
.dm-compact .wp.pv{height:100%;border-radius:22px;box-shadow:0 10px 30px rgba(59,20,102,.14);border-color:var(--line)}
.dm-compact .wp.pv .pv-in{padding:16px 16px 34px;gap:8px}
.dm-compact .wp.pv .title{font-size:26px;line-height:30px}
.dm-compact .wp.pv .bub{font-size:15px;line-height:21px}
.dm-compact .wp.pv .pv-plus{bottom:40px;right:14px}
@media (prefers-reduced-motion:reduce){
  .wd-frame,.dm-dopa img,.dm-bubble,.pv-wrap,.dm-glow,.wp.pv .bub.me,.wp.pv .pv-sheet,.wp.pv .arc,.wp.pv .week i.on,.wp.pv .pv-ack{transition:none!important;animation:none!important}
  .wp.pv .caret{display:none}
}
.dm-compact .wp.pv .pv-label{top:12px;bottom:auto;left:auto;right:14px;font-size:11px;line-height:14px}
.dm-compact .wp.pv .pv-ack{top:34px}
.dm-compact .wp.pv .pv-sheet{padding:12px 14px 14px;gap:8px}
.dm-compact .wp.pv .pv-field{min-height:48px;font-size:15px}
/* Phones: during a presentation the player keeps only Next lesson + lesson navigation, so Dopa,
   her message and the demonstrated screen have room; controls return when it ends. */
.wp .reader.demoing .seek,.wp .reader.demoing .times,.wp .reader.demoing .ctrls,.wp .reader.demoing .rhint,.wp .reader.demoing label.sr{display:none}
.wp .reader.demoing .nextwrap{margin-top:2px}
.dm-compact .wp.pv{display:flex;flex-direction:column}
.dm-compact .wp.pv .pv-label{position:relative;order:-1;top:auto;right:auto;left:auto;bottom:auto;z-index:2;padding:10px 16px 0;text-align:left;font-size:11px;line-height:14px}
.dm-compact .wp.pv .pv-in{flex:1;min-height:0;height:auto;padding:6px 16px 16px}
@media (max-width:360px){
  .wp .rnav{gap:4px}
  .wp .lnav{font-size:11px;padding:6px 2px;gap:1px}
  .wp .lnav svg{display:none}
  .dm-compact{padding:4px 12px 6px;gap:8px}
  .dm-compact .dm-dopa img{width:58px}
  .dm-compact .dm-bubble{font-size:13px;line-height:18px;padding:8px 10px}
  .dm-compact .dm-bubble b{font-size:15px;line-height:19px}
  .dm-compact .wp.pv .title{font-size:22px;line-height:26px}
  .dm-compact .wp.pv .bub{font-size:14px;line-height:19px}
}
.dm-compact .wp.pv .pv-in{overflow-y:auto;scrollbar-width:none;position:relative}
.dm-compact .wp.pv .pv-in::-webkit-scrollbar{display:none}
@media (max-height:640px){.dm-compact .wp.pv .ctx{display:none}}
.wd-close{z-index:5}

/* Polish (Nov 11): Purple Core bubble text, MyDopa wordmark, full-body mini Dopa, approved MyProgress, clip sizing */
.dm-bubble,.dm-bubble b{color:#7B2FBE}
.wm{color:#17131F;font-style:normal;font-weight:700;letter-spacing:-.01em}
.wm b{color:#7B2FBE;font-weight:700}
.wm sup{font-size:.55em;vertical-align:super;line-height:0;margin-left:1px}
.wp.pv .dmsg{align-items:flex-end;gap:8px}
.wp.pv .dopa-mini{width:52px;height:auto;flex:none;display:block}
.dm-compact .wp.pv .dopa-mini{width:40px}
.wp.pv-3 .pv-in{padding:0;gap:0}
.wp.pv .mp-shot{position:relative;border-radius:0;transition:box-shadow .5s}
.wp.pv .mp-shot img{display:block;width:100%;height:auto;clip-path:inset(0 0 100% 0);opacity:.2;transition:clip-path 1.6s cubic-bezier(.22,1,.36,1),opacity .8s}
.grow .wp.pv .mp-shot img{clip-path:inset(0 0 0 0);opacity:1}
.point .wp.pv .mp-shot{box-shadow:inset 0 0 0 3px #FFB020}
.dm-dopa img{width:min(100%,320px)}
.wd-demo.dm-2 .dm-dopa img{width:min(100%,340px)}
.dm-compact .dm-dopa img{width:96px}
@media (max-width:360px){.dm-compact .dm-dopa img{width:76px}}
@media (prefers-reduced-motion:reduce){.wp.pv .mp-shot img{clip-path:none;opacity:1;transition:none}}
.dm-bubble .tt{color:#17131F}.dm-bubble .tt span{color:#7B2FBE}

/* Homepage order (Nov 12): lesson card → invitation button → coming-soon line → 2 min · 7 questions → 40 years */
.hero .wd-card{margin-top:36px;margin-bottom:36px}
.hero .wd-proof-stack{flex-direction:column;align-items:center;gap:8px;margin-top:18px}
.wd-foot .wd-try{flex:1 1 260px;min-width:0}
@media (max-width:760px){.hero .wd-card{margin-top:30px;margin-bottom:28px}}
.wd-foot .wd-try{text-wrap:wrap}
.wd-foot .wd-try .nb{display:inline-block}
@media (max-width:360px){.wd-foot{font-size:13px}}

/* Share this lesson: visible, recognisable, generous tap targets (Nov 12) */
.wp .share-pill{height:44px;padding:0 16px;gap:8px;background:#F3E8FF;border:1.5px solid #B98AE0;color:#7B2FBE;font:700 14px/1 var(--body)}
.wp .share-pill svg{width:18px;height:18px;stroke-width:2.1}
.wp .share-done{all:unset;box-sizing:border-box;cursor:pointer;margin-top:8px;width:100%;min-height:44px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:14px;border:1.5px solid #B98AE0;background:rgba(243,232,255,.85);color:#7B2FBE;font:700 15px/1.2 var(--body)}
.wp .share-done svg{width:18px;height:18px;stroke-width:2.1}
.wp .share-done:focus-visible{outline:2px solid #FFB020;outline-offset:2px}
.wp .reader.demoing .share-done{display:none}
.wp .share-url{margin:0;padding:10px 12px;border-radius:12px;background:#F7F3FB;border:1px solid var(--line);font:500 13px/18px var(--body);color:var(--ink2);word-break:break-all;user-select:all}
.wp .share-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wp .share-btn{all:unset;box-sizing:border-box;cursor:pointer;min-height:52px;display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:14px;border:1.5px solid var(--sec-border);background:#FFFFFF;color:var(--ink);font:600 15px/1.2 var(--body)}
.wp .share-btn.wide{grid-column:1/-1;justify-content:center}
.wp .share-btn:focus-visible{outline:2px solid #FFB020;outline-offset:2px}
.wp .si{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;background:#F3E8FF;color:#7B2FBE;font:800 15px/1 var(--body)}
.wp .si svg{width:17px;height:17px}
.wp .si-wa{background:#25D366;color:#FFFFFF}
.wp .si-fb{background:#1877F2;color:#FFFFFF;font-family:Georgia,serif}
.wp .si-x{background:#000000;color:#FFFFFF;font-size:14px}
.wp .sheet textarea{min-height:84px}
@media (max-width:360px){.wp .share-pill{padding:0 12px}.wp .share-pill span{display:none}.wp .share-btn{padding:8px 10px;gap:8px;font-size:14px}}

/* "Share this lesson": the app's travelling amber light (ProgressRingsCard colour #FFB020; one smooth linear lap per 7 s, the same rhythm as the lesson card (René, Nov 12); was 2.222 s
   2.222 s, held at top + 0.6 rad with reduced motion) circling the button's edge. Text untouched. */
@property --wd-share-a{syntax:'<angle>';inherits:false;initial-value:0deg}
.wp .share-pill,.wp .share-done{position:relative;isolation:isolate}
.wp .share-pill::before,.wp .share-pill::after,.wp .share-done::before,.wp .share-done::after{content:"";position:absolute;inset:-1.5px;border-radius:inherit;pointer-events:none;
  padding:2px;background:conic-gradient(from var(--wd-share-a),rgba(255,176,32,0) 0deg,rgba(255,176,32,0) 280deg,rgba(255,176,32,.55) 320deg,#FFB020 345deg,#FFE08A 352deg,rgba(255,176,32,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:wdShareLap 7s linear infinite}
.wp .share-pill::after,.wp .share-done::after{inset:-4px;padding:5px;filter:blur(4px);opacity:.75;z-index:-1}
@keyframes wdShareLap{to{--wd-share-a:360deg}}
/* Homepage lesson card: the same travelling amber light, slower and subtler, drawing the eye to Play. */
@property --wd-card-a{syntax:'<angle>';inherits:false;initial-value:200deg}
.wd-card{isolation:isolate}
.wd-card::before,.wd-card::after{content:"";position:absolute;inset:-1.5px;border-radius:inherit;pointer-events:none;padding:2px;
  background:conic-gradient(from var(--wd-card-a),rgba(255,176,32,0) 0deg,rgba(255,176,32,0) 300deg,rgba(255,176,32,.45) 330deg,#FFB020 350deg,#FFE08A 355deg,rgba(255,176,32,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:wdCardLap 7s linear infinite;opacity:.85}
.wd-card::after{inset:-5px;padding:6px;filter:blur(6px);opacity:.5;z-index:-1}
@keyframes wdCardLap{to{--wd-card-a:560deg}}
/* Reduced motion: a static amber outline, no moving light. */
@media (prefers-reduced-motion:reduce){
  .wp .share-pill::before,.wp .share-done::before,.wd-card::before{animation:none;background:rgba(255,176,32,.85)}
  .wp .share-pill::after,.wp .share-done::after,.wd-card::after{animation:none;display:none}
}

/* Travelling light now drawn by journey.js (attachLight: the app's speed, linear, arc length along the
   border). The earlier rotating conic light is retired; its pseudo-elements remain only for the
   reduced-motion static amber outline. */
.wd-card::before,.wd-card::after,.wp .share-pill::before,.wp .share-pill::after,.wp .share-done::before,.wp .share-done::after{display:none}
@media (prefers-reduced-motion:reduce){.wd-card::before,.wp .share-pill::before,.wp .share-done::before{display:block}}
.wd-light{position:absolute;left:-2px;top:-2px;overflow:visible;pointer-events:none;z-index:1}
.wd-light-glow{filter:blur(3px)}
.wp .share-done{overflow:visible}

/* Laptop/desktop hero fit (René, Nov 12): the whole lesson card, Play included, visible without
   scrolling at common laptop sizes. Spacing first, then the headline and supporting text scale with the
   window height (never larger than before). Phones (< 900 px wide) are unchanged. */
@media (min-width:900px){
  .hero{padding-top:88px;padding-bottom:40px}
  .hero-eyebrow{font-size:min(22px,2.4vh);margin-bottom:10px}
  .hero-h{font-size:min(88px,8vw,9.5vh);margin-bottom:16px}
  .hero-sub{font-size:min(25px,2.6vw,2.9vh);line-height:1.55;margin-bottom:0;max-width:720px;text-wrap:balance}
  .hero .wd-card{margin-top:24px;margin-bottom:28px;padding-top:22px;padding-bottom:22px;grid-template-columns:min(264px,30vh) minmax(0,1fr)}
  .hero .wd-card .wd-player{margin-top:18px}
  .hero .wd-card .wd-foot{margin-top:14px}
}