:root{--bg-color:#0d1117;--panel-bg:#ffffff05;--panel-border:#ffffff0f;--text-primary:#e6edf3;--text-secondary:#848d97;--accent-gold:tan;--accent-red:#d73a49;--accent-blue:#58a6ff;--sidebar-width:250px}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-primary);height:100vh;font-family:Inter,system-ui,-apple-system,sans-serif;overflow-x:hidden}body.learning-archive-embedded-app{min-height:100svh}.app-container{height:100vh;display:flex}.sidebar{width:var(--sidebar-width);border-right:1px solid var(--panel-border);background:#0d1117f2;flex-direction:column;padding:24px;display:flex}.main-content{background:radial-gradient(circle at 100% 0,#d2b48c08 0%,#0000 40%),radial-gradient(circle at 0 100%,#58a6ff05 0%,#0000 40%);flex:1;padding:32px 48px;animation:.4s ease-out fadeIn;position:relative;overflow-y:auto}body.learning-archive-embedded-app .sidebar{-webkit-backdrop-filter:blur(24px);background:linear-gradient(#0d1117fa 0%,#0d1117e6 100%)}body.learning-archive-embedded-app .main-content{padding-bottom:calc(28px + env(safe-area-inset-bottom))}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.header{justify-content:space-between;align-items:flex-end;margin-bottom:32px;display:flex}.header h1{letter-spacing:-.02em;font-size:2rem;font-weight:700}.header p{color:var(--text-secondary);margin-top:4px;font-size:.95rem}.glass-panel{background:var(--panel-bg);-webkit-backdrop-filter:blur(20px);border:1px solid var(--panel-border);border-radius:20px;flex-direction:column;padding:24px;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s;display:flex}.glass-panel:hover{border-color:#ffffff1a;transform:translateY(-2px);box-shadow:0 12px 30px #0000004d}.bento-grid{grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(160px,auto);gap:24px;display:grid}.col-12{grid-column:span 12}.col-8{grid-column:span 8}.col-6{grid-column:span 6}.col-4{grid-column:span 4}.col-3{grid-column:span 3}.row-2{grid-row:span 2}.row-3{grid-row:span 3}@media (width<=1200px){.col-8{grid-column:span 12}.col-4{grid-column:span 6}}@media (width<=768px){.col-6,.col-4,.col-3{grid-column:span 12}.app-container{flex-direction:column}.sidebar{border-right:none;border-bottom:1px solid var(--panel-border);width:100%;height:auto;padding:16px}.main-content{padding:16px}.brand{margin-bottom:16px;font-size:1.35rem}.sidebar-nav{scrollbar-width:none;margin-bottom:12px;padding-bottom:4px;overflow-x:auto;flex-direction:row!important;gap:10px!important;display:flex!important}.sidebar-nav::-webkit-scrollbar{display:none}.nav-item{white-space:nowrap;flex:none;margin-bottom:0;padding:10px 14px}.sidebar-status-card{margin-top:0!important}.header{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:24px}.header h1{font-size:1.7rem}.header p{font-size:.9rem}.glass-panel{border-radius:16px;padding:18px}.bento-grid{gap:16px}.trajectory-summary-panel{gap:18px;flex-direction:column!important;align-items:stretch!important;padding:20px 18px!important}.trajectory-summary-divider{width:100%!important;height:1px!important}.timeline{padding-left:20px}.timeline:before{left:7px}.timeline-dot{width:10px;height:10px;left:-20px}.timeline-date{margin-bottom:10px;line-height:1.5}.trajectory-card{padding:16px!important}.trajectory-chip-row,.trajectory-score-row,.trajectory-footer{gap:10px!important}.trajectory-score-row{flex-direction:column;align-items:flex-start;margin-bottom:14px!important}.trajectory-observation{font-size:.9rem!important}.trajectory-footer{flex-direction:column;align-items:flex-start!important}.trajectory-footer-item{width:100%}.artifact-grid{flex-direction:column}.artifact-button{width:100%;min-width:0!important}.artifact-button-title{line-height:1.5;font-size:.84rem!important}.artifact-modal-overlay{padding:12px!important}.artifact-modal-dialog{border-radius:16px!important;width:100%!important;max-height:calc(100vh - 24px)!important}.artifact-modal-header{flex-direction:column;align-items:stretch!important;padding:16px!important}.artifact-modal-actions{flex-wrap:wrap;justify-content:space-between}.artifact-modal-link,.artifact-modal-close{text-align:center;width:100%}.artifact-modal-body{padding:16px!important}body.learning-archive-embedded-app .sidebar{z-index:30;padding-top:calc(12px + env(safe-area-inset-top));padding-bottom:12px;position:sticky;top:0}body.learning-archive-embedded-app .brand{margin-bottom:12px;font-size:1.2rem}body.learning-archive-embedded-app .sidebar-status-card{display:none}body.learning-archive-embedded-app .sidebar-nav{margin-bottom:0;padding-bottom:0;gap:8px!important}body.learning-archive-embedded-app .nav-item{background:#ffffff05;border:1px solid #ffffff0f;padding:10px 12px}body.learning-archive-embedded-app .nav-item.active{border-color:#d2b48c38}body.learning-archive-embedded-app .main-content{padding:14px 14px calc(24px + env(safe-area-inset-bottom))}body.learning-archive-embedded-app .header{gap:10px;margin-bottom:18px}body.learning-archive-embedded-app .header h1{font-size:1.45rem}body.learning-archive-embedded-app .header p{font-size:.84rem}body.learning-archive-embedded-app .glass-panel{border-radius:14px;padding:16px}body.learning-archive-embedded-app .panel-title{margin-bottom:12px}body.learning-archive-embedded-app .timeline-item{margin-bottom:22px}body.learning-archive-embedded-app .artifact-button{padding:12px!important}body.learning-archive-embedded-app .artifact-modal-dialog{max-height:calc(100svh - 24px)!important}body.learning-archive-embedded-app .artifact-modal-body pre{font-size:.84rem!important;line-height:1.7!important}}.text-gold{color:var(--accent-gold)}.text-red{color:var(--accent-red)}.text-blue{color:var(--accent-blue)}.panel-title{align-items:center;gap:8px;margin-bottom:16px;font-size:1.1rem;font-weight:600;display:flex}.panel-subtitle{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;font-size:.8rem;font-weight:500}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff14;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#ffffff26}.stat-value{letter-spacing:-.05em;background:linear-gradient(135deg,#fff 0%,#a0aab5 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:3rem;font-weight:800;line-height:1.2}.badge{border-radius:20px;padding:4px 10px;font-size:.75rem;font-weight:600;display:inline-block}.badge.gold{color:var(--accent-gold);background:#d2b48c1a;border:1px solid #d2b48c33}.badge.blue{color:var(--accent-blue);background:#58a6ff1a;border:1px solid #58a6ff33}.badge.gray{color:var(--text-secondary);background:#848d971a;border:1px solid #848d9733}.badge.red{color:var(--accent-red);background:#d73a491a;border:1px solid #d73a4933}.badge.green{color:#2ea043;background:#2ea0431a;border:1px solid #2ea04333}.progress-container{background:#ffffff0d;border-radius:4px;width:100%;height:8px;margin-top:8px;overflow:hidden}.progress-bar{border-radius:4px;height:100%;transition:width .5s ease-out}.timeline{margin-top:20px;padding-left:30px;position:relative}.timeline:before{content:"";background:var(--panel-border);width:2px;position:absolute;top:0;bottom:0;left:11px}.timeline-item{margin-bottom:30px;position:relative}.timeline-dot{background:var(--bg-color);border:2px solid var(--accent-gold);z-index:1;border-radius:50%;width:12px;height:12px;position:absolute;top:4px;left:-30px}.timeline-date{color:var(--text-secondary);margin-bottom:8px;font-size:.8rem;font-weight:500}.brand{letter-spacing:-.02em;align-items:center;gap:12px;margin-bottom:40px;font-size:1.5rem;font-weight:800;display:flex}.nav-item{color:var(--text-secondary);cursor:pointer;border-radius:8px;align-items:center;gap:12px;margin-bottom:8px;padding:12px 16px;font-weight:500;text-decoration:none;transition:all .2s;display:flex}.nav-item:hover,.nav-item.active{color:var(--text-primary);background:#ffffff0d}.nav-item.active{color:var(--accent-gold);background:#d2b48c1a}.list-item{border-bottom:1px solid var(--panel-border);justify-content:space-between;align-items:center;padding:12px 0;display:flex}.list-item:last-child{border-bottom:none}.item-title{font-size:.95rem;font-weight:500}.item-desc{color:var(--text-secondary);margin-top:4px;font-size:.8rem}.flex-center{justify-content:center;align-items:center;display:flex}.loader{border:3px solid #ffffff1a;border-top:3px solid var(--accent-gold);border-radius:50%;width:40px;height:40px;animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}