:root{--text:#111;--muted:#666;--line:#cfcfcf;--bg:#fff;}
*{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);}
.page{min-height:100vh;display:flex;flex-direction:column;}
.center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px;text-align:center;}
.title{margin:0 0 10px;font-size:56px;font-weight:800;letter-spacing:1px;}
.subtitle{margin:0 0 32px;font-size:18px;color:var(--muted);}
.bar{display:flex;align-items:center;gap:10px;justify-content:center;}
.inputWrap{display:flex;align-items:center;border:1px solid var(--line);border-radius:4px;overflow:hidden;height:38px;background:#fff;}
.prefix{padding:0 12px;color:#333;border-right:1px solid var(--line);white-space:nowrap;font-size:16px;line-height:38px;}
.slug{border:0;outline:0;padding:0 12px;width:280px;height:38px;font-size:16px;}
.slug::placeholder{color:#9a9a9a;font-style:italic;}
.go{height:38px;padding:0 14px;border:1px solid var(--line);border-radius:4px;background:#fff;cursor:pointer;font-size:16px;}
.go:hover{background:#f6f6f6;}
.note{margin:10px 0 0;color:var(--muted);font-size:14px;}
.footer{padding:18px 16px 22px;text-align:center;color:var(--muted);}
.links a{color:var(--muted);text-decoration:none;font-size:14px;}
.links a:hover{text-decoration:underline;}
.sep{margin:0 10px;color:#b0b0b0;}
.copy{margin-top:8px;font-size:13px;}
@media (max-width:520px){.title{font-size:44px;}.bar{flex-direction:column;}.slug{width:260px;}}