:root{font-family:system-ui,'Noto Sans TC',sans-serif;color:#f8f3eb;background:#152638}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:linear-gradient(150deg,#152638,#33455a 65%,#645c69)}main{max-width:1120px;margin:auto;padding:32px}h1{font-size:clamp(24px,3vw,40px);margin:0 0 8px}p{color:#d3dae2}.tag{color:#ffddad}.panel{background:#ffffff12;border:1px solid #ffffff28;border-radius:20px;padding:20px;margin:20px 0}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.tile{height:110px;background:linear-gradient(135deg,#b98d9a,#766e9d);border:3px solid transparent;border-radius:16px;color:white;font-size:21px;transition:transform .18s ease,outline-color .18s ease;outline:3px solid transparent;outline-offset:2px}.tile.selected,.tile:focus-visible{outline-color:#ffe5a5;transform:scale(1.035)}button{cursor:pointer}.actions{display:flex;flex-wrap:wrap;gap:10px}.action{border:1px solid #ffffff66;background:#ffffff22;color:white;border-radius:10px;padding:12px 18px;font-size:16px}.action:focus-visible{outline:3px solid #ffe5a5}pre{white-space:pre-wrap;overflow-wrap:anywhere;color:#f4e4c8;font-size:13px}small{color:#d3dae2}.motion{width:46px;height:46px;border-radius:50%;background:#ffdc9d;animation:float 3s ease-in-out infinite alternate}@keyframes float{to{transform:translateX(170px)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}@media(max-width:600px){main{padding:16px}.tile{height:90px;font-size:16px}}

.diag{background:#071826;border:2px solid #e7c57d;border-radius:12px;padding:16px;margin-top:14px}.diag strong{font-size:23px}.diag p{font-size:20px;color:#ffe8b0}.diag pre{font-size:19px;line-height:1.5;max-height:350px;overflow:auto;color:#f9f0d9;white-space:pre-wrap}.tile:focus{outline:4px solid #ffe5a5;outline-offset:2px}.action:focus{outline:3px solid #ffe5a5}@media(max-width:600px){.diag pre{font-size:15px}}