:root{
  /* Light theme colors */
  --bg:#ffffff;
  --bg-soft:#f6f8ff;
  --text:#111827;      /* almost black */
  --muted:#6b7280;     /* gray */
  --accent:#2563eb;    /* blue */
  --accent-2:#0ea5e9;  /* sky */
  --border:rgba(17,24,39,0.12);
  --radius:18px;
  --shadow:0 6px 18px rgba(17,24,39,0.08);
}

*{box-sizing:border-box;}
  body{
  margin:0;
  font-family: "Meiryo", "メイリオ", system-ui, sans-serif;
  color:var(--text);
  background: var(--bg);
}



/* Header */
.top{padding:22px 16px 8px;}
.top__inner{
  max-width:980px;margin:0 auto;
  padding:16px 18px;
  background: var(--bg-soft);
  border:1px solid var(--border);
  border-radius:var(--radius);
}
.top__title{margin:0;font-size:clamp(22px,3vw,30px);}
.top__subtitle{margin:6px 0 0;color:var(--muted);}

/* Main hub */
.hub{
  max-width:980px;margin:0 auto;
  padding:12px 16px 30px;
  display:grid;gap:14px;
}

.step{
  padding:14px;
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:var(--radius);
}
.step__title{
  margin:0 0 10px;
  font-size:clamp(16px,2.2vw,19px);
  letter-spacing:.02em;
}

.step--disabled{
  opacity:0.5;
  filter:saturate(0.8);
}

/* Choice buttons */
.choicegrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
@media (max-width:720px){
  .choicegrid{grid-template-columns:1fr;}
}

.choice{
  appearance:none;border:1px solid var(--border);
  background: #f9fafb;
  color:var(--text);
  border-radius:14px;
  padding:16px 14px;
  font-size:clamp(15px,2vw,17px);
  font-weight:700;
  text-align:center;
  cursor:pointer;
  box-shadow:var(--shadow);
  transition:transform .08s ease,border-color .2s ease,background .2s ease;
}
.choice--big{
  padding:22px 14px;
  font-size:clamp(17px,2.4vw,20px);
}

.choice:hover{
  transform:translateY(-1px);
  border-color:rgba(37,99,235,0.45);
  background:#ffffff;
}
.choice[aria-pressed="true"]{
  border-color:rgba(37,99,235,0.9);
  box-shadow:0 0 0 3px rgba(37,99,235,0.12), var(--shadow);
  background:#eef2ff;
}
.choice[disabled]{cursor:not-allowed;}

/* Actions */
.actions{
  margin-top:12px;
  display:flex;gap:8px;flex-wrap:wrap;
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:9px 14px;border-radius:12px;
  font-weight:700;text-decoration:none;
  border:1px solid rgba(37,99,235,0.25);
  background: linear-gradient(180deg,#3b82f6,#2563eb);
  color:white;cursor:pointer;
  transition:transform .08s ease,border-color .2s ease;
}
.btn:hover{
  transform:translateY(-1px);
  border-color:rgba(37,99,235,0.45);
}
.btn.ghost{
  background:#ffffff;
  color:var(--text);
  border:1px solid var(--border);
}
.btn--disabled{
  opacity:0.5;pointer-events:none;
}



/* Footer note */
.tiny{
  text-align:center;color:var(--muted);
  font-size:12px;
}
.usage {
  margin-top: 8px;
  font-size: 0.9rem;
  line-height: 1.6;
}

.usage__subtitle {
  margin: 0.8em 0 0.3em;
  font-size: 0.95rem;
  font-weight: 700;
}

.usage__list {
  margin: 0;
  padding-left: 1.4em;
}

.usage__list li + li {
  margin-top: 0.3em;
}

.usage__note {
  margin-top: 0.8em;
  font-size: 0.8rem;
  color: #666;
}

.guide-btn{
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 9999;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;

  background: rgba(255,255,255,.92);
  color: #111;
  border: 1px solid rgba(0,0,0,.15);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  font-weight: 700;
  user-select:none;
}
.guide-btn:hover{ transform: translateY(-1px); }
.guide-btn:active{ transform: translateY(0); }
.guide-btn:focus{ outline: 3px solid rgba(255,255,255,.35); outline-offset: 3px; }