.spaced-repetition-demo{max-width:100%;padding:40px 24px;background:transparent;border-radius:12px}.demo-content{display:flex;flex-direction:column;gap:24px;max-width:1200px;margin:0 auto}.problem-section-wrapper{width:100%}.section-badge{margin-bottom:8px;font-size:11px;font-weight:600;padding-left:8px;text-transform:uppercase;letter-spacing:2.5px}.problem-section{padding:16px;border-radius:8px;background:transparent}.section-content{display:flex;flex-direction:column;align-items:center}.section-spacing{margin-top:40px}.section-title{margin-bottom:12px;font-size:13px;font-weight:600;color:#e5e7eb;text-align:center;text-transform:uppercase;letter-spacing:.5px}.problems-grid-wrapper{position:relative;width:-moz-fit-content;width:fit-content}.problems-grid{display:grid;grid-template-columns:32px repeat(3,160px) 32px;gap:12px;justify-content:flex-start}.vertical-button{height:200px;width:100%;min-height:200px;display:flex;align-items:center;justify-content:center;background:#1a1a1a;color:#9ca3af;border:1px solid #333;border-radius:12px;font-size:14px;font-weight:600;letter-spacing:2px;text-transform:uppercase;writing-mode:vertical-rl;box-shadow:0 2px 8px rgba(0,0,0,.08)}.more-button{border:1px dashed #333;opacity:.5}.problem-card{background:transparent;border:1px solid #333;border-radius:12px;padding:16px;text-align:center;height:100%;display:flex;flex-direction:column;align-items:center}.circular-progress{transform:rotate(-90deg)}.progress-wrapper{display:flex;justify-content:center;position:relative;margin-bottom:10px}.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center}.quality-value{font-size:18px;font-weight:700}.quality-label{font-size:8px;color:#6b7280}.problem-title{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e5e7eb;width:100%}.difficulty-badge,.problem-title{font-weight:600;margin-bottom:6px}.difficulty-badge{display:inline-block;padding:2px 6px;border-radius:4px;font-size:9px;color:#fff;text-transform:capitalize}.problem-stats{display:flex;justify-content:space-between;font-size:10px;color:#9ca3af;margin-top:6px;width:100%}.section-summary{margin-top:12px;padding:8px;text-align:center;font-size:11px;color:#9ca3af;width:100%}.progress-tracking-demo{max-width:100%;padding:0}.progress-row{display:flex;gap:48px;margin-bottom:24px;align-items:flex-start}.progress-row.single{margin-bottom:0}.progress-col{flex:1;display:flex;flex-direction:column;align-items:center}.progress-col.full{flex:1 1 100%}.progress-title{margin-bottom:12px;font-size:13px;font-weight:600;color:#9ca3af;text-align:center;text-transform:uppercase;letter-spacing:.5px}.streak-heatmap-container{display:flex;flex-direction:row;align-items:flex-start;justify-content:center;gap:24px;padding:0 16px}.streak-left-panel{display:flex;flex-direction:column;align-items:center;gap:12px}.freeze-circle,.today-circle{position:relative;width:64px;height:64px}.freeze-circle-content,.today-circle-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.freeze-value,.today-value{font-size:16px;font-weight:700}.freeze-label,.today-label{font-size:7px;color:#6b7280;margin-top:1px}.freeze-reset,.today-timer{font-size:8px;color:#6b7280;text-align:center;margin-top:-6px}.freeze-icon{font-size:20px;margin-top:-4px;cursor:pointer;opacity:.6;transition:all .3s ease}.freeze-icon:hover{opacity:1;transform:scale(1.2)}.streak-center-panel{display:flex;flex-direction:column;align-items:center;gap:16px}.circular-progress-container{display:flex;justify-content:center;align-items:center}.difficulty-progress{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;padding:0 16px}.difficulty-bar-unified{display:flex;height:24px;border-radius:12px;margin-bottom:16px;overflow:hidden;position:relative;width:100%}.difficulty-segment{position:relative;overflow:hidden;transition:all .2s}.difficulty-segment-fill{position:absolute;left:0;top:0;height:100%;background-size:28px 28px;transition:width .5s ease}.difficulty-stats-legend{display:flex;gap:32px;align-items:center;min-height:70px}.difficulty-stat-box{text-align:center}.difficulty-stat-value{font-size:32px;font-weight:700;line-height:1}.difficulty-stat-label{font-size:10px;color:#6b7280;margin-top:4px;text-transform:uppercase;letter-spacing:1px}.difficulty-stat-divider{width:1px;height:30px;background:#333}@media (max-width:768px){.progress-row{flex-direction:column;gap:24px}.streak-heatmap-container{flex-direction:column;gap:16px}.streak-grid{grid-template-columns:repeat(10,1fr)!important}}