.tutorialWrap,.tutorialAdmin{--tutorial-accent:#d9bb77;color:#e9ecef;min-width:0;overflow-wrap:anywhere}
.tutorialWrap{max-width:1160px;margin:auto;padding:clamp(18px,3vw,40px)}
.tutorialHero{padding:clamp(22px,4vw,48px);background:linear-gradient(125deg,#202c32,#111a20);border:1px solid #3e494c;border-radius:16px;margin:20px 0 28px}
.tutorialEyebrow{color:#d9bb77;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.tutorialHero h1{font-size:clamp(2rem,4vw,3.4rem);line-height:1.15;margin:16px 0;max-width:26ch;text-wrap:balance}
.tutorialLead{max-width:70ch;font-size:1.12rem;line-height:1.75;color:#d4dce0}
.tutorialMeta{color:#acbac4;font-size:.88rem;line-height:1.6}
.tutorialBack,.tutorialProse a,.tutorialContents a{color:#e5c98e;text-underline-offset:4px}
.tutorialCover{display:block;width:100%;max-height:520px;object-fit:contain;border-radius:10px;margin:24px auto 0;background:#0d151a}
.tutorialFilters,.tutorialColumns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:16px;align-items:end}
.tutorialFilters label,.tutorialEditor label{display:grid;gap:8px;font-weight:600;min-width:0}
.tutorialFilters input,.tutorialFilters select,.tutorialEditor input:not([type=checkbox]),.tutorialEditor textarea,.tutorialEditor select{box-sizing:border-box;display:block;width:100%;max-width:100%;padding:12px;background:#10191e;border:1px solid #53616b;border-radius:7px;color:#eef2f4;font:inherit}
.tutorialFilters input:focus,.tutorialEditor input:focus,.tutorialEditor textarea:focus,.tutorialEditor select:focus{outline:2px solid #dfc18a;outline-offset:2px}
.tutorialGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:22px}
.tutorialCard{border:1px solid #3e494c;border-radius:12px;overflow:hidden;background:#172128;min-width:0}
.tutorialCardVisual{display:flex;aspect-ratio:16/9;align-items:center;justify-content:center;background:radial-gradient(ellipse at 30% 80%,#485647,#1b2a31 70%);color:#e7d2a6;font-size:1.2rem;font-weight:700;text-decoration:none}
.tutorialCardVisual img{width:100%;height:100%;object-fit:cover}
.tutorialCardBody{padding:24px}.tutorialCard h2{font-size:1.3rem;line-height:1.4;margin:14px 0}.tutorialCard h2 a{color:#edf1f2;text-decoration:none}.tutorialCard h2 a:hover{color:#efd296}.tutorialCard p{line-height:1.65;color:#c4cdd4}
.tutorialEmpty{padding:32px;border:1px dashed #6b746b;border-radius:12px;background:#182229}.tutorialEmpty p{line-height:1.7;color:#c4cdd4}
.tutorialReading{display:grid;grid-template-columns:240px minmax(0,1fr);gap:40px;align-items:start}
.tutorialContents{position:sticky;top:24px;padding:22px;border:1px solid #3e494c;border-radius:12px;background:#172128;font-size:.95rem}.tutorialContents h2{font-size:1rem;margin-top:0}.tutorialContents ol{padding-left:22px}.tutorialContents li{padding:8px 0;line-height:1.6}
.tutorialProse{max-width:76ch;min-width:0;font-size:1.03rem;line-height:1.85}.tutorialProse h2{line-height:1.35;font-size:1.65rem;margin:12px 0 20px}.tutorialProse p{margin:0 0 22px}.tutorialProse ul,.tutorialProse ol{padding-left:24px}.tutorialProse li{padding:4px 0}.tutorialProse code{padding:2px 6px;background:#26343d;border-radius:4px;white-space:pre-wrap}
.tutorialStep{padding:32px 0;border-bottom:1px solid #3e494c;scroll-margin-top:24px}.tutorialStep figure{margin:24px 0}.tutorialStep img{max-width:100%;height:auto;border:1px solid #53616b;border-radius:8px;background:#0d151a}.tutorialStep figcaption{font-size:.85rem;color:#acbac4;margin-top:10px;line-height:1.5}
.tutorialRequirements{padding:24px;background:#202d31;border-left:3px solid #d9bb77;border-radius:4px;margin:26px 0}.tutorialRequirements>:last-child{margin-bottom:0}
.tutorialActions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:12px 0}.tutorialActions .btn,.tutorialFilters .btn{white-space:normal}
.tutorialEditor{max-width:1000px;display:grid;gap:18px;margin:24px 0}.tutorialEditor fieldset{min-width:0;border:1px solid #53616b;border-radius:10px;padding:22px;display:grid;gap:16px}.tutorialEditor legend{padding:0 8px;color:#dfc18a;font-weight:700}.tutorialEditor textarea{resize:vertical;line-height:1.6}.tutorialEditor .tutorialColumns{grid-template-columns:1fr 1fr}.tutorialEditorImage{max-width:100%;max-height:260px;object-fit:contain;display:block;border-radius:6px}.tutorialEditor .tutorialCheck{display:flex;gap:10px;align-items:center;font-weight:400;cursor:pointer}.tutorialCheck input[type=checkbox]{width:18px;height:18px;flex:0 0 18px;margin:0}.tutorialEditorStep{margin-bottom:20px;background:#182329}.tutorialEditor code{white-space:normal;overflow-wrap:anywhere}
.tutorialAdminList{display:grid;gap:16px}.tutorialAdminList article{display:flex;justify-content:space-between;gap:20px;align-items:center;background:#19252c;border:1px solid #3e494c;border-radius:10px;padding:24px}.tutorialAdminList h3{margin:12px 0}.tutorialAdminList .tutorialActions{flex-shrink:0}.tutorialAdmin .notice{margin:20px 0}
@media(max-width:760px){.tutorialReading{grid-template-columns:1fr;gap:20px}.tutorialContents{position:static}.tutorialFilters{grid-template-columns:1fr}.tutorialAdminList article{display:block}.tutorialEditor .tutorialColumns{grid-template-columns:1fr}.tutorialHero{padding:24px 18px}.tutorialWrap{padding:12px}.tutorialEditor fieldset{padding:16px}.tutorialProse{font-size:1rem}}
@media print{.tutorialContents{position:static}.tutorialReading{display:block}.tutorialHero,.tutorialRequirements{background:white;color:black}.tutorialWrap,.tutorialProse,.tutorialLead{color:black}.tutorialStep{break-inside:avoid}}