/* A short consumer guide, shared visual hierarchy in both themes. */
.quick-how {padding-block:40px 48px}
.quick-intro {max-width:780px;margin-bottom:32px}
.quick-intro h1 {font:650 clamp(42px,5vw,64px)/1.04 Bricolage,Arial,sans-serif;letter-spacing:-.045em;text-wrap:balance}
.quick-intro-copy>p {font-size:16px;line-height:1.7;color:var(--muted);max-width:65ch;margin-top:18px}
.quick-guide {position:relative;isolation:isolate;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:32px var(--inset-block) 0}
.quick-guide::before {content:'';position:absolute;z-index:-1;pointer-events:none;width:580px;height:580px;right:-390px;bottom:-420px;background:repeating-radial-gradient(circle,transparent 0 65px,#1ECBC411 70px 73px,transparent 80px 120px);filter:blur(4px)}
.quick-steps {list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin:0;padding:0 0 28px}
.quick-steps li {min-width:0;position:relative}
.quick-icon {display:block;width:48px;height:48px;margin-bottom:18px;color:var(--ink)}
.quick-icon svg {display:block;width:100%;height:100%}
.quick-steps h2 {font:600 clamp(21px,2vw,26px)/1.2 Bricolage,Arial,sans-serif;letter-spacing:-.025em;max-width:18ch}
.quick-steps p {font-size:14px;line-height:1.75;color:var(--muted);margin-top:12px;max-width:34ch}
.quick-zone {display:flex;align-items:flex-start;gap:16px;border-top:1px solid var(--line);padding:22px 0 24px}
.quick-zone>.target-mark {margin-top:3px;color:var(--primary);width:24px;height:24px;flex-basis:24px}
.quick-zone h2 {font:600 19px/1.3 Bricolage,Arial,sans-serif;letter-spacing:-.02em}
.quick-zone p {font-size:13px;line-height:1.7;max-width:80ch;color:var(--muted);margin-top:6px}
.quick-zone div>span {display:block;font-size:12px;margin-top:8px;color:var(--muted)}
.quick-start {display:flex;align-items:center;justify-content:space-between;gap:28px;margin-top:28px}
.quick-start strong {display:block;font:550 22px/1.3 Bricolage,Arial,sans-serif;letter-spacing:-.02em}
.quick-start p>span {display:block;color:var(--muted);font-size:13px;line-height:1.7;margin-top:6px}
.quick-start>div {flex-shrink:0;text-align:center}
.quick-explore {display:inline-flex;align-items:center;justify-content:center;gap:28px;min-height:52px;padding:14px 24px;background:var(--primary);color:var(--on-primary);border-radius:999px;text-decoration:none;font-weight:600;font-size:14px}
.quick-explore svg {width:20px;height:20px;flex-shrink:0}
.quick-access {display:block;font-size:11px;color:var(--muted);margin-top:8px}
:root[data-theme=dark] .quick-icon {color:#7DE8DC}
@media(hover:hover) and (pointer:fine) {.quick-explore:hover {text-decoration:underline;text-underline-offset:4px}}
@media(max-width:900px) {.quick-steps {gap:24px}.quick-steps h2 {font-size:23px}.quick-start strong {font-size:21px}}
@media(max-width:760px) {
 .quick-how {padding-block:30px 36px}.quick-intro {margin-bottom:24px}.quick-intro h1 {font-size:clamp(38px,7vw,52px)}.quick-intro-copy>p {font-size:15px;margin-top:16px}
 .quick-guide {padding:24px var(--inset-block) 0;border-radius:20px}.quick-steps {grid-template-columns:minmax(0,1fr);gap:26px;padding-bottom:24px}
 .quick-steps li {display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px}.quick-icon {width:40px;height:40px;margin:0}.quick-steps h2 {font-size:23px;max-width:100%}.quick-steps p {font-size:14px;margin-top:8px;max-width:50ch}
 .quick-zone {gap:12px;padding-block:22px}.quick-zone h2 {font-size:19px}.quick-zone p {font-size:13px}
 .quick-start {align-items:flex-start;flex-direction:column;gap:22px}.quick-start>div {align-self:stretch}.quick-explore {width:100%;gap:22px}.quick-start strong {font-size:22px}
}
@media(max-width:370px) {.quick-intro h1 {font-size:36px}.quick-steps li {grid-template-columns:32px minmax(0,1fr);gap:12px}.quick-icon {width:32px;height:32px}.quick-steps h2 {font-size:21px}}

/* v73: the illustration stays at the title height, outside the navigation. */
.quick-intro {max-width:none;display:grid;grid-template-columns:minmax(0,1fr) 250px;align-items:center;gap:32px}
.quick-intro-copy {min-width:0}.quick-intro h1 {font-size:clamp(42px,4.7vw,60px)}
.quick-target {position:relative;isolation:isolate;display:grid;place-items:center;width:250px;height:220px;padding:0;border:0;background:transparent;border-radius:32px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;perspective:700px}
.quick-target img {display:block;width:240px;height:240px;object-fit:contain;pointer-events:none;transform:rotateX(var(--target-x,0deg)) rotateY(var(--target-y,0deg));transition:transform 240ms cubic-bezier(.23,1,.32,1);filter:drop-shadow(0 14px 12px #073f471c)}
.quick-target-glow {position:absolute;z-index:-1;width:180px;height:150px;border-radius:50%;background:radial-gradient(ellipse,#1ecbc429,transparent 70%);filter:blur(12px);pointer-events:none}
.quick-target-ripple {position:absolute;inset:35px 45px;border:2px solid #1ecbc4;border-radius:50%;opacity:0;pointer-events:none}
.quick-target:focus-visible {outline:2px solid var(--primary);outline-offset:5px}


@keyframes target-hit {0% {transform:scale(1)}25% {transform:scale(.94) rotateY(-6deg)}65% {transform:scale(1.025) rotateY(3deg)}100% {transform:scale(1)}}
@keyframes target-wave {0% {opacity:0;transform:scale(.85)}25% {opacity:.5}100% {opacity:0;transform:scale(1.35)}}
:root[data-theme=dark] .quick-target-glow {background:radial-gradient(ellipse,#1ecbc43b,transparent 70%)}
@media(max-width:900px) {.quick-intro {grid-template-columns:minmax(0,1fr) 200px;gap:24px}.quick-target {width:200px;height:210px}.quick-target img {width:210px;height:210px}.quick-intro h1 {font-size:clamp(38px,5.4vw,48px)}}
@media(max-width:600px) {.quick-intro {grid-template-columns:minmax(0,1fr);gap:4px}.quick-intro h1 {font-size:clamp(36px,7.5vw,44px)}.quick-target {justify-self:center;width:170px;height:145px;margin:2px 0 6px}.quick-target img {width:170px;height:170px}.quick-target-ripple {inset:15px 30px}.quick-target-glow {width:150px;height:110px}}
@media(prefers-reduced-motion:reduce) {.quick-target img {transition:none}.quick-target.is-hit img,.quick-target.is-hit .quick-target-ripple {animation:none}}

/* v74: flight, impact, then a damped recoil. The embedded dart shares the target transform. */
.quick-target {overflow:clip;overflow-clip-margin:20px}
.quick-target-object {display:block;position:relative;width:240px;height:240px;pointer-events:none;transform:rotateX(var(--target-x,0deg)) rotateY(var(--target-y,0deg));transition:transform 240ms cubic-bezier(.23,1,.32,1);transform-origin:44.6% 48.6%;transform-style:preserve-3d}
.quick-target-object img {width:100%;height:100%;transform:none;transition:none}
.quick-dart {position:absolute;display:block;width:50%;height:auto;left:-5.1%;top:calc(48.6% - 9.375%);opacity:0;filter:drop-shadow(0 3px 2px #073f4740);transform-origin:100% 50%}
.quick-target.has-dart .quick-dart {opacity:1}
.quick-target.is-hit .quick-dart {animation:dart-flight 220ms cubic-bezier(.4,0,.85,.6) both}
.quick-target.is-hit .quick-target-object {animation:target-impact 860ms linear both}
.quick-target.is-hit .quick-target-ripple {animation:target-wave 360ms 200ms ease-out both}
@keyframes dart-flight {0% {opacity:0;transform:translateX(var(--dart-flight,-110px))}12% {opacity:1}100% {opacity:1;transform:translateX(0)}}
@keyframes target-impact {0%,25% {transform:translateX(0) rotateY(0)}34% {transform:translateX(5px) rotateY(12deg)}48% {transform:translateX(-2px) rotateY(-6deg)}63% {transform:translateX(1px) rotateY(3deg)}78% {transform:translateX(-.5px) rotateY(-1.2deg)}100% {transform:translateX(0) rotateY(0)}}
@media(max-width:900px) {.quick-target-object {width:210px;height:210px}}
@media(max-width:600px) {.quick-target-object {width:170px;height:170px}}
@media(prefers-reduced-motion:reduce) {.quick-target-object {transition:none}.quick-target.is-hit .quick-target-object,.quick-target.is-hit .quick-dart,.quick-target.is-hit .quick-target-ripple {animation:none}}

/* v79: reserve the full mobile scene; do not rely on overflow-clip-margin in Safari. */
@media(max-width:600px) {
 .quick-target {width:min(100%,300px);height:210px;overflow:visible;overflow-clip-margin:0;margin-block:8px 6px;--dart-flight:-56px}
 .quick-target-ripple {inset:auto;width:150px;height:150px;left:calc(50% - 75px);top:calc(50% - 75px)}
}
@media(max-width:370px) {.quick-target {--dart-flight:-32px}}