.tutorialWelcome { max-width: 1180px; margin: 20px auto; padding: clamp(22px,4vw,48px); border: 1px solid #ecd8c4; border-radius: 28px; background: linear-gradient(130deg,#fffcf8,#f8eee0); box-shadow: 0 18px 60px #60361412; }
.tutorialWelcomeTop { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.tutorialWelcomeTop>img { width: min(290px,45%); height:auto; }
.tutorialTable { color:#7b3021; background:#fff; border:1px solid #e9cbb9; padding:12px 18px; border-radius:30px; }
.tutorialWelcomeGrid { display:grid; grid-template-columns: 1fr 1fr; align-items:center; gap:32px; margin:44px 0 30px; }
.tutorialEyebrow { color:#ad1720; font-weight:700; font-size:12px; letter-spacing:2px; }
.tutorialWelcomeCopy h1 { margin:14px 0; font-size:clamp(30px,4.2vw,48px); line-height:1.18; color:#35251c; }
.tutorialSubtitle { font-size:21px; color:#655346; line-height:1.5; }
.tutorialWelcomeActions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.tutorialWelcomeActions button { min-height:52px; font-size:17px; padding:14px 22px; border-radius:14px; }
.tutorialHint { color:#796758; font-size:14px; line-height:1.6; max-width:430px; }
.tutorialPreview { position:relative; padding:0; border:7px solid #292422; border-radius:18px; overflow:hidden; background:#292422; box-shadow:0 16px 30px #35201522; }
.tutorialPreview>img { display:block; width:100%; height:auto; }
.tutorialPlay { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:64px; height:64px; display:grid; place-items:center; border-radius:50%; color:#fff; font-size:38px; background:#a90918ed; box-shadow:0 0 0 6px #ffffff77; }
.tutorialWelcomeFooter { border-top:1px solid #e6d5c3; padding-top:20px; }
.tutorialWelcomeFooter>p { font-size:13px; color:#796758; margin-bottom:0; }
.tutorialWelcomeFooter .languageSwitch { margin:0; background:transparent; border:0; padding:0; }
.tutorialHelp { min-height:44px; margin:4px 0 12px; color:#8b1520; font-size:14px; }
.tutorialDialog { width:min(1000px,94vw); max-height:94dvh; overflow:auto; padding:20px; border:0; border-radius:20px; background:#fffaf4; color:#30251f; box-shadow:0 20px 80px #0007; }
.tutorialDialog::backdrop { background:#160f0bc9; }
.tutorialDialogTop { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.tutorialDialogTop h2 { margin:0; font-size:22px; }
.tutorialDialogTop button { min-height:44px; }
.tutorialVideoInfo { font-size:13px; color:#786759; }
.tutorialDialog video { display:block; width:100%; max-height:65dvh; aspect-ratio:16/9; background:#171412; border-radius:10px; }
.tutorialDialogActions { display:flex; justify-content:flex-end; }
.tutorialDialogActions button { min-height:50px; padding:12px 26px; font-size:18px; }
.tutorialStatus { margin:10px 0; color:#8e1620; font-weight:600; }
@media(max-width:650px) { .tutorialWelcome { margin:10px 0; } .tutorialWelcomeGrid { grid-template-columns:1fr; margin-top:28px; gap:20px; } .tutorialWelcomeActions { margin-top:18px; } .tutorialTable { font-size:12px; padding:8px; } .tutorialDialog { padding:14px; } }