.onboarding-layer { position:fixed; inset:0; z-index:1200; pointer-events:none; }
.onboarding-shade { position:absolute; inset:0; background:#080a165e; pointer-events:auto; }
.onboarding-target { position:fixed; border:2px solid var(--accent); border-radius:12px; box-shadow:0 0 0 3px #fff3; pointer-events:none; }
.onboarding-target[hidden] { display:none; }
.onboarding-card { position:fixed; left:24px; bottom:24px; width:min(370px,calc(100vw - 32px)); max-height:calc(100dvh - 40px); overflow-y:auto; pointer-events:auto; padding:22px; background:var(--paper); color:var(--ink); border:1px solid var(--accent); border-radius:16px; box-shadow:0 14px 60px #0005; }
.onboarding-top { display:flex; justify-content:space-between; align-items:center; gap:10px; color:var(--muted); font-size:.75rem; line-height:1.5; }
.onboarding-top .btn { min-width:32px; min-height:32px; padding:5px; flex:none; }
.onboarding-card h2 { font-size:1.25rem; line-height:1.4; margin:12px 0; overflow-wrap:anywhere; }
.onboarding-card p { font-size:1rem; line-height:1.6; color:var(--muted); }
.onboarding-card .onboarding-count { font-size:.75rem; color:var(--accent); font-weight:700; margin-top:10px; }
.onboarding-card .onboarding-note { font-size:.875rem; }
.onboarding-footer { display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; margin-top:18px; }
.onboarding-footer .btn { font-size:.875rem; min-height:42px; }
.onboarding-footer .btn:first-child { margin-right:auto; }
.onboarding-progress { height:4px; background:var(--line); border-radius:4px; overflow:hidden; margin-top:20px; }
.onboarding-progress>span { height:100%; display:block; background:var(--accent); }
.onboarding-jump { display:flex; flex-direction:column; gap:7px; font-size:.875rem; margin-top:15px; color:var(--ink); }
.onboarding-jump select { width:100%; font-size:.875rem; min-height:40px; }
.onboarding-choice { left:50%; bottom:auto; top:50%; transform:translate(-50%,-50%); }
.onboarding-choice>.btn { width:100%; margin-top:12px; white-space:normal; text-align:left; }
.sidebar .side-tutorial { width:100%; color:var(--muted); font-size:.875rem; padding:9px 0; }
.sidebar .side-tutorial:hover { color:var(--ink); }
@media(max-width:600px) { .onboarding-card { left:16px; bottom:16px; padding:17px; max-height:calc(75dvh - 20px); }.onboarding-choice { left:50%; bottom:auto; max-height:calc(100dvh - 40px); } }
@media(prefers-reduced-motion:reduce) { .onboarding-layer * { animation:none!important; transition:none!important; } }