:root{--bg:#ffffff;--muted:#6b7280;--accent:#0366d6}
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;margin:0;background:var(--bg);color:#111}
.container{max-width:980px;margin:0 auto;padding:20px}
.site-header{border-bottom:1px solid #e6e6e6;padding:20px 0}
.tagline{color:var(--muted);margin:6px 0 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:16px}
.card{border:1px solid #e6e6e6;padding:16px;border-radius:8px;background:#fff}
.card h3{margin:0 0 8px;font-size:1.05rem}
.btn{display:inline-block;margin-top:10px;padding:8px 12px;background:var(--accent);color:white;border-radius:6px;text-decoration:none}
.notes{margin-top:24px;color:var(--muted)}
.site-footer{border-top:1px solid #e6e6e6;padding:12px 0;margin-top:40px;text-align:center;color:var(--muted)}
@media (max-width:520px){
    .container{padding:12px}
    .axis-row { flex-direction:column; align-items:flex-start; }
    .axis-row input[type="number"] { width:160px; }
}

/* axis inputs 横並び */
.axis-row { display:flex; gap:8px; align-items:stretch; margin:0 0; flex-wrap:wrap; }
.axis-row label { display:flex; flex-direction:column; font-size:2rem; font-weight:600; }
.axis-row input[type="number"] { width:110px; padding:6px 8px; font-size:13px; box-sizing:border-box; }

.back-btn {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1000;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.12);
    background: white;
    color: #111;
    font-size: 20px;
    line-height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  }
  .back-btn:hover { background:#f5f5f5; }
  .back-btn:active { transform: translateY(1px); }
  @media (max-width:480px) {
    .back-btn { width:32px; height:32px; font-size:18px; top:8px; left:8px; }
  }