/* MindBridge — публичный дизайн (handoff). Собрано из /redesign: fonts, style, carousels, refinement, pages, course, player, focus, experience, engagement + адаптация под Laravel-шаблоны в конце файла. */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/handoff/fonts/font-0.ttf) format('truetype'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/handoff/fonts/font-1.ttf) format('truetype'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/handoff/fonts/font-2.ttf) format('truetype'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/handoff/fonts/font-3.ttf) format('truetype'); } @font-face { font-family: 'Lora'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/handoff/fonts/lora-italic-400.ttf) format('truetype'); } @font-face { font-family: 'Lora'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/handoff/fonts/lora-regular-400.ttf) format('truetype'); } @font-face { font-family: 'Lora'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/handoff/fonts/lora-medium-500.ttf) format('truetype'); } /* ===== style.css ===== */ :root{font:100%/1.6 'Manrope',sans-serif;--paper:#f8f6f0;--ink:#2c4036;--muted:#56625a;--accent:#a34a32;--line:#d9dcd1;--white:#fffdf8;--serif:'Lora',Georgia,serif;scroll-behavior:smooth;scroll-padding-top:1.5rem;color:var(--ink);background:var(--paper)}*{box-sizing:border-box}body{margin:0}button,select{font:inherit}a{color:inherit}button,summary,select{cursor:pointer}button{color:inherit}button,a,summary,select{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible{outline:3px solid #7c4128;outline-offset:5px}p,h1,h2,h3{margin:0}h1,h2,h3{font-family:var(--serif);font-weight:400}a{text-underline-offset:.2em}.container{width:min(1240px,calc(100% - 5rem));margin-inline:auto}.skip{position:absolute;top:-10rem;left:1rem;background:white;z-index:20;padding:1rem}.skip:focus{top:1rem}.header-row{min-height:105px;display:flex;gap:2rem;align-items:center;border-bottom:1px solid var(--line)}.brand{text-decoration:none;font-size:1.65rem;font-weight:700;letter-spacing:-.07em;display:flex;gap:.4rem;align-items:center;white-space:nowrap}.brand-dot{margin-left:-.4rem;color:var(--accent)}.brand-mark{width:33px;height:33px;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:#efe2b5;font:italic 1.9rem Georgia,serif;letter-spacing:-.15em;padding-right:.13em;margin-right:.2rem}nav{display:flex;align-items:center;gap:1.8rem;margin-inline:auto}nav a{text-decoration:none;font-size:.91rem;font-weight:600;padding:1rem 0;position:relative}nav a:after{content:'';height:1px;background:currentColor;position:absolute;bottom:.5rem;left:0;width:0;transition:width .25s}nav a:hover:after{width:100%}.header-tools{display:flex;gap:.7rem;align-items:center}#language{border:0;background:transparent;min-height:44px;color:var(--ink);font-weight:600;padding:.3rem}.access-button,.menu-button{min-width:44px;min-height:44px;background:transparent;border:1px solid #abb5aa;border-radius:50%}.menu-button{display:none}.access-panel{padding:1rem 0;display:flex;gap:1rem;align-items:center;flex-wrap:wrap}.access-panel[hidden]{display:none}.access-panel button{border:1px solid #7e897e;background:transparent;border-radius:999px;padding:.65rem 1rem}.access-panel button[aria-pressed=true]{background:var(--ink);color:white}.hero{padding-top:2.8rem;padding-bottom:4.8rem;display:grid;grid-template-columns:1.05fr 1fr;gap:5.5rem;align-items:center}.eyebrow{font-size:.77rem;font-weight:700;letter-spacing:.11em;line-height:1.5;text-transform:uppercase}.hero-copy>.eyebrow{display:flex;align-items:center;gap:.65rem;margin-bottom:1.4rem;color:var(--muted)}.hero-copy>.eyebrow>span:first-child{display:block;width:23px;height:1px;background:var(--accent)}h1{font-size:clamp(3.45rem,5.2vw,5.1rem);line-height:1.16;letter-spacing:-.05em}h1 em{font-style:normal;color:var(--accent)}.hero-lede{margin-top:1.8rem;max-width:420px;font-size:1.075rem;color:var(--muted);line-height:1.7}.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.8rem;margin-top:2rem}.btn{display:inline-flex;align-items:center;gap:1.8rem;justify-content:space-between;padding:.95rem 1.3rem;border-radius:999px;text-decoration:none;font-size:.95rem;font-weight:600;min-height:56px}.primary{background:var(--ink);color:#fffef8;box-shadow:0 0 0 0 #2c403617;transition:background .25s,box-shadow .25s,transform .25s}.primary:hover{background:#415947;box-shadow:0 7px 20px #2c403626;transform:translateY(-2px)}.arrow{font-size:1.4rem;line-height:1}.text-link{font-size:.9rem;font-weight:600}.micro{margin-top:1.1rem;font-size:.8rem;color:var(--muted)}.quick-practice{margin-top:2.6rem;display:flex;align-items:center;gap:.9rem;text-decoration:none;border-top:1px solid var(--line);padding-top:1.2rem;max-width:425px}.quick-play{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#e9e4d3;font-size:.75rem;padding-left:.1rem;transition:background .3s,transform .3s}.quick-practice:hover .quick-play{background:#e6cf9e;transform:scale(1.06)}.quick-practice strong{font-size:.9rem;display:block;font-weight:600}.quick-practice small{display:block;font-size:.78rem;color:var(--muted);margin-top:.15rem}.quick-time{margin-left:auto;font-size:.8rem;color:var(--muted)}.hero-visual{position:relative;padding-right:1.2rem;min-width:0}.photo-frame{height:540px;border-radius:160px 24px 160px 24px;overflow:hidden;background:#e6e6d6}.photo-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block;transition:transform 1s cubic-bezier(.2,.65,.25,1)}.hero-visual:hover img{transform:scale(1.035)}.photo-note{position:absolute;left:-2rem;bottom:2rem;display:flex;gap:.85rem;align-items:center;background:#f2ddb8;color:#4a3f31;padding:1rem 1.5rem;border-radius:14px 14px 14px 0;box-shadow:0 10px 35px #30260c15;transform:rotate(-4deg);font-size:.9rem;line-height:1.5;white-space:pre-line}.note-symbol{font-size:2.1rem;color:#aa4e34}.vertical-note{position:absolute;right:-1.2rem;top:38%;writing-mode:vertical-rl;letter-spacing:.16em;font-size:.75rem;color:var(--muted)}.feel-section{background:#2e443a;color:#f9f6e9;padding:2.4rem 0}.feel-inner{display:grid;grid-template-columns:1fr 1.7fr;gap:3rem;align-items:center}.feel-section .eyebrow{color:#d1d9c5;font-size:.75rem}.feel-section h2{font-size:2.05rem;line-height:1.3;margin-top:.5rem}.topic-pills{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:.65rem}.topic-pills a{border:1px solid #9daa97;border-radius:999px;padding:.6rem 1.2rem;text-decoration:none;min-height:44px;display:flex;align-items:center;gap:.5rem;font-size:.91rem;transition:background .2s,color .2s,transform .2s}.topic-pills a:hover{background:#e4eaca;color:#263a2d;transform:translateY(-2px)}.practice-section{padding:5.5rem 0 4.5rem}.section-heading{display:flex;justify-content:space-between;gap:2rem;align-items:end;margin-bottom:2rem}.section-heading .eyebrow{color:var(--accent);margin-bottom:.7rem}.section-heading h2{font-size:clamp(2rem,3.2vw,2.8rem);line-height:1.25;letter-spacing:-.035em}.section-heading>p{max-width:330px;font-size:.94rem;line-height:1.7;color:var(--muted);white-space:pre-line}.exercise-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;align-items:start}.exercise{border-radius:18px;border:1px solid transparent;transition:transform .3s,box-shadow .3s}.exercise:hover{transform:translateY(-6px);box-shadow:0 16px 30px #263a2d0b}.exercise-butter{background:#eee4b8}.exercise-peach{background:#f1d3c2}.exercise-green{background:#e1e7d9}.exercise summary{list-style:none;position:relative;padding:1.65rem;display:flex;flex-direction:column;min-height:365px;overflow:hidden;border-radius:18px}.exercise summary::-webkit-details-marker{display:none}.card-top{display:flex;justify-content:space-between;gap:.5rem;font-size:.78rem;align-items:center}.tag{font-size:.75rem;font-weight:700;letter-spacing:.1em}.exercise h3{font-size:2.05rem;line-height:1.35;letter-spacing:-.025em;white-space:pre-line;margin:2rem 0 .85rem;max-width:260px;position:relative}.exercise summary p{font-size:.9rem;line-height:1.65;max-width:285px}.card-bottom{margin-top:auto;padding-top:1.7rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:.87rem;font-weight:600}.round-arrow{width:42px;height:42px;border-radius:50%;border:1px solid #687565;display:grid;place-items:center;font-size:1.45rem;transition:background .3s,color .3s,transform .3s}.exercise:hover .round-arrow{background:var(--ink);color:white;transform:rotate(45deg)}.exercise[open]{border-color:#65765f}.exercise-body{padding:0 1.65rem 1.65rem;font-size:1rem;line-height:1.7}.resources-section{padding:1.5rem 0 5rem}.resource-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem}.resource{padding:1.8rem 0;border-top:1px solid #bfc6b7;display:flex;flex-direction:column}.resource h3{font-size:1.5rem;margin-bottom:.75rem}.resource p{font-size:.9rem;color:var(--muted);margin-bottom:1.1rem}.resource a{font-size:.86rem;font-weight:600;margin-top:auto;align-self:start}.about-section{padding:3rem 0 4.5rem;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 2fr;gap:4rem}.about-kicker{display:flex;gap:.7rem;align-items:start}.about-kicker .eyebrow{padding-top:.5rem}.about-content h2{font-size:2.15rem;max-width:630px;line-height:1.4;margin-bottom:1.4rem;letter-spacing:-.035em}.about-content>p{font-size:1rem;max-width:660px;color:var(--muted)}.about-content .about-note{font-size:.82rem;margin-top:1rem;max-width:680px}footer{background:#eaece2;padding:2.4rem 0}.footer-row{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding-bottom:2rem}.footer-row p{font-size:.9rem}.footer-row>a:last-child{font-size:.88rem}.footer-bottom{border-top:1px solid #cbd0c3;padding-top:1.3rem;display:flex;justify-content:space-between;gap:3rem;font-size:.76rem;color:#505d52}.footer-bottom>p{max-width:700px}.footer-bottom>div{display:flex;flex-direction:column;gap:.4rem;flex-shrink:0} /* Motion occurs once as content enters the viewport. */ @keyframes enter{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}@keyframes photoEnter{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.hero-copy{animation:enter .8s both}.hero-visual{animation:photoEnter 1s .12s both}.photo-note{animation:enter 1s .3s backwards}.motion-enabled .reveal{opacity:0;transform:translateY(24px);transition:opacity .75s,transform .75s}.motion-enabled .reveal.visible{opacity:1;transform:none}.no-motion *, .no-motion *:before,.no-motion *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.no-motion .reveal{opacity:1;transform:none} .large-text .header-row{flex-wrap:wrap;padding-block:1rem}.large-text nav{order:3;width:100%;justify-content:center}.large-text .hero{grid-template-columns:1fr 1fr;gap:2rem}.large-text .hero h1{font-size:4rem}.large-text .exercise-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.high{--paper:#fff;--ink:#111;--muted:#222;--accent:#111;--line:#333;--white:#fff}.high .feel-section,.high .primary{background:#111;color:#fff}.high .exercise,.high footer,.high .photo-note{background:#fff;color:#111;border:1px solid #111}.high .hero-visual{display:none}.high .hero{grid-template-columns:1fr}.high .hero-copy{max-width:800px}.high .feel-section .eyebrow{color:#fff}.high .topic-pills a{border-color:#fff}.high .topic-pills a:hover{background:#fff;color:#111} @media(min-width:1500px){.hero{gap:7rem}.hero h1{font-size:5.3rem}}@media(max-width:1100px){nav{gap:1rem}.hero{gap:2.5rem}.hero h1{font-size:4.1rem}.photo-frame{height:530px}.hero-actions{gap:1rem}.text-link{font-size:.82rem}.feel-inner{grid-template-columns:1fr 1.4fr;gap:2rem}.exercise h3{font-size:1.75rem}.exercise summary{padding:1.3rem;min-height:365px}.section-heading>p{max-width:290px}}@media(max-width:900px){.container{width:calc(100% - 3rem)}.header-row{min-height:84px;gap:1rem;flex-wrap:wrap}.header-tools{margin-left:auto}.menu-button{display:block}nav{display:none;order:3;width:100%;flex-direction:column;gap:0;align-items:stretch;padding-bottom:1rem}nav.open{display:flex}nav a{padding:.7rem}.hero{gap:2rem}.hero h1{font-size:3.5rem}.hero-lede{font-size:1rem}.photo-frame{height:500px;border-radius:100px 20px 100px 20px}.quick-time{display:none}.photo-note{left:-1rem;padding:.8rem 1rem}.feel-inner{grid-template-columns:1fr;gap:1.5rem}.topic-pills{justify-content:flex-start}.exercise-grid{gap:.7rem}.exercise h3{font-size:1.6rem}.exercise summary p{font-size:.84rem}.exercise summary{padding:1rem}.about-section{gap:2rem;grid-template-columns:1fr 2fr}} @media(max-width:650px){.container{width:calc(100% - 2rem)}.header-row{min-height:78px}.brand{font-size:1.5rem}.brand-mark{width:28px;height:28px;font-size:1.5rem}.header-tools{gap:.25rem}.access-button,.menu-button{min-width:42px;min-height:42px}.hero{padding-top:2rem;padding-bottom:2.7rem;grid-template-columns:1fr;gap:2.3rem}.hero h1{font-size:clamp(3.1rem,12vw,4.4rem)}.hero-copy>.eyebrow{font-size:.75rem;margin-bottom:1rem}.hero-lede{margin-top:1.2rem;max-width:410px}.hero-actions{margin-top:1.4rem;gap:1.2rem}.btn{padding:.8rem 1.1rem;min-height:52px}.micro{font-size:.75rem}.quick-practice{margin-top:1.4rem;padding-top:1rem}.quick-time{display:block}.hero-visual{padding:0 1rem 0 .7rem}.photo-frame{height:340px;border-radius:100px 18px 100px 18px}.photo-frame img{object-position:50% 38%}.photo-note{left:0;bottom:1.2rem;font-size:.85rem}.vertical-note{right:-.5rem;font-size:.75rem}.feel-section{padding:2rem 0}.feel-section h2{font-size:1.85rem}.topic-pills{gap:.5rem}.topic-pills a{padding:.55rem 1rem;font-size:.85rem}.practice-section{padding:3.3rem 0 2rem}.section-heading{display:block;margin-bottom:1.5rem}.section-heading>p{margin-top:1rem;max-width:390px;font-size:.9rem}.section-heading h2{font-size:2rem}.exercise-grid,.large-text .exercise-grid{grid-template-columns:1fr;gap:1rem}.exercise summary{padding:1.5rem;min-height:310px}.exercise h3{font-size:2rem;margin-top:1.65rem}.exercise summary p{font-size:.94rem;max-width:350px}.card-bottom{padding-top:1.5rem}.resources-section{padding:1.5rem 0 2.5rem}.resource-grid{grid-template-columns:1fr;gap:0}.resource{padding:1.3rem 0}.resource p{max-width:400px}.about-section{display:block;padding:2rem 0 3rem}.about-kicker{margin-bottom:1.4rem}.about-content h2{font-size:1.8rem}.footer-row{flex-wrap:wrap;gap:1rem}.footer-row p{order:3;width:100%;font-size:.85rem}.footer-bottom{display:block}.footer-bottom>div{margin-top:1.3rem;flex-direction:row;justify-content:space-between;gap:1rem}.large-text .hero{grid-template-columns:1fr}.large-text .hero h1{font-size:3rem}.large-text .hero-actions{align-items:start;flex-direction:column}}@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.motion-enabled .reveal{opacity:1;transform:none}} /* ===== carousels.css ===== */ /* Shared controls */ .btn{border-radius:16px;padding:16px 23px;gap:0;min-height:58px;font-size:.94rem;letter-spacing:-.02em}.primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px #2c40361a}.hero-actions{gap:12px}.secondary-btn{background:#ebece3;border:1px solid #e1e4d8;border-radius:16px;min-height:58px;padding:16px 20px;display:inline-flex;align-items:center;text-decoration:none;transition:background .25s,transform .25s;font-size:.9rem}.secondary-btn:hover{background:#e0e6d7;transform:translateY(-2px)}.access-button,.menu-button{border-radius:13px;border-color:#d6dccf;background:#eff0e9}.header-tools select{background:#eff0e9!important;border-radius:13px;padding-inline:10px!important}.quick-play{background:#e8eadb;border:1px solid #dce1ce;border-radius:14px;width:48px;height:48px}.quick-play svg{margin-left:-3px}.carousel-controls{display:flex;align-items:center;gap:9px;flex:none}.carousel-nav{width:48px;height:48px;min-width:48px;display:grid;place-items:center;border-radius:14px;border:1px solid #d2d9cc;background:#edf0e6;color:#2c4036;transition:background .2s,color .2s,transform .2s}.carousel-nav:hover:not([aria-disabled=true]){background:#2c4036;color:white;transform:translateY(-2px)}.carousel-nav[aria-disabled=true]{opacity:.38;cursor:default}.carousel-track{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;gap:20px;padding:6px 4px 22px;margin-inline:-4px;scroll-padding-inline:4px;scrollbar-width:none;overscroll-behavior-x:contain;align-items:start}.carousel-track::-webkit-scrollbar{display:none}.carousel-track:focus-visible{outline:3px solid #b47943;outline-offset:5px}.carousel-track>*{scroll-snap-align:start;scroll-margin-inline:4px;flex-shrink:0;min-width:0}.carousel-progress{height:3px;background:#e1e5da;border-radius:4px;overflow:hidden;margin-top:4px;max-width:160px}.carousel-progress>span{display:block;height:100%;border-radius:4px;background:#536447;will-change:transform}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* Compact topic filmstrip */ .feel-section{padding:3rem 0 2.5rem}.feel-heading{margin-bottom:1.4rem;align-items:center}.feel-heading .eyebrow{margin-bottom:.55rem;color:#d1d9c5}.feel-section h2{margin-top:0;font-size:2.3rem;line-height:1.25}.feel-section .carousel-nav{color:#f7f7e8;background:#ffffff0d;border-color:#91a38b}.feel-section .carousel-nav:hover:not([aria-disabled=true]){background:#e8edda;color:#2c4036}.feel-section .carousel-progress{background:#ffffff20}.feel-section .carousel-progress>span{background:#d8e5bb}.topic-card{width:26%;min-width:235px;text-decoration:none;color:#2c4036;background:#f6f6eb;border:1px solid #e6ebdd;border-radius:20px;overflow:hidden;transition:transform .35s,box-shadow .35s}.topic-card:hover{transform:translateY(-4px);box-shadow:0 14px 28px #08180f24}.topic-image{display:block;aspect-ratio:1.65;overflow:hidden;background:#d4d7c4}.topic-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .65s cubic-bezier(.2,.65,.25,1)}.topic-card:hover img{transform:scale(1.055)}.topic-content{padding:1.05rem 1.2rem 1.2rem;display:block;position:relative;min-height:116px}.topic-title{display:block;font-weight:650;font-size:1rem;line-height:1.35;letter-spacing:-.03em}.topic-desc{display:block;margin-top:.4rem;font-size:.81rem;color:#56625a;line-height:1.55;min-height:2.5rem} /* Large exercise cards */ .practice-section{padding-top:4.5rem}.practice-section .section-heading{align-items:end}.exercise-grid{display:flex;gap:20px;grid-template-columns:none}.exercise{width:38%;border-radius:24px;overflow:hidden;border:1px solid #e1e5da;background:#fffdf8;box-shadow:0 3px 12px #25342904}.exercise:hover{transform:translateY(-4px);box-shadow:0 14px 28px #2534290b}.exercise summary{display:block;padding:0;min-height:0;border-radius:24px;position:relative}.exercise summary:focus-visible{outline-offset:-5px}.exercise-photo{display:block;position:relative;aspect-ratio:1.75;overflow:hidden;background:#e2e5da}.exercise-photo>img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .7s cubic-bezier(.2,.65,.25,1)}.exercise:hover .exercise-photo>img{transform:scale(1.04)}.duration-chip{position:absolute;top:16px;left:16px;background:#fffdf7f5;border:1px solid #ffffffb3;padding:5px 10px;border-radius:9px;display:flex;align-items:center;gap:7px;font-size:.79rem;font-weight:600;box-shadow:0 3px 10px #2822190c}.chip-dot{width:12px;height:12px;border:1.3px solid #50624d;border-radius:50%;position:relative}.chip-dot:after{content:'';position:absolute;left:4px;top:2px;width:3px;height:4px;border-left:1px solid #50624d;border-bottom:1px solid #50624d}.photo-play{position:absolute;bottom:16px;right:16px;width:44px;height:44px;background:#ffffffec;display:grid;place-items:center;border-radius:14px;box-shadow:0 3px 15px #0000000d;transition:transform .3s}.photo-play svg{margin-left:-3px}.exercise:hover .photo-play{transform:scale(1.07)}.exercise-content{padding:1.55rem 1.65rem 1.65rem;display:flex;flex-direction:column;min-height:305px}.exercise-content .tag{color:#687258;letter-spacing:.1em;font-size:.75rem}.exercise-title{font-size:1.8rem;margin:.7rem 0 .75rem;white-space:normal;line-height:1.35;max-width:100%;letter-spacing:-.03em}.exercise-desc{max-width:100%;min-height:3.3rem;font-size:.91rem;color:#52604f}.card-bottom{background:#2f443a;border:1px solid #2f443a;color:#fffef6;border-radius:13px;padding:5px 5px 5px 17px;min-height:50px;margin-top:auto;font-size:.9rem;font-weight:600;gap:1rem;transition:background .25s}.exercise-content .card-bottom{margin-top:1.5rem}.card-play{width:38px;height:38px;border-radius:9px;background:#eff0d8;color:#2f443a;display:grid;place-items:center}.card-play svg{margin-left:-3px}.exercise:hover .card-bottom{background:#415a49}.exercise-peach .card-bottom{background:#f1d3c2;color:#473c30;border-color:#f1d3c2}.exercise-peach .card-play{background:#f9e9db;color:#473c30}.exercise-green .card-bottom{background:#e5eacb;color:#2f443a;border-color:#e5eacb}.exercise-green .card-play{background:#f4f6df}.exercise-peach:hover .card-bottom{background:#eac5b1}.exercise-green:hover .card-bottom{background:#dce3bc}.exercise[open] .photo-play{opacity:0}.exercise[open]{border-color:#7b8f70}.exercise-body{border-top:1px solid #d9dfd1;padding:1.2rem 1.65rem 1.6rem} .high .secondary-btn,.high .carousel-nav,.high .topic-card,.high .exercise{background:#fff;color:#000;border-color:#000}.high .feel-section .carousel-nav{background:#111;color:#fff;border-color:#fff}.high .topic-desc,.high .exercise-desc{color:#111}.high .card-bottom{background:#111;color:white;border-color:#111}.large-text .exercise-grid{display:flex}.large-text .exercise{width:48%}.large-text .topic-card{width:36%} @media(max-width:900px){.hero-actions{gap:10px}.btn{font-size:.86rem;padding-left:15px;gap:12px}.secondary-btn{font-size:.82rem;padding-inline:14px}.topic-card{width:34%;min-width:215px}.exercise{width:47%}.exercise-content{padding:1.25rem;min-height:300px}.exercise-title{font-size:1.65rem}.exercise-photo{aspect-ratio:1.55}.card-bottom{font-size:.86rem}} @media(max-width:650px){.hero-actions{align-items:stretch}.btn{font-size:.9rem}.secondary-btn{min-height:52px;font-size:.86rem}.feel-section{padding:2.4rem 0 1.9rem}.feel-heading,.practice-section .section-heading{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}.feel-section h2{font-size:1.9rem}.carousel-controls{gap:7px;margin-left:auto}.carousel-nav{width:42px;height:42px;min-width:42px;border-radius:12px}.carousel-track{gap:14px;padding-bottom:16px}.topic-card{width:72%;min-width:220px}.topic-content{min-height:115px}.topic-image{aspect-ratio:1.65}.practice-section{padding-top:3rem}.practice-section .section-heading h2{font-size:1.85rem}.exercise,.large-text .exercise{width:88%}.large-text .topic-card{width:85%}.exercise-photo{aspect-ratio:1.6}.exercise-content{min-height:290px;padding:1.4rem}.exercise-title{font-size:1.7rem;margin-top:.65rem}.exercise-desc{font-size:.9rem}.card-bottom{font-size:.88rem}.hero-actions .secondary-btn{padding-inline:15px}.carousel-progress{max-width:110px}} @media(prefers-reduced-motion:reduce){.carousel-track{scroll-behavior:auto}} /* Quiet navigation: only controls that communicate an action. */ .carousel-nav{border-radius:50%;background:transparent;border-color:#a9b4a2;box-shadow:none} .carousel-nav:hover:not([aria-disabled=true]){background:#2c40360a;color:#2c4036;transform:none} .feel-section .carousel-nav{background:transparent;border-color:#9ba993} .feel-section .carousel-nav:hover:not([aria-disabled=true]){background:#ffffff10;color:#f7f7e8} .topic-card:hover .topic-title{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px} .high .card-play{background:#eee;color:#111} @media(max-width:900px){.hero-actions .btn{padding:16px 20px;gap:0}} /* ===== refinement.css ===== */ :root{--ease-soft:cubic-bezier(.22,1,.36,1);--ease-press:cubic-bezier(.2,.8,.2,1);--motion-fast:180ms;--motion-medium:360ms;scroll-padding-top:118px}button,select,a,summary{touch-action:manipulation}button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible{outline:3px solid #a75134;outline-offset:4px} /* A quiet floating navigation surface with a moving location indicator. */ .header{position:sticky;top:12px;z-index:30;margin-top:12px;pointer-events:none;transition:top .3s var(--ease-soft)}.header-row{position:relative;min-height:76px;padding:10px 20px;border:1px solid #dce0d5;border-radius:24px;background:#fffdf8f5;box-shadow:0 4px 20px #28352b05;pointer-events:auto;transition:box-shadow .3s,background .3s}.header.scrolled .header-row{box-shadow:0 8px 30px #28352b12;background:#fffdf8fa}.header>.container:last-child{position:relative}.brand{font-size:1.5rem;letter-spacing:-.06em}.brand-mark{width:30px;height:30px;font-size:1.7rem}nav{position:relative;isolation:isolate;gap:2px;padding:5px;margin-inline:auto;border-radius:14px}nav a{padding:10px 14px;border-radius:11px;font-size:.86rem;font-weight:600;line-height:1.5;transition:color .2s}nav a:after{display:none}nav a[aria-current=location]{color:#273e2f}nav a:hover{color:#22382a}.nav-indicator{position:absolute;left:0;top:5px;bottom:5px;width:var(--nav-width,0px);transform:translateX(var(--nav-left,0px));background:#e9eddf;border:1px solid #dce4cf;border-radius:11px;z-index:-1;opacity:var(--nav-visible,0);transition:transform .38s var(--ease-soft),width .38s var(--ease-soft),opacity .2s}.header-tools{gap:6px}#language{font-size:.83rem}.header-tools select{background:transparent!important;border:1px solid transparent!important;border-radius:12px;min-height:44px}.access-button,.menu-button{background:transparent;border-color:transparent;border-radius:12px;font-size:.9rem;transition:background .2s}.header-tools button:hover,.header-tools select:hover{background:#e9ede2!important}.access-button[aria-expanded=true],.menu-button[aria-expanded=true]{background:#e7ebdd!important}.menu-glyph{width:20px;display:grid;gap:5px;margin:auto}.menu-glyph span{width:20px;height:1.5px;background:currentColor;transition:transform .25s var(--ease-soft)}.menu-button[aria-expanded=true] .menu-glyph span:first-child{transform:translateY(3.25px) rotate(45deg)}.menu-button[aria-expanded=true] .menu-glyph span:last-child{transform:translateY(-3.25px) rotate(-45deg)} .access-panel{position:absolute;right:0;top:12px;z-index:32;width:min(340px,100%);max-height:70dvh;overflow:auto;display:grid;gap:8px;padding:18px;border:1px solid #d8ddcf;border-radius:20px;background:#fffdf8;box-shadow:0 16px 46px #27372a20;pointer-events:auto}.access-panel strong{font-size:.95rem;margin:3px 4px 8px}.access-panel button{border:1px solid #dde2d5;border-radius:12px;padding:13px 46px 13px 13px;text-align:left;font-size:.86rem;background:#f6f6ee;position:relative;line-height:1.5}.access-panel button:after{content:'';position:absolute;right:13px;top:50%;width:22px;height:12px;margin-top:-6px;border:1px solid #829177;border-radius:999px;background:#dce3d3;box-shadow:inset 8px 0 0 #fffef8;transition:box-shadow .2s,background .2s}.access-panel button[aria-pressed=true]{background:#eaf0df;color:#25392c;border-color:#9baa89}.access-panel button[aria-pressed=true]:after{background:#2e4836;box-shadow:inset -8px 0 0 #fffef8} /* Consistent, lightly tactile controls. No decorative arrow badges. */ .btn,.secondary-btn,.card-bottom{border-radius:14px;font-size:.92rem;font-weight:600;letter-spacing:-.015em;line-height:1.45;transition:background var(--motion-fast),box-shadow var(--motion-fast),transform var(--motion-fast) var(--ease-press)}.hero-actions .btn{padding:17px 27px;min-height:57px;border:1px solid #20392c;background:#2b4334;color:#fffdf7;box-shadow:inset 0 1px 0 #ffffff20,0 2px 4px #1f382412}.hero-actions .btn:hover{background:#3b5640;box-shadow:inset 0 1px 0 #ffffff20,0 5px 14px #1f38241a;transform:translateY(-1px)}.secondary-btn{min-height:57px;padding:17px 24px;background:#f1f1e7;border-color:#d7ddcd;box-shadow:inset 0 1px 0 #ffffffb3}.secondary-btn:hover{background:#e8eddc;transform:translateY(-1px)}.btn:active,.secondary-btn:active,.carousel-nav:active:not([aria-disabled=true]),.header-tools button:active{transform:scale(.975);box-shadow:none}.quick-play{border-radius:50%;background:#e9eddc;box-shadow:inset 0 1px 0 #ffffff80}.quick-practice:hover .quick-play{transform:scale(1.03);background:#e1e8ce}.quick-practice:hover strong{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}.carousel-nav{border:1px solid #b7c1ad;width:46px;height:46px;min-width:46px;transition:background .2s,transform .2s}.carousel-nav:hover:not([aria-disabled=true]){background:#e7eddc}.carousel-nav[aria-disabled=true]{opacity:.4}.carousel-nav svg{width:20px;height:20px} /* Photo-led cards with calm depth and a unified action. */ .hero{padding-top:3.6rem;padding-bottom:4.3rem}.hero-copy>.eyebrow{font-size:.75rem;letter-spacing:.08em}.photo-frame{border-radius:130px 28px 130px 28px}.photo-note{box-shadow:0 9px 24px #3a341210;transform:rotate(-2deg);border-radius:14px;padding:.9rem 1.2rem}.vertical-note{display:none}.hero-lede{line-height:1.75}.feel-section{background:#30483a}.topic-card{border:0;background:#f7f7ed;border-radius:22px;box-shadow:0 2px 6px #0a1e1109;transition:box-shadow .3s,transform .3s var(--ease-soft)}.topic-image{aspect-ratio:1.56;border-radius:17px;margin:8px 8px 0;overflow:hidden}.topic-content{padding:1.1rem 1.15rem 1.25rem;min-height:118px}.topic-title{font-weight:650;letter-spacing:-.025em;font-size:1.05rem}.topic-desc{font-size:.87rem;color:#596551;margin-top:.45rem}.topic-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px #0a1e1120}.topic-card:hover .topic-title{text-decoration:none}.topic-image img{transition:transform .65s var(--ease-soft)}.topic-card:hover img{transform:scale(1.025)}.exercise{background:#fffdf8;border-radius:26px;border:1px solid #e1e5d9;box-shadow:0 2px 5px #1f332205;transition:box-shadow .3s,transform .3s var(--ease-soft),border-color .3s}.exercise:hover{transform:translateY(-3px);box-shadow:0 12px 35px #1f33220c;border-color:#c7d0bc}.exercise-photo{margin:10px 10px 0;border-radius:19px;aspect-ratio:1.65}.exercise-photo>img{transition:transform .7s var(--ease-soft)}.exercise:hover .exercise-photo>img{transform:scale(1.025)}.duration-chip{background:#fffdf7f2;border:1px solid #ffffffb3;border-radius:999px;padding:6px 10px;font-size:.79rem;top:13px;left:13px;box-shadow:0 2px 8px #2530240b}.exercise-content{padding:1.35rem 1.45rem 1.45rem;min-height:262px}.exercise-title{font-family:'Manrope',sans-serif;font-size:1.6rem;line-height:1.28;font-weight:600;letter-spacing:-.045em;margin:0 0 .8rem;white-space:normal} .exercise-desc{font-size:.94rem;line-height:1.45;text-align:justify;min-height:3.4rem;color:#56604e}.exercise-content .card-bottom{margin-top:1.45rem;min-height:50px;padding:13px 18px;background:#ecf0e1;color:#2c4031;border:1px solid #d6dfc8;box-shadow:inset 0 1px 0 #ffffffa6;justify-content:center;gap:10px}.card-play{width:19px;height:19px;border-radius:0;background:transparent!important;color:inherit;order:-1;flex:none}.card-play svg{width:17px;height:17px;margin:0}.exercise:hover .card-bottom{background:#e2eacd;border-color:#bcccac;color:#2c4031}.exercise summary:active .card-bottom{transform:scale(.98)}.exercise[open]{border-color:#899e76;box-shadow:0 9px 28px #2f44260d}.exercise[open] .card-bottom{background:#dbe5c8;border-color:#b4c89c}.exercise-body{padding:1.2rem 1.45rem 1.55rem;border-color:#e2e6da;font-size:1rem;line-height:1.75;background:#f6f8ef}.exercise[open] .exercise-body{border-top:1px solid #e2e6da}.carousel-track{padding-top:7px;padding-bottom:24px;scroll-behavior:smooth}.carousel-progress{height:2px;max-width:140px}.resource{border-color:#c7d0bd;padding-top:1.45rem}.resource h3{font:600 1.25rem/1.4 'Manrope',sans-serif;letter-spacing:-.025em}.resource a{font-size:.9rem;text-decoration-thickness:1px;transition:color .2s,text-underline-offset .2s}.resource a:hover{color:#9d482f;text-underline-offset:6px} /* State changes fade smoothly; the header keeps its position. */ ::view-transition-old(root){animation:state-out .16s ease both}::view-transition-new(root){animation:state-in .25s ease both}@keyframes state-out{to{opacity:0}}@keyframes state-in{from{opacity:0}to{opacity:1}}.motion-enabled .reveal{transform:translateY(14px);transition:opacity .6s var(--ease-soft),transform .6s var(--ease-soft)}.motion-enabled .reveal.visible{transform:none}.topic-card,.exercise{backface-visibility:hidden} .large-text .header-row{padding:12px 20px}.large-text nav{justify-content:center}.large-text .hero{gap:2rem}.high .header-row,.high .access-panel{background:white;border-color:#111;box-shadow:none}.high .nav-indicator{background:#eee;border-color:#111}.high nav a[aria-current=location]{color:#000}.high .header-tools select,.high .header-tools button{color:#000}.high .secondary-btn,.high .topic-card,.high .exercise,.high .exercise-body{background:#fff;border-color:#111;color:#000}.high .card-bottom,.high .hero-actions .btn{background:#111!important;color:white!important;border-color:#111}.high .exercise-desc,.high .topic-desc{color:#111}.high .access-panel button{background:#fff;border-color:#111;color:#111}.high .access-panel button[aria-pressed=true]{background:#111;color:#fff} @supports(backdrop-filter:blur(10px)){.header-row{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}} @media(max-width:1120px){.header-row{gap:.8rem;padding-inline:16px}nav a{font-size:.8rem;padding-inline:11px}.hero-actions .btn{padding-inline:21px}.secondary-btn{padding-inline:18px}} @media(max-width:900px){.header-row{min-height:72px;padding:10px 14px;flex-wrap:nowrap}.header-tools{gap:3px}.menu-button{display:block}.header nav{position:absolute;top:calc(100% + 10px);left:0;right:0;display:none;margin:0;padding:12px;background:#fffdf8;border:1px solid #dbe1d1;border-radius:20px;box-shadow:0 16px 36px #2c40231a;max-height:65dvh;overflow:auto;z-index:31;pointer-events:auto}.header nav.open{display:grid;gap:5px}.header nav a{padding:15px 16px;font-size:1rem;border-radius:12px}.header nav a[aria-current=location]{background:#ebf0df}.nav-indicator{display:none}.large-text .header-row{flex-wrap:nowrap}.large-text nav{width:auto;justify-content:stretch}.header nav a:focus-visible{outline-offset:-2px}.hero{padding-top:3rem}.exercise-content{padding:1.3rem;min-height:265px}.exercise-title{font-size:1.45rem}.access-panel{right:0}.high .header nav{background:white;border-color:#111}} @media(max-width:650px){:root{scroll-padding-top:104px}.header{top:8px;margin-top:8px}.header-row{min-height:66px;padding:8px 10px;border-radius:20px}.header .brand{font-size:1.28rem;gap:.3rem}.header .brand-mark{width:25px;height:25px;font-size:1.45rem;margin-right:0}.header-tools select{font-size:.78rem;padding-inline:5px!important;max-width:56px}.header-tools{gap:0}.access-button,.menu-button{min-width:42px;min-height:44px}.hero{padding-top:2.25rem;padding-bottom:2.9rem;gap:2rem}.hero h1{font-size:clamp(3.1rem,12vw,4.4rem)}.hero-actions{gap:10px}.hero-actions .btn,.secondary-btn{font-size:.87rem;min-height:54px;padding:16px 18px;border-radius:13px}.photo-frame{border-radius:90px 22px 90px 22px;height:345px}.photo-note{left:0;bottom:1rem;font-size:.85rem}.quick-practice{margin-top:1.55rem}.feel-section{padding:2.4rem 0 2rem}.topic-image{margin:7px 7px 0;border-radius:15px;aspect-ratio:1.5}.topic-card{width:76%}.topic-content{padding:1rem 1.05rem 1.15rem}.topic-title{font-size:1.02rem}.topic-desc{font-size:.85rem}.exercise{width:90%;border-radius:24px}.exercise-photo{margin:9px 9px 0;aspect-ratio:1.55;border-radius:17px}.exercise-content{padding:1.3rem;min-height:267px}.exercise-title{font-size:1.55rem}.exercise-desc{font-size:.92rem}.exercise-content .card-bottom{font-size:.9rem;min-height:51px}.exercise-body{padding:1.2rem 1.3rem 1.4rem}.carousel-controls{gap:7px}.carousel-nav{width:44px;height:44px;min-width:44px}.duration-chip{font-size:.78rem}.section-heading h2{line-height:1.35}.large-text .header .brand-mark{display:none}.large-text .header-row{padding:8px}.large-text #language{max-width:63px}.large-text .access-button,.large-text .menu-button{min-width:40px}.large-text .header .brand{font-size:1.12rem}.large-text .hero-actions{align-items:stretch}.large-text .hero-actions a{justify-content:center}} .skip{z-index:100} @media(max-width:380px){.header-row{gap:.35rem}.header .brand-mark{display:none}.header .brand,.large-text .header .brand{font-size:1rem}} /* On a phone, show one complete card per swipe and let the copy set its height. */ @media(max-width:650px){ .topic-carousel .topic-card,.exercise-grid .exercise,.large-text .topic-carousel .topic-card,.large-text .exercise-grid .exercise{width:100%;min-width:100%} .topic-carousel .topic-image{aspect-ratio:1.95} .topic-carousel .topic-content{min-height:0;padding:1rem 1.15rem 1.15rem} .topic-carousel .topic-desc{min-height:0} .exercise-grid .exercise-photo{aspect-ratio:1.9} .exercise-grid .exercise-content,.exercise-grid .exercise-desc{min-height:0} } @media(prefers-reduced-motion:reduce){.carousel-track{scroll-behavior:auto}::view-transition-old(root),::view-transition-new(root){animation:none}.nav-indicator{transition:none}}@media(prefers-reduced-transparency:reduce){.header-row,.header.scrolled .header-row{background:#fffdf8;backdrop-filter:none;-webkit-backdrop-filter:none}}.no-motion .carousel-track{scroll-behavior:auto}.high .header-row{backdrop-filter:none;-webkit-backdrop-filter:none} /* Original identity, an explicit account action, and an open topic directory. */ .brand{gap:9px;letter-spacing:-.045em} .brand-logo{display:block;width:62px;height:auto;flex:none} .brand-name{font-size:1.22rem;font-weight:650;line-height:1.2} .header-row{gap:1rem} .header-tools{flex:none} .login-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:10px 14px;border:1px solid #bcc9af;border-radius:12px;background:#eaf0df;color:#2b4032;text-decoration:none;font-size:.84rem;font-weight:650;white-space:nowrap;transition:background .2s,transform .2s} .login-button:hover{background:#dce7cd} .login-button:active{transform:scale(.975)} .about-brand-logo{display:block;width:66px;height:auto;flex:none} .about-kicker{align-items:center} .about-kicker .eyebrow{padding:0} .topics-section{padding:4rem 0;background:#edf0e6;border-block:1px solid #e2e6d9;color:var(--ink)} .topics-layout{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.8fr);align-items:center;gap:3.5rem} .topics-intro .eyebrow{color:#596a4b;font-size:.74rem;letter-spacing:.08em;line-height:1.6;margin-bottom:1rem} .topics-intro h2{font-size:clamp(2.1rem,3.2vw,2.85rem);line-height:1.35;letter-spacing:-.045em;max-width:340px;text-wrap:balance} .topics-intro-copy{font-size:.97rem;line-height:1.8;color:#57624f;margin-top:1.25rem;max-width:330px} .topics-directory{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .topic-option{display:grid;grid-template-columns:80px minmax(0,1fr);gap:16px;align-items:center;padding:12px;background:#fffdf8;border:1px solid #dce2d3;border-radius:19px;text-decoration:none;min-width:0;box-shadow:0 2px 3px #27362703;transition:background .25s,border-color .25s,box-shadow .25s,transform .25s var(--ease-soft)} .topic-option-image{display:block;width:80px;aspect-ratio:1;overflow:hidden;border-radius:13px;background:#e6e7d9} .topic-option-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease-soft)} .topic-option-copy{display:block;min-width:0;padding:5px 4px 5px 0} .topic-option-title{display:block;font-size:1rem;font-weight:650;letter-spacing:-.025em;line-height:1.45} .topic-option-desc{display:block;color:#596451;font-size:.83rem;line-height:1.6;margin-top:4px} .topic-option:focus-visible{outline-offset:3px} .topic-option:active{transform:scale(.99)} @media(hover:hover){.topic-option:hover{background:#fffefb;border-color:#9faf8c;box-shadow:0 6px 18px #38472e09;transform:translateY(-2px)}.topic-option:hover img{transform:scale(1.045)}} .project-credits{display:grid;grid-template-columns:minmax(200px,.8fr) minmax(0,2fr);gap:3rem;border-top:1px solid #cbd0c3;padding:2rem 0 2.25rem} .credit-label{font-size:.75rem;letter-spacing:.06em;font-weight:650;text-transform:uppercase;color:#52604d;margin-bottom:1.1rem} .partner-logos,.funding-logos{display:flex;align-items:center;gap:2rem;flex-wrap:wrap;background:white;padding:20px 22px;border-radius:14px;min-height:112px} .partner-logos img{width:min(210px,100%);height:auto;display:block} .funding-logos .eu-logo{display:block;width:280px;max-width:100%;height:auto} .viaa-logo{display:block;max-width:220px;flex:1 1 180px} .viaa-logo img{display:block;width:100%;height:auto;max-height:74px;object-fit:contain} .high .topics-section{background:#f5f5f5;border-color:#111} .high .topic-option{background:white;border-color:#111;color:#000} .high .topics-intro-copy,.high .topics-intro .eyebrow,.high .topic-option-desc,.high .credit-label{color:#111} .high .login-button{background:#111;color:white;border-color:#111} .large-text .topics-layout{grid-template-columns:1fr;gap:2rem} .large-text .topics-intro h2,.large-text .topics-intro-copy{max-width:660px} @media(max-width:1100px){.header-row{gap:.65rem}.header .brand-logo{width:50px}.header .brand-name{font-size:1.1rem}.header nav a{padding-inline:9px}.login-button{padding-inline:11px}.topics-layout{grid-template-columns:1fr;gap:2rem}.topics-intro{display:grid;grid-template-columns:1fr 1fr;column-gap:2rem;align-items:end}.topics-intro .eyebrow{grid-column:1/-1}.topics-intro-copy{margin:0;max-width:420px}.topics-directory{gap:12px}.topic-option{grid-template-columns:86px minmax(0,1fr);gap:18px}.topic-option-image{width:86px}.project-credits{gap:1.5rem}.funding-logos{gap:1.5rem}.funding-logos .eu-logo{width:250px}} @media(max-width:900px){.header .brand-logo{width:58px}.header .brand-name{font-size:1.2rem}.header nav a{padding-inline:16px}.project-credits{grid-template-columns:1fr}.partner-logos{display:inline-flex;min-width:250px}.funding-logos{justify-content:flex-start;gap:3rem}} @media(max-width:650px){.header-row,.large-text .header-row{gap:8px;padding:8px 12px}.header .brand{gap:0;margin-right:auto}.header .brand-logo{width:60px}.header .brand-name{display:none}.header .header-tools{gap:3px;margin-left:0}.header-tools .login-button{font-size:.8rem;padding:10px 12px;gap:6px;min-height:44px}.header-tools .login-button svg{display:none}.header-tools select{max-width:54px}.topics-section{padding:2.6rem 0}.topics-layout{gap:1.65rem}.topics-intro{display:block}.topics-intro .eyebrow{margin-bottom:.75rem;font-size:.73rem}.topics-intro h2{font-size:2rem;max-width:100%;text-wrap:initial}.topics-intro-copy{margin-top:.9rem;font-size:.92rem;line-height:1.7;max-width:100%}.topics-directory{grid-template-columns:1fr;gap:10px}.topic-option{grid-template-columns:74px minmax(0,1fr);gap:16px;border-radius:17px;padding:11px 14px 11px 11px}.topic-option-image{width:74px;border-radius:11px}.topic-option-title{font-size:1.02rem}.topic-option-desc{font-size:.85rem;margin-top:3px}.topic-option-copy{padding:3px 0}.footer-row .brand-name{font-size:1.2rem}.footer-row .brand-logo{width:55px}.project-credits{padding:1.75rem 0;gap:1.6rem}.credit-label{font-size:.72rem;margin-bottom:.8rem}.partner-logos,.funding-logos{width:100%;padding:20px;min-width:0;min-height:0;border-radius:12px}.partner-logos img{width:200px}.funding-logos{gap:1.7rem;align-items:flex-start;flex-direction:column}.funding-logos .eu-logo{width:270px}.viaa-logo{flex:none;width:210px;max-width:100%}.large-text .topic-option{grid-template-columns:62px minmax(0,1fr);gap:12px}.large-text .topic-option-image{width:62px}} @media(max-width:380px){.header-row,.large-text .header-row{padding-inline:8px;gap:4px}.header .brand-logo{width:52px}.header .header-tools{gap:1px}.header-tools .login-button{padding-inline:9px}.large-text .header-tools .login-button{font-size:.72rem}.header-tools select{max-width:48px}.header-tools .access-button,.header-tools .menu-button{min-width:40px}.topic-option{gap:13px}} /* Softer editorial headings, shared by the homepage and interior pages. */ h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.025em} .hero h1,.page-heading h1{letter-spacing:-.035em;line-height:1.15} .topic-option-title,.exercise-title,.resource h3,.catalog-card h2,.help-service h3{font-family:var(--serif);font-weight:500;letter-spacing:-.015em;line-height:1.35} /* ===== pages.css ===== */ .inner-container{padding-top:1.5rem;padding-bottom:6rem;min-height:60vh}.breadcrumbs{display:flex;gap:.7rem;color:var(--muted);font-size:.875rem;margin:1rem 0 1.5rem}.section-tabs{display:flex;gap:.5rem;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:1.25rem;margin-bottom:3rem}.section-tabs a{text-decoration:none;padding:.6rem 1rem;border-radius:2rem;font-size:.95rem}.section-tabs a:hover,.section-tabs a[aria-current]{background:#e3e8db;color:#243b30}.page-heading{max-width:800px;margin-bottom:2.5rem}.page-heading h1{font-size:clamp(2.3rem,5vw,4.6rem);line-height:1.2;letter-spacing:-.045em;margin:.65rem 0 1.1rem}.page-heading>p:not(.eyebrow){max-width:620px;font-size:1.125rem;color:var(--muted)}.catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}.catalog-card{display:flex;flex-direction:column;text-decoration:none;background:#fffdf8;border-radius:1.5rem;overflow:hidden;border:1px solid var(--line);transition:transform .25s,box-shadow .25s}.catalog-card:hover{transform:translateY(-5px);box-shadow:0 14px 32px #2e443a10}.catalog-card>img{width:100%;height:auto;aspect-ratio:1.5;object-fit:cover}.catalog-card>div{padding:1.5rem;display:flex;flex:1;flex-direction:column;gap:.65rem}.catalog-card h2{font:500 1.5rem/1.35 Manrope,sans-serif;letter-spacing:-.035em} .catalog-card p:not(.eyebrow){color:var(--muted);text-align:justify}.card-action{display:block;margin-top:auto;padding-top:1.3rem;font-size:.9rem;font-weight:700}.detail-hero,.audio-layout{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:5rem;margin:1rem 0 4rem}.detail-hero>img{width:100%;height:460px;object-fit:cover;border-radius:2rem 2rem 7rem 2rem}.detail-hero .page-heading{margin-bottom:1.4rem}.detail-hero p{max-width:650px}.action-row{display:flex;align-items:center;flex-wrap:wrap;gap:.8rem;margin:1.8rem 0}.btn{border:0;font:600 1rem/1.4 Manrope,sans-serif;min-height:50px;justify-content:center;cursor:pointer}.btn.quiet{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px #2c403650}.btn.quiet:hover{background:#e3e8db}.pathway-promo{background:#e3e8db;border-radius:2rem;padding:3rem;display:flex;align-items:center;justify-content:space-between;gap:2rem}.pathway-promo h2,.instruction-panel h2,.reading-aside h2,.flow-panel h2{font-size:2rem;margin:.6rem 0 1rem}.pathway-promo p{max-width:650px}.reading-layout{display:grid;grid-template-columns:minmax(0,750px) 280px;gap:5rem;align-items:start}.reading-image{width:100%;height:310px;object-fit:cover;border-radius:1.5rem;margin-bottom:2rem}.reading-layout article section{margin:2rem 0}.reading-layout article section h2{font-size:1.8rem;margin-bottom:1rem}.reading-layout article section p{font-size:1.1rem;line-height:1.9}.reading-aside{position:sticky;top:150px;background:#e6eadf;border-radius:1.5rem;padding:1.6rem}.reading-aside a{display:block;margin-top:1.5rem}.source-note{border-top:1px solid var(--line);padding-top:1.5rem}.practice-layout{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}.practice-stage{border-radius:2rem;background:#e4e9dc;padding:2.5rem;text-align:center}.breathing-orb{width:min(260px,100%);aspect-ratio:1;margin:1rem auto 2rem;border-radius:50%;background:#d2dbc3;display:flex;flex-direction:column;justify-content:center;align-items:center;border:1px solid #b6c1a7;transition:transform 4s ease}.breathing-orb.inhale{transform:scale(1.06)}.clock{font-size:3rem;font-variant-numeric:tabular-nums;font-weight:400}.centered{justify-content:center}.instruction-panel>p{margin:1rem 0;line-height:1.85}.soft-note{color:var(--muted);font-size:.9rem;background:#eeede5;padding:1rem 1.2rem;border-radius:1rem;margin:1.2rem 0}.audio-layout{grid-template-columns:1fr 1.1fr}.audio-cover{width:100%;height:520px;object-fit:cover;border-radius:2rem 7rem 2rem 2rem}.audio-player{padding:1.5rem;background:#e5e9dd;border-radius:1.5rem;margin:1.6rem 0}.audio-player input{width:100%;accent-color:#2c4036;margin-top:1.5rem;min-height:44px}.audio-times{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums;font-size:.9rem}.step-tabs{display:flex;gap:1rem;margin:2rem 0}.step-tabs span{flex:1;border-bottom:3px solid #d4d8cd;padding:1rem 0}.step-tabs .active{border-color:#2c4036;font-weight:700}.flow-panel{max-width:800px;margin:auto;background:#fffdf8;border:1px solid var(--line);border-radius:2rem;padding:3rem}.flow-panel p{margin-bottom:1.5rem}.choice-list{border:0;padding:0;margin:1rem 0}.choice-list legend{font:400 1.8rem/1.5 var(--serif);margin-bottom:1rem}.choice-list label{display:flex;gap:.8rem;align-items:center;border:1px solid var(--line);border-radius:1rem;padding:1rem;margin-bottom:.7rem;cursor:pointer}.choice-list label:has(:checked){background:#e3e8db;border-color:#53644c}.choice-list input{width:20px;height:20px;accent-color:#2c4036;flex:none}.auth-layout{display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:start;max-width:1100px;margin:auto}.auth-image{position:sticky;top:145px;overflow:hidden;border-radius:2rem}.auth-image>img{width:100%;height:650px;object-fit:cover;display:block}.auth-image>p{position:absolute;left:2rem;right:2rem;bottom:2rem;background:#fffdf8ee;padding:1.5rem;border-radius:1rem;font:1.65rem/1.5 var(--serif)}.auth-form-wrap .page-heading h1{font-size:3rem}.form-field{display:flex;flex-direction:column;gap:.5rem;margin:1.2rem 0;font-weight:600}.form-field input{width:100%;background:#fffdf8;border:1px solid #96a18e;border-radius:.8rem;min-height:54px;padding:.8rem 1rem;font:inherit}.check-field{display:flex;align-items:start;gap:.65rem;font-size:.9rem;margin:1rem 0}.check-field input{min-width:20px;min-height:20px;accent-color:#2c4036}.auth-links{display:flex;flex-wrap:wrap;gap:1rem;font-size:.9rem;margin-top:1.5rem}.auth-form-wrap form>.btn{width:100%;margin-top:1rem}.text-control{background:none;border:0;padding:.5rem 0;text-decoration:underline;font-size:.9rem}.urgent-note,.about-note-panel{padding:2rem;border-radius:1.5rem;background:#efdfce;margin-bottom:3rem}.urgent-note h2{font-size:1.6rem;margin-bottom:.7rem}.help-list{max-width:900px}.help-list>p{margin:1rem 0 2rem}.help-service{display:flex;justify-content:space-between;align-items:center;gap:2rem;padding:1.5rem 0;border-top:1px solid var(--line);text-decoration:none}.help-service h3{font:600 1.2rem/1.5 Manrope,sans-serif}.help-service span{font-size:.9rem;text-decoration:underline}.about-note-panel p{margin:1rem 0;max-width:900px}.legal-body{max-width:800px;line-height:1.9}.legal-body p{margin:1rem 0}.legal-body h2{font-size:1.6rem;margin:2rem 0 1rem}.inner-container{animation:page-enter .4s ease both}@keyframes page-enter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}input:focus-visible{outline:3px solid #7c4128;outline-offset:3px}.high .catalog-card,.high .flow-panel,.high .soft-note,.high .practice-stage,.high .audio-player,.high .reading-aside,.high .pathway-promo,.high .urgent-note,.high .about-note-panel{background:#fff;color:#111;border:1px solid #111}.high p,.high .page-heading>p{color:#111}.high .breathing-orb{color:#111;background:#eee}.no-motion .inner-container{animation:none}.no-motion .breathing-orb,.no-motion .catalog-card{transition:none}.no-motion .breathing-orb.inhale{transform:none}@media(prefers-reduced-motion:reduce){.inner-container{animation:none}.breathing-orb,.catalog-card{transition:none}.breathing-orb.inhale{transform:none}}@media(max-width:1000px){.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-hero,.audio-layout,.practice-layout,.auth-layout{gap:2rem}.reading-layout{gap:2rem;grid-template-columns:minmax(0,1fr) 240px}.auth-image>img{height:560px}}@media(max-width:700px){.inner-container{padding-top:.5rem;padding-bottom:3rem}.section-tabs{gap:.25rem;margin-bottom:2rem}.section-tabs a{font-size:.9rem;padding:.5rem .75rem}.page-heading h1{font-size:2.5rem}.catalog-grid,.detail-hero,.audio-layout,.practice-layout,.reading-layout,.auth-layout{grid-template-columns:minmax(0,1fr)}.catalog-card{display:grid;grid-template-columns:110px minmax(0,1fr);border-radius:1rem}.catalog-card>img{height:100%;aspect-ratio:auto;min-height:180px}.catalog-card>div{padding:1.1rem;gap:.5rem}.catalog-card h2{font-size:1.25rem}.catalog-card .eyebrow{font-size:.75rem}.catalog-card p:not(.eyebrow){font-size:.9rem}.card-action{font-size:.85rem;padding-top:.5rem}.detail-hero>img{height:260px;grid-row:1;border-radius:1.5rem}.detail-hero{gap:1.5rem;margin-bottom:2rem}.pathway-promo{padding:1.5rem;display:block}.pathway-promo>.btn{margin-top:1.5rem}.reading-aside{position:static}.reading-image{height:230px}.practice-stage{padding:1.5rem}.flow-panel{padding:1.5rem;border-radius:1.3rem}.step-tabs{gap:.6rem;font-size:.8rem}.audio-cover{height:250px;border-radius:1.5rem}.audio-layout{gap:1.5rem}.auth-image{display:none}.auth-form-wrap .page-heading h1{font-size:2.5rem}.help-service{display:block}.help-service span{display:block;margin-top:.7rem}.urgent-note{padding:1.5rem}} #navigation a[aria-current=page]{background:#e3e8db;border-radius:12px} .high .btn.quiet{color:#fff} .catalog-card,.detail-hero>div,.auth-form-wrap,.instruction-panel{min-width:0} .page-heading h1,.catalog-card h2{overflow-wrap:anywhere} .legal-body h2 p{margin:0} @media(max-width:420px){.catalog-card{grid-template-columns:90px minmax(0,1fr)}.catalog-card>div{padding:.9rem}.section-tabs a{padding:.5rem}.step-tabs{flex-direction:column;gap:0}.step-tabs span{padding:.5rem}.page-heading h1{font-size:2.1rem}.breathing-orb{max-width:210px}.practice-stage .btn{width:100%}} /* Softer editorial headings, shared by the homepage and interior pages. */ h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.025em} .hero h1,.page-heading h1{letter-spacing:-.035em;line-height:1.15} .topic-option-title,.exercise-title,.resource h3,.catalog-card h2,.help-service h3{font-family:var(--serif);font-weight:500;letter-spacing:-.015em;line-height:1.35} /* ===== course.css ===== */ .course-shell{display:grid;grid-template-columns:250px minmax(0,1fr);gap:48px;margin:40px 0 80px;align-items:start}.course-aside{padding:22px 0;position:sticky;top:125px}.course-aside h2{font-size:2rem;line-height:1.25;margin:12px 0 32px}.course-phases{list-style:none;padding:0;display:grid;gap:8px}.course-phases li{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:16px;color:#59665b}.course-phases li[aria-current]{background:#dfe7d8;color:#243e31;font-weight:700}.course-phases li span{width:20px;text-align:center}.course-aside-note{border-top:1px solid #d7dbcf;margin:30px 0 24px;padding-top:24px}.course-aside-note p{font-size:.95rem;line-height:1.7}.course-aside>a{font-size:.95rem;text-underline-offset:5px}.course-card{background:#fffefa;border:1px solid #e1e3d7;border-radius:32px;padding:32px 40px;box-shadow:0 15px 60px #263d2c06;min-width:0;animation:course-enter .3s ease both}.course-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.course-tag{background:#f0ead9;border-radius:99px;padding:8px 16px;font-size:.9rem;color:#43513e}.course-card-top>a{display:grid;place-items:center;width:44px;height:44px;border:1px solid #d7dbcf;border-radius:50%;font-size:1.7rem;text-decoration:none}.course-card h1{font-size:clamp(1.9rem,3.3vw,2.8rem);line-height:1.22;margin:0 0 28px}.course-content p{font-size:1.05rem;line-height:1.85;margin:20px 0;white-space:normal}.course-content video{width:100%;aspect-ratio:16/9;display:block;border-radius:20px;background:#253e32}.course-audio{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;background:#eff2e9;border-radius:18px;padding:16px 20px;margin:24px 0}.course-audio audio{width:100%;min-width:0}.course-transcript{border-top:1px solid #dee2d6;border-bottom:1px solid #dee2d6;padding:18px 0}.course-transcript summary{cursor:pointer;font-weight:600;min-height:30px}.course-choices{display:grid;gap:12px;margin-top:24px}.course-choices a{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 24px;border:1px solid #d6dccf;border-radius:18px;text-decoration:none;font-size:1rem;line-height:1.65;background:#f8f9f2;transition:background .2s,border-color .2s,transform .2s}.course-choices a:hover{background:#eaf0df;border-color:#64815c;transform:translateY(-2px)}.course-choices span{flex-shrink:0}.course-actions{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin:32px 0 24px;padding-top:24px;border-top:1px solid #e1e3d7}.course-actions .primary{margin-left:auto}.course-source{font-size:.875rem;color:#57634e;text-underline-offset:4px}.course-practice{text-align:center;background:#eff2e8;padding:28px;border-radius:24px}.course-practice .action-row{justify-content:center}.course-orb{width:180px;height:180px;margin:12px auto 32px;border-radius:50%;background:#d4dfc4;border:1px solid #b3c2a1;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform 4s ease}.course-orb.inhale{transform:scale(1.1)}.course-orb strong{font-size:2.5rem;font-family:var(--serif)}.course-error:empty{display:none}.course-card :focus-visible{outline:3px solid #846233;outline-offset:5px}.course-card h1:focus{outline:none}@keyframes course-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media(max-width:850px){.course-shell{grid-template-columns:1fr;gap:20px;margin-top:20px}.course-aside{position:static;padding:0}.course-aside h2,.course-aside-note,.course-aside>a,.course-aside>.eyebrow{display:none}.course-phases{display:flex;flex-wrap:wrap;gap:4px;margin:0}.course-phases li{font-size:.85rem;padding:8px}.course-phases li span{width:12px}.course-card{padding:24px;border-radius:24px}.course-audio{grid-template-columns:1fr;gap:8px}.course-card h1{font-size:2rem}}@media(max-width:420px){.course-card{padding:20px 16px}.course-choices a{padding:18px 16px}.course-shell{margin-bottom:40px}.course-phases li{font-size:.8rem;gap:4px}}@media(prefers-reduced-motion:reduce){.course-card,.course-orb,.course-choices a{animation:none;transition:none;transform:none!important}}.no-motion .course-card,.no-motion .course-orb,.no-motion .course-choices a{animation:none;transition:none;transform:none!important}.high .course-card,.high .course-choices a{border-color:currentColor;color:#000;background:#fff}.course-transcript summary{min-height:44px;display:flex;align-items:center} /* ===== player.css ===== */ .mb-player{--player-ink:#263e32;--player-accent:#e4dfb9;position:relative;border-radius:24px;overflow:hidden;background:#20392e;color:#fff}.mb-player video{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:radial-gradient(ellipse at 50% 80%,#466353,#1d332a);border-radius:0!important} .mb-player audio{display:none}.mp-controls{display:flex;align-items:center;gap:12px;padding:16px 20px;background:#20392e}.mp-controls button,.mp-overlay{border:0;display:grid;place-items:center;flex-shrink:0;cursor:pointer;min-width:48px;min-height:48px;color:inherit;background:transparent;border-radius:50%;transition:background .2s,transform .2s} .mp-controls button:hover{background:#ffffff20}.mp-controls .mp-play{width:54px;height:54px;background:#e4dfb9;color:#20392e}.mp-controls .mp-play:hover{background:#f1edcf;transform:scale(1.04)}.mp-overlay{position:absolute;left:50%;top:calc((100% - 86px)/2);transform:translate(-50%,-50%);width:78px;height:78px;background:#f8f6e8ed;color:#20392e;box-shadow:0 0 0 12px #ffffff14} .mp-overlay svg{width:32px;height:32px}.is-playing .mp-overlay,.has-started .mp-overlay{display:none} .mp-timeline{flex:1;position:relative;min-width:40px}.mp-timeline input{width:100%;height:32px;cursor:pointer;appearance:none;-webkit-appearance:none;background:transparent;margin:0;display:block}.mp-timeline input::-webkit-slider-runnable-track{height:4px;border-radius:5px;background:linear-gradient(to right,#e4dfb9 var(--played,0%),#ffffff40 var(--played,0%))}.mp-timeline input::-moz-range-track{height:4px;border-radius:5px;background:#ffffff40}.mp-timeline input::-moz-range-progress{height:4px;background:#e4dfb9}.mp-timeline input::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border-radius:50%;background:#f4efcb;margin-top:-5px}.mp-timeline input::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#f4efcb}.mp-volume{display:flex;align-items:center;flex-shrink:0}.mp-volume input{width:84px;height:32px;cursor:pointer;appearance:none;-webkit-appearance:none;background:transparent;margin:0 4px 0 0}.mp-volume input::-webkit-slider-runnable-track{height:4px;border-radius:5px;background:linear-gradient(to right,#e4dfb9 var(--vol,100%),#ffffff40 var(--vol,100%))}.mp-volume input::-moz-range-track{height:4px;border-radius:5px;background:#ffffff40}.mp-volume input::-moz-range-progress{height:4px;background:#e4dfb9}.mp-volume input::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border-radius:50%;background:#f4efcb;margin-top:-5px}.mp-volume input::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#f4efcb}.mb-audio .mp-volume button:hover{background:#26413020}.mb-audio .mp-volume input::-webkit-slider-runnable-track{background:linear-gradient(to right,#35523e var(--vol,100%),#aebca3 var(--vol,100%))}.mb-audio .mp-volume input::-webkit-slider-thumb{background:#35523e}.mb-audio .mp-volume input::-moz-range-progress,.mb-audio .mp-volume input::-moz-range-thumb{background:#35523e}.mb-audio .mp-volume input::-moz-range-track{background:#aebca3} .mp-times{display:flex;position:absolute;width:100%;justify-content:space-between;gap:8px;font-size:.875rem;font-variant-numeric:tabular-nums;color:#f0f2e9}.mp-status{margin:0!important;padding:0 20px 12px;font-size:.9rem!important;line-height:1.4!important;color:inherit!important}.mp-status:empty{display:none}.mb-player :focus-visible{outline:3px solid #f5d28e;outline-offset:3px}.course-audio-new{margin:26px 0}.course-audio-new>strong{display:block;margin-bottom:12px;font-size:1rem}.mb-audio{background:#e9eddf;color:#263e32;border:1px solid #d5ddc9;border-radius:22px}.mb-audio .mp-controls{background:transparent;padding:20px}.mb-audio .mp-play{background:#2e4938;color:#fff}.mb-audio .mp-play:hover{background:#3e5c46}.mb-audio .mp-times{color:#3b5141}.mb-audio .mp-timeline input::-webkit-slider-runnable-track{background:linear-gradient(to right,#35523e var(--played,0%),#aebca3 var(--played,0%))}.mb-audio .mp-timeline input::-webkit-slider-thumb{background:#35523e}.mb-audio .mp-timeline input::-moz-range-progress,.mb-audio .mp-timeline input::-moz-range-thumb{background:#35523e}.mb-player:fullscreen{display:flex;flex-direction:column;justify-content:center;background:#111}.mb-player:fullscreen video{flex:1;min-height:0;max-height:calc(100dvh - 90px);object-fit:contain}.mb-player:-webkit-full-screen{display:flex;flex-direction:column;justify-content:center;width:100%;height:100%;background:#111}.mb-player:-webkit-full-screen video{flex:1;min-height:0;max-height:calc(100vh - 90px);object-fit:contain}.guided-practice{padding:32px;background:#edf0e3;border-radius:24px;margin-bottom:24px}.guided-progress{display:flex;gap:7px;margin-bottom:28px}.guided-progress span{height:4px;border-radius:4px;background:#cbd4c1;flex:1}.guided-progress span.active{background:#426044}.guided-task{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,3vw,2.25rem);line-height:1.5;min-height:150px;margin:16px 0 30px;white-space:pre-line}.guided-task:focus{outline:none}.guided-controls{display:flex;gap:12px;justify-content:space-between}.guided-controls button:disabled{opacity:.45;cursor:default}.course-practice{background:radial-gradient(ellipse at top,#f5f5eb,#e2e9d7);padding:36px 24px}.course-orb,.breathing-orb{background:radial-gradient(circle at 30% 25%,#e9eddb,#c4d3b3);box-shadow:0 0 0 12px #d9e3ce60,0 0 0 24px #d9e3ce25;border:1px solid #b7c8a6}.course-orb{width:210px;height:210px;margin:25px auto 40px}.course-orb span{font-size:1rem;padding:0 16px}.practice-stage{background:radial-gradient(ellipse at top,#f5f5eb,#e2e9d7);border:1px solid #d4dfc9}.course-practice .btn,.practice-stage .btn{min-width:135px;border-radius:16px;min-height:56px}.auth-guest{margin:24px 0 28px;padding:22px;background:#e9eddf;border:1px solid #d3ddc7;border-radius:20px}.auth-guest .btn{width:100%;background:#fffdf8;color:#263e32;border:1px solid #82947a}.auth-guest p{font-size:.925rem;margin:12px 0 0;line-height:1.6;color:#43523e}.high .mb-audio,.high .guided-practice,.high .auth-guest{background:#fff;color:#111;border:2px solid #111}.high .mp-times{color:inherit}.high .auth-guest .btn{color:#111!important;border:2px solid #111}.high .guided-controls .quiet{color:#111!important}.high .course-practice .quiet{color:#111!important}@media(max-width:600px){.mp-controls{gap:5px;padding:12px}.mp-controls button{min-width:44px;min-height:44px}.mp-controls .mp-play{width:48px;height:48px}.mb-video .mp-back{display:none}.mp-volume input{width:56px}.mb-audio .mp-controls{padding:16px;gap:10px}.mp-overlay{width:64px;height:64px}.guided-practice{padding:24px 20px}.guided-task{min-height:180px;font-size:1.65rem}.guided-controls{gap:10px}.guided-controls .btn{flex:1;min-height:54px;padding:12px}.course-practice .action-row,.practice-stage .action-row{display:flex;flex-wrap:nowrap}.course-practice .btn,.practice-stage .btn{min-width:0;flex:1;width:auto}.course-orb{width:180px;height:180px}.course-actions{position:sticky;bottom:0;background:#fffefaed;backdrop-filter:blur(12px);padding:14px 0 max(14px,env(safe-area-inset-bottom));margin-bottom:16px;z-index:2}.course-actions .btn{min-height:52px}.mb-player{border-radius:18px}.auth-guest{padding:18px}.practice-layout{gap:24px}.instruction-panel{padding:0 4px}}@media(prefers-reduced-motion:reduce){.mp-controls button,.mp-overlay{transition:none}}.no-motion .mp-controls button,.no-motion .mp-overlay{transition:none} /* ===== focus.css ===== */ /* Inner pages use one navigation; practice keeps only essential controls. */ .inner-container>.page-heading{margin-bottom:2rem}.inner-container>.page-heading h1,.detail-hero .page-heading h1,.reading-layout .page-heading h1{font-size:clamp(2rem,3.6vw,3rem);line-height:1.25}.detail-hero{display:block;max-width:850px;margin:1rem 0 2.5rem}.detail-hero .page-heading{margin-bottom:1rem}.auth-layout{display:block;max-width:520px}.auth-form-wrap .page-heading{margin-bottom:1.5rem}.auth-form-wrap .page-heading h1{font-size:2.5rem}.pathway-promo{background:transparent;border-radius:0;border-top:1px solid var(--line);padding:24px 0;margin-top:24px}.pathway-promo .eyebrow{display:none}.pathway-promo h2{font-size:1.7rem}.focus-page>.header{position:relative;top:0;margin:0;background:transparent}.focus-page .header-row{min-height:68px;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;background:transparent;padding:8px 0}.focus-page #navigation,.focus-page #menu,.focus-page .login-button,.focus-page>footer{display:none!important}.focus-page .header .brand{margin-right:auto;font-size:1.2rem}.focus-page .header .brand-logo{width:42px;height:30px;object-fit:contain}.focus-page .header-tools{margin-left:auto;gap:8px}.focus-exit{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border:1px solid #bac5b1;border-radius:12px;text-decoration:none;font-size:.95rem;font-weight:600;color:var(--ink)}.focus-exit:hover{background:#e9eddf}.focus-page .inner-container{max-width:900px;padding-top:28px;padding-bottom:32px;min-height:calc(100dvh - 70px);animation:none}.focus-page .course-shell{display:block;margin:0}.focus-page .course-card{border:0;box-shadow:none;background:transparent;padding:8px 0 20px;border-radius:0}.focus-page .course-card-top{margin-bottom:18px}.focus-page .course-tag{background:transparent;padding:0;color:#52654a;font-size:.9rem}.focus-page .course-card h1{font-size:clamp(1.8rem,3.6vw,2.6rem);margin-bottom:24px;max-width:780px}.focus-page .course-content{max-width:100%}.focus-page .course-actions{margin:24px 0 0;padding:20px 0 0;min-height:60px}.focus-page .page-heading{margin:0 0 24px;max-width:100%}.focus-page .page-heading h1{font-size:clamp(1.8rem,3.6vw,2.6rem);margin-top:0}.focus-page .page-heading .eyebrow{display:none}.focus-page .page-heading>p{font-size:1rem;margin-bottom:0}.focus-page .audio-layout{display:block;max-width:720px;margin:0 auto}.focus-page .audio-layout .mb-player{margin:28px 0}.focus-page .audio-layout>div>a{display:none}.focus-page .practice-layout{display:flex;flex-direction:column;gap:24px;align-items:stretch;max-width:720px;margin:auto}.focus-page .instruction-panel{order:-1;padding:0}.focus-page .instruction-panel>.eyebrow{display:none}.focus-page .instruction-panel>p{margin:0;line-height:1.8}.focus-page .instruction-panel>.soft-note{padding:0;background:none;margin-top:8px;font-size:.9rem}.focus-page .practice-stage{padding:28px 24px}.focus-page .flow-panel{max-width:100%;box-shadow:none}.focus-page .guided-practice{margin-top:12px}.focus-page .course-choices a{background:#fffdf8}.focus-page .course-choices a:hover{background:#eaf0df}.high .focus-exit{border-color:#111;color:#111}.high.focus-page .course-tag{color:#111}@media(max-width:600px){.focus-page .header-row{min-height:60px}.focus-page .header .brand-name{display:none}.focus-page .header .brand-logo{width:40px;height:30px}.focus-page .header-tools{gap:2px}.focus-exit{padding:10px 12px}.focus-page .inner-container{padding-top:20px;padding-bottom:24px}.focus-page .course-card h1{font-size:1.85rem;margin-bottom:20px}.focus-page .course-card-top{margin-bottom:12px}.focus-page .course-actions{background:#f8f6f0f5;padding-bottom:max(12px,env(safe-area-inset-bottom));margin-bottom:0}.focus-page .practice-stage{padding:22px 16px}.focus-page .page-heading h1{font-size:1.85rem}.focus-page .page-heading{margin-bottom:18px}.focus-page .guided-task{min-height:140px}.inner-container{padding-top:16px}.breadcrumbs{margin-top:0}.pathway-promo{margin-bottom:0}} /* Long-form steps: narrow reading measure and semantic hierarchy. */ .focus-page .course-card.is-reading{max-width:720px;margin:0 auto}.is-reading .course-reading{max-width:65ch}.course-reading .reading-intro{margin-bottom:38px}.course-reading p{font-size:1.0625rem;line-height:1.8;margin:0 0 18px;color:#354638}.course-reading .reading-lead{font-size:1.2rem;line-height:1.7;color:#253c2f;margin-bottom:22px}.course-reading .reading-section{margin:0 0 38px}.course-reading .reading-section h2{font-family:var(--serif);font-size:1.65rem;font-weight:500;letter-spacing:-.015em;line-height:1.4;margin:0 0 16px;color:#263e32}.reading-symptoms{list-style:disc;display:grid;grid-template-columns:1fr 1fr;column-gap:36px;row-gap:10px;margin:16px 0 0;padding-left:22px;font-size:1.0625rem;line-height:1.65}.reading-symptoms li{padding-left:3px;break-inside:avoid}.reading-symptoms li::marker{color:#617951}.panic-cycle{list-style:none;display:flex;align-items:stretch;gap:0;margin:18px 0 24px;padding:18px 20px;background:#e9eddf;border-radius:16px}.panic-cycle li{display:flex;align-items:center;gap:12px;flex:1;font-size:.95rem;font-weight:600;line-height:1.6}.panic-cycle li>span:first-child{flex:1}.panic-cycle .cycle-arrow{padding-right:12px;color:#536b49;font-size:1.3rem;font-weight:400}.course-reading .reading-support{border-left:3px solid #84956d;padding:4px 0 4px 24px;margin-top:40px}.reading-support p:last-child{margin-bottom:0}.is-reading .course-actions{max-width:720px}.high .course-reading p,.high .course-reading .reading-section h2{color:#111}.high .panic-cycle{background:#fff;border:1px solid #111;color:#111}@media(max-width:600px){.course-reading .reading-intro,.course-reading .reading-section{margin-bottom:30px}.course-reading p{font-size:1.0625rem;line-height:1.8;margin-bottom:16px}.course-reading .reading-lead{font-size:1.15rem}.course-reading .reading-section h2{font-size:1.45rem;margin-bottom:14px}.reading-symptoms{grid-template-columns:1fr;gap:9px;padding-left:23px}.panic-cycle{display:block;padding:20px 24px}.panic-cycle li{flex-direction:column;align-items:flex-start;gap:6px}.panic-cycle .cycle-arrow{display:block;transform:rotate(90deg);padding:0;width:24px;height:28px;text-align:center;line-height:24px}.course-reading .reading-support{padding-left:18px}.focus-page .is-reading .course-actions{position:static;background:transparent}} /* ===== experience.css ===== */ .access-button svg{display:block}.access-panel{width:min(390px,100%)}.access-panel .access-intro{font-size:.82rem;line-height:1.55;color:var(--muted);margin:-3px 4px 8px}.access-panel .access-reset{padding-right:13px;text-align:center;background:transparent;font-weight:600}.access-panel .access-reset:after{display:none}.links-visible main a:not(.btn):not(.topic-option):not(.catalog-card):not(.exercise){text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.24em}.text-spacing main p,.text-spacing main li,.text-spacing main label{line-height:1.9!important;letter-spacing:.035em;word-spacing:.12em}.text-spacing main h1,.text-spacing main h2,.text-spacing main h3{line-height:1.45!important;letter-spacing:.01em}.guest-panel{position:absolute;right:0;top:12px;z-index:34;width:min(330px,100%);padding:20px;border:1px solid #d8ddcf;border-radius:20px;background:#fffdf8;box-shadow:0 16px 46px #27372a20;pointer-events:auto}.guest-panel strong{display:block;font-size:1rem}.guest-panel p{font-size:.86rem;line-height:1.6;color:var(--muted);margin:8px 0 16px}.guest-progress{margin:16px 0;padding:15px;border:1px solid #d8e0d0;border-radius:15px;background:#f1f4e9}.guest-progress>span{display:block;margin-bottom:3px;color:#5a6759;font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.guest-progress>strong{font-size:.95rem}.guest-progress-track{height:6px;margin:12px 0 8px;overflow:hidden;border-radius:8px;background:#d2dacb}.guest-progress-track>span{display:block;height:100%;border-radius:inherit;background:#436149}.guest-panel .guest-progress p{margin:0 0 11px;font-size:.78rem}.guest-panel .guest-resume{min-height:44px;padding:10px 12px;border:0;border-radius:11px;background:#294536;color:#fff;justify-content:center;text-align:center}.guest-panel .guest-resume:hover{background:#3a5b47}.guest-account-actions{border-top:1px solid #e2e5dc}.guest-panel a,.guest-panel button{display:flex;width:100%;min-height:46px;align-items:center;padding:11px 13px;border:0;border-top:1px solid #e2e5dc;background:transparent;color:inherit;text-align:left;text-decoration:none;font:600 .9rem/1.4 Manrope,sans-serif}.guest-account-actions a:first-child{border-top:0}.guest-panel button{cursor:pointer}.guest-panel a:hover,.guest-panel button:hover{background:#edf1e6}.login-button.guest-mode{background:#e7ecdf;color:#294132}.login-button.guest-mode:after{content:'';width:7px;height:7px;border-radius:50%;background:#56734f;margin-left:1px}.high .guest-panel{background:#fff;border:2px solid #111;color:#111}.high .guest-panel p{color:#111}.high .guest-progress{background:#fff;border:2px solid #111}.high .guest-progress-track{background:#bbb;border:1px solid #111}.high .guest-progress-track>span,.high .guest-panel .guest-resume{background:#111;color:#fff}.high .guest-panel a,.high .guest-panel button{border-color:#111}.high .login-button.guest-mode{background:#111;color:#fff}.high .login-button.guest-mode:after{background:#fff}.inner-page-footer .project-credits{display:none}.footer-row.no-brand{justify-content:flex-end}.footer-row.no-brand p{margin-right:auto}@media(max-width:650px){.access-panel,.guest-panel{right:0;left:0;width:100%;top:8px}.access-panel{max-height:78dvh}.guest-panel{padding:17px}.text-spacing main p,.text-spacing main li,.text-spacing main label{letter-spacing:.025em;word-spacing:.08em}} /* ===== engagement.css ===== */ .guest-panel{max-height:min(720px,calc(100dvh - 110px));overflow:auto} .guest-engagement{margin:16px 0;border-top:1px solid #e2e5dc;padding-top:15px} .guest-engagement-title{display:flex;flex-direction:column;gap:3px} .guest-engagement-title>span{font-weight:700} .guest-engagement-title small{color:var(--muted);font-size:.76rem;line-height:1.4} .milestone-row{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 15px} .milestone-chip{display:inline-flex;align-items:center;min-height:32px;padding:6px 9px;border:1px solid #d8ddcf;border-radius:99px;color:#748074;font-size:.72rem;line-height:1.25} .milestone-chip.earned{border-color:#9eaf91;background:#e7eddf;color:#294536;font-weight:700} .saved-exercises>strong{font-size:.82rem} .guest-panel .saved-exercises a{min-height:38px;padding:7px 0;border:0;font-size:.82rem;text-decoration:underline;text-underline-offset:3px} .guest-panel .guest-private-note{margin:10px 0 0;font-size:.72rem;line-height:1.45} .favorite-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:9px 14px;border:1px solid #b9c4b1;border-radius:13px;background:#fffdf8;color:#294536;font:600 .88rem/1.2 Manrope,sans-serif;cursor:pointer} .favorite-button>span:first-child{font-size:1.3rem;line-height:1} .favorite-button.is-saved{background:#e7eddf;border-color:#8fa182} .favorite-button:hover{background:#edf1e6} .exercise-card-shell{position:relative} .exercise-card-shell>.favorite-button{position:absolute;top:14px;right:14px;z-index:2;width:44px;padding:0;border-radius:50%;box-shadow:0 5px 18px #27372a18} .exercise-card-shell>.favorite-button>span:last-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .exercise-heading-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:-10px 0 24px} .guest-merge-hint{margin:0 0 18px;padding:14px 16px;border-left:3px solid #7f956f;background:#edf1e6;color:#36483a;font-size:.9rem;line-height:1.6} .route-guide-button{display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid #bac5b1;border-radius:12px;background:transparent;color:var(--ink);font:700 1rem Manrope,sans-serif;cursor:pointer} .route-guide-button:hover{background:#e9eddf} .coach-target{position:relative;z-index:72!important;outline:4px solid #d9a976!important;outline-offset:7px!important;border-radius:12px;scroll-margin:110px} .route-coach{position:fixed;z-index:90;padding:24px;border:1px solid #d7ddcf;border-radius:22px;background:#fffdf8;color:var(--ink);box-shadow:0 24px 70px #17281d35;animation:coach-in .22s ease both} .route-coach:before{content:'';position:absolute;left:var(--coach-arrow);width:16px;height:16px;background:#fffdf8;border:1px solid #d7ddcf;transform:translateX(-50%) rotate(45deg)} .route-coach[data-side="bottom"]:before{top:-9px;border-right:0;border-bottom:0} .route-coach[data-side="top"]:before{bottom:-9px;border-left:0;border-top:0} .route-coach .tutorial-close{right:10px;top:9px} .route-coach .eyebrow{margin:0 42px 13px 0} .route-coach h2{font-family:var(--serif);font-size:1.65rem;line-height:1.25;margin:0 0 10px} .route-coach>p:not(.eyebrow){margin:0;color:#48564b;font-size:.95rem;line-height:1.65} .route-coach .tutorial-count{margin-bottom:16px} .route-coach .tutorial-actions{margin-top:20px} @keyframes coach-in{from{opacity:0;transform:translateY(7px) scale(.98)}to{opacity:1;transform:none}} .route-tutorial{width:min(520px,calc(100% - 32px));padding:0;border:0;border-radius:24px;background:#fffdf8;color:var(--ink);box-shadow:0 24px 90px #17281d42} .route-tutorial::backdrop{background:#1f33288c;backdrop-filter:blur(3px)} .route-tutorial form{position:relative;padding:30px} .tutorial-close{position:absolute;right:15px;top:14px;width:44px;height:44px;border:0;border-radius:50%;background:transparent;font-size:1.7rem;color:inherit;cursor:pointer} .route-tutorial .eyebrow{margin-bottom:16px} .route-tutorial h2{font-family:var(--serif);font-size:2rem;line-height:1.25;margin:0 0 12px} .route-tutorial p:not(.eyebrow){font-size:1rem;line-height:1.7;color:#48564b;max-width:45ch} .tutorial-count{display:flex;gap:7px;margin:0 0 20px} .tutorial-count span{width:28px;height:4px;border-radius:4px;background:#d7ddcf} .tutorial-count span.active{background:#47634c} .tutorial-actions{display:flex;justify-content:space-between;gap:12px;margin-top:26px} .high .favorite-button,.high .route-guide-button{border:2px solid #111;background:#fff;color:#111} .high .route-coach{border:2px solid #111;background:#fff;color:#111}.high .route-coach:before{background:#fff;border-color:#111}.high .route-coach>p:not(.eyebrow){color:#111}.high .coach-target{outline-color:#111!important} .high .milestone-chip{border-color:#111;color:#111} .high .milestone-chip.earned{background:#111;color:#fff} .high .route-tutorial{background:#fff;color:#111} .high .route-tutorial p:not(.eyebrow){color:#111} .no-motion .route-tutorial::backdrop{backdrop-filter:none}.no-motion .route-coach{animation:none} @media(max-width:650px){.route-tutorial form{padding:26px 22px}.route-tutorial h2{font-size:1.65rem}.tutorial-actions{flex-direction:column-reverse}.tutorial-actions .btn{width:100%}.exercise-heading-actions{margin-top:-4px}.favorite-button{font-size:.82rem}} /* ===================================================================== Адаптация дизайна под реальные данные (Laravel-шаблоны resources/views/handoff). Ниже — только элементы, которых нет в прототипе /redesign. ===================================================================== */ main:focus{outline:none} .hp-field{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden} /* Шапка: профиль, режим практики («Мені важко», «Вийти», «?»). */ .login-button.is-auth{background:#fffdf8} .focus-page .focus-help{border-color:#d9b38c;background:#f7ecdd;color:#5b3a1c} .focus-page .focus-help:hover{background:#f0dfc8} .high .focus-page .focus-help,.high.focus-page .focus-help{background:#fff;color:#111;border-color:#111} @media(max-width:600px){.focus-page .focus-help,.focus-exit{padding:10px;font-size:.85rem}.focus-page .header-tools #language{display:none}} /* Хлебные крошки и заголовки страниц. */ .breadcrumbs a{text-underline-offset:.2em} .page-heading .btn{margin-top:1rem} .page-lead{color:var(--muted);font-size:1.05rem;max-width:680px} .topic-descr{max-width:720px;color:var(--muted);font-size:1.05rem;line-height:1.8} .topic-descr p{margin:0 0 1rem} /* Главная: «Продовжити» и карточки упражнений. */ .continue-section{padding:1.5rem 0 .5rem} .continue-title{font-size:1.6rem;margin-bottom:1rem} .continue-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem} .continue-card{display:flex;flex-direction:column;gap:.6rem;padding:1.2rem 1.3rem;border:1px solid var(--line);border-radius:18px;background:#fffdf8;text-decoration:none;transition:background .2s,transform .2s} .continue-card:hover{background:#eef2e6;transform:translateY(-2px)} .continue-name{font:500 1.2rem/1.35 var(--serif)} .continue-meta{font-size:.85rem;color:var(--muted)} .exercise-body p{margin:0 0 1rem} .exercise-body-actions{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center} .about-text p{margin:0 0 1rem;color:var(--muted)} .about-text{max-width:660px} /* Шкала прогресса маршрута. */ .route-progress{display:block;height:6px;border-radius:6px;background:#dde3d4;overflow:hidden} .route-progress>span{display:block;height:100%;border-radius:inherit;background:#436149;transition:width .4s var(--ease-soft,ease)} .route-progress-top{margin:-8px 0 22px} .route-card-progress{display:flex;align-items:center;gap:.6rem;font-size:.85rem;color:var(--muted)} .route-card-progress[hidden]{display:none} .route-card-progress .route-progress{flex:1} .topic-routes{border-top:1px solid var(--line);padding-top:2rem} .topic-routes h2{font-size:2rem;margin:.4rem 0 .6rem} .topic-routes-intro{color:var(--muted);max-width:640px;margin-bottom:1.6rem} /* Шаг маршрута. */ .course-count{font-size:.9rem;color:var(--muted)} .course-image{display:block;width:100%;max-height:420px;object-fit:cover;border-radius:20px;margin:0 0 24px} .course-content .mb-player{margin:24px 0} .course-content .instruction-panel p{font-size:1.05rem;line-height:1.85} .video-embed{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:#20392e;margin:24px 0} .video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .custom-timer{margin:24px 0}.custom-timer .wrap{margin-inline:auto} .practice-stage{margin:24px 0} .timer-status:empty{display:none} .route-reward{text-align:center} .route-badge{font-size:3rem;line-height:1;margin-bottom:12px} .route-points{font-weight:700;color:#3b5640} .route-steps{margin-top:28px;border-top:1px solid #e1e3d7;padding-top:16px} .route-steps summary{min-height:44px;display:flex;align-items:center;font-weight:600;cursor:pointer} .route-steps ol{margin:8px 0 0;padding-left:22px;display:grid;gap:6px} .route-steps li[hidden]{display:none} .route-steps [aria-current]{font-weight:700} .course-choices a,.quiz-choice{min-height:56px} /* Опросники — те же «шаги», ответы как варианты маршрута. */ .quiz-step{border:0;margin:0;padding:0;min-width:0} .quiz-step legend{padding:0;margin:0 0 8px;width:100%} .quiz-step legend h1{font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.3;margin:0} .quiz-step legend h1:focus{outline:none} .quiz-choice{display:flex;align-items:center;gap:14px;padding:18px 22px;border:1px solid #d6dccf;border-radius:18px;background:#f8f9f2;cursor:pointer;font-size:1rem;line-height:1.6;transition:background .2s,border-color .2s} .quiz-choice:hover{background:#eaf0df;border-color:#64815c} .quiz-choice input{width:22px;height:22px;flex:none;accent-color:#2c4036} .quiz-choice:has(:checked){background:#e3e8db;border-color:#53644c} .quiz-result{padding-top:8px} .quiz-result:focus{outline:none} .form-status{margin:12px 0 0;font-size:.95rem;color:#5b3a1c} .form-status:empty{display:none} .high .quiz-choice{background:#fff;color:#111;border-color:#111} /* Формы. */ .form-field textarea,.form-field select{width:100%;background:#fffdf8;border:1px solid #96a18e;border-radius:.8rem;min-height:54px;padding:.8rem 1rem;font:inherit;color:inherit} .form-field textarea{resize:vertical;min-height:140px} .check-field small{display:block;color:var(--muted);font-weight:400;margin-top:.2rem} .form-errors{margin:0 0 1rem;padding:1rem 1.2rem 1rem 2.2rem;border-radius:1rem;background:#f7e4dc;color:#6b2c18} .form-errors[hidden]{display:none} .form-subtitle{font-size:1.5rem;margin:2rem 0 .5rem} .guest-merge-hint[hidden]{display:none} .guest-merge-hint .check-field{margin:0} .guest-merge-summary{margin:.4rem 0 0 2rem;font-size:.85rem;color:var(--muted)} .guest-merge-summary:empty{display:none} .feedback-panel{margin-top:3rem;max-width:720px;margin-inline:0} .a11y-content{margin-bottom:2rem} .text-page a,.legal-body a{color:#3b5640} /* Медитации. */ .meditation-track{margin:1.6rem 0} .meditation-track-title{font:600 1.05rem/1.4 Manrope,sans-serif;margin:0 0 .7rem} /* Сохранённые вправи гостя на странице вправ. */ .saved-strip{margin:0 0 2rem;padding:1.2rem 1.4rem;border:1px solid var(--line);border-radius:18px;background:#eef2e6} .saved-strip h2{font-size:1.3rem;margin-bottom:.6rem} .saved-strip ul{margin:0;padding-left:1.2rem;display:grid;gap:.3rem} /* Профиль. */ .profile-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;flex-wrap:wrap} .profile-head .page-heading{margin-bottom:1.5rem} .profile-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-bottom:2.5rem} .profile-stat{padding:1.2rem;border:1px solid var(--line);border-radius:18px;background:#fffdf8;display:flex;flex-direction:column;gap:.2rem} .profile-stat b{font:500 2rem/1.2 var(--serif)} .profile-stat span{font-size:.88rem;color:var(--muted)} .profile-section{margin:0 0 2.8rem} .profile-section>h2,.profile-section h2{font-size:1.8rem;margin-bottom:1rem} .profile-section.guest-engagement{border-top:0;padding-top:0} .profile-route{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.2rem 0;border-top:1px solid var(--line);flex-wrap:wrap} .profile-route-info{flex:1;min-width:220px;display:grid;gap:.5rem} .profile-route-info h3{font-size:1.35rem} .profile-route-info p{font-size:.88rem;color:var(--muted)} .profile-route-action{display:flex;align-items:center;gap:1rem} .profile-route-exercises{margin:0 0 1rem;padding-left:1.2rem;display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;font-size:.92rem} .badge-done{display:inline-flex;align-items:center;min-height:36px;padding:6px 12px;border-radius:99px;background:#e7eddf;color:#294536;font-weight:700;font-size:.85rem} .card-title{font:500 1.35rem/1.35 var(--serif)} .milestone-row{list-style:none;padding:0} .guest-panel button[aria-pressed=true]{font-weight:700} .guest-panel button[aria-pressed]:after{content:'';margin-left:auto;width:22px;height:12px;border:1px solid #829177;border-radius:999px;background:#dce3d3;box-shadow:inset 8px 0 0 #fffef8} .guest-panel button[aria-pressed=true]:after{background:#2e4836;box-shadow:inset -8px 0 0 #fffef8} /* Уведомление об этапе пути / переносе данных — ненавязчивое, вне практики. */ .mb-toast{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:80;width:min(520px,calc(100% - 32px));display:flex;align-items:flex-start;gap:12px;padding:16px 18px;border:1px solid #d7ddcf;border-radius:18px;background:#fffdf8;box-shadow:0 16px 46px #27372a26;animation:coach-in .22s ease both} .mb-toast[hidden]{display:none} .mb-toast p{flex:1;margin:0;font-size:.95rem;line-height:1.6} .mb-toast-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px} .mb-toast-actions .btn{min-height:44px;padding:10px 16px} .mb-toast-close{flex:none;width:44px;height:44px;border:0;border-radius:50%;background:transparent;font-size:1.5rem;cursor:pointer} .high .mb-toast{background:#fff;color:#111;border:2px solid #111} .no-motion .mb-toast{animation:none} /* Облачко туториала: при увеличении текста до 200% прокручивается внутри. */ body.text-200 .route-coach{overflow:auto} /* Узкие экраны (до 320 CSS px). */ @media(max-width:420px){.container{width:calc(100% - 32px)}.profile-route-action{width:100%}.profile-route-action .btn{flex:1}.continue-list{grid-template-columns:1fr}.course-actions .btn{flex:1}} .footer-bottom>.footer-funding{flex-shrink:1;min-width:0;max-width:760px;display:grid;gap:.5rem} /* Увеличенный текст 150/200 %: шапка остаётся одной строкой, разделы уходят в меню (как на узком экране), а сама шапка растёт умереннее основного текста. */ .large-text .header-row{flex-wrap:nowrap;gap:1rem} .large-text .menu-button{display:block} .large-text .header-tools{margin-left:auto;flex-wrap:nowrap} .large-text .header nav{order:0;width:auto;position:absolute;top:calc(100% + 10px);left:0;right:0;display:none;margin:0;padding:12px;background:#fffdf8;border:1px solid #dbe1d1;border-radius:20px;box-shadow:0 16px 36px #2c40231a;max-height:65dvh;overflow:auto;z-index:31;pointer-events:auto} .large-text .header nav.open{display:grid;gap:5px} .large-text .header nav a{padding:15px 16px;font-size:1rem;border-radius:12px} .large-text .nav-indicator{display:none} .high.large-text .header nav{background:#fff;border-color:#111} .text-150 .header .brand,.text-150 .header-tools,.text-150 .header nav,.text-150 .access-panel,.text-150 .guest-panel{zoom:.8} .text-200 .header .brand,.text-200 .header-tools,.text-200 .header nav,.text-200 .access-panel,.text-200 .guest-panel{zoom:.65} .large-text .header-tools select{max-width:none!important} .text-200 .route-coach,.text-200 .mb-toast{zoom:.8} /* Контент при увеличенном тексте не должен вылезать по ширине экрана. */ .large-text main{overflow-wrap:break-word} .large-text .btn,.large-text .secondary-btn{white-space:normal;max-width:100%;text-align:center} .large-text .hero-copy,.large-text .hero-actions>*{min-width:0;max-width:100%} @media(max-width:650px){ .large-text .header .brand-name{display:none} .text-200 .header .brand,.text-200 .header-tools,.text-200 .header nav,.text-200 .access-panel,.text-200 .guest-panel{zoom:.55} .large-text h1,.large-text .hero h1,.large-text .page-heading h1{font-size:min(12vw,4.4rem)!important;hyphens:auto} .large-text h2{font-size:min(9vw,2.4rem);hyphens:auto} .large-text .eyebrow{letter-spacing:.04em} .large-text .hero-actions{flex-direction:column;align-items:stretch} } .footer-bottom>div{flex-wrap:wrap;gap:.4rem 1.2rem}.footer-bottom a{overflow-wrap:anywhere} .large-text .hero{grid-template-columns:1fr} .large-text .hero h1{font-size:min(9vw,5.1rem)} .large-text .hero-visual{max-width:640px} .large-text h1,.large-text h2,.large-text h3{overflow-wrap:normal;word-break:normal} /* Размер текста в панели доступности: 3 кнопки 100/150/200 %. */ .text-size{display:grid;gap:8px;padding:12px 13px;border:1px solid #dde2d5;border-radius:12px;background:#f6f6ee} .text-size-label{font-size:.86rem;line-height:1.5} .text-size-options{display:grid;grid-template-columns:repeat(3,1fr);gap:6px} .access-panel .text-size-options button{padding:10px 6px;min-height:44px;text-align:center;font-weight:600;background:#fffdf8} .access-panel .text-size-options button:after{display:none} .access-panel .text-size-options button[aria-pressed=true]{background:#2e4836;color:#fff;border-color:#2e4836} .high .text-size{background:#fff;border-color:#111} .high .access-panel .text-size-options button[aria-pressed=true]{background:#111;color:#fff} /* Панель уменьшена через zoom — компенсируем её максимальную высоту. */ .text-150 .access-panel{max-height:calc((100dvh - 110px) / .8)} .text-200 .access-panel{max-height:calc((100dvh - 110px) / .65)} @media(max-width:650px){.text-200 .access-panel{max-height:calc((100dvh - 100px) / .55)}} /* Сообщение плеера (только ошибки) — поверх, без сдвига разметки. */ .mb-player .mp-status{position:absolute;left:12px;right:12px;bottom:calc(100% - 44px);padding:8px 12px!important;border-radius:10px;background:#20392eE6;color:#fff!important} .mb-audio .mp-status{bottom:auto;top:calc(100% + 6px);background:#f7ecdd;color:#5b3a1c!important} /* Кнопки шага маршрута прилипают к низу экрана, пока текст не закончился; дальше стоят под текстом. */ .course-actions,.focus-page .course-actions,.focus-page .is-reading .course-actions{position:sticky;bottom:0;z-index:2;background:var(--paper,#f8f6f0);padding-top:16px;padding-bottom:max(16px,env(safe-area-inset-bottom));margin-bottom:0;transition:box-shadow .2s} /* Панель — тоже