*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;background:#efe3d0;touch-action:none;-webkit-user-select:none;user-select:none}
#c{position:fixed;inset:0;width:100%;height:100%;display:block}
#loading{position:fixed;inset:0;display:grid;place-items:center;font-size:24px;color:#7a5a3a;background:#efe3d0;z-index:9}
button{font:inherit;cursor:pointer;border:2px solid #c9a27a;background:#fffaf2;color:#5b3d22;border-radius:12px;padding:5px 10px;font-size:16px;min-height:40px}
button.on{background:#c98b5b;color:#fff;border-color:#a86b3f}
#top{position:fixed;left:8px;right:8px;top:8px;display:flex;gap:6px;align-items:center;pointer-events:none;z-index:3}#top>*{pointer-events:auto}
#crumb{background:#fffaf2e8;border-radius:12px;padding:6px 12px;font-size:15px;color:#8a6a4a}#crumb a{color:#a0612f;text-decoration:none;font-weight:700}#crumb b{color:#5b3d22}
.seg{display:inline-flex}.seg button{border-radius:0}.seg button:first-child{border-radius:12px 0 0 12px}.seg button:last-child{border-radius:0 12px 12px 0}
#views{position:fixed;right:8px;top:60px;display:flex;flex-direction:column;gap:6px;z-index:3}
#panel{position:fixed;left:8px;right:8px;bottom:8px;background:#fffaf2ee;border:3px solid #d9b893;border-radius:18px;padding:6px 8px;z-index:3;max-width:980px;margin:0 auto}
#tabs,#figs,#acts{display:flex;gap:5px;overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch}#tabs button,#acts button{flex-shrink:0;white-space:nowrap;font-size:15px}
#figs{padding:5px 0}#figs button{flex-shrink:0;font-size:30px;min-width:52px;min-height:52px;padding:2px;font-family:"Noto Color Emoji","Apple Color Emoji","Segoe UI Emoji",sans-serif;background:#fff}
#figs button small{display:block;font-size:11px;font-family:"Noto Sans TC",sans-serif;color:#7a5a3a}body.stu #figs button small{display:none}
#acts{justify-content:flex-end}
#sel{position:fixed;left:50%;transform:translateX(-50%);top:62px;display:none;gap:6px;z-index:4}#sel button{font-size:22px;min-width:52px}body.hasSel #sel{display:flex}
#rec{position:fixed;left:8px;top:60px;max-width:230px;background:#fffaf2e8;border-radius:12px;padding:6px 10px;font-size:13px;color:#5b3d22;z-index:2;display:none;max-height:40vh;overflow:auto}body:not(.stu) #rec:not(:empty){display:block}
@media (max-width:600px){#crumb{font-size:12px;padding:4px 8px}button{min-height:36px;font-size:14px;padding:3px 7px}#views{top:auto;bottom:178px;flex-direction:row;right:8px}#views button{font-size:12px}#rec{top:96px;max-width:160px;font-size:11px}#sel{top:auto;bottom:226px}#top{flex-wrap:wrap}}
@media (max-height:500px){#panel{left:8px;right:120px;padding:3px 6px}#figs button{min-width:44px;min-height:44px;font-size:24px}#views{top:56px}#rec{display:none!important}}