:root{
      --blue:#23479b;
      --blue-deep:#142c68;
      --teal:#69c7bd;
      --teal-deep:#328f88;
      --yellow:#f3e783;
      --purple:#8175bb;
      --paper:#fbfcff;
      --ink:#1f2328;
      --muted:#687385;
      --line:#dfe5eb;
      --white:#fff;
      --shadow:0 24px 60px rgba(20,44,104,.14);
      --shadow-soft:0 10px 26px rgba(20,44,104,.08);
      --shadow-lift:0 18px 36px rgba(20,44,104,.12);
      --radius:8px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      min-height:100vh;
      font-family:Inter, "Segoe UI", Arial, sans-serif;
      color:var(--ink);
      background:
        linear-gradient(135deg, rgba(105,199,189,.16), transparent 38%),
        linear-gradient(225deg, rgba(129,117,187,.12), transparent 36%),
        linear-gradient(180deg, rgba(255,255,255,.9), rgba(251,252,255,.98)),
        url("/assets/standard-slide-lines.webp") center top / min(920px, 120vw) auto no-repeat,
        var(--paper);
    }
    button,a,input{font:inherit}
    body.is-locked .page{display:none}
    body.is-locked .login-screen{display:grid}
    body.stickman-mode .login-card,
    body.stickman-mode .login-menu,
    body.stickman-mode .game-note{display:none}
    body.game-only-mode .login-card,
    body.game-only-mode .game-note{display:none}
    body.stickman-mode .login-game{
      cursor:default;
      background:
        linear-gradient(180deg, rgba(251,252,255,.9), rgba(235,244,251,.98)),
        url("/assets/standard-slide-lines.webp") center top / min(920px, 120vw) auto no-repeat,
        var(--paper);
    }
    .login-screen{
      min-height:100vh;
      width:100%;
      margin:0 auto;
      display:none;
      place-items:center;
      padding:32px 16px;
      position:relative;
      overflow:hidden;
      isolation:isolate;
    }
    .login-menu{
      position:absolute;
      top:18px;
      right:18px;
      z-index:8;
    }
    .login-menu-button{
      width:46px;
      height:46px;
      border:1px solid rgba(223,229,235,.9);
      border-radius:var(--radius);
      background:rgba(255,255,255,.92);
      color:var(--blue-deep);
      box-shadow:var(--shadow-soft);
      display:grid;
      place-items:center;
      font-size:1.35rem;
      font-weight:900;
      cursor:pointer;
    }
    .login-menu-button:hover,
    .login-menu-button[aria-expanded="true"]{
      border-color:var(--teal);
      box-shadow:0 0 0 4px rgba(105,199,189,.16), 0 10px 24px rgba(31,35,40,.08);
    }
    .login-menu-panel{
      position:absolute;
      top:56px;
      right:0;
      width:230px;
      border:1px solid rgba(201,213,225,.9);
      border-radius:var(--radius);
      background:rgba(255,255,255,.97);
      box-shadow:var(--shadow);
      padding:8px;
      display:none;
    }
    .login-menu.is-open .login-menu-panel{display:grid}
    .login-menu-panel a,
    .login-menu-panel button{
      min-height:44px;
      width:100%;
      border:0;
      border-radius:6px;
      background:transparent;
      color:var(--blue-deep);
      text-decoration:none;
      display:flex;
      align-items:center;
      padding:0 12px;
      font-weight:900;
      text-align:left;
      cursor:pointer;
    }
    .login-menu-panel a:hover,
    .login-menu-panel button:hover{
      background:#f3f7fb;
    }
    .leaderboard-menu-button{display:none}
    body.game-only-mode .leaderboard-menu-button{display:flex}
    .login-game{
      position:absolute;
      inset:0;
      z-index:0;
      width:100%;
      height:100%;
      touch-action:none;
      cursor:grab;
    }
    .login-game.is-grabbing{cursor:grabbing}
    .game-only-panel{
      position:relative;
      z-index:3;
      width:min(390px, calc(100% - 32px));
      display:none;
      gap:12px;
      padding:22px;
      border:1px solid rgba(201,213,225,.9);
      border-radius:var(--radius);
      background:rgba(255,255,255,.94);
      box-shadow:var(--shadow);
      backdrop-filter:blur(14px);
    }
    body.game-only-mode .game-only-panel{display:grid}
    body.game-only-mode.game-only-joined .game-only-panel{display:none}
    .game-only-panel h2{
      margin:0;
      color:var(--blue-deep);
      font-size:1.55rem;
    }
    .game-only-panel p{margin:0;color:var(--muted);font-weight:800}
    .game-only-form{display:grid;gap:10px}
    .game-only-form input{
      min-height:48px;
      border:2px solid rgba(201,213,225,.95);
      border-radius:var(--radius);
      padding:0 14px;
      font-weight:900;
      color:var(--blue-deep);
      background:#fff;
      outline:none;
    }
    .game-only-form button{
      min-height:48px;
      border:0;
      border-radius:var(--radius);
      background:linear-gradient(135deg, var(--blue-deep), var(--blue));
      color:white;
      font-weight:1000;
      cursor:pointer;
    }
    .game-only-message{
      min-height:20px;
      color:#9f2e2e;
      font-weight:900;
    }
    .math-race-panel{
      position:absolute;
      left:50%;
      bottom:calc(18px + env(safe-area-inset-bottom));
      z-index:6;
      width:min(420px, calc(100% - 32px));
      display:none;
      gap:10px;
      padding:14px;
      border:1px solid rgba(201,213,225,.92);
      border-radius:var(--radius);
      background:rgba(255,255,255,.93);
      box-shadow:var(--shadow-soft);
      backdrop-filter:blur(12px);
      transform:translateX(-50%);
    }
    body.game-only-mode.game-only-joined.game-only-math .math-race-panel{display:grid}
    .math-race-question{
      color:var(--blue-deep);
      font-size:clamp(1.55rem, 4vw, 2.4rem);
      font-weight:1000;
      text-align:center;
      line-height:1;
    }
    .math-race-row{
      display:grid;
      grid-template-columns:minmax(0,1fr) 92px;
      gap:8px;
    }
    .math-race-row input{
      min-height:48px;
      border:2px solid rgba(201,213,225,.95);
      border-radius:var(--radius);
      padding:0 14px;
      color:var(--blue-deep);
      font-size:1.2rem;
      font-weight:1000;
      text-align:center;
      outline:none;
    }
    .math-race-row button{
      min-height:48px;
      border:0;
      border-radius:var(--radius);
      background:linear-gradient(135deg, var(--blue-deep), var(--blue));
      color:#fff;
      font-weight:1000;
    }
    .math-race-feedback{
      min-height:20px;
      color:#2f4858;
      font-weight:900;
      text-align:center;
    }
    .game-leaderboard{
      position:absolute;
      top:74px;
      right:18px;
      z-index:7;
      width:min(280px, calc(100% - 36px));
      display:none;
      border:1px solid rgba(201,213,225,.9);
      border-radius:var(--radius);
      background:rgba(255,255,255,.92);
      box-shadow:var(--shadow-soft);
      padding:12px;
      backdrop-filter:blur(12px);
      pointer-events:auto;
    }
    body.game-only-mode.game-leaderboard-open .game-leaderboard{display:block}
    .game-leaderboard-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .game-leaderboard h2{
      margin:0;
      color:var(--blue-deep);
      font-size:1rem;
    }
    .game-leaderboard-close{
      width:30px;
      height:30px;
      border:1px solid rgba(201,213,225,.9);
      border-radius:50%;
      background:#fff;
      color:var(--blue-deep);
      display:grid;
      place-items:center;
      font-size:1rem;
      font-weight:1000;
      line-height:1;
      cursor:pointer;
    }
    .game-leaderboard-close:hover{border-color:var(--teal)}
    .game-leaderboard-meta{
      margin:2px 0 8px;
      color:var(--muted);
      font-size:.76rem;
      font-weight:900;
    }
    .game-leaderboard ol{
      list-style:none;
      display:grid;
      gap:4px;
      margin:0;
      padding:0;
    }
    .game-leaderboard li{
      display:grid;
      grid-template-columns:28px minmax(0,1fr) auto;
      align-items:center;
      gap:8px;
      min-height:28px;
      border-radius:6px;
      background:rgba(244,247,251,.88);
      padding:0 8px;
      color:var(--blue-deep);
      font-size:.82rem;
      font-weight:900;
    }
    .game-leaderboard .empty-row{
      display:block;
      color:var(--muted);
      background:transparent;
      padding:6px 2px;
    }
    .smash-mobile-controls{
      position:fixed;
      inset:0;
      z-index:6;
      display:none;
      pointer-events:none;
      touch-action:none;
      user-select:none;
      -webkit-user-select:none;
      -webkit-tap-highlight-color:transparent;
    }
    .smash-joystick{
      position:absolute;
      left:calc(20px + env(safe-area-inset-left));
      bottom:calc(18px + env(safe-area-inset-bottom));
      width:138px;
      height:138px;
      border-radius:50%;
      pointer-events:auto;
      touch-action:none;
    }
    .smash-joystick-base{
      position:absolute;
      inset:0;
      border:2px solid rgba(20,44,104,.28);
      border-radius:50%;
      background:rgba(255,255,255,.42);
      box-shadow:0 12px 30px rgba(20,44,104,.14);
      backdrop-filter:blur(10px);
    }
    .smash-joystick-knob{
      position:absolute;
      left:50%;
      top:50%;
      width:58px;
      height:58px;
      margin:-29px 0 0 -29px;
      border:2px solid rgba(255,255,255,.78);
      border-radius:50%;
      background:linear-gradient(135deg, var(--blue-deep), var(--blue));
      box-shadow:0 10px 20px rgba(20,44,104,.22);
      transform:translate(0,0);
      transition:transform .08s ease-out;
    }
    .smash-action-pad{
      position:absolute;
      right:calc(18px + env(safe-area-inset-right));
      bottom:calc(16px + env(safe-area-inset-bottom));
      display:grid;
      grid-template-columns:repeat(3, 70px);
      gap:10px;
      pointer-events:auto;
    }
    .smash-action-button{
      width:70px;
      height:54px;
      border:2px solid rgba(255,255,255,.72);
      border-radius:16px;
      background:rgba(20,44,104,.78);
      color:#fff;
      box-shadow:0 10px 22px rgba(20,44,104,.18);
      font-size:.74rem;
      font-weight:1000;
      letter-spacing:0;
      touch-action:none;
    }
    .smash-action-button.is-primary{
      background:rgba(105,199,189,.92);
      color:var(--blue-deep);
    }
    .smash-action-button.is-weapon{
      background:rgba(243,201,74,.94);
      color:var(--blue-deep);
    }
    .smash-action-button:active,
    .smash-action-button.is-pressed{
      transform:translateY(2px) scale(.96);
      filter:saturate(1.1);
    }
    .smash-orientation-prompt{
      position:absolute;
      inset:0;
      display:none;
      place-items:center;
      padding:22px;
      background:rgba(20,44,104,.72);
      color:#fff;
      text-align:center;
      font-size:1.15rem;
      font-weight:1000;
      pointer-events:none;
      backdrop-filter:blur(8px);
    }
    @media (hover:none), (pointer:coarse){
      body.game-only-mode.game-only-joined.game-only-smash .smash-mobile-controls{display:block}
      body.game-only-mode.game-only-joined.game-only-smash .game-leaderboard{
        width:min(230px, calc(100% - 36px));
        padding:9px;
      }
    }
    @media (hover:none) and (orientation:portrait), (pointer:coarse) and (orientation:portrait){
      body.game-only-mode.game-only-joined.game-only-smash .smash-orientation-prompt{display:grid}
      body.game-only-mode.game-only-joined.game-only-smash .smash-joystick,
      body.game-only-mode.game-only-joined.game-only-smash .smash-action-pad{opacity:.24}
    }
    @media (max-height:430px) and (orientation:landscape){
      .smash-joystick{
        width:116px;
        height:116px;
      }
      .smash-joystick-knob{
        width:50px;
        height:50px;
        margin:-25px 0 0 -25px;
      }
      .smash-action-pad{
        grid-template-columns:repeat(3, 62px);
        gap:8px;
      }
      .smash-action-button{
        width:62px;
        height:48px;
        border-radius:14px;
        font-size:.66rem;
      }
      .math-race-panel{
        left:auto;
        right:calc(14px + env(safe-area-inset-right));
        bottom:calc(12px + env(safe-area-inset-bottom));
        width:min(340px, 48vw);
        transform:none;
      }
      .math-race-question{
        font-size:1.55rem;
      }
    }
    .game-note{
      position:absolute;
      right:22px;
      bottom:18px;
      z-index:1;
      max-width:min(330px, calc(100% - 44px));
      border:1px solid rgba(223,229,235,.88);
      border-radius:999px;
      background:rgba(255,255,255,.84);
      color:var(--blue-deep);
      box-shadow:var(--shadow-soft);
      padding:9px 13px;
      font-size:.82rem;
      font-weight:900;
      pointer-events:none;
    }
    .stickman-exit{
      position:absolute;
      top:18px;
      right:18px;
      z-index:5;
      display:none;
      min-height:42px;
      border:1px solid rgba(201,213,225,.9);
      border-radius:var(--radius);
      background:rgba(255,255,255,.92);
      color:var(--blue-deep);
      box-shadow:var(--shadow-soft);
      padding:0 14px;
      font-weight:900;
      cursor:pointer;
    }
    body.stickman-mode .stickman-exit{display:inline-flex;align-items:center}
    .login-card{
      position:relative;
      z-index:2;
      width:min(620px, 100%);
      background:rgba(255,255,255,.96);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding:26px;
      backdrop-filter:blur(16px);
    }
    .login-card::before{
      content:"";
      position:absolute;
      left:18px;
      right:18px;
      top:0;
      height:4px;
      border-radius:0 0 999px 999px;
      background:linear-gradient(90deg, var(--blue), var(--teal), var(--yellow));
    }
    .login-card h1{
      font-size:clamp(2.7rem, 8vw, 4.8rem);
      margin-bottom:18px;
    }
    .login-card p{
      margin:0 0 18px;
      color:#3d4755;
      font-size:1.1rem;
      line-height:1.45;
    }
    .login-card label{
      display:block;
      margin-bottom:8px;
      color:var(--muted);
      font-size:.78rem;
      font-weight:900;
      text-transform:uppercase;
    }
    .login-row{
      display:flex;
      gap:10px;
    }
    .login-row input{
      min-width:0;
      flex:1;
      min-height:52px;
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:white;
      color:var(--ink);
      padding:0 14px;
      font-weight:900;
      outline:none;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
    }
    .login-row input:focus{
      border-color:var(--teal-deep);
      box-shadow:0 0 0 4px rgba(105,199,189,.2);
    }
    .login-row button,.logout-button{
      min-height:52px;
      border:0;
      border-radius:var(--radius);
      background:var(--blue);
      color:white;
      padding:0 18px;
      font-weight:900;
      cursor:pointer;
      box-shadow:0 12px 24px rgba(35,71,155,.22);
      transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
    }
    .login-row button:hover,.logout-button:hover{
      transform:translateY(-1px);
      box-shadow:0 16px 30px rgba(35,71,155,.26);
    }
    .login-error{
      min-height:22px;
      margin:12px 0 0;
      color:#a33d3d;
      font-weight:800;
    }
    .page{
      width:min(1120px, calc(100% - 32px));
      margin:0 auto;
      padding:28px 0 72px;
    }
    header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      color:var(--blue);
      font-weight:900;
    }
    .brand-area{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
    .hub-services{display:grid;gap:8px;width:min(220px,100%)}
    .hub-service-link{
      min-height:42px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      border:1px solid rgba(35,71,155,.18);
      border-radius:12px;
      padding:0 13px;
      color:var(--blue-deep);
      background:rgba(255,255,255,.94);
      box-shadow:var(--shadow-soft);
      text-decoration:none;
      font-weight:950;
    }
    .hub-service-link:hover{transform:translateY(-1px);border-color:var(--blue);box-shadow:0 12px 24px rgba(35,71,155,.12)}
    .hub-service-link.bank-link{background:linear-gradient(135deg,#eef8ff,#ffffff)}
    .hub-service-link.store-link{background:linear-gradient(135deg,#fff7da,#ffffff)}
    .service-badge{display:none;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:#d9485f;color:white;place-items:center;font-size:.75rem}
    .service-badge.is-visible{display:grid}
    .brand-mark{
      width:38px;
      height:38px;
      border-radius:50%;
      display:grid;
      place-items:center;
      color:white;
      background:linear-gradient(135deg, var(--blue), var(--teal));
    }
    .student-pill{
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .student-name{
      border:1px solid var(--line);
      border-radius:999px;
      background:white;
      color:var(--blue-deep);
      padding:8px 12px;
      font-weight:900;
      box-shadow:var(--shadow-soft);
    }
    .logout-button{
      min-height:38px;
      padding:0 12px;
      background:white;
      color:var(--blue-deep);
      border:1px solid var(--line);
      box-shadow:var(--shadow-soft);
    }
    .my-work-button{
      min-height:38px;
      border:1px solid var(--line);
      border-radius:999px;
      background:var(--blue);
      color:white;
      padding:0 12px;
      font-weight:900;
      cursor:pointer;
      box-shadow:0 10px 22px rgba(35,71,155,.2);
    }
    .hero{
      min-height:42vh;
      display:grid;
      place-items:center;
      text-align:center;
      padding:56px 0 34px;
    }
    h1{
      margin:0;
      color:var(--blue);
      font-size:clamp(3.4rem, 10vw, 7.2rem);
      line-height:.9;
      letter-spacing:0;
    }
    .hero p{
      max-width:650px;
      margin:22px auto 0;
      color:#3d4755;
      font-size:clamp(1.08rem, 2vw, 1.25rem);
      line-height:1.5;
    }
    .steps{
      display:grid;
      gap:18px;
    }
    .step{
      background:rgba(255,255,255,.96);
      border:1px solid rgba(201,213,225,.88);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding:22px;
      scroll-margin-top:24px;
      backdrop-filter:blur(12px);
    }
    .my-work-panel.hidden{display:none}
    .my-work-grid{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:10px;
      margin:14px 0;
    }
    .my-work-card{
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:white;
      padding:14px;
      box-shadow:var(--shadow-soft);
    }
    .my-work-card b{
      display:block;
      color:var(--blue);
      font-size:1.7rem;
      line-height:1;
      margin-bottom:6px;
    }
    .my-work-table{
      width:100%;
      border-collapse:collapse;
      margin-top:12px;
      overflow:hidden;
      border:1px solid rgba(201,213,225,.9);
      border-radius:var(--radius);
      box-shadow:var(--shadow-soft);
    }
    .my-work-table th,.my-work-table td{
      padding:10px;
      border-bottom:1px solid var(--line);
      text-align:left;
      vertical-align:top;
    }
    .my-work-table th{
      color:var(--blue-deep);
      background:#f5f8fb;
      font-size:.8rem;
      text-transform:uppercase;
    }
    .my-work-table tr:last-child td{border-bottom:0}
    .work-status{
      display:inline-flex;
      min-height:26px;
      align-items:center;
      border-radius:999px;
      padding:0 9px;
      background:#edf2f7;
      color:var(--blue-deep);
      font-weight:900;
      font-size:.78rem;
    }
    .work-status.is-good{background:#e8f8ee;color:#146c38}
    .work-status.is-draft{background:#fff8d8;color:#735600}
    .work-status.is-fix{background:#fff0f0;color:#9f2e2e}
    .step-header{
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:16px;
      margin-bottom:16px;
    }
    .step h2{
      margin:0;
      color:var(--blue-deep);
      font-size:clamp(1.55rem, 3vw, 2.2rem);
      line-height:1;
    }
    .step-number{
      display:inline-grid;
      place-items:center;
      min-width:38px;
      height:38px;
      border-radius:50%;
      background:var(--yellow);
      color:var(--blue-deep);
      font-weight:900;
      margin-right:10px;
      font-size:1rem;
      vertical-align:middle;
    }
    .hint{
      margin:0;
      color:var(--muted);
      font-weight:700;
    }
    .button-grid{
      display:grid;
      gap:12px;
    }
    .subjects{grid-template-columns:repeat(3, minmax(0,1fr))}
    .weeks{grid-template-columns:repeat(5, minmax(0,1fr))}
    .days{grid-template-columns:repeat(5, minmax(0,1fr))}
    .choice-button{
      min-height:104px;
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:white;
      color:var(--blue-deep);
      padding:16px;
      text-align:left;
      cursor:pointer;
      font-weight:900;
      box-shadow:var(--shadow-soft);
      transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
    }
    .choice-button:hover{
      transform:translateY(-2px);
      border-color:#cbd8e6;
      box-shadow:var(--shadow-lift);
    }
    .choice-button.is-active{
      border-color:var(--blue);
      background:linear-gradient(180deg, #ffffff, #f6f9ff);
      box-shadow:0 0 0 4px rgba(35,71,155,.13), var(--shadow-soft);
    }
    .choice-button span{
      display:block;
      width:34px;
      height:9px;
      border-radius:999px;
      margin-bottom:16px;
      background:var(--accent, var(--teal));
    }
    .week-button,.day-button{
      position:relative;
      min-height:76px;
      text-align:center;
      display:grid;
      place-items:center;
      font-size:1.05rem;
    }
    .week-button .choice-accent,.day-button .choice-accent{display:none}
    .choice-button .task-count-badge{
      position:absolute;
      top:8px;
      right:8px;
      display:grid;
      place-items:center;
      width:auto;
      min-width:34px;
      height:34px;
      margin:0;
      padding:0 8px;
      border:3px solid white;
      border-radius:999px;
      background:#d63535;
      color:white;
      box-shadow:0 3px 9px rgba(91,21,21,.28);
      font-size:.9rem;
      font-weight:1000;
      line-height:1;
      z-index:2;
    }
    .result{
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      gap:18px;
      align-items:center;
      background:linear-gradient(135deg, var(--blue-deep), var(--blue));
      color:white;
      border-color:var(--blue);
      box-shadow:0 22px 48px rgba(20,44,104,.2);
    }
    .result .hint{color:#dce9ff}
    .summary-label{
      margin:0 0 6px;
      color:#dce9ff;
      font-weight:900;
      text-transform:uppercase;
      font-size:.8rem;
    }
    .summary-choice{
      margin:0;
      font-size:clamp(1.35rem, 3vw, 2rem);
      font-weight:900;
      line-height:1.1;
    }
    .task-name{
      margin:8px 0 0;
      color:white;
      font-size:1.05rem;
      font-weight:800;
    }
    .open-work{
      min-height:54px;
      min-width:230px;
      max-width:360px;
      border:0;
      border-radius:var(--radius);
      background:white;
      color:var(--blue);
      font-weight:900;
      cursor:pointer;
      text-decoration:none;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:0 18px;
      text-align:center;
      line-height:1.2;
      flex-direction:column;
      gap:5px;
      box-shadow:0 10px 24px rgba(20,44,104,.12);
      transition:transform .16s ease, box-shadow .16s ease;
    }
    .open-work:hover{
      transform:translateY(-1px);
      box-shadow:0 16px 32px rgba(20,44,104,.16);
    }
    .task-button-title{font-weight:900}
    .task-button-meta{
      color:#647386;
      font-size:.78rem;
      font-weight:900;
    }
    .task-status{
      display:inline-flex;
      min-height:24px;
      align-items:center;
      border-radius:999px;
      padding:0 9px;
      background:#edf2f7;
      color:var(--blue-deep);
      font-size:.74rem;
      font-weight:900;
    }
    .task-status.is-good{background:#e8f8ee;color:#146c38}
    .task-status.is-draft{background:#fff8d8;color:#735600}
    .task-status.is-fix{background:#fff0f0;color:#9f2e2e}
    .task-list{
      display:grid;
      gap:10px;
      justify-items:end;
    }
    .open-work.is-disabled{
      background:#d7dee6;
      color:#647386;
      pointer-events:none;
      cursor:default;
    }
    .credit{
      position:fixed;
      right:18px;
      bottom:14px;
      max-width:min(330px, calc(100% - 36px));
      padding:8px 12px;
      border:1px solid var(--line);
      border-radius:999px;
      background:rgba(255,255,255,.92);
      color:var(--blue-deep);
      font-size:.82rem;
      font-weight:900;
      box-shadow:var(--shadow-soft);
    }
    .checkin-overlay{
      position:fixed;
      inset:0;
      z-index:50;
      display:none;
      place-items:center;
      padding:24px;
      background:rgba(20,44,104,.28);
      backdrop-filter:blur(8px);
    }
    .checkin-overlay.is-open{display:grid}
    .checkin-card{
      width:min(680px,100%);
      background:white;
      border:1px solid var(--line);
      border-radius:18px;
      box-shadow:0 24px 60px rgba(20,44,104,.22);
      padding:24px;
      text-align:center;
    }
    .checkin-card h2{
      margin:0;
      color:var(--blue);
      font-size:clamp(2rem,6vw,3.8rem);
      line-height:.95;
    }
    .checkin-card p{
      margin:12px auto 18px;
      max-width:460px;
      color:#3d4755;
      font-weight:750;
      line-height:1.45;
    }
    .mood-grid{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:12px;
    }
    .checkin-step.is-hidden{display:none}
    .detail-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:10px;
      text-align:left;
    }
    .detail-button{
      border:2px solid var(--line);
      border-radius:14px;
      background:white;
      color:var(--blue-deep);
      min-height:58px;
      padding:10px 12px;
      cursor:pointer;
      font-weight:900;
      text-align:left;
    }
    .detail-button:hover{
      border-color:var(--mood, var(--teal-deep));
      box-shadow:0 0 0 4px rgba(105,199,189,.13);
    }
    .back-mood{
      margin-top:14px;
      min-height:42px;
      background:#edf2f7;
      color:var(--blue-deep);
    }
    .mood-button{
      border:2px solid var(--line);
      border-radius:14px;
      background:#fff;
      min-height:146px;
      display:grid;
      justify-items:center;
      align-content:center;
      gap:10px;
      cursor:pointer;
      color:var(--blue-deep);
      font-weight:900;
      box-shadow:0 8px 18px rgba(31,35,40,.05);
    }
    .mood-button:hover{
      transform:translateY(-2px);
      box-shadow:0 14px 26px rgba(31,35,40,.1);
    }
    .mood-face{
      width:72px;
      height:72px;
      border-radius:50%;
      background:var(--mood);
      position:relative;
      box-shadow:inset 0 -8px 0 rgba(0,0,0,.08);
    }
    .mood-face::before{
      content:"";
      position:absolute;
      left:19px;
      top:24px;
      width:9px;
      height:9px;
      border-radius:50%;
      background:#142c68;
      box-shadow:25px 0 0 #142c68;
    }
    .mood-face::after{
      content:"";
      position:absolute;
      left:22px;
      top:45px;
      width:28px;
      height:11px;
      border:4px solid #142c68;
      border-top:0;
      border-radius:0 0 30px 30px;
    }
    .mood-green{--mood:#55c977}
    .mood-yellow{--mood:#f2cf4a}
    .mood-blue{--mood:#5a94e8}
    .mood-red{--mood:#e05a5a}
    .mood-button[data-mood="yellow"] .mood-face::after{
      height:0;
      border:0;
      border-top:4px solid #142c68;
      border-radius:0;
      top:50px;
    }
    .mood-button[data-mood="blue"] .mood-face::after,
    .mood-button[data-mood="red"] .mood-face::after{
      top:50px;
      border:4px solid #142c68;
      border-bottom:0;
      border-radius:30px 30px 0 0;
    }
    .checkin-status{
      min-height:22px;
      margin:14px 0 0;
      color:var(--muted);
      font-weight:800;
    }
    @media (max-width:900px){
      .subjects,.weeks,.days{grid-template-columns:1fr 1fr}
      .result{grid-template-columns:1fr}
      .task-list{justify-items:stretch}
      .open-work{width:100%}
    }
    @media (max-width:620px){
      header{align-items:flex-start;flex-direction:column}
      .login-row{flex-direction:column}
      .game-note{display:none}
      .my-work-grid{grid-template-columns:1fr 1fr}
      .my-work-table{display:block;overflow:auto}
      .hero{min-height:auto;padding:46px 0 24px}
      h1{font-size:3.4rem}
      .step-header{align-items:start;flex-direction:column}
      .subjects,.weeks,.days{grid-template-columns:1fr}
      .mood-grid{grid-template-columns:1fr 1fr}
      .detail-grid{grid-template-columns:1fr}
      .credit{position:static;margin:24px 0 0;border-radius:var(--radius)}
    }