.training [hidden] { display: none !important; }
.training .hero-panel { min-height: 440px; }
.training .hero-panel .wrap { padding-top: 3rem; padding-bottom: 3rem; }
.training .section { padding: 3rem 0; }
.training .wrap { max-width: 1100px; }
.training-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.training-card { background: var(--card-bg, #122a1c); border: 1px solid var(--border, #365343); border-radius: 14px; padding: 1.3rem; min-width: 0; }
.training p { line-height: 1.65; }
.training details { border: 1px solid var(--border, #365343); border-radius: 10px; padding: 1rem; margin: 1rem 0; }
.training summary { cursor: pointer; font-weight: 650; }
.training form { margin: 1.7rem 0; }
.training label { display: block; font-weight: 650; margin: .8rem 0; }
.training textarea { width: 100%; padding: 1rem; resize: vertical; background: #07170f; color: #effbea; border: 1px solid #587361; border-radius: 10px; font: 14px/1.6 ui-monospace, monospace; }
.training input { background: #07170f; color: #effbea; padding: .65rem; border: 1px solid #587361; border-radius: 6px; width: 7rem; margin-right: .5rem; }
.training button:disabled { opacity: .5; cursor: not-allowed; }
.training :focus-visible { outline: 3px solid #d8f49b; outline-offset: 4px; }
.training pre { overflow: auto; max-height: 32rem; padding: 1rem; background: #06110b; color: #e0eed7; font-size: .8rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.training-hash { font: .78rem/1.7 ui-monospace, monospace; overflow-wrap: anywhere; }
.training-table-wrap { overflow: auto; margin: 1.5rem 0; }
.training table { border-collapse: collapse; width: 100%; }
.training th, .training td { text-align: left; padding: .8rem; border-bottom: 1px solid #365343; }
.training th:first-child { width: 60%; }
.training td { font-variant-numeric: tabular-nums; }
.training caption { text-align: left; color: #b4c9b8; padding: .5rem 0; }
.training tr[data-decisive="true"] { background: #294329; font-weight: 700; }
#training-status, #export-status, #trace-status { min-height: 1.7rem; }
.training [data-error="true"], #result-stale { color: #ffd5b4; border-left: 3px solid #e6a663; padding-left: .8rem; }
.training-trace { border-top: 1px solid #365343; margin-top: 2rem; padding-top: 1rem; }
.training .trace-action { padding: .5rem 0; overflow-wrap: anywhere; }
.result-facts { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:1.6rem 0 .7rem; }
.result-fact { padding:1.4rem;background:linear-gradient(145deg,#214736,#102c23);border:1px solid #527159;border-radius:14px;min-width:0; }
.result-fact h3 { font-size:.94rem;color:#c7ddc6;margin:0 0 1rem; }
.result-fact strong { display:block;font:700 clamp(1.8rem,4.5vw,3.4rem)/1.1 ui-sans-serif,system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.04em; }
.result-fact p { margin:.65rem 0 0;color:#bdcfbd;font-size:.92rem; }
.result-caution { color:#ecd2a5;font-size:.92rem; }
.result-next { margin:1.7rem 0 2rem; }
.result-next p { font-size:1.2rem; }
.result-sharing { margin-top:2.5rem;padding:1.8rem;border:1px solid #638350;border-radius:16px;background:linear-gradient(120deg,#25472e,#102b24); }
.result-sharing h3 { font-size:1.8rem;margin:.5rem 0; }
#result-card { width:100%;height:auto;border:1px solid #547660;border-radius:10px;margin-top:1rem; }
#card-status { min-height:1.7rem; }
#training-result { scroll-margin-top:5rem; }
#private-replay { margin:1.8rem 0;padding:1rem;border:1px solid #527159;border-radius:16px;background:#081b14; }
#private-replay h3 { font-size:1.7rem; }
#private-replay-stage { margin:1rem 0;background:#010605;border-radius:10px;overflow:hidden; }
#private-replay-stage iframe { display:block;border:0;width:100%;height:640px; }
#private-replay .actions [aria-pressed="true"] { outline:2px solid #d8f49b;outline-offset:3px; }
#private-replay-caption { font-weight:650; }
#private-replay-comparison article p { margin:.55rem 0; }
#private-replay-status { min-height:1.7rem; }
@media(max-width:680px) { #private-replay {padding:.65rem;} #private-replay-stage iframe {height:680px;} #private-replay h3 {font-size:1.35rem;} }
@media(max-width:680px) { .result-facts { gap:.6rem;grid-template-columns:1fr; } .result-fact { display:grid;grid-template-columns:1fr auto;gap:.1rem 1rem;padding:1rem;align-items:center; } .result-fact h3 { margin:0; } .result-fact strong { grid-column:2;grid-row:1 / 3;white-space:nowrap; } .result-fact p { font-size:.85rem; } .result-sharing { padding:1.1rem; } #training-result { scroll-margin-top:1rem; } }
@media (max-width: 680px) { .training .site-nav { position: static; } .training-grid { grid-template-columns: minmax(0,1fr); } .training .hero-panel { min-height: 0; } .training .actions .btn { white-space: normal; text-align: center; } .training th, .training td { padding: .55rem .35rem; font-size: .86rem; } }