:root{color-scheme:dark;--bg:#100a18;--paper:#1c1327;--line:#403250;--ink:#fff8eb;--muted:#b7aabe;--gold:#ffd66b;--purple:#aa84ff;font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:radial-gradient(circle at 50% 0,#382151 0,#160e21 30%,var(--bg) 72%);line-height:1.75}a{color:#dccbff}.top{position:sticky;z-index:10;top:0;display:flex;align-items:center;justify-content:space-between;min-height:58px;padding:8px max(18px,calc((100% - 900px)/2));border-bottom:1px solid var(--line);background:#100a18ed;backdrop-filter:blur(14px)}.top a{text-decoration:none}.brand{color:var(--ink);font-weight:900}.play{padding:9px 15px;border-radius:9px;color:#281934;background:var(--gold);font-size:14px;font-weight:900}main{width:min(100% - 32px,900px);margin:auto;padding:56px 0 90px}.hero{padding:24px 0 34px}.hero small{color:var(--gold);font-weight:800;letter-spacing:.14em}.hero h1{margin:8px 0 10px;font-size:clamp(32px,6vw,54px);line-height:1.15}.hero p{max-width:720px;margin:0;color:var(--muted);font-size:17px}article,.related{margin:18px 0;padding:25px;border:1px solid var(--line);border-radius:18px;background:#1c1327d9}h2{margin:0 0 12px;font-size:24px}h3{margin:24px 0 6px;color:#eadfff;font-size:17px}p{margin:8px 0;color:#d8cedd}ol,ul{padding-left:22px;color:#d8cedd}.tip{margin:16px 0;padding:14px 16px;border-left:3px solid var(--gold);border-radius:8px;background:#2c2037;color:#f4e8cf}.related nav{display:flex;flex-wrap:wrap;gap:9px}.related a{padding:8px 11px;border:1px solid var(--line);border-radius:8px;text-decoration:none}footer{padding:28px 16px;border-top:1px solid var(--line);color:#81768b;text-align:center;font-size:13px}@media(max-width:600px){main{padding-top:34px}.hero p{font-size:15px}article,.related{padding:19px}.top{gap:12px}.brand{font-size:14px}}
#guideLang{margin-left:auto;margin-right:12px;padding:8px;border:1px solid #554363;border-radius:8px;color:#fff8eb;background:#21162e}
.related nav{display:flex;flex-wrap:wrap;gap:10px}

.hero h1,h2,h3{overflow-wrap:anywhere}
.top{gap:8px;max-width:100%;min-width:0}.top .brand{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.top .play{flex:0 0 auto}@media(max-width:420px){.top{padding-left:12px;padding-right:12px}.top .play{padding:8px 9px;font-size:12px}.top select{max-width:100px;min-width:0}}
@media(max-width:420px){.top .brand{flex:1 1 0}.top #guideLang{flex:0 1 88px;max-width:88px;margin-left:0;margin-right:0}.top .play{white-space:nowrap}}