/* Unlock card and the faded page skeleton shown before a code is entered. Uses the site's own fonts and colours. */
.training-page .gate-card { background: var(--card, #fffdf8); border: 1px solid var(--rule-2, #d3c6b3); border-radius: var(--radius, 14px); box-shadow: var(--shadow, 0 6px 20px -8px rgba(60,40,20,.14)); padding: 1.5rem 1.4rem 1.3rem; margin: 0 0 1.5rem; max-width: 40rem; }
.training-page .gate-card h2 { font-family: var(--serif, Georgia, serif); font-weight: 500; font-size: clamp(1.6rem, 4.6vw, 2.05rem); line-height: 1.15; margin: 0 0 .6rem; color: var(--ink, #1f1b17); }
.training-page .gate-lead, .training-page .gate-ask { font-family: var(--serif, Georgia, serif); font-size: 1.15rem; line-height: 1.5; color: var(--ink-2, #3a332c); margin: 0 0 1rem; }
.training-page .gate-ask { font-size: 1.05rem; margin: 1rem 0 0; }
.training-page .gate-label { display: block; font-family: var(--sans, Inter, system-ui, sans-serif); font-size: .95rem; font-weight: 600; margin: 0 0 .4rem; color: var(--ink, #1f1b17); }
.training-page .gate-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.training-page .gate-input { flex: 1 1 12rem; min-width: 0; font: inherit; font-family: var(--sans, Inter, system-ui, sans-serif); font-size: 1.125rem; padding: .8rem .9rem; border: 1px solid var(--rule-2, #d3c6b3); border-radius: 10px; background: #fff; color: var(--ink, #1f1b17); min-height: 3rem; }
.training-page .gate-btn { font-family: var(--sans, Inter, system-ui, sans-serif); font-size: 1.125rem; font-weight: 600; padding: .8rem 1.5rem; min-height: 3rem; border: 0; border-radius: 10px; background: var(--accent, #b5441c); color: #fff; cursor: pointer; }
.training-page .gate-btn:disabled { opacity: .6; cursor: default; }
.training-page .gate-msg { font-family: var(--sans, Inter, system-ui, sans-serif); font-size: 1rem; min-height: 1.4rem; margin: .6rem 0 0; color: var(--accent, #b5441c); }
/* Faded shape of the rest of the page: text-free bars, not clickable, not selectable. */
.training-page .gate-locked { opacity: .5; pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-mask-image: linear-gradient(#000 0, #000 55%, rgba(0,0,0,.35) 100%); mask-image: linear-gradient(#000 0, #000 55%, rgba(0,0,0,.35) 100%); filter: grayscale(.4); }
.training-page .gate-sk { margin: 0 0 1.5rem; }
.training-page .gate-sk-pic { height: 12rem; border-radius: 12px; background: var(--rule, #e3d9ca); }
.training-page .gate-sk-player { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; border-radius: 14px; background: var(--card, #fffdf8); border: 1px solid var(--rule, #e3d9ca); }
.training-page .gate-sk-dot { width: 3rem; height: 3rem; border-radius: 50%; background: var(--accent-bright, #d0592b); flex: none; }
.training-page .gate-sk-bar { flex: 1; height: .7rem; border-radius: 6px; background: var(--rule, #e3d9ca); }
.training-page .gate-sk-card { padding: 1.2rem 1.25rem; border-radius: 14px; background: var(--card, #fffdf8); border: 1px solid var(--rule, #e3d9ca); }
.training-page .gate-sk-h { font-family: var(--serif, Georgia, serif); font-size: clamp(1.4rem, 3.6vw, 1.8rem); line-height: 1.15; color: var(--ink, #1f1b17); margin: 0 0 .9rem; }
.training-page .gate-sk-line { display: block; height: .8rem; border-radius: 6px; background: var(--rule, #e3d9ca); margin: 0 0 .7rem; }
.training-page .gate-intro { background: var(--card, #fffdf8); border: 1px solid var(--rule-2, #d3c6b3); border-left: 5px solid var(--accent-bright, #b8652a); border-radius: 10px; padding: .9rem 1.1rem 1rem; margin: 0 0 1.25rem; max-width: 40rem; }
.training-page .gate-intro-h { font-family: var(--serif, Georgia, serif); font-size: 1.45rem; font-weight: 600; line-height: 1.2; margin: 0 0 .5rem; color: var(--ink, #1f1b17); }
.training-page .gate-intro audio { display: block; width: 100%; min-height: 44px; }