/* Styles isolated to the tutorial page. */
.tutorial-page {
    --tutorial-bg: #07060b;
    --tutorial-surface: rgba(20, 17, 30, .78);
    --tutorial-line: rgba(202, 169, 255, .18);
    --tutorial-text: #f8f6ff;
    --tutorial-muted: #b8b0c7;
    --tutorial-purple: #a855f7;
    --tutorial-green: #22c55e;
    --tutorial-mono: "JetBrains Mono", monospace;
    background: var(--tutorial-bg);
    color: var(--tutorial-text);
    font-family: Outfit, sans-serif;
    min-width: 0;
    overflow-x: hidden;
    padding-bottom: 86px;
}
.emoji-fallback, .tutorial-task-card .task-body, .tutorial-tip-box, .tutorial-step-text, .tutorial-step-caption {
    font-family: Outfit, 'Noto Color Emoji', 'Segoe UI Emoji', 'Apple Color Emoji', 'Segoe UI Symbol', system-ui, sans-serif;
}
.tutorial-page *, .tutorial-page *::before, .tutorial-page *::after { box-sizing: border-box; }
.tutorial-page a { color: inherit; text-decoration: none; }
.tutorial-page button { font: inherit; }
.tutorial-shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; position: relative; }
.tutorial-atmosphere { position: fixed; z-index: -2; inset: 0; overflow: hidden; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(#000, transparent 90%); }
.tutorial-atmosphere span { position: absolute; border-radius: 50%; filter: blur(14px); opacity: .25; }
.tutorial-atmosphere span:nth-child(1) { width: 38vw; aspect-ratio: 1; top: -20vw; left: -10vw; background: #7026b3; }
.tutorial-atmosphere span:nth-child(2) { width: 33vw; aspect-ratio: 1; top: 31%; right: -13vw; background: #166a3b; }
.tutorial-atmosphere span:nth-child(3) { width: 45vw; aspect-ratio: 1; bottom: -30vw; left: 22%; background: #53258a; }
.tutorial-header { position: relative; border-bottom: 1px solid var(--tutorial-line); background: rgba(7,6,11,.78); backdrop-filter: blur(18px); z-index: 2; }
.tutorial-header-inner { min-height: 74px; display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.tutorial-brand { font-size: 1.25rem; font-weight: 900; letter-spacing: -.06em; white-space: nowrap; }
.tutorial-brand span, .tutorial-page em { color: var(--tutorial-purple); font-style: normal; text-shadow: 0 0 22px rgba(168,85,247,.65); }
.tutorial-header-right { display: flex; align-items: center; gap: 28px; }
.tutorial-guide-label, .tutorial-eyebrow, .tutorial-step-meta, .tutorial-progress b { font-family: var(--tutorial-mono); font-size: .67rem; font-weight: 800; letter-spacing: .11em; }
.tutorial-guide-label { color: #dcd4ec; display: inline-flex; align-items: center; gap: 8px; }
.tutorial-guide-label i, .tutorial-floating-code i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: var(--tutorial-green); box-shadow: 0 0 10px var(--tutorial-green); animation: tutorialPulse 1.6s ease-in-out infinite; }
.tutorial-back { color: var(--tutorial-muted); font: 700 .72rem var(--tutorial-mono); letter-spacing: .06em; transition: color .2s ease; }
.tutorial-back:hover { color: #fff; }
.tutorial-hero { padding: 80px 0 68px; border-bottom: 1px solid var(--tutorial-line); }
.tutorial-hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 44px; }
.tutorial-eyebrow { color: var(--tutorial-green); margin: 0 0 13px; }
.tutorial-hero h1, .tutorial-section-head h2, .tutorial-device-section h2, .tutorial-mission h2, .tutorial-finish h2 { font-size: clamp(2.6rem, 5vw, 5.5rem); line-height: .95; letter-spacing: -.065em; margin: 0; font-weight: 900; }
.tutorial-lede { max-width: 575px; font-size: 1.15rem; color: var(--tutorial-muted); line-height: 1.6; margin: 25px 0; }
.tutorial-hero-code { width: fit-content; max-width: 100%; position: relative; padding: 12px 19px 15px; margin-top: 25px; border: 1px solid rgba(168,85,247,.55); border-left: 3px solid var(--tutorial-green); background: rgba(10,7,16,.72); box-shadow: 0 0 45px rgba(168,85,247,.19); }
.tutorial-hero-code span { color: var(--tutorial-muted); font: 700 .62rem var(--tutorial-mono); letter-spacing: .18em; display: block; margin-bottom: 3px; }
.tutorial-hero-code strong { display: block; color: #fff; font: 800 clamp(1.6rem,4vw,3.55rem) var(--tutorial-mono); letter-spacing: -.08em; background: linear-gradient(100deg,#d8a7ff 8%,#fff 42%,#48e484 84%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 13px rgba(168,85,247,.62)); }
.tutorial-hero-actions { margin-top: 30px; }
.tutorial-primary-button, .tutorial-telegram-button { display: inline-flex; align-items: center; justify-content: center; gap: 17px; min-height: 52px; padding: 13px 21px; border: 1px solid rgba(117,242,160,.72); background: var(--tutorial-green); color: #06130a; font: 800 .75rem var(--tutorial-mono); letter-spacing: .04em; box-shadow: 0 0 27px rgba(34,197,94,.22); transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.tutorial-primary-button:hover { transform: translateY(-3px); background: #52e982; box-shadow: 0 9px 36px rgba(34,197,94,.35); }
.tutorial-primary-button:focus-visible, .tutorial-telegram-button:focus-visible, .tutorial-page button:focus-visible, .tutorial-progress button:focus-visible, .tutorial-device:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.tutorial-mascot-stage { min-height: 355px; position: relative; display: grid; place-items: center; }
.tutorial-mascot-stage::before { content: ""; position: absolute; width: 73%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle,rgba(168,85,247,.36),rgba(34,197,94,.1) 48%,transparent 69%); filter: blur(4px); }
.tutorial-mascot { width: min(100%, 420px); max-height: 360px; object-fit: contain; position: relative; filter: drop-shadow(0 17px 27px rgba(0,0,0,.55)); }
.tutorial-orbit { position:absolute; border: 1px solid rgba(189,129,255,.46); border-radius:50%; transform: rotate(-25deg); }
.tutorial-orbit-one { width: 83%; height: 48%; }
.tutorial-orbit-two { width: 66%; height: 66%; border-color: rgba(34,197,94,.38); transform: rotate(55deg); }
.tutorial-mascot-bubble { position:absolute; right: 1%; top: 16%; margin:0; color:#161020; background:#fff; padding:11px 15px; font-weight:700; line-height:1.1; transform:rotate(4deg); box-shadow:8px 9px 0 rgba(168,85,247,.48); }
.tutorial-mascot-bubble b { color:var(--tutorial-purple); }
.tutorial-reward-tape { display: flex; flex-wrap: wrap; gap: 9px; justify-content:center; }
.tutorial-reward-tape span { padding: 8px 10px; background: rgba(20,17,30,.74); border: 1px solid var(--tutorial-line); color:var(--tutorial-muted); font:700 .61rem var(--tutorial-mono); letter-spacing:.04em; white-space:nowrap; }
.tutorial-reward-tape b { color:#fff; }
.tutorial-benefits { padding: 100px 0; }
.tutorial-section-head { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:36px; }
.tutorial-section-head p { font:700 .68rem var(--tutorial-mono); color:var(--tutorial-green); letter-spacing:.11em; margin:0 0 8px; writing-mode:vertical-rl; transform:rotate(180deg); }
.tutorial-section-head h2 { font-size:clamp(2.3rem,4vw,4.25rem); }
.tutorial-benefit-list { list-style:none; padding:0; margin:0; border-top:1px solid var(--tutorial-line); }
.tutorial-benefit { min-height: 96px; display:grid; grid-template-columns:84px 1fr 48px; align-items:center; gap:12px; border-bottom:1px solid var(--tutorial-line); transition: padding .25s ease, background .25s ease; }
.tutorial-benefit:hover { padding-inline:12px; background:rgba(168,85,247,.08); }
.tutorial-benefit>span { color:var(--tutorial-purple); font:800 .85rem var(--tutorial-mono); }
.tutorial-benefit b { display:block; font-size:1.15rem; }.tutorial-benefit p { margin:3px 0 0; color:var(--tutorial-muted); font-size:.95rem; }.tutorial-benefit i { color:var(--tutorial-green); font:800 1.3rem var(--tutorial-mono); font-style:normal; text-align:center; }
.tutorial-device-section { padding:78px 0; background:linear-gradient(100deg,rgba(104,39,168,.24),rgba(15,103,58,.16)); border-block:1px solid var(--tutorial-line); text-align:center; }
.tutorial-device-section h2 { font-size:clamp(2rem,3.4vw,3.6rem); }.tutorial-device-switch { margin:29px auto 13px; display:flex; width:min(570px,100%); padding:6px; gap:6px; border:1px solid var(--tutorial-line); background:rgba(5,4,8,.65); }
.tutorial-device { cursor:pointer; min-width:0; flex:1; display:grid; grid-template-columns:22px 1fr; text-align:left; align-items:center; gap:0 8px; padding:13px; background:transparent; color:var(--tutorial-muted); border:1px solid transparent; transition:.2s ease; }.tutorial-device span{grid-row:span 2;color:var(--tutorial-purple);}.tutorial-device b{font-size:.92rem}.tutorial-device small{font:600 .62rem var(--tutorial-mono);}.tutorial-device.active { color:#fff; border-color:rgba(168,85,247,.62); background:rgba(168,85,247,.18); box-shadow:inset 0 0 22px rgba(168,85,247,.1); }.tutorial-device.active span{color:var(--tutorial-green)}
.tutorial-device-note { min-height:24px; color:var(--tutorial-muted); margin:0; font-size:.92rem; }
.tutorial-mission { padding:105px 0; }.tutorial-mission-intro { margin-bottom:38px; }.tutorial-mission h2 { font-size:clamp(2.4rem,4vw,4.25rem); }
.tutorial-progress { display:grid; grid-template-columns:repeat(5,1fr); margin:0; position:relative; border-bottom:1px solid var(--tutorial-line); overflow-x:auto; scrollbar-width:thin; }.tutorial-progress button { position:relative; min-width:120px; padding:12px 8px 17px; color:var(--tutorial-muted); border:0; background:transparent; cursor:pointer; text-align:left; transition:color .2s ease; }.tutorial-progress button::after { content:""; position:absolute; height:3px; bottom:-1px; left:7px; right:7px; background:transparent; }.tutorial-progress button[aria-selected="true"] { color:#fff; }.tutorial-progress button[aria-selected="true"] b{color:var(--tutorial-green)}.tutorial-progress button[aria-selected="true"]::after{background:linear-gradient(90deg,var(--tutorial-purple),var(--tutorial-green));box-shadow:0 0 12px var(--tutorial-purple)}.tutorial-progress b,.tutorial-progress span{display:block}.tutorial-progress span{font-size:.8rem;margin-top:4px}
.tutorial-step-card { padding:24px; border:1px solid var(--tutorial-line); border-top:0; background:var(--tutorial-surface); box-shadow:0 24px 60px rgba(0,0,0,.18); }.tutorial-step-meta { display:flex; justify-content:space-between; color:var(--tutorial-muted); }.tutorial-step-status{color:var(--tutorial-green)}
.tutorial-step-layout{display:grid;grid-template-columns:1fr .8fr;align-items:center;gap:48px;padding:31px 12px 25px}.tutorial-step-kicker{font:800 .7rem var(--tutorial-mono);letter-spacing:.1em;color:var(--tutorial-purple);margin:0 0 8px}.tutorial-step-content h3{font-size:clamp(2.25rem,4.3vw,4.35rem);line-height:.95;letter-spacing:-.06em;margin:0}.tutorial-step-text{max-width:470px;color:var(--tutorial-muted);line-height:1.6;font-size:1.1rem;margin:20px 0 27px}
.tutorial-mockup { min-height:270px; border:1px solid rgba(168,85,247,.48); position:relative; display:grid;place-items:center; overflow:hidden; background:radial-gradient(circle at 75% 17%,rgba(34,197,94,.23),transparent 34%),linear-gradient(130deg,#171024,#0a1010); }.tutorial-mockup::before{content:"";position:absolute;inset:12px;border:1px solid rgba(255,255,255,.08);pointer-events:none}.tutorial-mockup-caption{position:absolute;left:17px;top:16px;color:#c6b9d7;font:700 .55rem var(--tutorial-mono);letter-spacing:.1em}.tutorial-phone{width:178px;height:235px;padding:35px 16px 15px;border:3px solid #dac8ed;border-radius:25px;background:#100d17;box-shadow:0 10px 40px #000;position:relative;display:flex;gap:10px;flex-direction:column}.tutorial-phone i{width:53px;height:5px;position:absolute;top:10px;left:calc(50% - 27px);border-radius:8px;background:#d7c4eb}.tutorial-phone b{font-size:.72rem}.tutorial-phone span{height:27px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.04)}.tutorial-phone button{margin-top:auto;min-height:30px;border:0;background:var(--tutorial-purple);color:#fff;font:700 .6rem var(--tutorial-mono)}
.tutorial-mockup-code .tutorial-phone{align-items:center;justify-content:center}.tutorial-mockup-code .tutorial-phone strong{font:800 1.35rem var(--tutorial-mono);color:#cda4ff}.tutorial-mockup-deposit .tutorial-phone::after{content:"30 €";color:var(--tutorial-green);font:800 2rem var(--tutorial-mono);text-align:center;margin:auto}.tutorial-mockup-check .tutorial-phone::after{content:"✓";color:var(--tutorial-green);font-size:5rem;text-align:center;margin:auto}.tutorial-mockup-rank .tutorial-phone::after{content:"TOP\A 10";white-space:pre;color:#fff;font:800 2rem/1 var(--tutorial-mono);text-align:center;margin:auto;text-shadow:0 0 18px var(--tutorial-purple)}
.tutorial-step-controls { margin-top:32px; padding-top:24px; border-top:1px solid rgba(168,85,247,.14); display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--tutorial-muted); font:700 .78rem var(--tutorial-mono); text-transform:uppercase; }
.tutorial-step-controls button { min-width:120px; padding:12px 16px; border:1px solid rgba(168,85,247,.35); border-radius:999px; background:transparent; color:#fff; cursor:pointer; transition:.2s ease; }
.tutorial-step-controls button:hover:not(:disabled){ background:rgba(34,197,94,.12); color:#fff; }
.tutorial-step-controls button:disabled { opacity:.3; cursor:not-allowed; }
.tutorial-step-controls span { text-align:center; flex:1; }
.tutorial-step-card { padding:30px; border:1px solid rgba(168,85,247,.28); border-radius:32px; background:rgba(18,12,25,.92); box-shadow:0 24px 80px rgba(0,0,0,.3); opacity:1; transform:none; transition:opacity .35s ease, transform .35s ease; }
.tutorial-step-card.is-transitioning { opacity:0; transform:translateY(16px); }
.tutorial-progress-header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px; margin-bottom:28px; }
.tutorial-progress-number { font:800 .78rem var(--tutorial-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--tutorial-green); }
.tutorial-progress-number strong { color:#fff; }
.progress-bar { flex:1 1 100%; min-width:240px; height:14px; border-radius:999px; background:rgba(255,255,255,.06); overflow:hidden; border:1px solid rgba(168,85,247,.2); }
.progress-bar-fill { display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,#a855f7 0%,#22c55e 100%); box-shadow:0 0 22px rgba(34,197,94,.22); transition:width .35s ease; }
.tutorial-step-body { display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:center; margin-top:26px; }
.tutorial-step-kicker { margin:0 0 12px; color:var(--tutorial-green); font:800 .78rem var(--tutorial-mono); letter-spacing:.14em; text-transform:uppercase; }
.tutorial-step-title { font-size:clamp(2.1rem,3.8vw,4.5rem); line-height:1; margin:0 0 20px; letter-spacing:-.05em; }
.tutorial-step-text { margin:0; color:var(--tutorial-muted); line-height:1.8; font-size:1.05rem; max-width:560px; }
.tutorial-step-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:24px; }
.tutorial-task-list{ display:flex; flex-direction:column; gap:12px; margin-top:18px; }
.tutorial-task-card{ display:flex; gap:14px; align-items:center; padding:14px; border-radius:12px; background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02)); border:1px solid rgba(168,85,247,0.06); box-shadow: inset 0 0 30px rgba(168,85,247,0.02); }
.tutorial-task-card .task-number{ min-width:56px; height:56px; border-radius:12px; display:grid; place-items:center; font:800 1rem var(--tutorial-mono); color:#fff; background:linear-gradient(180deg,#a855f7,#22c55e); box-shadow:0 8px 24px rgba(168,85,247,0.12); }
.tutorial-task-card .task-body{ color:var(--tutorial-text); font-size:1rem; line-height:1.5; }
.tutorial-tip-box{ margin-top:12px; padding:12px 14px; border-radius:12px; background:linear-gradient(180deg, rgba(168,85,247,0.06), rgba(34,197,94,0.03)); border-left:3px solid var(--tutorial-green); color:var(--tutorial-muted); }
.tutorial-tip-box strong{ display:block; color:#fff; margin-bottom:6px; font-weight:900; }
.tutorial-step-installation { margin-top:18px; }
.tutorial-step-installation:empty { display:none; }
.tutorial-installation-box { padding:20px; border:1px solid rgba(168,85,247,.3); border-radius:18px; background:linear-gradient(145deg,rgba(168,85,247,.11),rgba(34,197,94,.06)); box-shadow:inset 0 0 30px rgba(168,85,247,.06),0 0 25px rgba(168,85,247,.06); }
.tutorial-installation-heading { display:flex; align-items:center; gap:9px; color:var(--tutorial-green); }
.tutorial-installation-heading span { font-size:1.15rem; line-height:1; }
.tutorial-installation-heading p { margin:0; font:900 .76rem var(--tutorial-mono); letter-spacing:.14em; text-transform:uppercase; }
.tutorial-installation-box h4 { margin:10px 0 8px; color:#fff; font-size:clamp(1.35rem,2.4vw,1.8rem); line-height:1.1; letter-spacing:-.03em; }
.tutorial-installation-text { margin:0; color:var(--tutorial-muted); font-size:.98rem; line-height:1.65; }
.tutorial-installation-list { margin-top:16px; }
.tutorial-installation-tip { margin-top:14px; }
.tutorial-installation-tip strong { font-size:1.08rem; margin-bottom:2px; }
.tutorial-step-supplemental { margin-top:18px; }
.tutorial-step-supplemental:empty { display:none; }
.tutorial-step-supplemental:not(:empty) { padding:18px; border:1px solid rgba(34,197,94,.36); border-radius:16px; background:linear-gradient(110deg,rgba(34,197,94,.1),rgba(168,85,247,.11)); box-shadow:inset 0 0 26px rgba(34,197,94,.05), 0 0 22px rgba(34,197,94,.05); }
.tutorial-supplemental-name { margin:0 0 7px; color:var(--tutorial-green); font:900 .9rem var(--tutorial-mono); letter-spacing:.14em; }
.tutorial-supplemental-text { margin:0; color:var(--tutorial-text); line-height:1.55; }
.tutorial-step-media { position:relative; min-height:360px; display:grid; place-items:center; padding:24px; border-radius:28px; background:radial-gradient(circle at top left, rgba(168,85,247,.16), transparent 34%), radial-gradient(circle at bottom right, rgba(34,197,94,.14), transparent 28%), linear-gradient(180deg, #0c0815, #08060d); border:1px solid rgba(255,255,255,.06); overflow:hidden; }
.tutorial-step-image { width:100%; min-height:300px; border-radius:24px; background:radial-gradient(circle at center, rgba(168,85,247,.2), transparent 25%), linear-gradient(135deg, rgba(18,12,25,.98), rgba(23,10,40,.98)); display:grid; place-items:center; color:rgba(255,255,255,.18); font:800 1rem var(--tutorial-mono); text-align:center; padding:24px; }
.tutorial-step-image::after { content:attr(data-label); white-space:pre-wrap; }
.tutorial-step-caption { margin:18px 0 0; color:var(--tutorial-muted); font-size:.9rem; line-height:1.5; }
.tutorial-finish { padding:70px 0 110px; }
.tutorial-finish-inner { border-radius:32px; padding:44px; display:grid; grid-template-columns:1.1fr .9fr; gap:34px; background:linear-gradient(135deg, rgba(93,33,191,.42), rgba(6,22,11,.78)); border:1px solid rgba(168,85,247,.35); box-shadow:0 0 80px rgba(168,85,247,.15); }
.tutorial-finish-inner { align-items: center; min-height: 360px; }
.tutorial-finish h2 { font-size:clamp(2.8rem,4.8vw,5.5rem); margin:0; }
.tutorial-finish p:not(.tutorial-eyebrow) { color:var(--tutorial-muted); line-height:1.55; max-width:520px; margin-top:18px; }
.tutorial-finish-highlight { margin:32px 0 0; display:grid; gap:12px; }
.tutorial-finish-highlight span { display:inline-flex; align-items:center; justify-content:center; padding:16px 22px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid rgba(168,85,247,.18); font:800 .92rem var(--tutorial-mono); letter-spacing:.08em; }
.tutorial-finish-actions { display:grid; gap:16px; align-content:start; }
.tutorial-finish-actions { align-self: center; }
.tutorial-secondary-button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:14px 20px; border:1px solid rgba(168,85,247,.4); background:rgba(255,255,255,.04); color:#fff; transition:transform .2s ease, background .2s ease; }
.tutorial-secondary-button:hover { transform:translateY(-2px); background:rgba(255,255,255,.08); }
.tutorial-azzinfos-button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:14px 20px; border:1px solid rgba(34,197,94,.55); background:linear-gradient(110deg,rgba(34,197,94,.16),rgba(168,85,247,.17)); color:#fff; font:800 .77rem var(--tutorial-mono); letter-spacing:.06em; text-align:center; box-shadow:0 0 28px rgba(34,197,94,.12); transition:transform .2s ease, box-shadow .2s ease, background .2s ease; }
.tutorial-azzinfos-button:hover:not(.is-unavailable):not(:disabled) { transform:translateY(-2px); background:linear-gradient(110deg,rgba(34,197,94,.28),rgba(168,85,247,.26)); box-shadow:0 0 34px rgba(34,197,94,.2); }
.tutorial-azzinfos-button.is-unavailable, .tutorial-azzinfos-button:disabled { opacity:.55; cursor:not-allowed; filter:saturate(.55); }
.tutorial-step-actions .tutorial-azzinfos-button { width:100%; margin-top:2px; }
.tutorial-start-button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:62px; padding:16px 30px; border:0; border-radius:999px; background:linear-gradient(120deg, #a855f7, #22c55e); color:#fff; font:800 .9rem var(--tutorial-mono); letter-spacing:.08em; box-shadow:0 0 35px rgba(34,197,94,.28),0 0 35px rgba(168,85,247,.2); animation:tutorialStartPulse 2.8s ease-in-out infinite; transition:transform .2s ease, box-shadow .2s ease; }
.tutorial-start-button:hover { transform:translateY(-2px) scale(1.01); box-shadow:0 0 46px rgba(34,197,94,.38),0 0 34px rgba(168,85,247,.28); }
@keyframes tutorialStartPulse { 0%,100% { transform:scale(1); box-shadow:0 0 32px rgba(34,197,94,.24),0 0 26px rgba(168,85,247,.18); } 50% { transform:scale(1.02); box-shadow:0 0 48px rgba(34,197,94,.3),0 0 42px rgba(168,85,247,.24); } }
.hidden { display:none !important; }
@media (max-width:1023px) { .tutorial-step-body { grid-template-columns:1fr; } .tutorial-step-media { min-height:260px; } .tutorial-finish-inner { grid-template-columns:1fr; } }
@media (max-width:767px) { .tutorial-progress-header { flex-direction:column; align-items:flex-start; } .tutorial-step-card { padding:22px; } .tutorial-step-title { font-size:2.2rem; } .tutorial-step-controls { flex-direction:column; align-items:stretch; } .tutorial-step-controls span { order:3; text-align:center; } .tutorial-step-controls button { width:100%; } .tutorial-finish-inner { padding:28px; } .tutorial-finish-actions { width:100%; } }
.tutorial-reveal { animation:tutorialReveal .65s both; }.tutorial-benefit:nth-child(2){animation-delay:.07s}.tutorial-benefit:nth-child(3){animation-delay:.14s}.tutorial-benefit:nth-child(4){animation-delay:.21s}.tutorial-benefit:nth-child(5){animation-delay:.28s}
@keyframes tutorialReveal{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}@keyframes tutorialPulse{50%{opacity:.45;box-shadow:0 0 3px var(--tutorial-green)}}
@media (max-width:1023px){.tutorial-hero-grid{grid-template-columns:1fr}.tutorial-hero-side{max-width:680px;width:100%;margin:auto}.tutorial-mascot-stage{min-height:280px}.tutorial-mascot{max-height:290px}.tutorial-finish-inner{grid-template-columns:1fr}.tutorial-footer .tutorial-shell{grid-template-columns:1fr 1.4fr}.tutorial-footer .tutorial-responsible{grid-column:1/-1}.tutorial-step-layout{gap:24px}}
@media (max-width:767px){.tutorial-page{padding-bottom:82px}.tutorial-shell{width:min(100% - 32px,1180px)}.tutorial-header-inner{min-height:62px}.tutorial-header-right{gap:12px}.tutorial-guide-label{display:none}.tutorial-back{font-size:.61rem}.tutorial-hero{padding:54px 0 48px}.tutorial-hero h1{font-size:clamp(2.55rem,12vw,4.3rem)}.tutorial-lede{font-size:1rem}.tutorial-mascot-stage{min-height:225px}.tutorial-mascot{max-height:240px}.tutorial-mascot-bubble{font-size:.83rem;right:4%;top:9%}.tutorial-reward-tape{gap:6px}.tutorial-reward-tape span{font-size:.52rem;padding:7px}.tutorial-benefits,.tutorial-mission{padding:67px 0}.tutorial-section-head{align-items:start}.tutorial-section-head p{writing-mode:initial;transform:none;white-space:nowrap;margin-top:9px}.tutorial-benefit{grid-template-columns:44px 1fr 35px;min-height:82px}.tutorial-benefit b{font-size:1rem}.tutorial-benefit p{font-size:.82rem}.tutorial-device-section{padding:58px 0}.tutorial-progress{margin-inline:-16px}.tutorial-progress button{min-width:103px}.tutorial-step-card{padding:17px}.tutorial-step-layout{grid-template-columns:1fr;padding:28px 0 20px}.tutorial-mockup{min-height:226px;order:-1}.tutorial-step-controls span{display:none}.tutorial-finish{padding:50px 0 78px}.tutorial-finish-inner{padding:28px 22px;gap:25px}.tutorial-finish-actions .tutorial-primary-button,.tutorial-finish-actions .tutorial-telegram-button{flex:1}.tutorial-footer .tutorial-shell{grid-template-columns:1fr;gap:18px}.tutorial-footer .tutorial-responsible{grid-column:auto}.tutorial-floating-code{bottom:10px;width:calc(100% - 20px);min-height:52px}.tutorial-floating-code>span:first-child{font-size:.62rem;gap:6px}.tutorial-floating-code button{padding:0 11px}.tutorial-copy-feedback{font-size:.56rem}}
@media (max-width:375px){.tutorial-shell{width:calc(100% - 24px)}.tutorial-brand{font-size:1.08rem}.tutorial-back{font-size:.54rem}.tutorial-hero-code strong{font-size:1.44rem}.tutorial-primary-button{width:100%}.tutorial-reward-tape span{font-size:.46rem}.tutorial-benefit{grid-template-columns:36px 1fr 26px}.tutorial-benefit p{font-size:.73rem}.tutorial-device{padding:10px 7px;grid-template-columns:17px 1fr}.tutorial-device b{font-size:.77rem}.tutorial-device small{font-size:.54rem}.tutorial-step-content h3{font-size:2.38rem}.tutorial-step-controls{gap:3px}.tutorial-step-controls button{font-size:.61rem;padding-inline:3px}.tutorial-finish-actions>div{display:grid}.tutorial-finish-actions .tutorial-primary-button,.tutorial-finish-actions .tutorial-telegram-button{width:100%}.tutorial-floating-code{padding-left:10px;gap:7px}.tutorial-floating-code>span:first-child{font-size:.53rem}.tutorial-floating-code button{font-size:.57rem;padding:0 8px}}
@media (prefers-reduced-motion:reduce){.tutorial-page *{animation-duration:.01ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important;transition-duration:.01ms !important}}

@media (max-width:480px){
    .tutorial-hero{padding:38px 0 34px}
    .tutorial-mascot-stage{min-height:180px}
    .tutorial-mascot{max-height:190px}
    .tutorial-mascot-bubble{font-size:.72rem;padding:8px 10px;box-shadow:5px 6px 0 rgba(168,85,247,.48)}
    .tutorial-reward-tape{flex-wrap:wrap;justify-content:center}
    .tutorial-reward-tape span{font-size:.5rem}
    .tutorial-step-media{min-height:220px;padding:14px}
    .tutorial-step-image{min-height:190px;padding:14px}
    .tutorial-step-caption{margin-top:12px}
    .tutorial-task-card .task-body{font-size:.95rem}
}
/* Mobile-specific: fixed controls and larger tappable areas */
@media (max-width:767px) {
    .tutorial-page { padding-bottom: calc(184px + env(safe-area-inset-bottom, 0px)); }
    .tutorial-step-controls {
        position: fixed;
        bottom: 12px;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 32px);
        max-width: 720px;
        padding: 10px 12px;
        border-radius: 999px;
        background: linear-gradient(180deg, rgba(6,6,10,0.95), rgba(18,12,25,0.85));
        box-shadow: 0 12px 40px rgba(0,0,0,0.6);
        z-index: 9999;
        display: flex;
        gap: 12px;
        align-items: center;
    }
    .tutorial-step-controls span { display: none; }
    .tutorial-step-controls button { min-width: 0; flex: 1; padding: 14px; border-radius: 999px; font-weight:900; }

    /* Keep the final task, supplemental content and actions above the fixed navigation bar. */
    .tutorial-step-copy { padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); scroll-margin-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
    .tutorial-step-actions { scroll-margin-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }

    .tutorial-task-list { gap: 10px; }
    .tutorial-task-card { padding: 16px; border-radius: 14px; }
    .tutorial-task-card .task-number { min-width:48px; height:48px; font-size:0.95rem; border-radius:10px; }
    .tutorial-task-card .task-body { font-size:1.05rem; }
    .tutorial-installation-box { padding:17px; }
    .tutorial-installation-box h4 { font-size:1.45rem; }

    .tutorial-step-actions { flex-direction: column; }
    .tutorial-step-actions .tutorial-primary-button, .tutorial-step-actions .tutorial-secondary-button { width:100%; }
    .tutorial-step-actions .tutorial-azzinfos-button { width:100%; }
}