/* Hover hints ("Tutorials") — see assets/hints.js. Navy with white text and a
   warm coral title: the studio's own ink, readable at 14px (contrast > 12:1
   for the body, > 8:1 for the title). */
.psc-hint{position:fixed;z-index:2000;max-width:300px;padding:10px 13px 11px;border-radius:9px;
  background:#0d1c31;color:#f4f6f8;box-shadow:0 12px 32px rgba(13,28,49,.28);
  font:400 14px/1.45 "DM Sans",Arial,sans-serif;text-align:left;pointer-events:auto;
  animation:psc-hint-in .16s ease-out}
.psc-hint[hidden]{display:none}
.psc-hint b{display:block;margin:0 0 3px;color:#ffb09c;font:700 13px/1.3 "DM Sans",Arial,sans-serif;letter-spacing:.01em}
.psc-hint span{display:block}
@keyframes psc-hint-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.psc-hint.is-above{animation-name:psc-hint-in-above}
@keyframes psc-hint-in-above{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.psc-hint{animation:none}}

/* The switch in the top bar. A real switch: role="switch", the state said in
   words as well as by the knob, 44px tall to hit. */
.tutorials-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;
  border:1px solid #cdd1d2;border-radius:999px;background:transparent;color:var(--ink,#14243b);
  font:700 13px/1 "DM Sans",Arial,sans-serif;cursor:pointer;white-space:nowrap}
.tutorials-toggle:hover{background:#fff}
.tutorials-toggle .tutorials-switch{position:relative;flex:0 0 auto;width:30px;height:18px;border-radius:999px;background:#c3cad1;transition:background .2s}
.tutorials-toggle .tutorials-switch::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(13,28,49,.3);transition:transform .2s}
.tutorials-toggle[aria-checked="true"] .tutorials-switch{background:#2c7a77}
.tutorials-toggle[aria-checked="true"] .tutorials-switch::after{transform:translateX(12px)}
.tutorials-toggle .tutorials-state{min-width:22px;color:#4f5d6e;font-weight:600}
@media(prefers-reduced-motion:reduce){.tutorials-toggle .tutorials-switch,.tutorials-toggle .tutorials-switch::after{transition:none}}
/* Hints wait for a resting pointer; a phone has none, so the switch goes too. */
@media(hover:none){.tutorials-toggle{display:none}}