/* A contained game scene and three practical steps into the same account. */
.hero-start{width:min(1440px,calc(100% - 48px));margin:18px auto 0;min-height:570px;border:1px solid var(--line);border-radius:24px;background:var(--panel)}
.hero-start .hero-content{width:min(1280px,calc(100% - 48px));padding-top:76px;padding-bottom:64px}
.hero-start .hero-art{object-position:65% top}
.hero-start:before{background:linear-gradient(90deg,rgba(var(--bg-rgb),.99),rgba(var(--bg-rgb),.9) 30%,rgba(var(--bg-rgb),.2) 68%),linear-gradient(0deg,rgba(var(--bg-rgb),.9),transparent 52%)}
.hero-start h1.hero-main-title{font-size:clamp(2.8rem,4.9vw,4.6rem);max-width:650px;line-height:1.1}
.hero-start h1 span{color:#d9dce2}
.hero-start .hero-actions{margin-top:30px}
.hero-start .hero-platform{margin-top:22px;font-size:1.0625rem;font-weight:500}
.hero-start .hero-meta{margin-top:22px;color:#c4c8d0}
.button.button-play{min-width:220px;min-height:58px;padding:16px 28px;gap:12px;border:1px solid var(--action-border);background:var(--action);color:var(--action-text);font-size:1rem;font-weight:700;box-shadow:0 4px 20px #ffb44820,inset 0 1px 0 #ffffff42;transition:transform 140ms var(--ease),background-color 140ms ease}
.button-play .play-small{border-left-width:10px;border-top-width:6px;border-bottom-width:6px}
.button-play:focus-visible{outline:3px solid var(--action-focus);outline-offset:5px}
.start-guide{padding-top:52px;padding-bottom:64px;scroll-margin-top:24px}
.start-guide>header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:26px}
.start-guide h2{font-family:inherit;letter-spacing:-.035em;font-size:clamp(1.75rem,3vw,2.2rem);line-height:1.2;text-transform:none;font-weight:650}
.start-guide>header p{margin-top:10px;line-height:1.65;font-size:.9375rem}
.start-guide .badge{flex-shrink:0;margin-top:4px;background:var(--surface);color:var(--text);border:1px solid var(--line);padding:7px 11px}
.start-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.start-step{display:flex;flex-direction:column;padding:28px;background:var(--panel);border:1px solid var(--line);border-radius:18px;min-width:0;position:relative;overflow:hidden}
.start-step-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:26px}
.start-step-number{color:var(--muted);font-size:.8125rem;letter-spacing:.08em;font-weight:500;font-variant-numeric:tabular-nums}
.start-step-number:before{content:'ШАГ ';font-size:.625rem;letter-spacing:.12em}
.start-step-art{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--surface);color:var(--accent);border:1px solid var(--line)}
.start-step-art .svg-icon{width:29px;height:29px;stroke-width:1.5}
.start-step h3{font-size:1.75rem;line-height:1.15;letter-spacing:-.035em;font-weight:600}
.start-step p{font-size:.875rem;line-height:1.75;margin-top:16px;max-width:34ch}
.start-step-copy{flex:1;padding-bottom:28px}
.start-step-action{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:48px;padding:12px 0;border-top:1px solid var(--line);font-size:.8125rem;font-weight:550;color:var(--text)}
.start-step-action>span:last-child{font-size:19px;line-height:1;color:var(--muted)}
.start-step-action.is-primary{background:var(--accent);color:var(--on-accent);padding:12px 16px;border:1px solid var(--accent);border-radius:10px}
.start-step-action.is-primary>span{color:inherit}
@media(hover:hover) and (pointer:fine){.button.button-play:hover{background:var(--action-hover)}.start-step-action:hover{color:var(--accent)}.start-step-action.is-primary:hover{color:var(--on-accent);background:var(--accent-hover)}}
@media(max-width:1100px){.hero-start{width:calc(100% - 32px)}.hero-start .hero-content{width:calc(100% - 32px)}.start-step{padding:24px}.start-step h3{font-size:1.6rem}}
@media(max-width:760px){
 .hero-start{width:calc(100% - 24px);margin-top:8px;min-height:550px;border-radius:18px}
 .hero-start .hero-content{width:calc(100% - 16px);padding:82px 8px 46px}
 .hero-start .hero-art{object-position:63% top}
 .hero-start:before{background:linear-gradient(90deg,rgba(var(--bg-rgb),.86),rgba(var(--bg-rgb),.45)),linear-gradient(0deg,rgba(var(--bg-rgb),.97),transparent 80%)}
 .hero-start h1.hero-main-title{font-size:clamp(2rem,8.3vw,3.65rem);line-height:1.15}
 .hero-start .hero-platform{font-size:1rem;max-width:260px}
 .hero-start .hero-actions{gap:12px;flex-wrap:wrap;margin-top:28px}
 .hero-start .button-play{width:100%;min-width:0;min-height:56px;padding:15px 24px;font-size:.9375rem}
 .hero-start .hero-actions>.button-secondary{min-height:56px}
 .start-guide{padding-top:34px;padding-bottom:40px}
 .start-guide>header{flex-wrap:wrap;gap:14px;margin-bottom:22px}
 .start-guide .badge{margin-top:0;font-size:.6875rem}
 .start-guide>header p{font-size:.875rem}
 .start-steps{grid-template-columns:1fr;gap:14px}
 .start-step{padding:22px;border-radius:16px}
 .start-step-top{margin-bottom:16px}
 .start-step-art{width:48px;height:48px;border-radius:13px}
 .start-step h3{font-size:1.5rem}.start-step h3 br{display:none}
 .start-step p{font-size:.875rem;margin-top:12px;max-width:none}
 .start-step-copy{padding-bottom:22px}
}
@media(prefers-reduced-motion:reduce){.button.button-play{transition:none}.button.button-play:active{transform:none}}
.keyboard .button.button-play{transition:none}.keyboard .button.button-play:active{transform:none}
@media(prefers-contrast:more){.button.button-play{border-color:#ffddad;box-shadow:none}.start-step{border-color:var(--muted)}}
.start-step-action{transition:transform 140ms var(--ease)}.start-step-action:active{transform:scale(.98)}
.keyboard .start-step-action:active{transform:none}
@media(prefers-reduced-motion:reduce){.start-step-action{transition:none}.start-step-action:active{transform:none}}