:root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: #080808; color: white; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid #f9c944; outline-offset: 3px; }
.wrap { width: min(100% - 48px, 1160px); margin-inline: auto; }
.site-header { background: #050505; }
.topline { height: 40px; display: flex; align-items: center; gap: 20px; }
.brand img { width: 145px; max-height: 30px; object-fit: contain; }
.demo-badge { color: #ffc944; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.locale { margin-left: auto; background: #f9c63e; color: #171717; border-radius: 20px; padding: 3px 11px; font-weight: 700; font-size: 12px; }
.navline { display: flex; height: 72px; align-items: center; gap: 18px; }
.menu { display: flex; flex-direction: column; align-items: center; font-size: 22px; min-width: 36px; }
.menu small { font-size: 10px; }
nav { display: flex; align-items: center; gap: 16px; white-space: nowrap; font-size: 14px; }
nav a:hover { color: #f8cb4d; }
.pill { border-radius: 22px; color: #151515; padding: 11px 14px; }
.yellow { background: #f8c948; }
.red { background: #ee3b34; color: #fff; }
#search { min-width: 210px; flex: 1 1 260px; max-width: 350px; }
.search_form { position: relative; }
#search input { width: 100%; height: 43px; background: #fff; color: #222; border: 0; border-radius: 11px; padding: 0 44px 0 48px; outline: none; }
#search input:focus { box-shadow: 0 0 0 3px #f9c944; }
.sparkle { position: absolute; left: 16px; top: 10px; color: #333; font-size: 20px; }
.search_submit { position: absolute; right: 7px; top: 5px; border: 0; background: none; color: #d6af31; width: 32px; height: 32px; font-size: 27px; cursor: pointer; }
.search_result { position: absolute; top: 46px; left: 0; width: 100%; z-index: 20; }
.stories { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 12px; padding: 10px 0 20px; }
.story { height: 280px; position: relative; overflow: hidden; border-radius: 16px; border: 2px solid #777; background: #333; }
.story img { width: 100%; height: 100%; object-fit: cover; }
.story b { position: absolute; top: 12px; left: 12px; background: #111; border-radius: 3px; padding: 5px 8px; font-size: 12px; }
.story strong { position: absolute; bottom: 12px; left: 12px; right: 12px; font-size: 13px; text-shadow: 0 1px 3px #000; }
.hero img { display: block; width: 100%; height: auto; }
.intro { padding-block: 45px 25px; text-align: center; }
.intro h1 { font-size: clamp(24px,3.5vw,42px); margin: 0 0 14px; }
.intro p { color: #bbb; margin: 0; }
.categories { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; padding-bottom: 55px; }
.category { position: relative; height: 350px; overflow: hidden; border-radius: 12px; }
.category img { width: 100%; height: 100%; object-fit: cover; }
.category span { position: absolute; left: 20px; bottom: 20px; font-size: 24px; font-weight: 800; text-shadow: 0 1px 4px #000; }
footer { border-top: 1px solid #333; color: #999; padding-block: 22px; font-size: 13px; }
footer a { text-decoration: underline; }
@media (max-width: 1000px) { .navline { flex-wrap: wrap; height: auto; padding-block: 12px; } nav { overflow-x: auto; order: 3; width: 100%; } #search { margin-left: auto; } .stories { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 650px) { .wrap { width: min(100% - 24px, 1160px); } .topline { height: 50px; } .brand img { width: 130px; } .demo-badge { display: none; } .navline { gap: 10px; } nav { display: none; } #search { order: 3; max-width: none; flex-basis: 100%; } .stories { display: flex; overflow-x: auto; } .story { flex: 0 0 135px; height: 220px; } .categories { grid-template-columns: 1fr; } .category { height: 230px; } }