:root{
  --red:#b7352d;--gold:#f4c95d;--jade:#35a888;--sky:#4aa3df;--purple:#8e68d8;--ink:#21180f;--paper:#fff8e7;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;color:var(--ink);background:#fff3d7;min-height:100vh;overflow-x:hidden}
.ink-bg{position:fixed;inset:0;z-index:-1;background:radial-gradient(circle at 10% 14%,rgba(255,87,87,.36),transparent 23%),radial-gradient(circle at 80% 10%,rgba(76,175,245,.34),transparent 25%),radial-gradient(circle at 18% 82%,rgba(74,196,135,.32),transparent 25%),radial-gradient(circle at 90% 78%,rgba(158,104,216,.30),transparent 26%),radial-gradient(circle at 50% 42%,rgba(255,216,95,.28),transparent 32%),linear-gradient(135deg,#fff7df,#ffe6a8 45%,#fff0c8)}
.ink-bg:after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(110,61,18,.13) 1px,transparent 1px);background-size:18px 18px;opacity:.5}
.hero{text-align:center;padding:34px 16px 22px;position:relative}.hero h1{font-size:clamp(34px,7vw,68px);margin:8px 0 8px;letter-spacing:.08em;color:#7a1e19;text-shadow:2px 3px 0 rgba(244,201,93,.65)}.hero p{font-size:clamp(16px,2.3vw,20px);margin:0;color:#5d3b1b}.badge{display:inline-block;background:linear-gradient(90deg,#b7352d,#e67945,#f4c95d);color:white;padding:8px 18px;border-radius:999px;font-weight:900;box-shadow:0 8px 20px rgba(139,61,30,.24)}
.app-shell{width:min(1380px,94vw);margin:18px auto 10px;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);gap:24px;align-items:start}.grid-panel,.detail-panel{background:rgba(255,255,255,.54);border:3px solid rgba(255,255,255,.72);border-radius:34px;padding:18px;box-shadow:0 18px 42px rgba(87,46,18,.13);backdrop-filter:blur(8px)}.detail-panel{position:sticky;top:16px;min-height:480px}.hint{font-size:clamp(16px,2vw,18px);color:#6a4d2d;margin:4px 4px 18px;font-weight:700}.quote-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}.quote-card{background:rgba(255,255,255,.78);border:3px solid rgba(255,255,255,.9);border-radius:28px;padding:13px;text-align:center;cursor:pointer;box-shadow:0 14px 30px rgba(87,46,18,.16);position:relative;overflow:hidden;transition:.22s}.quote-card:before{content:"";position:absolute;width:150px;height:150px;border-radius:50%;background:rgba(244,201,93,.28);right:-55px;top:-60px}.quote-card:hover{transform:translateY(-6px) rotate(-.45deg);box-shadow:0 22px 42px rgba(87,46,18,.25)}.quote-card.active{outline:5px solid rgba(74,163,223,.42);background:rgba(255,252,236,.95)}
.plaque-frame{width:100%;aspect-ratio:2.65/1;border-radius:22px;margin:0 auto 10px;padding:7px;background:linear-gradient(135deg,#b7352d,#f4c95d,#35a888,#4aa3df,#8e68d8);box-shadow:0 10px 22px rgba(0,0,0,.16);position:relative}.plaque-frame img{width:100%;height:100%;border-radius:16px;object-fit:contain;background:#15120f;border:4px solid #fff8e7;display:block}.quote-card h3{font-size:clamp(16px,1.8vw,19px);line-height:1.35;margin:8px 0 6px;color:#471d10;position:relative}.mini-meta{display:none;gap:7px;flex-wrap:wrap;justify-content:center;margin-top:8px}.quote-card.active .mini-meta{display:flex}.mini-meta span,.pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:6px 10px;font-weight:900;font-size:14px}.mini-meta span:first-child,.location-pill{background:#fff0b8;color:#68410e}.mini-meta span:last-child,.value-pill{background:#dff7ff;color:#135a76}
.empty-state{text-align:center;padding:44px 20px}.seal{width:76px;height:76px;border-radius:22px;display:grid;place-items:center;margin:0 auto 16px;background:linear-gradient(135deg,#b7352d,#e67945);color:white;font-size:38px;font-weight:900;box-shadow:0 10px 0 rgba(244,201,93,.55)}.empty-state h2{font-size:clamp(26px,3.2vw,34px);color:#6c241b;margin:0 0 10px}.empty-state p{font-size:18px;line-height:1.7;color:#6a4d2d}.meaning-card{display:grid;gap:16px}.meaning-card .plaque-frame{margin:0;aspect-ratio:2.65/1}.quote-text{font-size:clamp(26px,4.5vw,42px);line-height:1.25;margin:4px 0;color:#84251e}.source{display:inline-block;margin:4px 0 10px;background:#f7e09d;border-radius:999px;padding:8px 14px;font-weight:900;color:#5b3512}.meta-row{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 10px}.explain{font-size:clamp(17px,2.1vw,20px);line-height:1.7;margin:7px 0}.audio-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}.audio-row button,.next-btn{border:0;border-radius:18px;padding:13px 18px;font-weight:900;font-size:17px;cursor:pointer;color:white;background:linear-gradient(135deg,#b7352d,#e97945);box-shadow:0 8px 0 rgba(123,36,24,.22)}.audio-row button:nth-child(2){background:linear-gradient(135deg,#35a888,#4aa3df)}
.quiz-box{margin-top:22px;background:rgba(255,248,231,.92);border-radius:28px;padding:20px;box-shadow:0 16px 34px rgba(75,41,13,.13);border:3px dashed rgba(183,53,45,.22)}.quiz-box h3{font-size:clamp(22px,3vw,28px);margin:0 0 6px;color:#5b2d0d}.quiz-note{margin:0 0 10px;color:#6a4d2d;font-weight:700}.question-card{background:white;border-radius:22px;padding:16px;margin:14px 0;box-shadow:0 10px 22px rgba(0,0,0,.08)}.q-title{font-size:clamp(17px,2.2vw,20px);font-weight:900;color:#5b2d0d}.options{display:grid;gap:10px;margin-top:12px}.option{border:2px solid #f0d28b;background:#fffdf5;border-radius:18px;padding:13px 15px;text-align:left;font-size:clamp(16px,2vw,18px);cursor:pointer}.option:hover{background:#fff2bc}.option.correct{background:#dff8df;border-color:#3caf68}.option.wrong{background:#ffe1df;border-color:#d74d3f}.feedback{font-size:17px;font-weight:900;margin-top:10px}.summary{background:linear-gradient(135deg,#fff2a6,#dff7ff);border-radius:22px;padding:18px;font-size:clamp(18px,2.6vw,21px);font-weight:900;text-align:center;color:#672615}.next-btn{margin-top:14px;background:linear-gradient(135deg,#8e68d8,#4aa3df)}footer{text-align:center;padding:28px 16px;color:#6b4a22;font-weight:900}
@media(max-width:1080px){.app-shell{grid-template-columns:1fr}.detail-panel{position:relative;top:auto}.quote-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}
@media(max-width:560px){.app-shell{width:92vw}.grid-panel,.detail-panel{border-radius:26px;padding:14px}.quote-grid{grid-template-columns:1fr;gap:16px}.quote-card{border-radius:24px;padding:12px}.plaque-frame{border-radius:19px}.plaque-frame img{border-radius:13px}.audio-row button,.next-btn{width:100%}.hero{padding-top:26px}.quote-text{font-size:28px}.mini-meta{display:flex}.empty-state{padding:30px 10px}}

.home-meta{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:10px 0 4px;position:relative;z-index:1}
.home-pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:7px 11px;font-weight:900;font-size:14px;line-height:1.25;box-shadow:0 4px 10px rgba(72,38,8,.08)}
.quote-card h3{min-height:2.5em;display:flex;align-items:center;justify-content:center}
@media(max-width:560px){.home-meta{justify-content:flex-start}.home-pill{font-size:15px}.quote-card h3{text-align:left;justify-content:flex-start}}