/* The Senses Quest (tools/senses.html). Prefix sq-. See assets/js/senses.js */
.sq-hero-in{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center}
.sq-hero-art{width:100%;max-width:380px;height:auto;margin-left:auto;border-radius:28px;filter:drop-shadow(0 16px 20px rgba(43,33,64,.16))}
.sq-hero{padding-bottom:30px}
@media (max-width:820px){.sq-hero-in{grid-template-columns:1fr;gap:10px}.sq-hero-art{max-width:240px;margin:0 auto}}

.sq-sec{padding:34px 0 70px}
.sq-nojs{max-width:640px;margin:0 auto;background:#fff;border-radius:var(--r-l);padding:30px 34px;box-shadow:var(--sh-1)}
html:not(.no-js) .sq-nojs{display:none}
.sq-app{max-width:940px;margin:0 auto}
.sq-app[hidden]{display:none}

.sq-scene{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-2);background:#1E1634;aspect-ratio:960/540;isolation:isolate;border:4px solid #fff}
.sq-scene svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.sq-star .st{fill:#5A5280;transition:fill .5s,r .5s}
.sq-star .gl{opacity:0;transition:opacity .6s}
.sq-star.on .st{fill:#FFE9A8;r:11}
.sq-star.on .gl{opacity:1}
.sq-scene.complete .sq-star.on .st{animation:sqTwinkle 2.6s ease-in-out infinite}
.sq-scene.complete .sq-star:nth-of-type(2n).on .st{animation-delay:.6s}
@keyframes sqTwinkle{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
.sq-star .st{transform-box:fill-box;transform-origin:center}
#sq-lantern .lg{opacity:calc(.35 + var(--p,0)*.65);transform-box:fill-box;transform-origin:center;transform:scale(calc(.8 + var(--p,0)*.8))}
.sq-start{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:rgba(21,15,38,.45)}
.sq-start[hidden]{display:none}
.sq-start small{color:#fff;font:700 .95rem/1.3 var(--f-body)}

.sq-panel,.sq-done{margin-top:22px;background:#fff;border-radius:var(--r-xl);padding:28px 34px 26px;box-shadow:var(--sh-2);position:relative;text-align:center}
.sq-panel[hidden],.sq-done[hidden]{display:none}
.sq-panel::before,.sq-done::before{content:"";position:absolute;inset:9px;border:2.5px dashed var(--line);border-radius:calc(var(--r-xl) - 9px);pointer-events:none}
.sq-panel>*,.sq-done>*{position:relative}
.sq-step{margin:0 0 4px;font:800 .8rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--vio-d)}
.sq-panel h2,.sq-done h2{font-size:clamp(1.5rem,3vw,2rem);margin:0 0 8px}
.sq-text{max-width:560px;margin:0 auto 16px;color:var(--ink-2)}
.sq-tokens{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:6px 0 16px}
.sq-token{width:64px;height:64px;border-radius:50%;border:3px dashed #B9AEDD;background:var(--cream);cursor:pointer;display:grid;place-items:center;transition:transform .2s,background .3s,border-color .3s}
.sq-token svg{width:30px;height:30px;fill:#C9C0E2;transition:fill .3s}
.sq-token:hover:not(:disabled){transform:translateY(-3px) scale(1.05);border-color:var(--vio)}
.sq-token.on{background:var(--sun);border:3px solid var(--sun-d);cursor:default}
.sq-token.on svg{fill:#fff}
.sq-token:disabled{opacity:1}
.sq-hint{max-width:520px;margin:0 auto 12px;padding:10px 16px;border-radius:var(--r-m);background:var(--sun-t);color:var(--sun-d);font-weight:700}
.sq-hint[hidden]{display:none}
.sq-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center}
.sq-link{font:800 .95rem/1.2 var(--f-body);background:none;border:0;color:var(--ink-2);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;padding:12px 10px;min-height:44px;cursor:pointer}
.sq-link:hover{color:var(--ink)}
.sq-app .btn[disabled]{opacity:.45;cursor:not-allowed}
.sq-ask{font:italic 600 1.2rem/1.45 var(--f-serif);color:var(--ink-2)}
.sq-done .btn-row{justify-content:center}
.sq-say{text-align:center;margin:20px auto 6px;max-width:680px;font:italic 600 1.25rem/1.45 var(--f-serif);color:var(--ink);min-height:1.5em}
.sq-fine{text-align:center;font-size:.92rem;color:var(--ink-3);margin:6px auto 0;max-width:660px}

.sq-why{padding:70px 0}
.sq-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:820px){.sq-facts{grid-template-columns:1fr}}
@media (max-width:520px){.sq-token{width:56px;height:56px}.sq-panel,.sq-done{padding:24px 20px}}
@media (prefers-reduced-motion:reduce){.sq-star .st,.sq-star .gl,.sq-token{transition:none!important}.sq-scene.complete .sq-star.on .st{animation:none!important}}
@media print{.sq-scene,.sq-panel,.sq-done{display:none}}