@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Karla:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Karla',sans-serif;background:#111;color:#e8e8e8;line-height:1.72}a{color:#fbbf24}
header{max-width:760px;margin:0 auto;padding:14px 20px;display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid #222}
.logo{font-family:'DM Serif Display',serif;font-size:1.15rem;color:#fbbf24;text-decoration:none}
header nav a{font-size:.7rem;color:#666;text-decoration:none;margin-left:10px}header nav a:hover{color:#fbbf24}
.page{max-width:760px;margin:0 auto;padding:0 20px}
.hero{padding:40px 0 24px;text-align:center}
.hero h1{font-family:'DM Serif Display',serif;font-size:clamp(1.6rem,4vw,2.6rem);margin-bottom:8px}
.hero h1 em{color:#fbbf24}
.hero p{font-size:.88rem;color:#888;max-width:440px;margin:0 auto}
.game-box{background:#1a1a1a;border:1px solid #2a2a2a;border-radius:12px;padding:24px;margin:20px 0;text-align:center}
.object-display{font-size:4rem;margin-bottom:12px}
.object-name{font-family:'DM Serif Display',serif;font-size:1.3rem;margin-bottom:6px}
.object-hint{font-size:.82rem;color:#888;margin-bottom:16px}
.slider-area{margin:16px 0}
.slider-area input[type=range]{width:100%;accent-color:#fbbf24}
.guess-display{font-family:'JetBrains Mono',monospace;font-size:1.8rem;color:#fbbf24;margin:10px 0}
.guess-unit{font-size:.9rem;color:#888}
.result-msg{font-size:1rem;font-weight:700;padding:12px;border-radius:8px;margin:12px 0;display:none}
.result-msg.show{display:block}
.result-msg.perfect{background:rgba(34,197,94,.1);color:#22c55e;border:1px solid rgba(34,197,94,.2)}
.result-msg.close{background:rgba(251,191,36,.1);color:#fbbf24;border:1px solid rgba(251,191,36,.2)}
.result-msg.far{background:rgba(239,68,68,.1);color:#ef4444;border:1px solid rgba(239,68,68,.2)}
.btn-row{display:flex;gap:8px;justify-content:center;margin-top:14px}
.gbtn{font-size:.82rem;font-weight:700;padding:8px 20px;border:1px solid #333;border-radius:8px;background:#222;color:#e8e8e8;cursor:pointer}
.gbtn:hover{border-color:#fbbf24;color:#fbbf24}
.gbtn.hi{background:#fbbf24;color:#111;border-color:#fbbf24}
.stats{font-family:'JetBrains Mono',monospace;font-size:.78rem;color:#666;margin-top:12px}
.facts{padding:24px 0 40px}
.facts h2{font-family:'DM Serif Display',serif;font-size:1.2rem;margin-bottom:14px;color:#fbbf24}
.fact-card{background:#1a1a1a;border:1px solid #222;border-radius:10px;padding:14px;margin-bottom:10px;display:flex;gap:14px;align-items:center}
.fact-card .emoji{font-size:2rem;flex-shrink:0}
.fact-card h3{font-size:.9rem;font-weight:700;margin-bottom:2px}
.fact-card p{font-size:.78rem;color:#888}
footer{max-width:760px;margin:0 auto;padding:16px 20px;border-top:1px solid #222;text-align:center;font-size:.56rem;color:#444}
footer a{color:#555;margin:0 4px;text-decoration:none}
.lp{max-width:580px;margin:0 auto;padding:32px 20px 48px}
.lp h1{font-family:'DM Serif Display',serif;font-size:1.2rem;margin-bottom:4px;color:#fbbf24}
.lp .dt{font-size:.62rem;color:#555;margin-bottom:16px}
.lp h2{font-size:.86rem;font-weight:700;margin:14px 0 4px;color:#fbbf24}
.lp p,.lp li{font-size:.82rem;color:#888;margin-bottom:5px;line-height:1.6}
.lp ul{padding-left:14px}