*{box-sizing:border-box;margin:0;padding:0}
html{background:#0E1424}
body{max-width:412px;margin:0 auto;min-height:100vh;background:#0E1424;color:#E8ECF5;
  font:14px/1.45 Inter,"Noto Sans",Roboto,system-ui,-apple-system,sans-serif;-webkit-text-size-adjust:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{max-width:100%}

.v{display:inline-block;font:600 12px/1.2 "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  background:#2E6FF2;color:#fff;border-radius:6px;padding:2px 6px}
.code{font:11.5px/1.4 "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;color:#9AA6C4;
  margin-top:4px;overflow-wrap:anywhere}
.ph{color:#7D89A8;font-size:12px;text-align:center}
.ex{color:#FF8A65}

.bar{position:sticky;top:0;z-index:5;min-height:56px;display:flex;align-items:center;gap:8px;
  padding:6px 12px;background:#151D33;border-bottom:1px solid #26314F}
.bar h1{font:700 18px/1.2 "Noto Sans",Inter,sans-serif;flex:1;min-width:0;display:flex;align-items:center;
  gap:8px;flex-wrap:wrap;overflow-wrap:anywhere}
.ib{width:48px;height:48px;flex:0 0 48px;border-radius:12px;background:#1E2843;display:flex;
  align-items:center;justify-content:center;font-size:19px}

.chips{display:flex;gap:8px;padding:12px 12px 8px;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{min-height:48px;padding:0 16px;border-radius:24px;background:#1E2843;display:flex;align-items:center;
  font-weight:600;white-space:nowrap;flex:0 0 auto}
.chip.on{background:#F2B84B;color:#0E1424}

.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:4px 12px 16px}
.tile{border-radius:16px;background:#151D33;border:1px solid #26314F;overflow:hidden;display:block}
.tile .pic{aspect-ratio:1/1;background:radial-gradient(#2A3760,#151D33);display:flex;align-items:center;
  justify-content:center;overflow:hidden}
.tile .pic img{max-width:90%;max-height:90%;object-fit:contain}
.tile .cap{padding:8px 10px;min-height:56px;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.tile .cap b{font-size:15px}
.tile.ph-tile{border-style:dashed}

.ctrl{display:flex;gap:8px;padding:0 12px;flex-wrap:wrap;margin-top:8px}
.sel{flex:1 1 130px;min-width:0;min-height:48px;border-radius:12px;background:#1E2843;display:flex;
  align-items:center;gap:8px;padding:0 12px;font-weight:600}
.sel.narrow{flex:0 0 120px}
.sel .lbl{color:#9AA6C4;font-size:12px;font-weight:600;white-space:nowrap}
.sel select{flex:1;min-width:0;min-height:48px;background:transparent;border:0;color:inherit;font:inherit;
  font-weight:600;outline:none;appearance:none}
.sel select option{background:#151D33;color:#E8ECF5}
.tog{min-height:48px;padding:0 14px;border-radius:12px;background:#1E2843;display:inline-flex;
  align-items:center;gap:8px;font-weight:600}
.tog.on{background:#F2B84B;color:#0E1424}

.viewer{margin:12px;border-radius:16px;background:radial-gradient(circle at 50% 40%,#2A3760,#0E1424);
  position:relative;border:1px solid #26314F;overflow:hidden}
.viewer model-viewer{display:block;width:100%;height:300px;background:transparent;--poster-color:transparent}
body.info-on .viewer model-viewer{height:200px}
.viewer img.big{display:block;width:100%;height:300px;object-fit:contain}
body.info-on .viewer img.big{height:200px}
.hint{position:absolute;z-index:2;top:8px;left:10px;font-size:12px;color:#9AA6C4;background:#0E1424cc;
  padding:2px 8px;border-radius:6px}

.row{display:flex;gap:8px;padding:8px 12px;flex-wrap:wrap}
.btn{min-height:48px;padding:0 14px;border-radius:12px;background:#1E2843;display:inline-flex;
  align-items:center;justify-content:center;gap:6px;font-weight:600;text-align:center}
.btn.gold{background:#F2B84B;color:#0E1424}
.btn.small{font-size:13px;padding:0 12px;border-radius:10px}

h2{font-size:16px;margin:16px 12px 8px}
.tl{padding:0 12px 16px 28px;position:relative}
.tl:before{content:"";position:absolute;left:19px;top:0;bottom:16px;width:2px;background:#26314F}
.ev{position:relative;display:flex;gap:12px;background:#151D33;border:1px solid #26314F;border-radius:14px;
  padding:8px;margin-bottom:10px;min-height:72px}
.ev:before{content:"";position:absolute;left:-14px;top:28px;width:10px;height:10px;border-radius:50%;
  background:#F2B84B}
.ev .th{width:64px;height:64px;flex:none;border-radius:10px;background:#0E1424;display:flex;
  align-items:center;justify-content:center;overflow:hidden}
.ev .th img{max-width:100%;max-height:100%;object-fit:contain}
.ev .t{flex:1;min-width:0}
.evtitle{display:flex;align-items:center;min-height:44px;font-weight:700;font-size:14px}
.evsub{display:flex;align-items:center;gap:6px;margin-top:2px;flex-wrap:wrap}
.d{color:#9AA6C4;font-size:12px}
.evrow{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}

.meta{display:none;margin-top:6px;font:11.5px/1.5 "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  color:#C9D2E6;background:#0E1424;border-radius:8px;padding:6px 8px;overflow-wrap:anywhere}
body.info-on .meta{display:block}
.meta i{color:#F2B84B;font-style:normal;display:inline-block;min-width:58px}

.links{margin:12px;border:1px solid #26314F;border-radius:12px;background:#151D33;padding:10px;
  font:11.5px/1.7 "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere}
.links i{color:#F2B84B;font-style:normal;display:inline-block;min-width:70px}
.links a{text-decoration:underline}

.foot{padding:18px 12px 30px;color:#9AA6C4;font-size:12px;text-align:center}

#ask{border:1px solid #26314F;background:#151D33;color:#E8ECF5;border-radius:16px;padding:0;
  width:min(92vw,412px);max-width:100%;
  position:fixed;inset:0;margin:auto;height:fit-content;max-height:90vh;overflow:auto}
@media (max-width:480px){#ask{width:100%;max-width:100%;inset:auto 0 0 0;margin:0;border-radius:16px 16px 0 0;max-height:85vh}}
#ask::backdrop{background:#00000099}
.askbody{padding:14px;display:flex;flex-direction:column;gap:4px}
.askbody h3{font-size:15px;margin-bottom:4px}
#ask label{font-size:12px;color:#9AA6C4;font-weight:600;margin-top:6px}
#ask textarea{width:100%;background:#0E1424;color:#E8ECF5;border:1px solid #26314F;border-radius:10px;
  padding:8px;font:12px/1.5 "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;resize:vertical}
.askrow{display:flex;gap:8px;justify-content:flex-end;margin-top:8px;flex-wrap:wrap}