.tutorial-centre { --guide-accent:#27625c; --guide-ink:#172e2c; --guide-muted:#556765; --guide-line:#dce5df; max-width:1240px; padding:32px clamp(18px,4vw,56px) 72px; margin:auto; color:var(--guide-ink); font-family:var(--sans,system-ui,sans-serif); line-height:1.65; }
.tutorial-centre * { box-sizing:border-box; }
.tutorial-centre a { color:var(--guide-accent); text-underline-offset:3px; }
.tutorial-centre :is(a,button,input,select,summary):focus-visible { outline:3px solid #9d4c16; outline-offset:4px; }
.tutorial-centre h1 { font-family:var(--serif,Georgia,serif); font-size:clamp(2rem,4vw,3.6rem); line-height:1.1; font-weight:500; letter-spacing:-.025em; margin:12px 0 22px; }
.tutorial-centre h2 { font-size:1.4rem; line-height:1.3; margin:0 0 20px; }
.tutorial-centre h3 { font-size:1rem; line-height:1.4; margin:0 0 8px; }
.tutorial-centre p { margin:0 0 16px; }
.tutorial-breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:.82rem; margin-bottom:28px; }
.tutorial-breadcrumb a { padding:6px 0; }
.tutorial-hero { background:#edf3ec; border:1px solid var(--guide-line); border-radius:24px; padding:clamp(24px,4vw,46px); display:grid; grid-template-columns:1.2fr 1fr; gap:36px; align-items:center; margin-bottom:44px; }
.tutorial-hero p:not(.tutorial-kicker) { max-width:520px; color:var(--guide-muted); font-size:1.06rem; }
.tutorial-kicker { font-size:.7rem; letter-spacing:.13em; font-weight:700; color:var(--guide-accent); }
.tutorial-primary { display:inline-flex; align-items:center; gap:20px; padding:12px 18px; background:var(--guide-accent); color:white!important; border-radius:9px; font-weight:600; text-decoration:none; font-size:.9rem; min-height:46px; }
.tutorial-primary:hover { background:#194840; }
.tutorial-hero-path { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.tutorial-hero-path li { display:flex; align-items:center; gap:18px; background:#ffffffca; padding:20px; border:1px solid var(--guide-line); border-radius:12px; }
.tutorial-hero-path li>span { font-size:1.6rem; font-family:var(--serif,Georgia,serif); color:var(--guide-accent); }
.tutorial-hero-path strong,.tutorial-hero-path small { display:block; }
.tutorial-hero-path small { color:var(--guide-muted); font-size:.82rem; margin-top:3px; }
.tutorial-filters { display:grid; grid-template-columns:2fr 1fr; gap:18px; }
.tutorial-filters label { display:block; font-size:.85rem; font-weight:600; margin-bottom:6px; }
.tutorial-filters input,.tutorial-filters select { width:100%; padding:12px; border:1px solid #acbfb9; background:white; color:var(--guide-ink); border-radius:9px; min-height:48px; font:inherit; font-size:.9rem; }
.tutorial-count { font-size:.82rem; color:var(--guide-muted); padding:12px 0; }
.tutorial-category { margin-top:30px; }
.tutorial-category h2>span { font-size:.75rem; background:#edf3ec; border-radius:100px; padding:4px 8px; vertical-align:middle; }
.tutorial-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.tutorial-card { border:1px solid var(--guide-line); padding:22px; border-radius:12px; text-decoration:none; background:white; display:flex; flex-direction:column; }
.tutorial-card:hover { border-color:var(--guide-accent); background:#f8fbf8; }
.tutorial-card h3 { color:var(--guide-ink); display:flex; justify-content:space-between; gap:10px; }
.tutorial-card p { color:var(--guide-muted); font-size:.85rem; line-height:1.6; }
.tutorial-card small { color:var(--guide-accent); font-size:.73rem; margin-top:auto; }
.tutorial-article-header { max-width:860px; padding:10px 0 36px; }
.tutorial-article-header>p:not(.tutorial-kicker) { font-size:1.08rem; color:var(--guide-muted); max-width:740px; }
.tutorial-article-layout { display:grid; grid-template-columns:195px minmax(0,1fr); gap:42px; align-items:start; }
.tutorial-toc { position:sticky; top:24px; border-left:2px solid var(--guide-line); padding-left:18px; }
.tutorial-toc nav { display:grid; gap:5px; font-size:.83rem; }
.tutorial-toc strong { padding:6px 0 10px; }
.tutorial-toc a { text-decoration:none; padding:5px 0; }
.tutorial-toc a:hover { text-decoration:underline; }
.tutorial-body { min-width:0; }
.tutorial-body section { margin-bottom:40px; scroll-margin-top:24px; }
.tutorial-body .tutorial-kicker { margin-bottom:8px; }
.tutorial-checklist { list-style:none; padding:0; display:grid; gap:8px; font-size:.92rem; }
.tutorial-checklist li { border-left:3px solid #b7cdbd; padding:9px 14px; background:#f5f8f4; border-radius:0 7px 7px 0; }
.tutorial-flow { display:flex; flex-wrap:wrap; gap:8px 22px; list-style:none; padding:0; margin:0 0 25px; }
.tutorial-flow li { flex:1 1 110px; padding:12px 14px; background:#edf3ec; border-radius:8px; font-size:.8rem; font-weight:600; position:relative; }
.tutorial-flow li:not(:last-child)::after { content:'→'; position:absolute; right:-18px; top:12px; }
.tutorial-steps { list-style:none; padding:0; margin:0; display:grid; gap:20px; }
.tutorial-steps>li { display:flex; gap:18px; padding:6px 0; }
.tutorial-step-number { flex-shrink:0; width:36px; height:36px; display:grid; place-items:center; color:var(--guide-accent); border:1px solid #bdcec4; border-radius:50%; font-size:.8rem; font-weight:600; }
.tutorial-steps p { font-size:.95rem; margin:0; }
.tutorial-example,.tutorial-callout { padding:24px; border:1px solid #eadbbd; border-radius:12px; background:#fff8ea; }
.tutorial-example p:last-child,.tutorial-result p:last-child { margin-bottom:0; }
.tutorial-result { padding:24px; border-radius:12px; background:#edf5ef; border-left:4px solid var(--guide-accent); }
.tutorial-note { padding-left:16px; border-left:2px solid var(--guide-line); font-size:.9rem; }
.tutorial-centre figure { margin:20px 0; border:1px solid var(--guide-line); border-radius:12px; overflow:hidden; background:white; }
.tutorial-centre figure img { display:block; max-width:100%; width:auto; max-height:640px; margin:auto; object-fit:contain; }
.tutorial-centre figcaption { padding:14px 18px; background:#f5f8f4; font-size:.8rem; color:var(--guide-muted); }
.tutorial-related { display:grid; gap:8px; }
.tutorial-related a { padding:12px 16px; border:1px solid var(--guide-line); border-radius:8px; display:flex; justify-content:space-between; text-decoration:none; }
.tutorial-centre details { border:1px solid var(--guide-line); border-radius:9px; padding:0 18px; margin:12px 0; }
.tutorial-centre summary { cursor:pointer; padding:15px 0; font-weight:600; }
.tutorial-centre details>p { font-size:.92rem; }
.tutorial-centre button { min-height:44px; padding:8px 16px; border:1px solid var(--guide-accent); background:white; color:var(--guide-accent); border-radius:8px; cursor:pointer; }
.tutorial-table-scroll { overflow:auto; border:1px solid var(--guide-line); border-radius:10px; }
.tutorial-centre table { border-collapse:collapse; width:100%; font-size:.85rem; }
.tutorial-centre th,.tutorial-centre td { text-align:left; padding:12px 15px; border-bottom:1px solid var(--guide-line); vertical-align:top; }
.tutorial-centre th { background:#edf3ec; }
.tutorial-centre caption { text-align:left; padding:12px 15px; font-weight:600; }
.tutorial-route-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.tutorial-route-grid>div { padding:20px; border:1px solid var(--guide-line); border-radius:12px; }
.tutorial-route-grid p { font-size:.9rem; }
.tutorial-dependency { display:grid; gap:12px; padding:24px; background:#f3f6f2; border-radius:12px; }
.tutorial-dependency>div { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.tutorial-dependency strong { min-width:105px; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; }
.tutorial-dependency span { background:white; border:1px solid var(--guide-line); padding:8px 12px; border-radius:8px; font-size:.85rem; }
.tutorial-dependency b { color:var(--guide-accent); }
.tutorial-centre code { overflow-wrap:anywhere; font-size:.87em; }
.tutorial-centre .tutorial-pilot label { display:flex; gap:10px; padding:12px; margin:8px 0; background:#f5f8f4; border-radius:8px; cursor:pointer; }
.tutorial-pilot input { margin-top:6px; width:18px; height:18px; flex-shrink:0; accent-color:var(--guide-accent); }
.tutorial-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; }
@media (max-width:1050px) { .tutorial-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .tutorial-hero { grid-template-columns:1fr; } .tutorial-hero-path { grid-template-columns:repeat(3,1fr); } .tutorial-hero-path li { flex-direction:column; align-items:flex-start; padding:16px; } }
@media (max-width:760px) { .tutorial-centre { padding:22px 18px 48px; } .tutorial-article-layout { grid-template-columns:1fr; gap:24px; } .tutorial-toc { position:static; } .tutorial-toc nav { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 18px; } .tutorial-toc strong { grid-column:1/-1; } .tutorial-filters,.tutorial-route-grid { grid-template-columns:1fr; } .tutorial-hero-path { grid-template-columns:1fr; } .tutorial-hero-path li { flex-direction:row; align-items:center; } .tutorial-hero { padding:24px; } }
@media (max-width:480px) { .tutorial-card-grid { grid-template-columns:1fr; } .tutorial-toc nav { grid-template-columns:1fr; } .tutorial-flow { flex-direction:column; gap:22px; } .tutorial-flow li { flex:auto; } .tutorial-flow li:not(:last-child)::after { content:'↓'; top:auto; bottom:-22px; left:16px; right:auto; } .tutorial-primary { gap:10px; } }
@media print { .plx-sidebar,.plx-topbar,.plx-footer,.tutorial-breadcrumb,.tutorial-toc,.tutorial-primary,.tutorial-finder,.tutorial-support { display:none!important; } .plx-shell,.plx-main,.plx-content { display:block!important; height:auto!important; overflow:visible!important; margin:0!important; padding:0!important; } .tutorial-centre { max-width:none; padding:0; } .tutorial-article-layout { display:block; } .tutorial-body section { break-inside:avoid; } .tutorial-centre details { display:block; } .tutorial-centre a { color:#172e2c; } }

.tutorial-centre h1:focus { outline:none; }

@media (max-width:480px) {
 .tutorial-dependency > div { display:grid; grid-template-columns:minmax(0,1fr); gap:6px; margin-bottom:12px; }
 .tutorial-dependency > div:last-child { margin-bottom:0; }
 .tutorial-dependency strong { margin-bottom:3px; }
 .tutorial-dependency b { font-size:0; padding-left:12px; line-height:1; }
 .tutorial-dependency b::after { content:'↓'; font-size:1rem; }
}