/* Yulai Gaokao AI · Home landing page · scoped to .yulai-tutorial-root
   Based on Claude Design handoff (FSxtSfZ71_WqeN-l3Xat-Q) */

.yulai-tutorial-root{
  --bg: oklch(0.972 0.008 80);
  --bg-2: oklch(0.955 0.01 80);
  --bg-3: oklch(0.94 0.012 80);
  --ink: oklch(0.22 0.012 60);
  --ink-2: oklch(0.36 0.012 60);
  --ink-3: oklch(0.55 0.01 60);
  --ink-4: oklch(0.72 0.008 60);
  --line: oklch(0.86 0.01 70);
  --line-2: oklch(0.91 0.008 70);
  --accent: oklch(0.62 0.12 50);
  --accent-soft: oklch(0.62 0.12 50 / 0.12);
  --cool: oklch(0.5 0.04 220);
  --warn: oklch(0.55 0.14 30);
  --safe: oklch(0.55 0.07 150);
  --serif: 'Noto Serif SC', 'Songti SC', serif;
  --sans: 'Inter', 'PingFang SC', system-ui, sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  display:block;
  min-height:100vh;
  --ok: oklch(0.55 0.11 150);
  --ok-bg: oklch(0.55 0.11 150 / 0.08);
  --ok-line: oklch(0.55 0.11 150 / 0.32);
  --no: oklch(0.54 0.16 28);
  --no-bg: oklch(0.54 0.16 28 / 0.08);
  --no-line: oklch(0.54 0.16 28 / 0.32);
}
.yulai-tutorial-root.tu-topnav-root{min-height:0;background:transparent;overflow:visible}
.yulai-tutorial-root *{box-sizing:border-box;margin:0;padding:0}
.yulai-tutorial-root a{color:inherit;text-decoration:none}
.yulai-tutorial-root button{font:inherit;background:none;border:none;cursor:pointer;color:inherit}
.yulai-tutorial-root .container{max-width:1280px;margin:0 auto;padding:0 56px}

/* nav */
.yulai-tutorial-root .nav{position:fixed;top:0;left:0;right:0;z-index:50;backdrop-filter:blur(14px) saturate(140%);background:oklch(0.972 0.008 80 / 0.7);border-bottom:1px solid transparent;transition:border-color .3s}
.yulai-tutorial-root .nav.scrolled{border-color:var(--line-2)}
.yulai-tutorial-root .nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px;max-width:1280px;margin:0 auto;padding:0 56px}
.yulai-tutorial-root .brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:500;font-size:18px;letter-spacing:.04em}
.yulai-tutorial-root .brand-mark{width:22px;height:22px;display:grid;place-items:center}
.yulai-tutorial-root .brand-mark svg,.yulai-tutorial-root .foot-brand-mark svg{width:100%;height:100%}
.yulai-tutorial-root .nav-links{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;justify-content:center}
.yulai-tutorial-root .nav-links::-webkit-scrollbar{display:none}
.yulai-tutorial-root .nav-stage{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:999px;border:1px solid var(--line-2);font-size:12.5px;line-height:1;color:var(--ink-2);white-space:nowrap;transition:all .2s ease;flex-shrink:0}
.yulai-tutorial-root .nav-stage:hover{border-color:var(--ink-3);background:var(--bg);color:var(--ink)}
.yulai-tutorial-root .nav-stage.is-active{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.yulai-tutorial-root .nav-stage-q{border-style:dashed}
.yulai-tutorial-root .nav-cta{display:flex;align-items:center;gap:8px}
.yulai-tutorial-root .btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;font-size:14px;font-weight:500;border-radius:999px;transition:all .25s ease;white-space:nowrap}
.yulai-tutorial-root .btn-primary{background:var(--ink);color:var(--bg)}
.yulai-tutorial-root .btn-primary:hover{background:var(--accent);transform:translateY(-1px)}
.yulai-tutorial-root .btn-ghost{color:var(--ink-2)}
.yulai-tutorial-root .btn-ghost:hover{color:var(--ink)}
.yulai-tutorial-root .btn-outline{border:1px solid var(--line);color:var(--ink-2)}
.yulai-tutorial-root .btn-outline:hover{border-color:var(--ink-3);color:var(--ink)}
.yulai-tutorial-root .btn-text{color:var(--ink-3);font-size:13px;padding:6px 0}
.yulai-tutorial-root .btn-text:hover{color:var(--accent)}
.yulai-tutorial-root .arrow{display:inline-block;transition:transform .25s}
.yulai-tutorial-root .btn:hover .arrow{transform:translateX(3px)}

.yulai-tutorial-root .eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.yulai-tutorial-root .eyebrow::before{content:"";width:24px;height:1px;background:var(--accent)}

.yulai-tutorial-root .section{padding:200px 0;position:relative}
.yulai-tutorial-root .section-head{display:flex;flex-direction:column;gap:18px;margin-bottom:96px;max-width:820px}
.yulai-tutorial-root .section-head h2{font-family:var(--serif);font-weight:500;font-size:clamp(32px,3.4vw,48px);line-height:1.25;letter-spacing:-0.005em}
.yulai-tutorial-root .section-head p{font-size:16px;line-height:1.75;color:var(--ink-2);max-width:680px;text-wrap:pretty}

.yulai-tutorial-root .vline{position:absolute;top:0;bottom:0;width:1px;background:var(--line-2);pointer-events:none}
.yulai-tutorial-root .vline-l{left:56px}
.yulai-tutorial-root .vline-r{right:56px}

/* status pill */
.yulai-tutorial-root .pill{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line)}
.yulai-tutorial-root .pill .dot{width:5px;height:5px;border-radius:50%}
.yulai-tutorial-root .pill-live{color:var(--safe);border-color:oklch(0.55 0.07 150 / 0.4)}
.yulai-tutorial-root .pill-live .dot{background:var(--safe)}
.yulai-tutorial-root .pill-mvp{color:var(--accent);border-color:oklch(0.62 0.12 50 / 0.4)}
.yulai-tutorial-root .pill-mvp .dot{background:var(--accent)}
.yulai-tutorial-root .pill-jun{color:var(--ink);border-color:var(--ink-3);background:oklch(0.62 0.12 50 / 0.06)}
.yulai-tutorial-root .pill-jun .dot{background:var(--ink)}
.yulai-tutorial-root .pill-aft{color:var(--cool);border-color:oklch(0.5 0.04 220 / 0.35)}
.yulai-tutorial-root .pill-aft .dot{background:var(--cool)}
.yulai-tutorial-root .pill-late{color:var(--ink-3);border-color:var(--line);border-style:dashed}
.yulai-tutorial-root .pill-late .dot{background:var(--ink-4)}

/* ============ tutorial layout ============ */
/* ============ tutorial layout ============ */
.yulai-tutorial-root .brand-en{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--ink-3);text-transform:uppercase;margin-right:4px}
.yulai-tutorial-root .brand-cn{font-family:var(--serif);font-weight:600;font-size:18px;letter-spacing:.04em;color:var(--ink)}
.yulai-tutorial-root .brand .brand-mark{display:none}

.yulai-tutorial-root .tu-main{max-width:1480px;margin:0 auto;padding:96px 120px 0;display:grid;grid-template-columns:300px 1fr;gap:80px;align-items:start}
@media (max-width:1280px){.yulai-tutorial-root .tu-main{padding:96px 72px 0}}
@media (max-width:1100px){.yulai-tutorial-root .tu-main{grid-template-columns:1fr;gap:32px;padding:96px 56px 0}}

/* sidebar */
.yulai-tutorial-root .tu-side{position:sticky;top:96px;align-self:start}
.yulai-tutorial-root .tu-side-inner{padding:8px 0 0}
.yulai-tutorial-root .tu-side-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--ink-3);text-transform:uppercase;margin-bottom:14px}
.yulai-tutorial-root .tu-side-title{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--ink);margin-bottom:14px}
.yulai-tutorial-root .tu-side-sub{font-size:13.5px;color:var(--ink-3);line-height:1.7;margin-bottom:32px;max-width:240px}

.yulai-tutorial-root .tu-chap{border-radius:12px;margin-bottom:6px;transition:background .25s}
.yulai-tutorial-root .tu-chap.is-open{background:oklch(0.9 0.015 80 / 0.55)}
.yulai-tutorial-root .tu-chap-head{width:100%;display:flex;align-items:center;justify-content:space-between;padding:16px 20px;font-family:var(--serif);font-size:16px;font-weight:600;color:var(--ink);text-align:left}
.yulai-tutorial-root .tu-chap-caret{font-family:var(--mono);font-size:10px;color:var(--ink-3)}
.yulai-tutorial-root .tu-chap-body{padding:0 20px 20px;display:none}
.yulai-tutorial-root .tu-chap.is-open .tu-chap-body{display:block}
.yulai-tutorial-root .tu-chap-desc{font-size:12.5px;color:var(--ink-3);line-height:1.75;margin-bottom:18px}
.yulai-tutorial-root .tu-chap-toc{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--ink-3);text-transform:uppercase;margin-bottom:10px}
.yulai-tutorial-root .tu-toc-list{list-style:none;display:flex;flex-direction:column;gap:2px}
.yulai-tutorial-root .tu-toc-list a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;font-size:13.5px;color:var(--ink-2);transition:all .2s}
.yulai-tutorial-root .tu-toc-list .dot{width:4px;height:4px;border-radius:50%;background:var(--ink-4);flex-shrink:0}
.yulai-tutorial-root .tu-toc-list a:hover{background:oklch(0.94 0.012 80 / 0.5);color:var(--ink)}
.yulai-tutorial-root .tu-toc-list .is-current a{background:var(--bg);color:var(--ink);font-weight:500;box-shadow:0 0 0 1px var(--line-2)}
.yulai-tutorial-root .tu-toc-list .is-current .dot{background:var(--accent)}

/* doc */
.yulai-tutorial-root .tu-doc{max-width:880px;padding-bottom:120px}
.yulai-tutorial-root .tu-doc{position:relative}

/* head — tighter */
.yulai-tutorial-root .tu-head{padding:24px 0 36px;border-bottom:1px solid var(--line-2);position:relative}
.yulai-tutorial-root .tu-head-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--ink-3);text-transform:uppercase;margin-bottom:18px}
.yulai-tutorial-root .tu-head-path{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--ink-3);margin-bottom:14px}
.yulai-tutorial-root .tu-head-path .sep{margin:0 8px;color:var(--ink-4)}
.yulai-tutorial-root .tu-head-path .cur{color:var(--ink-2)}
.yulai-tutorial-root .tu-head-title{font-family:var(--serif);font-size:40px;font-weight:600;line-height:1.2;letter-spacing:-0.01em;color:var(--ink);margin-bottom:20px}
.yulai-tutorial-root .tu-head-lede{font-family:var(--serif);font-size:18px;line-height:1.7;color:var(--ink);font-weight:400;margin-bottom:28px;max-width:720px;text-wrap:pretty}
.yulai-tutorial-root .tu-head-note{font-size:14.5px;line-height:1.75;color:var(--ink-2);max-width:720px;margin-bottom:24px;border-left:2px solid var(--accent);padding-left:16px}
.yulai-tutorial-root .tu-head-actions{margin-bottom:28px}

.yulai-tutorial-root .tu-anchor{display:flex;flex-wrap:wrap;gap:6px;padding:14px 0 0;border-top:1px dashed var(--line-2)}
.yulai-tutorial-root .tu-anchor a{padding:6px 12px;border-radius:999px;font-size:12.5px;color:var(--ink-2);background:transparent;transition:all .2s;font-family:var(--serif);border:1px solid var(--line-2)}
.yulai-tutorial-root .tu-anchor a:hover{background:var(--bg);color:var(--ink);border-color:var(--ink-3)}
.yulai-tutorial-root .tu-anchor a.is-active{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* tri — tighter, lesson-summary style */
.yulai-tutorial-root .tu-tri{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;padding:32px 0;border-bottom:1px solid var(--line-2)}
.yulai-tutorial-root .tu-tri-eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--ink-3);text-transform:uppercase;margin-bottom:10px}
.yulai-tutorial-root .tu-tri-big{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--ink);line-height:1.3;margin-bottom:8px;letter-spacing:-0.005em}
.yulai-tutorial-root .tu-tri-desc{font-size:13.5px;line-height:1.7;color:var(--ink-2)}

/* sections — tighter, more lesson-doc feel */
.yulai-tutorial-root .tu-sec{padding:48px 0 32px;border-bottom:1px solid var(--line-2);scroll-margin-top:96px;position:relative}
.yulai-tutorial-root .tu-sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:16px}
.yulai-tutorial-root .tu-sec-marker{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--ink-4);text-transform:uppercase;flex-shrink:0;padding-top:2px;font-weight:500}
.yulai-tutorial-root .tu-sec-marker .sm-num{color:var(--accent)}
.yulai-tutorial-root .tu-sec-title{font-family:var(--serif);font-size:24px;font-weight:600;color:var(--ink);line-height:1.35;letter-spacing:-0.005em;margin:0}
.yulai-tutorial-root .tu-sec-lede{font-family:var(--serif);font-size:16px;color:var(--ink-2);line-height:1.75;margin-bottom:24px;max-width:720px;text-wrap:pretty;font-weight:400}
.yulai-tutorial-root .tu-sec-lede + .tu-prose{margin-top:0}
.yulai-tutorial-root .tu-sec-marker-inline{margin-bottom:10px}

@media(min-width:1280px){
  .yulai-tutorial-root .tu-sec-head > .tu-sec-marker,
  .yulai-tutorial-root .tu-sec-marker-inline{position:absolute;left:-86px;top:54px;width:68px;text-align:right;padding-top:0;font-size:10.5px;letter-spacing:.22em;margin-bottom:0}
  .yulai-tutorial-root .tu-sec-head{margin-left:0}
}

/* prose — tighter */
.yulai-tutorial-root .tu-prose{font-size:15px;line-height:1.85;color:var(--ink-2);max-width:740px}
.yulai-tutorial-root .tu-prose p{margin-bottom:1.1em;text-wrap:pretty}
.yulai-tutorial-root .tu-prose strong{color:var(--ink);font-weight:600}
.yulai-tutorial-root .tu-prose em{font-family:var(--serif);font-style:normal;color:var(--ink);background:linear-gradient(transparent 60%,oklch(0.62 0.12 50 / 0.18) 60%);padding:0 2px}
.yulai-tutorial-root .tu-prose h3{font-family:var(--serif);font-size:17px;font-weight:600;color:var(--ink);margin:24px 0 10px}
.yulai-tutorial-root .tu-prose .tu-ol,.yulai-tutorial-root .tu-prose .tu-ul{padding-left:0;list-style:none;margin-bottom:1.1em}
.yulai-tutorial-root .tu-prose .tu-ol li,.yulai-tutorial-root .tu-prose .tu-ul li{position:relative;padding:10px 0 10px 36px;border-bottom:1px dashed var(--line-2)}
.yulai-tutorial-root .tu-prose .tu-ol{counter-reset:tuol}
.yulai-tutorial-root .tu-prose .tu-ol li::before{counter-increment:tuol;content:counter(tuol,decimal-leading-zero);position:absolute;left:0;top:11px;font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:.06em}
.yulai-tutorial-root .tu-prose .tu-ul li::before{content:"";position:absolute;left:8px;top:18px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.yulai-tutorial-root .tu-prose .tu-ol-k{display:inline-block;font-family:var(--serif);font-weight:600;color:var(--ink);margin-right:8px;min-width:78px}
.yulai-tutorial-root .tu-pull{font-family:var(--serif);font-size:16px;color:var(--ink);font-weight:500;border-left:2px solid var(--accent);padding:6px 0 6px 16px;background:linear-gradient(90deg,oklch(0.62 0.12 50 / 0.05),transparent);margin:18px 0}

/* essay critique embedded tool */
.yulai-tutorial-root .tu-essay-tool{display:grid;gap:0;margin-top:4px;color:var(--ink-2);max-width:760px}
.yulai-tutorial-root .tu-essay-step{display:grid;grid-template-columns:56px minmax(0,1fr);gap:28px;padding:28px 0;border-top:1px solid var(--line-2)}
.yulai-tutorial-root .tu-essay-step:first-child{border-top:0;padding-top:0}
.yulai-tutorial-root .tu-essay-step-num{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--accent);line-height:1.8;padding-top:5px}
.yulai-tutorial-root .tu-essay-step-body{min-width:0}
.yulai-tutorial-root .tu-essay-step-head{margin-bottom:16px}
.yulai-tutorial-root .tu-essay-step-head h3{font-family:var(--serif);font-size:18px;line-height:1.35;color:var(--ink);font-weight:600;margin:0 0 8px}
.yulai-tutorial-root .tu-essay-step-head p{font-family:var(--serif);font-size:14.5px;line-height:1.8;color:var(--ink-2);margin:0;text-wrap:pretty}
.yulai-tutorial-root .tu-essay-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-top:12px}
.yulai-tutorial-root .tu-essay-actions.is-aligned{align-items:flex-end}
.yulai-tutorial-root .tu-essay-tool .btn{border-radius:999px;border-color:var(--line-2);box-shadow:none;font-family:var(--serif)}
.yulai-tutorial-root .tu-essay-tool .btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.yulai-tutorial-root .tu-essay-icon{width:16px;height:16px;flex-shrink:0}
.yulai-tutorial-root .tu-essay-hint{font-size:12.5px;line-height:1.7;color:var(--ink-3)}
.yulai-tutorial-root .tu-essay-error{margin:12px 0 0;font-size:13px;line-height:1.7;color:var(--accent)}
.yulai-tutorial-root .tu-essay-upload-list{display:grid;gap:8px;margin:16px 0 0;padding:0;list-style:none}
.yulai-tutorial-root .tu-essay-file-row{display:flex;align-items:center;gap:10px;min-width:0;padding:10px 0;border-top:1px dashed var(--line-2)}
.yulai-tutorial-root .tu-essay-file-index{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-3);white-space:nowrap}
.yulai-tutorial-root .tu-essay-file-thumb{height:56px;width:auto;max-width:104px;border-radius:8px;object-fit:cover;border:1px solid var(--line-2)}
.yulai-tutorial-root .tu-essay-file-name{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;color:var(--ink-3)}
.yulai-tutorial-root .tu-essay-file-actions{display:flex;align-items:center;gap:6px}
.yulai-tutorial-root .tu-essay-icon-btn{width:34px;height:34px;padding:0;justify-content:center;border-radius:50%}
.yulai-tutorial-root .tu-essay-icon-btn.is-danger{color:var(--accent)}
.yulai-tutorial-root .tu-essay-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:14px}
@media (max-width:720px){.yulai-tutorial-root .tu-essay-field-grid{grid-template-columns:1fr;gap:16px}}
.yulai-tutorial-root .tu-essay-field{display:grid;gap:7px;min-width:0}
.yulai-tutorial-root .tu-essay-field.is-compact{max-width:220px}
.yulai-tutorial-root .tu-essay-field span{font-size:12px;font-weight:600;color:var(--ink);line-height:1.5}
.yulai-tutorial-root .tu-essay-input,.yulai-tutorial-root .tu-essay-select{width:100%;border:1px solid var(--line-2);background:oklch(0.99 0.004 80 / .72);color:var(--ink);border-radius:10px;font:inherit;font-size:14px;line-height:1.75;outline:none;transition:border-color .18s,background .18s}
.yulai-tutorial-root .tu-essay-input{min-height:220px;max-height:320px;padding:12px 14px;resize:vertical}
.yulai-tutorial-root .tu-essay-input::placeholder,.yulai-tutorial-root .tu-essay-select::placeholder{color:var(--ink-4);opacity:1}
.yulai-tutorial-root .tu-essay-review-tip{margin-top:14px;font-size:12.5px;line-height:1.7;color:var(--ink-3)}
.yulai-tutorial-root .tu-essay-select{height:42px;padding:0 12px}
.yulai-tutorial-root .tu-essay-input:focus,.yulai-tutorial-root .tu-essay-select:focus{border-color:oklch(0.62 0.12 50 / .5);background:var(--bg)}
.yulai-tutorial-root .tu-essay-step-result{padding-bottom:8px}
.yulai-tutorial-root .tu-essay-result-tabs{display:inline-flex;gap:4px;padding:3px;border:1px solid var(--line-2);border-radius:999px;background:oklch(0.97 0.008 80 / .7);margin:4px 0 16px}
.yulai-tutorial-root .tu-essay-result-tabs button{border:0;background:transparent;border-radius:999px;padding:7px 14px;font:inherit;font-size:13px;color:var(--ink-3);cursor:pointer}
.yulai-tutorial-root .tu-essay-result-tabs button.is-active{background:var(--ink);color:var(--bg)}
.yulai-tutorial-root .tu-essay-empty-result{border-top:1px dashed var(--line-2);padding-top:14px;font-size:14px;line-height:1.8;color:var(--ink-3)}
.yulai-tutorial-root .tu-essay-result{border-top:1px dashed var(--line-2);padding-top:16px}
.yulai-tutorial-root .tu-essay-score-line{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.yulai-tutorial-root .tu-essay-score{font-family:var(--serif);font-size:34px;line-height:1;color:var(--ink);font-weight:600}
.yulai-tutorial-root .tu-essay-score-meta{font-size:13px;color:var(--ink-3)}
.yulai-tutorial-root .tu-essay-result-copy{margin:14px 0 0;font-size:14.5px;line-height:1.8;color:var(--ink)}
.yulai-tutorial-root .tu-essay-result-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.yulai-tutorial-root .tu-essay-result h4,.yulai-tutorial-root .tu-essay-snippets h4{font-family:var(--serif);font-size:15px;color:var(--ink);font-weight:600;margin:0 0 8px}
.yulai-tutorial-root .tu-essay-result ul,.yulai-tutorial-root .tu-essay-snippets ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.yulai-tutorial-root .tu-essay-result li{position:relative;padding-left:16px;font-size:13.5px;line-height:1.75;color:var(--ink-2)}
.yulai-tutorial-root .tu-essay-result li::before{content:"";position:absolute;left:0;top:.78em;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.yulai-tutorial-root .tu-essay-snippets{margin-top:18px}
.yulai-tutorial-root .tu-essay-snippets li{padding:12px 0;border-top:1px dashed var(--line-2)}
.yulai-tutorial-root .tu-essay-snippets p{margin:0;font-size:13.5px;line-height:1.75;color:var(--ink-2)}
.yulai-tutorial-root .tu-essay-snippets p:first-child{color:var(--ink);margin-bottom:6px}

.yulai-tutorial-root .tu-callout{margin:22px 0;padding:16px 20px;border-radius:10px;background:oklch(0.5 0.04 220 / 0.06);border:1px solid oklch(0.5 0.04 220 / 0.18)}
.yulai-tutorial-root .tu-callout-warn{background:oklch(0.62 0.12 50 / 0.06);border-color:oklch(0.62 0.12 50 / 0.22)}
.yulai-tutorial-root .tu-callout-tag{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--accent);text-transform:uppercase;margin-bottom:6px}
.yulai-tutorial-root .tu-callout p{margin:0;font-size:14px;line-height:1.75;color:var(--ink-2)}

/* tool card — tighter, more inline */
.yulai-tutorial-root .tool-card{margin-top:8px;padding:28px;border-radius:14px;background:var(--bg);box-shadow:0 0 0 1px var(--line-2)}
.yulai-tutorial-root .tool-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--ink-3);text-transform:uppercase;margin-bottom:8px}
.yulai-tutorial-root .tool-title{font-family:var(--serif);font-size:18px;font-weight:600;color:var(--ink);line-height:1.4;margin-bottom:8px}
.yulai-tutorial-root .tool-sub{font-size:13.5px;line-height:1.7;color:var(--ink-3);margin-bottom:20px;max-width:620px}
.yulai-tutorial-root .tool-bound{padding:14px 18px;background:oklch(0.5 0.04 220 / 0.06);border:1px solid oklch(0.5 0.04 220 / 0.16);border-radius:8px;margin-bottom:22px}
.yulai-tutorial-root .tool-bound-head{font-family:var(--serif);font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:6px}
.yulai-tutorial-root .tool-bound p{font-size:13px;line-height:1.7;color:var(--ink-2);margin:2px 0}

.yulai-tutorial-root .tool-form{display:flex;flex-direction:column;gap:14px}
.yulai-tutorial-root .tool-field{display:flex;flex-direction:column;gap:6px}
.yulai-tutorial-root .tool-label{font-family:var(--serif);font-size:13.5px;font-weight:600;color:var(--ink)}
.yulai-tutorial-root .tool-form input,.yulai-tutorial-root .tool-form textarea{font:inherit;font-size:14px;color:var(--ink);background:oklch(0.96 0.008 80);border:1px solid var(--line-2);border-radius:8px;padding:10px 14px;line-height:1.6;transition:border-color .2s,background .2s;font-family:var(--sans);resize:vertical}
.yulai-tutorial-root .tool-form input:focus,.yulai-tutorial-root .tool-form textarea:focus{outline:none;border-color:var(--accent);background:var(--bg)}
.yulai-tutorial-root .tool-form input::placeholder,.yulai-tutorial-root .tool-form textarea::placeholder{color:var(--ink-4)}
.yulai-tutorial-root .tool-actions{display:flex;gap:8px;margin-top:6px}

.yulai-tutorial-root .tool-output{margin-top:22px;padding-top:22px;border-top:1px dashed var(--line-2)}
.yulai-tutorial-root .tool-output-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--ink-3);text-transform:uppercase;margin-bottom:10px}
.yulai-tutorial-root .tool-output-body{font-family:var(--mono);font-size:12.5px;line-height:1.85;color:var(--ink-2);background:oklch(0.96 0.008 80);border:1px solid var(--line-2);border-radius:8px;padding:18px 22px;white-space:pre-wrap;word-break:break-word;margin-bottom:14px}
.yulai-tutorial-root .tool-output-actions{display:flex;gap:8px}

/* collapse */
.yulai-tutorial-root .tu-collapse{padding:0}
.yulai-tutorial-root .tu-collapse summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:4px 0;margin-bottom:14px}
.yulai-tutorial-root .tu-collapse summary::-webkit-details-marker{display:none}
.yulai-tutorial-root .tu-col-caret{font-family:var(--mono);font-size:13px;color:var(--ink-3);transition:transform .2s}
.yulai-tutorial-root .tu-inline-title{margin-bottom:0!important;font-size:22px!important}

/* video */
.yulai-tutorial-root .tu-video{margin-top:24px}
.yulai-tutorial-root .tu-video-frame{border-radius:14px;overflow:hidden;border:1px solid var(--line-2);background:oklch(0.18 0.01 60)}
.yulai-tutorial-root .tu-video-ph{aspect-ratio:16/9;display:grid;place-items:center;background:radial-gradient(circle at 30% 40%,oklch(0.85 0.05 320 / 0.6),oklch(0.92 0.02 80) 60%)}
.yulai-tutorial-root .ph-illu{text-align:center;color:var(--ink)}
.yulai-tutorial-root .ph-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;color:var(--ink-3);text-transform:uppercase;margin-bottom:14px}
.yulai-tutorial-root .ph-title{font-family:var(--serif);font-size:32px;font-weight:600;line-height:1.2;margin-bottom:10px}
.yulai-tutorial-root .ph-meta{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--ink-3)}
.yulai-tutorial-root .tu-video-bar{display:flex;align-items:center;gap:14px;padding:14px 18px;background:oklch(0.18 0.01 60);color:oklch(0.92 0.01 80)}
.yulai-tutorial-root .vbtn{width:30px;height:30px;display:grid;place-items:center;color:oklch(0.92 0.01 80);font-size:14px;border-radius:6px}
.yulai-tutorial-root .vbtn:hover{background:oklch(0.32 0.01 60)}
.yulai-tutorial-root .vbtn-play{width:36px;height:36px;font-size:13px}
.yulai-tutorial-root .v-time{font-family:var(--mono);font-size:12px;letter-spacing:.05em;opacity:.85}
.yulai-tutorial-root .v-track{flex:1;height:3px;background:oklch(0.42 0.01 60);border-radius:999px;overflow:hidden}
.yulai-tutorial-root .v-fill{width:0%;height:100%;background:oklch(0.92 0.01 80)}
.yulai-tutorial-root .tu-video-cap{margin-top:14px;text-align:center;font-size:13px;color:var(--ink-3);font-family:var(--serif)}

/* quiz — tighter */
.yulai-tutorial-root .quiz{margin-top:8px}
.yulai-tutorial-root .quiz-meta{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);font-size:12px;color:var(--ink-3);margin-bottom:8px}
.yulai-tutorial-root .quiz-idx strong{color:var(--ink);font-weight:600}
.yulai-tutorial-root .quiz-pct{color:var(--accent)}
.yulai-tutorial-root .quiz-bar{height:2px;background:var(--line-2);border-radius:999px;margin-bottom:24px;overflow:hidden}
.yulai-tutorial-root .quiz-bar-fill{height:100%;background:var(--ink);transition:width .3s}

.yulai-tutorial-root .quiz-card{padding:28px;border-radius:14px;background:var(--bg);box-shadow:0 0 0 1px var(--line-2)}
.yulai-tutorial-root .quiz-q{font-family:var(--serif);font-size:18px;font-weight:600;color:var(--ink);line-height:1.55;margin-bottom:16px}
.yulai-tutorial-root .quiz-hint{display:flex;align-items:center;gap:10px;padding:10px 14px;background:oklch(0.94 0.012 80 / 0.6);border-radius:8px;margin-bottom:20px;font-size:13.5px;color:var(--ink-2)}
.yulai-tutorial-root .bulb{font-size:14px}
.yulai-tutorial-root .quiz-options{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:24px}
.yulai-tutorial-root .quiz-options label{display:flex;align-items:center;gap:14px;padding:14px 18px;border:1px solid var(--line-2);border-radius:10px;cursor:pointer;transition:all .2s;background:var(--bg)}
.yulai-tutorial-root .quiz-options label:hover{border-color:var(--ink-3);background:oklch(0.96 0.008 80)}
.yulai-tutorial-root .opt-key{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-family:var(--mono);font-size:12px;color:var(--ink-2);flex-shrink:0}
.yulai-tutorial-root .opt-text{font-family:var(--serif);font-size:15.5px;color:var(--ink)}
.yulai-tutorial-root .quiz-options input{display:none}
.yulai-tutorial-root .quiz-options .is-picked label{border-color:var(--accent);background:oklch(0.62 0.12 50 / 0.06)}
.yulai-tutorial-root .quiz-options .is-picked .opt-key{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.yulai-tutorial-root .quiz-actions{display:flex;justify-content:flex-end;gap:8px;align-items:center}
.yulai-tutorial-root .quiz-actions .qa-spacer{flex:1}
.yulai-tutorial-root .quiz-actions .qa-meta{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);letter-spacing:.04em}

/* ====== quiz answered states ====== */
/* dim un-related options after answer */
.yulai-tutorial-root .quiz-card.is-answered .quiz-options{gap:4px}
.yulai-tutorial-root .quiz-card.is-answered .quiz-options label{cursor:default;background:transparent;border-color:transparent;padding:10px 0;opacity:1}
.yulai-tutorial-root .quiz-card.is-answered .quiz-options label:hover{background:transparent;border-color:transparent}
.yulai-tutorial-root .quiz-card.is-answered .quiz-options li:not(.is-correct):not(.is-picked) .opt-text{color:var(--ink-3)}
.yulai-tutorial-root .quiz-card.is-answered .quiz-options li:not(.is-correct):not(.is-picked) .opt-key{color:var(--ink-4);border-color:var(--line-2)}

/* correct option marker */
.yulai-tutorial-root .quiz-card.is-answered .quiz-options .is-correct label{
  border-color:transparent;background:transparent;
}
.yulai-tutorial-root .quiz-card.is-answered .quiz-options .is-correct .opt-key{
  background:var(--ok);color:var(--bg);border-color:var(--ok);
}
.yulai-tutorial-root .quiz-card.is-answered .quiz-options .is-correct .opt-text{color:var(--ok);font-weight:500}
/* user's wrong pick */
.yulai-tutorial-root .quiz-card.is-answered .quiz-options .is-picked.is-wrong label{
  border-color:transparent;background:transparent;
  text-decoration:none;
}
.yulai-tutorial-root .quiz-card.is-answered .quiz-options .is-picked.is-wrong .opt-key{
  background:var(--no);color:var(--bg);border-color:var(--no);
}
.yulai-tutorial-root .quiz-card.is-answered .quiz-options .is-picked.is-wrong .opt-text{
  color:var(--no);text-decoration:line-through;text-decoration-color:oklch(0.54 0.16 28 / 0.5);text-decoration-thickness:1px;
}

/* trailing tag on options (after answer) */
.yulai-tutorial-root .opt-tail{margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--ink-4);text-transform:uppercase}
.yulai-tutorial-root .quiz-card.is-answered .is-correct .opt-tail{color:var(--ok)}
.yulai-tutorial-root .quiz-card.is-answered .is-picked.is-wrong .opt-tail{color:var(--no)}

/* result banner above options */
.yulai-tutorial-root .quiz-result{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;margin-bottom:18px;font-family:var(--serif);font-size:14px}
.yulai-tutorial-root .quiz-result.is-ok{background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok-line)}
.yulai-tutorial-root .quiz-result.is-no{background:var(--no-bg);color:var(--no);border:1px solid var(--no-line)}
.yulai-tutorial-root .quiz-result-mark{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:13px;color:var(--bg);flex-shrink:0}
.yulai-tutorial-root .quiz-result.is-ok .quiz-result-mark{background:var(--ok)}
.yulai-tutorial-root .quiz-result.is-no .quiz-result-mark{background:var(--no)}
.yulai-tutorial-root .quiz-result-text{flex:1;color:var(--ink)}
.yulai-tutorial-root .quiz-result-pts{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--ink-3)}

/* explanation block */
.yulai-tutorial-root .quiz-explain{margin-top:18px;padding:18px 20px;border-left:2px solid var(--ink-3);background:oklch(0.96 0.008 80);border-radius:0 10px 10px 0}
.yulai-tutorial-root .quiz-explain-eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--ink-3);text-transform:uppercase;margin-bottom:8px}
.yulai-tutorial-root .quiz-explain p{font-family:var(--serif);font-size:14.5px;line-height:1.8;color:var(--ink-2);margin:0 0 8px;text-wrap:pretty}
.yulai-tutorial-root .quiz-explain p:last-of-type{margin-bottom:0}
.yulai-tutorial-root .quiz-explain p strong{color:var(--ink);font-weight:600}
.yulai-tutorial-root .quiz-explain-src{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line-2);font-family:var(--mono);font-size:11.5px;color:var(--ink-3);letter-spacing:.02em}
.yulai-tutorial-root .quiz-explain-src .src-tag{color:var(--accent);margin-right:8px}

/* weak-point tracker pill */
.yulai-tutorial-root .quiz-track{display:flex;align-items:center;gap:10px;margin-top:14px;padding:10px 14px;border:1px dashed var(--line-2);border-radius:8px;font-size:13px;color:var(--ink-2);line-height:1.6}
.yulai-tutorial-root .qt-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--accent);text-transform:uppercase;padding:3px 8px;border:1px solid oklch(0.62 0.12 50 / 0.32);border-radius:4px;flex-shrink:0}
.yulai-tutorial-root .quiz-track strong{color:var(--ink);font-weight:600}

/* history strip — 20 dots */
.yulai-tutorial-root .quiz-strip{display:flex;align-items:center;gap:6px;margin-bottom:10px;padding:10px 0;flex-wrap:wrap}
.yulai-tutorial-root .quiz-strip-label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--ink-3);text-transform:uppercase;margin-right:8px}
.yulai-tutorial-root .qs-dot{width:14px;height:14px;border-radius:4px;border:1px solid var(--line-2);display:grid;place-items:center;font-family:var(--mono);font-size:9px;color:var(--ink-4);background:transparent}
.yulai-tutorial-root .qs-dot.is-ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.yulai-tutorial-root .qs-dot.is-no{background:var(--no-bg);border-color:var(--no-line);color:var(--no)}
.yulai-tutorial-root .qs-dot.is-cur{background:var(--ink);border-color:var(--ink);color:var(--bg);transform:scale(1.15)}
.yulai-tutorial-root .qs-sep{color:var(--ink-4);font-family:var(--mono);font-size:11px;margin:0 4px}

/* per-option inline note (sits flush under the wrong pick, not a box) */
.yulai-tutorial-root .opt-note{display:flex;align-items:flex-start;gap:8px;margin:6px 0 10px 46px;padding:0;font-family:var(--serif);font-style:italic;font-size:13.5px;line-height:1.7;color:var(--ink-3);background:transparent;border:0;text-wrap:pretty}
.yulai-tutorial-root .opt-note strong{color:var(--ink-2);font-weight:600;font-style:normal}
.yulai-tutorial-root .opt-note-mark{display:none}
.yulai-tutorial-root .btn-ghost{padding:9px 14px;border:1px solid var(--line-2);background:transparent;color:var(--ink-2);border-radius:8px;font:inherit;font-size:13px;cursor:pointer;font-family:var(--serif);transition:all .2s}
.yulai-tutorial-root .btn-ghost:hover{border-color:var(--ink-3);color:var(--ink)}

/* next */
.yulai-tutorial-root .tu-next{margin-top:48px}
.yulai-tutorial-root .tu-next-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--ink-3);text-transform:uppercase;margin-bottom:14px}
.yulai-tutorial-root .tu-next-card{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px;border-radius:14px;border:1px solid var(--line-2);background:var(--bg);transition:all .25s}
.yulai-tutorial-root .tu-next-card:hover{border-color:var(--ink-3);transform:translateY(-1px)}
.yulai-tutorial-root .tu-next-num{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--accent);text-transform:uppercase;margin-bottom:8px}
.yulai-tutorial-root .tu-next-title{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--ink);margin-bottom:6px}
.yulai-tutorial-root .tu-next-desc{font-size:13.5px;color:var(--ink-2);line-height:1.7;max-width:560px}
.yulai-tutorial-root .tu-next-arrow{font-family:var(--serif);font-size:32px;color:var(--ink-3);font-weight:300;flex-shrink:0}

/* fab */
.yulai-tutorial-root .fab{position:fixed;left:24px;bottom:24px;width:46px;height:46px;border-radius:50%;background:var(--ink);color:var(--bg);font-family:var(--serif);font-weight:500;display:grid;place-items:center;box-shadow:0 12px 32px -12px oklch(0.22 0.012 60 / 0.4);z-index:40;font-size:16px}
.yulai-tutorial-root .fab-ai{left:auto;right:24px;background:oklch(0.62 0.12 50 / 0.12);color:var(--accent);box-shadow:0 12px 32px -12px oklch(0.62 0.12 50 / 0.5)}
.yulai-tutorial-root .fab-ai svg{width:20px;height:20px}
.yulai-tutorial-root .fab:hover{transform:translateY(-2px)}

/* keep brand mark visible */
.yulai-tutorial-root .brand .brand-mark{display:grid}

@media (max-width: 900px){
  .yulai-tutorial-root .nav-inner{padding:0 20px}
  .yulai-tutorial-root .nav-cta{display:none}
  .yulai-tutorial-root .nav-links{justify-content:flex-start}
  .yulai-tutorial-root .brand{flex:0 0 auto;min-width:max-content}
  .yulai-tutorial-root .brand-cn{white-space:nowrap}
  .yulai-tutorial-root .tu-side{position:static}
}

@media (max-width: 640px){
  .yulai-tutorial-root .tu-essay-step{grid-template-columns:40px minmax(0,1fr);gap:14px;padding:24px 0}
  .yulai-tutorial-root .tu-essay-field-grid,.yulai-tutorial-root .tu-essay-result-grid{grid-template-columns:1fr}
  .yulai-tutorial-root .tu-essay-file-row{align-items:flex-start;flex-wrap:wrap}
  .yulai-tutorial-root .tu-essay-file-actions{width:100%;padding-left:0}
  .yulai-tutorial-root .nav-inner{padding:0 16px;gap:12px}
  .yulai-tutorial-root .brand-en{display:none}
  .yulai-tutorial-root .brand{gap:8px}
  .yulai-tutorial-root .brand-cn{font-size:16px}
  .yulai-tutorial-root .tu-main{padding:88px 24px 0}
  .yulai-tutorial-root .fab-note{display:none}
  .yulai-tutorial-root .fab-ai{right:18px;bottom:18px}
}

/* auth page — 登录/注册卡片在 tutorial 外壳里的适配 */
.yulai-tutorial-root .tu-auth-main{grid-template-columns:1fr;max-width:820px;padding:96px 56px 0}
.yulai-tutorial-root .tu-auth-main .tu-doc{max-width:720px;margin:0 auto}
.yulai-tutorial-root .tu-auth-tabs{display:flex;gap:0;margin:18px 0 24px;padding:4px;border:1px solid var(--line-2);border-radius:999px;background:var(--bg-2);width:fit-content}
.yulai-tutorial-root .tu-auth-tab{padding:8px 22px;border-radius:999px;font-family:var(--serif);font-size:14px;color:var(--ink-3);transition:all .2s}
.yulai-tutorial-root .tu-auth-tab.is-active{background:var(--ink);color:var(--bg);font-weight:500}
.yulai-tutorial-root .tu-auth-tab:hover:not(.is-active){color:var(--ink)}
.yulai-tutorial-root .tu-auth-form{display:flex;flex-direction:column;gap:18px;margin-top:22px;max-width:520px}
.yulai-tutorial-root .tu-auth-field{display:flex;flex-direction:column;gap:8px}
.yulai-tutorial-root .tu-auth-label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--ink-3);text-transform:uppercase}
.yulai-tutorial-root .tu-auth-input{padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14.5px;line-height:1.6;transition:border-color .2s,box-shadow .2s;outline:none}
.yulai-tutorial-root .tu-auth-input::placeholder{color:var(--ink-4)}
.yulai-tutorial-root .tu-auth-input:focus{border-color:var(--ink);box-shadow:0 0 0 3px oklch(0.62 0.12 50 / 0.12)}
.yulai-tutorial-root .tu-auth-secondary{display:flex;justify-content:flex-end}
.yulai-tutorial-root .tu-auth-alert{padding:12px 16px;border-radius:10px;font-size:13.5px;line-height:1.7;font-family:var(--serif)}
.yulai-tutorial-root .tu-auth-alert-error{background:var(--no-bg);border:1px solid var(--no-line);color:var(--no)}
.yulai-tutorial-root .tu-auth-alert-success{background:var(--ok-bg);border:1px solid var(--ok-line);color:var(--ok)}
.yulai-tutorial-root .tu-auth-submit{justify-content:center;margin-top:6px}
.yulai-tutorial-root .tu-auth-submit:disabled{opacity:.5;cursor:not-allowed}
.yulai-tutorial-root .tu-auth-card{padding:24px;border:1px solid var(--line-2);border-radius:16px;background:var(--bg-2);display:flex;flex-direction:column;gap:20px;max-width:560px;margin-top:8px}
.yulai-tutorial-root .tu-auth-hello{display:flex;align-items:flex-start;gap:14px}
.yulai-tutorial-root .tu-auth-name{font-family:var(--serif);font-size:18px;font-weight:600;color:var(--ink);margin-bottom:6px}
.yulai-tutorial-root .tu-auth-sub{font-size:13.5px;line-height:1.7;color:var(--ink-2)}
.yulai-tutorial-root .tu-auth-actions{display:flex;flex-wrap:wrap;gap:10px}
.yulai-tutorial-root .tu-auth-icon{width:22px;height:22px;color:var(--accent);flex-shrink:0;margin-top:2px}
.yulai-tutorial-root .tu-auth-icon-sm{width:16px;height:16px;flex-shrink:0}
.yulai-tutorial-root .tu-auth-spin{animation:tu-auth-spin 1s linear infinite}
@keyframes tu-auth-spin{to{transform:rotate(360deg)}}

/* chatbot embedded chat — 覆盖 ChatbotShell 内 tailwind 类，让它在 tutorial 背景里自然 */
.yulai-tutorial-root .tu-chat-embed{margin-top:4px;padding:4px 0;max-width:760px}
.yulai-tutorial-root .tu-chat-embed .anthropic-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--ink-3);text-transform:uppercase}
.yulai-tutorial-root .tu-chat-embed form{border:1px solid var(--line-2)!important;background:var(--bg-2)!important;border-radius:14px!important}
.yulai-tutorial-root .tu-chat-embed textarea{border-color:var(--line)!important;background:var(--bg)!important;border-radius:12px!important;font-family:var(--sans)}
.yulai-tutorial-root .tu-chat-embed textarea:focus{border-color:var(--ink)!important}

/* tool-page shell — 把 legacy tailwind 工具页套到 tutorial 背景下 */
.yulai-tutorial-root .tu-tool-main{max-width:1280px;margin:0 auto;padding:96px 56px 96px}
@media (max-width:1100px){.yulai-tutorial-root .tu-tool-main{padding:96px 40px 64px}}
@media (max-width:640px){.yulai-tutorial-root .tu-tool-main{padding:88px 20px 48px}}
.yulai-tutorial-root .tu-tool-head{margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--line-2)}
.yulai-tutorial-root .tu-tool-head .tu-head-eyebrow{margin-bottom:14px}
.yulai-tutorial-root .tu-tool-title{font-family:var(--serif);font-size:clamp(28px,3vw,40px);font-weight:600;line-height:1.25;color:var(--ink);margin-bottom:14px;letter-spacing:-0.005em}
.yulai-tutorial-root .tu-tool-lede{font-family:var(--serif);font-size:16px;line-height:1.75;color:var(--ink-2);max-width:720px;text-wrap:pretty}
.yulai-tutorial-root .tu-tool-body{color:var(--ink-2)}

/* chat page — nav + hero + chat */
.yulai-tutorial-root .tu-chat-main{max-width:920px;margin:0 auto;padding:0 40px}
@media (max-width:640px){.yulai-tutorial-root .tu-chat-main{padding:0 20px}}
.yulai-tutorial-root .tu-chat-hero{margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid var(--line-2)}
.yulai-tutorial-root .tu-chat-hero .tu-head-eyebrow{margin-bottom:14px}
.yulai-tutorial-root .tu-chat-title{font-family:var(--serif);font-size:clamp(26px,3vw,36px);font-weight:600;line-height:1.25;color:var(--ink);margin-bottom:14px}
.yulai-tutorial-root .tu-chat-lede{font-family:var(--serif);font-size:15.5px;line-height:1.75;color:var(--ink-2);max-width:720px;margin-bottom:22px}
.yulai-tutorial-root .tu-chat-boundary{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.yulai-tutorial-root .tu-chat-boundary{grid-template-columns:1fr}}
.yulai-tutorial-root .tu-chat-boundary-col{padding:14px 16px;border:1px solid var(--line-2);border-radius:12px;background:var(--bg-2)}
.yulai-tutorial-root .tu-chat-boundary-tag-warn{color:var(--accent)}
.yulai-tutorial-root .tu-chat-boundary-list{margin-top:8px;display:flex;flex-direction:column;gap:6px;font-size:13.5px;line-height:1.7;color:var(--ink-2);padding-left:18px;list-style:disc}
.yulai-tutorial-root .tu-chat-body{margin-bottom:32px}

/* Tutorial top-nav: brand link + province pill + user menu */
.yulai-tutorial-root .tu-nav-brand{text-decoration:none;color:inherit}
.yulai-tutorial-root .tu-nav-brand:hover{opacity:.9}
.yulai-tutorial-root .tu-nav-cta{display:flex;align-items:center;gap:10px}
.yulai-tutorial-root .tu-nav-province{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--line-2);background:transparent;color:var(--ink-2);border-radius:999px;font:inherit;font-size:12px;cursor:pointer;font-family:var(--serif);transition:all .2s}
.yulai-tutorial-root .tu-nav-province:hover{border-color:var(--ink-3);color:var(--ink)}
.yulai-tutorial-root .tu-nav-province-label{color:var(--ink-3);letter-spacing:.02em}
.yulai-tutorial-root .tu-nav-province-value{color:var(--ink);font-weight:500}
.yulai-tutorial-root .tu-nav-auth{text-decoration:none}
.yulai-tutorial-root .tu-nav-user-wrap{position:relative}
.yulai-tutorial-root .tu-nav-user{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--line-2);background:transparent;color:var(--ink-2);border-radius:999px;font:inherit;font-size:12px;cursor:pointer;font-family:var(--serif);transition:all .2s;max-width:180px}
.yulai-tutorial-root .tu-nav-user:hover{border-color:var(--ink-3);color:var(--ink)}
.yulai-tutorial-root .tu-nav-user-loading{width:86px;height:32px;background:rgba(0,0,0,.03);border-radius:999px;display:inline-block}
.yulai-tutorial-root .tu-nav-user-dot{width:6px;height:6px;border-radius:999px;background:var(--accent,#d97757);display:inline-block}
.yulai-tutorial-root .tu-nav-user-name{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-weight:500}
.yulai-tutorial-root .tu-nav-user-caret{color:var(--ink-3);font-size:10px;margin-left:2px}
.yulai-tutorial-root .tu-nav-user-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:160px;background:var(--surface,#fdfcf8);border:1px solid var(--line-2);border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.06);padding:6px;z-index:50;display:flex;flex-direction:column;gap:2px}
.yulai-tutorial-root .tu-nav-user-item{display:block;padding:8px 10px;border-radius:7px;font:inherit;font-size:13px;font-family:var(--serif);color:var(--ink-2);text-decoration:none;background:transparent;border:0;text-align:left;cursor:pointer;width:100%}
.yulai-tutorial-root .tu-nav-user-item:hover{background:rgba(0,0,0,.04);color:var(--ink)}
.yulai-tutorial-root .tu-nav-user-item-danger{color:#b0553b}
.yulai-tutorial-root .tu-nav-user-item-danger:hover{background:rgba(217,119,87,.08);color:#b0553b}
@media (max-width:900px){
  .yulai-tutorial-root .tu-nav-cta{display:flex;gap:6px}
  .yulai-tutorial-root .tu-nav-province-label{display:none}
  .yulai-tutorial-root .tu-nav-user-name{max-width:70px}
}
@media (max-width:640px){
  .yulai-tutorial-root .tu-nav-user-caret{display:none}
}