:root{--surface-base:#0a0a0b;--surface-raised:#ffffff0a;--surface-card:#ffffff0f;--surface-card-hover:#ffffff17;--surface-overlay:#ffffff14;--border-subtle:#ffffff14;--border-default:#ffffff1f;--border-focus:#00ffc266;--text-primary:#fff;--text-secondary:#a0a0a0;--text-muted:#666;--text-inverse:#0a0a0b;--accent-green:#00ffc2;--accent-green-dim:#00ffc2b3;--accent-green-glow:#00ffc226;--accent-red:#ff4d4d;--accent-red-glow:#ff4d4d26;--accent-purple:#7d5fff;--accent-purple-glow:#7d5fff26;--accent-amber:#f59e0b;--accent-gradient:linear-gradient(135deg, #00ffc2 0%, #7d5fff 100%);--font-heading:"Syne", "SF Pro Display", "PingFang SC", sans-serif;--font-body:"Manrope", "PingFang SC", "Hiragino Sans GB", sans-serif;--font-mono:"JetBrains Mono", "SF Mono", "Menlo", monospace;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--radius-sm:8px;--radius-md:16px;--radius-lg:24px;--radius-xl:28px;--radius-pill:999px;--shadow-card:0 4px 24px #0006;--shadow-elevated:0 8px 40px #0009;--shadow-glow-green:0 0 20px #00ffc233;--shadow-glow-purple:0 0 20px #7d5fff33;--transition-fast:.12s ease;--transition-default:.2s ease;--transition-slow:.4s ease}*,:before,:after{box-sizing:border-box}html{min-height:100%}body{min-height:100vh;color:var(--text-primary);background:var(--surface-base);font-family:var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{min-height:100vh}body{min-width:320px;min-height:100vh;margin:0}button{font:inherit}h1,h2,h3{font-family:var(--font-heading)}code{font-family:var(--font-mono);border-radius:var(--radius-sm);background:var(--surface-overlay);padding:2px 6px;font-size:.85em}.app-shell{max-width:1080px;margin:0 auto;padding:56px 24px 80px}.hero-panel{border:1px solid var(--border-subtle);border-radius:var(--radius-xl);background:var(--surface-card);box-shadow:var(--shadow-elevated);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);padding:40px}.eyebrow{margin:0 0 var(--space-md);color:var(--accent-green-dim);letter-spacing:.1em;text-transform:uppercase;font-size:.85rem;font-weight:700}.hero-panel h1{background:var(--accent-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:0;font-size:clamp(2.2rem,4vw,4.4rem);line-height:1.05}.hero-copy{max-width:760px;color:var(--text-secondary);margin:20px 0 0;font-size:1.05rem;line-height:1.75}.hero-actions{flex-wrap:wrap;gap:14px;margin-top:28px;display:flex}.primary-action,.secondary-action{border-radius:var(--radius-pill);cursor:pointer;transition:transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);border:none;justify-content:center;align-items:center;padding:14px 22px;font-weight:600;text-decoration:none;display:inline-flex}.primary-action{background:var(--accent-gradient);color:var(--text-inverse);box-shadow:var(--shadow-glow-green)}.secondary-action{background:var(--surface-overlay);color:var(--text-primary);border:1px solid var(--border-default)}.primary-action:hover,.secondary-action:hover{transform:translateY(-1px)}.primary-action:hover{box-shadow:var(--shadow-glow-green), var(--shadow-elevated)}.secondary-action:hover{background:var(--surface-card-hover);border-color:var(--border-focus)}.launch-grid{grid-template-columns:1fr;gap:20px;margin-top:28px;display:grid}.bento-grid{gap:var(--space-lg);grid-template-columns:1fr;display:grid}.roadmap-card{border-radius:var(--radius-lg);background:var(--surface-card);border:1px solid var(--border-subtle);box-shadow:var(--shadow-card);margin-top:20px;padding:28px}.info-card{border-radius:var(--radius-lg);background:var(--surface-card);border:1px solid var(--border-subtle);box-shadow:var(--shadow-card);transition:border-color var(--transition-default), box-shadow var(--transition-default);padding:28px}.info-card:hover{border-color:var(--border-default)}.info-card h2{margin:0 0 var(--space-md);color:var(--text-primary);font-size:1.25rem}.info-card ul{color:var(--text-secondary);margin:0;padding-left:20px;line-height:1.8}.page-header{margin-bottom:var(--space-lg);justify-content:space-between;align-items:flex-start;gap:20px;display:flex}.page-header h1{background:var(--accent-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.protocol-shell{padding-top:40px}.protocol-grid{grid-template-columns:1fr;gap:20px;display:grid}.status-pill{border-radius:var(--radius-pill);background:var(--accent-green-glow);min-height:36px;color:var(--accent-green);align-items:center;padding:0 14px;font-weight:600;display:inline-flex}.inline-action{margin-top:var(--space-md)}.log-list{color:var(--text-secondary);margin:0;padding-left:20px;line-height:1.8}.log-item-info{color:var(--accent-green-dim)}.log-item-error,.error-copy{color:var(--accent-red)}.service-tree{gap:14px;display:grid}.service-block{padding:var(--space-md);border-radius:var(--radius-md);background:var(--surface-raised);border:1px solid var(--border-subtle)}.service-block h3{color:var(--text-primary);word-break:break-all;margin:0 0 10px;font-size:.98rem}.service-block li,.history-item{gap:var(--space-xs);margin-bottom:10px;display:grid}.course-phase-list{gap:14px;display:grid}.lesson-grid{grid-template-columns:1fr;gap:14px;display:grid}.lesson-card{border-radius:var(--radius-md);background:var(--surface-raised);border:1px solid var(--border-subtle);transition:border-color var(--transition-default);padding:18px}.lesson-card:hover{border-color:var(--border-default)}.lesson-card-completed{background:#00ffc20f;border-color:#00ffc226}.lesson-day{margin:0 0 var(--space-sm);color:var(--accent-green-dim);font-weight:700}.lesson-card h3{margin:0 0 var(--space-sm);color:var(--text-primary)}.progress-copy{color:var(--text-primary);margin:10px 0 0;font-size:1.3rem;font-weight:700}.form-stack{gap:14px;display:grid}.example-actions{flex-wrap:wrap;gap:10px;display:flex}.example-action{padding:10px 14px}.field-block{gap:var(--space-sm);color:var(--text-primary);font-weight:600;display:grid}.field-block select,.field-block input{border-radius:var(--radius-md);border:1px solid var(--border-default);background:var(--surface-raised);width:100%;color:var(--text-primary);font-family:var(--font-body);padding:12px 14px}.field-block select:focus,.field-block input:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px var(--accent-green-glow);outline:none}.field-block select:disabled,.field-block input:disabled,.primary-action:disabled{cursor:not-allowed;opacity:.4}.muted-copy{color:var(--text-muted);font-size:.92rem}.history-list{padding:0;list-style:none}.beat-guide{margin-top:var(--space-md);grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;display:grid}.beat-pulse-track{border-radius:var(--radius-pill);background:var(--surface-overlay);width:100%;height:10px;margin:14px 0 12px;overflow:hidden}.beat-pulse-fill{border-radius:inherit;background:var(--accent-gradient);height:100%;transition:width var(--transition-fast) linear, background-color var(--transition-fast) linear}.beat-pulse-fill-overdue{background:linear-gradient(135deg, var(--accent-amber) 0%, var(--accent-red) 100%)}.beat-guide-step{border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:var(--surface-raised);gap:6px;padding:14px;display:grid}.beat-guide-step strong{color:var(--text-primary)}.beat-guide-step-current{background:var(--accent-purple-glow);border-color:#7d5fff4d}.beat-guide-step-completed{background:var(--accent-green-glow);border-color:#00ffc233}.card-wide{grid-column:span 1}.card-tall{grid-row:span 1}.card-hero{grid-column:1/-1}.home-hero{margin-bottom:var(--space-2xl);background:radial-gradient(circle at top right, #7d5fff1a, transparent 50%), var(--surface-card);flex-direction:column;align-items:flex-start;display:flex}.home-connection-status{margin-top:var(--space-xl);width:100%;max-width:480px}.home-status-card{background:var(--surface-overlay);border:1px solid var(--border-default);border-radius:var(--radius-lg);transition:all var(--transition-default);justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.home-connected{background:var(--accent-green-glow);border-color:#00ffc24d}.home-status-left{align-items:center;display:flex}.home-status-indicator{background:var(--accent-green);width:10px;height:10px;box-shadow:0 0 10px var(--accent-green);border-radius:50%;flex-shrink:0;margin-right:16px}.home-status-info{flex-direction:column;flex-grow:1;gap:4px;display:flex}.home-status-label{color:var(--text-secondary);font-size:.85rem}.home-status-device{color:var(--text-primary);font-size:1.1rem;font-weight:600}.home-bento{margin-bottom:var(--space-2xl)}.home-primary-card{background:linear-gradient(145deg, #00ffc20d 0%, #7d5fff0d 100%), var(--surface-card);border-color:#00ffc233;flex-direction:column;justify-content:space-between;min-height:240px;text-decoration:none;display:flex}.home-primary-card:hover{border-color:var(--accent-green);box-shadow:var(--shadow-glow-green), var(--shadow-card);transform:translateY(-2px)}.home-primary-card h2{margin:0 0 var(--space-sm);background:var(--accent-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:clamp(1.8rem,3vw,2.2rem)}.home-primary-card .muted-copy{max-width:80%;margin:0;font-size:1.1rem}.home-card-action{margin-top:var(--space-lg);color:var(--accent-green);align-self:flex-end;font-size:1.1rem;font-weight:700}.home-secondary-card,.home-tertiary-card{flex-direction:column;min-height:180px;text-decoration:none;display:flex}.home-secondary-card:hover,.home-tertiary-card:hover{border-color:var(--border-focus);transform:translateY(-2px)}.home-card-content{flex-direction:column;gap:4px;display:flex}.home-card-content h2{margin:0}.home-features{margin-top:0}.protocol-group{margin-top:32px;margin-bottom:48px}.protocol-group-title{color:var(--text-primary);border-bottom:1px solid var(--border-subtle);margin-bottom:24px;padding-bottom:12px;font-size:1.5rem}.protocol-hero-group{margin-top:0}.protocol-status-card{background:linear-gradient(145deg, #00ffc20d 0%, #7d5fff0d 100%), var(--surface-card);border-color:#00ffc233}.protocol-status-header{flex-direction:column;gap:16px;margin-bottom:20px;display:flex}.protocol-status-meta{flex-direction:column;gap:8px;display:flex}.protocol-advanced-details{background:var(--surface-overlay);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:24px}.protocol-advanced-details summary{cursor:pointer;color:var(--text-primary);margin:-24px;padding:24px;font-size:1.25rem;font-weight:600;list-style:none}.protocol-advanced-details summary::-webkit-details-marker{display:none}.protocol-advanced-details summary:after{content:" ▼";opacity:.6;font-size:.9em}.protocol-advanced-details[open] summary:after{content:" ▲"}.protocol-advanced-details summary:hover{color:var(--accent-green)}.protocol-advanced-details[open] summary{border-bottom:1px solid var(--border-subtle);margin-bottom:20px}.protocol-activity-grid{grid-template-columns:1fr;gap:20px;display:grid}.course-header{margin-bottom:var(--space-xl);padding-bottom:var(--space-lg);border-bottom:1px solid var(--border-subtle)}.course-dashboard{margin-bottom:var(--space-xl)}.course-stat-card{border-radius:var(--radius-lg);background:var(--surface-card);border:1px solid var(--border-subtle);gap:var(--space-sm);transition:transform var(--transition-default), box-shadow var(--transition-default);flex-direction:column;padding:24px;display:flex}.course-stat-card:hover{box-shadow:var(--shadow-card);border-color:var(--border-default);transform:translateY(-2px)}.course-stat-label{color:var(--text-secondary);letter-spacing:.05em;font-size:.85rem;font-weight:700}.course-stat-value{font-size:2.2rem;font-weight:700;font-family:var(--font-heading);color:var(--text-primary);margin:4px 0;line-height:1.1}.course-stat-value.highlight{background:var(--accent-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.course-stat-subtext{color:var(--text-muted);margin:0;font-size:.85rem}.course-hero-card{margin-bottom:var(--space-2xl);background:linear-gradient(145deg, #00ffc214 0%, var(--surface-card) 100%);border-radius:var(--radius-lg);box-shadow:var(--shadow-elevated), inset 0 1px 0 #ffffff1a;align-items:flex-start;gap:var(--space-md);border:1px solid #00ffc233;flex-direction:column;padding:32px;display:flex;position:relative;overflow:hidden}.course-hero-card:before{content:"";background:var(--accent-gradient);width:100%;height:3px;position:absolute;top:0;left:0}.course-hero-card h2{margin:0;font-size:1.8rem}.course-hero-card p{color:var(--text-secondary);max-width:600px;margin:0;font-size:1.05rem;line-height:1.6}.course-section-title{margin:0 0 var(--space-lg);color:var(--text-primary);align-items:center;gap:var(--space-sm);font-size:1.4rem;display:flex}.course-phases-section,.course-lessons-section{margin-bottom:var(--space-2xl)}.course-phase-grid{gap:var(--space-md);grid-template-columns:1fr;display:grid}.course-lesson-locked{opacity:.6;border-style:dashed;border-color:var(--border-subtle);background:0 0}.course-lesson-locked:hover{opacity:.8;border-color:var(--border-default)}.course-activity-section{margin-top:var(--space-xl);padding-top:var(--space-xl);border-top:1px solid var(--border-subtle);gap:var(--space-xl);display:grid}.practice-grid{gap:var(--space-lg);margin-top:var(--space-lg);grid-template-columns:1fr;display:grid}.practice-hub{text-align:center;padding:var(--space-2xl) var(--space-xl);background:radial-gradient(circle at center, #00ffc214, transparent 70%), var(--surface-card);border:1px solid var(--border-focus);border-radius:var(--radius-xl);box-shadow:var(--shadow-elevated), var(--shadow-glow-green);flex-direction:column;grid-column:1/-1;align-items:center;display:flex}.practice-hub-header{justify-content:center;align-items:center;gap:var(--space-md);margin-bottom:var(--space-xl);flex-wrap:wrap;display:flex}.practice-target-note{background:var(--accent-gradient);-webkit-text-fill-color:transparent;margin:var(--space-lg) 0;filter:drop-shadow(0 0 20px #00ffc24d);-webkit-background-clip:text;background-clip:text;font-size:clamp(4rem,8vw,6rem);font-weight:800;line-height:1}.practice-feedback{color:var(--text-primary);margin-bottom:var(--space-xl);max-width:600px;font-size:1.25rem}.practice-progress{color:var(--text-secondary);margin-bottom:var(--space-md);font-size:1.5rem;font-weight:700}.practice-actions{gap:var(--space-md);flex-wrap:wrap;justify-content:center;display:flex}.practice-beat-guidance{background:linear-gradient(180deg, var(--surface-card) 0%, #ffffff05 100%);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-xl);grid-column:1/-1}.practice-beat-header{margin-bottom:var(--space-md);justify-content:space-between;align-items:center;gap:var(--space-md);flex-wrap:wrap;display:flex}.practice-lesson-info{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-xl)}.practice-lesson-details{gap:var(--space-sm);margin-top:var(--space-md);display:grid}.practice-activity-grid{gap:var(--space-md);grid-column:1/-1;grid-template-columns:1fr;display:grid}@media (width>=600px){.practice-grid,.practice-activity-grid,.launch-grid,.protocol-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bento-grid{grid-template-columns:repeat(2,1fr)}.card-wide{grid-column:span 2}.lesson-grid,.protocol-activity-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.protocol-status-header{flex-direction:row;align-items:center}.protocol-status-meta{flex-direction:row}}@media (width>=900px){.practice-grid{grid-template-columns:repeat(3,1fr)}.practice-lesson-info{grid-column:span 1}.practice-activity-grid{grid-template-columns:repeat(2,1fr)}.bento-grid{grid-template-columns:repeat(3,1fr)}.card-tall{grid-row:span 2}}@media (width>=1200px){.practice-activity-grid,.bento-grid{grid-template-columns:repeat(4,1fr)}}@media (width<=599px){.app-shell{padding:28px 16px 48px}.hero-panel{padding:28px 20px}.page-header{flex-direction:column}}