:root{color-scheme:light;font-family:Aptos,Segoe UI,sans-serif;color:#1f2942;background:radial-gradient(circle at top left,rgba(121,102,255,.08),transparent 24%),linear-gradient(180deg,#fbfcff,#f3f6fb);--page-bg: #f5f7fb;--surface: #ffffff;--surface-soft: #f3f5ff;--border: #dfe5f2;--border-strong: #cfd8ea;--text: #18233f;--muted: #6e7a96;--muted-soft: #8590aa;--primary: #5b4df6;--primary-soft: #eeebff;--success: #4cae73;--success-soft: #ecfaf0;--warning: #f2b64a;--warning-soft: #fff6df;--danger: #d45b5b;--danger-soft: #fff1f1;--shadow: 0 12px 30px rgba(74, 86, 120, .07);--shadow-soft: 0 4px 16px rgba(74, 86, 120, .04)}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;background:var(--page-bg);color:var(--text);font-size:.95rem}a{color:inherit;text-decoration:none}button,textarea{font:inherit}button{border:none;cursor:pointer}.app-loading,.state-card,.empty-state{box-shadow:var(--shadow-soft)}.app-loading{min-height:100vh;display:grid;place-content:center;gap:12px;padding:24px;text-align:center}.app-loading strong{color:var(--primary);letter-spacing:.06em;text-transform:uppercase;font-size:.75rem}.app-loading h1,.app-loading p{margin:0}.app-loading h1{font-size:clamp(1.8rem,4vw,2.4rem)}.app-loading p{color:var(--muted)}.spinner{width:42px;height:42px;margin:0 auto;border:3px solid rgba(91,77,246,.1);border-top-color:var(--primary);border-radius:50%;animation:spin .9s linear infinite}.spinner.large{width:56px;height:56px}.login-page{min-height:100vh;width:min(1200px,100%);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,380px);gap:24px;padding:32px;align-items:center}.login-panel,.login-card{border:1px solid var(--border);border-radius:20px;background:#ffffffeb}.login-panel{display:flex;flex-direction:column;justify-content:center;width:100%;max-width:680px;justify-self:end;padding:clamp(32px,5vw,48px);background:radial-gradient(circle at top left,rgba(91,77,246,.1),transparent 26%),linear-gradient(180deg,#fffffff5,#f5f7fff5)}.login-badge,.login-card-label,.track-badge,.score-pill,.mini-chip,.detail-chip{display:inline-flex;align-items:center;width:fit-content;border-radius:999px;font-weight:600}.login-badge,.login-card-label{padding:6px 12px;color:var(--primary);background:var(--primary-soft);font-size:.8rem}.login-panel h1,.page-intro h1{margin:8px 0 4px;font-size:clamp(1.8rem,5vw,2.4rem);line-height:1.1;letter-spacing:-.02em}.login-panel p,.page-intro p,.track-card p,.track-step-content p,.context-card p,.feedback-card p,.criterion-name p,.panel-footer p,.topbar-error,.empty-state p{color:var(--muted);line-height:1.55}.login-points{display:grid;gap:16px;margin-top:24px}.login-points div{padding:16px 0 0;border-top:1px solid var(--border)}.login-points strong{display:block;margin-bottom:4px;font-size:.95rem}.login-points span{color:var(--muted);font-size:.9rem}.login-card{display:flex;flex-direction:column;justify-content:center;gap:12px;width:100%;padding:32px 28px;box-shadow:var(--shadow)}.login-card h2,.section-header h2,.panel-title-row h2,.result-hero h2,.state-card h2,.empty-state h2{margin:0;font-size:clamp(1.4rem,2vw,1.8rem);line-height:1.1}.login-card p,.inline-alert,.blocked-card{margin:0}.inline-alert,.blocked-card{padding:12px 14px;border-radius:12px;border:1px solid var(--border)}.inline-alert{color:var(--danger);background:var(--danger-soft);border-color:#d45b5b26;font-size:.9rem}.inline-step-feedback,.inline-step-error{padding:12px 14px;border-radius:12px;border:1px solid var(--border)}.inline-step-feedback{color:var(--primary);background:var(--primary-soft);border-color:#5b4df626}.inline-step-error{color:var(--danger);background:var(--danger-soft);border-color:#d45b5b26}.blocked-card{background:#f8fafc;color:var(--muted);font-size:.9rem}.app-shell{min-height:100vh}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:12px 24px;border-bottom:1px solid var(--border);background:#ffffffdb;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);position:sticky;top:0;z-index:30}.breadcrumbs,.topbar-actions{display:flex;align-items:center;gap:8px}.breadcrumbs{color:var(--muted);font-size:.9rem}.breadcrumbs .is-current{color:var(--text);font-weight:700}.crumb-separator{color:var(--border-strong)}.topbar-error{max-width:400px;font-size:.85rem}.avatar-button{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#6ea6b6;color:#fff;font-weight:700;flex-shrink:0;font-size:.9rem}.page-shell{width:min(1200px,100%);margin:0 auto;padding:20px 24px 40px}.page-layout{display:grid;gap:16px}.page-intro{display:grid;gap:4px}.page-intro h1,.page-intro p{margin:0}.metrics-grid,.track-grid,.environment-grid{display:grid;gap:16px}.metrics-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}.metric-card,.track-card,.surface-panel,.state-card,.environment-panel,.result-hero,.empty-state{border:1px solid var(--border);border-radius:16px;background:var(--surface)}.metric-card{display:flex;align-items:center;gap:16px;padding:20px;min-height:100px;box-shadow:var(--shadow-soft)}.metric-card span,.track-card small,.environment-card span,.feedback-card span,.answer-field small,.criterion-score,.step-inline-meta,.panel-footer p{color:var(--muted-soft);font-size:.85rem}.metric-card strong{display:block;margin-top:4px;font-size:1.6rem}.metric-icon{width:40px;height:40px;border-radius:12px}.icon-purple{background:linear-gradient(135deg,#ebe7ff,#ded8ff)}.icon-green{background:linear-gradient(135deg,#e2f8ea,#d0f1dc)}.icon-yellow{background:linear-gradient(135deg,#fff5dc,#ffeab7)}.section-stack,.section-header,.panel-title-row,.instruction-stack,.criteria-list,.steps-list{display:grid;gap:14px}.track-grid{grid-template-columns:repeat(2,minmax(280px,1fr))}.track-card{padding:20px;display:grid;gap:14px;box-shadow:var(--shadow-soft);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.track-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:#d4dbf0}.track-badge{padding:6px 12px;background:#f1f4fb;color:var(--muted);font-size:.8rem}.track-card-header,.track-step-row,.criterion-row,.panel-footer,.result-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}.track-card-header h3,.track-card p,.track-step-content h3,.track-step-content p{margin:0}.track-card-header h3{font-size:clamp(1.2rem,2.2vw,1.5rem);line-height:1.1;letter-spacing:-.01em}.track-arrow{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#f5f7fc;color:var(--muted);font-size:1rem}.back-link{display:inline-flex;align-items:center;width:fit-content;color:var(--primary);font-weight:700;font-size:.85rem;margin-bottom:0;opacity:.8}.surface-panel,.environment-panel,.result-hero,.state-card,.empty-state{padding:20px;box-shadow:var(--shadow-soft)}.start-panel,.confirm-modal{display:grid;gap:20px}.start-panel{background:radial-gradient(circle at top left,rgba(91,77,246,.05),transparent 26%),#fffffffa}.start-panel-head,.start-panel-copy,.start-summary-grid,.start-panel-footer,.confirm-callout,.confirm-actions{display:grid}.start-panel-head .state-icon{width:44px;height:44px;font-size:1.1rem}.start-panel-head{grid-template-columns:auto minmax(0,1fr);align-items:start;gap:16px}.start-panel-copy{gap:6px}.start-panel-copy h2,.start-panel-copy p,.start-panel-footer p,.confirm-modal h2,.confirm-modal p,.confirm-callout p{margin:0}.start-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.start-panel-footer{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;padding-top:20px;border-top:1px solid var(--border)}.start-panel-footer p{color:var(--muted)}.modal-backdrop{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:24px;background:#1118274d;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.confirm-modal{width:min(500px,100%);padding:24px;border:1px solid var(--border);border-radius:20px;background:#fffffffa;box-shadow:var(--shadow)}.confirm-callout{gap:6px;padding:16px 20px;border:1px solid rgba(91,77,246,.12);border-radius:14px;background:var(--primary-soft)}.confirm-callout strong{font-size:.9rem}.confirm-callout--danger{border-color:#d45b5b26;background:var(--danger-soft)}.confirm-callout--danger strong{color:var(--danger)}.confirm-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.track-steps-panel{padding:0;overflow:hidden}.panel-title-row{padding:24px 24px 8px;margin-bottom:-4px;display:flex;align-items:center;gap:12px}.steps-list{gap:0}.track-step-row{align-items:center;padding:16px 24px;border-top:1px solid var(--border);transition:background .16s ease}.track-step-row:hover{background:var(--surface-soft)}.track-step-row:first-child{border-top:none}.step-index,.instruction-index,.state-icon,.result-icon{display:grid;place-items:center;border-radius:50%;font-weight:700}.step-index{width:32px;height:32px;flex-shrink:0;border:2px solid #d7deed;color:var(--muted-soft);font-size:.85rem}.step-index.is-complete{border-color:#64c58a;color:#64c58a}.track-step-content{flex:1;display:grid;gap:4px}.track-step-content h3{font-size:1.05rem}.step-meta-row{display:flex;flex-wrap:wrap;gap:8px}.mini-chip{padding:4px 10px;font-size:.8rem}.mini-chip.success{background:#eef8f1;color:#4f9b6b}.mini-chip.active{background:#eef8f1;color:#3d8f5f;border:1px solid rgba(76,174,115,.2);font-weight:700;gap:5px}.active-dot{width:6px;height:6px;border-radius:50%;background:currentColor;animation:pulse-dot 1.6s ease-in-out infinite;flex-shrink:0}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.35}}.score-pill{padding:6px 12px;margin-top:2px;background:var(--success-soft);color:#4f9b6b;font-size:.85rem}.primary-button,.ghost-button,.success-button,.danger-button,.danger-ghost-button{display:inline-flex;align-items:center;justify-content:center;padding:10px 18px;border-radius:12px;font-weight:700;font-size:.95rem;transition:transform .14s ease,opacity .14s ease,box-shadow .14s ease}.primary-button:hover,.ghost-button:hover,.success-button:hover,.danger-button:hover,.danger-ghost-button:hover,.button-element:hover{transform:translateY(-1px)}.primary-button,.button-element.primary-button{background:linear-gradient(135deg,#6455ff,#4f42ea);color:#fff;box-shadow:0 8px 20px #5b4df62e}.ghost-button{background:#f3f6fb;color:var(--text);border:1px solid var(--border)}.success-button{background:linear-gradient(135deg,#53b278,#419b65);color:#fff;box-shadow:0 8px 20px #4cae7326}.danger-button{background:linear-gradient(135deg,#e05f5f,#c94b4b);color:#fff;box-shadow:0 8px 20px #d45b5b2e}.danger-ghost-button{background:var(--danger-soft);color:var(--danger);border:1px solid rgba(212,91,91,.2)}.login-button{padding:14px 20px;font-size:1rem}.button-element:disabled,.primary-button:disabled,.success-button:disabled,.danger-button:disabled,.danger-ghost-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.step-chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}.detail-chip{padding:10px 16px;border:1px solid var(--border);background:#fff;color:var(--muted);font-size:.9rem}.detail-chip.accent{background:var(--primary-soft);color:var(--primary)}.state-card{min-height:200px;display:grid;place-content:center;gap:16px;text-align:center}.state-card p,.state-card h2{margin:0}.state-icon,.result-icon{width:56px;height:56px;margin:0 auto;background:var(--primary-soft);color:var(--primary);font-size:1.4rem}.state-icon.danger{background:var(--danger-soft);color:var(--danger)}.loading-state{background:radial-gradient(circle at top center,rgba(91,77,246,.05),transparent 28%),var(--surface)}.environment-panel{display:grid;gap:16px;background:#eff1ff;padding:20px}.environment-panel h2,.instructions-panel h2,.instruction-stack h3,.answer-field span{margin:0}.environment-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.environment-card,.context-card,.feedback-card{border:1px solid var(--border);border-radius:14px;background:#fffffff5}.environment-card{padding:16px;display:grid;gap:8px;min-height:120px;max-width:none}.environment-card .primary-button,.environment-card .ghost-button{width:100%;padding:8px 14px;font-size:.85rem}.instructions-panel{display:grid;gap:16px}.context-card{padding:16px;background:#f8faff}.context-card span,.feedback-card span{display:block;margin-bottom:6px;color:var(--muted-soft);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700}.instruction-list{list-style:none;display:grid;gap:12px;padding:0;margin:0}.instruction-list li{display:flex;align-items:flex-start;gap:10px}.instruction-index{width:22px;height:22px;flex-shrink:0;background:var(--primary-soft);color:var(--primary);font-size:.75rem}.instruction-list p{margin:0;font-size:.95rem}.panel-footer{padding-top:20px;border-top:1px solid var(--border);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:16px}.panel-footer-copy{display:grid;gap:8px;min-width:0}.panel-footer-copy p{margin:0;max-width:700px;font-size:.9rem}.panel-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap;align-self:end}.panel-actions .ghost-button,.panel-actions .success-button,.panel-actions .primary-button{min-height:48px;min-width:180px}.page-layout.has-sidebar{grid-template-columns:minmax(0,1fr) 320px;align-items:start}.reading-content{max-width:72ch;font-size:1.05rem;line-height:1.6}.context-briefing{padding:14px 18px;background:#fdfdff;border-left:4px solid var(--primary-soft);border-radius:4px 14px 14px 4px;margin-bottom:8px}.context-briefing span{display:block;margin-bottom:8px;color:var(--primary);font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em}.instruction-list{list-style:none;padding:0;margin:0;display:grid;gap:8px}.instruction-list li{display:flex;align-items:flex-start;gap:12px;padding:8px 0}.instruction-number{font-size:.8rem;font-weight:800;color:var(--primary);background:var(--primary-soft);width:22px;height:22px;border-radius:6px;display:grid;place-items:center;flex-shrink:0;margin-top:1px}.instruction-list p{margin:0;font-size:.95rem;line-height:1.5;color:var(--text)}.sidebar-sticky{position:sticky;top:84px;display:grid;gap:16px}.toolbox-card{padding:20px;border:1px solid var(--primary-soft);background:#f8f9ff;border-radius:18px;box-shadow:var(--shadow-soft)}.toolbox-card h4{margin:0 0 12px;font-size:.9rem;color:var(--primary);text-transform:uppercase;letter-spacing:.05em}.score-display{text-align:center;padding:24px;background:var(--surface);border-radius:20px;border:1px solid var(--border);display:grid;gap:8px}.score-display strong{font-size:2.5rem;letter-spacing:-.02em}.score-bar-container{height:8px;background:var(--surface-soft);border-radius:99px;overflow:hidden;margin:8px 0}.score-bar-fill{height:100%;background:var(--primary);transition:width .8s cubic-bezier(.34,1.56,.64,1)}.score-bar-fill.success{background:var(--success)}.answer-editor{display:grid;gap:12px;margin-top:24px}.answer-editor textarea{min-height:320px;line-height:1.6;font-size:1.05rem;padding:24px;border-radius:18px;border:2px solid var(--border);background:#fff;box-shadow:inset 0 2px 4px #00000005}.answer-editor textarea:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 4px var(--primary-soft)}@media(max-width:1024px){.page-layout.has-sidebar{grid-template-columns:1fr}.sidebar-sticky{position:static}}.result-hero{display:grid;justify-items:center;gap:16px;padding:32px 24px}.result-hero.is-success{background:linear-gradient(180deg,#ecfaf0eb,#f5fdf7eb);border-color:#ccefd7}.result-hero.is-neutral{background:linear-gradient(180deg,#faf8ffeb,#ffffffeb)}.result-icon.is-success{background:#4cae731f;color:var(--success)}.result-hero strong{font-size:clamp(2rem,6vw,2.6rem);letter-spacing:-.02em}.feedback-card{width:min(600px,100%);padding:16px 18px}.result-actions{flex-wrap:wrap;gap:12px}.evaluation-panel{display:grid;gap:16px}.criteria-list{gap:12px}.criterion-row{gap:12px;padding:16px;border:1px solid var(--border);border-radius:12px;background:#fbfcff}.criterion-name{display:flex;align-items:flex-start;gap:10px}.criterion-name strong{font-size:.95rem}.criterion-name p{margin:0;font-size:.9rem}.criterion-bullet{color:var(--success);flex-shrink:0;font-size:.9rem}.criterion-score{font-weight:700;white-space:nowrap;font-size:.9rem}.empty-state{max-width:680px;margin:0 auto;padding:40px;text-align:center;display:grid;gap:10px;justify-items:center}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:1180px){.track-grid{grid-template-columns:1fr}}@media(max-width:1024px){.login-page,.metrics-grid,.environment-grid{grid-template-columns:1fr}.login-page{padding:32px;align-items:stretch}.login-panel{max-width:none;justify-self:stretch}.page-shell{padding:36px 20px 56px}.start-summary-grid,.start-panel-footer,.track-step-row,.criterion-row,.topbar{grid-template-columns:1fr}.track-step-row,.criterion-row,.topbar{flex-direction:column;align-items:flex-start}.topbar{min-height:auto;padding:16px 20px}.topbar-actions{width:100%;justify-content:space-between}}@media(max-width:720px){.login-page,.login-panel,.login-card,.page-shell,.surface-panel,.environment-panel,.state-card,.result-hero,.empty-state{padding-left:20px;padding-right:20px}.login-page{padding:20px}.page-shell{padding:28px 16px 48px}.login-panel,.login-card,.surface-panel,.environment-panel,.result-hero,.state-card{border-radius:20px}.track-steps-panel .panel-title-row{padding:24px 20px 8px}.page-intro h1,.login-panel h1,.result-hero strong{font-size:2.4rem}.metric-card,.track-card,.track-step-row,.environment-card,.criterion-row{padding:20px}.state-card{min-height:240px}.answer-field textarea{min-height:220px;padding:18px}.detail-chip,.primary-button,.ghost-button,.success-button{width:100%}.start-panel-head{grid-template-columns:1fr}.panel-actions{width:100%;justify-content:stretch}.panel-footer{grid-template-columns:1fr;align-items:flex-start}.panel-actions .ghost-button,.panel-actions .success-button,.panel-actions .primary-button{min-width:0}.result-actions{width:100%}.confirm-actions{grid-template-columns:1fr}}
