:root{--ink:#223026;--paper:#f6f7f1;--green:#d9f583;--muted:#777f73;--line:#dce0d4;--accent:#5c713d;--surface:#fff;--surface-soft:#edf0e3;--content-width:1168px;--page-gutter:24px;--control-radius:10px;--card-radius:22px}*{box-sizing:border-box}body{background:var(--paper);color:var(--ink);margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,select:focus-visible{outline-offset:4px;outline:3px solid #66892c}button:disabled{opacity:.35;cursor:default}header{max-width:var(--content-width);padding:24px var(--page-gutter);border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;margin:auto;display:flex}.logo{color:var(--ink);letter-spacing:1px;align-items:center;gap:13px;font-size:20px;text-decoration:none;display:flex}.logo-icon{background:var(--ink);color:var(--green);border-radius:10px;padding:8px 10px;font-family:Georgia,serif;font-weight:700}.ipa .intro-tools{align-items:center;gap:18px;margin-top:16px;font-size:13px;display:flex}.ipa .intro-tools button{border:1px solid var(--line);border-radius:var(--control-radius);min-height:40px;padding:8px 12px}.ipa .intro-tools button:hover{background:var(--surface-soft)}.accent{color:#5c713d}.plain{background:0 0;border:none}.ipa main{max-width:var(--content-width);padding:36px var(--page-gutter) 24px;margin:auto}.ipa .intro{justify-content:space-between;align-items:center;margin-bottom:38px;display:flex}.ipa .eyebrow{letter-spacing:2.5px;color:#718057;font-size:12px;font-weight:650}.ipa h1{letter-spacing:-1px;margin:10px 0 12px;font-size:36px;font-weight:750;line-height:1.3}.ipa .spark{color:#8ba854;vertical-align:middle;margin-left:20px;font-size:40px;display:inline-block}.ipa .intro p{color:var(--muted);margin:0;font-size:15px}.ipa .count-note{align-items:center;gap:15px;display:flex}.ipa .count-note strong{letter-spacing:-3px;font-size:62px;font-weight:400}.ipa .count-note span{color:var(--muted);font-size:12px;line-height:1.8}.ipa .workspace{grid-template-columns:265px 1fr;gap:32px;display:grid}.ipa aside{padding-top:5px}.ipa .section-label{letter-spacing:1.3px;color:var(--muted);margin-bottom:15px;font-size:12px}.ipa .modes{gap:10px;margin-bottom:28px;display:grid}.ipa .mode{text-align:left;border:1px solid var(--line);background:0 0;border-radius:12px;align-items:center;gap:16px;padding:18px 15px;display:flex}.ipa .mode>span{font-size:27px}.ipa .mode div{flex:1}.ipa .mode b{margin-bottom:5px;font-size:14px;display:block}.ipa .mode small{color:var(--muted);font-size:12px}.ipa .mode i{color:#0000;font-size:10px;font-style:normal}.ipa .mode.active{background:var(--ink);color:#fff;border-color:var(--ink)}.ipa .mode.active small{color:#c3cbba}.ipa .mode.active i{color:var(--green)}.ipa .filters{gap:6px;margin-bottom:28px;display:flex}.ipa .filters button{border:1px solid var(--line);background:0 0;border-radius:8px;padding:10px 11px;font-size:13px}.ipa .filters button.active{background:var(--green);border-color:var(--green)}.ipa .progress-box{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0}.ipa .progress-box>div:first-child{justify-content:space-between;font-size:12px;display:flex}.ipa .progress-box b{font-weight:500}.ipa .track{background:#e3e6da;border-radius:4px;height:5px;margin:14px 0}.ipa .track span{background:#789545;border-radius:4px;height:100%;transition:width .3s;display:block}.ipa .progress-box p{color:var(--muted);margin:0;font-size:11px}.ipa .practice-tip{background:#edf0e3;border-radius:12px;margin-top:27px;padding:20px}.ipa .practice-tip span{color:#718347;font-size:12px}.ipa .practice-tip p{margin:10px 0 0;font-size:15px;line-height:1.9}.ipa .restart{color:var(--muted);background:0 0;border:none;margin-top:20px;padding:5px;font-size:12px}.ipa .stage{min-width:0}.ipa .stage-top{color:#707b67;justify-content:space-between;margin-bottom:14px;font-size:12px;display:flex}.ipa .card-shell{perspective:1500px;height:370px}.ipa .card-inner{height:100%;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.7,.2,1);position:relative}.ipa .card-inner.flipped{transform:rotateY(180deg)}.ipa .face{border-radius:var(--card-radius);backface-visibility:hidden;padding:26px 32px;position:absolute;inset:0;overflow:hidden;box-shadow:0 9px 20px #26332309}.ipa .front{background:var(--green);flex-direction:column;align-items:center;display:flex}.ipa .card-corner{letter-spacing:2px;opacity:.7;justify-content:space-between;width:100%;font-size:10px;display:flex}.ipa .symbol{background:0 0;border:none;margin:38px 0 15px;padding:0 20px;font-family:Times New Roman,Georgia,serif;font-size:116px;font-weight:400;line-height:1.2}.ipa .symbol:hover{transform:scale(1.03)}.ipa .tap-hint{color:#667f37;font-size:12px}.ipa .front-bottom{color:#6a803e;justify-content:space-between;font-size:11px;display:flex;position:absolute;bottom:26px;left:32px;right:32px}.ipa .back{background:#fff;border:1px solid #e0e4d8;padding:23px 30px;transform:rotateY(180deg)}.ipa .back-heading{letter-spacing:1px;color:var(--muted);justify-content:space-between;align-items:center;margin-bottom:14px;font-size:10px;display:flex}.ipa .back-heading button{background:#eef4df;border:none;border-radius:8px;padding:6px 14px;font-family:Georgia,serif;font-size:23px}.ipa .words{gap:8px;display:grid}.ipa .word{text-align:left;background:#fafbf6;border:1px solid #e9eadf;border-radius:10px;align-items:center;gap:14px;width:100%;padding:12px 16px;display:flex}.ipa .word:hover{background:#f2f6e9;border-color:#9eaf72}.ipa .word b{flex:1;font-size:21px;font-weight:550}.ipa .word .ipa{color:#7a845e;font-family:Times New Roman,serif;font-size:17px}.ipa .word .zh{color:var(--muted);text-align:right;min-width:55px;font-size:12px}.ipa .word .sound{font-size:15px}.ipa .sound-tip{color:#788064;margin:14px 0;font-size:12px}.ipa .flip-back{color:#768454;background:0 0;border:none;padding:4px 0;font-size:11px;display:block}.ipa .action-row{gap:12px;margin:18px 0 22px;display:flex}.ipa .action-row button{border-radius:var(--control-radius);border:1px solid var(--line);min-height:48px;padding:14px;font-size:14px;font-weight:500}.ipa .listen{background:0 0;width:35%}.ipa .reveal{background:var(--ink);color:#fff;flex:1;border-color:var(--ink)!important}.ipa .nav-row{justify-content:space-between;align-items:center;display:flex}.ipa .nav{border:1px solid var(--line);background:0 0;border-radius:8px;padding:11px 17px;font-size:12px}.ipa .nav:hover:not(:disabled){background:#e9eddc}.ipa .nav-row>span{color:var(--muted);font-size:11px}.ipa .status{color:#6c774f;text-align:center;height:25px;margin-top:10px;font-size:11px}.ipa footer{border-top:1px solid var(--line);color:var(--muted);justify-content:space-between;margin-top:28px;padding-top:21px;font-size:10px;display:flex}.ipa footer b{letter-spacing:1px;margin-left:10px;font-size:9px;font-weight:500}.ipa .sources{color:#87917a;margin-top:20px;font-size:10px;line-height:1.8}.ipa .sources summary{cursor:pointer}.ipa .sources a{color:inherit}.ipa dialog{background:var(--paper);width:min(780px,94vw);max-height:90vh;color:var(--ink);border:none;border-radius:20px;padding:30px}.ipa dialog::backdrop{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#1f2b2499}.ipa .modal-heading{justify-content:space-between;display:flex}.ipa .modal-heading h2{margin:12px 0;font-size:25px}.ipa .modal-heading button{background:0 0;border:none;align-self:flex-start;font-size:30px}.ipa dialog>p{color:var(--muted);font-size:12px}.ipa h3{margin-top:24px;font-size:15px}.ipa h3 span{color:var(--muted);margin-left:10px;font-size:12px;font-weight:400}.ipa .sound-grid{grid-template-columns:repeat(8,1fr);gap:8px;display:grid}.ipa .sound-grid button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:13px 4px;font-family:Times New Roman,serif;font-size:24px}.ipa .sound-grid button.current{background:var(--green)}.ipa .sound-grid button.seen{border-color:#8aaa51}.ipa .sound-grid button:hover{background:#e8efda}@media (min-width:1400px){.ipa main{padding-top:36px}.ipa .card-shell{height:410px}.ipa .symbol{margin-top:45px;font-size:130px}.ipa .words{gap:12px}.ipa .word{padding:16px}}@media (max-width:800px){:root{--page-gutter:18px}header{padding:18px var(--page-gutter)}.ipa .intro-tools .accent{display:inline}.ipa main{padding:20px var(--page-gutter)}.ipa .intro .eyebrow{display:none}.ipa .intro{margin-bottom:16px}.ipa h1{font-size:32px}.ipa .spark{margin-left:10px;font-size:36px}.ipa .count-note{display:none}.ipa .intro p{font-size:14px;line-height:1.7}.ipa .workspace{flex-direction:column;gap:16px;display:flex}.ipa aside{flex-wrap:wrap;gap:8px;display:flex}.ipa .section-label,.ipa .practice-tip,.ipa .restart{display:none}.ipa .modes{flex:1;gap:8px;margin:0;display:flex}.ipa .mode{flex:1;gap:8px;padding:10px}.ipa .mode>span{font-size:20px}.ipa .mode small{font-size:12px;line-height:1.5}.ipa .mode b{font-size:14px}.ipa .mode i{display:none}.ipa .filters{width:100%;margin:0;display:flex}.ipa .filters button{flex:1}.ipa .progress-box{border:none;width:100%;padding:0}.ipa .progress-box p{display:none}.ipa .track{margin:9px 0 0}.ipa .action-row{margin:12px 0 18px}.ipa .stage-top{margin-bottom:10px}.ipa .card-shell{height:320px}.ipa .symbol{margin-top:30px;font-size:100px}.ipa .back{padding:20px}.ipa .word{gap:8px;padding:13px 10px}.ipa .word b{font-size:19px}.ipa .word .ipa{font-size:15px}.ipa .word .zh{min-width:45px;font-size:12px}.ipa .sound-tip{font-size:12px;line-height:1.6}.ipa .nav-row>span{font-size:10px}.ipa .nav{padding:11px 12px}.ipa footer{font-size:9px}.ipa footer>span:last-child{display:none}.ipa .sound-grid{grid-template-columns:repeat(5,1fr)}.ipa dialog{padding:22px}.ipa .modal-heading h2{font-size:20px}}@media (prefers-reduced-motion:reduce){*{transition:none!important}}