:root{color-scheme:dark;background:#080808;color:#ededed;font-family:'Noto Sans KR',sans-serif;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;min-height:100svh;display:grid;place-items:center;padding:48px 0}
main{width:min(1040px,100%);margin:0 auto;padding:0 28px}
h1{margin:0;text-align:center;font-size:48px;font-weight:700;line-height:1.35;letter-spacing:-1.6px}
h1 span{white-space:nowrap}
.tools{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin-top:48px}
.tool{display:grid;place-items:center;width:150px;height:150px;aspect-ratio:1;text-align:center;text-decoration:none;border:1px solid #fff;border-radius:8px;background:#fff;color:#000;font-size:23px;font-weight:500;line-height:1.45;letter-spacing:-.6px;transition:background .12s,border-color .12s}
.tool:hover{background:#e8e8e8;border-color:#e8e8e8;color:#000}
.tool:focus-visible{outline:2px solid #ddd;outline-offset:5px}
@media(max-width:600px){main{padding:0 22px}h1{font-size:32px;letter-spacing:-1px;line-height:1.45}.tools{margin-top:36px;gap:16px}.tool{width:136px;height:136px;font-size:22px}}
@media(prefers-reduced-motion:reduce){.tool{transition:none}}