:root{--bg:#f6f8fb;--card:#fff;--text:#1f2937;--sub:#6b7280;--accent:#2563eb;--line:#e5e7eb}
@media(prefers-color-scheme:dark){:root{--bg:#111827;--card:#1f2937;--text:#f3f4f6;--sub:#9ca3af;--accent:#60a5fa;--line:#374151}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif;line-height:1.7}
header{background:var(--card);border-bottom:1px solid var(--line);padding:12px 16px}
header a{color:var(--text);font-weight:700;text-decoration:none}
main{max-width:720px;margin:0 auto;padding:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin:16px 0}
h1{font-size:1.4rem;margin:8px 0}
h2{font-size:1.15rem;margin:24px 0 8px}
label{display:block;margin:12px 0 4px;font-weight:600}
input,select,textarea{width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;font-size:16px;background:var(--bg);color:var(--text)}
textarea{min-height:160px}
button{margin-top:12px;padding:10px 18px;border:0;border-radius:8px;background:var(--accent);color:#fff;font-size:16px;cursor:pointer}
.result{margin-top:16px;padding:12px;border-radius:8px;background:var(--bg);border:1px dashed var(--line);font-size:1.05rem}
.result b{font-size:1.4rem;color:var(--accent)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.grid a{display:block;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--text);text-decoration:none}
.grid a small{display:block;color:var(--sub)}
.ad{min-height:90px;margin:16px 0;text-align:center;color:var(--sub);font-size:.8rem}
footer{max-width:720px;margin:0 auto;padding:16px;color:var(--sub);font-size:.85rem}
footer a{color:var(--sub)}
.row{display:flex;gap:8px}.row>*{flex:1}
ol{padding-left:1.4em}
main p{margin:.6em 0}