:root { --ink:#263c46; --muted:#627783; --blue:#247c9a; --line:#dce8e9; }
body { color:var(--ink); background:#f3f8f7; }
.app { max-width:1280px; padding:24px; }
.hero { display:flex; align-items:center; min-height:210px; padding:32px 255px 32px 40px; color:#fff; background:linear-gradient(110deg,#176985,#32a4ae 78%,#77cdd0); box-shadow:0 12px 28px #205a6920; }
.hero-illustration { inset:15px 22px auto auto; width:180px; height:180px; object-fit:cover; object-position:center; opacity:1; border:5px solid #ffffffbb; border-radius:24px; box-shadow:0 12px 24px #123f4b55; transform:rotate(4deg); }
.eyebrow { font-weight:800; }
.hero h1 { font-size:clamp(1.65rem,3vw,2.45rem); line-height:1.3; }
.subtitle { color:#e6faff; line-height:1.6; }
.workspace { display:grid; grid-template-columns:minmax(0,1.22fr) minmax(360px,.78fr); gap:20px; margin-top:20px; align-items:start; }
.top-panel,.bottom-panel { display:block; min-width:0; margin:0; }
.bottom-panel { display:grid; gap:20px; }
.piece-card,.left-panel,.right-panel { min-width:0; padding:24px; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:0 8px 25px #275a6810; }
.drop-zone-card { padding:0; border:0; border-radius:0; box-shadow:none; background:transparent; }
.section-heading { display:flex; gap:14px; align-items:start; margin-bottom:22px; }
.section-heading h2 { margin:0 0 4px; font-size:1.25rem; line-height:1.35; }
.section-heading p { margin:0; color:var(--muted); font-size:.9rem; line-height:1.5; }
.step-number { flex:0 0 35px; height:35px; display:grid; place-items:center; border-radius:10px; color:var(--blue); background:#eaf8fc; font-size:.85rem; font-weight:800; }
.tabs { margin:0; }
.tab-buttons { display:flex; gap:8px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.tab-button { flex:1; min-width:0; padding:10px 8px; border:0; border-radius:10px; color:var(--muted); background:transparent; font:inherit; font-weight:700; }
.tab-button.active { color:#fff; background:var(--blue); box-shadow:0 5px 12px #247c9a30; }
.tab-panels { position:relative; min-height:232px; }
.tab-panel { padding-top:18px; }
.palette-group { padding:0; border:0; background:transparent; }
.palette-group h4 { margin:0 0 14px; color:var(--muted); font-size:.88rem; }
.symbol-rows { grid-template-columns:repeat(7,minmax(0,1fr)); gap:9px; }
.piece-list { gap:9px; }
.piece { min-width:52px; min-height:54px; padding:8px; border:1px solid #efd9bd; border-radius:12px; color:#8a542e; background:#fff8ed; box-shadow:0 3px 0 #f1dfc8; font-size:1.3rem; }
.piece:hover,.piece:focus-visible { background:#fff0d9; box-shadow:0 6px 12px #bd865b29; }
.pup-parade { display:flex; align-items:center; justify-content:space-around; gap:8px; height:126px; margin-top:20px; padding:12px 18px; overflow:hidden; border:1px solid #dbe9e6; border-radius:20px; background:linear-gradient(180deg,#f8fcfb,#e8f5f2); box-shadow:0 8px 25px #275a6810; }
.pup-parade img { display:block; width:min(14%,88px); height:auto; aspect-ratio: .88; object-fit:cover; object-position:center top; border:2px solid #fff; border-radius:16px; background:#fff; box-shadow:0 5px 12px #27647824; animation:pup-bob 3.2s ease-in-out infinite; }
.pup-parade img:nth-child(2) { animation-delay:-.5s; }
.pup-parade img:nth-child(3) { animation-delay:-1s; }
.pup-parade img:nth-child(4) { animation-delay:-1.5s; }
.pup-parade img:nth-child(5) { animation-delay:-2s; }
.pup-parade img:nth-child(6) { animation-delay:-2.5s; }
@keyframes pup-bob { 0%,55%,100% { transform:translateY(3px) rotate(-2deg); } 27% { transform:translateY(-7px) rotate(2deg); } }
@media (prefers-reduced-motion:reduce) { .pup-parade img { animation:none; } }
.zhuyin-layout .drop-left { display:grid; gap:12px; }
.zhuyin-layout .drop-row { grid-template-columns:minmax(0,1fr) 112px; gap:12px; }
.drop-box { min-width:0; padding:0; border:0; background:transparent; }
.zhuyin-layout .drop-box label { margin-bottom:6px; color:var(--muted); font-weight:700; }
.drop-zone,.drop-box .drop-zone.small { width:100%; min-height:68px; margin:0; padding:6px; border:2px dashed #b6dce5; border-radius:12px; color:#7c9ca6; background:#f3fbfd; text-align:center; }
.drop-zone.drag-over { border-color:var(--blue); background:#e0f6fb; }
.drop-zone.filled { border-style:solid; background:#e9f7fa; }
.drop-zone .placed-piece { min-width:44px; min-height:44px; color:#176985; background:#fff; border-color:#aadce7; box-shadow:none; }
.actions { margin-top:20px; }
#confirmBtn,#resetBtn,.play-btn { min-height:46px; border-radius:11px; font-weight:800; }
#confirmBtn { flex:1; background:#f0804e; box-shadow:none; }
#resetBtn,.play-btn { color:var(--blue); background:#e7f4f7; }
.message { line-height:1.5; font-size:.9rem; }
.right-panel { min-height:190px; }
.assembled-syllable { margin-bottom:12px; color:var(--blue); font-size:1.8rem; }
.word-list { gap:10px; }
.word-card { min-width:0; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:#fbfdfd; }
.word-text { min-width:0; }
.word-zhuyin { line-height:1.45; overflow-wrap:anywhere; }
.play-btn { flex:0 0 auto; }
.word-source { display:block; margin-top:3px; color:var(--muted); font-size:.75rem; }
.dictionary-credit { margin:20px 4px 4px; color:var(--muted); font-size:.78rem; line-height:1.7; }
.dictionary-credit a { color:var(--blue); }
button:focus-visible,.piece:focus-visible { outline:3px solid #ffba76; outline-offset:3px; }
@media (max-width:900px) { .workspace { grid-template-columns:1fr; } .symbol-rows { grid-template-columns:repeat(8,minmax(0,1fr)); } }
@media (max-width:600px) { .tab-panels { min-height:340px; } .pup-parade { height:92px; margin-top:12px; padding:10px 8px; gap:4px; border-radius:16px; } .pup-parade img { width:min(15%,62px); border-radius:10px; } }
@media (max-width:600px) { .app { padding:12px; } .hero { min-height:185px; padding:20px 132px 20px 20px; border-radius:17px; } .hero h1 { font-size:1.45rem; } .hero-illustration { inset:25px 12px auto auto; width:106px; height:106px; border-width:3px; border-radius:16px; } .workspace,.bottom-panel { gap:12px; margin-top:12px; } .piece-card,.left-panel,.right-panel { padding:18px; border-radius:16px; } .section-heading { margin-bottom:16px; } .symbol-rows { grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; } .piece { min-width:0; min-height:52px; } .tab-buttons { gap:3px; } .tab-button { font-size:.9rem; } .zhuyin-layout .drop-row { grid-template-columns:minmax(0,1fr) 92px; } }
@media (max-width:380px) { .hero { padding-right:108px; } .hero-illustration { width:88px; height:88px; } }