*, *::before, *::after { box-sizing: border-box; }
body {
    background: #020617;
    color: #fff;
    font-family: 'Inter', sans-serif;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    min-height: 100vh; margin: 0;
    text-align: center; overflow: hidden;
}
#particles { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.bg-glow { position: fixed; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 40%, #1e3a8a44 0%, transparent 70%); z-index: 0; pointer-events: none; }
.back-home { position: fixed; top: 20px; left: 24px; font-size: 0.85rem; color: #475569; text-decoration: none; transition: color 0.2s; z-index: 10; }
.back-home:hover { color: #fff; }

.container { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding: 40px 24px; max-width: 560px; width: 100%; }

h1 { font-family: 'Syne', sans-serif; font-size: clamp(2rem, 8vw, 3rem); font-weight: 900; margin: 0 0 6px; letter-spacing: -2px; }
.subtitle { font-size: 0.95rem; color: #64748b; margin-bottom: 48px; }

/* ---- MACHINE BOX ---- */
.machine {
    background: rgba(15,23,42,0.8);
    border: 1px solid rgba(51,65,85,0.8);
    border-radius: 24px;
    padding: 48px 40px;
    width: 100%; max-width: 400px;
    backdrop-filter: blur(14px);
    display: flex; flex-direction: column; align-items: center; gap: 32px;
    position: relative;
}

.machine-label {
    font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 3px;
    color: #334155;
}

/* ---- TOGGLE SWITCH ---- */
.switch-wrap {
    display: flex; align-items: center; gap: 20px;
    font-family: 'Syne', sans-serif; font-size: 0.85rem; font-weight: 700;
}

.switch-track {
    width: 100px; height: 50px;
    background: rgba(30,58,138,0.3);
    border: 2px solid rgba(96,165,250,0.25);
    border-radius: 999px;
    position: relative; cursor: pointer;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.switch-track.on {
    background: rgba(37,99,235,0.45);
    border-color: #60a5fa;
    box-shadow: 0 0 30px rgba(96,165,250,0.2);
}

.switch-thumb {
    width: 38px; height: 38px;
    background: #334155;
    border-radius: 50%;
    position: absolute; top: 4px; left: 4px;
    transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), background 0.3s;
}

.switch-track.on .switch-thumb {
    transform: translateX(50px);
    background: #60a5fa;
}

.switch-side { color: #334155; transition: color 0.3s; min-width: 28px; }
.switch-side.active { color: #f8fafc; }

/* ---- FINGER ARM ---- */
.arm-wrap {
    position: absolute;
    top: 50%; right: 0;
    transform: translateY(-50%);
    width: 90px; height: 90px;
    pointer-events: none;
    overflow: visible;
}

.arm {
    position: absolute;
    right: -80px; top: 50%;
    transform-origin: right center;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.4s cubic-bezier(0.34,1.2,0.64,1);
    font-size: 2rem;
    opacity: 0;
}

.arm.reaching {
    opacity: 1;
    transform: translateY(-50%) rotate(0deg) translateX(-60px);
}

/* ---- COUNTER ---- */
.counter-row {
    display: flex; gap: 24px;
}

.stat {
    display: flex; flex-direction: column; gap: 4px; align-items: center;
}
.stat-val {
    font-family: 'Syne', sans-serif;
    font-size: 1.6rem; font-weight: 900; color: #f8fafc;
}
.stat-label { font-size: 0.7rem; color: #475569; text-transform: uppercase; letter-spacing: 1.5px; }

/* ---- COMMENT ---- */
.comment {
    font-size: 0.9rem; color: #475569;
    min-height: 22px; transition: opacity 0.3s;
    font-style: italic;
}

/* ---- LIGHT ---- */
.indicator {
    width: 12px; height: 12px; border-radius: 50%;
    background: #1e293b;
    transition: background 0.3s, box-shadow 0.3s;
    position: absolute; top: 20px; right: 20px;
}
.indicator.on { background: #10b981; box-shadow: 0 0 10px #10b981; }