/* A prepared illustration, independent of the product and shared site scripts. */
.sample-section { background: var(--paper); color: var(--ink); margin-top: 48px; padding: 56px 0; }
.sample-heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 32px; }
.sample-heading .b-label { color: var(--muted); margin-bottom: 14px; }
.sample-heading h2 { font-size: clamp(32px,4vw,52px); line-height: 1.06; letter-spacing: -.04em; font-weight: 600; }
.sample-heading > p { max-width: 290px; font-size: 15px; line-height: 24px; }
.sample-shell { border: 1px solid var(--line); background: #fff; border-radius: 20px; overflow: hidden; }
.sample-progress { list-style: none; padding: 0 32px; margin: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-bottom: 1px solid var(--line); }
.sample-progress li { display: flex; align-items: center; gap: 10px; min-height: 66px; font-size: 13px; color: var(--muted); border-bottom: 2px solid transparent; }
.sample-progress span { width: 25px; height: 25px; border: 1px solid #c6ccd5; border-radius: 50%; display: grid; place-items: center; font-size: 12px; }
.sample-progress [aria-current="step"] { color: var(--ink); border-bottom-color: var(--blue); font-weight: 600; }
.sample-progress [aria-current="step"] span, .sample-progress .is-complete span { color: white; background: var(--blue); border-color: var(--blue); }
.sample-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr); }
.sample-controls { padding: 32px; min-width: 0; }
.sample-controls h3 { font-size: 25px; line-height: 31px; font-weight: 600; letter-spacing: -.025em; margin-bottom: 8px; }
.sample-controls h3:focus { outline: none; }
.sample-step-intro { color: var(--muted); font-size: 14px; line-height: 22px; margin-bottom: 22px; }
.sample-choices { margin: 0; padding: 0; border: 0; min-width: 0; }
.sample-choices legend { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.sample-choice { position: relative; display: flex; gap: 12px; align-items: center; padding: 12px 14px; min-height: 56px; border: 1px solid #dce1e7; border-radius: 10px; margin-top: 8px; cursor: pointer; font-size: 14px; line-height: 20px; transition: background .18s, border-color .18s; }
.sample-choice:has(input:checked) { border-color: var(--blue); background: #f1f4ff; }
.sample-choice:hover { border-color: #2f5bff; }
.sample-choice:focus-within { outline: 3px solid var(--blue); outline-offset: 3px; }
.sample-choice input { margin: 0; width: 17px; height: 17px; accent-color: var(--blue); flex: 0 0 auto; }
.sample-choice small { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }
.sample-controls .sample-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid #234ee7; background: var(--blue); color: white; border-radius: 10px; padding: 14px 18px; width: 100%; min-height: 50px; font-size: 14px; font-weight: 600; box-shadow: 0 2px 0 #1335a5; transition: background .18s, transform .18s; }
.sample-controls .sample-button:hover { background: #2549da; transform: translateY(-1px); }
.sample-controls .sample-button:active { transform: translateY(1px); box-shadow: none; }
.sample-actions { display: flex; gap: 12px; align-items: center; margin-top: 24px; }
.sample-back, .sample-reset { border: 0; background: transparent; padding: 8px 0; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
.sample-back { padding-right: 12px; }
.sample-skip { margin-top: 12px; font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 4px; }
.sample-caption { padding: 18px 32px; border-top: 1px solid var(--line); font-size: 12px; line-height: 19px; color: var(--muted); }
.sample-stage { margin: 16px 16px 16px 0; min-width: 0; }
.sample-scene { position: relative; overflow: hidden; isolation: isolate; background: var(--lilac); border-radius: 12px; aspect-ratio: 1.15; container-type: inline-size; }
.sample-yard { position: absolute; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s; }
.sample-scene-label { position: absolute; left: 20px; top: 20px; z-index: 4; font-size: 12px; line-height: 18px; color: var(--muted); background: #fffffff0; padding: 7px 12px; border-radius: 24px; }
.sample-chat { position: absolute; top: 14%; left: 8%; right: 8%; padding: 19px 22px; border-radius: 16px 16px 16px 2px; background: white; box-shadow: 0 5px 20px #18253608; font-size: clamp(14px,2.8cqi,19px); line-height: 1.45; transition: opacity .4s, transform .6s; }
.sample-chat strong { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 7px; }
.sample-mascots { position: absolute; left: 1%; bottom: 12%; width: 29%; aspect-ratio: 1; z-index: 3; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.sample-mascots::before { content: ''; position: absolute; width: 53%; height: 6%; background: #17253622; border-radius: 50%; left: 24%; bottom: 9%; filter: blur(6px); }
.sample-mascots img { position: absolute; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(1px 6px 4px #1423370c); }
/* Reserve room for the full artwork and contact strip in every scene. */
.sample-sign { position: absolute; width: 62%; right: 5%; bottom: 12%; aspect-ratio: 4/3; z-index: 2; transform: rotate(-2deg); transition: bottom .8s, width .8s, right .8s, transform .8s cubic-bezier(.2,.7,.2,1), filter .8s; filter: drop-shadow(2px 5px 6px #18253626); }
.sample-sign-art { display: block; position: relative; width: 100%; height: auto; z-index: 2; }
.sample-sign-art[hidden] { display: none; }
.sample-stake { position: absolute; top: 96%; width: 3px; height: 34%; background: linear-gradient(90deg,#7c8487,#d4d9da,#687474); opacity: 0; transition: opacity .5s; }
.sample-stake-left { left: 22%; }.sample-stake-right { right: 22%; }
.sample-scene-note { position: absolute; left: 20px; right: 20px; bottom: 14px; font-size: 12px; text-align: right; color: var(--muted); }
.sample-section[data-step="2"] .sample-chat { opacity: 0; transform: translateY(-18px); }
.sample-section[data-step="2"] .sample-sign { bottom: 18%; width: 80%; right: 10%; transform: rotate(0); }
.sample-section[data-step="2"] .sample-mascots { opacity: 0; transform: translate(-12%,10%) scale(.85); }
.sample-section[data-step="3"] .sample-yard { opacity: 1; }
.sample-section[data-step="3"] .sample-chat { opacity: 0; transform: translateY(-36px); }
.sample-section[data-step="3"] .sample-sign { bottom: 24%; transform: rotate(-1deg); filter: drop-shadow(3px 8px 5px #1825363b); }
.sample-section[data-step="3"] .sample-mascots { transform: translate(0,6%); }
.sample-section[data-step="3"] .sample-stake { opacity: 1; }
.sample-section[data-step="3"] .sample-scene-note { color: white; text-shadow: 0 1px 5px #000; }
.sample-complete { color: #174f3c; font-size: 13px; font-weight: 600; margin-bottom: 14px; }
.sample-prompt { margin-top: 16px; border-top: 1px solid var(--line); font-size: 13px; line-height: 21px; }
.sample-prompt summary { font-weight: 600; }
.sample-prompt p { padding-block: 12px; }
.sample-prompt button { font-size: 13px; border: 1px solid var(--line); background: #f6f7f9; border-radius: 8px; padding: 8px 12px; }
.sample-copy-status { min-height: 21px; font-size: 12px; line-height: 18px; color: var(--muted); }
.sample-announcement { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.sample-fallback { font-size: 15px; line-height: 25px; }
.sample-fallback p { margin-bottom: 20px; }
@media(max-width:900px) {
 .sample-layout { grid-template-columns: minmax(0,1fr) minmax(0,1.25fr); }
 .sample-controls { padding: 24px; }.sample-scene { aspect-ratio: .95; }
 .sample-chat { top: 20%; padding: 12px 14px; }.sample-chat strong { display: none; }
 .sample-heading > p { max-width: 250px; }
}
@media(max-width:700px) {
 .sample-section { margin-top: 36px; padding: 32px 0; }
 .sample-heading { display: block; margin-bottom: 24px; }.sample-heading > p { max-width: none; margin-top: 16px; font-size: 14px; line-height: 22px; }
 .sample-shell { border-radius: 14px; }.sample-layout { display: flex; flex-direction: column; }
 .sample-progress { padding: 0 16px; gap: 8px; }.sample-progress li { font-size: 12px; gap: 6px; min-height: 60px; }.sample-progress span { width: 22px; height: 22px; flex: 0 0 22px; }
 .sample-controls { padding: 22px 20px 8px; }.sample-controls h3 { font-size: 23px; line-height: 29px; }
 .sample-step-intro { margin-bottom: 16px; }.sample-choice { min-height: 50px; padding: 10px 12px; }
 .sample-actions { margin-top: 18px; }.sample-skip { margin-top: 8px; }
 .sample-stage { order: -1; margin: 12px 12px 0; }.sample-scene { aspect-ratio: .9; }
 .sample-chat { padding: 12px 14px; top: 17%; }.sample-chat strong { display: none; }
 .sample-scene-label { top: 14px; left: 12px; }.sample-scene-note { bottom: 10px; left: 12px; right: 12px; }
 .sample-caption { padding: 16px 20px; }
 .sample-section[data-step="2"] .sample-sign { bottom: 19%; width: 90%; right: 5%; }
}
@media(prefers-reduced-motion:reduce) {
 .sample-section *, .sample-section *::before { animation: none !important; transition: none !important; }
}