:root{
  color-scheme:dark;
  --bg-0:#06080c;
  --bg-1:#0d1119;
  --bg-2:#141c2c;
  --surface:#111826;
  --surface-2:#1a2336;
  --header-bg:rgba(10,14,22,.82);
  --footer-bg:rgba(6,8,12,.9);
  --card-bg:#0e1422;
  --text:#e9edf4;
  --muted:#9aa6b8;
  --accent:#ffc600;
  --accent-soft:#ffd34d;
  --accent-hot:#fa4616;
  --link:#ffd34d;
  --link-hover:#ffe08a;
  --border:rgba(255,255,255,.09);
  --border-accent:rgba(255,198,0,.22);
  --shadow:0 12px 32px rgba(0,0,0,.55);
  --img-dim:.78;
  --img-filter:brightness(var(--img-dim)) contrast(1.04) saturate(.96);
  --img-filter-hover:brightness(var(--img-dim)) contrast(1.03) saturate(.97);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  padding:0 0 56px;
  min-height:100vh;
  font-family:'Bitter',serif;
  text-align:center;
  line-height:1.6;
  color:var(--text);
  background:
    radial-gradient(1100px 480px at 50% -8%,#22314f 0%,transparent 60%),
    linear-gradient(180deg,var(--bg-1) 0%,var(--bg-0) 70%);
  background-color:var(--bg-0);
  text-shadow:0 1px 2px rgba(0,0,0,.6);
  user-select:none;
  transition:background-color .3s,color .3s,border-color .3s;
}
::selection{background:rgba(255,198,0,.85);color:#111}
a{color:var(--link)}
a:hover{color:var(--link-hover)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
main{max-width:660px;margin:0 auto;padding:0 12px 26px}
header{
  position:relative;
  width:100%;
  overflow:hidden;
  text-align:center;
  padding:17px 12px;
  background:var(--header-bg);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  border-left:1px solid transparent;
  border-right:1px solid transparent;
  border-radius:0 0 22px 22px;
  box-shadow:var(--shadow);
}
header h1{
  font-family:'Bitter',serif;
  font-size:clamp(1.6rem,6vw,2.5rem);
  color:var(--accent);
  margin:0;
  letter-spacing:5px;
  display:inline-block;
  white-space:nowrap;
  text-shadow:0 2px 12px rgba(0,0,0,.7);
  animation:slideAndFade 20s linear infinite,textGlow 3s ease-in-out infinite alternate;
}
header h1 span{color:var(--accent);animation:textGlow 3s ease-in-out infinite alternate}
.dragon-image{position:absolute;top:0;right:0;opacity:0;width:171px;height:100px;animation:dragonMove 14s ease-in-out infinite;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6))}
.image-container{text-align:center;margin-top:10px}
.image-container img,.side-by-side-container img{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow);
  filter:var(--img-filter);
  transition:filter .25s ease,transform .25s ease,border-color .25s ease;
}
.image-container img{width:100%;max-width:615px;height:auto;display:block;margin:0 auto;animation:imageGrow .6s ease both}
.image-container img:hover,.side-by-side-container img:hover{filter:var(--img-filter-hover);border-color:var(--border-accent)}
.top-photo{margin-top:20px}
.side-by-side-container{display:flex;gap:8px;text-align:center;width:100%;max-width:615px;margin:8px auto 5px}
.side-by-side-container img{width:calc(50% - 4px);height:auto;display:block;margin:0}
footer{
  background:var(--footer-bg);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  margin:0;
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  box-sizing:border-box;
  font-size:12px;
  text-align:center;
  padding:9px 12px;
  color:var(--muted);
  border-top:1px solid var(--border);
  text-shadow:none;
  z-index:100;
}
footer a{color:var(--link);text-decoration:none}
footer a:hover{color:var(--link-hover);text-decoration:underline}
.link{vertical-align:top;max-width:100%;display:inline-block;text-decoration:none;color:inherit}
.iframe-container{text-align:center;padding:20px 0}
.iframe-container iframe{background:var(--card-bg);border:1px solid var(--border);border-radius:8px;color-scheme:dark;box-shadow:var(--shadow);filter:brightness(var(--img-dim));transition:filter .25s ease}
.logo-container{position:fixed;bottom:44px;left:10px;z-index:90}
.language-switcher{position:fixed;top:5px;left:10px;z-index:1000;font-size:14px;border-radius:10px;text-shadow:none}
.language-switcher a{margin:0 10px;text-decoration:none;color:var(--muted);font-weight:700}
.language-switcher a:hover{text-decoration:underline;color:var(--accent-soft)}
.dropdown{position:relative;display:inline-block}
.dropdown-content{display:none;position:absolute;min-width:160px;z-index:2000;border-radius:10px;background:var(--surface-2);border:1px solid var(--border);box-shadow:var(--shadow);overflow:hidden;text-shadow:none}
.dropdown-content a{color:var(--text);padding:6px 10px;text-decoration:none;display:block}
.dropdown-content a:hover{background:rgba(255,198,0,.14);color:var(--accent-soft)}
.dropdown:hover .dropdown-content{display:block}
.dropbtn:hover{color:var(--accent-soft);text-decoration:underline}
.dimmer{position:fixed;left:10px;bottom:44px;z-index:120;text-shadow:none}
.dimmer-toggle{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--border);background:var(--header-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--text);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;box-shadow:var(--shadow)}
.dimmer-toggle:hover{border-color:var(--border-accent);color:var(--accent-soft)}
.dimmer-panel{position:absolute;left:0;bottom:calc(100% + 8px);width:200px;padding:12px;border-radius:14px;background:var(--surface-2);border:1px solid var(--border);box-shadow:var(--shadow);text-align:left}
.dimmer-panel[hidden]{display:none}
.dimmer-panel label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin:0 0 8px}
.dimmer-panel input[type=range]{width:100%;margin:0 0 10px;accent-color:var(--accent);cursor:pointer}
.dimmer-row{display:flex;gap:8px}
.dimmer-row button{flex:1;padding:5px 0;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer}
.dimmer-row button:hover{border-color:var(--border-accent);color:var(--accent-soft)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg-0)}
::-webkit-scrollbar-thumb{background:#2a3549;border-radius:8px;border:2px solid var(--bg-0)}
::-webkit-scrollbar-thumb:hover{background:#3a4a66}
@keyframes slideAndFade{0%{transform:translateX(200%);opacity:0}25%{transform:translateX(0);opacity:1}50%{transform:translateX(-200%);opacity:0}75%{transform:translateX(0);opacity:1}100%{transform:translateX(200%);opacity:0}}
@keyframes imageGrow{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}
@keyframes textGlow{from{text-shadow:0 0 1px #e6b400,0 0 4px #e6b400,0 0 8px rgba(230,180,0,.8),0 1px 2px rgba(0,0,0,.8)}to{text-shadow:0 0 10px var(--accent-hot),0 0 22px rgba(250,70,22,.85),0 0 34px rgba(250,70,22,.5),0 1px 2px rgba(0,0,0,.8)}}
@keyframes dragonMove{0%,100%{transform:translateX(50%);opacity:0}25%,75%{transform:translateX(0);opacity:.6}50%{transform:translateX(-50%);opacity:.6}}
@media (prefers-color-scheme:light){
  :root{
    color-scheme:light;
    --bg-0:#ece7d8;
    --bg-1:#f5f1e5;
    --bg-2:#fffdf4;
    --surface:#fffdf4;
    --surface-2:#ffffff;
    --header-bg:rgba(255,253,244,.9);
    --footer-bg:rgba(255,253,244,.94);
    --card-bg:#ffffff;
    --text:#211e14;
    --muted:#64665a;
    --accent:#7a6200;
    --accent-soft:#6b5600;
    --link:#6b5600;
    --link-hover:#4d3e00;
    --border:rgba(33,30,20,.14);
    --border-accent:rgba(122,98,0,.35);
    --shadow:0 10px 26px rgba(60,50,20,.16);
    --img-dim:1;
  }
  body{
    background:linear-gradient(180deg,var(--bg-1) 0%,var(--bg-0) 75%);
    background-color:var(--bg-0);
    text-shadow:none;
  }
  header h1,header h1 span{animation-name:slideAndFade;text-shadow:0 1px 0 rgba(255,255,255,.7)}
  .iframe-container iframe{color-scheme:light}
  ::-webkit-scrollbar-track{background:var(--bg-1)}
  ::-webkit-scrollbar-thumb{background:#c4bfae;border-color:var(--bg-1)}
}
@media (prefers-reduced-motion:reduce){
  header h1,.dragon-image,.image-container img{animation:none}
}