/* TONÁTICA / UI revision 2 — minimal, responsive, independent of the exercise engine.
   Brand red sampled directly from assets/logo.png: #FF4338. */
:root {
  --red:#ff4338;
  --red-dark:#d82f25;
  --red-pale:#fff1ee;
  --ink:#191919;
  --ink-soft:#494846;
  --muted:#76716f;
  --line:#eae6e2;
  --paper:#ffffff;
  --canvas:#f9f8f6;
  --success:#267b56;
  --success-pale:#f0f8f2;
  font-family:Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont,"Segoe UI",Arial,"Noto Sans JP","Noto Sans SC",sans-serif;
  color:var(--ink);
  background:var(--canvas);
}
*{box-sizing:border-box}
body{background:var(--canvas);color:var(--ink)}
button,input,textarea,select{font-family:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[role="button"]:focus-visible{outline:3px solid #ff9b92;outline-offset:3px}
::selection{background:#ffdedb;color:#65150f}
a{text-underline-offset:3px}
.shell{align-items:stretch}
/* Navigation: a white, editorial rail with a conspicuous but restrained active marker. */
.sidebar{width:236px;flex-shrink:0;background:#fff;color:var(--ink);border-right:1px solid var(--line);padding:27px 14px 20px}
.brand{padding:3px 10px 31px;gap:11px}
.brand-logo{width:41px;height:41px;border-radius:11px;border:1px solid #ffede9;background:white}
.brand-title{color:var(--ink);font-size:1.24rem;font-weight:790;letter-spacing:-.055em}
.brand-sub{color:var(--red-dark);font-size:.60rem;letter-spacing:.12em;font-weight:760}
.nav{gap:4px}
.nav button{width:100%;background:transparent;border:1px solid transparent;border-radius:10px;color:#6a6561;padding:12px 13px;text-align:left;display:flex;align-items:center;gap:13px;font-size:.91rem;font-weight:630;position:relative;transition:background .15s,border-color .15s,transform .16s,color .15s}
.nav svg,.feature-icon svg,.btn svg{stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.nav button:hover{background:#faf8f7;color:var(--ink);transform:translateX(2px)}
.nav button.active{background:var(--red-pale);color:var(--red-dark);border-color:#ffdfdc}
.nav button.active:before{content:"";position:absolute;left:0;top:25%;height:50%;width:3px;border-radius:0 4px 4px 0;background:var(--red)}
.nav button.active:hover{transform:none}
.nav svg{width:20px;height:20px;flex-shrink:0}
.nav-label{white-space:nowrap}
.sidebar-bottom{border-top:1px solid var(--line);padding:17px 10px 0}
.sidebar-bottom p{color:#928b86;font-size:.72rem;max-width:200px}
.status-pill{color:#736c68;font-weight:620}
/* Workspace */
.main{max-width:1560px;padding:0 clamp(25px,4.5vw,76px) 110px}
.topbar{height:92px;border-bottom:1px solid var(--line);margin-bottom:31px}
.eyebrow,.kicker{color:var(--red-dark);font-size:.69rem;letter-spacing:.16em;font-weight:790;text-transform:uppercase}
.topcontrols{gap:9px}
.select-small{color:#37312e;background:white;border:1px solid var(--line);border-radius:10px;font-size:.78rem;min-width:100px;padding:10px 11px;font-weight:670}
.select-small:hover{border-color:#c6bdb7}
.user-chip{background:#fff;border:1px solid var(--line);color:#58504c;font-size:.75rem;padding:6px 10px;border-radius:9px}
.avatar-mini{background:var(--red-pale);color:var(--red-dark);border-radius:6px}
.page{animation:page-enter .27s cubic-bezier(.22,.8,.2,1) both}
@keyframes page-enter{from{opacity:.3;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
h1,h2,h3{color:var(--ink)}
h1{font-family:Georgia,"Noto Serif",serif;font-weight:700;letter-spacing:-.057em;line-height:1.08}
h2{letter-spacing:-.055em;font-weight:790}
h3{font-weight:750}
p{line-height:1.55}
.muted,.panel p,.section-head p,.page-heading p,.subtle-note,.result-hint{color:var(--muted)}
.accent{color:var(--red-dark)}
/* Hero illustration is deliberately the only large visual on the home screen. */
.hero{background:#fff6f4;border:1px solid #ffede8;border-radius:18px;min-height:350px;padding:clamp(30px,4.6vw,65px);margin:0 0 30px;overflow:hidden;box-shadow:none}
.hero:before{background:#ffe4dd;width:420px;height:420px;right:-86px;bottom:-330px;opacity:.9}
.hero:after{content:"";height:100%;width:4px;background:var(--red);position:absolute;top:0;left:0}
.hero-copy{max-width:61%;z-index:2}
.hero-copy h1{font-size:clamp(2.7rem,4.5vw,4.9rem);max-width:670px;margin:15px 0 15px}
.hero-copy p{font-size:1rem;max-width:490px;color:#5e5350;margin:0 0 29px}
.hero-image{max-height:100%;height:97%;right:-12px;bottom:0;object-position:bottom right;filter:drop-shadow(-10px 12px 17px #7e393416);pointer-events:none}
/* Buttons should feel like physical controls without decorative gradients. */
.btn{background:var(--red);border:1px solid var(--red);color:#fff;font-weight:750;border-radius:10px;min-height:46px;padding:12px 19px;box-shadow:0 3px 0 #d72d23;transform:translateY(0);transition:background .15s,box-shadow .15s,transform .13s}
.btn svg{width:18px;height:18px}
.btn:hover{background:var(--red-dark);border-color:var(--red-dark);transform:translateY(-2px);box-shadow:0 5px 0 #ad261d}
.btn:active{transform:translateY(3px);box-shadow:0 0 0 #d72d23;transition-duration:.06s}
.btn.secondary{background:#fff;border-color:#dfd8d4;color:var(--ink-soft);box-shadow:0 2px 0 #e9e5e1}
.btn.secondary:hover{background:#faf8f7;border-color:#c9bfba;box-shadow:0 3px 0 #ded8d2}
.btn.ghost{background:transparent;color:var(--ink-soft);border:0;box-shadow:none}
.btn.warn{background:#a73f38;border-color:#a73f38;box-shadow:none}
.btn.small{min-height:36px;font-size:.8rem;padding:8px 12px}
.btn:disabled{transform:none;box-shadow:none}
/* Cards and dashboard */
.section-head{margin:36px 0 17px}
.section-head h2,.page-heading h2{font-size:clamp(1.55rem,3vw,2.45rem)}
.section-head p,.page-heading p{font-size:.93rem}
.page-heading{margin:4px 0 28px}
.page-heading .kicker{display:block;margin-bottom:13px}
.panel{border:1px solid var(--line);border-radius:15px;padding:25px;background:white;box-shadow:0 3px 20px #1e161008}
.panel.clickable{transition:transform .18s cubic-bezier(.23,.8,.2,1),border-color .18s,box-shadow .18s}
.panel.clickable:hover,.panel.clickable:focus-visible{transform:translateY(-4px);border-color:#ffc7c0;box-shadow:0 9px 25px #36231a13}
.panel.clickable:active{transform:translateY(0)}
.panel h3{font-size:1.12rem;letter-spacing:-.03em}
.panel p{font-size:.85rem;margin:0}
.cards3,.cards2{gap:15px}
.feature-icon{height:44px;width:44px;background:var(--red-pale);color:var(--red-dark);border-radius:10px;margin-bottom:28px}
.feature-icon svg{height:23px;width:23px}
.card-arrow{color:var(--red);font-weight:700;font-size:1.3rem}
.mini-banner{border:1px solid #f0dcd7;background:#fff8f6;padding:18px 22px;border-radius:13px}
.mini-banner p{color:#857571}
/* Setup should scan like a form, not a wall of controls. */
.form-section{border-top:1px solid var(--line);padding:23px 0}
.form-section h3{font-size:.95rem;margin:0 0 14px}
.segmented{gap:7px}
.segmented button{background:#fff;color:#645c58;border:1px solid #e1dcd8;border-radius:9px;padding:10px 15px;font-size:.86rem;font-weight:680;transition:background .15s,border-color .15s,transform .12s}
.segmented button:hover{border-color:#ffaaa3;background:#fff8f7}
.segmented button:active{transform:scale(.97)}
.mode-segmented button{display:inline-flex;align-items:center;gap:9px;min-height:46px}.mode-segmented button svg{width:19px;height:19px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.segmented button.selected{background:var(--red-pale);color:#c72b22;border-color:#ff8c82}
.tense-option{border-radius:9px;background:#fff;border:1px solid var(--line);color:#494440;font-size:.84rem;padding:12px;transition:background .15s,border-color .15s}
.tense-option:hover{border-color:#ffb5af}
.tense-option:has(input:checked){background:#fff5f3;border-color:#ff8f85;color:#a82920}
.tense-option input,.switchline input{accent-color:var(--red);width:17px;height:17px}
.text-btn{color:var(--red-dark);font-size:.81rem;border-radius:6px}
.text-btn:hover{text-decoration:underline}
.setup-actions{border-color:var(--line)}
/* Drills: a large, red tense name and three compact model conjugations. */
.quiz-outer{max-width:890px}
.quiz-meta{color:#817974;font-size:.82rem;margin-bottom:11px}
.progress-track{background:#efe9e6;height:5px;margin-bottom:21px}
.progress-track>div{background:var(--red);border-radius:99px;transition:width .28s cubic-bezier(.3,.8,.2,1)}
.quiz-card{background:white;border:1px solid var(--line);border-radius:17px;padding:clamp(22px,4vw,40px);box-shadow:0 7px 25px #39251c0b;transition:box-shadow .2s}
.tense-heading{padding:0 0 24px;margin-bottom:25px;border-bottom:1px solid var(--line)}
.tense-overline{display:flex;align-items:center;gap:8px;font-size:.69rem;letter-spacing:.17em;font-weight:800;color:#ad4b41}
.tense-overline-rule{width:16px;height:3px;background:var(--red);border-radius:2px;display:inline-block}
.tense-title{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,"Noto Sans JP","Noto Sans SC",sans-serif;font-weight:840;font-size:clamp(2.15rem,5.1vw,3.8rem);color:var(--red-dark);letter-spacing:-.065em;line-height:1.06;max-width:780px;overflow-wrap:break-word;margin:13px 0 24px}
.model-heading{color:#89807b;font-size:.65rem;font-weight:820;letter-spacing:.125em;margin:0 0 10px}
.model-heading span{font-size:.72rem;letter-spacing:normal;text-transform:none;font-weight:600}
.model-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid #f0e6e2;border-radius:10px;background:#fcfaf9;overflow:hidden}
.model-item{padding:13px 16px;min-width:0;display:flex;flex-direction:column;gap:6px}
.model-item+.model-item{border-left:1px solid #eee7e3}
.model-inf{font-size:.77rem;color:#887d76;font-weight:620}
.model-class{color:#c0a49b}
.model-item strong{font-size:clamp(.9rem,1.5vw,1.04rem);color:#29211f;font-weight:780;letter-spacing:-.025em;overflow-wrap:break-word;line-height:1.35}
.quiz-top{gap:8px;margin-bottom:6px}
.tag{background:#f7f4f1;color:#625b55;border:1px solid #e8e1da;border-radius:7px;padding:5px 10px;font-weight:670}
.tag.orange{background:#fff6f3;color:#a84238;border-color:#f7d9d2}
.infinitive{font-size:clamp(2.4rem,5vw,3.8rem);font-weight:810;color:var(--ink);letter-spacing:-.065em;margin:12px 0 2px}
.small-gloss{color:#8b817a;font-size:.91rem;margin-bottom:25px}
.question-text{color:#292724;font-weight:560;font-size:clamp(1.2rem,2.2vw,1.6rem);line-height:1.65;margin:12px 0 24px}
.blank{border-bottom:2px solid var(--red);color:var(--red-dark)}
.answer-label{color:#665b55;font-weight:700}
.answer-input{background:#fff;border:2px solid #e8ddd7;color:var(--ink);border-radius:10px;padding:16px 18px;font-size:1.2rem}
.answer-input:focus{border-color:var(--red);outline:none;box-shadow:0 0 0 3px #ff43381b}
.answer-input:disabled{background:#f9f7f5;color:#69615c}
.quiz-actions{gap:10px;margin-top:22px}
.quiz-actions .btn{flex:1}
.quiz-exit{margin-top:13px}
/* Correct, typo/accent and incorrect feedback use different tactile motifs. */
.response{display:flex;align-items:flex-start;gap:15px;padding:18px 19px;background:var(--success-pale);color:#245f44;border:1px solid #b6d9c0;border-radius:12px;margin:18px 0 4px;animation:feedback-land .3s cubic-bezier(.23,1.15,.28,1) both}
.response.wrong{background:#fff1ef;border-color:#ffb2a9;color:#923126}
.response.notice{background:#fffaf1;border-color:#eadab8;color:#78603b}
.response strong{color:inherit;display:block;font-size:1.02rem;letter-spacing:-.012em;margin-bottom:6px}
.response p{font-size:.82rem;color:inherit}
.response-copy{flex:1;min-width:0}
.feedback-stamp{flex-shrink:0;width:43px;height:43px;background:#267b56;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:0 3px 0 #155237;animation:stamp-in .38s cubic-bezier(.12,1.4,.3,1) both}
.feedback-stamp.is-wrong{background:var(--red);box-shadow:0 3px 0 #b62b21;animation:stamp-in .38s cubic-bezier(.12,1.4,.3,1) both, stamp-shake .26s .37s both}
.feedback-stamp.is-warning{background:#ad8850;box-shadow:0 3px 0 #755c36}
.feedback-stamp svg{width:23px;height:23px;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;fill:none}
.quiz-card.feedback-wrong{animation:wrong-nudge .26s .08s ease-out both}
@keyframes feedback-land{0%{opacity:.6;transform:translateY(8px)}100%{opacity:1;transform:translateY(0)}}
@keyframes stamp-in{0%{transform:scale(.45) rotate(-15deg);opacity:.2}65%{transform:scale(1.16) rotate(3deg);opacity:1}100%{transform:scale(1) rotate(0deg);opacity:1}}
@keyframes stamp-shake{0%,100%{rotate:0}20%{rotate:-9deg}60%{rotate:8deg}}
@keyframes wrong-nudge{0%,100%{transform:translateX(0)}30%{transform:translateX(-3px)}65%{transform:translateX(3px)}}
/* Secondary screens inherit the same visual language. */
.score-big{color:var(--red-dark)}
.metric{background:#f9f7f5}
.metric .value,.stat-percent,.subscore b{color:var(--ink)}
.bar-bg{background:#f0eae6}
.bar-bg span{background:var(--red)}
.estimated{color:#867f7a}
.tense-details{border-color:var(--line)}
.tense-details summary:hover{color:var(--red-dark)}
.achievement{background:#fff8f6;border-color:#f3d5cd;color:#8f4a40}
.achievement.locked{background:#f8f7f6;color:#8a8581;border-color:#ebe7e3}
.challenge-badge{background:#fff1ee;color:#b6372a}
.challenge-card img{opacity:.14;mix-blend-mode:multiply}
.warning-note{border-color:#ecd9c4;background:#fffaf3;color:#88633d}
.field,.field input,.field textarea,.field select{color:var(--ink-soft)}
.field input,.field textarea,.field select{border-color:var(--line)}
.modal-backdrop{background:#221c1b8e}
.modal{border-radius:16px}
.studio-table td,.studio-table th{border-color:var(--line)}
.studio-table th{color:var(--muted)}
.lock-panel .lock-icon{color:var(--red)}
.loading-screen{color:var(--red-dark)}
/* Smaller screens use an anchored, icon-first navigation with readable labels. */
@media(max-width:1100px){
  .sidebar{width:210px}
  .main{padding-left:30px;padding-right:30px}
  .hero-image{right:-40px;opacity:1}
}
@media(max-width:780px){
  .shell{display:block}
  .sidebar{height:65px;position:sticky;top:0;z-index:12;padding:9px 20px;flex-direction:row;justify-content:space-between;align-items:center;border-right:0;border-bottom:1px solid var(--line);box-shadow:0 2px 10px #35221c0a}
  .brand{padding:0;gap:8px}
  .brand-logo{width:37px;height:37px}
  .brand-title{font-size:1.07rem}
  .brand-sub{font-size:.53rem}
  .nav{position:fixed;bottom:0;left:0;right:0;z-index:14;height:calc(63px + env(safe-area-inset-bottom));display:flex;justify-content:space-around;gap:1px;padding:5px 5px calc(4px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);box-shadow:0 -3px 16px #2b221e0a;overflow-x:auto;max-width:none}
  .nav button{flex:1;min-width:58px;max-width:120px;height:54px;padding:5px 3px;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:9px;font-size:.66rem;line-height:1.1;white-space:nowrap}
  .nav button:hover{transform:none}
  .nav button.active{border-color:transparent;background:#fff3f0}
  .nav button.active:before{height:3px;left:31%;top:0;width:38%;border-radius:0 0 5px 5px}
  .nav button svg{width:19px;height:19px;min-width:19px}
  .nav-label{width:100%;text-align:center;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:clamp(.55rem,1.75vw,.66rem)}
  .sidebar-bottom{display:none}
  .main{padding:0 20px calc(105px + env(safe-area-inset-bottom))}
  .topbar{margin-bottom:24px;height:67px;border-bottom:0}
  .eyebrow{display:none}
  .topcontrols{width:100%;justify-content:flex-end}
  .select-small{min-width:94px;font-size:.77rem}
  .user-chip{font-size:.69rem}
  .hero{min-height:330px;padding:31px 26px;align-items:flex-start;border-radius:15px}
  .hero-copy{max-width:71%}
  .hero-copy h1{font-size:clamp(2.3rem,6vw,3.25rem)}
  .hero-copy p{font-size:.89rem;max-width:345px}
  .hero-image{height:80%;right:-80px;bottom:0;opacity:.42}
  .cards3,.cards2,.stats-layout{grid-template-columns:1fr}
  .cards3{gap:12px}
  .panel{padding:22px}
  .check-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mini-banner{flex-direction:column;align-items:flex-start}
  .quiz-card{padding:25px}
  .quiz-actions{flex-direction:column}
  .quiz-actions .btn{width:100%}
  .tense-title{font-size:clamp(2.3rem,7vw,3.15rem)}
  .model-item{padding:13px 11px}
  .setup-actions{align-items:stretch;flex-direction:column}
  .setup-actions .btn{width:100%}
  .radar-card{min-height:210px}
}
@media(max-width:470px){
  .sidebar{padding:8px 15px}
  .brand-logo{width:34px;height:34px}
  .main{padding-left:14px;padding-right:14px}
  .select-small{min-width:85px;padding:8px 5px}
  .user-chip{display:none}
  .hero{min-height:344px;padding:24px 22px}
  .hero-copy{max-width:100%}
  .hero-copy h1{font-size:2.42rem;max-width:390px}
  .hero-copy p{max-width:250px}
  .hero-image{height:54%;right:-29px;bottom:0;opacity:.3}
  .check-grid{grid-template-columns:1fr}
  .tense-heading{margin-bottom:18px;padding-bottom:19px}
  .tense-title{font-size:2.3rem;margin-bottom:20px}
  .model-item{padding:11px 8px;gap:8px}
  .model-inf{font-size:.73rem}
  .model-item strong{font-size:.83rem;line-height:1.25}
  .quiz-card{padding:19px 16px}
  .infinitive{font-size:2.55rem}
  .response{padding:13px 12px;gap:11px}
  .feedback-stamp{width:35px;height:35px}
  .feedback-stamp svg{width:20px;height:20px}
}
/* Motion is optional and feedback is always readable without animation. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* === Open edition refinements === */
.tone-open .sidebar-bottom{border-top-color:#e7dcd6}
.sound-toggle{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:11px;padding:10px 12px;color:var(--ink-soft);font-size:.82rem;font-weight:650}
.sound-toggle svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sound-toggle.off{opacity:.75}
.warm-hero{min-height:320px;background:linear-gradient(180deg,#fbfaf8,#f7f1ee 70%);border:1px solid var(--line)}
.hero-note{font-size:.86rem;color:#7e746f;max-width:640px;margin-top:14px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.kicker{display:inline-block;font-size:.72rem;letter-spacing:.16em;font-weight:800;color:#c44539;text-transform:uppercase}
.editorial-grid .feature-tile,.editorial-grid>.panel{min-height:240px}
.feature-tile{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.feature-tile p{flex:1}
.inline-link{display:inline-flex;align-items:center;gap:7px;margin-top:20px;color:var(--red-dark);font-weight:700;font-size:.9rem}
.inline-link svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.stats-panel{display:flex;flex-direction:column;justify-content:space-between}
.stats-stack{display:flex;gap:20px;flex-wrap:wrap;margin-top:20px}
.stat-number{font-size:2.5rem;font-weight:840;letter-spacing:-.07em;color:var(--ink)}
.stat-caption{font-size:.85rem;color:#7f7772}
.editorial-head h2{margin-top:10px}
.setup-panel.refined{position:relative;padding:28px 28px 24px;border-radius:22px}
.setup-intro{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
.setup-mini{color:#8d817a;font-size:.9rem}
.setup-spotlight{width:120px;max-width:22vw;object-fit:contain;opacity:.94}
.builder-block{padding:20px 0;border-top:1px solid var(--line)}
.builder-block:first-of-type{border-top:0;padding-top:8px}
.builder-label{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.builder-label>div{flex:1}
.builder-label h3{margin:0 0 4px;font-size:1.2rem;letter-spacing:-.03em}
.builder-label p{margin:0;color:#827771;font-size:.92rem}
.step-ball{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--red);color:#fff;font-weight:820;flex-shrink:0}
.mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mode-card{border:1px solid var(--line);background:#fff;border-radius:16px;padding:17px 16px;display:flex;align-items:center;gap:12px;text-align:left;color:var(--ink);transition:border-color .15s,box-shadow .15s,transform .15s}
.mode-card:hover{border-color:#ffb5af;transform:translateY(-1px)}
.mode-card.selected{background:#fff6f4;border-color:#ff9389;box-shadow:0 7px 18px #ff433810}
.mode-card .mode-copy{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.mode-card .mode-copy strong{font-size:1.1rem;letter-spacing:-.03em}
.mode-card .mode-copy span{font-size:.88rem;color:#7c726d;line-height:1.45}
.mode-card .mode-arrow{color:var(--red);display:grid;place-items:center}
.mode-card .mode-arrow svg,.mode-illustration svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mode-illustration{width:46px;height:46px;border-radius:12px;background:#fff0ed;color:var(--red-dark);display:grid;place-items:center;flex-shrink:0}
.primary-mode .mode-illustration{background:linear-gradient(180deg,#fff3ef,#ffe4de)}
.tense-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tense-choice{border:1px solid var(--line);background:#fff;border-radius:13px;padding:13px 14px;text-align:left;display:flex;flex-direction:column;gap:8px;min-height:92px;color:var(--ink)}
.tense-choice:hover{border-color:#ffb5af}
.tense-choice.selected{background:#fff6f4;border-color:#ff9389}
.tense-choice-top{display:flex;gap:10px;align-items:flex-start}
.tense-choice-name{font-weight:760;line-height:1.25;letter-spacing:-.02em}
.checkbox-fake{width:20px;height:20px;border-radius:6px;border:1px solid #efc9c3;display:grid;place-items:center;background:#fff;color:var(--red);font-size:.8rem;flex-shrink:0}
.tense-choice.selected .checkbox-fake{background:var(--red);border-color:var(--red);color:#fff}
.tense-choice-example{color:#8a7f79;font-size:.84rem}
.rich-segmented button{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:180px;min-height:76px}
.rich-segmented button strong{font-size:.96rem}
.rich-segmented button span{font-size:.81rem;line-height:1.35;color:#7d756f}
.split-block{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:end}
.friendly-toggle{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:14px;padding:16px;background:#fcfbfa}
.friendly-toggle input{margin-top:4px;accent-color:var(--red)}
.friendly-toggle strong{display:block;font-size:.95rem}
.friendly-toggle span{display:block;color:#837972;font-size:.84rem;line-height:1.45;margin-top:4px}
.pill-row{display:flex;gap:10px;flex-wrap:wrap}
.pill-button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 16px;font-weight:700;color:#6f6761}
.pill-button.selected{background:#fff4f2;border-color:#ff9389;color:var(--red-dark)}
.refined-actions{margin-top:8px}
.quiz-top-refined{margin-bottom:10px}
.person-badge{font-size:.78rem;padding:8px 12px}
.question-stack{margin:10px 0 6px}
.translation-line{font-size:.95rem;color:#7d746f;margin-top:-4px;margin-bottom:16px}
.translation-reveal{margin-bottom:14px}
.answer-block{margin-top:8px}
.audio-pill{margin-left:auto;align-self:center;border-radius:999px;background:#eef8f0;color:#29744f;padding:8px 12px;font-size:.78rem;font-weight:700;white-space:nowrap}
.audio-pill.wrong{background:#fff2f0;color:#b33a2e}
.response{align-items:center}
.response p{margin:6px 0 0}
.result-wrap{margin-top:30px}
.result-panel{text-align:center;padding:42px}
.compact-metrics{margin-top:26px;text-align:left}
.stage-summary{text-align:left;margin-top:22px}
.result-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.map-panel{padding:24px;border-radius:22px}
.map-topbar{display:flex;justify-content:space-between;gap:12px;align-items:end;margin-bottom:16px}
.map-select{min-width:200px}
.map-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.map-tabs button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 14px;font-weight:700;color:#6e6660}
.map-tabs button.active{background:#fff5f3;border-color:#ff9389;color:var(--red-dark)}
.map-matrix{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.map-head{padding:6px 4px 0;color:#8b817b;font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.map-cell{border:1px solid var(--line);background:#fff;border-radius:14px;padding:16px;text-align:left;min-height:88px;display:flex;flex-direction:column;justify-content:space-between;gap:8px;color:var(--ink)}
.map-cell:hover{border-color:#ffb5af}
.map-cell.selected{background:#fff6f4;border-color:#ff9389;box-shadow:0 7px 20px #ff433810}
.map-cell strong{font-size:.98rem;line-height:1.2;letter-spacing:-.02em}
.map-cell span{font-size:.82rem;color:#8a7f79}
.map-cell.empty{visibility:hidden}
.map-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.map-detail{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.map-detail-head .tense-heading{border-bottom:0;padding-bottom:6px;margin-bottom:10px}
.inner-panel{padding:20px}
.conj-list{display:grid;gap:10px}
.conj-row{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.conj-row:last-child{border-bottom:0}
.conj-row span{color:#7b726d}
.conj-row strong{text-align:right;color:var(--ink)}
.example-box{padding:16px;border-radius:14px;background:#fcfaf8;border:1px solid var(--line)}
.example-es{font-size:1.02rem;color:var(--ink);margin-bottom:12px}
.example-tr{font-size:.93rem;color:#7e746f;margin-bottom:0}
.modal header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.modal .field{display:block;margin-top:14px}
.modal .field input,.modal .field textarea,.modal .field select{margin-top:7px;width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:12px;background:#fff}
.modal .field textarea{min-height:140px;resize:vertical}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
@media(max-width:900px){
  .mode-grid,.tense-choice-grid,.cards3,.cards2,.split-block,.map-matrix,.map-strip,.map-detail-grid{grid-template-columns:1fr!important}
  .setup-spotlight{display:none}
}
@media(max-width:780px){
  .hero-note{max-width:unset}
  .sound-toggle span{display:none}
  .map-topbar{flex-direction:column;align-items:stretch}
  .map-select{min-width:0;width:100%}
}

/* V3 — Editorial Warm × Dynamic Focus. Restraint before decoration. */
:root{--ink:#212020;--red:#FF4338;--red-dark:#D62E26;--paper:#f8f7f5;--line:#e9e1dd;--muted:#817873}
.tone-open .main{max-width:1550px}
.tone-open .sidebar{background:#fffdfc;border-right:1px solid var(--line)}
.tone-open .brand-title{color:var(--ink)}
.tone-open .nav button{transition:background .15s ease,transform .15s ease}
.tone-open .nav button:active,.tone-open .btn:active{transform:translateY(2px)}
.tone-open .page-heading h2{font-family:Georgia,'Times New Roman',serif;font-weight:750;letter-spacing:-.055em;font-size:clamp(2.25rem,3.5vw,3.3rem)}
.tone-open .page-heading{margin-top:4px;margin-bottom:23px}
.tone-open .page-heading p{margin-top:6px;line-height:1.5}
.tone-open .panel{box-shadow:0 7px 26px #4d2f2210}
.tone-open .hero{border-radius:19px}
.tone-open .warm-hero{background:linear-gradient(112deg,#fffdfb 0%,#faf4ef 66%,#f4e9e2 100%);box-shadow:0 6px 25px #4c38220a}
.tone-open .hero:before{width:360px;height:360px;right:40px;bottom:-190px;background:#fff0ea;opacity:.65}
.tone-open .hero-copy h1{font-family:Georgia,'Times New Roman',serif;letter-spacing:-.055em;font-weight:760}
.tone-open .hero-image{object-position:right bottom;object-fit:contain;height:91%;max-width:38%;right:0;bottom:-13px;opacity:1;filter:drop-shadow(0px 6px 5px #4329220d)}
.tone-open .hero-copy{max-width:60%}
.tone-open .hero-note{font-size:.78rem;max-width:540px}
.tone-open .setup-panel.refined{box-shadow:0 6px 25px #4d2f2210;padding:20px 30px 28px}
.tone-open .setup-intro{height:67px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:0}
.tone-open .setup-mini{font-family:Georgia,serif;font-style:italic;font-size:1rem;color:#9b7267}
.tone-open .setup-spotlight{width:127px;height:80px;object-fit:contain;transform:translateY(-1px)}
.tone-open .mode-grid.mode-grid-editorial{display:grid;grid-template-columns:1.8fr 1fr 1fr;gap:12px}
.tone-open .mode-card{min-height:114px;padding:18px 15px;border-radius:11px;box-shadow:0 2px 1px #bca69b18}
.tone-open .mode-card.selected{box-shadow:0 4px 0 #ec786f33,0 9px 22px #e7544310}
.tone-open .mode-card.primary-mode .mode-copy strong{font-family:Georgia,'Times New Roman',serif;font-size:1.22rem;letter-spacing:-.04em}
.tone-open .mode-card.primary-mode.selected{background:linear-gradient(145deg,#fff3f1 0%,#fffdfd 94%)}
.tone-open .mode-illustration{border-radius:0;background:transparent;width:76px;height:75px}
.tone-open .mode-illustration img{display:block;width:100%;height:100%;object-fit:contain}
.tone-open .mode-card:not(.primary-mode) .mode-illustration{width:46px;height:60px;align-self:center}
.tone-open .mode-card .mode-arrow{border:1px solid #efd1cb;border-radius:50%;width:30px;height:30px;flex-shrink:0}
.tone-open .mode-card .mode-arrow svg{width:16px}
.tone-open .builder-block{padding:22px 0}
.tone-open .step-ball{box-shadow:0 2px 0 #bb2d25;border:1px solid #eb493f}
.tone-open .builder-label h3{font-family:Georgia,'Times New Roman',serif;font-size:1.18rem;font-weight:700}
.tone-open .tense-choice{border-radius:10px;min-height:78px;padding:12px 14px;transition:transform .12s,border-color .12s}
.tone-open .tense-choice:active{transform:translateY(2px)}
.tone-open .rich-segmented button{flex:1;border-radius:10px}
.tone-open .friendly-toggle{border-radius:10px;background:#fcfaf8}
.tone-open .pill-button{border-radius:8px}
.tone-open .quiz-card{border-radius:17px}
.tone-open .tense-title{font-family:Georgia,'Times New Roman',serif;font-size:clamp(2.8rem,5.4vw,4.5rem);line-height:1.09;font-weight:750;letter-spacing:-.062em}
.tone-open .model-grid{background:#faf7f5;border-radius:10px}
.tone-open .quiz-top{margin-top:5px}
.tone-open .person-badge{background:#fff0ec;color:#a82f26;font-size:.92rem;font-weight:800;padding:9px 14px;border-radius:9px}
.tone-open .infinitive{font-size:clamp(2.7rem,5vw,4.2rem);margin-top:15px}
.tone-open .small-gloss{font-size:.9rem;margin-bottom:28px}
.tone-open .question-stack{padding:8px 0 21px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.tone-open .question-text{font-family:Georgia,'Times New Roman',serif;font-size:clamp(1.3rem,2.65vw,1.83rem);font-weight:660;line-height:1.6;color:#2a2624;margin:0 0 12px}
.tone-open .translation-line{font-size:.94rem;line-height:1.5;margin:4px 0 0;color:#7c756f}
.tone-open .answer-label{display:block;margin:4px 0 10px;font-size:.86rem;color:#625853}
.tone-open .answer-input{padding:17px 19px}
.tone-open .response{margin-top:20px;margin-bottom:12px;box-shadow:0 2px 0 #4f37200b}
.tone-open .response.wrong{background:#fff0ee;border-color:#ffaba0}
.tone-open .response.notice{background:#fffaf1}
.tone-open .quiz-actions{margin-top:20px}
.tone-open .quiz-actions .btn{min-height:52px}
.tone-open .btn{border-radius:10px;box-shadow:0 3px 0 #b83128;transition:transform .14s,box-shadow .14s,background .14s}
.tone-open .btn.secondary{box-shadow:0 2px 0 #e6dad4}
.tone-open .btn:active{box-shadow:none;transform:translateY(2px)}
.tone-open .review-badge{display:inline-flex;gap:6px;align-items:center;border:1px solid #e7cc9d;background:#fff9ea;color:#805f31;border-radius:8px;padding:8px 10px;font-size:.8rem;font-weight:750}
.tone-open .review-badge svg{stroke:currentColor;fill:none;stroke-width:2;width:16px;height:16px}
.tone-open .correction-label{color:#a53026;font-weight:780;font-size:1.01rem;letter-spacing:-.01em}
.tone-open .correcting-input{border-color:#fda59d;background:#fffdfb}
.tone-open .assessment-disclaimer{font-size:.81rem;color:#80766f;margin:11px 0 0;line-height:1.4}
.tone-open .result-followup{display:flex;align-items:center;text-align:left;justify-content:space-between;gap:16px;margin:26px auto;padding:19px 23px;background:#fff5f2;border:1px solid #efc8c0;border-radius:13px}
.tone-open .result-followup strong{font-family:Georgia,serif;font-size:1.15rem}
.tone-open .result-followup p{margin:7px 0 0;font-size:.88rem;color:#7d6c65}
.tone-open .review-list{margin-top:18px}
.tone-open .review-line{padding:13px 0;display:flex;justify-content:space-between;gap:10px;align-items:center;border-bottom:1px solid var(--line)}
.tone-open .review-line:last-child{border-bottom:none}
.tone-open .review-line strong{display:block}
.tone-open .review-line span{display:block;color:#847971;font-size:.83rem;margin-top:4px}
.tone-open .review-line .due-tag,.tone-open .review-line .later-tag{padding:6px 9px;border-radius:7px;border:1px solid #e9c3b9;color:#b2362c;font-size:.76rem;white-space:nowrap}
.tone-open .review-line .later-tag{border-color:#e8e0dc;color:#746b65}
.tone-open .radar-card svg{min-width:230px}
.tone-open .tense-details summary{cursor:pointer}
.tone-open .tense-details[open] summary{color:var(--red-dark)}
@keyframes correction-nudge{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}55%{transform:translateX(5px)}80%{transform:translateX(-3px)}}
.tone-open .correction-nudge{animation:correction-nudge .27s ease-in-out}
@media(max-width:1030px){
 .tone-open .mode-grid.mode-grid-editorial{grid-template-columns:1.4fr 1fr}
 .tone-open .mode-card:last-child{grid-column:1/-1}
}
@media(max-width:780px){
 .tone-open .hero-copy{max-width:80%}
 .tone-open .hero-image{height:61%;max-width:48%;right:-40px;opacity:.5}
 .tone-open .mode-grid.mode-grid-editorial{grid-template-columns:1fr 1fr}
 .tone-open .mode-grid .primary-mode{grid-column:1/-1}
 .tone-open .mode-card:last-child{grid-column:auto}
 .tone-open .mode-card{min-height:96px}
 .tone-open .result-followup{flex-direction:column;align-items:stretch}
 .tone-open .nav button{min-width:49px;max-width:none}
}
@media(max-width:490px){
 .tone-open .mode-grid.mode-grid-editorial{grid-template-columns:1fr}
 .tone-open .mode-grid .primary-mode,.tone-open .mode-card:last-child{grid-column:auto}
 .tone-open .setup-panel.refined{padding:15px 15px 18px}
 .tone-open .tense-choice-grid{grid-template-columns:1fr 1fr!important}
 .tone-open .tense-choice{padding:10px;min-height:88px}
 .tone-open .tense-choice-top{gap:7px}
 .tone-open .tense-choice-name{font-size:.85rem}
 .tone-open .tense-choice-example{font-size:.77rem}
 .tone-open .hero-image{height:44%;right:-29px;opacity:.25}
 .tone-open .hero-copy{max-width:100%}
 .tone-open .nav{overflow-x:auto;justify-content:flex-start}
 .tone-open .nav button{min-width:52px;flex:1}
}
@media(prefers-reduced-motion:reduce){.tone-open .correction-nudge{animation:none}}
.tone-open .tense-scroll{max-height:505px;overflow:auto;scrollbar-width:thin}
.tone-open .studio-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.tone-open .studio-actions{display:flex;gap:9px;flex-wrap:wrap}
.tone-open .studio-scroll{max-height:620px;overflow:auto}
.tone-open .studio-modal{max-height:min(85vh,900px);overflow:auto}
.tone-open .modal .studio-modal .field{margin-top:12px}
.tone-open .stat-row-title{font-weight:660}
@media(max-width:780px){.tone-open .studio-top{align-items:flex-start}}


/* Muchos Verbos / Tonática — compact, two-name identity.
   The original Tonática mark remains the primary family signifier. */
.tone-open .brand.mv-brand{
  display:flex;flex-direction:column;align-items:stretch;
  gap:9px;padding:5px 10px 24px;min-width:0;
}
.tone-open .mv-parent-brand{
  display:flex;align-items:center;gap:9px;
  padding:0 0 10px;border-bottom:1px solid var(--line);
  color:var(--ink);text-decoration:none;min-width:0;
}
.tone-open .mv-parent-brand .brand-logo{
  width:39px;height:39px;flex:none;border-radius:10px;
  border:1px solid #ffede9;background:white;object-fit:contain;
}
.tone-open .mv-parent-wordmark{
  font-weight:830;font-size:1.25rem;letter-spacing:-.05em;
  line-height:1.1;white-space:nowrap;
}
.tone-open .mv-parent-brand:hover .mv-parent-wordmark,
.tone-open .mv-parent-brand:focus-visible .mv-parent-wordmark{color:var(--red-dark)}
.tone-open .mv-parent-brand:focus-visible,
.tone-open .mv-product-home:focus-visible{
  outline:2px solid var(--red);outline-offset:3px;border-radius:4px;
}
.tone-open .mv-product-home{
  display:block;min-width:0;width:100%;background:transparent;
  border:0;padding:0;text-align:left;cursor:pointer;color:var(--ink);
}
.tone-open .mv-product-name{
  display:block;min-width:0;font-family:Georgia,'Times New Roman',serif;
  font-size:1.65rem;font-weight:700;letter-spacing:-.06em;
  line-height:1.1;white-space:normal;overflow-wrap:normal;
}
.tone-open .mv-product-home:hover .mv-product-name{color:var(--red-dark)}
.tone-open .hero .mv-home-parent{
  color:var(--red-dark);font-size:.72rem;letter-spacing:.085em;
  text-transform:uppercase;
}
.tone-open .hero-copy .mv-hero-name{
  color:var(--ink);font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(3.05rem,5.1vw,5.2rem);
  font-weight:760;letter-spacing:-.073em;line-height:1.04;
  max-width:630px;margin:13px 0 16px;
}
.tone-open .mv-hero-name span{color:var(--red)}
.tone-open .hero-copy p.mv-hero-promise{
  color:#302824;font-size:clamp(1.12rem,2vw,1.42rem);
  font-weight:680;letter-spacing:-.035em;line-height:1.3;
  max-width:540px;margin:0 0 11px;
}
.tone-open .hero{min-height:415px}
.tone-open .hero-copy{max-width:66%}

/* Mobile: the branding rail becomes a normal, non-sticky header.
   The existing bottom navigation remains fixed and fully functional. */
@media(max-width:780px){
  .tone-open .sidebar{
    position:relative;top:auto;z-index:1;
    width:100%;height:auto;min-height:54px;
    padding:9px 14px;display:flex;align-items:center;
    border-right:0;border-bottom:1px solid var(--line);
    box-shadow:none;overflow:visible;
  }
  .tone-open .brand.mv-brand{
    width:100%;flex-direction:row;align-items:center;
    gap:clamp(6px,2vw,11px);min-width:0;padding:0;
  }
  .tone-open .mv-parent-brand{
    flex:0 0 auto;gap:6px;padding:0;border:0;
  }
  .tone-open .mv-parent-brand .brand-logo{
    width:30px;height:30px;border-radius:8px;
  }
  .tone-open .mv-parent-wordmark{font-size:clamp(.83rem,2.5vw,1.05rem)}
  .tone-open .mv-product-home{
    flex:1 1 0;width:auto;min-width:0;
    min-height:32px;display:flex;align-items:center;
    padding-left:clamp(6px,2vw,11px);
    border-left:1px solid var(--line);
  }
  .tone-open .mv-product-name{
    font-size:clamp(.95rem,3.1vw,1.15rem);
    line-height:1.13;white-space:normal;overflow-wrap:break-word;
  }
  .tone-open .topbar{height:auto;min-height:0;padding:9px 0 5px;margin-bottom:14px}
  .tone-open .topcontrols{gap:7px}
  .tone-open .hero{min-height:440px}
  .tone-open .hero-copy{max-width:85%}
  .tone-open .hero-copy .mv-hero-name{font-size:clamp(2.8rem,7.8vw,4.2rem)}
}
@media(max-width:490px){
  .tone-open .sidebar{padding:8px 10px;min-height:50px}
  .tone-open .brand.mv-brand{gap:6px}
  .tone-open .mv-parent-brand{gap:5px}
  .tone-open .mv-parent-brand .brand-logo{width:28px;height:28px}
  .tone-open .mv-parent-wordmark{font-size:.84rem}
  .tone-open .mv-product-home{padding-left:7px;min-height:29px}
  .tone-open .mv-product-name{font-size:clamp(.90rem,3.65vw,1.03rem)}
  .tone-open .hero{min-height:480px}
  .tone-open .hero-copy{max-width:100%}
  .tone-open .hero-copy .mv-hero-name{font-size:clamp(2.55rem,11vw,3.6rem)}
  .tone-open .hero-copy p.mv-hero-promise{font-size:1.12rem}
}

/* UI simplification — one global preference, context-sensitive practice controls.
   Original Tonática illustration and branding are intentionally untouched. */
.tone-open .topbar{
  height:66px;min-height:58px;margin-bottom:19px;
  border-bottom:0;justify-content:flex-end;
}
.tone-open .topbar .topcontrols{margin-left:auto;gap:0}
.tone-open .language-only{
  min-width:155px;max-width:100%;font-size:.85rem;
  padding:10px 13px;border-radius:10px;
}
.tone-open .dialect-builder .builder-label{margin-bottom:12px}
.tone-open .dialect-options{display:flex;gap:10px;flex-wrap:wrap;max-width:560px}
.tone-open .dialect-option{
  flex:1 1 170px;min-height:44px;border:1px solid var(--line);
  background:white;color:var(--ink-soft);border-radius:10px;
  padding:10px 17px;text-align:center;font-weight:670;
  transition:background .15s,border-color .15s;
}
.tone-open .dialect-option:hover{border-color:#ffb0a9;background:#fffaf8}
.tone-open .dialect-option.selected{
  border-color:var(--red);background:var(--red-pale);
  color:var(--red-dark);
}
.tone-open .dialect-option.selected:after{content:' ●';font-size:.75em}
.tone-open .practice-audio-bar{
  display:flex;justify-content:flex-end;
  margin:0 0 12px;
}
.tone-open .practice-audio-bar .sound-toggle{
  min-height:38px;padding:7px 11px;
}
@media(max-width:780px){
  .tone-open .topbar{height:auto;min-height:45px;padding:8px 0 3px;margin-bottom:12px}
  .tone-open .language-only{min-width:135px;font-size:.8rem;padding:8px 10px}
  .tone-open .dialect-options{gap:8px}
  .tone-open .dialect-option{flex-basis:140px}
}
@media(max-width:420px){
  .tone-open .dialect-option{flex:1 1 100%;min-height:42px}
}

/* Muchos Verbos hero 2026-10: compact reference-led layout.
   Generated environment is illustrative; NO character is generated or substituted. */
.tone-open .topbar{height:52px;min-height:48px;margin-bottom:10px}
.tone-open .hero.warm-hero{
  min-height:358px;margin:0 0 18px;padding:32px clamp(26px,3.4vw,48px);
  border-radius:16px;background:#fff8f5;border:1px solid #f0e6e1;
  box-shadow:0 8px 24px #44322508;
}
.tone-open .hero.warm-hero:before{display:none}
.tone-open .hero-copy{max-width:53%;width:53%;z-index:3}
.tone-open .hero-copy .mv-hero-name{
  font-size:clamp(2.65rem,4.3vw,4.25rem);
  line-height:1.04;letter-spacing:-.065em;
  margin:13px 0 12px;
}
.tone-open .hero-copy p.mv-hero-promise{
  font-size:clamp(1.08rem,1.55vw,1.24rem);line-height:1.28;margin:0 0 9px;
}
.tone-open .hero-copy > p:not(.mv-hero-promise){
  font-size:.95rem;line-height:1.48;color:#766f6a;
  max-width:480px;margin-bottom:23px;
}
.tone-open .hero-copy .mv-home-parent{font-size:.7rem}
.tone-open .hero-actions{gap:9px;flex-wrap:wrap}
.tone-open .hero-actions .btn{min-height:44px;padding:11px 16px}
.tone-open .mv-hero-art{
  position:absolute;inset:0 0 0 auto;width:56%;
  z-index:1;overflow:hidden;pointer-events:none;
}
.tone-open .mv-hero-scene{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;
}
.tone-open .mv-board-demo{
  position:absolute;left:43%;top:17%;width:34%;height:49%;
  transform:rotate(-1deg);
  display:flex;flex-direction:column;gap:10px;
  color:#2a2725;font-family:'Segoe Print','Bradley Hand','Comic Sans MS',cursive;
  white-space:nowrap;
}
.tone-open .mv-board-title{font-size:clamp(14px,1.35vw,20px);font-weight:700;line-height:1}
.tone-open .mv-board-rows{
  display:grid;grid-template-columns:45% 55%;
  grid-auto-rows:minmax(21px,1fr);column-gap:4px;
  font-size:clamp(9px,.96vw,13px);line-height:1.13;
}
.tone-open .mv-board-rows b{color:#ed3429;font-weight:800}
.tone-open .cards3.editorial-grid .feature-card{border-color:#eee7e2}
@media(max-width:1080px) and (min-width:781px){
  .tone-open .hero.warm-hero{min-height:335px;padding:26px}
  .tone-open .hero-copy{max-width:55%;width:55%}
  .tone-open .mv-hero-art{width:53%}
  .tone-open .mv-board-demo{top:18%;gap:7px}
  .tone-open .mv-board-rows{grid-auto-rows:minmax(17px,1fr);font-size:10px}
}
@media(max-width:780px){
  .tone-open .topbar{height:auto;min-height:42px;margin-bottom:7px}
  .tone-open .hero.warm-hero{
    min-height:590px;padding:28px 22px 0;
    display:block;margin-bottom:17px;
  }
  .tone-open .hero-copy{width:100%;max-width:100%;position:relative;z-index:3}
  .tone-open .hero-copy .mv-hero-name{font-size:clamp(2.6rem,9vw,3.6rem);margin:10px 0 12px}
  .tone-open .hero-copy p.mv-hero-promise{font-size:1.1rem}
  .tone-open .hero-copy>p:not(.mv-hero-promise){
    font-size:.89rem;line-height:1.4;max-width:440px;margin-bottom:16px;
  }
  .tone-open .hero-actions .btn{min-height:41px;padding:9px 13px;font-size:.82rem}
  .tone-open .mv-hero-art{
    top:auto;bottom:0;left:0;right:0;width:100%;height:275px;z-index:1;
  }
  .tone-open .mv-hero-scene{object-fit:cover;object-position:53% 47%}
  .tone-open .mv-board-demo{
    left:39%;top:15%;width:36%;gap:7px;transform:rotate(-1deg);
  }
  .tone-open .mv-board-title{font-size:14px}
  .tone-open .mv-board-rows{font-size:9px;grid-auto-rows:minmax(17px,1fr)}
}
@media(max-width:490px){
  .tone-open .hero.warm-hero{min-height:575px;padding:24px 18px 0}
  .tone-open .hero-copy .mv-hero-name{font-size:clamp(2.48rem,10.2vw,3.18rem)}
  .tone-open .mv-hero-art{height:260px}
  .tone-open .mv-board-demo{top:16%;left:41%;width:34%;gap:6px}
  .tone-open .mv-board-rows{font-size:8px;grid-auto-rows:minmax(16px,1fr);column-gap:2px}
  .tone-open .mv-board-title{font-size:13px}
}

/* Chalk teacher: original uploaded by owner, never redraw or modify internally. */
.tone-open .mv-hero-art{background:#fff5f2;isolation:isolate}
.tone-open .mv-hero-scene{
  object-fit:contain;object-position:center center;
  inset:0;width:100%;height:100%;
}
/* Reframe the full physical object (including its top frame) inside the hero,
   rather than zooming with object-fit:cover and clipping the board's edges. */
.tone-open .mv-hero-teacher{
  position:absolute;left:0;bottom:-2%;width:51%;height:79%;
  object-fit:contain;object-position:left bottom;
  z-index:2;pointer-events:none;
}
.tone-open .mv-board-demo{
  left:34%;top:17%;width:34%;height:54%;
  transform:perspective(750px) rotateY(-5deg) rotateZ(-1.35deg) skewY(-.6deg);
  transform-origin:top left;gap:8px;z-index:3;
  font-family:'Segoe Print','Comic Sans MS','Bradley Hand',cursive;
  font-weight:550;text-shadow:0 .3px #26201e16;
}
.tone-open .mv-board-title{font-size:clamp(17px,1.65vw,24px);font-weight:750}
.tone-open .mv-board-rows{
  font-size:clamp(11px,1.04vw,15px);
  grid-auto-rows:minmax(24px,1fr);
}
@media(max-width:1080px) and (min-width:781px){
  .tone-open .mv-hero-teacher{left:0;width:49%;height:73%}
  .tone-open .mv-board-demo{left:35%;top:18%;width:35%;gap:6px}
  .tone-open .mv-board-title{font-size:18px}
  .tone-open .mv-board-rows{font-size:11px;grid-auto-rows:minmax(20px,1fr)}
}
@media(max-width:780px){
  .tone-open .mv-hero-scene{object-fit:contain;object-position:center center}
  .tone-open .mv-hero-teacher{
    left:1%;bottom:0;width:54%;height:77%;
  }
  .tone-open .mv-board-demo{
    left:35%;top:18%;width:35%;height:55%;
    transform:perspective(550px) rotateY(-5deg) rotateZ(-1.25deg) skewY(-.4deg);
    gap:5px;
  }
  .tone-open .mv-board-title{font-size:clamp(13px,2.6vw,17px)}
  .tone-open .mv-board-rows{font-size:clamp(8.5px,1.65vw,11px);grid-auto-rows:minmax(17px,1fr)}
}
@media(max-width:490px){
  .tone-open .mv-hero-teacher{left:0;width:53%;height:75%}
  .tone-open .mv-board-demo{left:35%;top:18%;width:36%;gap:4px}
  .tone-open .mv-board-title{font-size:14px}
  .tone-open .mv-board-rows{font-size:9px;grid-auto-rows:minmax(17px,1fr)}
}

/* Draft direction v3: unchanged teacher. Native scene framing overrides below. */
.tone-open .mv-hero-art{overflow:hidden}
.tone-open .mv-hero-scene{
  inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 48%;
}
.tone-open .mv-hero-teacher{
  width:68%;height:101%;left:-2%;bottom:-13%;
  object-fit:contain;object-position:left bottom;z-index:2;
}
/* Flag images use SVG geometry, not emoji font fallback. */
.tone-open .topbar .topcontrols{position:relative;z-index:15}
.tone-open .mv-lang-menu{position:relative;min-width:148px}
.tone-open .mv-lang-menu>summary{
  display:flex;align-items:center;gap:9px;cursor:pointer;
  background:#fff;border:1px solid #e5ddd9;border-radius:11px;
  min-height:39px;padding:8px 12px;color:#25201d;
  font-size:13px;font-weight:650;list-style:none;
}
.tone-open .mv-lang-menu>summary::-webkit-details-marker{display:none}
.tone-open .mv-flag-svg{
  display:block;width:22px;height:16px;flex:none;
  border-radius:2px;box-shadow:0 0 0 .6px #1b181821;
}
.tone-open .mv-lang-chevron{margin-left:auto;font-size:19px;line-height:1;color:#6c6561}
.tone-open .mv-lang-options{
  position:absolute;right:0;top:calc(100% + 4px);width:100%;
  min-width:158px;background:#fff;border:1px solid #e6ddd8;
  border-radius:10px;box-shadow:0 9px 30px #281b1828;
  overflow:hidden;z-index:40;
}
.tone-open .mv-lang-options button{
  width:100%;display:flex;align-items:center;gap:9px;
  background:#fff;border:0;padding:11px 12px;
  font-size:13px;color:#2f2824;text-align:left;cursor:pointer;
}
.tone-open .mv-lang-options button:hover,
.tone-open .mv-lang-options button[aria-current="true"]{background:#fff0ed}
.tone-open .mv-lang-menu summary:focus-visible,
.tone-open .mv-lang-options button:focus-visible{outline:2px solid #ff4338;outline-offset:2px}
@media(max-width:1080px) and (min-width:781px){
  .tone-open .mv-hero-teacher{width:67%;height:98%;left:-2%;bottom:-14%}
}
@media(max-width:780px){
  .tone-open .mv-hero-scene{object-fit:cover;object-position:50% 50%}
  .tone-open .mv-hero-teacher{
    width:66%;height:100%;left:0;bottom:-13%;
  }
}
@media(max-width:490px){
  .tone-open .mv-hero-teacher{width:69%;height:103%;left:-3%;bottom:-16%}
}

/* Native board lettering: one coordinate system for image and text at every size.
   No rasterization, cropping, new artwork or platform-dependent build fonts. */
.tone-open .mv-scene-frame{
  position:relative;left:auto;top:auto;width:100%;aspect-ratio:3/2;
  transform:none;container-type:inline-size;
}
.tone-open .mv-scene-frame .mv-hero-scene{
  position:absolute;inset:6% auto auto 12%;width:88%;height:88%;object-fit:contain;
}
.tone-open .mv-scene-frame .mv-board-demo{
  display:block;inset:0;width:100%;height:100%;
  transform:translateX(-4%);z-index:1;
  background:url('./assets/board-lettering.svg') center/100% 100% no-repeat;
}
.tone-open .mv-scene-frame .mv-board-title,
.tone-open .mv-scene-frame .mv-board-rows{
  /* Keep exact Spanish text for assistive technology; the visible ink is paths. */
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
/* Scene, native lettering and teacher share the art's fixed coordinate system.
   The art determines its own height instead of being clipped by the copy height. */
.tone-open .mv-hero-art{
  position:relative;inset:auto;width:100%;height:auto;aspect-ratio:3/2;
  min-width:0;margin:0;align-self:center;
}
.tone-open .mv-hero-art > .mv-hero-teacher{
  position:absolute;inset:auto auto -13% 0;width:68%;height:auto;
  aspect-ratio:1;object-fit:contain;object-position:left bottom;
}
/* Let translated copy determine mobile height; artwork follows in normal flow. */
@media(max-width:780px){
  .tone-open .hero.warm-hero{min-height:0;padding-bottom:0}
  .tone-open .mv-hero-art{
    position:relative;inset:auto;width:calc(100% + 36px);margin:16px -18px 0;
    height:auto;aspect-ratio:3/2;
  }
}
/* Keep copy and the literal teacher clear of the board text. */
@media(min-width:781px){
  .tone-open .hero.warm-hero{
    display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    align-items:center;gap:12px;padding:28px 24px 28px 32px;
  }
  .tone-open .hero-copy{width:100%;max-width:100%;min-width:0}
  .tone-open .hero-copy .mv-hero-name{font-size:clamp(2.1rem,3.1vw,3.4rem)}
}

/* Availability is supporting information; keep the session action dominant. */
.availability-summary{margin-bottom:20px;font-size:.85rem;color:#746e68}
.availability-summary strong{font-weight:400}

/* Provisional subbrand direction: live text, self-hosted type, original artwork. */
@font-face{
  font-family:'MV Roboto Serif';src:url('./assets/roboto-serif-black-latin.woff2') format('woff2');
  font-style:normal;font-weight:900;font-display:swap;
}
.tone-open .hero-copy .mv-hero-name{
  font-family:'MV Roboto Serif',Georgia,serif;font-weight:900;font-synthesis:none;
  font-size:clamp(3.4rem,5.6vw,5.25rem);line-height:.88;letter-spacing:-.055em;
  max-inline-size:7.2ch;margin:17px 0 14px;color:#08090a;
}
.tone-open .hero-copy p.mv-hero-promise{
  font-family:Georgia,'Times New Roman',serif;font-weight:400;
  font-size:clamp(1.15rem,1.8vw,1.65rem);line-height:1.14;letter-spacing:-.035em;
}
.tone-open .hero-copy>p:not(.mv-hero-promise){
  font-family:Georgia,'Times New Roman',serif;font-size:1rem;line-height:1.28;
}
.tone-open .mv-product-name{font-family:'MV Roboto Serif',Georgia,serif;font-weight:900;font-synthesis:none}
@media(min-width:781px){
  .tone-open .brand.mv-brand{gap:25px;padding-bottom:18px}
  .tone-open .mv-parent-brand{border-bottom:0;padding-bottom:0}
  .tone-open .mv-product-home{border-left:2px solid var(--red);padding:0 0 0 10px}
  .tone-open .mv-product-name{font-size:.95rem;font-weight:900;letter-spacing:-.035em;line-height:1.25;white-space:nowrap}
}
@media(max-width:780px){
  .tone-open .hero-copy .mv-hero-name{font-size:clamp(3.1rem,14vw,4.8rem);max-inline-size:7.2ch;line-height:.9}
  .tone-open .mv-product-name{font-weight:900;letter-spacing:-.03em}
  .tone-open .mv-product-home{border-left-color:var(--red)}
}

/* Review: each count belongs to the action it starts. */
.tone-open .review-choices{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;align-items:stretch}
.tone-open .review-choice{font:inherit;text-align:left;border:1px solid var(--line);border-radius:16px;padding:25px 28px;background:#fff;color:var(--ink);display:flex;flex-direction:column;align-items:flex-start;gap:12px;cursor:pointer}
.tone-open .review-choice-primary{background:var(--red-dark);border-color:var(--red-dark);color:#fff;box-shadow:0 4px 0 var(--red-dark)}
.tone-open .review-choice-count{font:700 3rem/1 Georgia,serif;display:flex;align-items:baseline;gap:9px}
.tone-open .review-choice-count small{font:400 .85rem/1.4 var(--font-body,Arial,sans-serif)}
.tone-open .review-choice-all .review-choice-count{font-size:2.3rem;color:var(--red-dark)}
.tone-open .review-choice-label{font-weight:700;display:flex;align-items:center;gap:12px;line-height:1.5}
.tone-open .review-choice-label svg{width:21px;height:21px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2}
.tone-open .review-choice-note{font-size:.8rem;color:#79716b;font-weight:400}
.tone-open .review-choice:disabled{cursor:default;opacity:.5;box-shadow:none}
.tone-open .review-choice:focus-visible{outline:3px solid #252525;outline-offset:4px}
.tone-open .review-guide{margin-top:24px;display:grid;grid-template-columns:150px minmax(0,1fr);gap:28px;align-items:center;padding:24px 30px;background:#fffaf7}
.tone-open .review-guide-teacher{width:150px;height:auto;display:block;align-self:end}
.tone-open .review-guide h3{margin:0 0 10px}
.tone-open .review-guide p{font-size:.92rem;line-height:1.7;margin:0 0 20px;max-width:66ch}
.tone-open .review-gap-label{font-size:.78rem;color:#79716b}
.tone-open .review-intervals{display:flex;align-items:center;gap:22px;padding:0;list-style:none;margin:10px 0 0}
.tone-open .review-intervals li{position:relative;border:1px solid #e9ccc2;border-radius:9px;padding:8px 12px;white-space:nowrap;background:#fff;font-size:.88rem}
.tone-open .review-intervals li+li:before{content:'→';position:absolute;left:-19px;color:#aa8578}
@media(max-width:620px){
 .tone-open .review-choices{grid-template-columns:1fr}
 .tone-open .review-choice{padding:22px}
 .tone-open .review-guide{grid-template-columns:1fr;padding:22px;gap:16px}
 .tone-open .review-guide-teacher{width:90px;justify-self:end;grid-row:2}
 .tone-open .review-intervals{gap:19px;flex-wrap:wrap}
 .tone-open .review-intervals li{padding:7px 9px;font-size:.8rem}
}

.review-intervals{display:flex!important;gap:0!important;align-items:center}.review-intervals li{flex:1;border-bottom:2px solid #ce5148}.review-intervals li:nth-child(2){flex:2}.review-intervals li:nth-child(3){flex:3}.review-retry{border-left:3px solid #c43129;padding:.7rem 1rem;font-weight:600}