:root{--ink:#162033;--gold:#d8a84e;--paper:#fbfaf6}*{box-sizing:border-box}body{margin:0;font:16px system-ui,sans-serif;color:var(--ink);background:var(--paper)}header{padding:22px 6%;display:flex;justify-content:space-between;border-bottom:1px solid #ddd}header a{color:inherit;text-decoration:none}.hero{padding:80px 6%;max-width:1000px}.hero h1{font-size:clamp(40px,7vw,78px);line-height:1;margin:0 0 25px}.search{max-width:1100px;margin:auto;padding:35px 6%;background:#fff}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}input,select,button{width:100%;padding:13px;border:1px solid #bbb;border-radius:5px}button{background:#162033;color:#fff;border:0;cursor:pointer}.converter{display:grid;grid-template-columns:2fr 1fr;gap:12px}.katakana-result{min-height:70px;margin-top:18px;padding:18px;background:#f4f1e8;border-left:5px solid var(--gold);font-size:clamp(24px,4vw,38px);letter-spacing:.04em}.search-note{padding:12px 14px;background:#eef5ff;border-left:4px solid #1d4f80;margin:14px 0}.romaji{color:#46546a;font-style:italic}.result{padding:15px 0;border-bottom:1px solid #ddd}.result h3{margin:0 0 5px}.tag{font-size:12px;background:#eee;padding:3px 8px;border-radius:99px}footer{text-align:center;padding:40px}@media(max-width:700px){.grid,.converter{grid-template-columns:1fr}}