.demo-purpose{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;margin:18px 0;padding:20px;border:1px solid #37515d;background:linear-gradient(120deg,rgba(83,217,219,.10),rgba(214,173,99,.06))}.demo-purpose__copy{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.demo-purpose__item{min-height:82px;padding:13px;background:rgba(5,14,19,.62);border-left:3px solid #37515d}.demo-purpose__item:nth-child(2){border-color:#d6ad63}.demo-purpose__item:nth-child(3){border-color:#6bd39b}.demo-purpose__item small{display:block;color:#91a6b0;font-size:10px;letter-spacing:.08em;margin-bottom:6px}.demo-purpose__item b{display:block;font-size:14px;line-height:1.55}.demo-start{min-height:52px;min-width:170px;border:1px solid #53d9db;background:#53d9db;color:#061014;padding:12px 18px;font-weight:900;cursor:pointer;box-shadow:0 0 0 0 rgba(83,217,219,.25);transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease}.demo-start:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(83,217,219,.18)}.demo-start:disabled{opacity:.56;cursor:wait;transform:none}.demo-progress{display:grid;grid-template-columns:repeat(var(--demo-steps,4),1fr);gap:6px;margin:0 0 14px}.demo-progress__step{min-height:42px;padding:8px 10px;border:1px solid #29404c;background:#09141a;color:#71858f;font-size:11px;display:flex;align-items:center;gap:7px;transition:border-color .2s ease,color .2s ease,background-color .2s ease}.demo-progress__step i{display:grid;place-items:center;width:22px;height:22px;flex:0 0 22px;border-radius:50%;border:1px solid #45606c;font-style:normal;font:700 10px/1 ui-monospace,monospace}.demo-progress__step.is-active{border-color:#53d9db;color:#fff;background:#102a31}.demo-progress__step.is-done{border-color:#2f7457;color:#bdebd0}.demo-result-summary{margin:14px 0;padding:17px 18px;border:1px solid #29404c;background:#09141a;min-height:76px;transition:border-color .24s ease,background-color .24s ease,transform .24s ease}.demo-result-summary h2,.demo-result-summary h3{margin:0 0 8px;font-size:15px}.demo-result-summary p{margin:0;color:#91a6b0;line-height:1.65}.demo-result-summary.is-complete{border-color:#6bd39b;background:linear-gradient(110deg,rgba(107,211,155,.14),rgba(83,217,219,.06));transform:translateY(-2px)}.demo-result-summary__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}.demo-result-summary__stats div{padding:10px;background:rgba(3,11,15,.55)}.demo-result-summary__stats b{display:block;color:#edf4f6;font:800 19px/1.2 ui-monospace,monospace;font-variant-numeric:tabular-nums}.demo-result-summary__stats span{color:#91a6b0;font-size:10px}.demo-focus{position:relative;z-index:8;outline:3px solid #f2c46d;outline-offset:5px;box-shadow:0 0 0 8px rgba(242,196,109,.11),0 18px 50px rgba(0,0,0,.34)}.demo-coach{position:fixed;right:22px;bottom:22px;z-index:999;width:min(350px,calc(100vw - 32px));border:1px solid #53d9db;background:rgba(7,16,23,.97);box-shadow:0 24px 70px rgba(0,0,0,.55);padding:16px;transform:translateY(18px);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}.demo-coach.is-visible{opacity:1;transform:translateY(0)}.demo-coach small{color:#53d9db;font:800 10px/1.2 ui-monospace,monospace;letter-spacing:.12em}.demo-coach b{display:block;margin:7px 0 5px;font-size:16px}.demo-coach p{margin:0;color:#b7c7ce;font-size:12px;line-height:1.6}.demo-coach__bar{height:3px;background:#20343d;margin-top:12px;overflow:hidden}.demo-coach__bar i{display:block;height:100%;background:#53d9db;transition:width .28s ease}@media(max-width:760px){.demo-purpose{grid-template-columns:1fr}.demo-purpose__copy{grid-template-columns:1fr}.demo-start{width:100%}.demo-progress{grid-template-columns:1fr 1fr}.demo-result-summary__stats{grid-template-columns:1fr}.demo-coach{right:16px;bottom:16px}}
@media(prefers-reduced-motion:reduce){.demo-start,.demo-progress__step,.demo-result-summary,.demo-coach,.demo-coach__bar i{transition:none}.demo-focus{scroll-margin-top:16px}}