.csed-app {
  --csed-ink: #28302c;
  --csed-muted: #68716c;
  --csed-sage: #789485;
  --csed-sage-dark: #536e61;
  --csed-pale: #edf3ef;
  --csed-cream: #fbf9f4;
  --csed-gold: #c9a66b;
  position: relative;
  box-sizing: border-box;
  max-width: 820px;
  min-height: 600px;
  margin: 32px auto;
  overflow: hidden;
  color: var(--csed-ink);
  background:
    radial-gradient(circle at 92% 8%, rgba(201,166,107,.16), transparent 24%),
    radial-gradient(circle at 5% 92%, rgba(120,148,133,.15), transparent 28%),
    var(--csed-cream);
  border: 1px solid rgba(83,110,97,.15);
  border-radius: 28px;
  box-shadow: 0 24px 70px rgba(44,57,50,.1);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  line-height: 1.8;
}

.csed-app *, .csed-app *::before, .csed-app *::after { box-sizing: border-box; }
.csed-app [hidden] { display: none !important; }
.csed-intro, .csed-quiz, .csed-result { padding: clamp(38px, 8vw, 78px); }
.csed-intro { min-height: 600px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.csed-eyebrow { margin: 0 0 12px; color: var(--csed-sage-dark); font-size: 12px; font-weight: 700; letter-spacing: .24em; }
.csed-app h1 { margin: 0; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: clamp(32px, 6vw, 52px); font-weight: 500; line-height: 1.42; letter-spacing: .04em; }
.csed-lead { max-width: 610px; margin: 28px auto 22px; color: var(--csed-muted); font-size: 16px; }
.csed-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-bottom: 30px; }
.csed-meta span { padding: 5px 14px; color: var(--csed-sage-dark); background: rgba(120,148,133,.1); border-radius: 100px; font-size: 12px; font-weight: 600; }
.csed-primary, .csed-next { min-width: 230px; padding: 16px 26px; border: 0; border-radius: 100px; color: #fff; background: var(--csed-sage-dark); box-shadow: 0 10px 25px rgba(83,110,97,.2); font: inherit; font-weight: 700; cursor: pointer; transition: transform .2s, opacity .2s, box-shadow .2s; }
.csed-primary:hover, .csed-next:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(83,110,97,.27); }
.csed-primary span, .csed-next span { margin-left: 10px; }
.csed-note { max-width: 500px; margin: 18px auto 0; color: #7d8580; font-size: 12px; }
.csed-progress-wrap { margin-bottom: 45px; }
.csed-progress-copy { display: flex; justify-content: space-between; margin-bottom: 8px; color: var(--csed-sage-dark); font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.csed-progress { height: 5px; overflow: hidden; background: rgba(120,148,133,.16); border-radius: 10px; }
.csed-progress span { display: block; width: 8%; height: 100%; background: linear-gradient(90deg, var(--csed-sage), var(--csed-gold)); border-radius: inherit; transition: width .35s ease; }
.csed-question { min-width: 0; margin: 0; padding: 0; border: 0; }
.csed-question legend { width: 100%; margin-bottom: 30px; padding: 0; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: clamp(22px, 4vw, 30px); font-weight: 600; line-height: 1.55; }
.csed-question legend:focus { outline: none; }
.csed-options { display: grid; gap: 13px; }
.csed-option { display: grid; grid-template-columns: 40px 1fr 25px; gap: 14px; align-items: center; min-height: 74px; margin: 0; padding: 15px 20px; background: rgba(255,255,255,.68); border: 1px solid rgba(83,110,97,.16); border-radius: 15px; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.csed-option:hover { transform: translateX(3px); border-color: rgba(83,110,97,.42); background: #fff; }
.csed-option:has(input:checked) { border-color: var(--csed-sage); background: var(--csed-pale); box-shadow: 0 7px 20px rgba(83,110,97,.08); }
.csed-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.csed-option input:focus-visible + .csed-option-letter { outline: 3px solid rgba(201,166,107,.45); outline-offset: 3px; }
.csed-option-letter { display: grid; width: 36px; height: 36px; place-items: center; color: var(--csed-sage-dark); background: var(--csed-pale); border-radius: 50%; font-family: Georgia, serif; font-weight: 700; }
.csed-option:has(input:checked) .csed-option-letter { color: #fff; background: var(--csed-sage-dark); }
.csed-option-text { color: var(--csed-ink); font-size: 15px; }
.csed-option-check { color: var(--csed-sage-dark); opacity: 0; transform: scale(.5); transition: .2s; }
.csed-option:has(input:checked) .csed-option-check { opacity: 1; transform: scale(1); }
.csed-nav { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-top: 34px; }
.csed-back { padding: 12px 5px; color: var(--csed-muted); background: transparent; border: 0; font: inherit; cursor: pointer; }
.csed-back:disabled, .csed-next:disabled { cursor: not-allowed; opacity: .35; }
.csed-next { min-width: 190px; }
.csed-validation { min-height: 1.8em; margin: 8px 0 0; color: #a25757; text-align: right; font-size: 12px; }
.csed-result { text-align: center; }
.csed-result-kicker { margin: 0 0 12px; color: var(--csed-muted); font-size: 14px; }
.csed-stage-number { display: grid; width: 58px; height: 58px; margin: 0 auto 14px; place-items: center; color: #fff; background: var(--csed-sage-dark); border-radius: 50%; font-family: Georgia, serif; font-size: 28px; }
.csed-result h2 { margin: 0; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: clamp(27px, 5vw, 40px); font-weight: 600; line-height: 1.45; }
.csed-result-summary { max-width: 650px; margin: 25px auto 38px; color: var(--csed-muted); text-align: left; }
.csed-result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; text-align: left; }
.csed-result-card { padding: 25px; background: rgba(255,255,255,.74); border: 1px solid rgba(83,110,97,.14); border-radius: 18px; }
.csed-program-card { background: var(--csed-pale); }
.csed-card-label { margin: 0 0 8px; color: var(--csed-sage-dark); font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.csed-result-card h3 { margin: 0 0 10px; font-size: 18px; line-height: 1.55; }
.csed-result-card p:not(.csed-card-label) { margin: 0; color: var(--csed-muted); font-size: 13px; }
.csed-next-step::before { content: "✦"; margin-right: 8px; color: var(--csed-gold); }
.csed-tendencies { margin-top: 38px; padding: 30px; text-align: left; background: rgba(255,255,255,.48); border-radius: 20px; }
.csed-tendencies h3 { margin: 0; font-size: 17px; }
.csed-tendencies > p { margin: 3px 0 20px; color: var(--csed-muted); font-size: 12px; }
.csed-tendency-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.csed-tendency { display: flex; justify-content: space-between; gap: 12px; padding: 11px 14px; background: #fff; border-radius: 10px; font-size: 12px; }
.csed-tendency strong { color: var(--csed-sage-dark); white-space: nowrap; }
.csed-disclaimer { max-width: 610px; margin: 28px auto 18px; color: #858c88; font-size: 11px; }
.csed-secondary { padding: 10px 18px; color: var(--csed-sage-dark); background: transparent; border: 1px solid rgba(83,110,97,.3); border-radius: 100px; font: inherit; font-size: 12px; cursor: pointer; }
.csed-mobile-break { display: none; }

@media (max-width: 640px) {
  .csed-app { min-height: 560px; margin: 12px 0; border-radius: 20px; }
  .csed-intro, .csed-quiz, .csed-result { padding: 34px 20px; }
  .csed-mobile-break { display: block; }
  .csed-option { grid-template-columns: 34px 1fr 18px; gap: 10px; padding: 13px; }
  .csed-option-letter { width: 32px; height: 32px; }
  .csed-nav { flex-wrap: wrap-reverse; }
  .csed-next { order: 2; width: 100%; }
  .csed-back { order: 1; margin: auto; }
  .csed-result-grid, .csed-tendency-list { grid-template-columns: 1fr; }
  .csed-tendencies { padding: 20px 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .csed-app *, .csed-app *::before, .csed-app *::after { scroll-behavior: auto !important; transition: none !important; }
}