/* Quick start: five short screens, with optional detail in Settings. */
.quickstart { --qs-ink:#f4f4fc; --qs-muted:#a6abc2; --qs-line:#2a304b; --qs-mint:#b2f2ce; min-height:100vh; background:radial-gradient(ellipse at 77% 28%,#1d204a66,transparent 48%),#0b0d18; color:var(--qs-ink); font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.qs-header { max-width:1180px; margin:auto; padding:27px 36px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.qs-brand { display:flex; align-items:center; gap:10px; color:#f4f4fc; font-weight:700; font-size:19px; letter-spacing:-.5px; text-decoration:none; }
.qs-mark { display:flex; align-items:center; justify-content:center; width:33px; height:33px; border-radius:10px; background:#c8c6ff; color:#29234c; font-size:23px; font-weight:800; }
.qs-mark span { color:#51469b; }
.qs-text-button { color:#b7bdd3; font-size:13px; padding:9px 6px; min-height:40px; cursor:pointer; }
.qs-text-button:hover { color:#fff; }
.qs-main { max-width:1108px; margin:25px auto 0; padding:0 36px 28px; }
.qs-progress { max-width:340px; margin-bottom:50px; }
.qs-progress>span { display:block; font-size:10px; letter-spacing:1.7px; color:#9499b1; font-weight:650; }
.qs-progress-count { float:right; letter-spacing:0; font-weight:450; font-size:12px; }
.qs-progress ol { display:flex; gap:6px; margin:11px 0 0; padding:0; list-style:none; }
.qs-progress li { height:3px; border-radius:10px; background:#2a2e43; flex:1; }
.qs-progress li.is-complete { background:#b6b0ff; }
.qs-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.qs-content { min-height:450px; }
.qs-two-column { display:grid; grid-template-columns:1.02fr 1fr; gap:65px; align-items:center; }
.qs-eyebrow { display:block; color:#b2f2ce; font-size:11px; font-weight:650; letter-spacing:1.25px; text-transform:uppercase; margin-bottom:18px; }
.quickstart h2 { color:var(--qs-ink); margin:0 0 22px; font-weight:650; letter-spacing:-2px; line-height:1.12; font-size:clamp(32px,3.6vw,46px); }
.quickstart h2:focus { outline:none; }
.quickstart h2 em { font-style:normal; color:#c3bfff; }
.qs-lead { font-size:16px; line-height:1.65; color:#b3b8ce; margin:0 0 22px; max-width:500px; }
.qs-small,.qs-footnote { font-size:12px; line-height:1.7; color:#969db7; margin:16px 0 0; }
.qs-benefits { list-style:none; padding:0; margin:27px 0; display:grid; gap:15px; font-size:14px; color:#d6d9e8; }
.qs-benefits li { display:flex; gap:11px; align-items:center; }
.qs-benefits li>span { font-size:20px; color:#b7b1ff; width:23px; text-align:center; }
.qs-preview,.qs-context-card,.qs-extras-card,.qs-review-card { background:linear-gradient(140deg,#1a1d32,#141725); border:1px solid var(--qs-line); padding:25px; border-radius:19px; min-width:0; box-shadow:0 22px 60px #0002; }
.qs-preview { transform:rotate(-1deg); }
.qs-preview-heading { display:flex; align-items:center; gap:7px; color:#c8cde4; font-size:8px; letter-spacing:1px; font-weight:700; }
.qs-preview-heading .qs-example { margin-left:auto; }
.qs-live-dot { width:6px; height:6px; background:var(--qs-mint); border-radius:50%; }
.qs-example { display:inline-block; border:1px solid #39405c; border-radius:5px; padding:3px 7px; color:#a8afca; font-size:9px; letter-spacing:.3px; font-weight:500; text-transform:none; }
.qs-demo-tags { display:flex; flex-wrap:wrap; gap:7px; margin:26px 0 13px; }
.qs-demo-tags span { font-size:10px; padding:5px 8px; background:#34305b; border:1px solid #514874; color:#d5d0ff; border-radius:7px; }
.qs-demo-tags span:last-child { animation:qs-reveal 1.5s ease both; }
.qs-paper-demo { padding:22px; border-radius:12px; border:1px solid #353950; background:#222538; animation:qs-reveal 1s ease both; }
.qs-paper-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:8px; letter-spacing:.8px; color:#969db9; }
.qs-paper-meta span { color:#b2f2ce; background:#26443b; padding:4px 7px; border-radius:5px; letter-spacing:0; }
.qs-paper-demo h3 { font-size:20px; line-height:1.4; margin:18px 0; color:#ebedf9; font-weight:600; }
.qs-paper-lines { display:grid; gap:7px; margin-bottom:20px; }
.qs-paper-lines i { background:#363b50; width:100%; height:5px; border-radius:5px; }.qs-paper-lines i:last-child { width:62%; }
.qs-why { padding:12px; border-left:2px solid #9dd6bd; background:#2a3b3a88; border-radius:2px 6px 6px 2px; }
.qs-why>span { font-size:8px; letter-spacing:1.1px; color:#b6e9d1; font-weight:650; }.qs-why p { color:#c9d7d5; font-size:11px; line-height:1.6; margin:6px 0 0; }
.qs-demo-caption { color:#828ba9; font-size:10px; line-height:1.6; margin:15px 0 0; }
.qs-footer { border-top:1px solid #282d43; margin-top:38px; padding-top:24px; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.qs-footer .qs-footnote { margin:0; }
.qs-primary { border:1px solid #c9c5ff; background:#c4bdff; color:#17142a; border-radius:10px; padding:13px 20px; min-height:48px; font-size:13px; line-height:1.4; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:25px; }
.qs-primary:hover { background:#d6d1ff; }.qs-primary>span { font-size:20px; }
.qs-back { display:flex; align-items:center; gap:12px; font-size:13px; color:#aab1c9; min-height:46px; padding:10px 4px; }
.qs-back:hover { color:white; }
.quickstart button:disabled { opacity:.5; cursor:wait; }
.quickstart button:focus-visible,.quickstart a:focus-visible,.quickstart input:focus-visible,.quickstart textarea:focus-visible,.topic-result:focus-within,.qs-text-button:focus-visible { outline:2px solid #b3f0ce; outline-offset:4px; }
.qs-topic-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:24px; }
.qs-input-label { display:block; font-weight:600; font-size:12px; color:#d8dbeb; margin-bottom:10px; }
.qs-search-wrap { display:flex; gap:10px; align-items:center; background:#191d2e; border:1px solid #40465f; border-radius:10px; padding:0 14px; }
.qs-search-wrap>span { color:#afa9dc; font-size:25px; }.qs-search-wrap input { width:100%; min-width:0; padding:13px 0; color:#f0f0fa; font-size:13px; background:transparent; border:0; outline:none; }
.qs-search-wrap input::placeholder { color:#838aa6; }
.qs-topic-results { height:264px; overflow:auto; margin-top:14px; padding:5px; border:1px solid #292f48; border-radius:10px; background:#101422; }
.quickstart .tree-toggle { min-width:30px; min-height:30px; }.quickstart .interest-checkbox { accent-color:#b4aaff; }
.qs-selection { padding:20px; border-radius:12px; border:1px solid #2c334c; background:#181c2d; min-width:0; }
.qs-section-label { font-size:10px; letter-spacing:1px; color:#9ba4be; font-weight:600; display:flex; justify-content:space-between; align-items:center; gap:15px; margin-bottom:15px; }
.qs-section-label .qs-text-button { font-size:11px; letter-spacing:0; min-height:30px; padding:4px; color:#c3bfff; }
.qs-selected-chips { display:flex; gap:7px; flex-wrap:wrap; max-height:170px; overflow:auto; }
.qs-chip { display:inline-flex; align-items:center; gap:9px; color:#d4cfff; background:#302a4b; border:1px solid #4c446b; border-radius:7px; padding:7px 10px; font-size:11px; line-height:1.4; text-align:left; overflow-wrap:anywhere; max-width:100%; }
.qs-chip>span { color:#a29bc2; font-size:17px; }.qs-static-chip { cursor:default; }
.qs-empty-selection { color:#777f9b; font-size:12px; padding:0 0 8px; }
.qs-rule-example { border-top:1px solid #30364e; padding-top:17px; margin-top:22px; font-size:11px; color:#b9c0d4; }
.qs-rule-example>.qs-example { margin-bottom:12px; }.qs-rule-example>div { margin:8px 0; }.qs-rule-example .qs-demo-child { padding-left:18px; animation:qs-reveal 2.2s ease both; }
.qs-example-check { display:inline-flex; width:14px; height:14px; align-items:center; justify-content:center; background:#b6afff; border-radius:3px; font-size:11px; color:#26213c; margin-right:7px; }
.qs-rule-example p { color:#8d97b0; font-size:10px; line-height:1.7; margin-top:12px; }
.qs-error { color:#ffcaaf; background:#6137284d; border:1px solid #8c523a; padding:12px 15px; border-radius:8px; font-size:12px; line-height:1.5; margin-top:18px; }
.qs-context-card textarea { width:100%; min-height:126px; resize:vertical; font-size:14px; line-height:1.7; border:1px solid #40465f; border-radius:10px; background:#0f1423; padding:14px; color:#e6e7f3; }
.qs-context-card textarea::placeholder { color:#8189a5; }
.qs-context-tip { display:flex; gap:12px; padding:17px; background:#282640; border-radius:10px; margin-top:24px; }.qs-context-tip span { color:#bdb4ff; font-size:20px; }.qs-context-tip p { color:#b8b7d1; font-size:12px; line-height:1.6; margin:0; }
.qs-typed-example { margin-top:35px; }.qs-type-line { font-size:13px; line-height:1.7; color:#d3cfff; margin-top:13px; white-space:normal; overflow:hidden; width:100%; animation:qs-type 2.6s steps(44,end) both; }
.qs-typed-example .qs-small { margin-top:8px; }
.qs-extras-card { padding:14px; }
.qs-demo-tabs { display:flex; gap:5px; border-bottom:1px solid #343a53; padding-bottom:13px; }.qs-demo-tabs button { flex:1; min-width:0; border-radius:7px; font-size:11px; padding:11px 6px; color:#8f98b3; min-height:40px; }.qs-demo-tabs button[aria-selected="true"] { background:#38314f; color:#d8d2ff; }
.qs-demo-panel { padding:22px 12px 15px; min-height:325px; }.qs-demo-panel h3 { font-size:19px; line-height:1.4; margin:22px 0 9px; color:#efecff; font-weight:600; }.qs-demo-panel>p { font-size:12px; line-height:1.7; color:#a7afc7; }
.qs-demo-labels { margin-top:28px; }.qs-demo-labels>div:not(.qs-demo-track) { display:flex; justify-content:space-between; gap:8px; font-size:11px; color:#c3c9df; }.qs-demo-labels strong { font-weight:500; }.qs-demo-labels span { color:#8f98b2; font-size:10px; }
.qs-demo-track { height:5px; border-radius:4px; background:#34394f; position:relative; margin:12px 0 25px; }.qs-demo-track i { display:block; width:80%; background:#bdb2ff; height:5px; border-radius:4px; animation:qs-fill 1.2s ease both; }.qs-demo-track b { position:absolute; width:13px; height:13px; background:#d4ccff; border-radius:50%; left:78%; top:-4px; }.qs-demo-track-soft i { width:48%; background:#8b87b4; }.qs-demo-track-soft b { left:46%; background:#b6afd9; }
.qs-author-demo,.qs-document-demo { display:flex; gap:12px; align-items:center; margin-top:35px; padding:15px; background:#252a40; border:1px solid #383d55; border-radius:10px; }
.qs-author-demo>span,.qs-document-demo>span { display:flex; align-items:center; justify-content:center; flex-shrink:0; width:36px; height:36px; border-radius:50%; background:#4a426b; color:#d1c8f1; font-size:11px; }.qs-document-demo>span { border-radius:8px; font-size:24px; }.qs-author-demo strong,.qs-document-demo strong { display:block; font-size:11px; font-weight:600; overflow-wrap:anywhere; }.qs-author-demo small,.qs-document-demo small { display:block; font-size:9px; color:#8f99b6; margin-top:4px; }.qs-author-demo>b { margin-left:auto; font-size:9px; color:#acdfc4; font-weight:500; white-space:nowrap; }
.qs-ready-mark { width:43px; height:43px; background:#294638; color:#bcf1d2; border:1px solid #426d55; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:25px; }
.qs-review-card { padding:24px; }.qs-review-context { margin-top:27px; border-top:1px solid #353b53; padding-top:20px; }.qs-review-context>p { font-size:13px; line-height:1.7; color:#c0c6db; overflow-wrap:anywhere; white-space:pre-wrap; margin:0; }
.qs-status-note { font-size:12px; line-height:1.7; color:#d8ceb9; border-left:2px solid #9b8d66; padding-left:13px; margin:24px 0 0; }
/* Search results are shared with the full Settings picker. */
.topic-result { display:flex; align-items:flex-start; gap:11px; padding:12px 10px; border-radius:7px; cursor:pointer; min-width:0; }.topic-result:hover { background:#292d44; }.topic-result>input { margin-top:4px; width:15px; height:15px; flex-shrink:0; accent-color:#b4aaff; }.topic-result>span { min-width:0; }.topic-result strong { display:block; overflow-wrap:anywhere; color:#d6d9e8; font-size:12px; line-height:1.5; font-weight:500; }.topic-result small { display:block; color:#7e8aa7; font-size:10px; line-height:1.5; margin-top:4px; overflow-wrap:anywhere; }.topic-search-message { color:#8792ac; font-size:11px; padding:8px 10px; }.qs-secondary { display:block; padding:10px 14px; margin:8px auto; border:1px solid #4b4a6a; border-radius:7px; color:#c3bbef; font-size:12px; min-height:40px; }
@keyframes qs-reveal { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes qs-type { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0 0 0 0); } }
@keyframes qs-fill { from { transform:scaleX(.2); transform-origin:left; } to { transform:scaleX(1); transform-origin:left; } }
@media(max-width:800px) { .qs-header { padding:20px 24px; }.qs-main { margin-top:13px; padding:0 24px 25px; }.qs-progress { margin-bottom:34px; }.qs-two-column { gap:30px; }.quickstart h2 { font-size:34px; letter-spacing:-1.3px; }.qs-preview,.qs-context-card,.qs-review-card { padding:19px; }.qs-paper-demo { padding:16px; }.qs-paper-demo h3 { font-size:17px; }.qs-paper-meta { display:block; }.qs-paper-meta span { display:inline-block; margin:6px 0 0; }.qs-topic-layout { gap:16px; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); }.qs-selection { padding:15px; }.qs-author-demo { flex-wrap:wrap; }.qs-author-demo>b { margin-left:48px; }.qs-content { min-height:400px; } }
@media(max-width:620px) { .qs-header { padding:18px 20px; }.qs-main { padding:0 20px 24px; margin-top:12px; }.qs-progress { max-width:none; margin-bottom:30px; }.qs-two-column,.qs-topic-layout { grid-template-columns:1fr; gap:25px; }.qs-content { min-height:0; }.quickstart h2 { font-size:35px; margin-bottom:18px; }.qs-lead { font-size:14px; margin-bottom:17px; }.qs-benefits { font-size:12px; gap:10px; margin:20px 0; }.qs-small { font-size:11px; }.qs-preview { transform:none; padding:17px; }.qs-preview-heading { font-size:8px; }.qs-paper-demo { padding:17px; }.qs-paper-demo h3 { font-size:18px; margin:13px 0; }.qs-paper-meta { display:flex; }.qs-paper-meta span { margin:0; }.qs-paper-lines { display:none; }.qs-demo-tags { margin:17px 0 10px; }.qs-demo-caption { font-size:9px; }.qs-footer { margin-top:28px; padding-top:18px; gap:15px; }.qs-primary { padding:12px 15px; font-size:12px; gap:12px; }.qs-footnote { max-width:140px; font-size:10px; }.qs-topic-results { height:230px; }.qs-rule-example { display:none; }.qs-selection { padding:15px; }.qs-selected-chips { max-height:95px; }.qs-selection .qs-section-label { margin-bottom:10px; }.qs-empty-selection { margin:0; padding:0; }.qs-typed-example { margin-top:20px; }.qs-type-line { font-size:12px; }.qs-context-tip { margin-top:20px; }.qs-demo-panel { min-height:290px; }.qs-ready-mark { margin-bottom:18px; width:36px; height:36px; font-size:20px; }.qs-section-label .qs-text-button { font-size:10px; }.qs-review-context { margin-top:20px; } }
@media(prefers-reduced-motion:reduce) { .quickstart *, .quickstart *::before, .quickstart *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }.qs-type-line { max-width:100%; white-space:normal; } }