.experiments-shell{
 position:fixed;
 inset:0;
 z-index:2147483200;
 box-sizing:border-box;
 width:100vw;
 height:100dvh;
 padding:max(8px,1.5dvh) max(8px,2.5vw) max(12px,calc(env(safe-area-inset-bottom) + 6px));
 display:grid;
 grid-template-rows:minmax(0,2.35fr) minmax(210px,1fr);
 color:#efe6cf;
 background:
  radial-gradient(circle at 12% 5%,rgba(27,85,135,.18),transparent 28%),
  radial-gradient(circle at 89% 7%,rgba(162,118,43,.14),transparent 30%),
  #02070d;
 overflow:hidden;
 outline:none;
}
.experiments-viewer,.experiments-controller,.experiments-controls,.experiments-center-display{
 position:relative;
 min-width:0;
 min-height:0;
 box-sizing:border-box;
}
.experiments-viewer{
 overflow:hidden;
 border:1px solid rgba(201,159,72,.82);
 border-radius:18px 18px 8px 8px;
 background:#050d14;
 box-shadow:inset 0 0 0 1px rgba(255,223,150,.05),0 12px 34px #0008;
}
.viewer-world{
 position:absolute;
 inset:0;
 background:
  linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.14)),
  url('../assets/branding/shaelvien-dragon-creation-startup-screen.png') center/cover no-repeat;
 transform:scale(1.015);
}
.viewer-world.builder{
 background:
  radial-gradient(circle at 50% 38%,rgba(72,128,151,.16),transparent 38%),
  linear-gradient(180deg,#0b1820,#02070b 68%,#11130f);
}
.viewer-shade{
 position:absolute;
 inset:0;
 pointer-events:none;
 background:
  linear-gradient(180deg,rgba(0,0,0,.16),transparent 18%,transparent 82%,rgba(0,0,0,.24)),
  radial-gradient(circle at center,transparent 55%,rgba(0,3,7,.28) 100%);
}
.viewer-title{
 position:absolute;
 z-index:8;
 top:10px;
 left:50%;
 transform:translateX(-50%);
 display:grid;
 justify-items:center;
 padding:6px 18px;
 border:1px solid rgba(215,174,80,.72);
 border-radius:999px;
 background:rgba(3,10,15,.78);
 white-space:nowrap;
}
.viewer-title span{
 color:#efd998;
 font:900 10px/1 system-ui,-apple-system,sans-serif;
 letter-spacing:.28em;
}
.viewer-status{display:none}
.viewer-readout{
 position:absolute;
 z-index:8;
 left:10px;
 right:10px;
 bottom:8px;
 display:flex;
 justify-content:center;
 gap:12px;
 color:#82c9e7;
 font:800 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
 letter-spacing:.06em;
 text-shadow:0 1px 4px #000;
}
.viewer-reticle{
 position:absolute;
 z-index:7;
 width:clamp(44px,6vw,70px);
 aspect-ratio:1;
 border:1px solid rgba(112,211,255,.9);
 border-radius:50%;
 transform:translate(-50%,-50%);
 box-shadow:0 0 22px rgba(59,167,255,.42);
 pointer-events:none;
 transition:left .07s linear,top .07s linear;
}
.viewer-reticle:before,.viewer-reticle:after{
 content:"";
 position:absolute;
 background:rgba(112,211,255,.86);
}
.viewer-reticle:before{left:50%;top:-13px;bottom:-13px;width:1px}
.viewer-reticle:after{top:50%;left:-13px;right:-13px;height:1px}
.viewer-reticle span{
 position:absolute;
 inset:37%;
 border-radius:50%;
 background:#73dcff;
 box-shadow:0 0 14px #2aa9ff;
}
.glass-stage{
 position:absolute;
 z-index:3;
 left:50%;
 top:50%;
 width:min(74%,680px);
 height:min(58%,430px);
 transform:translate(-50%,-50%);
 perspective:900px;
 transform-style:preserve-3d;
}
.glass-sheet{
 position:absolute;
 inset:9% 8%;
 border:1px solid rgba(143,225,255,.52);
 border-radius:8px;
 background:linear-gradient(135deg,rgba(130,221,255,.09),rgba(255,255,255,.02));
 box-shadow:inset 0 0 18px rgba(139,221,255,.06),0 5px 24px rgba(0,0,0,.2);
 transform-origin:center;
}
.asset-preview{
 position:absolute;
 z-index:5;
 left:50%;
 top:50%;
 width:120px;
 height:90px;
 display:grid;
 place-items:center;
 border:2px solid rgba(245,211,126,.9);
 border-radius:10px;
 background:linear-gradient(135deg,rgba(199,153,67,.34),rgba(65,139,171,.27)),repeating-linear-gradient(45deg,rgba(255,255,255,.04) 0 6px,transparent 6px 12px);
 box-shadow:0 14px 38px rgba(0,0,0,.45);
 transform-origin:center;
}
.asset-preview.sprite{border-style:dashed}
.asset-preview img{
 width:100%;
 height:100%;
 object-fit:contain;
 border-radius:8px;
 pointer-events:none;
 user-select:none;
}
.asset-preview span,.ironed-asset span{
 color:#f6e1a8;
 font:900 10px/1 system-ui;
 letter-spacing:.18em;
}
.ironed-asset{
 position:absolute;
 z-index:2;
 left:34%;
 top:56%;
 width:110px;
 height:82px;
 display:grid;
 place-items:center;
 border:1px solid rgba(229,197,118,.48);
 border-radius:8px;
 background:linear-gradient(135deg,rgba(139,106,48,.32),rgba(38,92,116,.2));
 transform:rotate(-5deg);
 opacity:.72;
}
.experiments-controller{
 display:grid;
 grid-template-columns:minmax(0,1fr) minmax(180px,1.05fr) minmax(0,1fr);
 align-items:stretch;
 overflow:hidden;
 border:1px solid rgba(201,159,72,.82);
 border-top:0;
 border-radius:8px 8px 18px 18px;
 background:#030a10;
 box-shadow:inset 0 0 0 1px rgba(255,223,150,.04),0 12px 34px #0008;
}
.experiments-controls{
 z-index:4;
 overflow:hidden;
 background:
  radial-gradient(circle at center,rgba(19,84,137,.16),transparent 64%),
  rgba(3,10,16,.96);
}
.experiments-controls:before,.experiments-center-display:before{
 content:"";
 position:absolute;
 inset:0;
 pointer-events:none;
 opacity:.24;
 background-image:
  linear-gradient(rgba(76,177,234,.10) 1px,transparent 1px),
  linear-gradient(90deg,rgba(76,177,234,.10) 1px,transparent 1px);
 background-size:18px 18px;
}
.left-controls{border-right:1px solid rgba(201,159,72,.48)}
.right-controls{border-left:1px solid rgba(201,159,72,.48)}
.experiments-axis{
 display:grid;
 grid-template-columns:minmax(0,1fr);
 grid-template-rows:auto minmax(0,1fr) auto;
 align-items:center;
 justify-items:stretch;
 gap:5px;
 padding:7px 8px;
}
.experiments-axis-y,.experiments-axis-x{
 grid-template-columns:minmax(0,1fr);
 grid-template-rows:auto minmax(0,1fr) auto;
}
.experiments-axis-copy{
 position:relative;
 z-index:1;
 display:grid;
 justify-items:center;
 gap:2px;
 color:#f0d99d;
 text-align:center;
}
.experiments-axis-y .experiments-axis-copy,.experiments-axis-x .experiments-axis-copy{grid-column:1;grid-row:1}
.experiments-axis-copy strong{
 font:700 clamp(10px,1.15vw,16px)/1 Georgia,serif;
 letter-spacing:.14em;
}
.experiments-axis-copy small{
 max-width:22ch;
 color:#d9b655;
 font:800 clamp(6px,.72vw,9px)/1 system-ui,-apple-system,sans-serif;
 letter-spacing:.08em;
 white-space:nowrap;
}
.experiments-rocker{
 position:relative;
 z-index:2;
 grid-column:1;
 grid-row:2;
 width:100%;
 min-width:0;
 align-self:stretch;
 display:grid;
 place-items:stretch;
 gap:4px;
}
.experiments-rocker-y{
 grid-template-columns:1fr;
 grid-template-rows:minmax(46px,1fr) 20px minmax(46px,1fr);
}
.experiments-rocker-x{
 grid-template-columns:minmax(44px,1fr) 20px minmax(44px,1fr);
 grid-template-rows:1fr;
 align-items:stretch;
}
.axis-step{
 box-sizing:border-box;
 min-width:44px;
 min-height:46px;
 padding:4px;
 display:grid;
 place-items:center;
 align-content:center;
 gap:2px;
 border:2px solid #62ccff;
 border-radius:10px;
 background:linear-gradient(180deg,#10314b,#071723);
 color:#e9f8ff;
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 0 12px rgba(54,171,231,.16);
 font:900 18px/1 system-ui,-apple-system,sans-serif;
 touch-action:manipulation;
}
.axis-step small{
 color:#8edbff;
 font:900 7px/1 system-ui,-apple-system,sans-serif;
 letter-spacing:.09em;
}
.axis-id-badge{
 min-width:20px;
 min-height:20px;
 display:grid;
 place-items:center;
 align-self:center;
 justify-self:center;
 border:1px solid rgba(112,211,255,.75);
 border-radius:999px;
 background:#06131f;
 color:#8edbff;
 font:900 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
 box-shadow:0 0 10px rgba(54,171,231,.18);
}
.experiments-action{
 position:relative;
 z-index:2;
 grid-column:1;
 grid-row:3;
 width:100%;
 min-height:50px;
 padding:6px 7px;
 display:grid;
 place-items:center;
 align-content:center;
 gap:3px;
 border:2px solid #d7b45e;
 border-radius:10px;
 background:linear-gradient(180deg,#1c3454,#0a1730);
 color:#f6e2a6;
 font:900 clamp(9px,1vw,13px)/1 system-ui,-apple-system,sans-serif;
 letter-spacing:.06em;
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 0 12px rgba(211,169,76,.14);
 touch-action:manipulation;
}
.experiments-action .control-identity{
 display:block;
 color:#7fd7ff;
 font:900 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
 letter-spacing:.18em;
}
.experiments-action strong{
 display:block;
 max-width:100%;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 font:900 inherit;
}
.experiments-action-left{background:linear-gradient(180deg,#163b5b,#081a29)}
.experiments-start,.experiments-action-right{background:linear-gradient(180deg,#4a3219,#1a1108)}
.experiments-action-right .control-identity{color:#f1cc70}
.axis-step:active,.experiments-action:active{transform:translateY(1px);filter:brightness(1.22)}
.axis-step:focus-visible,.experiments-action:focus-visible,.experiments-slider:focus-visible{
 outline:3px solid #fff0b7;
 outline-offset:2px;
}
.experiments-y-slider-wrap,.experiments-x-slider-wrap{display:none!important}
.experiments-slider{accent-color:#45c6ff;touch-action:none}
.experiments-center-display{
 margin:7px;
 overflow:hidden;
 display:grid;
 place-items:center;
 border:1px solid #3da9e8;
 border-radius:10px;
 background:linear-gradient(180deg,#071932,#03111f);
 box-shadow:inset 0 0 22px rgba(29,117,181,.24),0 0 16px rgba(17,105,173,.15);
}
.display-grid{
 position:absolute;
 inset:0;
 opacity:.32;
 background-image:
  linear-gradient(rgba(72,183,255,.18) 1px,transparent 1px),
  linear-gradient(90deg,rgba(72,183,255,.18) 1px,transparent 1px);
 background-size:18px 18px;
}
.center-display-content{
 position:relative;
 z-index:1;
 width:100%;
 height:100%;
 box-sizing:border-box;
 display:grid;
 place-content:center;
 justify-items:center;
 gap:3px;
 padding:7px;
 text-align:center;
 overflow:hidden;
}
.center-display-content>small{
 color:#72ccff;
 font:800 7px/1 system-ui,-apple-system,sans-serif;
 letter-spacing:.2em;
}
.center-display-content>strong{
 max-width:95%;
 overflow:hidden;
 text-overflow:ellipsis;
 color:#e7d18d;
 font:800 clamp(9px,1.05vw,14px)/1 system-ui,-apple-system,sans-serif;
 letter-spacing:.08em;
 white-space:nowrap;
}
.center-display-content>span{
 max-width:95%;
 overflow:hidden;
 text-overflow:ellipsis;
 color:#9fd8f4;
 font:800 clamp(6px,.68vw,9px)/1 system-ui,-apple-system,sans-serif;
 letter-spacing:.06em;
 white-space:nowrap;
}
.display-coordinates{
 display:flex;
 gap:10px;
 color:#95dbff;
 font:800 clamp(7px,.75vw,10px)/1 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.center-display-content p{
 max-width:95%;
 margin:0;
 overflow:hidden;
 text-overflow:ellipsis;
 color:#a8bac5;
 font:700 clamp(6px,.62vw,8px)/1.18 system-ui,-apple-system,sans-serif;
 white-space:nowrap;
}
@media(max-width:700px){
 .experiments-shell{padding:2.5dvh 2.5vw}
 .experiments-shell{padding:8px 8px max(12px,calc(env(safe-area-inset-bottom) + 6px))}
 .experiments-controller{grid-template-columns:minmax(0,1fr) minmax(72px,.62fr) minmax(0,1fr)}
 .experiments-axis{padding:5px 4px;gap:4px}
 .experiments-action{min-height:48px;padding:5px 4px}
 .experiments-rocker-y{grid-template-rows:minmax(44px,1fr) 18px minmax(44px,1fr)}
 .experiments-rocker-x{grid-template-columns:minmax(42px,1fr) 18px minmax(42px,1fr)}
 .axis-step{min-width:42px;min-height:44px;font-size:16px;border-radius:9px}
 .axis-id-badge{min-width:18px;min-height:18px;font-size:9px}
 .experiments-axis-copy strong{font-size:9px}
 .experiments-axis-copy small{font-size:6px;letter-spacing:.03em}
 .experiments-center-display{margin:5px}
 .center-display-content p{display:none}
 .viewer-title{top:8px;padding:5px 14px}
}
@media(max-width:430px){
 .experiments-controller{grid-template-columns:minmax(0,1fr) 68px minmax(0,1fr)}
 .experiments-axis-copy small{font-size:6px}
 .experiments-action{font-size:8px;letter-spacing:.035em}
 .experiments-action .control-identity{font-size:7px}
 .axis-step small{font-size:6px}
 .display-coordinates{flex-direction:column;gap:1px}
 .center-display-content>small{font-size:5.5px}
 .center-display-content>strong{font-size:8px}
 .center-display-content>span{font-size:5.5px}
 .viewer-readout{font-size:5.5px;gap:7px}
}
@media(orientation:landscape) and (max-height:560px){
 .experiments-shell{padding:6px max(8px,2vw) max(8px,env(safe-area-inset-bottom));grid-template-rows:minmax(0,1fr) minmax(148px,.9fr)}
 .viewer-title{top:5px;padding:3px 11px}
 .experiments-axis{padding:3px 4px;gap:3px}
 .experiments-action{min-height:38px;font-size:7.5px}
 .experiments-rocker-y{grid-template-rows:minmax(36px,1fr) 16px minmax(36px,1fr)}
 .experiments-rocker-x{grid-template-columns:minmax(38px,1fr) 16px minmax(38px,1fr)}
 .axis-step{min-height:36px;min-width:38px;font-size:14px}
 .axis-id-badge{min-height:16px;min-width:16px;font-size:8px}
 .experiments-center-display{margin:3px}
 .center-display-content p{display:none}
}
@media(prefers-reduced-motion:reduce){
 .asset-preview,.glass-sheet,.viewer-reticle{transition:none!important}
}

/* Universal controller legibility authority.
   X, Y, LEFT and RIGHT are permanent physical/semantic controls; context only changes their meaning. */
.experiments-shell{
 padding:max(8px,2.5dvh) 2.5vw max(8px,env(safe-area-inset-bottom))!important;
 grid-template-rows:minmax(0,1fr) clamp(190px,27dvh,270px)!important;
}
.experiments-controller{
 grid-template-columns:minmax(0,1.25fr) minmax(92px,.62fr) minmax(0,1.25fr)!important;
}
.experiments-axis{
 grid-template-columns:1fr!important;
 grid-template-rows:auto minmax(0,1fr) auto!important;
 gap:6px!important;
 padding:8px!important;
 overflow:visible!important;
}
.experiments-axis-y .experiments-axis-copy,
.experiments-axis-x .experiments-axis-copy{
 grid-column:1!important;
 grid-row:1!important;
}
.experiments-axis-copy strong{
 font-size:clamp(13px,1.35vw,18px)!important;
 letter-spacing:.16em!important;
}
.experiments-axis-copy small{
 max-width:100%!important;
 color:#f4cb66!important;
 font-size:clamp(7px,.75vw,10px)!important;
 white-space:normal!important;
 line-height:1.05!important;
}
.experiments-rocker{
 position:relative;
 z-index:2;
 align-self:center;
 justify-self:center;
 display:grid;
 min-width:0;
 min-height:0;
}
.experiments-rocker-y{
 width:min(100%,104px);
 grid-template-rows:minmax(44px,1fr) 28px minmax(44px,1fr);
}
.experiments-rocker-x{
 width:min(100%,180px);
 grid-template-columns:minmax(44px,1fr) 28px minmax(44px,1fr);
 align-items:center;
}
.axis-step{
 box-sizing:border-box;
 min-width:44px;
 min-height:44px;
 margin:0;
 padding:4px;
 display:grid;
 place-items:center;
 gap:1px;
 border:1px solid #62d3ff;
 border-radius:10px;
 background:linear-gradient(180deg,#15344a,#071827);
 color:#f2fbff;
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 0 12px rgba(49,170,232,.14);
 font:900 18px/1 system-ui,-apple-system,sans-serif;
 touch-action:manipulation;
}
.axis-step small{
 color:#9ddfff;
 font:900 7px/1 system-ui,-apple-system,sans-serif;
 letter-spacing:.1em;
}
.axis-step:active{
 transform:translateY(1px);
 background:linear-gradient(180deg,#245372,#0c263b);
 box-shadow:inset 0 0 0 2px #9ee7ff;
}
.axis-step:focus-visible{
 outline:3px solid #fff0b4;
 outline-offset:2px;
}
.axis-id-badge{
 align-self:center;
 justify-self:center;
 width:28px;
 height:28px;
 display:grid;
 place-items:center;
 border:1px solid rgba(98,211,255,.7);
 border-radius:50%;
 background:#07131f;
 color:#8edcff;
 font:900 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
 box-shadow:0 0 10px rgba(55,173,231,.18);
}
.experiments-action,
.experiments-axis-y .experiments-action{
 grid-column:1!important;
 grid-row:3!important;
 align-self:end!important;
 box-sizing:border-box!important;
 width:100%!important;
 min-height:54px!important;
 padding:6px!important;
 display:grid!important;
 place-items:center!important;
 gap:3px!important;
 border-width:2px!important;
 border-color:#dcb960!important;
 background:linear-gradient(180deg,#213b59,#09182c)!important;
 color:#fff0b8!important;
 white-space:normal!important;
 text-align:center!important;
 line-height:1.05!important;
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 0 14px rgba(220,185,96,.12)!important;
}
.experiments-action-right{
 background:linear-gradient(180deg,#4a311b,#1b1008)!important;
}
.experiments-action .control-identity{
 display:block;
 color:#7cd9ff;
 font:900 8px/1 system-ui,-apple-system,sans-serif;
 letter-spacing:.2em;
}
.experiments-action-right .control-identity{color:#f3ce74}
.experiments-action strong{
 display:block;
 max-width:100%;
 overflow-wrap:anywhere;
 color:inherit;
 font:900 clamp(9px,1vw,13px)/1.05 system-ui,-apple-system,sans-serif;
 letter-spacing:.05em;
}
.experiments-center-display{
 margin:6px!important;
 border-color:rgba(61,169,232,.52)!important;
 background:linear-gradient(180deg,#061427,#020b14)!important;
 box-shadow:inset 0 0 14px rgba(29,117,181,.14)!important;
}
.center-display-content{
 gap:4px!important;
 padding:5px!important;
}
.center-display-content>small{font-size:6px!important}
.center-display-content>strong{
 white-space:normal!important;
 font-size:clamp(8px,.9vw,12px)!important;
 line-height:1.05!important;
}
.center-display-content>span{
 white-space:normal!important;
 font-size:clamp(6px,.65vw,8px)!important;
 line-height:1.05!important;
}
.display-coordinates{
 flex-wrap:wrap!important;
 justify-content:center!important;
 gap:3px 7px!important;
}
.center-display-content p{
 display:none!important;
}
@media(max-width:700px) and (orientation:portrait){
 .experiments-shell{
  grid-template-rows:minmax(0,1fr) clamp(198px,36dvh,250px)!important;
 }
 .experiments-controller{
  grid-template-columns:minmax(0,1.25fr) minmax(88px,.62fr) minmax(0,1.25fr)!important;
 }
 .experiments-axis{padding:7px 6px!important}
 .experiments-rocker-y{width:min(100%,96px)}
 .axis-step{min-width:44px;min-height:44px}
 .experiments-action{min-height:56px!important}
 .viewer-readout{bottom:6px!important}
}
@media(max-width:430px) and (orientation:portrait){
 .experiments-controller{
  grid-template-columns:minmax(0,1.28fr) minmax(82px,.58fr) minmax(0,1.28fr)!important;
 }
 .experiments-axis{padding:6px 5px!important;gap:5px!important}
 .experiments-axis-copy strong{font-size:12px!important}
 .experiments-axis-copy small{font-size:6px!important}
 .experiments-rocker-y{grid-template-rows:minmax(42px,1fr) 24px minmax(42px,1fr)}
 .experiments-rocker-x{grid-template-columns:minmax(42px,1fr) 24px minmax(42px,1fr)}
 .axis-step{min-width:42px;min-height:42px;font-size:16px}
 .axis-id-badge{width:24px;height:24px;font-size:10px}
 .experiments-action{min-height:54px!important}
 .experiments-action .control-identity{font-size:7px}
 .experiments-action strong{font-size:8px}
 .center-display-content>strong{font-size:7px!important}
 .center-display-content>span{font-size:5.5px!important}
}
@media(orientation:landscape) and (max-height:560px){
 .experiments-shell{
  grid-template-rows:minmax(0,1fr) minmax(154px,38dvh)!important;
 }
 .experiments-axis{padding:4px 6px!important;gap:4px!important}
 .experiments-rocker-y{
  width:min(100%,160px);
  grid-template-columns:minmax(44px,1fr) 28px minmax(44px,1fr);
  grid-template-rows:1fr;
  align-items:center;
 }
 .experiments-rocker-y .axis-y-up{grid-column:1}
 .experiments-rocker-y .axis-id-badge{grid-column:2}
 .experiments-rocker-y .axis-y-down{grid-column:3}
 .experiments-action{min-height:46px!important}
}
@media(prefers-reduced-motion:reduce){
 .axis-step:active{transform:none}
}

/* Four-control deck authority — 2026-09-26.
   Exactly four touch controls: vertical analog, left display button,
   right display button, horizontal analog. */
.experiments-shell{
 grid-template-rows:minmax(0,1fr) clamp(218px,31dvh,310px)!important;
 padding:max(8px,1.5dvh) max(8px,2.5vw) max(10px,env(safe-area-inset-bottom))!important;
}
.experiments-controller.four-control-deck{
 box-sizing:border-box!important;
 display:grid!important;
 grid-template-columns:clamp(62px,12vw,92px) minmax(0,1fr) minmax(0,1fr)!important;
 grid-template-rows:minmax(0,1fr) clamp(66px,8dvh,88px)!important;
 grid-template-areas:
  "y leftDisplay rightDisplay"
  "y x x"!important;
 gap:8px!important;
 padding:8px!important;
 overflow:hidden!important;
 border:1px solid rgba(201,159,72,.82)!important;
 border-top:0!important;
 border-radius:8px 8px 18px 18px!important;
 background:
  linear-gradient(rgba(76,177,234,.06) 1px,transparent 1px),
  linear-gradient(90deg,rgba(76,177,234,.06) 1px,transparent 1px),
  #030a10!important;
 background-size:18px 18px!important;
 box-shadow:inset 0 0 0 1px rgba(255,223,150,.04),0 12px 34px #0008!important;
}
.four-control-deck .analog-control{
 position:relative!important;
 z-index:2!important;
 box-sizing:border-box!important;
 min-width:0!important;
 min-height:0!important;
 margin:0!important;
 padding:0!important;
 color:#f0d99d!important;
 font:900 9px/1 system-ui,-apple-system,sans-serif!important;
 letter-spacing:.12em!important;
 user-select:none!important;
 -webkit-user-select:none!important;
}
.four-control-deck .analog-control-y{
 grid-area:y!important;
 display:grid!important;
 grid-template-rows:auto minmax(0,1fr) auto!important;
 justify-items:center!important;
 align-items:center!important;
 padding:6px 0!important;
 border-right:1px solid rgba(201,159,72,.34)!important;
}
.four-control-deck .analog-control-x{
 grid-area:x!important;
 display:grid!important;
 grid-template-columns:auto minmax(0,1fr) auto!important;
 align-items:center!important;
 gap:8px!important;
 padding:0 7px!important;
 border-top:1px solid rgba(201,159,72,.34)!important;
}
.four-control-deck .analog-control>strong{
 color:#f4d98f!important;
 font:900 clamp(8px,.8vw,11px)/1 system-ui,-apple-system,sans-serif!important;
 letter-spacing:.13em!important;
 text-shadow:0 1px 4px #000!important;
}
.four-control-deck .analog-track{
 position:relative!important;
 z-index:3!important;
 min-width:0!important;
 min-height:0!important;
 display:grid!important;
 place-items:center!important;
}
.four-control-deck .analog-track-y{
 width:100%!important;
 height:100%!important;
 overflow:visible!important;
}
.four-control-deck .analog-track-x{
 width:100%!important;
 height:54px!important;
}
.four-control-deck .analog-stick{
 -webkit-appearance:none!important;
 appearance:none!important;
 margin:0!important;
 padding:0!important;
 border:0!important;
 border-radius:999px!important;
 background:transparent!important;
 accent-color:#63d6ff!important;
 outline:none!important;
 touch-action:none!important;
 cursor:pointer!important;
}
.four-control-deck .analog-stick-x{
 width:100%!important;
 height:46px!important;
}
.four-control-deck .analog-stick-y{
 width:clamp(118px,18dvh,190px)!important;
 height:46px!important;
 transform:rotate(-90deg)!important;
 transform-origin:center!important;
}
.four-control-deck .analog-stick::-webkit-slider-runnable-track{
 height:10px!important;
 border:1px solid #438fba!important;
 border-radius:999px!important;
 background:linear-gradient(180deg,#0f2a3d,#07141e)!important;
 box-shadow:inset 0 1px 3px #000b,0 0 10px rgba(64,183,236,.13)!important;
}
.four-control-deck .analog-stick::-webkit-slider-thumb{
 -webkit-appearance:none!important;
 appearance:none!important;
 width:40px!important;
 height:40px!important;
 margin-top:-16px!important;
 border:2px solid #9ee7ff!important;
 border-radius:50%!important;
 background:
  radial-gradient(circle at 36% 30%,#dff8ff 0 8%,transparent 9%),
  radial-gradient(circle,#2d6e91 0 35%,#0c2638 36% 72%,#07131c 73%)!important;
 box-shadow:0 4px 11px #000a,0 0 12px rgba(87,201,255,.42),inset 0 0 0 2px rgba(255,255,255,.08)!important;
}
.four-control-deck .analog-stick::-moz-range-track{
 height:10px!important;
 border:1px solid #438fba!important;
 border-radius:999px!important;
 background:#0b2030!important;
}
.four-control-deck .analog-stick::-moz-range-thumb{
 width:38px!important;
 height:38px!important;
 border:2px solid #9ee7ff!important;
 border-radius:50%!important;
 background:#16425d!important;
 box-shadow:0 4px 11px #000a,0 0 12px rgba(87,201,255,.42)!important;
}
.four-control-deck .analog-stick:focus-visible{
 outline:3px solid #fff0b7!important;
 outline-offset:4px!important;
}
.four-control-deck .control-display-button{
 position:relative!important;
 z-index:2!important;
 box-sizing:border-box!important;
 min-width:0!important;
 min-height:0!important;
 width:100%!important;
 height:100%!important;
 margin:0!important;
 padding:10px 8px!important;
 display:grid!important;
 place-content:center!important;
 justify-items:center!important;
 gap:6px!important;
 border:2px solid #d8b55e!important;
 border-radius:14px!important;
 color:#f7e4aa!important;
 text-align:center!important;
 touch-action:manipulation!important;
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 0 14px rgba(211,169,76,.12)!important;
}
.four-control-deck .control-display-left{
 grid-area:leftDisplay!important;
 background:linear-gradient(180deg,#173f60,#081a2a)!important;
 border-color:#69d3ff!important;
}
.four-control-deck .control-display-right{
 grid-area:rightDisplay!important;
 background:linear-gradient(180deg,#4a321b,#1b1008)!important;
}
.four-control-deck .control-display-button small{
 color:#89ddff!important;
 font:900 clamp(7px,.72vw,9px)/1 system-ui,-apple-system,sans-serif!important;
 letter-spacing:.16em!important;
}
.four-control-deck .control-display-right small{color:#f2cf79!important}
.four-control-deck .control-display-button strong{
 max-width:100%!important;
 overflow-wrap:anywhere!important;
 color:#fff0bb!important;
 font:900 clamp(13px,1.55vw,20px)/1.05 Georgia,serif!important;
 letter-spacing:.06em!important;
 text-shadow:0 1px 5px #000!important;
}
.four-control-deck .control-display-button span{
 color:#a8c8d8!important;
 font:800 clamp(6px,.62vw,8px)/1 system-ui,-apple-system,sans-serif!important;
 letter-spacing:.08em!important;
}
.four-control-deck .control-display-button:active{
 transform:translateY(1px)!important;
 filter:brightness(1.18)!important;
 box-shadow:inset 0 0 0 2px rgba(255,255,255,.13)!important;
}
.four-control-deck .control-display-button:focus-visible{
 outline:3px solid #fff0b7!important;
 outline-offset:2px!important;
}
@media(max-width:700px) and (orientation:portrait){
 .experiments-shell{
  grid-template-rows:minmax(0,1fr) clamp(228px,34dvh,286px)!important;
  padding:8px 8px max(10px,env(safe-area-inset-bottom))!important;
 }
 .experiments-controller.four-control-deck{
  grid-template-columns:62px minmax(0,1fr) minmax(0,1fr)!important;
  grid-template-rows:minmax(0,1fr) 68px!important;
  gap:6px!important;
  padding:6px!important;
 }
 .four-control-deck .analog-stick-y{width:clamp(118px,17dvh,164px)!important}
 .four-control-deck .analog-stick::-webkit-slider-thumb{
  width:38px!important;
  height:38px!important;
  margin-top:-15px!important;
 }
 .four-control-deck .control-display-button{
  padding:8px 5px!important;
  gap:5px!important;
 }
 .four-control-deck .control-display-button strong{font-size:clamp(12px,3.3vw,17px)!important}
 .four-control-deck .analog-control-x{gap:5px!important;padding-inline:4px!important}
}
@media(max-width:430px) and (orientation:portrait){
 .experiments-shell{grid-template-rows:minmax(0,1fr) clamp(224px,33dvh,270px)!important}
 .experiments-controller.four-control-deck{
  grid-template-columns:56px minmax(0,1fr) minmax(0,1fr)!important;
  grid-template-rows:minmax(0,1fr) 64px!important;
  gap:5px!important;
  padding:5px!important;
 }
 .four-control-deck .analog-stick-y{width:clamp(108px,16dvh,150px)!important}
 .four-control-deck .analog-control>strong{font-size:7px!important}
 .four-control-deck .control-display-button small{font-size:6px!important}
 .four-control-deck .control-display-button strong{font-size:clamp(11px,3vw,15px)!important}
 .four-control-deck .control-display-button span{font-size:5.5px!important}
}
@media(orientation:landscape) and (max-height:560px){
 .experiments-shell{grid-template-rows:minmax(0,1fr) clamp(154px,38dvh,190px)!important}
 .experiments-controller.four-control-deck{
  grid-template-columns:62px minmax(0,1fr) minmax(0,1fr)!important;
  grid-template-rows:minmax(0,1fr) 56px!important;
  gap:5px!important;
  padding:5px!important;
 }
 .four-control-deck .analog-stick-y{width:108px!important}
 .four-control-deck .analog-stick::-webkit-slider-thumb{
  width:34px!important;height:34px!important;margin-top:-13px!important;
 }
 .four-control-deck .control-display-button{padding:5px!important;gap:3px!important}
 .four-control-deck .control-display-button strong{font-size:11px!important}
 .four-control-deck .control-display-button span{display:none!important}
}
@media(prefers-reduced-motion:reduce){
 .four-control-deck .control-display-button:active{transform:none!important}
}

/* Four-control polish: center the vertical analog in its lane and
   give the horizontal analog the same brown/gold family as the right display button. */
.four-control-deck .analog-track-y{
 overflow:visible!important;
}
.four-control-deck .analog-track-y .analog-stick-y{
 position:absolute!important;
 left:50%!important;
 top:50%!important;
 transform:translate(-50%,-50%) rotate(-90deg)!important;
 transform-origin:center center!important;
}
.four-control-deck .analog-control-x{
 color:#f2cf79!important;
}
.four-control-deck .analog-control-x>strong{
 color:#f2cf79!important;
}
.four-control-deck .analog-control-x .analog-stick{
 accent-color:#d8b55e!important;
}
.four-control-deck .analog-control-x .analog-stick::-webkit-slider-runnable-track{
 border-color:#9a6f2f!important;
 background:linear-gradient(180deg,#4a321b,#1b1008)!important;
 box-shadow:inset 0 1px 3px #000b,0 0 10px rgba(216,181,94,.14)!important;
}
.four-control-deck .analog-control-x .analog-stick::-webkit-slider-thumb{
 border-color:#f0cf7a!important;
 background:
  radial-gradient(circle at 36% 30%,#fff1bd 0 8%,transparent 9%),
  radial-gradient(circle,#8c6129 0 35%,#4a321b 36% 72%,#1b1008 73%)!important;
 box-shadow:0 4px 11px #000a,0 0 12px rgba(216,181,94,.36),inset 0 0 0 2px rgba(255,255,255,.06)!important;
}
.four-control-deck .analog-control-x .analog-stick::-moz-range-track{
 border-color:#9a6f2f!important;
 background:#2f1e10!important;
}
.four-control-deck .analog-control-x .analog-stick::-moz-range-thumb{
 border-color:#f0cf7a!important;
 background:#6f4920!important;
 box-shadow:0 4px 11px #000a,0 0 12px rgba(216,181,94,.36)!important;
}

/* Single-analog authority — 2026-09-26.
   One 2D analog carries X and Y; the left and right displays are the two buttons.
   Default order is LEFT DISPLAY · ANALOG · RIGHT DISPLAY. */
.experiments-shell{
 grid-template-rows:minmax(0,1fr) clamp(170px,25dvh,238px)!important;
}
.experiments-controller.single-analog-deck{
 box-sizing:border-box!important;
 display:grid!important;
 grid-template-columns:minmax(0,1fr) clamp(112px,24vw,168px) minmax(0,1fr)!important;
 grid-template-rows:minmax(0,1fr)!important;
 grid-template-areas:"leftDisplay analog rightDisplay"!important;
 align-items:stretch!important;
 gap:8px!important;
 padding:8px!important;
 overflow:hidden!important;
 border:1px solid rgba(201,159,72,.82)!important;
 border-top:0!important;
 border-radius:8px 8px 18px 18px!important;
 background:
  linear-gradient(rgba(76,177,234,.06) 1px,transparent 1px),
  linear-gradient(90deg,rgba(76,177,234,.06) 1px,transparent 1px),
  #030a10!important;
 background-size:18px 18px!important;
 box-shadow:inset 0 0 0 1px rgba(255,223,150,.04),0 12px 34px #0008!important;
}
.experiments-controller.single-analog-deck.analog-left{
 grid-template-areas:"analog leftDisplay rightDisplay"!important;
}
.experiments-controller.single-analog-deck.analog-center{
 grid-template-areas:"leftDisplay analog rightDisplay"!important;
}
.experiments-controller.single-analog-deck.analog-right{
 grid-template-areas:"leftDisplay rightDisplay analog"!important;
}
.single-analog-deck .control-display-left{grid-area:leftDisplay!important}
.single-analog-deck .control-display-right{grid-area:rightDisplay!important}
.single-analog-deck .analog-control-xy{
 grid-area:analog!important;
 position:relative!important;
 z-index:4!important;
 box-sizing:border-box!important;
 min-width:0!important;
 min-height:0!important;
 display:grid!important;
 place-items:center!important;
 overflow:visible!important;
 touch-action:none!important;
 user-select:none!important;
 -webkit-user-select:none!important;
}
.single-analog-deck .analog-pad{
 position:relative!important;
 width:min(100%,138px)!important;
 max-width:min(100%,19dvh)!important;
 aspect-ratio:1!important;
 border:2px solid #c7a34f!important;
 border-radius:50%!important;
 background:
  radial-gradient(circle at center,#0b1720 0 18%,#07121a 19% 53%,#10100c 54% 100%)!important;
 box-shadow:
  inset 0 0 0 2px rgba(99,211,255,.16),
  inset 0 0 24px #000b,
  0 0 16px rgba(208,168,70,.15)!important;
}
.single-analog-deck .analog-pad:before{
 content:""!important;
 position:absolute!important;
 inset:-3px!important;
 border-radius:50%!important;
 padding:2px!important;
 background:conic-gradient(
  from -45deg,
  #65d6ff 0 25%,
  #cba64f 25% 50%,
  #cba64f 50% 75%,
  #65d6ff 75% 100%
 )!important;
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important;
 -webkit-mask-composite:xor!important;
 mask-composite:exclude!important;
 pointer-events:none!important;
}
.single-analog-deck .analog-crosshair{
 position:absolute!important;
 inset:12%!important;
 border-radius:50%!important;
 pointer-events:none!important;
 opacity:.68!important;
 background:
  linear-gradient(90deg,transparent calc(50% - .5px),rgba(207,187,126,.52) calc(50% - .5px),rgba(207,187,126,.52) calc(50% + .5px),transparent calc(50% + .5px)),
  linear-gradient(transparent calc(50% - .5px),rgba(114,210,249,.54) calc(50% - .5px),rgba(114,210,249,.54) calc(50% + .5px),transparent calc(50% + .5px))!important;
}
.single-analog-deck .analog-knob{
 position:absolute!important;
 left:50%!important;
 top:50%!important;
 width:42%!important;
 aspect-ratio:1!important;
 border:2px solid #ead394!important;
 border-radius:50%!important;
 transform:translate(-50%,-50%)!important;
 background:
  radial-gradient(circle at 36% 30%,#fff1bd 0 7%,transparent 8%),
  radial-gradient(circle at 35% 36%,#2f7597 0 28%,#3d3421 48%,#18120a 72%)!important;
 box-shadow:
  0 7px 15px #000b,
  0 0 13px rgba(99,211,255,.22),
  0 0 13px rgba(216,181,94,.18),
  inset 0 0 0 2px rgba(255,255,255,.06)!important;
 will-change:transform!important;
 pointer-events:none!important;
}
.single-analog-deck .analog-direction{
 position:absolute!important;
 z-index:5!important;
 color:#d9c486!important;
 font:900 7px/1 system-ui,-apple-system,sans-serif!important;
 letter-spacing:.08em!important;
 text-shadow:0 1px 4px #000!important;
 pointer-events:none!important;
}
.single-analog-deck .analog-up{
 top:2px!important;
 left:50%!important;
 transform:translateX(-50%)!important;
 color:#8edfff!important;
}
.single-analog-deck .analog-down{
 bottom:2px!important;
 left:50%!important;
 transform:translateX(-50%)!important;
 color:#8edfff!important;
}
.single-analog-deck .analog-left{
 left:1px!important;
 top:50%!important;
 transform:translateY(-50%)!important;
 color:#f0cf7a!important;
}
.single-analog-deck .analog-right{
 right:1px!important;
 top:50%!important;
 transform:translateY(-50%)!important;
 color:#f0cf7a!important;
}
.single-analog-deck .control-display-button{
 min-height:0!important;
 height:100%!important;
 border-radius:14px!important;
 padding:10px 8px!important;
}
.single-analog-deck .control-display-button strong{
 font-size:clamp(13px,1.45vw,20px)!important;
}
@media(max-width:700px) and (orientation:portrait){
 .experiments-shell{
  grid-template-rows:minmax(0,1fr) clamp(160px,23dvh,204px)!important;
  padding:8px 8px max(10px,env(safe-area-inset-bottom))!important;
 }
 .experiments-controller.single-analog-deck{
  grid-template-columns:minmax(0,1fr) clamp(104px,29vw,132px) minmax(0,1fr)!important;
  gap:6px!important;
  padding:6px!important;
 }
 .single-analog-deck .analog-pad{
  width:min(100%,118px)!important;
  max-width:min(100%,15.5dvh)!important;
 }
 .single-analog-deck .control-display-button{
  padding:7px 5px!important;
  gap:4px!important;
 }
 .single-analog-deck .control-display-button small{font-size:6px!important}
 .single-analog-deck .control-display-button strong{font-size:clamp(11px,3vw,16px)!important}
 .single-analog-deck .control-display-button span{font-size:5.5px!important}
}
@media(max-width:430px) and (orientation:portrait){
 .experiments-shell{grid-template-rows:minmax(0,1fr) clamp(154px,22dvh,194px)!important}
 .experiments-controller.single-analog-deck{
  grid-template-columns:minmax(0,1fr) clamp(96px,28vw,116px) minmax(0,1fr)!important;
  gap:5px!important;
  padding:5px!important;
 }
 .single-analog-deck .analog-pad{
  width:min(100%,108px)!important;
  max-width:min(100%,14.5dvh)!important;
 }
 .single-analog-deck .analog-direction{font-size:6px!important}
 .single-analog-deck .control-display-button strong{font-size:clamp(10px,2.8vw,14px)!important}
}
@media(orientation:landscape) and (max-height:560px){
 .experiments-shell{grid-template-rows:minmax(0,1fr) clamp(126px,35dvh,168px)!important}
 .experiments-controller.single-analog-deck{
  grid-template-columns:minmax(0,1fr) clamp(94px,18vw,122px) minmax(0,1fr)!important;
  gap:5px!important;
  padding:5px!important;
 }
 .single-analog-deck .analog-pad{width:min(100%,104px)!important}
 .single-analog-deck .control-display-button{padding:5px!important;gap:3px!important}
 .single-analog-deck .control-display-button strong{font-size:11px!important}
 .single-analog-deck .control-display-button span{display:none!important}
}
@media(prefers-reduced-motion:reduce){
 .single-analog-deck .analog-knob{transition:none!important}
}

/* Single-analog display surfaces — restore button/display theming after
   retiring the four-control-deck wrapper. */
.single-analog-deck button.control-display-button{
 appearance:none!important;
 -webkit-appearance:none!important;
 box-sizing:border-box!important;
 min-width:0!important;
 min-height:0!important;
 width:100%!important;
 height:100%!important;
 margin:0!important;
 padding:10px 8px!important;
 display:grid!important;
 grid-template-rows:auto auto auto!important;
 place-content:center!important;
 justify-items:center!important;
 align-items:center!important;
 gap:7px!important;
 border:2px solid!important;
 border-radius:16px!important;
 text-align:center!important;
 white-space:normal!important;
 overflow:hidden!important;
 touch-action:manipulation!important;
 font-family:system-ui,-apple-system,sans-serif!important;
 line-height:1.05!important;
}
.single-analog-deck button.control-display-left{
 grid-area:leftDisplay!important;
 border-color:#68d7ff!important;
 background:
  linear-gradient(180deg,rgba(28,87,128,.98),rgba(5,24,38,.98))!important;
 color:#eaf8ff!important;
 box-shadow:
  inset 0 0 0 1px rgba(255,255,255,.08),
  inset 0 -22px 36px rgba(0,0,0,.18),
  0 0 16px rgba(78,196,247,.16)!important;
}
.single-analog-deck button.control-display-right{
 grid-area:rightDisplay!important;
 border-color:#e1bd63!important;
 background:
  linear-gradient(180deg,rgba(91,57,27,.98),rgba(31,17,7,.98))!important;
 color:#fff0bd!important;
 box-shadow:
  inset 0 0 0 1px rgba(255,255,255,.06),
  inset 0 -22px 36px rgba(0,0,0,.2),
  0 0 16px rgba(216,181,94,.15)!important;
}
.single-analog-deck button.control-display-button>small,
.single-analog-deck button.control-display-button>strong,
.single-analog-deck button.control-display-button>span{
 display:block!important;
 width:100%!important;
 max-width:100%!important;
 margin:0!important;
 padding:0!important;
 position:static!important;
 inset:auto!important;
 transform:none!important;
 text-align:center!important;
 white-space:normal!important;
 overflow-wrap:anywhere!important;
}
.single-analog-deck button.control-display-left>small{
 color:#84dcff!important;
 font:900 clamp(7px,.72vw,9px)/1 system-ui,-apple-system,sans-serif!important;
 letter-spacing:.15em!important;
}
.single-analog-deck button.control-display-right>small{
 color:#f2cf79!important;
 font:900 clamp(7px,.72vw,9px)/1 system-ui,-apple-system,sans-serif!important;
 letter-spacing:.15em!important;
}
.single-analog-deck button.control-display-button>strong{
 color:inherit!important;
 font:900 clamp(14px,1.65vw,21px)/1.05 Georgia,serif!important;
 letter-spacing:.055em!important;
 text-shadow:0 2px 5px #000b!important;
}
.single-analog-deck button.control-display-left>span{
 color:#b8ddec!important;
 font:800 clamp(6px,.62vw,8px)/1.2 system-ui,-apple-system,sans-serif!important;
 letter-spacing:.09em!important;
}
.single-analog-deck button.control-display-right>span{
 color:#dfcda2!important;
 font:800 clamp(6px,.62vw,8px)/1.2 system-ui,-apple-system,sans-serif!important;
 letter-spacing:.09em!important;
}
.single-analog-deck button.control-display-button:active{
 transform:translateY(1px)!important;
 filter:brightness(1.15)!important;
}
.single-analog-deck button.control-display-button:focus-visible{
 outline:3px solid #fff0b7!important;
 outline-offset:2px!important;
}
@media(max-width:700px) and (orientation:portrait){
 .single-analog-deck button.control-display-button{
  padding:8px 5px!important;
  gap:6px!important;
  border-radius:14px!important;
 }
 .single-analog-deck button.control-display-button>small{
  font-size:6px!important;
 }
 .single-analog-deck button.control-display-button>strong{
  font-size:clamp(12px,3.2vw,17px)!important;
 }
 .single-analog-deck button.control-display-button>span{
  font-size:5.5px!important;
  line-height:1.25!important;
 }
}
@media(max-width:430px) and (orientation:portrait){
 .single-analog-deck button.control-display-button{
  padding:7px 4px!important;
  gap:5px!important;
 }
 .single-analog-deck button.control-display-button>strong{
  font-size:clamp(11px,3vw,15px)!important;
 }
}

/* Contextual display sliders — 2026-09-26.
   Left display swipes vertically, right display swipes horizontally.
   The polygons advertise the available paging direction. */
.single-analog-deck .display-slider{
 position:relative!important;
 z-index:3!important;
 box-sizing:border-box!important;
 min-width:0!important;
 min-height:0!important;
 display:grid!important;
 place-items:stretch!important;
 overflow:visible!important;
 --display-slide-x:0px;
 --display-slide-y:0px;
}
.single-analog-deck .display-slider-left{
 grid-area:leftDisplay!important;
 padding:13px 0!important;
}
.single-analog-deck .display-slider-right{
 grid-area:rightDisplay!important;
 padding:0 13px!important;
}
.single-analog-deck .display-slider button.control-display-button,
.single-analog-deck .display-slider button.control-display-button:active{
 grid-area:auto!important;
 width:100%!important;
 height:100%!important;
 min-width:0!important;
 min-height:0!important;
 transform:translate3d(var(--display-slide-x),var(--display-slide-y),0)!important;
 transition:transform 150ms cubic-bezier(.2,.8,.2,1),filter 90ms linear!important;
 will-change:transform!important;
}
.single-analog-deck .display-slider.is-dragging button.control-display-button{
 transition:none!important;
 filter:brightness(1.08)!important;
}
.single-analog-deck .display-slider.is-snapping button.control-display-button{
 transition:transform 165ms cubic-bezier(.18,.88,.3,1.18),filter 90ms linear!important;
}
.single-analog-deck .display-slider.is-scrollable{
 touch-action:none!important;
}
.single-analog-deck .display-slider-cue{
 position:absolute!important;
 z-index:7!important;
 display:block!important;
 width:18px!important;
 height:10px!important;
 background:currentColor!important;
 opacity:.94!important;
 filter:drop-shadow(0 1px 3px #000)!important;
 pointer-events:none!important;
}
.single-analog-deck .display-slider-left .display-slider-cue{
 color:#69d7ff!important;
 left:50%!important;
 transform:translateX(-50%)!important;
}
.single-analog-deck .display-slider-right .display-slider-cue{
 color:#e4bd62!important;
 top:50%!important;
 transform:translateY(-50%)!important;
}
.single-analog-deck .cue-up{
 top:1px!important;
 clip-path:polygon(50% 0,100% 100%,0 100%)!important;
}
.single-analog-deck .cue-down{
 bottom:1px!important;
 clip-path:polygon(0 0,100% 0,50% 100%)!important;
}
.single-analog-deck .cue-left{
 left:1px!important;
 width:10px!important;
 height:18px!important;
 clip-path:polygon(100% 0,100% 100%,0 50%)!important;
}
.single-analog-deck .cue-right{
 right:1px!important;
 width:10px!important;
 height:18px!important;
 clip-path:polygon(0 0,100% 50%,0 100%)!important;
}

/* The source explorer is the first context where the universal analog
   becomes a cursor again because both display selectors are single-choice. */
.asset-source-explorer{
 position:absolute!important;
 z-index:5!important;
 left:50%!important;
 top:55%!important;
 transform:translate(-50%,-50%)!important;
 box-sizing:border-box!important;
 width:min(78%,560px)!important;
 min-height:42%!important;
 display:grid!important;
 grid-template-rows:auto minmax(0,1fr) auto!important;
 gap:10px!important;
 padding:12px!important;
 border:1px solid rgba(220,185,96,.78)!important;
 border-radius:14px!important;
 background:rgba(3,10,16,.86)!important;
 box-shadow:0 18px 50px #000b,inset 0 0 0 1px rgba(96,207,255,.08)!important;
 backdrop-filter:blur(4px)!important;
 pointer-events:none!important;
}
.asset-source-explorer>header{
 display:flex!important;
 justify-content:space-between!important;
 gap:10px!important;
 align-items:center!important;
 color:#efd58e!important;
 font:900 9px/1 system-ui,-apple-system,sans-serif!important;
 letter-spacing:.1em!important;
}
.asset-source-explorer>header span{color:#83d9ff!important}
.asset-source-explorer-grid{
 display:grid!important;
 grid-template-columns:repeat(2,minmax(0,1fr))!important;
 grid-template-rows:repeat(2,minmax(42px,1fr))!important;
 gap:8px!important;
}
.asset-source-explorer-grid>span{
 border:1px solid rgba(102,210,255,.42)!important;
 border-radius:8px!important;
 background:
  linear-gradient(135deg,rgba(29,84,118,.48),rgba(32,21,11,.52))!important;
 box-shadow:inset 0 0 16px #0007!important;
}
.asset-source-explorer>footer{
 color:#a9bbc4!important;
 font:800 7px/1 system-ui,-apple-system,sans-serif!important;
 letter-spacing:.09em!important;
 text-align:center!important;
}
.experiments-viewer .viewer-reticle{
 z-index:8!important;
}

@media(max-width:700px) and (orientation:portrait){
 .single-analog-deck .display-slider-left{padding-block:11px!important}
 .single-analog-deck .display-slider-right{padding-inline:11px!important}
 .single-analog-deck .display-slider-cue{width:15px!important;height:8px!important}
 .single-analog-deck .cue-left,.single-analog-deck .cue-right{width:8px!important;height:15px!important}
 .asset-source-explorer{
  width:min(82%,440px)!important;
  min-height:38%!important;
  padding:9px!important;
  gap:7px!important;
 }
}

/* Fixed display geometry — slider cues float over the displays and never
   consume layout space. Text adapts to the fixed control shape instead. */
.single-analog-deck .display-slider,
.single-analog-deck .display-slider-left,
.single-analog-deck .display-slider-right{
 box-sizing:border-box!important;
 width:100%!important;
 height:100%!important;
 min-width:0!important;
 min-height:0!important;
 padding:0!important;
 margin:0!important;
 align-self:stretch!important;
 justify-self:stretch!important;
}
.single-analog-deck .display-slider button.control-display-button{
 width:100%!important;
 height:100%!important;
 min-width:0!important;
 min-height:0!important;
 border-radius:16px!important;
}
.single-analog-deck button.control-display-button>strong.display-text{
 max-width:100%!important;
 white-space:nowrap!important;
 overflow:hidden!important;
 text-overflow:clip!important;
 overflow-wrap:normal!important;
 word-break:normal!important;
 line-height:1!important;
 letter-spacing:.035em!important;
}
.single-analog-deck button.control-display-button>strong.display-text-lg{
 font-size:clamp(13px,3.55vw,17px)!important;
}
.single-analog-deck button.control-display-button>strong.display-text-md{
 font-size:clamp(11px,3.1vw,15px)!important;
 letter-spacing:.025em!important;
}
.single-analog-deck button.control-display-button>strong.display-text-sm{
 font-size:clamp(10px,2.75vw,13px)!important;
 letter-spacing:.015em!important;
}
.single-analog-deck button.control-display-button>strong.display-text-xs{
 font-size:clamp(8px,2.35vw,11px)!important;
 letter-spacing:0!important;
}
.single-analog-deck .display-slider-left .cue-up{top:4px!important}
.single-analog-deck .display-slider-left .cue-down{bottom:4px!important}
.single-analog-deck .display-slider-right .cue-left{left:4px!important}
.single-analog-deck .display-slider-right .cue-right{right:4px!important}

@media(max-width:700px) and (orientation:portrait){
 .single-analog-deck .display-slider-left,
 .single-analog-deck .display-slider-right{
  padding:0!important;
 }
 .single-analog-deck .display-slider button.control-display-button{
  border-radius:14px!important;
 }
}

/* Linked private asset library — My Images/My Sprites use the authenticated
   account storage already provided by RIST. The explorer remains touchable
   while the viewer cursor stays visually above it. */
.asset-source-explorer{
 pointer-events:auto!important;
}
.asset-source-explorer .asset-upload-pane{
 min-height:0!important;
 display:grid!important;
 place-content:center!important;
 justify-items:center!important;
 gap:10px!important;
 padding:12px!important;
 border:1px dashed rgba(99,211,255,.5)!important;
 border-radius:10px!important;
 background:rgba(5,22,34,.74)!important;
 text-align:center!important;
}
.asset-source-explorer .asset-upload-pane>strong{
 color:#f0d792!important;
 font:900 clamp(10px,1vw,14px)/1.1 system-ui,-apple-system,sans-serif!important;
 letter-spacing:.1em!important;
}
.asset-source-explorer .asset-upload-pane>span{
 max-width:38em!important;
 color:#b6ccd6!important;
 font:700 clamp(8px,.8vw,11px)/1.35 system-ui,-apple-system,sans-serif!important;
}
.asset-source-explorer .asset-upload-pane input[type="file"]{
 box-sizing:border-box!important;
 width:min(100%,360px)!important;
 min-height:44px!important;
 padding:8px!important;
 border:1px solid #5bcdf7!important;
 border-radius:9px!important;
 background:#082033!important;
 color:#e8f8ff!important;
 font:800 10px/1.2 system-ui,-apple-system,sans-serif!important;
}
.asset-source-explorer .asset-upload-pane small{
 color:#ffbd9d!important;
 font:800 8px/1.3 system-ui,-apple-system,sans-serif!important;
}
.asset-source-explorer .asset-library-state{
 min-height:120px!important;
 display:grid!important;
 place-items:center!important;
 padding:12px!important;
 color:#b9d9e7!important;
 border:1px dashed rgba(99,211,255,.34)!important;
 border-radius:9px!important;
 text-align:center!important;
 font:900 9px/1.3 system-ui,-apple-system,sans-serif!important;
 letter-spacing:.08em!important;
}
.asset-source-explorer .asset-library-state.error{
 color:#ffbd9d!important;
 border-color:rgba(255,151,109,.4)!important;
}
.asset-source-explorer-grid.linked-assets{
 overflow:auto!important;
 overscroll-behavior:contain!important;
 -webkit-overflow-scrolling:touch!important;
 align-content:start!important;
 grid-auto-rows:minmax(72px,1fr)!important;
}
.asset-source-explorer .linked-asset{
 appearance:none!important;
 -webkit-appearance:none!important;
 position:relative!important;
 min-width:0!important;
 min-height:72px!important;
 margin:0!important;
 padding:3px!important;
 overflow:hidden!important;
 border:1px solid rgba(102,210,255,.42)!important;
 border-radius:8px!important;
 background:#071621!important;
 color:#d8edf5!important;
 touch-action:manipulation!important;
}
.asset-source-explorer .linked-asset.selected{
 border:2px solid #f0ca6d!important;
 box-shadow:0 0 0 2px rgba(99,211,255,.28),0 0 16px rgba(240,202,109,.22)!important;
}
.asset-source-explorer .linked-asset img{
 display:block!important;
 width:100%!important;
 height:100%!important;
 min-height:66px!important;
 object-fit:cover!important;
 border-radius:5px!important;
}
.asset-source-explorer .linked-asset>span{
 position:absolute!important;
 left:4px!important;
 right:4px!important;
 bottom:4px!important;
 overflow:hidden!important;
 padding:4px 5px!important;
 border-radius:4px!important;
 background:rgba(0,0,0,.72)!important;
 color:#f4e3ad!important;
 text-overflow:ellipsis!important;
 white-space:nowrap!important;
 font:800 6px/1 system-ui,-apple-system,sans-serif!important;
 letter-spacing:.03em!important;
}
.asset-source-explorer .linked-asset:focus-visible,
.asset-source-explorer .linked-asset:active{
 outline:2px solid #fff0b7!important;
 outline-offset:1px!important;
}

@media(max-width:700px) and (orientation:portrait){
 .asset-source-explorer .asset-upload-pane{
  padding:8px!important;
  gap:7px!important;
 }
 .asset-source-explorer .asset-upload-pane input[type="file"]{
  min-height:46px!important;
  font-size:9px!important;
 }
 .asset-source-explorer-grid.linked-assets{
  grid-auto-rows:minmax(60px,1fr)!important;
 }
 .asset-source-explorer .linked-asset{
  min-height:60px!important;
 }
 .asset-source-explorer .linked-asset img{
  min-height:54px!important;
 }
}