:root{--bg:#f7f7f5;--surface:#fff;--text:#1a1a1a;--muted:#6b6b6b;--border:#e2e2de;--accent:#2f5fd0;--accent-text:#fff;--error:#c0362c;--radius:10px}@media (prefers-color-scheme:dark){:root{--bg:#141414;--surface:#1e1e1e;--text:#ececec;--muted:#9a9a9a;--border:#333;--accent:#6f95ff;--accent-text:#0e0e0e;--error:#ff7a6e}}*{box-sizing:border-box}html,body{margin:0}body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Hiragino Sans,Noto Sans JP,sans-serif;line-height:1.6}.container{max-width:640px;margin:0 auto;padding:64px 16px}.hero{text-align:center;margin-bottom:32px}.hero h1{letter-spacing:-.02em;margin:0;font-size:2.25rem}.hero p{color:var(--muted);margin:8px 0 0}.center{text-align:center}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px}label{margin-bottom:6px;font-size:.9rem;font-weight:600;display:block}.row{align-items:stretch;gap:8px;display:flex}input{width:100%;min-width:0;font:inherit;color:inherit;background:var(--bg);border:1px solid var(--border);border-radius:8px;flex:1;padding:10px 12px}input:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button{font:inherit;background:var(--accent);color:var(--accent-text);cursor:pointer;white-space:nowrap;border:1px solid #0000;border-radius:8px;padding:10px 16px;font-weight:600}button:disabled{opacity:.5;cursor:not-allowed}button.secondary{color:var(--text);border-color:var(--border);background:0 0}button.link{color:var(--accent);background:0 0;margin-top:12px;padding:0;font-size:.9rem;font-weight:500}.slug{margin-top:12px}.slug small{color:var(--muted);margin-top:4px;display:block}.error{color:var(--error);margin:16px 0 0}.result{border-top:1px solid var(--border);margin-top:20px;padding-top:20px}.result .row{align-items:center}.short{min-width:0;color:var(--accent);overflow-wrap:anywhere;flex:1;font-size:1.1rem;font-weight:600}.original{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;margin:8px 0 0;font-size:.85rem;overflow:hidden}a{color:var(--accent)}@media (max-width:480px){.row{flex-direction:column}.result .row{align-items:stretch}}