.ss-page{background:radial-gradient(ellipse at 20% 5%,#e7eafe,transparent 50%),linear-gradient(155deg,#f7f6ff,#fff6ed);min-height:100vh}.ss-page main{max-width:860px;margin:auto;padding:16px 18px 48px}.ss-nav{display:flex;justify-content:space-between;font-size:14px}.ss-nav a{color:#63558a;font-weight:700;text-decoration:none;min-height:36px;display:flex;align-items:center}.ss-heading{text-align:center;margin:8px 0 17px}.ss-heading h1{font-size:clamp(30px,5vw,40px);letter-spacing:-1.2px;margin:0}.ss-heading p{color:#776984;font-size:14px;margin:5px 0}.ss-game{max-width:470px;margin:auto;background:#ffffffdc;border:1px solid #fff;padding:17px;border-radius:24px;box-shadow:0 12px 34px #67628e14}.ss-stats{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid #eeeaf5;padding:0 5px 12px}.ss-stats>div{font-size:10px;color:#7a7086;text-transform:uppercase;letter-spacing:.7px}.ss-stats strong{display:block;color:#433953;font-size:20px;letter-spacing:0;line-height:1.4}.ss-round{display:flex;align-items:center;justify-content:space-between;margin-top:9px;min-height:30px}.ss-round>span{font-size:11px;color:#766687;font-weight:700}.ss-game button{font:inherit;cursor:pointer;border:1px solid #dfd8ec;border-radius:12px;min-height:44px;padding:10px 16px;background:white;color:#675286;font-weight:750;font-size:13px}.ss-game button:hover{background:#f3edfc}.ss-game .ss-small{min-height:32px;border:0;padding:6px;font-size:11px;background:none}.ss-game button:focus-visible,.ss-nav a:focus-visible{outline:3px solid #7155ac;outline-offset:3px}.ss-objective{text-align:center;margin:8px 0 4px;font-size:clamp(18px,4.8vw,23px);line-height:1.3;color:#413552}.ss-instruction{text-align:center;color:#7a6d88;font-size:12px;margin:0 0 12px;min-height:17px}.ss-stage{position:relative;background:linear-gradient(160deg,#f6f6fe,#eeedf9);border:1px solid #e4e1f0;border-radius:19px;overflow:hidden}.ss-stage svg{display:block;width:100%;height:auto;touch-action:none;user-select:none;-webkit-user-select:none;cursor:crosshair}.ss-stage svg:focus-visible{outline:3px solid #8364b9;outline-offset:-4px;border-radius:18px}.ss-shape{fill:url(#ss-fill);stroke:#7660b7;stroke-width:2;stroke-linejoin:round;filter:drop-shadow(0 5px 0 #6c57aa17)}.ss-pale{fill:#dce1ed;stroke:#abb4c8}.ss-zone{fill:#f77f91;stroke:#b54260;stroke-width:2;stroke-dasharray:5 3;opacity:.95;pointer-events:none}.ss-target-ring{fill:#fff;stroke:#5266aa;stroke-width:2}.ss-target{fill:#5266aa}.ss-cut{stroke:#ffbf62;stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 2px white);pointer-events:none}.ss-hint{stroke:white;stroke-width:3;stroke-dasharray:8 7;stroke-linecap:round;filter:drop-shadow(0 0 2px #72608a);pointer-events:none}.ss-first-hint{animation:ss-guide 1.4s ease-out 1}.ss-cursor{fill:#fff;stroke:#7560aa;stroke-width:2;pointer-events:none}.ss-piece{animation:ss-separate .3s cubic-bezier(.2,.8,.3,1) both}.ss-piece-label{font:700 13px var(--font);text-anchor:middle;dominant-baseline:middle;fill:#33294b;paint-order:stroke;stroke:#e5dafa;stroke-width:3;stroke-linejoin:round;pointer-events:none}.ss-feedback{display:flex;flex-direction:column;gap:5px;justify-content:center;min-height:86px;padding:12px 4px}.ss-feedback strong{font-size:17px;color:#5e4b7c;letter-spacing:.2px}.ss-feedback span{color:#766984;font-size:12px;line-height:1.5}.ss-feedback[data-kind=success] strong{color:#25806b}.ss-feedback[data-kind=retry] strong{color:#9a6755}.ss-controls{display:flex;gap:8px}.ss-controls button{flex:1}.ss-game .ss-primary{background:#7960b2;color:white;border-color:#7960b2}.ss-game .ss-primary:hover{background:#665099}.ss-controls [hidden],.ss-complete[hidden]{display:none}.ss-replay-note{font-size:10px;line-height:1.4;text-align:center;color:#82748d;margin:10px 0 0;min-height:14px}.ss-score-pop{position:absolute;left:50%;top:38%;font-size:34px;font-weight:900;color:#fff;text-shadow:0 2px 10px #564087;opacity:0;pointer-events:none}.ss-score-pop.is-active{animation:ss-score .7s ease-out}.ss-complete{margin-top:15px;background:#f0eafa;border-radius:17px;text-align:center;padding:20px}.ss-complete h2{margin:0 0 10px}.ss-complete p{font-size:14px;line-height:1.7}.ss-complete a{display:block;color:#6c518c;font-size:13px;margin-top:15px}.ss-content{max-width:720px;margin:40px auto 0;font-size:15px;line-height:1.75}.ss-content h2{font-size:23px;line-height:1.3;margin:30px 0 10px}.ss-content p{margin:10px 0}.ss-content a{color:#6e5097}.ss-reference{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.ss-reference figure{margin:0;padding:12px;background:#fff9;border:1px solid #e5e0ee;border-radius:16px;text-align:center}.ss-reference svg{width:80px;max-width:100%;height:66px;display:block;margin:auto}.ss-reference figcaption strong{display:block;font-size:14px}.ss-reference figcaption span{display:block;color:#716780;font-size:11px;line-height:1.5}.ss-reference figcaption p{font-size:12px;line-height:1.5;margin:7px 0 0}.ss-vertex-guide{max-width:280px;width:100%;display:block;margin:12px auto}.ss-content details{padding:12px 0;border-bottom:1px solid #e0d9eb}.ss-content summary{font-weight:700;cursor:pointer}.ss-content details p{font-size:14px}.ss-more{display:flex;flex-wrap:wrap;gap:8px}.ss-more a{padding:8px 14px;background:#fff9;border:1px solid #e5dbea;border-radius:13px;text-decoration:none;font-size:14px;font-weight:700}.ss-page #site-footer{position:static;max-width:100%;padding:0 10px 24px;line-height:2}.ss-page #site-footer a{display:inline-block}@keyframes ss-separate{from{transform:translate(0,0)}to{transform:translate(var(--tx),var(--ty))}}@keyframes ss-score{0%{opacity:0;transform:translate(-50%,12px) scale(.8)}25%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-45px)}}@keyframes ss-guide{from{stroke-dashoffset:110;opacity:0}to{stroke-dashoffset:0;opacity:1}}@media(max-width:500px){.ss-page main{padding:10px 10px 40px}.ss-heading{margin:6px 0 12px}.ss-heading p{font-size:12px}.ss-nav{font-size:12px}.ss-game{padding:12px;border-radius:20px}.ss-stats{padding-bottom:9px}.ss-stats strong{font-size:18px}.ss-round{margin-top:6px}.ss-objective{margin-top:5px}.ss-instruction{font-size:11px}.ss-feedback{min-height:83px}.ss-controls button{padding:9px 10px;font-size:12px}.ss-reference{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(prefers-reduced-motion:reduce){.ss-game *{animation:none!important;transition:none!important}.ss-piece{transform:translate(var(--tx),var(--ty))}.ss-score-pop{display:none}}
/* Keep the result and Next button visible in shorter desktop windows. */
@media(min-width:701px) and (max-height:800px){
  .ss-page main{padding-top:8px}.ss-heading{margin:0 0 8px}.ss-heading h1{font-size:30px}
  .ss-game{max-width:360px;padding:12px}.ss-stats{padding-bottom:8px}.ss-stats strong{font-size:18px}
  .ss-round{margin-top:4px;min-height:24px}.ss-game .ss-small{min-height:28px}
  .ss-objective{font-size:20px;margin-top:4px}.ss-instruction{margin-bottom:8px}
  .ss-feedback{min-height:70px}
}

/* A single opening gesture; pointer input cancels it immediately. */
.ss-demo,.ss-demo-piece{pointer-events:none}
.ss-demo-line{stroke:#ffbf62;stroke-width:3;stroke-linecap:round;stroke-dasharray:283;stroke-dashoffset:283;animation:ss-demo-draw 2.4s ease-in-out both}
.ss-demo-pointer{animation:ss-demo-hand 2.4s ease-in-out both}
.ss-demo-pointer circle:first-child{fill:#fff9;stroke:#7560aa;stroke-width:2}
.ss-demo-pointer circle:last-child{fill:#7560aa}
.ss-demo-original{animation:ss-demo-hide 2.4s linear both}
.ss-demo-piece{animation:ss-demo-split 2.4s ease-in-out both}
@keyframes ss-demo-draw{0%,12%{stroke-dashoffset:283;opacity:0}18%{opacity:1}55%,85%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes ss-demo-hand{0%,12%{transform:translate(100px,70px);opacity:0}18%{opacity:1}55%{transform:translate(300px,270px);opacity:1}65%,100%{transform:translate(300px,270px);opacity:0}}
@keyframes ss-demo-hide{0%,54%{opacity:1}55%,100%{opacity:0}}
@keyframes ss-demo-split{0%,54%{opacity:0;transform:translate(0,0)}55%{opacity:1;transform:translate(0,0)}75%,100%{opacity:1;transform:translate(var(--tx),var(--ty))}}
