/* Type toy (typetoy.js). The gadget is a Blender sprite pair (img/o-typetoy, img/night/o-typetoy, shadow s-typetoy; layout in img/typetoy.json, made by
   src/typetoy.py + src/typetoy_pack.py). Everything here sits on it in the toy's own rotated frame (.tt-dev, origin = toy centre, 100 px per Blender unit):
   the live glyph canvas on the glass, knob pointers, slider thumb, lamps over the rendered dots, and hit areas over the rendered keys.
   Only transform and opacity animate. Ease-out only, no overshoot. */
.obj.o-typetoy { cursor: grab; overflow: visible; --tt-ring: #7a5cc8; --tt-lamp: #d6ff3a; }
.obj.o-typetoy:active { cursor: grabbing; }
.obj.o-typetoy .cut.tt-n { opacity: 0; transition: opacity 1s ease-in-out; }
html.dark .obj.o-typetoy .cut.tt-n { opacity: 1; }
html.dark .obj.o-typetoy { --tt-ring: #b49cf2; }
.obj.o-typetoy .tt-dev { position: absolute; width: 0; height: 0; transform-origin: 0 0; pointer-events: none; }
.obj.o-typetoy .tt-dev > * { position: absolute; }

/* glass */
.obj.o-typetoy .tt-scr { overflow: hidden; border-radius: 6px; background: #0a0a0f; cursor: crosshair; touch-action: none; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.obj.o-typetoy .tt-cv { display: block; width: 100%; height: 100%; transition: opacity .38s ease-in-out; }
.obj.o-typetoy .tt-scr { outline: none; transition: box-shadow .2s cubic-bezier(.16, 1, .3, 1); }
.obj.o-typetoy .tt-scr:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); }
.obj.o-typetoy .tt-scr:active .tt-gl { opacity: 1; }
.obj.o-typetoy .tt-scr:focus-visible, .obj.o-typetoy .tt-scr.typing { box-shadow: 0 0 0 2px var(--tt-hue, #ff5fa8), 0 0 14px 2px rgba(255, 255, 255, .12); }
.obj.o-typetoy .tt-mode { position: absolute; left: 7px; top: 6px; pointer-events: none; font: 500 7.5px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .14em; color: var(--tt-lamp); opacity: .7; }
/* the coral knob and the cream knob's red centre read dark red on the night sprite: a light coral wash keeps them lively */
.obj.o-typetoy .tt-ct { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity 1s ease-in-out; }
.obj.o-typetoy .tt-ka .tt-ct { background: radial-gradient(circle, rgba(255, 150, 118, 0) 0 31%, rgba(255, 140, 108, .62) 38%, rgba(255, 124, 96, .58) 92%, rgba(255, 124, 96, 0) 100%); }
.obj.o-typetoy .tt-kb .tt-ct { background: radial-gradient(circle, rgba(255, 130, 104, .6) 0 22%, rgba(255, 130, 104, 0) 30%); }
html.dark .obj.o-typetoy .tt-ct { opacity: 1; }
.obj.o-typetoy .tt-gl { position: absolute; inset: 0; pointer-events: none; opacity: .9;
  background: linear-gradient(118deg, rgba(255, 255, 255, .13) 0, rgba(255, 255, 255, .04) 30%, rgba(255, 255, 255, 0) 42%), radial-gradient(120% 90% at 50% 120%, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 60%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), inset 0 3px 10px rgba(0, 0, 0, .55); transition: opacity .6s ease-in-out; }
html.dark .obj.o-typetoy .tt-gl { opacity: .45; }
.obj.o-typetoy .tt-hud { position: absolute; right: 6px; bottom: 6px; padding: 2px 6px; border-radius: 5px; pointer-events: none; opacity: 0; transform: translateY(3px);
  font: 500 9px/1.3 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .02em; color: var(--tt-lamp); background: rgba(8, 8, 12, .78); box-shadow: 0 0 0 1px rgba(214, 255, 58, .25);
  transition: opacity .25s cubic-bezier(.16, 1, .3, 1), transform .25s cubic-bezier(.16, 1, .3, 1); }
.obj.o-typetoy .tt-hud.on { opacity: 1; transform: none; }

/* lamps sit on the rendered dark dots */
.obj.o-typetoy .tt-l { position: absolute; display: block; border-radius: 50%; pointer-events: none; opacity: 0; background: var(--tt-lamp); box-shadow: 0 0 6px 2px rgba(214, 255, 58, .6); transition: opacity .22s cubic-bezier(.16, 1, .3, 1); }
.obj.o-typetoy .tt-l.on { opacity: 1; }
.obj.o-typetoy .tt-lamps { position: absolute; left: 0; top: 0; pointer-events: none; }

/* focus ring shared by every control */
.obj.o-typetoy .tt-kr { position: absolute; inset: -4px; border-radius: 50%; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--tt-ring), 0 0 14px 3px rgba(122, 92, 200, .35); transition: opacity .18s cubic-bezier(.16, 1, .3, 1); }
.obj.o-typetoy :focus { outline: none; }
.obj.o-typetoy :focus-visible > .tt-kr { opacity: 1; }

/* knobs: hit area is the rendered knob; the pointer pill turns */
.obj.o-typetoy .tt-k { border-radius: 50%; cursor: grab; touch-action: none; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.obj.o-typetoy .tt-k.dn { cursor: grabbing; }
.obj.o-typetoy .tt-kp { position: absolute; inset: 0; display: block; transform: rotate(var(--a, 0deg)); pointer-events: none; transition: transform .28s cubic-bezier(.2, .9, .25, 1); will-change: transform; }
.obj.o-typetoy .tt-kp::before { content: ""; position: absolute; left: 50%; margin-left: -2.5px; width: 5px; height: 13px; top: 4px; border-radius: 3px;
  background: linear-gradient(#3a2d4c, #241b33); box-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
.obj.o-typetoy .tt-kb .tt-kp::before { width: 4px; margin-left: -2px; height: 9px; top: 5px; }
.obj.o-typetoy .tt-kh { position: absolute; inset: 1px; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .34), rgba(255, 255, 255, .06) 70%);
  transition: opacity .18s cubic-bezier(.16, 1, .3, 1); }
.obj.o-typetoy .tt-k:hover .tt-kh { opacity: 1; }
.obj.o-typetoy .tt-k:active .tt-kh, .obj.o-typetoy .tt-k.dn .tt-kh { opacity: 1; background: radial-gradient(circle, rgba(30, 10, 50, .18), rgba(30, 10, 50, .06)); }
.obj.o-typetoy .tt-k:active .tt-kp, .obj.o-typetoy .tt-k.dn .tt-kp { transform: rotate(var(--a, 0deg)) scale(.97); }

/* slider */
.obj.o-typetoy .tt-sl { cursor: ns-resize; touch-action: none; pointer-events: auto; border-radius: 10px; -webkit-tap-highlight-color: transparent; }
.obj.o-typetoy .tt-sl .tt-kr { border-radius: 12px; inset: -3px; }
.obj.o-typetoy .tt-th { position: absolute; left: 50%; top: 50%; width: 32px; height: 19px; margin: -9.5px 0 0 -16px; border-radius: 6px; pointer-events: none;
  transform: translate3d(0, var(--t, 0px), 0); transition: transform .12s cubic-bezier(.16, 1, .3, 1); will-change: transform;
  background: linear-gradient(#fbf5e6, #ece1c8); box-shadow: 0 1px 0 #fff inset, 0 -2px 0 rgba(120, 90, 60, .18) inset, 0 2px 1px rgba(40, 20, 70, .35), 0 6px 8px -2px rgba(40, 20, 70, .35); }
.obj.o-typetoy .tt-th b { position: absolute; left: 7px; right: 7px; top: 50%; height: 7px; margin-top: -3.5px;
  background: repeating-linear-gradient(to bottom, rgba(90, 60, 50, .55) 0 1px, transparent 1px 3px); }
.obj.o-typetoy .tt-sl:hover .tt-th { background: linear-gradient(#fff, #f4e9cf); }
.obj.o-typetoy .tt-sl:active .tt-th, .obj.o-typetoy .tt-sl.dn .tt-th { background: linear-gradient(#e9ddc2, #f0e5cb); box-shadow: 0 1px 0 #fff inset, 0 1px 1px rgba(40, 20, 70, .4), 0 2px 4px -1px rgba(40, 20, 70, .3); }

/* keys: transparent hit areas on the rendered caps; hover lightens, press dims and sinks a ghost cap */
.obj.o-typetoy .tt-key { padding: 0; border: 0; background: none; border-radius: 9px; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.obj.o-typetoy .tt-key::before { content: ""; position: absolute; inset: 3px 5px 6px; border-radius: 8px; pointer-events: none; opacity: 0; background: rgba(255, 255, 255, .26);
  transition: opacity .15s cubic-bezier(.16, 1, .3, 1), transform .12s cubic-bezier(.16, 1, .3, 1); }
.obj.o-typetoy .tt-key:hover::before { opacity: 1; }
.obj.o-typetoy .tt-key:active::before { opacity: 1; background: rgba(40, 20, 70, .2); transform: translateY(2px); }
.obj.o-typetoy .tt-key .tt-kr { border-radius: 12px; inset: -3px; }

@media (prefers-reduced-motion: reduce) {
  .obj.o-typetoy .tt-cv { transition-duration: .38s; }
  .obj.o-typetoy .tt-kp, .obj.o-typetoy .tt-th, .obj.o-typetoy .tt-hud, .obj.o-typetoy .tt-l, .obj.o-typetoy .tt-key::before, .obj.o-typetoy .tt-kh { transition-duration: .01s; }
}