*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#eef3f7;font-family:-apple-system,'Hiragino Kaku Gothic ProN',Meiryo,sans-serif;color:#0f172a}
#c{position:fixed;inset:0;touch-action:none}
.top{position:fixed;top:0;left:0;right:0;padding:9px 12px;display:flex;gap:10px;align-items:center;background:linear-gradient(#ffffffF2,#ffffffcc,#fff0);z-index:6;flex-wrap:nowrap}
.top b{font-size:15px;white-space:nowrap}.top .tag{font-size:11px;color:#64748b;white-space:nowrap}
.seg{display:inline-flex;border:1px solid #cbd5e1;border-radius:9px;overflow:hidden;background:#fff}
.seg button{border:0;background:#fff;padding:6px 13px;font-size:13px;font-weight:700;color:#334155;cursor:pointer}
.seg button.on{background:#0d9488;color:#fff}
.mussel{position:fixed;top:44px;left:0;right:0;z-index:6;display:flex;gap:6px;padding:5px 12px;overflow-x:auto;white-space:nowrap;background:linear-gradient(#ffffffe6,#fff0)}
.mussel button{flex:0 0 auto;border:1px solid #cbd5e1;background:#fff;border-radius:16px;padding:5px 13px;font-size:13px;font-weight:700;color:#334155;cursor:pointer}
.mussel button.on{background:#0d9488;color:#fff;border-color:#0d9488}
.views{position:fixed;left:12px;bottom:14px;display:flex;gap:6px;flex-wrap:wrap;z-index:5;max-width:60vw}
.views button{border:1px solid #cbd5e1;background:#fff;border-radius:8px;padding:6px 10px;font-size:12.5px;color:#0f172a;cursor:pointer}
.hint{position:fixed;right:12px;bottom:14px;z-index:5;background:#0f1d2e;color:#cfe;font-size:11px;border-radius:8px;padding:7px 10px;max-width:42vw;line-height:1.5}
.legend{position:fixed;right:12px;top:92px;z-index:5;background:#ffffffee;border:1px solid #dbe4ea;border-radius:10px;padding:8px 10px;font-size:12px;min-width:150px;max-height:56vh;overflow:auto}
.legend .row{display:flex;align-items:center;gap:7px;margin:3px 0}
.sw{width:13px;height:13px;border-radius:3px;border:1px solid #0002;flex:0 0 auto}
.pick{position:fixed;left:50%;transform:translateX(-50%);bottom:60px;z-index:6;background:#0f766e;color:#fff;border-radius:20px;padding:7px 15px;font-size:13px;font-weight:700;display:none}
#qa{position:fixed;left:12px;top:92px;z-index:5;background:#0f1d2eF2;color:#dbe7f0;border:1px solid #26405a;border-radius:10px;padding:9px 11px;font-size:11.5px;max-width:250px;line-height:1.6}
#qa b{color:#8ff0dc}#qa .ok{color:#7ff0d8;font-weight:700}
#load{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#eef3f7cc;z-index:9;color:#334155;font-size:15px;font-weight:700}
body.embed .top{padding:7px 10px;background:linear-gradient(#ffffffe6,#fff0)}
body.embed .top b,body.embed .top .tag{display:none}
body.embed .mussel{display:none}
body.embed #qa{top:50px}body.embed .legend{top:50px}
body.embed .views{top:auto;bottom:12px}
@media(max-width:640px){.legend{display:none}
  .top b{font-size:14px}
  .views{top:82px;bottom:auto;left:8px;max-width:none;gap:5px}
  .views button{padding:5px 9px;font-size:12px}
  #qa{left:8px;right:8px;top:auto;bottom:50px;max-width:none;font-size:10px;padding:6px 9px;background:#0f1d2ee8}
  .hint{left:8px;right:8px;bottom:8px;max-width:none;font-size:10px;padding:5px 8px;text-align:center}
  .pick{bottom:96px}}