.training-layout {
            display: grid;
            grid-template-columns: 1fr 320px;
            gap: 18px;
            align-items: stretch;
        }

        .stage {
            min-height: 640px;
            padding: 22px;
            overflow: hidden;
            position: relative;
            display: grid;
            grid-template-rows: auto 1fr auto;
        }

        .stage-top {
            display: flex;
            justify-content: space-between;
            gap: 14px;
            align-items: center;
            position: relative;
            z-index: 3;
        }

        .stage-title h2 {
            margin: 0;
            font-size: 26px;
            letter-spacing: -0.04em;
        }

        .stage-title p {
            margin: 6px 0 0;
            color: var(--muted);
            font-size: 14px;
        }

        .timer {
            font-variant-numeric: tabular-nums;
            font-size: 40px;
            line-height: 1;
            letter-spacing: -0.04em;
            padding: 12px 16px;
            border-radius: 22px;
            background: var(--card-strong);
        }

        .training-area {
            position: relative;
            margin: 18px 0;
            min-height: 450px;
            border-radius: 30px;
            overflow: hidden;
            background:
                radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.36), transparent 16%),
                linear-gradient(160deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.04));
            border: 1px solid rgba(255, 255, 255, 0.28);
        }

        .scene-forest .training-area {
            background:
                radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.62), transparent 18%),
                radial-gradient(circle at 78% 28%, rgba(141, 201, 166, 0.34), transparent 24%),
                linear-gradient(160deg, rgba(230, 247, 236, 0.5), rgba(97, 154, 119, 0.16));
        }

        .scene-ocean .training-area {
            background:
                radial-gradient(circle at 22% 20%, rgba(255, 255, 255, 0.58), transparent 17%),
                radial-gradient(circle at 72% 22%, rgba(146, 209, 229, 0.38), transparent 26%),
                linear-gradient(160deg, rgba(223, 244, 246, 0.56), rgba(54, 126, 153, 0.16));
        }

        .scene-star .training-area {
            background:
                radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.32), 0 1px, transparent 2px),
                radial-gradient(circle at 76% 22%, rgba(255, 255, 255, 0.28), 0 1px, transparent 2px),
                radial-gradient(circle at 50% 50%, rgba(147, 200, 255, 0.18), transparent 30%),
                linear-gradient(160deg, rgba(18, 32, 55, 0.8), rgba(5, 12, 24, 0.4));
        }

        .scene-minimal .training-area {
            background:
                radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.5), transparent 20%),
                linear-gradient(160deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.16));
        }

        .horizon {
            position: absolute;
            left: 12%;
            right: 12%;
            top: 50%;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--track), transparent);
        }

        .path-ring,
        .path-eight {
            position: absolute;
            inset: 14%;
            border: 2px dashed var(--track);
            border-radius: 999px;
            opacity: 0.85;
        }

        .path-eight {
            inset: 18% 14%;
            border: 0;
        }

        .path-eight::before,
        .path-eight::after {
            content: "";
            position: absolute;
            width: 48%;
            height: 70%;
            top: 15%;
            border: 2px dashed var(--track);
            border-radius: 50%;
        }

        .path-eight::before { left: 3%; }
        .path-eight::after { right: 3%; }

        .target {
            --x: 50;
            --y: 50;
            --scale: 1;
            position: absolute;
            left: calc(var(--x) * 1%);
            top: calc(var(--y) * 1%);
            width: 54px;
            height: 54px;
            border-radius: 999px;
            transform: translate(-50%, -50%) scale(var(--scale));
            background:
                radial-gradient(circle at 35% 32%, var(--dot), var(--dot-core) 42%, var(--primary) 100%);
            box-shadow: 0 0 0 12px var(--ring), 0 18px 36px rgba(0, 0, 0, 0.18);
            display: grid;
            place-items: center;
            color: white;
            font-weight: 900;
            font-size: 22px;
            z-index: 2;
            transition: left 0.12s linear, top 0.12s linear, transform 0.12s linear;
        }

        .target.hidden {
            opacity: 0;
        }

        .breath-circle {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 180px;
            height: 180px;
            border-radius: 50%;
            transform: translate(-50%, -50%) scale(1);
            background: radial-gradient(circle, var(--ring), transparent 70%);
            border: 2px solid var(--track);
            animation: breathe 5s ease-in-out infinite;
            display: none;
        }

        @keyframes breathe {
            0%, 100% { transform: translate(-50%, -50%) scale(0.82); opacity: 0.72; }
            50% { transform: translate(-50%, -50%) scale(1.28); opacity: 1; }
        }

        .massage-guide {
            position: absolute;
            inset: 0;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 28px;
            text-align: center;
            z-index: 2;
        }

        .face-card {
            width: min(420px, 92%);
            padding: 34px;
            border-radius: 32px;
            background: var(--card-strong);
            box-shadow: 0 18px 44px rgba(0, 0, 0, 0.08);
        }

        .face-icon {
            position: relative;
            width: 160px;
            height: 160px;
            margin: 0 auto 20px;
            border-radius: 50%;
            border: 2px solid var(--track);
            background: rgba(255, 255, 255, 0.28);
        }

        .face-icon::before,
        .face-icon::after {
            content: "";
            position: absolute;
            top: 62px;
            width: 20px;
            height: 10px;
            border-bottom: 3px solid var(--primary);
            border-radius: 50%;
        }

        .face-icon::before { left: 45px; }
        .face-icon::after { right: 45px; }

        .massage-point {
            position: absolute;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--primary);
            box-shadow: 0 0 0 10px var(--ring);
            animation: pulse 1.5s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% { transform: scale(0.9); opacity: 0.75; }
            50% { transform: scale(1.1); opacity: 1; }
        }

        .point-brow { left: 71px; top: 44px; }
        .point-temple-left { left: 24px; top: 70px; }
        .point-temple-right { right: 24px; top: 70px; }
        .point-under-eye { left: 71px; top: 88px; }

        .instruction {
            position: relative;
            z-index: 3;
            padding: 18px 20px;
            border-radius: 24px;
            background: var(--card-strong);
            display: flex;
            justify-content: space-between;
            gap: 18px;
            align-items: center;
        }

        .instruction-text strong {
            display: block;
            font-size: 19px;
            margin-bottom: 5px;
        }

        .instruction-text span {
            color: var(--muted);
            line-height: 1.6;
            font-size: 14px;
        }

        .progress-wrap {
            width: 150px;
            height: 10px;
            border-radius: 999px;
            background: var(--track);
            overflow: hidden;
            flex: 0 0 auto;
        }

        .progress-bar {
            height: 100%;
            width: 0%;
            border-radius: inherit;
            background: var(--primary);
        }

        .side-panel {
            padding: 20px;
        }

        .side-panel h3 {
            margin: 0 0 14px;
            font-size: 20px;
            letter-spacing: -0.03em;
        }

        .step-list {
            display: grid;
            gap: 10px;
        }

        .step-item {
            padding: 14px;
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.28);
            border: 1px solid rgba(255, 255, 255, 0.22);
            color: var(--muted);
            font-size: 14px;
        }

        .step-item.active {
            background: var(--card-strong);
            color: var(--text);
            box-shadow: 0 12px 26px rgba(0, 0, 0, 0.06);
        }

        .step-item strong {
            display: block;
            margin-bottom: 4px;
            color: inherit;
        }

        .training-actions {
            display: flex;
            gap: 10px;
            margin-top: 16px;
            flex-wrap: wrap;
        }