/* Shared, lightweight reading layout for the eight written guides. */
.tutorial-page { --lesson:#65e5cf; --lesson-surface:#152d2b; }
.tutorial-page[data-tutorial-tone="purple"] { --lesson:#c1a2ff; --lesson-surface:#292137; }
.tutorial-page[data-tutorial-tone="blue"] { --lesson:#91bdff; --lesson-surface:#1b2a40; }
.tutorial-page[data-tutorial-tone="amber"] { --lesson:#f2c076; --lesson-surface:#332a1d; }
.tutorial-page .tutorial-hero { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(240px,1fr); gap:40px; padding:clamp(28px,5vw,64px); background:linear-gradient(120deg,#101a24,var(--lesson-surface)); border:1px solid var(--lesson); border-radius:24px; }
.tutorial-page .tutorial-hero h1 { font-size:clamp(34px,4.5vw,64px); line-height:1.08; letter-spacing:-.035em; }
.tutorial-page .studio-eyebrow { color:var(--lesson); }
.tutorial-page .tutorial-hero-main > p { font-size:17px; line-height:1.7; }
.tutorial-page .tutorial-meta { margin:24px 0; gap:12px; }
.tutorial-page .tutorial-meta span { font-size:13px; }
.tutorial-page .tutorial-hero .studio-button { background:var(--lesson); color:#101820; border:0; font-size:15px; }
.tutorial-hero-art { display:grid; align-content:center; justify-items:center; gap:24px; }
.tutorial-hero-art > img { width:100%; height:210px; object-fit:contain; }
.tutorial-hero-art > p { margin:0; padding:20px; background:#080f1780; border-radius:16px; font-size:15px; line-height:1.6; color:#e2e8ee; }
.tutorial-hero-art small { display:block; margin-bottom:8px; color:var(--lesson); font-weight:800; }
.tutorial-section-nav { display:flex; flex-wrap:wrap; gap:8px 24px; padding:24px 0; border-bottom:1px solid #ffffff20; }
.tutorial-section-nav a { color:#c2ceda; font-size:14px; text-decoration:none; padding:8px 0; }
.tutorial-section-nav a:hover { color:var(--lesson); }
.tutorial-page .tutorial-layout { margin-top:28px; gap:28px; grid-template-columns:minmax(0,1fr) 270px; }
.tutorial-page .tutorial-content > section { padding:28px; margin:0 0 24px; }
.tutorial-page .tutorial-content h2 { display:flex; align-items:center; gap:12px; margin:0 0 22px; font-size:clamp(24px,2.8vw,34px); line-height:1.2; }
.tutorial-section-icon { width:28px; height:28px; flex-shrink:0; color:var(--lesson); }
.tutorial-page .tutorial-ready { background:#192538; }
.tutorial-ready ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 28px; padding-left:20px; margin:20px 0 0; }
.tutorial-ready li,.tutorial-platforms { color:#c5d1df; font-size:15px; line-height:1.65; }
.tutorial-ready li::marker { color:var(--lesson); }
.tutorial-page .tutorial-watch { background:var(--lesson-surface); }
.tutorial-watch-card { display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:center; color:#f4f6fa; text-decoration:none; }
.tutorial-watch-image { position:relative; }
.tutorial-watch-image img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:12px; }
.tutorial-watch-image > span { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:#ff0033; padding:12px 19px; border-radius:12px; color:white; }
.tutorial-watch-card small { color:var(--lesson); font-size:12px; }
.tutorial-watch-card h3 { margin:10px 0; font-size:20px; line-height:1.35; }
.tutorial-watch-card p { font-size:14px; line-height:1.6; color:#c0c9d5; }
.tutorial-watch-card strong { display:block; margin-top:15px; font-size:14px; color:var(--lesson); }
.tutorial-page .tutorial-instructions { background:#101923; }
.tutorial-page .tutorial-step { padding:26px 0; grid-template-columns:42px minmax(0,1fr); gap:18px; }
.tutorial-page .tutorial-step-number { background:var(--lesson-surface); color:var(--lesson); border:1px solid var(--lesson); border-radius:12px; font-size:16px; }
.tutorial-step h3 { margin:4px 0 12px; font-size:23px; line-height:1.3; color:#edf4fa; }
.tutorial-page .tutorial-step > div > p { font-size:16px; line-height:1.85; }
.tutorial-page .tutorial-checkpoint { background:#17332d; border-left:3px solid #65e5cf; padding:18px; }
.tutorial-checkpoint strong { display:flex; align-items:center; gap:8px; color:#8df1cf; }
.tutorial-checkpoint .tutorial-section-icon { width:20px; height:20px; color:#8df1cf; }
.tutorial-page .tutorial-checkpoint p { font-size:14px; line-height:1.65; }
.tutorial-page .tutorial-finish { background:#172e29; border-color:#417667; }
.tutorial-finish > p { color:#bacdc7; }
.tutorial-finish > div { display:grid; gap:12px; margin-top:22px; }
.tutorial-finish label { display:flex; align-items:start; gap:12px; font-size:16px; color:#d2e9e0; line-height:1.6; cursor:pointer; }
.tutorial-finish input { width:20px; height:20px; margin-top:3px; flex-shrink:0; accent-color:#65e5cf; }
.tutorial-finish input:checked + span { text-decoration:line-through; color:#91b0a4; }
.tutorial-page .tutorial-troubleshooting { background:#2c251f; }
.tutorial-page .tutorial-troubleshooting summary { font-size:16px; padding:18px 0; }
.tutorial-page .tutorial-troubleshooting li { font-size:15px; line-height:1.7; }
.tutorial-page .tutorial-sidebar nav a { font-size:13px; padding:12px 0; line-height:1.45; }
.tutorial-page .tutorial-sidebar small { font-size:12px; color:var(--lesson); }
.tutorial-toc nav a { display:flex; gap:12px; justify-content:flex-start; }
.tutorial-toc nav a b { color:var(--lesson); }
.tutorial-page .tutorial-sources p,.tutorial-page .tutorial-sources nav a { font-size:14px; line-height:1.6; }
.tutorial-page :is(section,li[id],h2[id]) { scroll-margin-top:90px; }
.tutorial-page a:focus-visible { outline:2px solid var(--lesson); outline-offset:4px; }
@media(max-width:950px) { .tutorial-page .tutorial-layout { grid-template-columns:minmax(0,1fr); } .tutorial-page .tutorial-sidebar { position:static; grid-template-columns:repeat(2,minmax(0,1fr)); } .tutorial-toc { grid-column:1/-1; } .tutorial-toc nav { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; } }
@media(max-width:640px) { .tutorial-page .tutorial-hero { grid-template-columns:minmax(0,1fr); gap:24px; padding:24px; } .tutorial-hero-art > img { height:140px; } .tutorial-page .tutorial-content > section { padding:20px; } .tutorial-ready ul,.tutorial-watch-card,.tutorial-toc nav,.tutorial-page .tutorial-sidebar { grid-template-columns:minmax(0,1fr); } .tutorial-page .tutorial-step { grid-template-columns:minmax(0,1fr); gap:12px; } .tutorial-page .tutorial-step > div > p { font-size:16px; } .tutorial-page .tutorial-section-nav { gap:8px 18px; } }