#tab-help,.guided-tour { --learn-text:#f2f4f7; --learn-muted:#b8bfc8; --learn-accent:#f5c070; --learn-raised:#1e2227; --learn-panel:#171a1e; --learn-border:#535b65; --learn-hover:#262b31; }
html[data-theme="light"] #tab-help,html[data-theme="light"] .guided-tour { --learn-text:#20252c; --learn-muted:#515b68; --learn-accent:#80500d; --learn-raised:#f4f5f7; --learn-panel:#fff; --learn-border:#818b98; --learn-hover:#e9ecf0; }
/* Reading surface: graphite, clear sections, one amber action. */
#tab-help { max-width:760px; color:var(--learn-text); padding:20px 20px calc(100px + env(safe-area-inset-bottom)); }
#tutorial-center { font:400 15px/1.65 Outfit,system-ui,sans-serif; overflow-wrap:anywhere; }
#tutorial-center ::selection { background:#e9a23b; color:#16130c; }
#tutorial-center .learning-head { margin:18px 0; }
#tutorial-center h1 { font-size:clamp(26px,5vw,36px); line-height:1.18; letter-spacing:-.025em; margin:0 0 14px; text-wrap:balance; }
#tutorial-center p { color:var(--learn-muted); max-width:65ch; }
#tutorial-center .learning-head p { margin:10px 0; }
#tutorial-center .learning-progress { font-size:13px; color:var(--learn-accent); font-variant-numeric:tabular-nums; }
#tutorial-center button { font:inherit; cursor:pointer; touch-action:manipulation; }
#tutorial-center .learning-resume { display:block; width:100%; padding:16px 18px; text-align:left; margin-top:20px; border:1px solid var(--learn-border); border-radius:12px; background:var(--learn-raised); color:var(--learn-text); font-weight:600; }
#tutorial-center .learning-search-label { display:block; font-size:14px; font-weight:600; margin-bottom:8px; }
#tutorial-center > input { width:100%; box-sizing:border-box; min-height:48px; padding:12px 14px; margin:0; font:inherit; font-size:16px; color:var(--learn-text); background:var(--learn-panel); border:1px solid var(--learn-border); border-radius:12px; caret-color:var(--learn-accent); }
#tutorial-center input::placeholder { color:var(--learn-muted); opacity:1; }
#tutorial-center .learning-filters { display:flex; gap:8px; overflow-x:auto; padding:4px 2px 8px; margin:12px -2px; scrollbar-width:thin; scrollbar-color:var(--learn-border) transparent; }
#tutorial-center .learning-filters button { flex-shrink:0; }
#tutorial-center .learning-filters button { min-height:44px; padding:8px 12px; border:1px solid var(--learn-border); border-radius:12px; background:transparent; color:var(--learn-muted); font-size:13px; }
#tutorial-center .learning-filters button[aria-pressed=true] { background:#e9a23b; color:#16130c; border-color:#e9a23b; font-weight:700; }
#tutorial-center .learning-results { font-size:13px; margin:20px 0 0; }
#tab-help > .action-pill { width:auto; min-height:44px; padding:10px 16px; margin:0; }
#tutorial-center .tutorial-list section { margin-top:32px; }
#tutorial-center .tutorial-list h2 { margin:0 0 8px; font-size:18px; line-height:1.35; }
#tutorial-center .learning-topic { position:relative; padding:18px 28px 18px 0; border-bottom:1px solid var(--learn-border); min-height:80px; }
#tutorial-center .learning-topic::after { content:''; position:absolute; right:5px; top:28px; width:7px; height:7px; border-top:1.5px solid var(--learn-muted); border-right:1.5px solid var(--learn-muted); transform:rotate(45deg); }
#tutorial-center .learning-topic strong { font-size:16px; line-height:1.4; font-weight:600; }
#tutorial-center .learning-topic span { color:var(--learn-muted); font-size:14px; margin-top:5px; }
#tutorial-center .learning-topic small { display:block; margin-top:9px; color:var(--learn-accent); font-size:12px; }
#tutorial-center .learning-empty { padding:24px 0; }
#tutorial-center .learning-back { min-height:44px; padding:8px 12px; background:var(--learn-raised); border:1px solid var(--learn-border); border-radius:12px; color:var(--learn-text); margin-top:16px; }
#tutorial-center .learning-steps { list-style:none; counter-reset:steps; padding:0; margin:32px 0; }
#tutorial-center .learning-steps li { counter-increment:steps; position:relative; padding:0 0 24px 44px; margin-bottom:24px; border-bottom:1px solid var(--learn-border); }
#tutorial-center .learning-steps li::before { content:counter(steps); position:absolute; top:0; left:0; width:28px; height:28px; border-radius:50%; background:#e9a23b; color:#16130c; font-weight:700; font-size:14px; text-align:center; line-height:28px; font-variant-numeric:tabular-nums; }
#tutorial-center .learning-steps h2 { font-size:18px; line-height:1.45; margin:0 0 8px; }
#tutorial-center .learning-steps p { margin:0; }
#tutorial-center .learning-article-actions { display:flex; flex-wrap:wrap; gap:12px; padding-bottom:20px; }
#tutorial-center .learning-article-actions p { margin:0 0 8px; }
#tutorial-center .learning-primary,#tutorial-center .learning-secondary { flex:1 1 200px; padding:13px 16px; min-height:48px; border-radius:12px; font-weight:600; }
#tutorial-center .learning-primary { background:#e9a23b; border:1px solid #e9a23b; color:#16130c; }
#tutorial-center .learning-secondary { background:var(--learn-raised); border:1px solid var(--learn-border); color:var(--learn-text); }
#tutorial-center :is(button,input):focus-visible { outline:2px solid var(--learn-accent); outline-offset:3px; }
#tutorial-center [hidden] { display:none; }
.guided-tour .guided-tour__popup { padding:20px; border:0; border-radius:16px; background:var(--learn-panel); }
.guided-tour .guided-tour__title { font-size:20px; line-height:1.3; }
.guided-tour .guided-tour__text { font-size:15px; line-height:1.65; color:var(--learn-muted); }
.guided-tour .guided-tour__count { font-size:13px; letter-spacing:0; color:var(--learn-muted); }
.guided-tour .guided-tour__popup button,.guided-tour .guided-tour__popup .guided-tour__skip { min-height:44px; font-size:14px; }
.guided-tour .guided-tour__popup .guided-tour__skip { padding:0 8px; color:var(--learn-muted); }
.guided-tour .guided-tour__track { height:3px; background:var(--learn-border); }
.guided-tour .guided-tour__popup .guided-tour__back { color:var(--learn-muted); }
@media(hover:hover) { #tutorial-center .learning-topic:hover { background:var(--learn-panel); } #tutorial-center .learning-resume:hover,#tutorial-center .learning-secondary:hover { background:var(--learn-hover); } }
@media(max-width:380px) { #tab-help { padding-inline:14px; } #tutorial-center .learning-steps li { padding-left:38px; } .guided-tour .guided-tour__popup { padding:16px; } }