:root{--app-height:100dvh;--answer-width:100%}

.training-page{overflow-x:hidden;transition:background-color .18s ease}
.training-page.feedback-correct{background-color:#e4f3eb}
.training-page.feedback-wrong{background-color:#f6e1dc}
.training-shell{
  position:relative;
  width:min(1040px,calc(100% - 32px));
  min-height:var(--app-height);
  margin:0 auto;
  padding:28px 0 40px;
  display:flex;
  flex-direction:column;
}
.training-shell::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.25;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E")
}
.training-site-header{position:relative;z-index:20}
.training-heading{
  position:relative;
  z-index:1;
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:30px;
  margin:30px 0 18px;
}
.training-heading .eyebrow{margin-bottom:8px}
.training-title{
  margin:0;
  font-family:var(--display);
  font-size:clamp(38px,5.4vw,64px);
  line-height:1.05;
  letter-spacing:-.055em;
}
.training-intro{margin:0 0 7px;color:var(--ink-soft);font-size:12px}

.training-board{
  position:relative;
  z-index:1;
  width:min(680px,100%);
  min-height:620px;
  margin:0 auto;
  padding:20px;
  display:flex;
  flex:1;
  flex-direction:column;
  border:2px solid var(--ink);
  border-radius:28px;
  background:#dff2e9;
  box-shadow:8px 8px 0 var(--ink);
  overflow:hidden;
}

.mode-backdrop{
  position:fixed;
  z-index:40;
  inset:0;
  display:none;
  background:rgba(23,37,45,.28)
}
.mode-backdrop.show{display:block}
.mode-panel{
  position:fixed;
  z-index:50;
  top:86px;
  left:50%;
  width:min(430px,calc(100% - 32px));
  max-height:calc(100dvh - 104px);
  padding:24px;
  overflow:auto;
  display:none;
  border:2px solid var(--ink);
  border-radius:24px;
  background:var(--paper);
  box-shadow:8px 8px 0 var(--ink);
  transform:translateX(-50%)
}
.mode-panel.show{display:block;animation:panel-in .18s ease both}
@keyframes panel-in{from{opacity:0;transform:translate(-50%,-10px) scale(.98)}to{opacity:1;transform:translateX(-50%) scale(1)}}
.mode-panel-title{margin:0 0 6px;font-family:var(--display);font-size:28px;font-weight:900}
.mode-group{margin-top:16px}
.mode-group:first-of-type{margin-top:18px}
.mode-group-title{margin-bottom:7px;color:var(--ink-soft);font-size:11px;font-weight:900;letter-spacing:.12em}
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mode-item{
  min-height:43px;
  padding:7px 10px;
  border:2px solid var(--ink);
  border-radius:12px;
  background:var(--white);
  font-size:12px;
  font-weight:850;
  box-shadow:2px 2px 0 var(--ink);
  cursor:pointer
}
.mode-item:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
.mode-item.active{background:var(--coral);box-shadow:3px 3px 0 var(--ink)}

.topbar{
  flex:0 0 auto;
  min-height:48px;
  display:grid;
  grid-template-columns:110px minmax(0,1fr) 110px;
  align-items:center;
  gap:10px
}
.menu-trigger,.quick-toggle,.sound-toggle,.reference-toggle{
  min-height:42px;
  border:2px solid var(--ink);
  border-radius:999px;
  background:var(--white);
  font-size:12px;
  font-weight:900;
  box-shadow:2px 2px 0 var(--ink);
  cursor:pointer
}
.menu-trigger:active,.quick-toggle:active,.sound-toggle:active,.reference-toggle:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
.mode-title{
  min-width:0;
  margin:0;
  overflow:hidden;
  color:var(--ink);
  font-family:var(--display);
  font-size:22px;
  font-weight:900;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap
}
.quick-toggle{justify-self:end;width:110px;padding:0 13px;display:flex;align-items:center;justify-content:center;gap:9px;color:var(--ink-soft)}
.quick-toggle.hidden{visibility:hidden;pointer-events:none}
.quick-toggle-track{position:relative;width:32px;height:19px;flex:0 0 auto;border:2px solid var(--ink);border-radius:999px;background:var(--paper-deep)}
.quick-toggle-dot{position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;background:var(--ink);transition:transform .16s ease}
.quick-toggle.active{background:var(--sun);color:var(--ink)}
.quick-toggle.active .quick-toggle-dot{transform:translateX(13px)}

.top-info{flex:0 0 auto;margin-top:12px}
.stats{
  width:100%;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:2px solid var(--ink);
  border-radius:18px;
  background:var(--white);
  box-shadow:4px 4px 0 var(--ink);
  overflow:hidden
}
.stats.hidden{display:none}
.stat{min-width:0;padding:10px 4px;text-align:center;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:var(--display);font-size:23px;line-height:1}
.stat span{display:block;margin-top:4px;color:var(--ink-soft);font-size:10px;font-weight:850}

.reference-wrap{margin-top:16px;text-align:center}
.training-tools{display:flex;align-items:center;justify-content:center;gap:10px}
.sound-toggle,.reference-toggle{min-height:36px;padding:0 14px;border-width:1.5px;box-shadow:none}
.sound-toggle.active{background:var(--sun)}
.training-tools.quick-mode .sound-toggle,.training-tools.quick-mode .volume-control{display:none}
.volume-control{width:100px;accent-color:var(--mint)}
.volume-control:disabled{opacity:.4}
.reference-table{display:none;margin-top:9px;padding:9px;border:2px solid var(--ink);border-radius:15px;background:var(--white)}
.reference-table.show{display:block}
.ref-grid{display:grid;grid-template-columns:repeat(var(--ref-count),minmax(0,1fr));gap:5px}
.ref-cell{min-width:0;padding:6px 2px;border-radius:9px;background:var(--paper);font-size:10px}
.ref-cell strong,.ref-cell span,.ref-cell em{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ref-cell strong{font-family:var(--display);font-size:15px}
.ref-cell span{margin-top:1px;font-weight:850}
.ref-cell em{margin-top:1px;color:var(--ink-soft);font-style:normal}

.main{
  min-height:0;
  padding:20px 0 10px;
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  align-items:center;
  justify-content:center
}
.question-card{
  position:relative;
  width:min(390px,76vw);
  min-height:245px;
  padding:22px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:2px solid var(--ink);
  border-radius:26px;
  background:var(--white);
  box-shadow:7px 7px 0 var(--ink);
  transition:background .16s ease,transform .16s ease
}
.question-card::after{content:"";position:absolute;width:150px;height:150px;right:-75px;bottom:-80px;border:22px solid rgba(23,37,45,.055);border-radius:50%;pointer-events:none}
.question-card.state-correct{background:#ccebdc;transform:translateY(-2px)}
.question-card.state-wrong{background:#f3c9c1;animation:shake .22s ease}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.source-label{position:absolute;top:16px;left:18px;padding:5px 10px;border:1.5px solid var(--ink);border-radius:999px;background:var(--white);font-size:14px;font-weight:900}
.question-value{min-height:116px;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:clamp(92px,14vw,138px);font-weight:900;line-height:.9;letter-spacing:-.055em}
.question-value.word{font-size:clamp(58px,10vw,90px)}
.question-value.long{font-size:clamp(42px,7vw,64px)}
.prompt-line{position:relative;z-index:1;min-height:22px;margin-top:8px;color:var(--ink-soft);font-size:12px;font-weight:900;text-align:center}
.feedback-text{flex:0 0 28px;padding-top:9px;font-size:12px;font-weight:900;text-align:center}
.feedback-text.ok{color:var(--mint)}
.feedback-text.bad{color:var(--coral-dark)}

.footer{flex:0 0 auto;width:100%;padding-top:6px}
.layout-switch{width:min(310px,86%);margin:0 auto 10px;padding:3px;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;border:1.5px solid var(--ink);border-radius:999px;background:var(--white)}
.layout-switch.hidden{display:none}
.layout-option{height:31px;border:0;border-radius:999px;background:transparent;color:var(--ink-soft);font-size:10px;font-weight:900;cursor:pointer}
.layout-option.active{background:var(--ink);color:var(--white)}
.answer-area{width:var(--answer-width);transition:width .16s ease,margin .16s ease}
.footer.left .answer-area{width:min(74%,430px);margin-right:auto}
.footer.right .answer-area{width:min(74%,430px);margin-left:auto}
.footer.full .answer-area,.footer.string-mode .answer-area,.footer.quick-mode .answer-area{width:100%;margin:0 auto}

.choice-grid{display:grid;grid-template-columns:repeat(var(--choice-count,7),minmax(0,1fr));gap:8px}
.choice-button{
  min-width:0;
  height:56px;
  padding:0 3px;
  border:2px solid var(--ink);
  border-radius:14px;
  background:var(--white);
  font-family:var(--display);
  font-size:16px;
  font-weight:900;
  box-shadow:3px 3px 0 var(--ink);
  cursor:pointer
}
.choice-button:active:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.choice-button.long-choice{font-family:var(--body);font-size:10px}
.choice-button.pending-selected{background:var(--sun)}
.choice-button.selected-correct,.choice-button.reveal-correct{background:var(--mint);color:var(--white)}
.choice-button.selected-wrong{background:var(--coral);color:var(--white)}
.choice-button:disabled{cursor:default;opacity:1}

.triple-stack{display:grid;gap:9px}
.triple-row{padding:8px;border:2px solid var(--ink);border-radius:15px;background:rgba(255,253,248,.6)}
.triple-row.locked{opacity:.5}
.triple-row-label{margin-bottom:6px;color:var(--ink-soft);font-size:10px;font-weight:900}

.string-board{
  position:relative;
  display:grid;
  gap:0;
  padding:8px 15px 8px 0;
  overflow:hidden;
  border:2px solid var(--ink);
  border-radius:17px;
  background:linear-gradient(90deg,#e2a66d 0 59px,#bf7548 59px 100%);
  box-shadow:4px 4px 0 var(--ink),inset 0 0 0 3px rgba(255,253,248,.18);
}
.string-board::before,.string-board::after{
  content:"";
  position:absolute;
  z-index:2;
  top:7px;
  bottom:7px;
  width:4px;
  border-radius:4px;
  background:var(--white);
  box-shadow:1px 0 0 var(--ink),-1px 0 0 var(--ink);
  pointer-events:none;
}
.string-board::before{left:58px}
.string-board::after{right:13px;background:#8c5136}
.string-row{position:relative;min-height:42px;padding:0 12px 0 0;display:grid;grid-template-columns:59px 1fr;align-items:center;border:0;border-radius:8px;background:transparent;color:var(--ink);box-shadow:none;cursor:pointer}
.string-row:hover:not(:disabled){background:rgba(255,253,248,.18)}
.string-row:focus-visible{z-index:3;outline:2px solid var(--white);outline-offset:-3px}
.string-row.correct-string{background:var(--mint);color:var(--white)}
.string-row.wrong-string{background:var(--coral);color:var(--white)}
.string-label{position:relative;z-index:3;font-family:var(--display);font-size:14px;font-weight:900;text-align:center}
.string-line-wrap{height:100%;display:flex;align-items:center}
.string-line{width:100%;height:max(1.5px,var(--thickness));background:#eee5d7;box-shadow:0 1px 0 rgba(23,37,45,.72)}
.string-row.correct-string .string-line,.string-row.wrong-string .string-line{background:currentColor}
.quick-next-button{width:100%;height:58px;border:2px solid var(--ink);border-radius:15px;background:var(--ink);color:var(--white);font-weight:900;box-shadow:4px 4px 0 var(--coral);cursor:pointer}
.quick-next-button:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--coral)}

@media (max-width:760px){
  .training-page{height:100dvh;overflow:hidden}
  .training-shell{width:min(calc(100% - 24px),620px);height:var(--app-height);min-height:0;padding:max(18px,env(safe-area-inset-top)) 0 max(12px,env(safe-area-inset-bottom))}
  .training-site-header{min-height:42px}
  .training-site-header .brand-mark{width:38px;height:38px;box-shadow:3px 3px 0 var(--ink);font-size:20px}
  .training-site-header .brand-text{display:none}
  .training-site-header .header-action{min-height:38px;padding:0 11px;gap:5px;border-radius:12px;box-shadow:2px 2px 0 var(--ink);font-size:11px}
  .training-heading{align-items:center;margin:14px 0 13px}
  .training-heading .eyebrow,.training-intro{display:none}
  .training-title{font-size:34px;letter-spacing:-.04em}
  .training-board{width:100%;min-height:0;padding:12px;border-radius:23px;box-shadow:5px 5px 0 var(--ink)}
  .topbar{min-height:40px;grid-template-columns:88px minmax(0,1fr) 88px;gap:6px}
  .menu-trigger,.quick-toggle{min-height:36px;font-size:10px;border-width:1.5px;box-shadow:none}
  .quick-toggle{width:88px;padding:0 8px;gap:5px}
  .mode-title{font-size:17px}
  .top-info{margin-top:8px}
  .stat{padding:7px 2px}
  .stat b{font-size:19px}
  .training-tools{gap:7px}
  .sound-toggle,.reference-toggle{min-height:32px;padding:0 11px;font-size:10px}
  .volume-control{width:78px}
  .reference-wrap{margin-top:13px}
  .reference-table{margin-top:6px;padding:6px}
  .ref-cell{padding:4px 1px;font-size:8px}
  .ref-cell strong{font-size:12px}
  .main{padding:10px 0 5px}
  .question-card{width:min(330px,90%);min-height:0;height:min(230px,31vh);padding:16px;border-radius:21px;box-shadow:5px 5px 0 var(--ink)}
  .source-label{top:11px;left:12px;padding:4px 8px;font-size:14px}
  .question-value{min-height:90px;font-size:clamp(78px,28vw,116px)}
  .question-value.word{font-size:clamp(48px,17vw,72px)}
  .question-value.long{font-size:clamp(35px,12vw,52px)}
  .prompt-line{margin-top:4px;font-size:10px}
  .feedback-text{flex-basis:24px;padding-top:6px;font-size:10px}
  .footer{padding-top:3px}
  .layout-switch{margin-bottom:7px}
  .layout-option{height:27px}
  .choice-grid{gap:5px}
  .choice-button{height:49px;border-radius:11px;font-size:14px;box-shadow:2px 2px 0 var(--ink)}
  .choice-button.long-choice{font-size:8px}
  .triple-stack{gap:5px}
  .triple-row{padding:5px}
  .triple-row-label{margin-bottom:4px;font-size:8px}
  .string-board{gap:0;padding-block:6px;border-radius:14px;box-shadow:3px 3px 0 var(--ink),inset 0 0 0 2px rgba(255,253,248,.18)}
  .string-board::before,.string-board::after{top:5px;bottom:5px}
  .string-row{min-height:38px;border-radius:7px}
  .quick-next-button{height:52px}
  .mode-panel{top:60px;max-height:calc(100dvh - 72px);padding:18px;border-radius:20px;box-shadow:5px 5px 0 var(--ink)}
}

@media (max-height:720px) and (max-width:760px){
  .training-shell{padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom))}
  .training-heading{margin-block:8px}
  .training-title{font-size:29px}
  .training-board{padding:10px}
  .stats{border-radius:14px}
  .stat{padding-block:5px}
  .question-card{height:min(190px,27vh)}
  .choice-button{height:44px}
}

@media (prefers-reduced-motion:reduce){
  .mode-panel.show,.question-card.state-wrong{animation:none}
}