:root{--butter:#f7e6a4;--coral:#f2c1ae;--lavender:#e7e2f5;--sky:#dcecf6;--cream:#f8f6ef}body{background:var(--cream)}button{min-height:44px;transition:transform .14s,background .18s,box-shadow .18s}button:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 4px 10px #29433912}button:not(:disabled):active{transform:translateY(2px) scale(.98);box-shadow:none}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #a45538;outline-offset:3px}nav{gap:5px}nav button{font-size:13px}.hero{background:#e6eddf;position:relative}.hero h2{font:34px Georgia,'Noto Sans TC',serif;margin-top:18px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-top:24px}.metric{border:1px solid #2b453416;border-radius:18px;padding:22px}.metric small{display:block;font-size:11px;line-height:1.8}.metric b{display:block;font:32px Georgia;margin-top:10px}.metric i{font:12px system-ui;font-style:normal}.yellow{background:var(--butter)}.lavender{background:var(--lavender)}.blue{background:var(--sky)}.coral{background:var(--coral)}.card h3{margin-top:5px}.week-card{padding:21px}.day{padding:12px 3px;min-width:0;border:1px solid transparent}.day small{display:block;font-size:8px;line-height:1.4;margin-top:8px;overflow-wrap:anywhere}.day span{font-size:18px}.day.available{background:var(--sky);border-color:#9ac4d5}.day.completed{background:var(--butter);border-color:#dbbf67}.day.coming-soon{background:#f0f0ea;color:#6b756d;opacity:1}.day.locked{background:#e9e5ef;opacity:1}.track>div{transition:width .4s ease}.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.calendar span{border-radius:7px;padding:8px 1px;background:#f0f1ea;text-align:center;font-size:11px}.calendar .studied{background:var(--butter);font-weight:700;border-bottom:3px solid #ceac51}.vocab-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:20px}.word-card{margin:0;border-top:4px solid #cbc0e6}.word-card h2{font:31px Georgia;margin:22px 0 8px}.word-card .ipa{font-size:18px}.word-card blockquote{margin:12px 0;padding:15px;border-left:3px solid #b4c9d6;background:#eff6fa;line-height:1.8}.word-card button{font-size:12px}.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.choice-grid button{text-align:left;background:#fff;border:1px solid #d6d5db;font-weight:500;line-height:1.6}.flash-surface{min-height:370px}.flash-surface h1{font-size:35px;line-height:1.5}.flipped{animation:flip-in .28s ease-out}.grammar-rule{background:var(--butter);border-radius:12px;padding:18px;line-height:1.9;margin-bottom:25px}.example{position:relative;background:#f2f6f7;border-radius:12px;margin:10px 0;padding:15px 65px 15px 15px;line-height:1.8}.example div{font:22px Georgia}.example button{position:absolute;right:10px;top:10px;background:var(--sky)}.example small{color:#5f7067}.grammar-jump{display:block;width:100%;text-align:left;margin:8px 0;font-weight:400}.practice-mode{border-bottom:1px solid #e1e6dc;margin-bottom:25px}.feedback.error{border-left:3px solid #b76d4b;background:#fbe9df;color:#843e25}.feedback{border-left:3px solid #92b2a0}.shadow-transition{animation:shadow-in .3s ease-out;background:linear-gradient(135deg,#fff,#e7f0f7)}.success-morph{animation:morph .38s ease both;position:relative;pointer-events:none;overflow:visible}.success-morph:after{content:'·　✦　·';position:absolute;left:50%;top:-10px;color:#b18b31;white-space:nowrap;transform:translateX(-50%);animation:spark .38s ease forwards}.celebration{border-top:6px solid #dcc264;animation:shadow-in .35s ease-out;background:linear-gradient(140deg,#fff,#fff8df)}.city-art{position:relative;align-self:center;text-align:center;min-height:200px;border:1px solid #9bb49b88;border-radius:100px 100px 8px 8px;max-width:320px;margin:0 15px;padding:35px 20px 20px;overflow:hidden;background:#f5f4dc}.city-art>span{font:13px Georgia;letter-spacing:5px;position:relative;z-index:1}.houses{font:80px Georgia;letter-spacing:4px;color:#48735f;position:relative;z-index:1}.city-sun{position:absolute;width:85px;height:85px;background:var(--butter);border-radius:50%;right:25px;top:25px}.city-art small{font:italic 12px Georgia;position:relative;z-index:1}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.skip-link{position:absolute;top:-80px;left:20px;z-index:10;background:#fff;padding:15px}.skip-link:focus{top:10px}hr{border:0;border-top:1px solid #dce0d7;margin:25px 0}input,textarea{font-size:16px}.training .card{scroll-margin:20px}@keyframes morph{0%{border-radius:12px;transform:scale(1)}35%{transform:scale(.96)}80%,100%{border-radius:50%;transform:scale(.88);background:#24634f;color:white}}@keyframes spark{to{opacity:0;transform:translate(-50%,-18px) scale(1.2)}}@keyframes flip-in{from{opacity:0;transform:rotateX(-15deg)}to{opacity:1;transform:rotateX(0)}}@keyframes shadow-in{from{opacity:.4;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(max-width:1100px){.metrics{grid-template-columns:1fr 1fr}.city-art{margin:0}.layout{grid-template-columns:1fr}.layout>section:nth-child(2){display:grid;grid-template-columns:1fr 1fr;gap:15px}.layout>section:nth-child(2)>.card{margin:0}}@media(max-width:650px){nav{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}nav button{font-size:11px;padding:8px 4px;text-align:center}.brand{display:inline-block}.hero h2{font:27px Georgia,'Noto Sans TC',serif}.hero{padding:23px}.city-art{display:none}.metrics{gap:9px}.metric{padding:16px}.metric b{font-size:27px}.vocab-grid{grid-template-columns:1fr}.layout>section:nth-child(2){grid-template-columns:1fr}.day{padding:10px 1px;font-size:9px}.day small{font-size:7px}.week{gap:3px}.week-card{padding:14px}.week-card h3{font-size:14px}.choice-grid{grid-template-columns:1fr}.flash-surface h1{font-size:28px}.training{margin-top:20px}.actions button{flex:1}.row{flex-wrap:wrap}.aside-bottom{display:none}h1{letter-spacing:-.7px}}
.success-morph{transition:width .22s ease,height .22s ease,padding .22s ease,border-radius .22s ease;white-space:nowrap}.training .feedback{scroll-margin:20px}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}button:hover,button:active{transform:none!important}}

.houses{white-space:nowrap;font-size:62px}