.mai-sentences-overlay{--orange:#f4743b;--orange-dark:#c94e22;--peach:#fff0e7;--cream:#fffaf4;--ink:#312c36;--muted:#756e78;--purple:#7253a6;--purple-soft:#eee8fb;--green:#36946c;position:fixed;inset:0;z-index:10030;background:rgba(38,28,36,.72);display:none;padding:18px;font-family:Inter,"Avenir Next",system-ui,sans-serif;color:var(--ink)}
.mai-sentences-overlay.open{display:grid;place-items:center}
.mai-sentences-shell{width:min(1380px,100%);height:min(920px,96vh);background:var(--cream);border-radius:26px;box-shadow:0 28px 80px rgba(30,19,27,.35);overflow:hidden;display:grid;grid-template-rows:auto auto auto 1fr auto}
.mai-sentences-shell button{font:inherit}.sentences-head{display:flex;align-items:center;justify-content:space-between;padding:17px 24px;background:#fff;border-bottom:1px solid #f0e5db}.sentences-head>div:last-child{display:flex;align-items:center;gap:8px}.sentences-brand{display:flex;align-items:center;gap:12px}.sentences-brand>i{width:45px;height:45px;border-radius:15px;display:grid;place-items:center;font-style:normal;font-size:23px;background:var(--peach)}.sentences-brand h2{font-size:23px;margin:0;letter-spacing:-.03em}.sentences-brand p{margin:2px 0 0;color:var(--muted);font-size:13px}.sentences-save{font-size:12px;color:var(--green);font-weight:800;margin-right:6px}.sentences-head .close{width:39px;height:39px;border:0;border-radius:12px;background:#f5efeb;color:var(--ink);cursor:pointer;font-size:17px}.mai-sentences-shell .btn{border:0;border-radius:12px;padding:10px 15px;font-weight:850;cursor:pointer}.mai-sentences-shell .btn.soft{background:#f5efeb;color:var(--ink)}.mai-sentences-shell .btn.primary{background:var(--orange);color:#fff;box-shadow:0 5px 12px rgba(244,116,59,.25)}.mai-sentences-shell .btn:disabled{opacity:.4;cursor:not-allowed}
.sentences-insight{min-height:72px;padding:12px 24px;display:flex;align-items:center;gap:24px;background:linear-gradient(100deg,#fff4eb,#f6f0ff)}.sentences-insight>b{font-size:18px}.sentences-insight>div{display:flex;gap:8px;align-items:center}.sentences-insight>div span{font-size:11px;font-weight:900;letter-spacing:.08em;padding:7px 10px;border-radius:20px;background:#fff;border:1px solid #eadfd7}.sentences-insight>div i{font-style:normal;color:var(--orange)}.sentences-insight small{margin-left:auto;color:var(--muted);max-width:280px;line-height:1.35}
.sentences-nav{display:grid;grid-template-columns:repeat(7,1fr);background:#fff;border-block:1px solid #eee4db;padding:8px 14px;gap:5px}.sentences-nav button{border:0;background:transparent;color:#7d747b;padding:9px 5px;border-radius:11px;font-size:12px;font-weight:800;cursor:pointer;white-space:nowrap}.sentences-nav button b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:7px;margin-right:4px;background:#f1eae5}.sentences-nav button.active{color:var(--orange-dark);background:var(--peach)}.sentences-nav button.active b{background:var(--orange);color:#fff}
.sentences-main{overflow:auto;padding:22px 26px 30px}.sentences-view{display:none}.sentences-view.active{display:block;animation:sentenceIn .2s ease-out}@keyframes sentenceIn{from{opacity:0;transform:translateY(5px)}}.sentences-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:0 auto 20px;max-width:1130px}.sentences-section-head span{font-size:11px;letter-spacing:.1em;font-weight:950;color:var(--orange-dark)}.sentences-section-head h3{font-size:clamp(25px,3vw,38px);letter-spacing:-.04em;margin:3px 0}.sentences-section-head p{margin:0;color:var(--muted)}.sentences-section-head>small{font-size:11px;font-weight:900;letter-spacing:.1em;color:var(--purple);background:var(--purple-soft);padding:9px 12px;border-radius:12px;white-space:nowrap}.sentences-lesson-grid{max-width:1130px;margin:auto;display:grid;grid-template-columns:250px 1fr;gap:18px}.sentences-example-list{display:flex;flex-direction:column;gap:6px;max-height:480px;overflow:auto;padding-right:4px}.sentences-example-list button{display:grid;grid-template-columns:30px 1fr;text-align:left;gap:3px;border:1px solid #eadfd6;background:#fff;padding:11px 12px;border-radius:13px;color:var(--ink);cursor:pointer;font-weight:800}.sentences-example-list button span{grid-row:1/3;color:#b6a8a0;font-size:11px}.sentences-example-list button small{color:var(--muted);font-weight:600}.sentences-example-list button.active{border-color:#f0a07b;background:var(--peach);color:var(--orange-dark)}
.connect-stage,.weak-stage,.drop-stage,.change-stage,.flow-stage,.shadow-stage,.mixed-stage{min-height:350px;background:#fff;border:1px solid #ebdfd6;border-radius:24px;padding:clamp(24px,4vw,46px);box-shadow:0 12px 32px rgba(71,48,35,.07);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.phenomenon-tag{font-size:11px;letter-spacing:.08em;font-weight:900;color:var(--purple);background:var(--purple-soft);border-radius:999px;padding:8px 13px}.connect-nodes{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;margin:34px 0 18px}.sound-node{background:var(--peach);border:2px solid #ffd5c0;border-radius:18px;padding:18px 22px;font-size:clamp(22px,3vw,36px);font-weight:900}.sound-boundary{border:0;background:transparent;width:48px;height:50px;color:#c4b7ae;font-size:28px;cursor:pointer;border-radius:50%}.sound-boundary:hover,.sound-boundary.selected{background:var(--purple-soft);color:var(--purple)}.sound-boundary.correct{background:#e2f6ec;color:var(--green)}.connect-natural{font-size:28px;font-weight:850;color:var(--ink);margin:4px 0 12px}.connect-natural b{color:var(--purple)}.connect-question{font-size:18px;font-weight:850}.connect-stage p,.weak-stage p,.drop-stage p,.change-stage p,.mixed-stage p{color:var(--muted);min-height:23px}.sentences-actions{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:17px}
.weak-layout{max-width:1010px;margin:auto}.weak-word-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:12px}.weak-word-tabs button{border:1px solid #e7dcd4;background:#fff;border-radius:14px;padding:11px;font-weight:950;cursor:pointer}.weak-word-tabs button small{display:block;color:var(--muted);margin-top:4px}.weak-word-tabs button.active{background:var(--peach);border-color:#f2a47e;color:var(--orange-dark)}.careful-natural{display:flex;padding:4px;border-radius:13px;background:#f2ece7;margin-bottom:35px}.careful-natural button{border:0;border-radius:10px;background:transparent;padding:9px 20px;font-size:11px;font-weight:950;letter-spacing:.08em;color:#8d8179;cursor:pointer}.careful-natural button.active{background:#fff;color:var(--orange-dark);box-shadow:0 3px 10px rgba(45,32,25,.1)}.weak-sentence{font-size:clamp(28px,4vw,46px);font-weight:900;transition:.3s}.weak-stage.natural .weak-sentence{letter-spacing:-.05em}.weak-transform{display:flex;align-items:center;gap:20px;margin-top:26px}.weak-transform b{font-size:25px}.weak-transform i{font-style:normal;color:var(--orange);font-size:24px}.weak-transform span{font-size:19px;color:var(--purple);background:var(--purple-soft);border-radius:14px;padding:10px 16px}.weak-stage.natural .weak-transform b{transform:scale(.72);opacity:.58}.weak-transform b{transition:.3s}
.drop-phrase{font-size:clamp(36px,5vw,62px);font-weight:950;letter-spacing:.04em}.drop-sound{display:inline-block;color:var(--orange);transition:.45s}.drop-sound.gone{opacity:.09;transform:scale(.35);width:0}.drop-ipa{margin-top:14px;background:#f6f0ed;border-radius:12px;padding:9px 14px;color:var(--purple);font-weight:750}.change-stage h3{font-size:34px;margin:0 0 25px}.morph-row{display:flex;align-items:center;justify-content:center;gap:14px;font-size:29px}.morph-row span,.morph-row strong{min-width:65px;padding:14px;border-radius:16px;background:var(--peach)}.morph-row b{color:#aa9e96}.morph-row i{font-style:normal;color:var(--orange)}.morph-row strong{background:var(--purple-soft);color:var(--purple);opacity:.25;transform:scale(.8);transition:.35s}.change-stage.natural .morph-row strong{opacity:1;transform:scale(1)}
.flow-stage{max-width:1030px;margin:auto}.flow-labels{width:min(760px,90%);display:flex;justify-content:space-between;font-size:11px;font-weight:950;letter-spacing:.1em;color:var(--muted)}.flow-stage input[type=range]{width:min(760px,90%);accent-color:var(--orange);margin:14px 0 38px}.flow-words{display:flex;justify-content:center;gap:var(--gap);font-size:clamp(20px,3vw,36px);font-weight:950;transition:.15s}.flow-words .weak{font-size:calc(36px - var(--flow)*.12px);opacity:calc(1 - var(--flow)*.005)}.flow-ribbon{margin-top:26px;display:flex;align-items:center;gap:7px;min-height:49px;opacity:.1;transform:translateY(6px);transition:.3s}.flow-ribbon.show{opacity:1;transform:none}.flow-ribbon b{font-size:20px}.flow-ribbon small{font-size:16px;color:var(--purple)}.flow-ribbon i{font-style:normal;color:var(--orange)}.flow-changes{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin-top:24px}.flow-changes span{font-size:11px;font-weight:850;background:#f1ebe7;color:#a1958d;padding:7px 10px;border-radius:999px}.flow-changes span.on{background:#e1f6eb;color:var(--green)}
.shadow-stage{max-width:1030px;margin:auto}.shadow-top{width:100%;display:flex;justify-content:space-between;align-items:center}.shadow-top>span{font-size:12px;font-weight:850;color:var(--muted)}.shadow-top>div{display:flex;background:#f2ece7;border-radius:11px;padding:3px}.shadow-top button{border:0;background:transparent;padding:8px 13px;border-radius:8px;font-size:11px;font-weight:900;cursor:pointer;color:#8e827a}.shadow-top button.active{background:#fff;color:var(--purple);box-shadow:0 2px 7px #d8ccc5}.shadow-text{font-size:clamp(28px,4vw,46px);font-weight:900;line-height:1.22;margin:48px auto 20px;max-width:850px}.shadow-text.notice{color:var(--purple)}.notice-chips{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}.notice-chips span{background:var(--purple-soft);color:var(--purple);border-radius:999px;padding:8px 12px;font-size:12px;font-weight:800}.shadow-beats{font-size:clamp(27px,5vw,48px);letter-spacing:.2em;color:var(--orange);margin:55px 0 15px}.shadow-hide{color:var(--muted)}.shadow-rounds{display:flex;align-items:center;gap:8px;margin:32px 0 4px}.shadow-rounds span{font-size:11px;font-weight:900;letter-spacing:.08em;margin-right:5px}.shadow-rounds button{width:34px;height:34px;border-radius:50%;border:1px solid #dfd2ca;background:#fff;cursor:pointer;font-weight:900}.shadow-rounds button.done{background:var(--green);color:#fff;border-color:var(--green)}
.mixed-stage{max-width:900px;margin:auto;position:relative}.mixed-score{position:absolute;top:24px;right:28px;font-size:11px;letter-spacing:.08em;font-weight:900;color:var(--muted)}.mixed-score b{color:var(--orange-dark);font-size:17px}.mixed-stage>span{font-size:12px;color:var(--muted);font-weight:850}.mixed-stage h3{font-size:clamp(36px,6vw,64px);margin:27px 0}.mixed-options{display:grid;grid-template-columns:repeat(4,1fr);width:min(720px,100%);gap:10px}.mixed-options button{border:1px solid #e6d9d1;border-radius:15px;background:#fff;padding:15px 8px;font-weight:950;color:var(--ink);cursor:pointer}.mixed-options button:hover{border-color:var(--purple);color:var(--purple)}.mixed-options button.correct{background:#dcf5e8;border-color:#65bd92;color:#207452}.mixed-options button.wrong{background:#ffe3df;border-color:#ef9486;color:#ae3f31}.sentences-footer{background:#fff;border-top:1px solid #eee2da;padding:10px 24px;color:var(--muted);font-size:12px;text-align:center}
@media(max-width:900px){.mai-sentences-overlay{padding:0}.mai-sentences-shell{height:100dvh;border-radius:0}.sentences-head{padding:12px 14px}.sentences-save,.sentences-head .btn{display:none}.sentences-insight{padding:9px 14px;gap:8px}.sentences-insight>div,.sentences-insight small{display:none}.sentences-nav{overflow-x:auto;display:flex;padding:7px}.sentences-nav button{min-width:125px}.sentences-main{padding:18px 13px}.sentences-section-head{align-items:flex-start}.sentences-section-head>small{display:none}.sentences-lesson-grid{grid-template-columns:1fr}.sentences-example-list{flex-direction:row;max-height:none;overflow:auto}.sentences-example-list button{min-width:150px}.connect-stage,.weak-stage,.drop-stage,.change-stage,.flow-stage,.shadow-stage,.mixed-stage{padding:22px 14px;min-height:330px}.weak-word-tabs{grid-template-columns:repeat(5,minmax(85px,1fr));overflow:auto}.mixed-options{grid-template-columns:repeat(2,1fr)}.flow-words{flex-wrap:wrap}.sentences-footer{display:none}}
@media(max-width:560px){.sentences-brand p{display:none}.sentences-brand h2{font-size:19px}.sentences-insight>b{font-size:15px}.sound-node{padding:14px 15px}.sound-boundary{width:32px}.connect-natural{font-size:21px}.careful-natural{margin-bottom:24px}.morph-row{font-size:21px;gap:7px}.morph-row span,.morph-row strong{min-width:46px;padding:10px}.shadow-top{align-items:flex-start}.mixed-score{position:static;margin-bottom:12px}}