:root{--accent: #ff6b4a;--purple: #a78bfa;--yellow: #fbbf24;--green: #22c55e;--bg-primary: #0d0d0f;--bg-card: #1a1a1f;--bg-card-hover: #222228;--bg-elevated: #26262c;--border-subtle: rgba(255, 255, 255, .08);--border-medium: rgba(255, 255, 255, .15);--text-primary: #ffffff;--text-muted: #a1a1aa;--text-dim: #52525b;--text-secondary: #c4c4cc;--accent-8: rgba(255, 107, 74, .08);--accent-15: rgba(255, 107, 74, .15);--accent-30: rgba(255, 107, 74, .3);--success: var(--green);--success-bg: rgba(34, 197, 94, .1);--success-border: rgba(34, 197, 94, .3);--warning: var(--yellow);--warning-bg: rgba(251, 191, 36, .1);--warning-border: rgba(251, 191, 36, .3);--danger: #ef4444;--danger-bg: rgba(239, 68, 68, .1);--danger-border: rgba(239, 68, 68, .3);--info: var(--purple);--info-bg: rgba(167, 139, 250, .1);--info-border: rgba(167, 139, 250, .3);--accent-light: #ff8f73;--accent-5: rgba(255, 107, 74, .05);--progress-1: var(--accent);--progress-2: var(--purple);--progress-3: var(--yellow);--progress-4: var(--green);--progress-5: #3b82f6;--progress-6: #14b8a6;--progress-track: rgba(255, 255, 255, .08);--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;--space-xl: 20px;--space-2xl: 24px;--space-3xl: 32px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--radius-pill: 28px;--radius-full: 9999px;--shadow-card: 0 2px 8px rgba(0, 0, 0, .3);--shadow-elevated: 0 4px 16px rgba(0, 0, 0, .4);--shadow-button: 0 4px 16px rgba(255, 107, 74, .3);--shadow-button-hover: 0 6px 20px rgba(255, 107, 74, .4);--shadow-button-active: 0 2px 8px rgba(255, 107, 74, .2);--shadow-tabbar: 0 -1px 8px rgba(0, 0, 0, .3);--screen-padding: 20px;--header-height: 56px;--tabbar-height: 64px;--cta-height: 56px}.h-xl{font-size:clamp(32px,8vw,48px);font-weight:800;line-height:1.1;color:var(--text-primary)}.h-lg{font-size:clamp(26px,6vw,38px);font-weight:800;line-height:1.15;color:var(--text-primary)}.h-md{font-size:clamp(22px,5vw,28px);font-weight:700;line-height:1.2;color:var(--text-primary)}.h-sm{font-size:clamp(18px,4.5vw,22px);font-weight:700;line-height:1.3;color:var(--text-primary)}.h-xs{font-size:17px;font-weight:600;line-height:1.3;color:var(--text-primary)}.t-body-lg{font-size:18px;font-weight:400;line-height:1.5}.t-body{font-size:16px;font-weight:400;line-height:1.5}.t-small{font-size:14px;font-weight:400;line-height:1.4}.t-label{font-size:13px;font-weight:600;line-height:1.3;letter-spacing:.5px;text-transform:uppercase;color:var(--text-dim)}.c-accent{color:var(--accent)}.c-purple{color:var(--purple)}.c-yellow{color:var(--yellow)}.c-green{color:var(--green)}.c-white{color:var(--text-primary)}.c-muted{color:var(--text-muted)}.c-dim{color:var(--text-dim)}.animate-progress{transition:width .8s ease-out}.animate-select{transition:border-color .2s ease,background-color .2s ease}.animate-press:active{transform:scale(.98);transition:transform .1s ease}.animate-fade-up{animation:fadeUp .3s ease-out forwards}@keyframes fadeUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.animate-sheet-enter{animation:sheetEnter .3s ease-out forwards}.animate-sheet-exit{animation:sheetExit .2s ease-in forwards}@keyframes sheetEnter{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes sheetExit{0%{transform:translateY(0)}to{transform:translateY(100%)}}.animate-stroke{animation:strokeFill .8s ease-out forwards}@keyframes strokeFill{0%{stroke-dashoffset:var(--stroke-total)}to{stroke-dashoffset:var(--stroke-target)}}.animate-slide-in{animation:slideIn .25s ease forwards}@keyframes slideIn{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.dragging{transform:scale(1.03);box-shadow:0 8px 24px #0006;opacity:.9;transition:transform .15s ease,box-shadow .15s ease}@keyframes countUp{0%{opacity:0}to{opacity:1}}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;width:100%;overflow:hidden}body{font-family:Inter,-apple-system,SF Pro Display,sans-serif;font-size:16px;font-weight:400;line-height:1.5;color:var(--text-primary);background:var(--bg-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}#root{display:flex;flex-direction:column;max-width:480px;margin:0 auto}@media(max-width:360px){:root{--screen-padding: 16px;--space-xl: 16px;--space-2xl: 20px;--space-3xl: 28px}}a{color:var(--accent);text-decoration:none}button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit}input,textarea{font-family:inherit;color:var(--text-primary);background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:var(--space-md) var(--space-lg);outline:none}input:focus,textarea:focus{border-color:var(--border-medium)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}::-webkit-scrollbar{width:0;height:0}.safe-bottom{padding-bottom:env(safe-area-inset-bottom,0px)}.tab-bar{display:flex;align-items:center;justify-content:space-around;height:var(--tabbar-height);padding-bottom:env(safe-area-inset-bottom,0px);background:var(--bg-card);border-top:1px solid var(--border-subtle);box-shadow:var(--shadow-tabbar);flex-shrink:0}.tab-bar__item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-xs);flex:1;height:100%;color:var(--text-dim);text-decoration:none}.tab-bar__item:active{opacity:.7}.tab-bar__item--active{color:var(--accent)}.tab-bar__icon{display:flex;width:24px;height:24px}.tab-bar__label{font-size:12px;font-weight:500}.tab-layout{display:flex;flex-direction:column;height:100%;width:100%}.tab-layout__content{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}.greeting-header{display:flex;justify-content:space-between;align-items:flex-start;padding:var(--space-lg) var(--screen-padding) var(--space-2xl)}.greeting-header__text{display:flex;flex-direction:column;gap:var(--space-xs)}.greeting-header__avatar{width:40px;height:40px;border-radius:var(--radius-full);background:var(--bg-card);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}.greeting-header__avatar img{width:100%;height:100%;object-fit:cover}.hero-card{background:linear-gradient(135deg,var(--bg-card) 0%,var(--bg-elevated) 100%);border-radius:var(--radius-xl);padding:var(--space-2xl);position:relative;overflow:hidden}.circular-progress{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm)}.circular-progress__svg{width:min(180px,44vw);height:min(180px,44vw);transform:rotate(-90deg)}.circular-progress__track{fill:none;stroke:var(--progress-track);stroke-width:12}.circular-progress__fill{fill:none;stroke-width:12;stroke-linecap:round;will-change:stroke-dashoffset}.circular-progress__value{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(28px,8vw,40px);font-weight:700;color:var(--text-primary)}.circular-progress__wrapper{position:relative;width:min(180px,44vw);height:min(180px,44vw)}.circular-progress__label{font-size:14px;font-weight:500;color:var(--text-muted);text-align:center}@keyframes circular-progress-appear{0%{stroke-dashoffset:var(--circumference)}}.circular-progress__fill--animate{animation:circular-progress-appear .8s cubic-bezier(.4,0,.2,1) forwards}.readiness-card{display:flex;justify-content:center}.quick-start-banner{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--space-xl) var(--space-2xl);background:linear-gradient(135deg,var(--accent),var(--accent-light));border-radius:var(--radius-xl);text-align:left}.quick-start-banner:active{opacity:.9;transform:scale(.98)}.quick-start-banner__text{display:flex;flex-direction:column;gap:var(--space-sm)}.quick-start-banner__badge{display:inline-block;padding:var(--space-xs) var(--space-md);background:#0000004d;border-radius:var(--radius-pill);color:#fff;font-size:14px;font-weight:400;width:fit-content}.quick-start-banner__play{width:48px;height:48px;border-radius:var(--radius-full);background:#ffffff40;display:flex;align-items:center;justify-content:center;flex-shrink:0}.progress-bar{width:100%;height:6px;background-color:var(--progress-track);border-radius:var(--radius-full);overflow:hidden}.progress-bar__fill{height:100%;border-radius:var(--radius-full);transition:width .6s cubic-bezier(.4,0,.2,1);will-change:width}.skill-row{padding:var(--space-lg) 0}.skill-row--clickable{cursor:pointer}.skill-row--clickable:hover .skill-row__name{color:var(--accent)}.skill-row__top{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-sm)}.skill-row__icon{width:36px;height:36px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;flex-shrink:0}.skill-row__name{flex:1;transition:color .2s ease}.skill-row__score{flex-shrink:0}.skill-row__trend{flex-shrink:0;min-width:20px;text-align:right}.skill-row__bar{padding-left:48px}.card{background-color:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-xl);box-shadow:var(--shadow-card);transition:background-color .2s,transform .1s}.card--clickable{cursor:pointer;-webkit-tap-highlight-color:transparent}.card--clickable:hover{background-color:var(--bg-card-hover)}.card--clickable:active{transform:scale(.98)}.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md)}.stat-card{background-color:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-xs)}.stat-card__header{display:flex;align-items:center;gap:var(--space-sm)}.stat-card__icon{display:flex;align-items:center;justify-content:center;color:var(--text-muted);flex-shrink:0}.stat-card__label{font-size:12px;font-weight:500;color:var(--text-muted);letter-spacing:.02em;text-transform:uppercase;line-height:1.2}.stat-card__value{font-size:28px;font-weight:700;color:var(--text-primary);line-height:1.1}.stat-card__trend{display:inline-flex;align-items:center;gap:2px;font-size:12px;font-weight:600;line-height:1;margin-top:var(--space-xs)}.stat-card__trend--up{color:var(--green)}.stat-card__trend--down{color:var(--danger)}.stat-card__trend--neutral{color:var(--text-muted)}.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);width:100%;height:var(--cta-height);padding:0 var(--space-2xl);border:none;border-radius:var(--radius-pill);font-family:inherit;font-size:18px;font-weight:700;line-height:1;cursor:pointer;transition:background-color .2s,box-shadow .2s,transform .1s,opacity .2s;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;min-height:44px;position:relative;overflow:hidden}.button--primary{background-color:var(--accent);color:var(--text-primary);box-shadow:var(--shadow-button)}.button--primary:hover{box-shadow:var(--shadow-button-hover);filter:brightness(1.08)}.button--primary:active{transform:scale(.97);box-shadow:var(--shadow-button-active);filter:brightness(.95)}.button--ghost{background-color:transparent;color:var(--accent);border:1.5px solid var(--accent)}.button--ghost:hover{background-color:var(--accent-8)}.button--ghost:active{background-color:var(--accent-15);transform:scale(.97)}.button--text{background-color:transparent;color:var(--accent);width:auto;height:auto;min-height:44px;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm)}.button--text:hover{background-color:var(--accent-8)}.button--text:active{background-color:var(--accent-15)}.button--disabled{cursor:not-allowed;pointer-events:none}.button--primary.button--disabled{background-color:var(--text-dim);color:var(--text-muted);box-shadow:none}.button--ghost.button--disabled,.button--text.button--disabled{opacity:.5}.button--loading{cursor:wait;pointer-events:none}.button__spinner{width:20px;height:20px;border:2.5px solid rgba(255,255,255,.3);border-top-color:var(--text-primary);border-radius:var(--radius-full);animation:button-spin .6s linear infinite}.button--ghost .button__spinner{border-color:var(--accent-30);border-top-color:var(--accent)}.button--text .button__spinner{border-color:var(--accent-30);border-top-color:var(--accent);width:16px;height:16px}.button__content{display:inline-flex;align-items:center;gap:var(--space-sm)}.button__content--hidden{visibility:hidden}.button__spinner-wrapper{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.button__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}@keyframes button-spin{to{transform:rotate(360deg)}}.skeleton{background:var(--bg-card);border-radius:var(--radius-sm);animation:skeleton-pulse 1.5s ease-in-out infinite}@keyframes skeleton-pulse{0%,to{opacity:.4}50%{opacity:.15}}.skeleton-card{background:var(--bg-card);border-radius:var(--radius-md);border:1px solid var(--border-subtle);padding:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-md)}.skeleton-text{display:flex;flex-direction:column;gap:var(--space-sm)}.home-page{padding-bottom:var(--space-3xl)}.home-page__content{padding:0 var(--screen-padding);display:flex;flex-direction:column;gap:var(--space-2xl)}.home-page__section{display:flex;flex-direction:column;gap:var(--space-md)}.home-page__intro-block{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:var(--space-xl)}.home-page__how-steps{display:flex;flex-direction:column;gap:var(--space-md);margin-top:var(--space-lg);padding-top:var(--space-lg);border-top:1px solid var(--border-subtle)}.home-page__how-step{display:flex;align-items:flex-start;gap:var(--space-md)}.home-page__how-num{width:28px;height:28px;border-radius:var(--radius-full);background:var(--accent);color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}.home-page__how-step .t-body{color:var(--text-secondary);line-height:1.5;padding-top:3px}.home-page__demo-cta{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--space-xl) var(--space-xl);background:linear-gradient(135deg,var(--accent),var(--accent-light));border-radius:var(--radius-xl);text-align:left;gap:var(--space-md)}.home-page__demo-cta:active{opacity:.9;transform:scale(.98)}.home-page__demo-arrow{width:40px;height:40px;border-radius:var(--radius-full);background:#fff3;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff}.home-page__tip{border-left:3px solid var(--purple)}.module-progress{display:flex;flex-direction:column;gap:var(--space-sm);padding:var(--space-lg) 0;width:100%;text-align:left;border-bottom:1px solid var(--border-subtle)}.module-progress:last-child{border-bottom:none}.module-progress:active{opacity:.7}.module-progress__head{display:flex;align-items:center;gap:var(--space-md)}.module-progress__icon{font-size:24px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.module-progress__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-2xl);text-align:center}.empty-state__icon{font-size:48px;line-height:1;margin-bottom:var(--space-sm)}.training-page{padding-bottom:var(--space-3xl)}.training-page__header{padding:var(--space-lg) var(--screen-padding) var(--space-2xl);display:flex;flex-direction:column;gap:var(--space-xs)}.training-page__content{padding:0 var(--screen-padding);display:flex;flex-direction:column;gap:var(--space-md)}.training-page__module{cursor:pointer;display:flex;flex-direction:column;gap:var(--space-md);overflow:hidden}.training-page__module:hover{border-color:var(--border-medium);background:var(--bg-card-hover)}.training-page__module:active{transform:scale(.98)}.training-page__module-head{display:flex;align-items:flex-start;gap:var(--space-md)}.training-page__module-icon{font-size:28px;flex-shrink:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--bg-elevated);border-radius:var(--radius-md)}.training-page__module-title{display:flex;flex-direction:column;gap:var(--space-xs);min-width:0}.training-page__module-title .h-sm,.training-page__module .t-body{word-break:break-word;overflow-wrap:break-word}.week-chart{display:flex;align-items:flex-end;gap:var(--space-sm);height:64px}.week-chart__day{display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);flex:1}.week-chart__bar-track{width:8px;height:40px;background-color:var(--progress-track);border-radius:var(--radius-full);display:flex;align-items:flex-end;overflow:hidden}.week-chart__bar-fill{width:100%;border-radius:var(--radius-full);transition:height .4s cubic-bezier(.4,0,.2,1);will-change:height}.week-chart__bar-fill--active{background-color:var(--accent)}.week-chart__bar-fill--inactive{background-color:var(--progress-track)}.week-chart__label{font-size:12px;font-weight:500;color:var(--text-dim);line-height:1}.analytics-page{padding-bottom:var(--space-3xl)}.analytics-page__header{padding:var(--space-lg) var(--screen-padding) var(--space-2xl);display:flex;flex-direction:column;gap:var(--space-xs)}.analytics-page__content{padding:0 var(--screen-padding);display:flex;flex-direction:column;gap:var(--space-2xl)}.analytics-page__section{display:flex;flex-direction:column;gap:var(--space-md)}.profile-page{padding-bottom:var(--space-3xl)}.profile-page__header{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);padding:var(--space-3xl) var(--screen-padding) var(--space-2xl)}.profile-page__avatar{width:80px;height:80px;border-radius:var(--radius-full);background:var(--bg-card);display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:var(--space-sm)}.profile-page__avatar img{width:100%;height:100%;object-fit:cover}.profile-page__content{padding:0 var(--screen-padding)}.profile-page__section{display:flex;flex-direction:column;gap:var(--space-md)}.screen-shell{display:flex;flex-direction:column;height:100%;width:100%;background:var(--bg-primary);overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}.screen-shell>.screen-content{flex:1;padding:0 var(--screen-padding);padding-bottom:var(--space-lg)}.screen-header{display:flex;align-items:center;height:var(--header-height);padding:0 var(--screen-padding);background:var(--bg-primary);flex-shrink:0}.screen-header__back{display:flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--text-primary);flex-shrink:0}.screen-header__back:hover{opacity:.7}.screen-header__title{flex:1;text-align:center}.screen-header__right{display:flex;align-items:center;justify-content:center;min-width:44px;height:44px;color:var(--accent);font-size:18px;font-weight:400;flex-shrink:0}.screen-header__right:hover{opacity:.7}.screen-header__right-spacer{width:44px;flex-shrink:0}.step-progress{padding:0 var(--screen-padding);margin-bottom:var(--space-md)}.step-progress__row{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-xs)}.step-progress__track{width:100%;height:6px;background:var(--progress-track);border-radius:var(--radius-pill);overflow:hidden}.step-progress__fill{height:100%;background:var(--accent);border-radius:var(--radius-pill);min-width:0}.feedback-card{background-color:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-lg);border-left:4px solid var(--accent);display:flex;gap:var(--space-md)}.feedback-card--success{background-color:var(--success-bg);border-left-color:var(--success);border-color:var(--success-border)}.feedback-card--warning{background-color:var(--warning-bg);border-left-color:var(--warning);border-color:var(--warning-border)}.feedback-card--danger{background-color:var(--danger-bg);border-left-color:var(--danger);border-color:var(--danger-border)}.feedback-card--info{background-color:var(--info-bg);border-left-color:var(--info);border-color:var(--info-border)}.feedback-card__icon{display:flex;align-items:flex-start;padding-top:2px;flex-shrink:0;font-size:18px}.feedback-card--success .feedback-card__icon{color:var(--success)}.feedback-card--warning .feedback-card__icon{color:var(--warning)}.feedback-card--danger .feedback-card__icon{color:var(--danger)}.feedback-card--info .feedback-card__icon{color:var(--info)}.feedback-card__body{display:flex;flex-direction:column;gap:var(--space-xs);min-width:0}.feedback-card__title{font-size:15px;font-weight:700;color:var(--text-primary);line-height:1.3}.feedback-card__content{font-size:14px;color:var(--text-muted);line-height:1.5}.exercise-feedback{margin-top:var(--space-lg)}.context-card{background-color:var(--bg-elevated);border-radius:var(--radius-md);padding:var(--space-lg) var(--space-xl);border-left:3px solid var(--purple)}.context-card__label{display:block;font-size:13px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--purple);margin-bottom:var(--space-sm);line-height:1}.context-card__content{font-size:16px;color:var(--text-primary);line-height:1.5;white-space:pre-line}.answer-option{display:flex;align-items:flex-start;gap:var(--space-md);width:100%;padding:var(--space-xl);background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);text-align:left;min-height:60px;transition:border-color .2s ease,background-color .2s ease}.answer-option:hover:not(:disabled){background:var(--bg-card-hover);border-color:var(--border-medium)}.answer-option--selected{border:2px solid var(--accent)}.answer-option--correct{background:var(--success-bg);border:2px solid var(--green)}.answer-option--incorrect{background:var(--danger-bg);border:2px solid var(--danger)}.answer-option--disabled{opacity:.5;pointer-events:none}.answer-option__radio{flex-shrink:0;width:24px;height:24px;border-radius:var(--radius-full);border:2px solid var(--border-medium);display:flex;align-items:center;justify-content:center;margin-top:2px;transition:background-color .2s ease,border-color .2s ease}.answer-option--selected .answer-option__radio{background:var(--accent);border-color:var(--accent);color:#fff}.answer-option--correct .answer-option__radio{background:var(--green);border-color:var(--green);color:#fff}.answer-option--incorrect .answer-option__radio{background:var(--danger);border-color:var(--danger);color:#fff}.answer-option__content{display:flex;flex-direction:column;gap:var(--space-xs)}.answer-option__text{color:var(--text-primary);font-size:16px;line-height:1.45}.answer-option__tag{color:var(--text-muted)}.dnd-slot-row{display:flex;align-items:flex-start;gap:var(--space-md)}.dnd-slot-number{flex-shrink:0;width:44px;height:44px;border-radius:var(--radius-md);background:var(--bg-elevated);border:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:center;margin-top:22px}.dnd-slot-number span{font-size:18px;font-weight:700;color:var(--text-muted)}.dnd-slot-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-xs)}.dnd-slot-label{font-size:13px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--text-dim);padding-left:2px}.dnd-slot{width:100%;min-height:56px;padding:var(--space-lg) var(--space-xl);border:2px dashed var(--border-medium);border-radius:var(--radius-md);background:transparent;display:flex;align-items:center;gap:var(--space-sm);transition:border-color .2s ease,background-color .2s ease}.dnd-slot--hover{border-color:var(--accent);background:var(--accent-5)}.dnd-slot--filled{border-style:solid;border-color:var(--border-subtle);background:var(--bg-card);padding-left:0}.dnd-slot__accent{flex-shrink:0;width:4px;align-self:stretch;background:var(--accent);border-radius:2px;margin-left:var(--space-md)}.dnd-slot__text{flex:1;min-width:0;font-size:15px;line-height:1.4;color:var(--text-primary);padding:0 var(--space-sm)}.dnd-slot--error{border-color:var(--danger);background:var(--danger-bg)}.dnd-slot--error .dnd-slot__accent{background:var(--danger)}.dnd-slot--success{border-color:var(--success);background:var(--success-bg)}.dnd-slot--success .dnd-slot__accent{background:var(--success)}.star-builder__correct-hint{padding:var(--space-xs) 0 var(--space-sm) 60px}.dnd-slot__placeholder{color:var(--text-dim);font-size:14px}.dnd-slot__remove{flex-shrink:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--text-dim);border-radius:var(--radius-sm);transition:color .2s}.dnd-slot__remove:hover{color:var(--danger)}.fragment-chip{display:flex;align-items:center;padding:var(--space-md) var(--space-lg);background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);cursor:grab;touch-action:none;transition:border-color .2s ease,background-color .2s ease,transform .15s ease,box-shadow .15s ease;text-align:left}.fragment-chip .t-body{font-size:15px;line-height:1.4}.fragment-chip.dragging{transform:scale(1.03);box-shadow:0 8px 24px #0006;opacity:.9;z-index:100}.fragment-chip:hover{border-color:var(--border-medium);background:var(--bg-card-hover)}.fragment-chip:active{cursor:grabbing}.fragment-chip--disabled{opacity:.3;pointer-events:none}.safety-analysis__text{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-xl);line-height:1.8;cursor:text;-webkit-user-select:text;user-select:text}.safety-highlight{background:#fbbf2433;border-bottom:2px solid var(--yellow);padding:2px 0;cursor:pointer;color:inherit}.safety-highlight:hover{background:#fbbf2459}.timer-bar{display:flex;align-items:center;gap:var(--space-sm)}.timer-bar__track{flex:1;height:6px;background:var(--progress-track);border-radius:var(--radius-pill);overflow:hidden}.timer-bar__fill{height:100%;background:var(--accent);border-radius:var(--radius-pill);transition:width .1s linear}.timer-bar__fill--low{background:var(--yellow)}.timer-bar__label{flex-shrink:0;min-width:28px;text-align:right}.exercise-page__loading{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-md);padding:var(--space-3xl)}.exercise-page__spinner{width:32px;height:32px;border:3px solid var(--border-subtle);border-top-color:var(--accent);border-radius:var(--radius-full);animation:button-spin .6s linear infinite}.exercise-page__content{flex:1;display:flex;flex-direction:column;gap:var(--space-2xl);animation:fade-slide-in .25s ease-out}.exercise-renderer{display:flex;flex-direction:column;gap:var(--space-xl)}.exercise-renderer__options{display:flex;flex-direction:column;gap:var(--space-lg)}@keyframes fade-slide-in{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.exercise-page__cta{position:sticky;bottom:0;padding:var(--space-lg) var(--screen-padding);padding-bottom:calc(var(--space-lg) + env(safe-area-inset-bottom,0px));background:var(--bg-primary);flex-shrink:0;z-index:10}.exercise-page__cta:before{content:"";position:absolute;top:-20px;left:0;right:0;height:20px;background:linear-gradient(to bottom,transparent,var(--bg-primary));pointer-events:none}.score-circle{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:var(--radius-full);font-size:20px;font-weight:700;color:var(--text-primary);flex-shrink:0}.score-circle--green{background-color:#22c55e26;color:var(--green)}.score-circle--accent{background-color:#ff6b4a26;color:var(--accent)}.score-circle--danger{background-color:var(--danger-bg);color:var(--danger)}.session-result__loading{flex:1;display:flex;align-items:center;justify-content:center}.session-result__content{display:flex;flex-direction:column;gap:var(--space-2xl)}.session-result__hero{display:flex;align-items:center;gap:var(--space-xl)}.session-result__summary{display:flex;flex-direction:column;gap:var(--space-xs)}.session-result__feedback{display:flex;flex-direction:column;gap:var(--space-md)}.session-result__cta{padding:var(--space-lg) var(--screen-padding);flex-shrink:0}.skill-detail__empty{flex:1;display:flex;align-items:center;justify-content:center}.skill-detail__content{display:flex;flex-direction:column;gap:var(--space-2xl)}.skill-detail__score-card{display:flex;align-items:center;gap:var(--space-xl)}.skill-detail__info{flex:1;display:flex;flex-direction:column;gap:var(--space-sm)}.skill-detail__section{display:flex;flex-direction:column;gap:var(--space-md)}.skill-detail__session{cursor:pointer;display:flex;flex-direction:column;gap:var(--space-xs)}.skill-detail__session:hover{border-color:var(--border-medium);background:var(--bg-card-hover)}.skill-detail__session-row{display:flex;justify-content:space-between;align-items:center}.demo-page__content{flex:1;display:flex;flex-direction:column;gap:var(--space-2xl);overflow-y:auto}.demo-page__explain{flex:1;display:flex;flex-direction:column;gap:var(--space-xl);overflow-y:auto}.demo-page__card{background:linear-gradient(135deg,var(--bg-card),var(--bg-elevated))}.demo-page__points{display:flex;flex-direction:column;gap:var(--space-lg);margin-top:var(--space-lg)}.demo-page__point{display:flex;gap:var(--space-md);align-items:flex-start}.demo-page__point-num{flex-shrink:0;width:32px;height:32px;border-radius:var(--radius-full);background:var(--accent-15);color:var(--accent);font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center}.demo-page__point .t-body{color:var(--text-primary);padding-top:4px}.demo-page__cta{padding:var(--space-lg) var(--screen-padding);flex-shrink:0;display:flex;flex-direction:column;gap:var(--space-md);align-items:center}.demo-page__skip{font-size:16px;font-weight:500;color:var(--text-muted);padding:var(--space-sm) var(--space-lg)}.demo-page__skip:active{color:var(--text-primary)}