/* Optional teaching belongs beside the work, never in a blocking tutorial. */
.startup-tip{position:fixed;right:18px;bottom:calc(18px + var(--draft-alert-space,0px));z-index:80;width:min(350px,calc(100vw - 36px));padding:14px 16px 13px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--ink);box-shadow:0 10px 36px color-mix(in srgb,var(--ink) 17%,transparent);font-family:var(--sans);animation:tip-arrive .18s ease-out}
.startup-tip-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:7px}
.startup-tip-scope{display:flex;align-items:center;gap:7px;margin:0;font:600 10px/1.4 var(--sans);letter-spacing:.025em;color:var(--muted)}
.startup-tip-scope .icon{width:15px;height:15px}
.startup-tip-close{display:grid;place-items:center;min-width:32px;min-height:32px;padding:6px;border:0;border-radius:7px;background:transparent;color:var(--muted);cursor:pointer}
.startup-tip-close:hover{background:var(--hover);color:var(--ink)}
.startup-tip h2{margin:0 0 7px;font-size:15px;line-height:1.35;font-weight:650;letter-spacing:-.15px}
.startup-tip>p{margin:8px 0 11px;font-size:12px;line-height:1.55;color:var(--muted)}
.startup-tip kbd,.startup-tips-all kbd{display:inline-block;max-width:100%;padding:3px 7px;border:1px solid var(--border);border-radius:5px;background:var(--surface);font:10px/1.5 var(--mono);color:var(--ink);white-space:normal}
.startup-tip-actions{display:flex;align-items:center;justify-content:space-between;gap:9px;padding-top:2px}
.startup-tip-actions button{min-height:36px;padding:6px 9px;font-size:11px;border-radius:7px;cursor:pointer}
.startup-tip-all{border:1px solid var(--border);background:var(--surface);color:var(--ink)}
.startup-tip-optout{border:1px solid transparent;background:transparent;color:var(--muted)}
.startup-tip-actions button:hover{background:var(--hover);color:var(--ink)}
.startup-tip button:focus-visible,.startup-tip-preferences :focus-visible,.startup-tips-all button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.startup-tip .icon,.startup-tips-all .icon{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.startup-tip-preferences{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:9px 16px;padding:12px 0;margin-bottom:14px;border-bottom:1px solid var(--border);font-size:12px;color:var(--ink)}
.startup-tip-preferences label{display:flex;align-items:center;gap:9px;cursor:pointer}
.startup-tip-preferences input{width:17px;height:17px;accent-color:var(--accent)}
.startup-tips-all{color:var(--ink)}
.startup-tips-settings{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;margin:0 0 10px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.startup-tips-settings p{margin:0;color:var(--muted);font-size:12px}
.startup-tips-all ul{display:grid;gap:0;margin:0 0 18px;padding:0;list-style:none}
.startup-tips-all li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;padding:15px 0;border-bottom:1px solid var(--border)}
.startup-tip-symbol{display:grid;place-items:center;align-self:start;width:28px;height:28px;border-radius:8px;background:var(--surface);color:var(--muted)}
.startup-tips-all h3{margin:4px 0 7px;font-size:14px;line-height:1.4}
.startup-tips-all li p:last-child{margin:7px 0 0;font-size:12px;line-height:1.6;color:var(--muted)}
@keyframes tip-arrive{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:520px){.startup-tip{right:8px;bottom:calc(8px + var(--draft-alert-space,0px));width:calc(100vw - 16px);max-height:48dvh;overflow:auto;padding:12px 14px}.startup-tip-close{min-width:40px;min-height:40px}.startup-tip-actions button{min-height:42px}.startup-tip h2{font-size:15px}}
@media(prefers-reduced-motion:reduce){.startup-tip{animation:none}}