*{box-sizing:border-box}
html,body{margin:0;background:var(--paper)}
body{color:var(--ink);font-family:var(--f-ui);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:600px;margin:0 auto;padding-block:max(40px,env(safe-area-inset-top)) 56px;padding-inline:16px;display:grid;gap:28px}

header{display:grid;gap:6px}
h1{margin:0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.jp{font-family:var(--f-hand);font-weight:600;font-size:clamp(2.2rem,9vw,2.8rem);line-height:1.1}
.en{font-size:1rem;font-weight:500;color:var(--muted)}
.lede{margin:0;color:var(--muted);max-width:52ch}

.tools{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.tool{display:grid;gap:4px;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:inherit;text-decoration:none;transition:border-color .15s}
.tool:hover{border-color:var(--ink)}
.tool:focus-visible,.link:focus-visible{outline:2px solid var(--pen);outline-offset:3px}
.tool-name{font-weight:700;font-size:17px;line-height:1.3;display:flex;justify-content:space-between;gap:12px}
.tool-name::after{content:"→";color:var(--muted);font-weight:400}
.tool-desc{color:var(--muted);font-size:14px}
.empty{margin:0;color:var(--muted)}

.link{color:var(--muted);text-underline-offset:3px;text-decoration-color:var(--line)}
.link:hover{color:var(--ink)}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}