:root{
  color-scheme:dark;
  --bg:#0b0e14; --panel:#121722; --panel2:#171d29; --line:#252d3b;
  --text:#f2f5f9; --muted:#8e99aa; --accent:#d7ff38; --accentText:#111600;
  --good:#72e6a1; --bad:#ff7d86; --warn:#ffd166; --radius:18px;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box} body{margin:0;background:radial-gradient(circle at 50% -20%,#182236 0,#0b0e14 38%);color:var(--text);min-height:100vh}
button,input,select{font:inherit}.topbar{max-width:1100px;margin:auto;padding:26px 20px 12px;display:flex;align-items:end;justify-content:space-between;gap:16px}.topbar h1{margin:2px 0 0;font-size:clamp(24px,4vw,36px);letter-spacing:-.04em}.eyebrow,.label{font-size:11px;font-weight:800;letter-spacing:.15em;color:var(--muted)}
.header-actions{display:flex;gap:8px}main{max-width:1100px;margin:auto;padding:12px 20px 70px;display:grid;gap:16px}.card{background:linear-gradient(180deg,rgba(23,29,41,.96),rgba(17,22,32,.96));border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 18px 60px rgba(0,0,0,.18)}
.trainer{padding:18px}.case-head{display:flex;justify-content:space-between;align-items:start}.case-head>div{display:flex;flex-direction:column;gap:2px}.case-head strong{font-size:22px}.timer-wrap{text-align:right}.timer-wrap strong{font-variant-numeric:tabular-nums;font-size:28px;letter-spacing:-.03em}
.cube-stage{height:min(52vh,470px);min-height:310px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.cube-help{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);color:var(--muted);font-size:11px;white-space:nowrap;background:rgba(11,14,20,.72);padding:6px 10px;border-radius:99px;z-index:4}
.scramble-box{padding:14px 16px;border:1px solid var(--line);border-radius:13px;background:#0e121a}.scramble-box #scramble{font-family:"SFMono-Regular",Consolas,monospace;font-size:clamp(15px,2.4vw,20px);line-height:1.55;margin-top:6px;word-break:break-word}.scramble-box.hidden-by-setting #scramble{filter:blur(7px);user-select:none}.scramble-box.hidden-by-setting::after{content:"スクランブル表示OFF";display:block;color:var(--muted);font-size:12px;margin-top:4px}
.answer-area{text-align:center;padding:24px 4px 6px}.prompt{font-size:15px;color:#cbd2dc}.answer-row{display:flex;align-items:center;justify-content:center;gap:8px;margin:12px 0 18px}.answer-row input{width:112px;height:72px;text-align:center;font-size:44px;font-weight:800;background:#0c1017;border:1px solid #30394a;border-radius:14px;color:var(--text);outline:none}.answer-row input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(215,255,56,.08)}.answer-row input::-webkit-inner-spin-button{display:none}.moves-unit{color:var(--muted);align-self:end;margin-bottom:10px;font-size:12px}.stepper{width:44px;height:44px;border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:12px;font-size:24px}.main-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
button{cursor:pointer;border:0}.primary,.accent,.ghost{border-radius:11px;padding:11px 15px;font-weight:750}.primary{background:#262d3a;color:var(--text)}.accent{background:var(--accent);color:var(--accentText)}.ghost{background:#171c27;color:#d8dee7;border:1px solid var(--line)}button:disabled{opacity:.35;cursor:not-allowed}kbd{font-size:10px;padding:2px 5px;border:1px solid rgba(255,255,255,.15);border-radius:5px;margin-left:5px;color:inherit;background:rgba(255,255,255,.05)}
.result{padding:18px}.hidden{display:none!important}.result-score{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.result-score>div{padding:14px;background:#0f131b;border:1px solid var(--line);border-radius:13px;display:flex;flex-direction:column;gap:5px}.result-score strong{font-size:28px;font-variant-numeric:tabular-nums}.result-message{font-weight:700;font-size:17px;padding:16px 2px}.result-message.good{color:var(--good)}.result-message.bad{color:var(--bad)}.solutions-head{border-top:1px solid var(--line);padding-top:16px;display:flex;justify-content:space-between;align-items:center}.solutions-head>div{display:flex;flex-direction:column;gap:3px}.solutions-wrap{margin-top:12px;max-height:420px;overflow:auto;border:1px solid var(--line);border-radius:12px;background:#0d1118}.solutions{counter-reset:solution}.solution{display:flex;gap:10px;padding:9px 12px;border-bottom:1px solid #1e2531;font-family:"SFMono-Regular",Consolas,monospace;font-size:13px}.solution:last-child{border-bottom:0}.solution::before{counter-increment:solution;content:counter(solution);color:var(--muted);min-width:34px;text-align:right}
.session{padding:18px}.section-title{display:flex;align-items:center;justify-content:space-between;gap:10px}.section-title h2{margin:3px 0 0;font-size:21px}.danger{color:#ff9aa0}.quick-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:14px 0}.metric{padding:12px;background:#0f131b;border:1px solid var(--line);border-radius:12px}.metric strong{display:block;font-size:21px;margin-top:3px;font-variant-numeric:tabular-nums}.history-scroll{overflow:auto}table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}th,td{padding:9px 8px;text-align:right;border-bottom:1px solid #202734;font-size:13px}th{font-size:10px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}th:first-child,td:first-child{text-align:left}.err-zero{color:var(--good);font-weight:800}.err-pos,.err-neg{color:var(--bad)}
.loading-screen{position:fixed;inset:0;z-index:100;background:#090c12;display:grid;place-items:center;padding:22px}.loading-card{width:min(520px,100%);text-align:center}.cube-mark{width:74px;height:74px;margin:auto;border-radius:18px;display:grid;place-items:center;background:var(--accent);color:#101500;font-weight:900;font-size:12px}.loading-card h1{font-size:25px;margin:18px 0 6px}.loading-card p,.loading-card small{color:var(--muted)}.progress{height:8px;background:#1d2330;border-radius:99px;overflow:hidden;margin:18px 0 10px}.progress>div{height:100%;width:0;background:var(--accent);transition:width .18s ease}.loading-screen.done{opacity:0;pointer-events:none;transition:opacity .25s ease}
dialog{border:0;padding:0;background:transparent;color:var(--text);width:min(680px,calc(100% - 26px));max-height:88vh}dialog::backdrop{background:rgba(2,4,8,.72);backdrop-filter:blur(7px)}.dialog-card{background:#121722;border:1px solid #2a3241;border-radius:18px;padding:18px;max-height:88vh;overflow:auto}.dialog-head{display:flex;justify-content:space-between;align-items:start;border-bottom:1px solid var(--line);padding-bottom:12px}.dialog-head h2{margin:2px 0 0}.icon-btn{width:36px;height:36px;border-radius:10px;background:#1c2230;color:#d8dee7;font-size:20px}.setting-group{padding:15px 0;border-bottom:1px solid var(--line)}.setting-group.emphasized{background:#0e131b;margin:15px -2px 0;padding:15px;border:1px solid #313a49;border-radius:14px}.setting-title{font-weight:800}.setting-group p,.setting-note{color:var(--muted);font-size:12px;line-height:1.5}.range-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:10px}.range-grid label{font-size:12px;color:var(--muted)}select,input[type=number]{background:#0c1017;border:1px solid #30394a;color:var(--text);border-radius:9px;padding:9px}select{width:100%;margin-top:5px}.setting-row{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:15px 2px;border-bottom:1px solid var(--line)}.setting-row>div{display:flex;flex-direction:column;gap:4px}.setting-row small{color:var(--muted);line-height:1.35}.setting-row>input[type=number]{width:90px}.switch-row input{width:22px;height:22px;accent-color:var(--accent)}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;padding-top:16px}.dialog-actions.split{justify-content:space-between}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:15px 0}.stats-dialog h3{font-size:14px;margin:22px 0 8px}.histogram{display:flex;align-items:end;gap:5px;height:150px;padding:10px 0 24px}.bar-wrap{flex:1;min-width:22px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px}.bar{width:100%;max-width:36px;background:#7d8797;border-radius:5px 5px 2px 2px;min-height:2px}.bar.zero{background:var(--accent)}.bar-label{font-size:10px;color:var(--muted)}.bar-count{font-size:9px;color:#cbd2dc}
@media(max-width:650px){.topbar{padding-top:18px}.header-actions button{padding:9px 10px}.trainer{padding:13px}.cube-stage{min-height:280px;height:43vh}.quick-stats{grid-template-columns:repeat(2,1fr)}.stats-grid{grid-template-columns:repeat(2,1fr)}.result-score strong{font-size:23px}.main-actions{display:grid;grid-template-columns:1fr 1fr}.main-actions button{padding:13px 8px}.setting-row{align-items:flex-start}.dialog-actions.split{flex-direction:column}.dialog-actions.split button{width:100%}}

/* Answer-button UI */
.answer-area{padding:20px 2px 4px;text-align:left}
.answer-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:13px}
.answer-head .prompt{font-size:15px;font-weight:750;color:#e3e8ef}
.answer-hint{margin-top:4px;font-size:11px;color:var(--muted)}
.answer-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(74px,1fr));gap:9px}
.answer-choice{min-height:72px;border:1px solid #30394a;border-radius:14px;background:#0e131b;color:var(--text);font-size:30px;font-weight:850;font-variant-numeric:tabular-nums;transition:transform .08s ease,border-color .12s ease,background .12s ease;touch-action:manipulation}
.answer-choice:hover{border-color:#596579;background:#171e2a}
.answer-choice:active{transform:scale(.97)}
.answer-choice:focus-visible{outline:3px solid rgba(215,255,56,.24);outline-offset:2px;border-color:var(--accent)}
.answer-choice:disabled{opacity:.28}
.answer-choice .unit{display:block;font-size:9px;letter-spacing:.1em;color:var(--muted);margin-top:2px}
.answer-buttons.awaiting-start{grid-template-columns:1fr}
.answer-placeholder{min-height:72px;border:1px dashed #30394a;border-radius:14px;display:grid;place-items:center;color:var(--muted);font-size:13px;background:#0d1118}
.next-case-btn{white-space:nowrap;min-width:145px}
.trainer{overflow:hidden}
@media(max-width:650px){
  .answer-area{padding-top:16px}.answer-head{align-items:flex-end}.answer-head .prompt{font-size:14px}.next-case-btn{min-width:auto;padding:10px 12px}
  .answer-buttons{grid-template-columns:repeat(auto-fit,minmax(62px,1fr));gap:7px}.answer-choice{min-height:64px;font-size:27px;border-radius:12px}
}
.answer-choice:disabled{opacity:1;cursor:default}
.answer-choice.is-correct{border-color:var(--good);background:rgba(114,230,161,.12);color:var(--good);box-shadow:inset 0 0 0 1px rgba(114,230,161,.2)}
.answer-choice.is-selected-wrong{border-color:var(--bad);background:rgba(255,125,134,.1);color:var(--bad)}
.answer-choice.is-correct .unit,.answer-choice.is-selected-wrong .unit{color:currentColor;opacity:.7}


/* Local 3D cube: no CDN, works offline */
.cube-view{width:100%;height:100%;display:grid;place-items:center;perspective:900px;-webkit-user-select:none;user-select:none}
.cube-scene{--cube-size:clamp(170px,33vh,252px);width:var(--cube-size);height:var(--cube-size);position:relative;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;touch-action:none;cursor:grab}
.cube-scene.is-dragging{cursor:grabbing}
.cube-body{width:100%;height:100%;position:relative;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:transform .04s linear}
.cube-face{position:absolute;inset:-1px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:5px;padding:6px;background:#080a0e;border:2px solid #080a0e;border-radius:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 0 0 1px #080a0e;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;overflow:hidden}
.cube-sticker{border-radius:7px;border:1px solid rgba(0,0,0,.5);box-shadow:inset 0 1px 1px rgba(255,255,255,.2),inset 0 -1px 2px rgba(0,0,0,.18)}
.face-f{transform:translateZ(calc(var(--cube-size) / 2))}
.face-b{transform:rotateY(180deg) translateZ(calc(var(--cube-size) / 2))}
.face-r{transform:rotateY(90deg) translateZ(calc(var(--cube-size) / 2))}
.face-l{transform:rotateY(-90deg) translateZ(calc(var(--cube-size) / 2))}
.face-u{transform:rotateX(90deg) translateZ(calc(var(--cube-size) / 2))}
.face-d{transform:rotateX(-90deg) translateZ(calc(var(--cube-size) / 2))}
.offline-badge{font-size:9px;letter-spacing:.1em;font-weight:850;color:var(--good);border:1px solid rgba(114,230,161,.28);background:rgba(114,230,161,.08);border-radius:999px;padding:7px 9px;white-space:nowrap}
.install-hint{position:relative;margin:0 0 12px;padding:12px 46px 12px 14px;border:1px solid rgba(215,255,56,.24);background:rgba(215,255,56,.06);border-radius:14px;color:#dfe5ec;font-size:12px;line-height:1.5}
.install-hint .icon-btn{position:absolute;right:7px;top:7px;width:30px;height:30px;font-size:16px}
@media(max-width:650px){
  .cube-scene{--cube-size:clamp(160px,31vh,225px)}
  .cube-face{gap:4px;padding:5px;border-radius:0}.cube-sticker{border-radius:5px}
  .offline-badge{display:none}
}
@media(display-mode:standalone){.install-hint{display:none!important}}

.average-table-wrap{border:1px solid var(--line);border-radius:12px;overflow:auto;background:#0f131b}.average-table th,.average-table td{padding:10px 12px}.average-table td:first-child{font-weight:800}.average-table td:nth-child(2),.average-table td:nth-child(3){font-size:15px;font-weight:800}.average-note{margin:7px 2px 16px}


/* v6: iPad landscape + |Error|-first session UI */
.timer-wrap{opacity:.62}
.timer-wrap strong{font-size:20px}
.result-score{grid-template-columns:1.35fr 1fr 1fr}
.result-score .error-focus{border-color:rgba(215,255,56,.34);background:linear-gradient(180deg,rgba(215,255,56,.09),rgba(15,19,27,.96))}
.result-score .error-focus strong{font-size:38px;color:var(--accent)}
.err-abs{color:var(--bad)!important}

.metric-primary{border-color:rgba(215,255,56,.3);background:linear-gradient(180deg,rgba(215,255,56,.08),#0f131b)}
.metric-primary strong{color:var(--accent);font-size:27px}
.session-error-summary{margin:0 0 12px;padding:10px;border:1px solid var(--line);background:#0d1118;border-radius:12px}
.mini-section-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.mini-section-head>span:last-child{font-size:10px;color:var(--muted)}
.session-average-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.session-average{min-width:0;padding:8px;background:#111722;border:1px solid #232b39;border-radius:9px;display:grid;gap:2px}
.session-average>span{font-size:10px;color:var(--muted);font-weight:800}
.session-average strong{font-size:18px;font-variant-numeric:tabular-nums;color:var(--text)}
.session-average small{font-size:9px;color:var(--muted);white-space:nowrap}
.time-cell{color:var(--muted);font-size:11px}

@media(max-width:650px){
  .session-average-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .result-score{grid-template-columns:1.25fr 1fr 1fr}
  .result-score .error-focus strong{font-size:30px}
}

/* iPad landscape: left = result/session, right = cube/answer. No page scrolling. */
@media (orientation:landscape) and (min-width:700px) and (max-height:1000px){
  html,body{height:100%;min-height:0;overflow:hidden}
  body{background:radial-gradient(circle at 65% -20%,#182236 0,#0b0e14 42%)}
  .topbar{
    max-width:none;height:62px;margin:0;padding:9px max(14px,env(safe-area-inset-right)) 6px max(14px,env(safe-area-inset-left));
    align-items:center
  }
  .topbar h1{font-size:22px;margin-top:0}
  .topbar .eyebrow{font-size:9px}
  .header-actions{gap:6px}.header-actions .ghost{padding:8px 11px;font-size:12px}
  main{
    max-width:none;height:calc(100dvh - 62px);min-height:0;margin:0;
    padding:6px max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
    display:grid;grid-template-columns:minmax(330px,36%) minmax(0,64%);
    grid-template-rows:auto minmax(0,1fr);
    grid-template-areas:"result trainer" "session trainer";
    gap:9px;overflow:hidden
  }
  #installHint{position:fixed;z-index:40;left:12px;right:12px;top:66px;margin:0}
  .trainer{
    grid-area:trainer;height:100%;min-height:0;padding:10px 12px;
    display:flex;flex-direction:column;overflow:hidden
  }
  .case-head{flex:0 0 auto}
  .case-head strong{font-size:18px}.timer-wrap strong{font-size:16px}
  .cube-stage{flex:1 1 0;height:auto;min-height:0;overflow:hidden}
  .cube-help{display:none}
  .cube-scene{--cube-size:clamp(145px,29vh,225px)}
  .scramble-box{flex:0 0 auto;padding:8px 10px;border-radius:10px}
  .scramble-box #scramble{font-size:clamp(12px,1.55vw,16px);line-height:1.32;margin-top:3px;max-height:3.1em;overflow:auto}
  .answer-area{flex:0 0 auto;padding:9px 0 0}
  .answer-head{margin-bottom:7px;gap:8px}.answer-head .prompt{font-size:13px}.answer-hint{font-size:10px}
  .next-case-btn{padding:8px 10px;min-width:112px;font-size:12px}
  .answer-buttons{gap:6px;grid-template-columns:repeat(auto-fit,minmax(54px,1fr))}
  .answer-choice{min-height:49px;font-size:23px;border-radius:10px}
  .answer-choice .unit{font-size:7px}

  .result{
    grid-area:result;padding:10px 11px;min-height:0;max-height:38vh;overflow:auto
  }
  .result-score{gap:6px}.result-score>div{padding:8px;border-radius:9px;gap:2px}
  .result-score strong{font-size:20px}.result-score .error-focus strong{font-size:29px}
  .result-message{font-size:13px;padding:7px 1px}
  .solutions-head{padding-top:8px}.solutions-head .label{font-size:8px}
  .solutions-head strong{font-size:11px}.solutions-head .ghost{padding:6px 9px;font-size:11px}
  .solutions-wrap{max-height:18vh;margin-top:6px}.solution{padding:6px 8px;font-size:11px}

  .session{
    grid-area:session;min-height:0;padding:10px 11px;overflow:hidden;
    display:flex;flex-direction:column
  }
  .section-title{flex:0 0 auto}.section-title h2{font-size:16px;margin-top:1px}
  .section-title .ghost{padding:6px 9px;font-size:10px}
  .quick-stats{flex:0 0 auto;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:7px 0}
  .metric{padding:7px;border-radius:8px;min-width:0}.metric .label{font-size:8px;letter-spacing:.08em}
  .metric strong{font-size:16px;margin-top:2px}.metric-primary strong{font-size:20px}
  .session-error-summary{flex:0 0 auto;margin-bottom:7px;padding:7px}
  .mini-section-head{margin-bottom:5px}.session-average-grid{gap:4px}
  .session-average{padding:5px 6px;border-radius:7px}.session-average strong{font-size:14px}.session-average small{font-size:8px}
  .session-history{flex:1 1 0;min-height:0;overflow:auto;border-top:1px solid #202734}
  .session-history table{font-size:11px}
  .session-history th,.session-history td{padding:5px 5px;font-size:11px}
  .session-history th{font-size:8px}
}