/* v4 (2026-10-04, James picked option 3): a white light-bulb glyph replaces the ring.
   v3 (2026-10-04): the colour button loses its glow and wears the call to action (neon-button-v2.js).
   v2 (2026-10-04): the neon dial leaves the header; a lit round button in the experience panel takes its place
   (neon-button-v1.js). v1 below unchanged. */
/* Experience switch on the live site (2026-10-04, James: "add experience control to main site"): Studio, Editorial,
   Neon, the same list and order as neonstudio.ai/editorial/ and /neon/ (see experience-switch-2026-10-04/). Drawn on
   the site's own segmented control (the phone's Mobile / tablet switch): a grey track, the current one a raised key. */
.xp{display:flex;align-items:center;gap:10px}
.xp-label{font:700 12px/1 Manrope,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#5d6066}
.xp-opts{display:flex;gap:3px;padding:3px;border:1px solid #cccac3;border-radius:9px;background:#d9d8d1}
.xp-opts a{display:flex;align-items:center;min-height:30px;padding:0 12px;border-radius:6px;font:600 13px/1 Manrope,Arial,sans-serif;color:#24272a;text-decoration:none;white-space:nowrap;transition:background .15s}
.xp-opts a[aria-current]{background:linear-gradient(#fff,#ededE6);box-shadow:0 2px 3px rgba(0,0,0,.13)}
.xp-opts a:not([aria-current]):hover{background:rgba(255,255,255,.45)}
.xp-opts a:focus-visible{outline:2px solid #6441d9;outline-offset:2px}
/* desktop: in the header between the logo and the menu where it fits */
header.nav .xp{margin:0 auto 0 32px}
@media (max-width:1399px){
  /* the header's backdrop filter makes it the containing block, so this hangs off the header itself */
  header.nav .xp{position:absolute;top:calc(100% + 10px);right:-1px;margin:0;padding:6px 6px 6px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.72);
    background:linear-gradient(145deg,rgba(253,253,253,.93),rgba(244,244,244,.86));backdrop-filter:blur(26px) saturate(1.15);-webkit-backdrop-filter:blur(26px) saturate(1.15);
    box-shadow:0 1px 3px rgba(39,42,43,.02),0 7px 20px rgba(39,42,43,.07);transition:opacity .25s,transform .25s;z-index:60}
  header.nav .xp.away{opacity:0;transform:translateY(-8px);pointer-events:none}
}
@media (prefers-reduced-motion:reduce){header.nav .xp{transition:none}}
/* phone: its own row above the Mobile / tablet switch */
.xp-row{display:flex;padding:10px 22px 0;background:#eeede8}
.xp-row .xp{width:100%;justify-content:space-between}
.xp-row .xp-opts a{min-height:36px;padding:0 14px}
@media (max-width:360px){.xp-row .xp-opts a{padding:0 11px}.xp-row .xp-label{letter-spacing:.08em}}
/* the colour button: the call to action's construction (neon-button-v2.js copies its surface), round, no glow, a bulb glyph */
html.has-xp-light .light-ctl{display:none!important}
.xp-light{flex:none;position:relative;display:grid;place-items:center;width:36px;height:36px;padding:0;border-radius:50%;border:1px solid transparent;
  background:linear-gradient(165deg,#d1427f,#c50f66 43%,#8e0b4a);color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform 65ms ease-out}
.xp-bulb{position:absolute;left:50%;top:50%;display:block;width:18px;height:18px;margin:0;background:currentColor;transform:translate(-50%,-50%);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9.5%2018h5M10.5%2021h3M12%203a6%206%200%200%200-3.6%2010.8c.7.6%201.1%201.3%201.1%202.1V16h5v-.1c0-.8.4-1.5%201.1-2.1A6%206%200%200%200%2012%203z%22/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9.5%2018h5M10.5%2021h3M12%203a6%206%200%200%200-3.6%2010.8c.7.6%201.1%201.3%201.1%202.1V16h5v-.1c0-.8.4-1.5%201.1-2.1A6%206%200%200%200%2012%203z%22/%3E%3C/svg%3E") center/contain no-repeat}
.xp-light:active,.xp-light.is-pressed{transform:translateY(2px)}
.xp-light.pop .xp-bulb{animation:xp-pop .3s ease-out}
@keyframes xp-pop{40%{transform:translate(-50%,-50%) scale(1.25)}100%{transform:translate(-50%,-50%) scale(1)}}
.xp-light:focus-visible{outline:2px solid #6441d9;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.xp-light.pop .xp-bulb{animation:none}.xp-light{transition:none}}
/* desktop: it is a .button, so the site's CTA sheets paint it; keep only the round shape and size */
:root body .xp .xp-light.button{width:36px!important;height:36px!important;min-width:0!important;min-height:0!important;padding:0!important;border-radius:50%!important;display:grid!important;place-items:center;font-size:0}
/* the phone row: drop the visible word "Experience" to make room (the panel keeps its aria-label) */
@media (max-width:420px){html.has-xp-light .xp-row .xp-label{display:none}html.has-xp-light .xp-row .xp{justify-content:space-between}}
/* v5 (2026-10-05, James: "on mobile, can all this fit one line?"): the Experience control moves into the
   Mobile / Desktop bar, so Studio·Editorial·Neon, the view switch, motion and the colour key share one row.
   The word "Experience" goes (the group keeps its aria-label); motion becomes a play/pause key with its text
   kept for screen readers; the row tightens at phone widths. */
.experience-bar .xp{gap:8px;flex:none}
.experience-bar .xp-label{display:none}
.experience-bar .xp-opts a{min-height:36px;padding:0 12px;font-size:12px}
.experience-bar .experience-switch{margin-left:auto}
.experience-bar .motion-setting{position:relative;flex:none;width:36px;min-height:36px;height:36px;padding:0;border:1px solid #cccac3;border-radius:50%;background:#d9d8d1;font-size:0;color:#24272a;cursor:pointer}
.experience-bar .motion-setting::before{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;transform:translate(-50%,-50%);background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%225%22%20y%3D%224%22%20width%3D%225%22%20height%3D%2216%22%20rx%3D%221.5%22/%3E%3Crect%20x%3D%2214%22%20y%3D%224%22%20width%3D%225%22%20height%3D%2216%22%20rx%3D%221.5%22/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%225%22%20y%3D%224%22%20width%3D%225%22%20height%3D%2216%22%20rx%3D%221.5%22/%3E%3Crect%20x%3D%2214%22%20y%3D%224%22%20width%3D%225%22%20height%3D%2216%22%20rx%3D%221.5%22/%3E%3C/svg%3E") center/contain no-repeat}
.experience-bar .motion-setting[aria-pressed=false]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M7%204.5v15a1%201%200%200%200%201.5.9l12-7.5a1%201%200%200%200%200-1.8l-12-7.5A1%201%200%200%200%207%204.5z%22/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M7%204.5v15a1%201%200%200%200%201.5.9l12-7.5a1%201%200%200%200%200-1.8l-12-7.5A1%201%200%200%200%207%204.5z%22/%3E%3C/svg%3E")}
.experience-bar .motion-setting:active{transform:translateY(2px)}
.experience-bar .motion-setting:disabled{opacity:.45;cursor:default}
.experience-bar .motion-setting:focus-visible{outline:2px solid #6441d9;outline-offset:2px}
@media (max-width:500px){
  .experience-bar{gap:6px;padding:8px 12px}
  .experience-bar .xp-opts a{padding:0 8px;font-size:11.5px}
  .experience-bar .experience-switch button{padding:7px 8px}
}
@media (max-width:374px){
  .experience-bar{gap:4px;padding:8px 8px}
  .experience-bar .xp-opts a{padding:0 6px;font-size:11px}
  .experience-bar .experience-switch button{padding:7px 6px}
  .experience-bar .motion-setting,.experience-bar .xp-light{width:32px;height:32px;min-height:32px}
}
/* the colour key sits last on the row, after motion */
.experience-bar .xp{display:contents}
.experience-bar .xp-light{order:9}
/* both segmented controls read as one family */
.experience-bar .experience-switch button{font-weight:600}
@media (max-width:340px){
  .experience-bar{gap:3px;padding:8px 6px}
  .experience-bar .xp-opts{gap:1px;padding:2px}
  .experience-bar .experience-switch{gap:1px;padding:2px}
  .experience-bar .xp-opts a{padding:0 5px;font-size:10.5px}
  .experience-bar .experience-switch button{padding:7px 5px;font-size:10px}
  .experience-bar .motion-setting,.experience-bar .xp-light{width:30px;height:30px;min-height:30px}
}