/* Guide page styles — single owner.
 * Loaded after desktop-shell.css. Safe balanced extract.
 */


#desktop-guide { position:fixed; inset:0; z-index:80; overflow-y:auto; box-sizing:border-box; background:#0a0d10; color:#e9eff0; }
#desktop-guide .guide-shell { width:calc(100% - 96px); max-width:none; margin:0 auto; padding:46px 0 56px; }
#desktop-guide a { color:inherit; text-decoration:none; }
#desktop-guide .guide-hero { position:relative; padding:20px 0 64px; border-bottom:1px solid #263239; }
#desktop-guide .guide-hero::before { content:""; position:absolute; right:2%; bottom:34px; width:160px; height:1px; background:#f2bf5b; box-shadow:15px -13px 0 -7px #ef7f8a,-22px 18px 0 -7px #5ce0cf; opacity:.8; }
#desktop-guide .guide-back { display:inline-flex; margin-bottom:68px; color:#91a0a8; font-size:13px; transition:color .16s ease; }
#desktop-guide .guide-back:hover { color:#5be0d1; }
#desktop-guide .guide-hero-layout { display:flex; align-items:flex-end; justify-content:space-between; gap:36px; }
#desktop-guide .guide-hero > span,#desktop-guide .guide-eyebrow { display:block; color:#52d5c6; font-size:10px; font-weight:800; letter-spacing:.14em; }
#desktop-guide .guide-hero h1 { max-width:760px; margin:13px 0 16px; color:#f4f8f8; font-size:46px!important; line-height:1.12; letter-spacing:0; }
#desktop-guide .guide-hero p { max-width:620px; margin:0; color:#b8c5c8; font-size:17px; line-height:1.8; }
#desktop-guide .guide-mascot { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; width:210px; min-height:180px; flex:0 0 auto; padding-bottom:6px; box-sizing:border-box; }
#desktop-guide .guide-mascot::before { content:""; position:absolute; top:4px; left:50%; width:158px; height:146px; border:1px solid rgba(91,224,209,.34); border-radius:50%; background:radial-gradient(circle,rgba(65,212,196,.17),rgba(16,30,31,0) 68%); transform:translateX(-50%); }
#desktop-guide .guide-mascot-pet { position:relative; z-index:1; width:142px; height:120px; filter:drop-shadow(0 13px 14px rgba(0,0,0,.35)); }
#desktop-guide .guide-mascot-pet .pixel-cat-art { width:142px; height:118px; animation:pixelCatArtIdle 2.7s steps(2,end) infinite; }
#desktop-guide .guide-mascot > span { position:relative; z-index:1; margin-top:4px; color:#a9ddd7; text-align:center; font-size:11px; font-weight:700; line-height:1.55; }
#desktop-guide .guide-hero-actions { display:flex; align-items:center; gap:12px; margin-top:29px; }
#desktop-guide .guide-primary,#desktop-guide .guide-secondary { display:inline-flex; align-items:center; gap:15px; min-height:46px; padding:0 19px; box-sizing:border-box; border-radius:5px; font-size:15px; font-weight:700; }
#desktop-guide .guide-primary { border:1px solid #48d5c6; background:#2cb7a9; color:#062321; }
#desktop-guide .guide-primary:hover { background:#57d9cb; }
#desktop-guide .guide-secondary { border:1px solid #334049; color:#c7d0d3; }
#desktop-guide .guide-secondary:hover { border-color:#62d9cd; color:#eafffa; }
#desktop-guide .guide-setup { display:flex; align-items:flex-end; justify-content:space-between; gap:36px; padding:42px 0 48px; border-bottom:1px solid #263239; }
#desktop-guide h2 { margin:11px 0 10px; color:#edf4f4; font-size:28px; line-height:1.32; letter-spacing:0; }
#desktop-guide .guide-setup p { max-width:720px; margin:0; color:#b2c0c4; font-size:16px; line-height:1.78; }
#desktop-guide .guide-inline-link { flex:0 0 auto; color:#65d9cd; font-size:15px; font-weight:700; }
#desktop-guide .guide-inline-link b,#desktop-guide .guide-flow-card b,#desktop-guide .guide-loop-actions b { margin-left:7px; }
#desktop-guide .guide-workflows { padding:58px 0 66px; }
#desktop-guide .guide-start-kit { display:grid; grid-template-columns:250px 1fr; gap:30px; padding:35px 0; border-bottom:1px solid #263239; }
#desktop-guide .guide-start-title h2 { margin-bottom:6px; font-size:24px; }
#desktop-guide .guide-start-title p { margin:0; color:#aebcc1; font-size:14px; line-height:1.7; }
#desktop-guide .guide-scenario-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
#desktop-guide .guide-scenario-grid a { min-height:128px; padding:18px; box-sizing:border-box; border:1px solid #314047; border-radius:7px; background:#0e151a; transition:transform .16s ease,border-color .16s ease,background .16s ease; }
#desktop-guide .guide-scenario-grid a:hover { border-color:#65d9cd; background:#122022; transform:translateY(-3px); }
#desktop-guide .guide-scenario-grid i { display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:7px; background:#244c48; color:#7ae4d8; font-size:13px; font-style:normal; font-weight:800; }
#desktop-guide .guide-scenario-grid a:nth-child(2) i { background:#5c3746; color:#ffaeb8; }
#desktop-guide .guide-scenario-grid a:nth-child(3) i { background:#53472b; color:#ffd779; }
#desktop-guide .guide-scenario-grid a:nth-child(4) i { background:#3a3f62; color:#b5baff; }
#desktop-guide .guide-scenario-grid strong,#desktop-guide .guide-scenario-grid span { display:block; }
#desktop-guide .guide-scenario-grid strong { margin-top:13px; color:#e7eeee; font-size:15px; }
#desktop-guide .guide-scenario-grid span { margin-top:6px; color:#a0b0b6; font-size:13px; }
#desktop-guide .guide-section-head { display:flex; justify-content:space-between; align-items:end; margin-bottom:27px; }
#desktop-guide .guide-section-head h2 { margin-bottom:0; }
#desktop-guide .guide-flow-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid #2a363e; border-left:1px solid #2a363e; }
#desktop-guide .guide-flow-card { position:relative; min-height:326px; padding:27px 27px 24px; box-sizing:border-box; border-right:1px solid #2a363e; border-bottom:1px solid #2a363e; background:#0e1419; }
#desktop-guide .guide-number { color:#8b9ba1; font-size:13px; font-weight:800; letter-spacing:.09em; }
#desktop-guide .guide-icon { display:flex; align-items:center; justify-content:center; width:34px; height:34px; margin:37px 0 18px; border:1px solid rgba(84,218,203,.43); border-radius:50%; color:#62dbcd; font-size:16px; font-weight:700; }
#desktop-guide .guide-flow-card h3 { margin:0; color:#edf4f3; font-size:19px; letter-spacing:0; }
#desktop-guide .guide-flow-card p { margin:12px 0 20px; color:#b1bec2; font-size:15px; line-height:1.76; }
#desktop-guide .guide-flow-card a { position:absolute; right:27px; bottom:24px; color:#65d9cd; font-size:14px; font-weight:700; }
#desktop-guide .guide-flow-card:hover { background:#111a20; }
#desktop-guide .guide-detail { padding:0 0 64px; }
#desktop-guide .guide-section-head > p { max-width:360px; margin:0; color:#a9b7bc; font-size:14px; line-height:1.7; }
#desktop-guide .guide-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; border:1px solid #2a363e; background:#2a363e; }
#desktop-guide .guide-detail-grid > article { display:flex; gap:20px; min-height:236px; padding:25px; box-sizing:border-box; background:#0d1318; }
#desktop-guide .guide-detail-mark { display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:27px; height:27px; border:1px solid #417d77; border-radius:50%; color:#62d9cd; font-size:11px; font-weight:800; }
#desktop-guide .guide-detail-grid h3 { margin:2px 0 7px; color:#e8f0ef; font-size:18px; }
#desktop-guide .guide-detail-grid p { margin:0; color:#b0bec2; font-size:14px; line-height:1.72; }
#desktop-guide .guide-detail-grid ol { margin:15px 0 16px; padding-left:19px; color:#c5d0d3; font-size:14px; line-height:1.82; }
#desktop-guide .guide-detail-grid a { color:#65d9cd; font-size:14px; font-weight:700; }
#desktop-guide .guide-double-link { display:flex; gap:16px; }
#desktop-guide .guide-routine { padding:34px 36px 38px; border-top:1px solid #2a363e; border-bottom:1px solid #2a363e; }
#desktop-guide .guide-routine h2 { margin-bottom:25px; }
#desktop-guide .guide-routine-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; }
#desktop-guide .guide-routine-steps article { position:relative; padding-right:10px; }
#desktop-guide .guide-routine-steps article:not(:last-child)::after { content:""; position:absolute; top:10px; right:0; width:1px; height:45px; background:#34434a; }
#desktop-guide .guide-routine-steps b { display:block; color:#58d7c8; font-size:10px; letter-spacing:.1em; }
#desktop-guide .guide-routine-steps strong { display:block; margin-top:9px; color:#e8f1f0; font-size:16px; }
#desktop-guide .guide-routine-steps span { display:block; margin-top:7px; color:#b0bec2; font-size:14px; line-height:1.7; }
#desktop-guide .guide-checklist { display:grid; grid-template-columns:1fr 1.25fr; gap:42px; padding:48px 0; border-bottom:1px solid #2a363e; }
#desktop-guide .guide-checklist h2 { margin-bottom:8px; }
#desktop-guide .guide-checklist p { max-width:460px; margin:0; color:#b0bec2; font-size:15px; line-height:1.75; }
#desktop-guide .guide-checklist-items { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:10px; padding-bottom:27px; }
#desktop-guide .guide-checklist-items label { position:relative; display:flex; align-items:center; gap:11px; min-height:54px; padding:0 14px; border:1px solid #324047; border-radius:6px; background:#0d1519; color:#d0dcdf; cursor:pointer; font-size:14px; line-height:1.45; }
#desktop-guide .guide-checklist-items input { position:absolute; opacity:0; }
#desktop-guide .guide-checklist-items label i { width:14px; height:14px; flex:0 0 auto; border:1px solid #58716f; border-radius:4px; }
#desktop-guide .guide-checklist-items label:has(input:checked) { border-color:#5bd6c8; background:#102523; color:#e2f5f2; }
#desktop-guide .guide-checklist-items label:has(input:checked) i { border-color:#5bd6c8; background:#5bd6c8; box-shadow:inset 0 0 0 3px #102523; }
#desktop-guide .guide-checklist-items small { position:absolute; bottom:0; right:0; color:#efbd5c; font-size:11px; font-weight:700; }
#desktop-guide .guide-loop { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; padding:33px 36px; border:1px solid #35514f; background:#102020; }
#desktop-guide .guide-loop h2 { margin-bottom:8px; }
#desktop-guide .guide-loop p { max-width:620px; margin:0; color:#bdccca; font-size:15px; line-height:1.76; }
#desktop-guide .guide-loop-actions { display:flex; align-items:center; gap:17px; flex:0 0 auto; }
#desktop-guide .guide-loop-actions a { padding-bottom:5px; border-bottom:1px solid #4b706d; color:#c6e5e0; font-size:15px; font-weight:700; }
#desktop-guide .guide-loop-actions a:hover { border-color:#6be1d4; color:#75e4d7; }
#desktop-guide .guide-footer { display:flex; justify-content:space-between; padding:28px 0 0; color:#7c898f; font-size:11px; }
#desktop-guide .guide-footer a:hover { color:#62dace; }
#desktop-guide .guide-tips { display:grid; grid-template-columns:220px 1fr; gap:46px; padding:57px 0 0; }
#desktop-guide .guide-tips h2 { margin-top:0; }
#desktop-guide .guide-tips p { margin:0 0 14px; color:#b7c4c8; font-size:15px; line-height:1.8; }
#desktop-guide .guide-tips b { color:#d9e7e6; }
#desktop-guide .guide-faq { padding:56px 0 0; }
#desktop-guide .guide-faq-list { border-top:1px solid #2c3a40; }
#desktop-guide .guide-faq article { border-bottom:1px solid #2c3a40; }
#desktop-guide .guide-faq button { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:68px; padding:0; border:0; background:transparent; color:#dce8e7; font:600 16px/1.4 inherit; text-align:left; cursor:pointer; }
#desktop-guide .guide-faq button b { color:#5fe0d0; font-size:21px; font-weight:400; transition:transform .18s ease; }
#desktop-guide .guide-faq article p { display:none; max-width:800px; margin:0; padding:0 38px 22px 0; color:#b4c1c5; font-size:15px; line-height:1.8; }
#desktop-guide .guide-faq article.is-open p { display:block; }
#desktop-guide .guide-faq article.is-open button { color:#72e1d4; }
#desktop-guide .guide-faq article.is-open button b { transform:rotate(45deg); }
#desktop-guide .guide-voice { display:grid; grid-template-columns:.9fr 1.1fr; gap:42px; margin-top:58px; padding:34px 36px; border:1px solid #405052; border-radius:10px; background:linear-gradient(115deg,#132525,#172031); }
#desktop-guide .guide-voice h2 { margin-bottom:8px; }
#desktop-guide .guide-voice p { max-width:440px; margin:0; color:#c0cdcf; font-size:15px; line-height:1.75; }
#desktop-guide .guide-voice-stars { display:flex; gap:10px; margin-top:22px; color:#f3c85e; font-style:normal; }
#desktop-guide .guide-voice-stars i:nth-child(2) { color:#ee8494; font-size:10px; padding-top:5px; }
#desktop-guide .guide-voice-form { padding:5px 0; }
#desktop-guide .guide-voice-tabs { display:flex; gap:8px; }
#desktop-guide .guide-voice-tabs button { min-height:36px; padding:0 14px; border:1px solid #48595f; border-radius:15px; background:transparent; color:#c0cdcf; font:600 13px/1 inherit; cursor:pointer; }
#desktop-guide .guide-voice-tabs button.active { border-color:#67ded0; background:#26504d; color:#e7fffa; }
#desktop-guide .guide-voice-form textarea { display:block; width:100%; height:120px; margin:12px 0 10px; padding:14px; box-sizing:border-box; resize:vertical; border:1px solid #405157; border-radius:7px; background:#0a1216; color:#e8f1f1; font:15px/1.65 inherit; outline:0; }
#desktop-guide .guide-voice-form textarea:focus { border-color:#65ddcf; box-shadow:0 0 0 3px rgba(101,221,207,.11); }
#desktop-guide .guide-voice-form > div:last-of-type { display:flex; align-items:center; justify-content:space-between; gap:12px; }
#desktop-guide .guide-voice-form small { color:#92a5a7; font-size:10px; }
#desktop-guide .guide-voice-form [type="submit"] { min-height:34px; padding:0 13px; border:1px solid #f0bd5b; border-radius:5px; background:#f0bd5b; color:#22201a; font:800 11px/1 inherit; cursor:pointer; }
#desktop-guide .guide-voice-form [type="submit"]:disabled { opacity:.58; cursor:wait; }
#desktop-guide .guide-voice-form [role="status"] { min-height:18px; margin:7px 0 0; color:#79dfd1; font-size:11px; }
/* Keep the student guide inside the visible workspace, clear of both sidebars. */
@media (min-width:981px) {
  /* The guide removes the context rail, so it can use the full space to the
   * right of navigation. Its width stays auto to honor these fixed edges. */
  body:not(.route-auth) #desktop-guide { left:var(--desktop-left-width)!important; right:0!important; width:auto!important; }
  body.desktop-nav-collapsed #desktop-guide { left:0!important; }
}

/* The usable guide canvas is narrower than the browser once desktop navigation
 * is visible. Reflow before the smallest desktop widths start clipping. */
@media (min-width:761px) and (max-width:1200px) {
  #desktop-guide .guide-shell { width:calc(100% - 48px); padding-top:34px; }
  #desktop-guide .guide-hero-layout { display:block; }
  #desktop-guide .guide-mascot { display:none; }
  #desktop-guide .guide-start-kit { grid-template-columns:200px minmax(0,1fr); gap:22px; }
  #desktop-guide .guide-scenario-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #desktop-guide .guide-flow-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #desktop-guide .guide-routine-steps { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 18px; }
  #desktop-guide .guide-routine-steps article:nth-child(2)::after { display:none; }
  #desktop-guide .guide-checklist { grid-template-columns:minmax(0,1fr); gap:25px; }
  #desktop-guide .guide-loop { flex-wrap:wrap; }
  #desktop-guide .guide-tips { grid-template-columns:180px minmax(0,1fr); gap:28px; }
  #desktop-guide .guide-voice { grid-template-columns:minmax(0,1fr); gap:25px; }
}

@media (min-width:761px) and (max-width:1040px) {
  #desktop-guide .guide-start-kit { grid-template-columns:minmax(0,1fr); }
  #desktop-guide .guide-detail-grid { grid-template-columns:minmax(0,1fr); }
  #desktop-guide .guide-tips { grid-template-columns:minmax(0,1fr); gap:14px; }
}