.samples-head{max-width:1190px;margin:0 auto 18px;display:flex;justify-content:space-between;align-items:end}.samples-head span{color:var(--orange-dark);font-size:10px;font-weight:950;letter-spacing:.11em}.samples-head h3{margin:3px 0;font-size:clamp(28px,3vw,40px);letter-spacing:-.04em}.samples-head p{margin:0;color:var(--muted)}.samples-counter{font-size:13px;color:var(--muted);font-weight:850}.samples-counter b{font-size:25px;color:var(--orange-dark)}.samples-layout{max-width:1190px;margin:auto;display:grid;grid-template-columns:245px minmax(0,1fr);gap:16px}.samples-library{max-height:650px;overflow:auto;display:flex;flex-direction:column;gap:6px;padding-right:4px}.samples-library>label{padding:4px 5px 7px;color:var(--muted);font-size:9px;font-weight:950;letter-spacing:.12em}.samples-library button{display:flex;gap:10px;text-align:left;border:1px solid #eadfd6;background:#fff;padding:10px;border-radius:13px;color:var(--ink);cursor:pointer}.samples-library button>b{flex:0 0 25px;color:#b4a69d;font-size:10px;padding-top:2px}.samples-library button>span{font-weight:900;line-height:1.2}.samples-library button small{display:block;margin-top:4px;color:var(--muted);font-size:9px;font-weight:550;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.samples-library button.active{border-color:#f0a27d;background:var(--peach);color:var(--orange-dark)}.samples-library button.active>b{color:var(--orange)}
.sample-card{background:#fff;border:1px solid #eaded5;border-radius:23px;padding:24px;box-shadow:0 12px 32px rgba(71,48,35,.07)}.sample-question>span{display:inline-block;padding:6px 9px;border-radius:999px;background:var(--purple-soft);color:var(--purple);font-size:9px;font-weight:950;letter-spacing:.1em;text-transform:uppercase}.sample-question h4{font-size:clamp(20px,2.5vw,29px);line-height:1.25;margin:8px 0 14px}.sample-modes{display:flex;gap:5px;padding:4px;background:#f3ede8;border-radius:12px;width:max-content;max-width:100%;overflow:auto}.sample-modes button{border:0;background:transparent;border-radius:9px;padding:8px 12px;color:#8c817a;font-size:10px;font-weight:950;cursor:pointer;white-space:nowrap}.sample-modes button.active{background:#fff;color:var(--orange-dark);box-shadow:0 2px 8px rgba(56,40,31,.1)}.sample-answer{margin:17px 0 12px;padding:18px 20px;border:1px solid #eee3db;border-radius:18px;background:#fffdfb}.sample-answer p{position:relative;margin:0;padding:5px 5px 5px 32px;font-size:clamp(14px,1.45vw,18px);line-height:1.72;color:#3e3740;cursor:pointer;border-radius:9px}.sample-answer p:hover,.sample-answer p.shadowing{background:#fff2ea}.sample-answer p>i{position:absolute;left:5px;top:9px;display:grid;place-items:center;width:18px;height:18px;border-radius:6px;background:#f0e9e5;color:#9b8d85;font:800 9px/1 system-ui}.sample-answer p.shadowing>i{background:var(--orange);color:#fff}.sample-answer.stress,.sample-answer.full{background:#fffaf6}.sample-answer.connected{background:#faf7ff}.sample-stress{font-weight:950;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:3px;text-underline-offset:3px;color:#27212b}.sample-link{color:var(--purple);font-weight:950;padding:0 2px}.sample-weak{display:inline-block;font-size:.72em;opacity:.55;color:var(--purple)}.sample-drop{color:#b55e43;font-size:.8em;opacity:.7}.sample-change{color:var(--purple);font-weight:800}.sample-change small{display:inline-block;margin-left:4px;padding:2px 5px;border-radius:5px;background:var(--purple-soft);font-size:8px}.sample-legend{display:flex;gap:10px;flex-wrap:wrap;margin:0 2px 14px}.sample-legend span{font-size:9px;font-weight:800;color:var(--muted);padding:5px 7px;border-radius:7px;background:#f6f1ed}.sample-legend b{color:var(--purple)}.sample-legend .stress-key{text-decoration:underline 2px var(--orange);text-underline-offset:2px;color:var(--ink)}.sample-legend .weak-key{font-size:8px;opacity:.7}
.phrase-focus{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;padding:12px 14px;border-radius:14px;background:linear-gradient(100deg,#fff0e7,#f6f0ff)}.phrase-focus>span{grid-row:1/3;color:var(--orange-dark);font-size:9px;font-weight:950;letter-spacing:.08em;padding-top:3px}.phrase-focus>b{font-size:13px}.phrase-focus>p{margin:0;color:var(--muted);font-size:10px}.sample-practice{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:14px}.sample-practice button{border:1px solid #eaded6;border-radius:12px;background:#fff;padding:9px 6px;color:var(--ink);font-size:9px;font-weight:950;cursor:pointer}.sample-practice button small{display:block;margin-top:3px;color:var(--muted);font-size:8px;font-weight:650}.sample-practice button:hover,.sample-practice button.active{border-color:#ef9a72;background:var(--peach);color:var(--orange-dark)}.full-take-cue{margin-top:12px;padding:22px;border:1px dashed #e7b398;border-radius:16px;background:#fff7f0;text-align:center}.full-take-cue b{font-size:12px;color:var(--orange-dark)}.full-take-cue span{font-size:11px;color:var(--muted)}.full-take-cue i{font-style:normal;color:var(--orange);margin:0 8px}.full-take-cue p{margin:10px 0 0;color:var(--muted);font-size:11px}.make-own{display:grid;grid-template-columns:1fr auto 1fr auto;align-items:center;gap:12px;margin-top:12px;padding:14px;border:1px solid #dfd6ed;border-radius:16px;background:#faf7ff}.make-own>div{display:grid;gap:5px}.make-own span{font-size:8px;font-weight:950;letter-spacing:.1em;color:var(--purple)}.make-own code{padding:5px 7px;border-radius:7px;background:#fff;color:#655b66;font:700 10px system-ui}.make-own input{min-width:0;border:1px solid #e1d7e9;border-radius:8px;padding:6px 8px;font:600 10px system-ui}.make-own>i{font-style:normal;color:var(--purple)}.make-own>button{border:0;border-radius:10px;background:var(--purple);color:#fff;padding:10px;font-size:9px;font-weight:900;cursor:pointer}.own-preview{margin-top:8px}.own-preview:not(:empty){padding:13px;border-radius:12px;background:#edf7ed}.own-preview b{font-size:9px;color:var(--green);letter-spacing:.1em}.own-preview p{margin:5px 0 0;font-size:11px;line-height:1.5}.sample-arrows{display:flex;justify-content:space-between;margin-top:14px}.sample-arrows button{border:0;background:transparent;color:var(--orange-dark);font-size:10px;font-weight:900;cursor:pointer;padding:8px}
@media(max-width:900px){.mai-samples-overlay{padding:0}.mai-samples-shell{height:100dvh;border-radius:0}.mai-samples-main{padding:18px 13px}.mai-samples-actions>span,.mai-samples-actions .btn{display:none}.samples-layout{grid-template-columns:1fr}.samples-library{max-height:none;flex-direction:row;overflow:auto}.samples-library>label{display:none}.samples-library button{min-width:170px}.sample-card{padding:17px}.sample-practice{grid-template-columns:repeat(3,1fr)}.make-own{grid-template-columns:1fr}.make-own>i{transform:rotate(90deg);text-align:center}}
@media(max-width:560px){.mai-samples-bar{padding:12px 13px}.mai-samples-brand p{display:none}.mai-samples-brand h2{font-size:19px}.samples-head p{display:none}.samples-layout{gap:10px}.sample-answer{padding:12px 9px}.sample-answer p{font-size:14px;line-height:1.58}.phrase-focus{grid-template-columns:1fr}.phrase-focus>span{grid-row:auto}.sample-practice{grid-template-columns:repeat(2,1fr)}.sample-practice button:last-child{grid-column:1/-1}.sample-modes{width:100%}.sample-modes button{flex:1}.samples-counter{display:none}.mai-samples-footer{display:none}}
.mai-samples-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:10035;display:none;padding:18px;background:rgba(38,28,36,.72);font-family:Inter,"Avenir Next",system-ui,sans-serif;color:var(--ink)}.mai-samples-overlay.open{display:grid;place-items:center}.mai-samples-shell{width:min(1380px,100%);height:min(930px,96vh);display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;border-radius:26px;background:var(--cream);box-shadow:0 28px 80px rgba(30,19,27,.35)}.mai-samples-shell button{font:inherit}.mai-samples-bar{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid #eee2da;background:#fff}.mai-samples-brand{display:flex;align-items:center;gap:12px}.mai-samples-brand>i{width:45px;height:45px;display:grid;place-items:center;border-radius:15px;background:var(--purple-soft);font-size:22px;font-style:normal}.mai-samples-brand h2{margin:0;font-size:23px;letter-spacing:-.03em}.mai-samples-brand p{margin:2px 0 0;color:var(--muted);font-size:11px}.mai-samples-actions{display:flex;align-items:center;gap:8px}.mai-samples-actions>span{margin-right:5px;color:var(--green);font-size:10px;font-weight:900}.mai-samples-actions .btn{border:0;border-radius:12px;padding:10px 14px;background:#f5efeb;color:var(--ink);font-weight:850;cursor:pointer}.mai-samples-actions .close{width:39px;height:39px;border:0;border-radius:12px;background:#f5efeb;color:var(--ink);font-size:17px;cursor:pointer}.mai-samples-main{overflow:auto;padding:22px 26px 30px}.mai-samples-footer{padding:10px 20px;border-top:1px solid #eee2da;background:#fff;color:var(--purple);font-size:10px;font-weight:900;letter-spacing:.09em;text-align:center}