/* Original Suber lesson design. All colour choices follow existing shared tokens. */
:root{color:var(--ink);background:var(--canvas)}
.phone-help{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:17px;line-height:1.6;color:var(--ink);background-color:var(--canvas)}
.phone-help *{box-sizing:border-box}.phone-help [hidden]{display:none!important}.phone-help a{color:var(--purple);text-underline-offset:3px}.phone-help button,.phone-help select,.phone-help input{font:inherit}.phone-help :is(a,button,summary,input,select):focus-visible{outline:3px solid var(--purple);outline-offset:4px}.phone-help h1,.phone-help h2,.phone-help h3,.phone-help h4{color:var(--ink);line-height:1.2;letter-spacing:-.025em}.phone-help h2{font-size:clamp(1.65rem,2.8vw,2.1rem);margin:0 0 12px}.phone-help h3{font-size:1.35rem;margin:0 0 10px}.phone-help h4{font-size:1.05rem;margin:0 0 7px}.phone-help p{margin:0 0 16px}.phone-help .small{font-size:.86rem;color:var(--muted);line-height:1.5}.phone-help .eyebrow{color:var(--purple);font-size:.73rem;letter-spacing:.1em;font-weight:800;margin:0 0 12px;text-transform:uppercase}.phone-help button,.phone-help select{min-height:46px;border:1px solid var(--control-line);border-radius:10px;padding:10px 14px;background:var(--paper);color:var(--ink)}.phone-help button{cursor:pointer;font-weight:650}.phone-help button:hover{background:var(--subtle)}.phone-help summary{cursor:pointer;min-height:46px}.phone-help .skip{position:fixed;left:14px;top:-100px;z-index:99;padding:14px;background:var(--paper);color:var(--purple)}.phone-help .skip:focus{top:10px}
.phone-layout{display:grid;grid-template-columns:214px minmax(0,1fr);min-height:100vh;max-width:1800px;margin:auto;align-items:start}.phone-sidebar{position:sticky;top:0;max-height:100vh;overflow-y:auto;padding:24px 14px 18px;background:var(--paper);border-right:1px solid var(--line)}.phone-brand{display:block;padding:0 8px 20px}.phone-brand img{width:166px;height:auto;display:block}.phone-sidebar summary{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.8rem;font-weight:700;color:var(--muted);list-style:none;padding:8px}.phone-sidebar summary span{font-size:.7rem;color:var(--purple)}.phone-sidebar summary::-webkit-details-marker{display:none}.phone-sections{display:flex;flex-direction:column;gap:2px}.phone-sections a{display:flex;align-items:center;min-height:44px;padding:9px 10px;border-radius:9px;color:var(--ink);text-decoration:none;font-size:.88rem;font-weight:600;line-height:1.3}.phone-sections a:hover{background:var(--subtle)}.phone-sections a[aria-current]{color:var(--purple);background:var(--lavender);font-weight:800}.phone-sidebar>p{padding:16px 8px;border-top:1px solid var(--line);font-size:.73rem;margin-top:16px}.phone-page{min-width:0;padding:0 clamp(16px,3vw,42px)}.phone-header{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:78px;border-bottom:1px solid var(--line)}.phone-header>a{display:flex;align-items:center;gap:8px;font-weight:800;text-decoration:none}.phone-header nav{display:flex;flex-wrap:wrap;gap:18px}.phone-header a{min-height:44px;align-content:center;font-size:.88rem}.ui-icon{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8}
.phone-hero{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(220px,1fr);align-items:center;gap:34px;padding:48px 0 38px}.phone-hero h1{font-size:clamp(2.25rem,4vw,3.75rem);line-height:1.04;letter-spacing:-.05em;margin:0 0 20px}.phone-hero .lead{color:var(--muted);max-width:54ch;font-size:1.12rem}.primary-link{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-height:48px;border-radius:10px;background:var(--accent-fill);color:var(--on-accent)!important;text-decoration:none;font-weight:700;padding:12px 18px;margin:8px 0 16px}.hero-visual{background:var(--lavender);border:1px solid var(--line);border-radius:24px;padding:20px 16px 24px;text-align:center}.hero-visual .lesson-diagram{max-height:250px}.hero-visual p{font-weight:750;margin:0 0 5px}.hero-visual span{font-size:.72rem;color:var(--muted)}
.learning-setup{background:var(--paper);border:1px solid var(--line);padding:26px;border-radius:16px;margin-bottom:34px}.path-buttons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:22px 0 10px}.path-buttons button{text-align:left;min-height:84px}.path-buttons button strong,.path-buttons button span{display:block}.path-buttons button span{font-size:.76rem;font-weight:400;margin-top:4px}.path-buttons button[aria-pressed=true]{background:var(--accent-fill);color:var(--on-accent);border-color:var(--accent-fill)}.device-picker{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:22px;border-top:1px solid var(--line);padding-top:20px;margin-top:20px}.device-picker label{font-weight:700;display:block;margin-bottom:8px}.device-picker select{display:block;width:100%;max-width:100%;font-size:.9rem}.device-picker p{margin:0}.version-note{border-top:1px solid var(--line);padding-top:12px;margin-top:16px}.version-note summary{font-weight:650;color:var(--purple)}.version-note p{font-size:.88rem}.lesson-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:0 0 18px}.lesson-heading p{color:var(--muted);font-size:.83rem;margin:0 0 12px;max-width:27ch}.lesson-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start}.lesson-card{background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden;min-width:0;scroll-margin-top:20px}.lesson-art{background:var(--subtle);border-bottom:1px solid var(--line);position:relative;display:flex;justify-content:center;padding:12px 44px}.lesson-diagram{display:block;width:100%;max-width:330px;height:auto;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.lesson-diagram text{stroke:none;fill:var(--ink);font-size:14px;font-family:inherit}.lesson-diagram .diagram-accent{stroke:var(--purple);stroke-width:3.5}.lesson-diagram .letter-small{font-size:35px}.lesson-diagram .letter-big{font-size:72px}.time-label{position:absolute;top:14px;right:14px;background:var(--paper);border:1px solid var(--line);padding:4px 9px;font-size:.7rem;border-radius:99px;color:var(--muted)}.lesson-copy{padding:24px}.lesson-copy>p:not(.eyebrow){color:var(--muted);font-size:.95rem}.lesson-content>summary{display:flex;align-items:center;justify-content:space-between;list-style:none;color:var(--purple);font-weight:750;border-top:1px solid var(--line);padding:12px 0 0}.lesson-content>summary::-webkit-details-marker{display:none}.lesson-content[open]>summary span{transform:rotate(45deg)}.lesson-body{padding-top:20px}.applies{font-size:.8rem;padding:12px 14px;border-left:3px solid var(--purple);background:var(--subtle);color:var(--muted)}.applies strong{color:var(--ink)}.lesson-steps{padding-left:26px;counter-reset:steps}.lesson-steps li{padding-left:7px;margin:0 0 20px}.lesson-steps li::marker{color:var(--purple);font-weight:800}.lesson-steps p{font-size:.93rem;line-height:1.65}.lesson-tip{font-size:.84rem;padding:14px;border:1px solid var(--line);border-radius:10px;margin:0 0 22px;color:var(--muted)}.practice{border:1px solid var(--line);border-radius:12px;background:var(--subtle);padding:18px;margin:0 0 20px}.practice h4{font-size:1.2rem;margin-bottom:16px}.practice p{font-size:.88rem}.practice .eyebrow{font-size:.62rem}.practice button{font-size:.8rem;text-align:left}.practice-buttons,.demo-actions{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.practice .device-instruction{font-weight:700;color:var(--purple)}.practice [role=status]{margin:14px 0 0;font-size:.84rem}.mini-phone{max-width:290px;border:3px solid var(--control-line);border-radius:24px;background:var(--paper);padding:22px 16px}.mini-phone[data-device-art=home]::after{content:'';display:block;width:25px;height:25px;border:2px solid var(--control-line);border-radius:50%;margin:12px auto 0}.mini-phone[data-device-art=face]::after{content:'';display:block;width:65px;height:5px;background:var(--control-line);border-radius:6px;margin:12px auto 0}.sample-message{border:1px solid var(--line);border-radius:8px;padding:16px;background:var(--paper);min-height:70px;overflow-wrap:anywhere}.sample-poster{padding:18px;background:var(--paper);border:2px dashed var(--control-line);border-radius:8px;font-weight:700;line-height:1.5}.sample-poster.selected{background:var(--lavender);border:2px solid var(--purple)}.replacement-key{display:flex;align-items:center;gap:10px;font-size:.76rem}.replacement-key strong{display:block;font-size:.88rem}.practice label{display:block;font-size:.85rem}.practice input[type=range]{display:block;width:100%;height:44px;accent-color:var(--purple)}.lesson-check{display:flex;align-items:flex-start;gap:10px;padding:14px 0;font-size:.9rem;cursor:pointer}.lesson-check input{width:22px;height:22px;flex:0 0 22px;margin:2px 0 0;accent-color:var(--purple)}.lesson-source{font-size:.75rem;color:var(--muted);border-top:1px solid var(--line);padding-top:16px;margin:10px 0 0!important}.lesson-source a{display:inline-block;padding:6px 0}.lesson-source .small{font-size:.68rem}.reset-row{margin:22px 0 36px;padding:20px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}.reset-row p{margin:8px 0 0}.how-it-works{display:grid;grid-template-columns:1fr 1.5fr;gap:36px;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:28px}.how-it-works p,.how-it-works li{font-size:.88rem;color:var(--muted)}.how-it-works li{margin-bottom:12px}.how-it-works ol{padding-left:22px}.scope-note{padding:24px 0;font-size:.85rem;color:var(--muted)}.phone-footer{padding:24px 0 36px;border-top:1px solid var(--line);font-size:.75rem;color:var(--muted)}.phone-footer a{display:inline-block;min-height:44px;padding-top:9px}.notice{padding:18px;background:var(--paper);border:1px solid var(--line)}
html:is([data-photo-background=true],[data-weather-background=true]) body.phone-help[data-shared-theme-family=phone-help] main>:is(.phone-hero,#lessons){background:transparent!important;border-radius:0;box-shadow:none}.phone-help:is([data-shared-theme-family]) .phone-hero>div:first-child,.phone-help .lesson-heading,.phone-help .scope-note,.phone-help .phone-header,.phone-help .phone-footer{background:var(--paper);border-radius:12px;padding:20px}.phone-help .phone-hero>div:first-child{padding:24px}.phone-help .phone-header{border-radius:0}
@media(max-width:1100px){.phone-hero{gap:20px;grid-template-columns:minmax(0,1.5fr) minmax(180px,1fr)}.phone-page{padding-inline:22px}.path-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}.lesson-copy{padding:20px}.lesson-art{padding-inline:30px}}
@media(max-width:900px){.phone-layout{display:block}.phone-sidebar{position:relative;max-height:none;padding:12px 16px;border-right:0;border-bottom:1px solid var(--line)}.phone-brand{padding:0 0 8px}.phone-brand img{width:144px}.phone-sections{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.phone-sidebar>p{display:none}.phone-page{padding-inline:18px}.phone-hero{padding-top:28px}.phone-sidebar summary{padding-inline:0}}
@media(max-width:650px){.phone-help{font-size:17px}.phone-header{align-items:flex-start;flex-direction:column;gap:0;padding:12px 0!important}.phone-header nav{gap:18px}.phone-header a{font-size:.82rem}.phone-sections{grid-template-columns:repeat(2,minmax(0,1fr))}.phone-hero{grid-template-columns:1fr;gap:18px;padding-top:20px}.phone-hero>div:first-child{padding:18px!important}.phone-hero h1{font-size:2.5rem}.hero-visual{display:none}.learning-setup{padding:20px}.path-buttons button{padding:11px;min-height:82px}.path-buttons button strong{font-size:.95rem}.path-buttons button span{font-size:.7rem}.device-picker{grid-template-columns:1fr;gap:12px}.lesson-heading{display:block}.lesson-heading p{max-width:none;margin-bottom:0}.lesson-grid{grid-template-columns:1fr}.lesson-art{padding-block:10px}.lesson-diagram{max-height:180px}.how-it-works{grid-template-columns:1fr;gap:18px;padding:22px}.lesson-copy{padding:22px}.lesson-source a{overflow-wrap:anywhere}.practice-buttons{flex-direction:column}.practice button{width:100%}.phone-footer{padding-inline:16px!important}}
@media(prefers-reduced-motion:reduce){.phone-help *{scroll-behavior:auto;transition:none!important;animation:none!important}}
@media(forced-colors:active){.phone-help,.phone-help :is(.lesson-card,.practice,.learning-setup,.sample-poster,.sample-message,.phone-sidebar,.phone-header,.hero-visual,.how-it-works,.reset-row,.phone-footer){color:CanvasText!important;background:Canvas!important;border-color:CanvasText!important}.phone-help a{color:LinkText!important}.phone-help button[aria-pressed=true]{border:3px solid Highlight}.lesson-diagram{stroke:CanvasText}.lesson-diagram text{fill:CanvasText}.lesson-diagram .diagram-accent{stroke:Highlight}}
@media print{.phone-sidebar,.phone-header,.path-buttons,.device-picker,.practice,.reset-row,.hero-visual{display:none}.phone-layout,.lesson-grid,.phone-hero,.how-it-works{display:block}.phone-help [data-lesson][hidden]{display:block!important}.lesson-content>.lesson-body{display:block!important}.phone-page{padding:0}.phone-help{background:white;color:black}.lesson-card{break-inside:avoid;margin-bottom:20px}.lesson-art{display:none}.lesson-source a{overflow-wrap:anywhere}.phone-hero h1{font-size:30px}}

/* Keep the shared still backdrop visible between opaque lesson surfaces. */
html:is([data-photo-background=true],[data-weather-background=true]) body.phone-help[data-shared-theme-family=phone-help] main{background:transparent!important}
.phone-help .phone-header{flex-wrap:wrap}.phone-help #weather-background-caption{flex-basis:100%;font-size:.72rem;color:var(--muted);min-height:0;font-weight:400}.phone-help .lesson-art{flex-direction:column;align-items:center}.phone-help .diagram-caption{font-size:.68rem;color:var(--muted);text-align:center;margin-top:-3px}