html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { background: #f4f7fb; color: #172033; }

.disc-progress-wrap { max-width: 720px; margin: 24px auto 10px; }
.disc-progress-label { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 15px; }
.disc-progress { height: 9px; overflow: hidden; border-radius: 999px; background: #dfe6f1; }
.disc-progress-bar { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#536dfe,#7c4dff); transition: width .25s ease; }

.disc-stage { position: relative; width: min(88vw, 520px); height: min(58vh, 390px); min-height: 300px; margin: 22px auto; perspective: 1000px; }
.disc-card { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 44px 34px; border-radius: 26px; background: #fff; box-shadow: 0 18px 50px rgba(23,32,51,.16); text-align: center; transform: translate3d(0,0,0); will-change: transform; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.disc-card.is-grabbing { cursor: grabbing; }
.disc-card.is-returning { transition: transform .22s cubic-bezier(.2,.8,.2,1); }
.disc-card.is-leaving { transition: transform .28s cubic-bezier(.3,.7,.2,1); }
.disc-card-next { z-index: 1; transform: translate3d(0,10px,0) scale(.96); opacity: .62; pointer-events: none; }
.disc-card-current { z-index: 2; }
.disc-question { max-width: 100%; font-size: 30px !important; line-height: 1.42 !important; font-weight: 700; letter-spacing: .01em; overflow-wrap: anywhere; }
.disc-card-next .disc-question { color: #657087; }
.disc-choice { 
	position: absolute; 
	top: 50%; 
	left: 50%; 
	z-index: 3; 
	padding: 16px 26px; /* 邊框內空間：數字越大，框越大 */
	border: 6px solid currentColor; /* 邊框粗細 */
	border-radius: 12px; /* 圓角大小 */
	background: rgba(255,255,255,.9); 
	box-shadow: 0 8px 24px rgba(23,32,51,.18); 
	font-size: 52px !important; /* YES／NO 字體大小 */ 
	line-height: 1 !important; 
	font-weight: 900; 
	opacity: 0; 
	pointer-events: none; 
}
.disc-choice-yes { color: #168d54; transform: translate(-50%,-50%) rotate(5deg); }
.disc-choice-no { color: #d9364d; transform: translate(-50%,-50%) rotate(-5deg); }
.disc-hint { display: flex; justify-content: space-between; width: min(88vw,520px); margin: 0 auto; font-size: 15px; font-weight: 700; }
.disc-hint-no { color: #c93448; } .disc-hint-yes { color: #148351; }
.disc-status { min-height: 24px; margin: 12px auto 0; text-align: center; font-size: 14px; color: #657087; }
.disc-status.is-error { color: #c93448; font-weight: 700; }

.guide-card { max-width: 560px; margin: 24px auto; padding: 34px; border-radius: 24px; background: #fff; box-shadow: 0 14px 42px rgba(23,32,51,.1); }
.guide-card h1, .guide-card .lead { text-align: center; }
.guide-card .lead { color: #657087; }
.guide-desc { margin: 26px 0; font-size: 17px; }
.swipe-demo { display: flex; justify-content: center; margin: 30px 0 18px; }
.demo-card { display: flex; align-items: center; justify-content: center; width: 230px; height: 130px; border-radius: 18px; background: #fff; box-shadow: 0 10px 32px rgba(23,32,51,.16); text-align: center; font-size: 19px !important; font-weight: 700; animation: disc-demo 2.8s ease-in-out infinite; }
.guide-arrow { display: flex; justify-content: space-between; font-size: 18px; font-weight: 800; }
.guide-arrow div:first-child { color: #c93448; } .guide-arrow div:last-child { color: #148351; }
@keyframes disc-demo { 0%,100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(35px) rotate(4deg); } 50% { transform: translateX(0) rotate(0); } 75% { transform: translateX(-35px) rotate(-4deg); } }

@media (max-width: 480px) {
  .disc-stage { width: 92vw; height: 54vh; min-height: 290px; }
  .disc-card { padding: 40px 24px; border-radius: 22px; }
  .disc-question { font-size: 26px !important; }
  .disc-choice { font-size: 44px !important; }
  .disc-hint { width: 92vw; }
  .guide-card { padding: 26px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}