/* The CRM as an object (James, 11 Nov 2026: "The CRM needs to be like that level of like glassy and reflectiveness and metallic";
   "press a colour and the whole CRM takes it. All it does is change three things"). The drawn CRM is a slab of clear glass standing on
   brushed steel and lit from inside by the firm's own colour, in the same world as the produced objects. One colour floods all of it:
   the stage colours are turned from it unless the person sets their own. The studio beside it changes every part.
   Loaded after site.css, on the landing page and on the build flow. */
:root{--spring:cubic-bezier(.22,1.25,.32,1);--edge:0 0 0 1px rgba(14,18,28,.07),inset 0 1px 0 rgba(255,255,255,.95);
  --steel:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0) 28%,rgba(0,0,0,.12) 64%,rgba(255,255,255,.4)),linear-gradient(90deg,#c6cad1,#f8f9fa 13%,#bfc3cb 29%,#eef0f3 47%,#b6bac2 65%,#f3f4f6 83%,#c6cad1)}

/* ---- the stage: the CRM at one size, scaled to its room (site.js sets --fit and --gy) */
.g-stage{position:relative;display:block}
.g-cam{position:absolute;left:50%;top:var(--gy,0px);width:1290px;transform:translateX(-50%) scale(var(--fit,1));transform-origin:50% 0}
.g-tilt{transform:perspective(2600px) rotateX(var(--rx,2deg)) rotateY(var(--ry,-6deg));transform-origin:50% 40%;transition:transform 1.1s var(--ease)}

/* ---- the slab: a photograph of a real pane of glass standing in a brushed steel base (assets/frame.webp, produced for this), cut in nine
   so its edges stretch to whatever the CRM inside needs. The CRM is drawn in the clear middle. The firm's colour lights it from inside. */
.g-slab{position:relative;margin:47px 86px 0 84px}
.g-slab::before{content:"";position:absolute;inset:-47px -86px -202px -84px;border:solid transparent;border-width:47px 86px 202px 84px;border-image:url(assets/frame.webp) 47 87 204 85 stretch;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(#000 82%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
/* a band of light crosses the glass now and then */
.g-slab::after{content:"";position:absolute;z-index:3;inset:0;border-radius:18px;pointer-events:none;
  background:linear-gradient(112deg,transparent 40%,rgba(255,255,255,.55) 47%,rgba(255,255,255,.14) 51%,transparent 58%) 130% 0 / 320% 100% no-repeat;animation:g-sweep 9s var(--ease) 1.4s infinite}
@keyframes g-sweep{0%{background-position:130% 0}36%,100%{background-position:-70% 0}}
/* the colour's light where the glass meets the steel, and again on the floor under it */
.g-plinth{display:block;position:relative;height:100px;margin:0 -40px;background:radial-gradient(58% 60% at 50% 0,color-mix(in srgb,var(--th) 46%,transparent),transparent 72%);mix-blend-mode:multiply;pointer-events:none}
.g-floor{display:block;height:110px;margin:-14px 6% 0;border-radius:50%;background:radial-gradient(50% 55% at 50% 0,color-mix(in srgb,var(--th) 55%,transparent),transparent 72%);filter:blur(24px);opacity:.8}

/* ---- inside the slab. --gloss is how bright a gleam is (low on deep colours); --clear is how solid a card is (the Glass part). */
.g-slab > .surface{--gloss:.72;border-radius:min(calc(var(--corner,16px) * 1.2),20px);padding-bottom:18px;
  background:radial-gradient(1100px 520px at 0% -10%,color-mix(in srgb,var(--th) 30%,transparent),transparent 62%),radial-gradient(900px 620px at 100% 112%,color-mix(in srgb,var(--th) 24%,transparent),transparent 60%),
    linear-gradient(180deg,color-mix(in oklch,var(--th) 6%,var(--data-page)),var(--data-page));
  box-shadow:0 0 0 1px rgba(14,18,28,.16),0 0 46px -4px color-mix(in srgb,var(--th) 55%,transparent),0 30px 40px -30px color-mix(in srgb,var(--th) 70%,transparent),inset 0 1px 0 rgb(255 255 255 / .9)}
.g-slab > .surface[data-deep]{--gloss:.13}
/* the stage colours are turned from the main colour, so one press reaches every stage; the person's own four win over these */
@supports (color:oklch(from red l c h)){
  .g-slab > .surface{
    --data-blue:oklch(from var(--th) clamp(.5,l,.68) clamp(.02,c,.2) h); --data-teal:oklch(from var(--th) clamp(.5,l,.68) clamp(.02,c,.2) calc(h + 42));
    --data-violet:oklch(from var(--th) clamp(.5,l,.68) clamp(.02,c,.2) calc(h - 42)); --data-gold:oklch(from var(--th) clamp(.56,l,.72) clamp(.02,c,.2) calc(h + 84))}
}
.g-slab .surface{--data-blue-ink:color-mix(in oklch,var(--data-blue) 66%,var(--data-ink));--data-blue-soft:color-mix(in oklch,var(--data-blue) 15%,var(--data-card));
  --data-teal-ink:color-mix(in oklch,var(--data-teal) 66%,var(--data-ink));--data-teal-soft:color-mix(in oklch,var(--data-teal) 15%,var(--data-card));
  --data-violet-ink:color-mix(in oklch,var(--data-violet) 66%,var(--data-ink));--data-violet-soft:color-mix(in oklch,var(--data-violet) 15%,var(--data-card));
  --data-gold-ink:color-mix(in oklch,var(--data-gold) 66%,var(--data-ink));--data-gold-soft:color-mix(in oklch,var(--data-gold) 15%,var(--data-card))}
.g-slab .surface :is(.lane,.av){--hue-soft:color-mix(in oklch,var(--hue) 15%,var(--data-card));--hue-ink:color-mix(in oklch,var(--hue) 66%,var(--data-ink))}

/* the bar: brushed metal in the cards' colour */
.g-slab .app-bar{margin:14px 14px 0;padding:7px 9px;border:0;border-radius:var(--corner,16px);
  background:linear-gradient(100deg,transparent 30%,rgb(255 255 255 / calc(var(--gloss) * .7)) 44%,transparent 58%),
    linear-gradient(180deg,color-mix(in srgb,#fff calc(var(--gloss) * 100%),var(--data-card)),var(--data-card) 46%,color-mix(in srgb,#000 9%,var(--data-card)) 56%,color-mix(in srgb,#fff calc(var(--gloss) * 55%),var(--data-card)));
  box-shadow:inset 0 1px 0 rgb(255 255 255 / calc(var(--gloss) + .2)),inset 0 -1px 0 rgba(0,0,0,.14),0 0 0 1px color-mix(in srgb,var(--data-ink) 12%,transparent),0 12px 24px -14px color-mix(in oklch,var(--th) 45%,rgba(22,30,48,.6))}
/* the firm's badge: a cube of lit glass, like the lime one */
.g-slab .initials{width:32px;height:32px;border:0;border-radius:calc(var(--corner,16px) * .62);color:var(--th-ink);
  background:linear-gradient(135deg,rgba(255,255,255,.6),transparent 44%),linear-gradient(180deg,color-mix(in oklch,var(--firm) 80%,#fff),var(--firm) 55%,color-mix(in oklch,var(--firm) 80%,#000));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -2px 3px rgba(0,0,0,.2),0 0 0 1px color-mix(in oklch,var(--firm) 72%,#000),0 6px 16px -4px var(--firm)}
[data-crm-mode="dark"] .g-slab .initials{background:linear-gradient(135deg,rgba(255,255,255,.6),transparent 44%),linear-gradient(180deg,color-mix(in oklch,var(--firm) 80%,#fff),var(--firm) 55%,color-mix(in oklch,var(--firm) 80%,#000));color:var(--th-ink)}
.g-slab .tab{border-radius:calc(var(--corner,16px) * .62)}
.g-slab .tab.on{background:linear-gradient(135deg,rgba(255,255,255,.5),transparent 46%),linear-gradient(180deg,color-mix(in oklch,var(--th) 84%,#fff),var(--th) 60%,color-mix(in oklch,var(--th) 86%,#000));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -2px 3px rgba(0,0,0,.16),0 0 0 1px color-mix(in oklch,var(--th) 74%,#000),0 8px 18px -6px var(--th)}
.g-slab .app-head strong{color:var(--data-ink)}

/* the numbers: panes of glass with the colour pooled at their foot; the first is lit all through */
.g-slab .fig{border:0;border-radius:var(--corner,16px);
  background:linear-gradient(135deg,rgb(255 255 255 / var(--gloss)),transparent 40%),color-mix(in srgb,var(--data-card) var(--clear,80%),transparent);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / calc(var(--gloss) + .25)),inset 0 0 0 1px color-mix(in srgb,var(--data-ink) 10%,transparent),inset 0 -14px 22px -14px color-mix(in srgb,var(--th) 70%,transparent),0 20px 30px -22px color-mix(in oklch,var(--th) 50%,rgba(22,30,48,.7))}
.g-slab .fig b{color:color-mix(in oklch,var(--th) 46%,var(--data-ink))}
.g-slab .fig:first-child{color:var(--th-ink);
  background:linear-gradient(135deg,rgba(255,255,255,.48),transparent 42%),radial-gradient(120% 90% at 80% 120%,color-mix(in oklch,var(--th) 70%,#fff),transparent 60%),linear-gradient(180deg,color-mix(in oklch,var(--th) 88%,#fff),var(--th) 55%,color-mix(in oklch,var(--th) 84%,#000));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -3px 5px rgba(0,0,0,.18),0 0 0 1px color-mix(in oklch,var(--th) 74%,#000),0 22px 36px -18px var(--th)}
.g-slab .fig:first-child b{color:inherit}

/* the stages: frosted columns, each lit from its top edge by its own colour */
.g-slab .lanes{height:336px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);mask-image:linear-gradient(90deg,#000 90%,transparent)}
.g-slab .surface:has(.bot-dock) .lanes{height:268px}
.g-slab .lane{border:0;border-radius:var(--corner,16px);
  background:linear-gradient(180deg,color-mix(in oklch,var(--hue) 30%,transparent),color-mix(in oklch,var(--hue) 8%,transparent) 30%,transparent 66%),color-mix(in srgb,var(--data-card) 44%,transparent);
  box-shadow:inset 0 3px 0 var(--hue),inset 0 12px 18px -10px var(--hue),inset 0 0 0 1px color-mix(in srgb,var(--data-ink) 9%,transparent),inset 1px 0 0 rgb(255 255 255 / var(--gloss))}
.g-slab .lane header i{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:color-mix(in oklch,var(--hue) 22%,var(--data-card));color:var(--hue-ink);font-size:11.5px}
.g-slab .card{border:0;border-radius:calc(var(--corner,16px) * .75);
  background:linear-gradient(135deg,rgb(255 255 255 / var(--gloss)),transparent 46%),color-mix(in srgb,var(--data-card) var(--clear,82%),transparent);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / calc(var(--gloss) + .25)),inset 0 0 0 1px color-mix(in srgb,var(--data-ink) 9%,transparent),0 10px 16px -12px color-mix(in oklch,var(--hue) 55%,rgba(22,30,48,.6))}
.g-slab .av{border:0;background:radial-gradient(circle at 32% 24%,rgba(255,255,255,.9),transparent 44%),linear-gradient(180deg,color-mix(in oklch,var(--hue) 26%,var(--data-card)),color-mix(in oklch,var(--hue) 48%,var(--data-card)));
  box-shadow:inset 0 -2px 3px color-mix(in oklch,var(--hue) 40%,transparent),0 0 0 1px color-mix(in oklch,var(--hue) 45%,transparent),0 4px 8px -4px var(--hue)}
.g-slab .surface[data-deep] .av{background:radial-gradient(circle at 32% 24%,rgba(255,255,255,.35),transparent 44%),linear-gradient(180deg,color-mix(in oklch,var(--hue) 50%,var(--data-card)),color-mix(in oklch,var(--hue) 28%,var(--data-card)))}
.g-slab .flag{background:color-mix(in srgb,var(--second,var(--th)) 20%,var(--data-card));color:color-mix(in srgb,var(--second,var(--th)) 58%,var(--data-ink));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--second,var(--th)) 30%,transparent)}
.g-slab .app-head span{color:color-mix(in srgb,var(--second,var(--th)) 55%,var(--data-ink))}

/* the bots picked so far stand along the foot of the CRM: a strip of satin metal, a lime bead for each, and the plain fact that none runs yet */
.g-slab .bot-dock{display:flex;align-items:center;gap:14px;margin:12px 14px 0;padding:9px 14px;border-radius:var(--corner,16px);white-space:nowrap;overflow:hidden;animation:deal .6s var(--ease) both;
  background:linear-gradient(100deg,transparent 30%,rgb(255 255 255 / calc(var(--gloss) * .7)) 44%,transparent 58%),linear-gradient(180deg,color-mix(in srgb,#fff calc(var(--gloss) * 100%),var(--data-card)),var(--data-card) 46%,color-mix(in srgb,#000 9%,var(--data-card)) 56%,color-mix(in srgb,#fff calc(var(--gloss) * 55%),var(--data-card)));
  box-shadow:inset 0 1px 0 rgb(255 255 255 / calc(var(--gloss) + .2)),inset 0 -1px 0 rgba(0,0,0,.14),0 0 0 1px color-mix(in srgb,var(--data-ink) 12%,transparent),0 0 24px -6px #b8f02a}
.g-slab .bot-dock small{color:var(--data-ink);font-size:13px;font-weight:600}
.g-slab .bd-row{display:flex;align-items:center;gap:8px;min-width:0;flex:1;overflow:hidden}
.g-slab .bd-bot{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px 0 5px;border-radius:99px;background:color-mix(in srgb,var(--data-card) 70%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--data-ink) 10%,transparent)}
.g-slab .bd-bot i{width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 32% 26%,#fff,transparent 46%),#b8f02a;box-shadow:inset 0 -2px 3px rgba(0,0,0,.16),0 0 0 1px rgba(63,107,0,.45),0 0 10px #b8f02a}
.g-slab .bd-bot b{font-size:12.5px;font-weight:500}
.g-slab .bd-more{color:var(--data-ink-2);font-size:12.5px}
.g-slab .bot-dock em{flex:none;padding:3px 9px;border-radius:99px;background:color-mix(in srgb,var(--data-ink) 8%,transparent);color:var(--data-ink-2);font-size:11.5px;font-style:normal}

/* the parts that are sizes and kinds */
.g-slab .surface[data-density="compact"] .card{padding:5px 8px}
.g-slab .surface[data-density="compact"] :is(.lanes,.figs){gap:5px}
.g-slab .surface[data-density="compact"] .fig{min-height:72px}
.g-slab .surface[data-density="spacious"] .card{padding:14px 14px}
.g-slab .surface[data-density="spacious"] :is(.lanes,.figs){gap:14px}
.g-slab .surface[data-density="spacious"] .fig{min-height:104px}
/* text size and depth. The lettering itself is set by the studio as the face's own stack (site.js FONTS). */
.g-slab .surface[data-size="small"] > *{zoom:.92}
.g-slab .surface[data-size="large"] > *{zoom:1.1}
.g-slab .surface[data-depth="flat"] :is(.app-bar,.fig,.lane,.card,.tab.on,.initials,.av,.bot-dock){box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--data-ink) 12%,transparent)}
.g-slab .surface[data-depth="deep"] :is(.fig,.card){box-shadow:inset 0 1px 0 rgb(255 255 255 / calc(var(--gloss) + .25)),inset 0 0 0 1px color-mix(in srgb,var(--data-ink) 9%,transparent),0 22px 30px -12px color-mix(in oklch,var(--th) 45%,rgba(22,30,48,.85)),0 6px 10px -4px rgba(22,30,48,.35)}
.g-slab .surface,.g-slab .surface *{transition:background-color .5s,color .5s,border-radius .4s,box-shadow .5s}

/* ---- the studio: whole looks, then every part, then the one control for the chosen part. A pane of glass in a steel frame. */
.studio{position:relative;display:grid;gap:8px;align-content:start;padding:14px;border-radius:26px;border:5px solid transparent;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.8)) padding-box,var(--steel) border-box;
  box-shadow:0 0 0 1px rgba(14,18,28,.1),inset 0 1px 0 #fff,0 40px 60px -40px rgba(22,30,48,.5)}
.st-h{color:var(--soft);font:600 12px/1 var(--text);letter-spacing:.09em;text-transform:uppercase}
.st-h:not(:first-child){margin-top:6px}
.st-looks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,.9fr);gap:6px}
.lk{all:unset;box-sizing:border-box;display:grid;gap:6px;align-content:center;min-height:52px;padding:7px 10px;border-radius:14px;background:#fff;box-shadow:var(--edge),0 10px 16px -14px rgba(22,30,48,.5);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:translate .3s var(--ease),box-shadow .3s}
.lk b{font-size:13.5px;font-weight:600;letter-spacing:-.014em}
.lk .sw i{width:15px;height:15px;box-shadow:0 0 0 1.5px #fff,inset 0 0 0 1px rgba(0,0,0,.16)}
@media (hover:hover){.lk:hover{translate:0 -3px}}
.lk:active{scale:.97}
.lk:focus-visible,.part:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.lk[aria-pressed="true"],.part[aria-pressed="true"]{box-shadow:0 0 0 2.5px var(--accent),0 0 0 3.5px rgba(63,107,0,.34),0 0 26px -6px color-mix(in srgb,var(--accent) 80%,transparent)}
.lk.dice{grid-column:4;grid-row:1 / span 2;place-items:center;text-align:center;font-size:15px;line-height:1.15;font-weight:600;letter-spacing:-.014em;color:var(--on-accent);
  background:linear-gradient(135deg,rgba(255,255,255,.55),transparent 46%),linear-gradient(180deg,color-mix(in srgb,var(--accent) 86%,#fff),var(--accent) 60%,color-mix(in srgb,var(--accent) 88%,#000));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 3px rgba(0,0,0,.12),0 0 0 1px rgba(63,107,0,.4),0 12px 22px -10px var(--accent)}
.st-parts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.part{all:unset;box-sizing:border-box;display:grid;gap:4px;align-content:center;min-height:48px;padding:5px 10px;border-radius:12px;background:#fff;box-shadow:var(--edge);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:translate .3s var(--ease),box-shadow .3s}
.part b{font-size:13px;font-weight:600;letter-spacing:-.012em;white-space:nowrap}
@media (hover:hover){.part:hover{translate:0 -2px}}
.sw{display:flex;align-items:center;color:var(--soft);font-size:13px;white-space:nowrap}
.sw i{width:18px;height:18px;border-radius:50%;margin-right:-5px;box-shadow:0 0 0 1.5px #fff,inset 0 0 0 1px rgba(0,0,0,.16)}
.ctl{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;height:136px;overflow-y:auto;padding:9px 12px;border-radius:16px;background:rgba(14,18,28,.045);box-shadow:inset 0 1px 2px rgba(14,18,28,.08)}
.sws{display:flex;flex-wrap:nowrap;gap:1px}
.sws button{display:grid;place-items:center;width:32px;height:36px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:translate .3s var(--ease)}
.sws button::before{content:"";width:27px;height:27px;border-radius:50%;background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.55),transparent 46%),var(--firm);box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),0 4px 8px -4px var(--firm)}
@media (hover:hover){.sws button:hover{translate:0 -3px}}
.sws button[aria-pressed="true"]::before{box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),0 0 0 3px #fff,0 0 0 5.5px var(--accent),0 0 0 6.5px rgba(63,107,0,.4)}
.any{position:relative;display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 14px 0 6px;border-radius:99px;background:#fff;border:1px solid var(--line-2);font-size:14px;font-weight:500;cursor:pointer;transition:translate .35s var(--ease),border-color .3s}
@media (hover:hover){.any:hover{translate:0 -3px;border-color:rgba(14,18,28,.3)}}
.any i{flex:none;width:30px;height:30px;border-radius:50%;background:conic-gradient(#f43f5e,#f59e0b,#facc15,#22c55e,#06b6d4,#3b82f6,#a855f7,#f43f5e);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),inset 0 0 0 4px #fff}
.any input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.any:focus-within{outline:2px solid var(--ink);outline-offset:3px}
.hex{width:7.4em;height:42px;padding:0 14px;border-radius:99px;border:1px solid var(--line-2);background:#fff;font:500 14px/1 var(--mono);letter-spacing:.02em;outline:0;transition:border-color .2s,box-shadow .2s}
.hex:focus-visible{border-color:var(--accent-ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 35%,transparent)}
.sets{display:flex;flex-wrap:wrap;gap:6px}
.set{all:unset;box-sizing:border-box;display:flex;gap:3px;padding:8px 10px;border-radius:99px;border:1px solid var(--line-2);background:#fff;cursor:pointer;transition:translate .3s var(--ease)}
.set i{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
@media (hover:hover){.set:hover{translate:0 -3px}}
.set[aria-pressed="true"]{border-color:transparent;box-shadow:0 0 0 2.5px var(--accent),0 0 0 3.5px rgba(63,107,0,.4)}
.set:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.ctl input[type="range"]{flex:1 1 150px;height:40px;accent-color:var(--accent-ink)}
.ctl output{min-width:3.4em;font:600 17px/1 var(--text);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ctl .end{color:var(--soft);font-size:13px}
.ctl .seg{background:rgba(14,18,28,.07)}
/* the lettering: each face named in its own letters */
.faces{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;width:100%}
.faces button{all:unset;box-sizing:border-box;height:36px;padding:0 6px;border-radius:10px;background:#fff;box-shadow:var(--edge);font-size:14.5px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:translate .3s var(--ease),box-shadow .3s}
@media (hover:hover){.faces button:hover{translate:0 -2px}}
.faces button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.faces button[aria-pressed="true"]{box-shadow:0 0 0 2.5px var(--accent),0 0 0 3.5px rgba(63,107,0,.34)}
.ctl .seg button{height:40px;padding:0 18px;font-size:15px}
.ctl .undo{margin-left:auto;background:none;box-shadow:none;color:var(--soft);text-decoration:underline;text-underline-offset:3px}
.st-say{min-height:1.2em;color:var(--soft);font-size:13px}
.st-say:empty{display:none}

@media (prefers-reduced-motion:reduce){.g-slab::after{animation:none}.g-tilt{transition:none}}
@media (max-width:899px){
  .g-tilt{transform:none}
  .g-cam{width:700px}   /* drawn closer, so its words can be read; the right of the board runs off under the glass edge */
  .g-slab .lanes,.g-slab .surface:has(.bot-dock) .lanes{height:190px}   /* and shorter, so the picture and the choices share a small screen */
  .ctl{height:auto;min-height:104px}
  .st-looks{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lk.dice{grid-column:1 / -1;grid-row:auto;min-height:48px}
}