:root { color-scheme:dark; font:15px/1.5 system-ui,sans-serif; background:#121719; color:#e6eeec; }
* { box-sizing:border-box; } body { margin:0; } header { padding:20px 28px; display:flex; justify-content:space-between; gap:20px; border-bottom:1px solid #344341; } header strong { letter-spacing:.09em; font-size:13px; } header span { color:#9ab2ab; }
.notice { background:#242a20; color:#d7d9ac; padding:10px 28px; font-size:13px; } main { display:grid; grid-template-columns:290px minmax(0,1fr); } aside { padding:20px; border-right:1px solid #344341; height:calc(100vh - 116px); overflow:auto; position:sticky; top:0; } label { display:block; margin-bottom:14px; color:#aebfba; font-size:12px; } input[type=search],select { display:block; width:100%; margin-top:5px; padding:10px; background:#202b2b; color:#eef6f1; border:1px solid #455954; border-radius:5px; } .check { display:flex; align-items:center; gap:6px; } #count { color:#8fa9a0; font-size:12px; }
button { font:inherit; cursor:pointer; color:inherit; } nav button { background:transparent; border:0; border-bottom:1px solid #263330; text-align:left; display:block; width:100%; padding:10px; border-radius:4px; } nav button:hover { background:#283b34; } nav button[aria-current=true] { background:#315245; } nav small { display:block; color:#a0b4ac; } article { padding:26px; max-width:1500px; min-width:0; } h1 { margin:0 0 5px; font-weight:550; font-size:26px; } .meta { color:#a0b4ac; font-size:13px; } a { color:#8dd1b4; } .images { display:flex; gap:14px; align-items:flex-start; margin:20px 0; } figure { margin:0; flex:1; min-width:0; } figure img { display:block; width:100%; height:auto; max-height:680px; object-fit:contain; object-position:top left; background:#0b1011; } figcaption { margin:6px 0; font-size:12px; color:#9ab2ab; } .flag { border-left:3px solid #d9b76c; background:#302d24; padding:12px; margin:16px 0; } .face { border-top:1px solid #344341; padding:14px 0; } h2 { font-size:17px; font-weight:550; } .converter { padding:10px 14px; background:#202c29; margin:8px 0; border-radius:4px; } .converter small { display:block; color:#a4b9ae; } pre { white-space:pre-wrap; overflow-wrap:anywhere; font-size:12px; background:#0e1315; padding:16px; } details { margin-top:20px; } summary { cursor:pointer; }
@media(max-width:850px) { header { display:block; } header span { display:block; } main { grid-template-columns:1fr; } aside { height:auto; max-height:330px; position:static; border-bottom:1px solid #344341; } .images { flex-direction:column; } figure { width:100%; } }