:root{--bg: #EDE0C4;--surface: #E2D0B2;--button: #C4B088;--muted: #3A3530;--ink: #1A1A1A;--red: #CC2200;--light-red: #FF6644;--gold: #B8922A;--mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", "Courier New", monospace;--radius: 10px;--fs-sm: 13px;--fs-md: 16px;--fs-lg: 22px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--ink);font-family:var(--mono);font-weight:500;min-height:100vh;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}button{cursor:pointer;font-family:var(--mono);border:none;background:none}input,textarea{font-family:var(--mono)}a{color:inherit;text-decoration:none}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--button);border-radius:2px}.app-shell{display:flex;min-height:100vh}.sidebar{width:280px;flex-shrink:0;background:var(--surface);border-right:1.5px solid color-mix(in srgb,var(--ink) 12%,transparent);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}.sidebar-header{padding:24px 20px 16px;border-bottom:1px solid color-mix(in srgb,var(--ink) 10%,transparent)}.sidebar-logo{font-size:var(--fs-sm);font-weight:700;letter-spacing:1px;color:var(--ink);opacity:.5}.sidebar-title{font-size:var(--fs-lg);font-weight:700;color:var(--ink);margin-top:2px}.sidebar-title span{color:var(--red)}.sidebar-nav{flex:1;padding:12px 12px 0;display:flex;flex-direction:column;gap:6px}.sidebar-footer{padding:12px;border-top:1px solid color-mix(in srgb,var(--ink) 10%,transparent);display:flex;flex-direction:column;gap:8px}.sidebar-user-chip{background:var(--bg);border-radius:var(--radius);padding:10px 12px}.sidebar-user-label{font-size:var(--fs-sm);font-weight:700;color:color-mix(in srgb,var(--ink) 65%,transparent);margin-bottom:2px}.sidebar-user-email{font-size:var(--fs-sm);color:var(--ink);word-break:break-all}.main-content{flex:1;min-width:0;display:flex;flex-direction:column}.mobile-header{display:none;background:var(--bg);border-bottom:1px solid color-mix(in srgb,var(--ink) 12%,transparent);padding:0 16px;padding-top:env(safe-area-inset-top);height:calc(52px + env(safe-area-inset-top));align-items:flex-end;justify-content:space-between;position:sticky;top:0;z-index:100}.mobile-header-title{font-size:var(--fs-md);font-weight:700;color:var(--ink);padding-bottom:12px}.mobile-header-left,.mobile-header-right{display:flex;align-items:flex-end;padding-bottom:8px;min-width:40px}.mobile-header-right{justify-content:flex-end}.card{background:var(--surface);border-radius:var(--radius)}.card-gold{background:color-mix(in srgb,var(--gold) 18%,var(--surface))}.btn{display:block;width:100%;padding:14px 20px;border-radius:var(--radius);font-size:var(--fs-md);font-weight:700;text-align:center;transition:opacity .15s;font-family:var(--mono)}.btn:disabled{opacity:.45;cursor:default}.btn:not(:disabled):active{opacity:.75}.btn-primary{background:var(--button);color:var(--ink)}.btn-danger{background:var(--red);color:var(--bg)}.btn-muted{background:var(--muted);color:var(--bg)}.btn-surface{background:var(--surface);color:var(--ink)}.icon-btn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:8px;background:var(--surface);color:var(--ink);transition:opacity .15s}.icon-btn:active{opacity:.7}.field-label{font-size:var(--fs-sm);font-weight:700;color:var(--ink);margin-bottom:6px;display:block}.field-input{width:100%;padding:12px;background:var(--surface);border:none;border-radius:var(--radius);font-size:var(--fs-md);color:var(--ink);outline:none}.field-input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--ink) 20%,transparent)}.field-input::placeholder{color:color-mix(in srgb,var(--ink) 50%,transparent)}.trough{width:100%;height:8px;background:var(--surface);border-radius:4px;overflow:hidden}.trough-fill{height:100%;border-radius:4px;transition:width .3s ease}.page{flex:1;overflow-y:auto;padding-bottom:env(safe-area-inset-bottom)}.page-inner{max-width:600px;padding:16px;display:flex;flex-direction:column;gap:12px}.series-card{display:block;width:100%;background:var(--surface);border-radius:var(--radius);padding:0;text-align:left;transition:opacity .15s;overflow:hidden;text-decoration:none}.series-card:active{opacity:.8}.series-card.active{box-shadow:0 0 0 2px var(--red)}.series-card.mastered{background:color-mix(in srgb,var(--gold) 18%,var(--surface))}.series-card-body{display:flex;align-items:flex-start;gap:0;padding:14px 14px 0}.series-step-count{font-size:var(--fs-md);font-weight:700;min-width:56px;flex-shrink:0}.series-info{flex:1;min-width:0}.series-name-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.series-name{font-size:var(--fs-sm);font-weight:700;color:var(--ink)}.phase-badge{font-size:var(--fs-sm);color:color-mix(in srgb,var(--ink) 65%,transparent)}.series-prog-name{font-size:var(--fs-md);color:var(--ink);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.series-unlock-hint{font-size:var(--fs-sm);font-weight:700;color:color-mix(in srgb,var(--red) 85%,transparent);margin-top:2px}.series-card-trough{padding:10px 14px 14px}.step-row{display:flex;align-items:stretch;background:var(--surface);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:var(--ink);transition:opacity .15s}.step-row:active{opacity:.8}.step-row.locked{opacity:.5}.step-row.beginner-phase{background:color-mix(in srgb,var(--red) 12%,var(--surface))}.step-row.active-phase{background:color-mix(in srgb,var(--red) 8%,var(--surface))}.step-row-indicator{width:4px;flex-shrink:0}.step-row-number{font-size:var(--fs-md);font-weight:700;width:36px;flex-shrink:0;padding:14px 0 14px 10px}.step-row-info{flex:1;min-width:0;padding:14px 10px}.step-row-name{font-size:var(--fs-md);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.step-row-gate{font-size:var(--fs-sm);margin-top:3px}.step-row-icon{padding:14px 16px 14px 8px;display:flex;align-items:center;flex-shrink:0}.log-row{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--surface);border-radius:6px}.log-row-date{font-size:var(--fs-sm);color:color-mix(in srgb,var(--ink) 70%,transparent);width:68px;flex-shrink:0}.log-row-val{font-size:var(--fs-md);font-weight:700}.log-row-note{font-size:var(--fs-sm);color:color-mix(in srgb,var(--ink) 60%,transparent);margin-left:auto;max-width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:color-mix(in srgb,var(--ink) 40%,transparent);display:flex;align-items:flex-end;z-index:200;animation:fadeIn .15s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-sheet{width:100%;max-width:600px;margin:0 auto;background:var(--bg);border-radius:16px 16px 0 0;max-height:90vh;overflow-y:auto;animation:slideUp .25s ease;padding-bottom:calc(24px + env(safe-area-inset-bottom))}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 12px;margin-bottom:0;border-bottom:1px solid color-mix(in srgb,var(--ink) 10%,transparent)}.modal-title{font-size:var(--fs-md);font-weight:700;color:color-mix(in srgb,var(--ink) 65%,transparent)}@media(min-width:769px){.modal-backdrop{align-items:center}.modal-sheet{border-radius:16px;max-height:80vh;margin:20px auto;padding-bottom:24px}}.stopwatch-display{font-size:52px;font-weight:700;text-align:center;padding:24px 16px;background:var(--surface);border-radius:var(--radius);font-variant-numeric:tabular-nums;letter-spacing:2px}.stopwatch-controls{display:flex;border-radius:var(--radius);overflow:hidden}.stopwatch-btn{flex:1;padding:16px;font-size:var(--fs-md);font-weight:700;font-family:var(--mono);border:none;cursor:pointer;transition:opacity .15s}.stopwatch-btn:active{opacity:.75}.stopwatch-btn-main{color:var(--bg)}.stopwatch-btn-reset{background:var(--surface);color:var(--ink);max-width:90px}.rep-display{font-size:52px;font-weight:700;color:var(--red);text-align:right;font-variant-numeric:tabular-nums}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:6px;background:var(--surface);border-radius:3px;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--red);cursor:pointer;box-shadow:0 1px 4px color-mix(in srgb,var(--ink) 25%,transparent)}input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--red);border:none;cursor:pointer}.gate-hint{display:flex;align-items:flex-start;gap:10px;padding:0 16px}.gate-hint-bar{width:4px;border-radius:2px;height:36px;flex-shrink:0;margin-top:2px}.cal-nav{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:var(--surface);border-radius:var(--radius)}.cal-month{font-size:var(--fs-md);font-weight:700}.cal-day-headers{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid color-mix(in srgb,var(--ink) 15%,transparent);margin-top:12px}.cal-day-header{text-align:center;font-size:var(--fs-sm);font-weight:700;color:color-mix(in srgb,var(--ink) 60%,transparent);padding:8px 0}.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);border-left:1px solid color-mix(in srgb,var(--ink) 10%,transparent);border-top:1px solid color-mix(in srgb,var(--ink) 10%,transparent)}.cal-cell{border-right:1px solid color-mix(in srgb,var(--ink) 10%,transparent);border-bottom:1px solid color-mix(in srgb,var(--ink) 10%,transparent);height:50px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer}.cal-cell.selected{background:var(--ink)}.cal-cell.empty{cursor:default}.cal-day-num{font-size:var(--fs-sm);color:var(--ink)}.cal-cell.selected .cal-day-num{color:var(--bg)}.cal-day-num.today{color:var(--red);font-weight:700}.cal-cell.selected .cal-day-num.today{color:var(--bg)}.cal-dot{width:5px;height:5px;border-radius:50%;background:var(--red)}.cal-cell.selected .cal-dot{background:var(--bg)}.confetti-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:color-mix(in srgb,var(--ink) 85%,transparent);display:flex;flex-direction:column;align-items:center;z-index:500;cursor:pointer;padding:0 32px}.confetti-unlocked{font-size:var(--fs-lg);font-weight:700;color:color-mix(in srgb,var(--bg) 90%,transparent);letter-spacing:6px;margin-top:80px}.confetti-card{background:color-mix(in srgb,var(--surface) 15%,transparent);border-radius:var(--radius);padding:40px 24px;margin-top:8px;text-align:center;width:100%;max-width:340px}.confetti-step{font-size:var(--fs-sm);color:color-mix(in srgb,var(--bg) 60%,transparent);margin-bottom:8px}.confetti-name{font-size:var(--fs-lg);font-weight:700;color:var(--light-red);line-height:1.2}.confetti-cat{width:160px;height:160px;object-fit:contain;border-radius:20px;margin-top:32px}.confetti-tap{font-size:var(--fs-md);font-weight:700;color:color-mix(in srgb,var(--bg) 70%,transparent);margin-top:32px}.login-wrap{min-height:100vh;background:var(--bg);display:flex;flex-direction:column;align-items:center}.login-inner{width:100%;max-width:420px;padding:60px 24px 80px}.login-title{font-size:34px;font-weight:700;line-height:1;margin-bottom:0}.login-title span{color:var(--red)}.login-illustration{width:100%;max-width:280px;display:block;margin:24px auto 36px}.login-success{display:flex;align-items:flex-start;gap:10px;background:var(--ink);color:var(--bg);border-radius:var(--radius);padding:12px;font-size:var(--fs-sm);margin-top:12px}.login-error{font-size:var(--fs-sm);color:var(--red);margin-top:12px}.loading-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg)}.loading-text{font-size:var(--fs-md);color:var(--ink);animation:pulse 1.4s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.5}50%{opacity:1}}.welcome-banner{background:var(--ink);display:flex;align-items:center;justify-content:space-between;padding:12px 16px;animation:slideDown .3s ease}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.welcome-banner-text{font-size:var(--fs-md);font-weight:700;color:var(--bg)}.about-toji{width:100%;max-width:400px;display:block;margin:0 auto 32px}@media(min-width:769px){.about-toji{position:fixed;top:0;right:0;height:100vh;width:auto;max-width:40vw;object-fit:contain;object-position:top right;margin:0;pointer-events:none;-webkit-user-select:none;user-select:none}}.about-footer{font-size:var(--fs-sm);color:var(--red);text-align:center;padding:32px 24px 40px;line-height:1.6}.prog-image-wrap{background:var(--surface);border-radius:var(--radius);height:200px;display:flex;align-items:center;justify-content:center;overflow:hidden}.prog-image{max-height:200px;object-fit:contain}.prog-image-placeholder{display:flex;flex-direction:column;align-items:center;gap:8px;color:color-mix(in srgb,var(--ink) 40%,transparent)}.prog-image-placeholder-icon{font-size:40px}.prog-image-placeholder-text{font-size:var(--fs-sm)}.section-label{font-size:var(--fs-sm);font-weight:700;color:color-mix(in srgb,var(--ink) 65%,transparent);margin-bottom:10px}.leaderboard-row{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--surface);border-radius:var(--radius)}.leaderboard-row.is-me{background:color-mix(in srgb,var(--gold) 22%,var(--surface))}.leaderboard-rank{font-size:var(--fs-sm);font-weight:700;width:28px;flex-shrink:0;color:color-mix(in srgb,var(--ink) 45%,transparent)}.leaderboard-rank.top3{color:var(--gold)}.leaderboard-name{font-size:var(--fs-sm);font-weight:700;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.leaderboard-series{display:flex;gap:4px;align-items:center;flex-shrink:0}.leaderboard-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.leaderboard-score{font-size:var(--fs-md);font-weight:700;min-width:44px;text-align:right;flex-shrink:0}@media(max-width:768px){.sidebar{display:none}.mobile-header{display:flex}.page-inner{max-width:100%}.home-grid{display:flex;flex-direction:column;gap:18px}.page-inner{gap:12px}}@media(min-width:769px){.mobile-header{display:none}.home-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.desktop-breadcrumb{display:block!important}.sidebar .series-card .series-prog-name,.sidebar .series-card .series-step-count,.sidebar .series-card .series-name,.sidebar .series-card .phase-badge{font-size:var(--fs-sm)}.main-content .series-step-count{font-size:var(--fs-lg);min-width:80px}.prog-step-label{font-size:var(--fs-sm)!important}.prog-title{font-size:var(--fs-lg)!important}.prog-gate-text{font-size:var(--fs-md)!important}.prog-desc-text{font-size:var(--fs-md)!important;line-height:1.8!important}.prog-gate-label{font-size:var(--fs-sm)!important}.prog-gate-val{font-size:var(--fs-md)!important}.prog-gate-hint{font-size:var(--fs-sm)!important}.btn{padding:16px 20px}}.sidebar-series-active{box-shadow:0 0 0 2px var(--red)}