
@font-face{font-family:Jost;src:url('/assets/jost-400.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Jost;src:url('/assets/jost-700.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
:root{--paper:#ebe9dc;--ink:#000;--amber:#f0b34a;font-family:Jost,sans-serif;color:var(--ink);background:var(--paper);font-weight:400}
*{box-sizing:border-box}html,body{margin:0;width:100%;overflow-x:hidden;overflow-y:auto;background:var(--ink);touch-action:manipulation}button,input,textarea{font:inherit;color:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--ink);outline-offset:5px}
.poster{position:relative;background:var(--paper);min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:22px 20px;gap:14px;text-align:center}
.eyebrow{font-weight:700;font-size:13px;letter-spacing:.15em;margin:0}
.term-cue{margin:-6px 0 -10px;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.45}
.live-calls{list-style:none;margin:22px auto 0;padding:0;max-width:640px;text-align:left}
.live-calls li{border-top:1px solid rgba(0,0,0,.12)}
.live-calls a{display:block;padding:8px 2px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:#111;text-decoration:none}
.live-calls a:hover{color:#8a5a00}
.stage{position:relative;flex:none;width:min(576px,calc((100svh - 295px)*4/3),calc(100vw - 40px));aspect-ratio:4/3;perspective:1100px;overflow:visible}
#r1Model{position:absolute;inset:0;z-index:1;pointer-events:none}.r1-object{position:absolute;left:50%;top:50%;width:576px;height:432px;transform:translate(-50%,-50%) rotateX(3deg) rotateY(-8deg) rotateZ(-2deg);transform-style:preserve-3d;animation:r1-float 7s ease-in-out infinite;filter:drop-shadow(24px 30px 18px #0003);opacity:0;pointer-events:none;transition:filter .35s ease,opacity .35s ease}.r1-object.ready{opacity:1;pointer-events:auto}.r1-object:hover{filter:drop-shadow(30px 38px 22px #0004)}
.r1-object iframe{position:absolute;width:576px;height:432px;border:0;inset:0;transform-origin:center;background:transparent;transform:none;backface-visibility:hidden;border-radius:0;box-shadow:none;z-index:2}
.r1-face{display:none}
.r1-face.top{height:28px;bottom:auto;transform-origin:bottom;transform:rotateX(90deg) translateZ(-14px);background:linear-gradient(90deg,#ff934c,#db4717)}
.r1-face.right{width:28px;left:auto;transform-origin:left;transform:rotateY(90deg) translateZ(14px);background:linear-gradient(#d94816,#9d2d0d)}
.r1-wheel-zone{position:absolute;left:63%;top:39%;width:10%;height:30%;z-index:5;cursor:pointer}.r1-face.back{transform:translateZ(-14px) rotateY(180deg);background:linear-gradient(135deg,#ff8a45,#bb3810);display:grid;place-items:center;color:#8c2a0a;font-size:20px;font-weight:700;letter-spacing:.25em}
@keyframes r1-float{0%,100%{transform:translate(-50%,-50%) scale(var(--scale,1)) rotateX(3deg) rotateY(-8deg) rotateZ(-2deg)}50%{transform:translate(-50%,calc(-50% + 10px)) scale(var(--scale,1)) rotateX(-2deg) rotateY(9deg) rotateZ(2deg)}}
@media(prefers-reduced-motion:reduce){#r1Model{position:absolute;inset:0;z-index:1;pointer-events:none}.r1-object{animation:none}}
h1{font-size:clamp(30px,4.3vw,58px);line-height:.96;letter-spacing:-.045em;font-weight:700;margin:0;text-transform:uppercase}
.description{font-size:15px;line-height:1.45;margin:0;max-width:540px}.description span{display:block}
.primary{border:1px solid black;background:black;color:var(--paper);padding:11px 29px;font-weight:700;font-size:12px;letter-spacing:.07em;min-height:42px}.primary:hover{background:#262626}
.demo{position:absolute;bottom:1px;left:0;right:0;font-size:10px;letter-spacing:.09em;pointer-events:none;margin:0}
.overlay{position:fixed;inset:0;background:var(--paper);opacity:0;pointer-events:none;visibility:hidden;transition:opacity .5s cubic-bezier(.4,0,.2,1),visibility .5s;display:grid;place-items:center;padding:28px;z-index:10}
.overlay.open{opacity:1;pointer-events:auto;visibility:visible}.form-shell{width:min(100%,560px)}h2{font-size:clamp(30px,5vw,52px);line-height:1;letter-spacing:-.035em;margin:0 0 12px;font-weight:700}.intro{margin:0 0 24px;font-size:15px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:20px}.field{display:block;font-size:13px}.field input,.field textarea{display:block;width:100%;border:0;border-bottom:1px solid black;border-radius:0;background:transparent;padding:9px 0;outline-offset:3px;font-size:17px}.field textarea{resize:none;height:76px}.wide{grid-column:1/-1}
fieldset{border:0;padding:0;margin:23px 0}legend{font-size:13px;margin-bottom:10px}.tiers{display:flex;flex-wrap:wrap;gap:9px 20px}.tiers label{display:flex;gap:6px;align-items:center;font-size:14px;min-height:32px}.tiers input{accent-color:black;margin:0}
.actions{display:flex;align-items:center;gap:22px}.send{width:104px;height:22px;padding:0;border:1px solid black;background:transparent;font-size:10px;font-weight:700;letter-spacing:.04em}.cancel{border:0;background:white;border-radius:999px;padding:10px 23px;font-size:12px;font-weight:700}.contact{font-size:13px;margin:22px 0 0;overflow-wrap:anywhere}.contact span{display:block}.contact a{color:inherit;font-weight:700;letter-spacing:.04em}.contact.x{margin-top:6px}.contact.x a{display:inline-flex;align-items:center;gap:6px;text-decoration:none}.contact.x svg{width:12px;height:12px;display:block;flex:none}.notice{font-size:12px;min-height:18px;margin:9px 0 0}
@media(max-height:660px){.poster{gap:10px;padding:14px}.description{font-size:12px}h1{font-size:36px}.stage{width:min(480px,calc((100svh - 245px)*4/3),calc(100vw - 40px))}.overlay{padding:18px}.intro{margin-bottom:12px}.fields{gap:12px}fieldset{margin:12px 0}.contact{margin-top:12px}}
@media(max-width:480px){.poster{gap:12px}.description{font-size:12px}.fields{grid-template-columns:1fr;gap:14px}.field textarea{height:60px}.overlay{padding:22px}.intro{font-size:13px}.tiers{gap:2px 14px}}
@media(prefers-reduced-motion:reduce){.overlay{transition:none}}
/* ---- smart liquidation: below the fold. The section's own background runs
   --paper -> --ink, so the landing screen's cream dissolves into this page's
   black with no seam. Padding-top matches the fade so content starts in pure
   black, never on the gradient. ---- */
.liq{position:relative;color:var(--paper);background:linear-gradient(180deg,var(--paper) 0,var(--ink) clamp(170px,30vh,360px),var(--ink) 100%);padding:clamp(170px,30vh,360px) 20px 104px}
.liq-inner{width:min(100%,780px);margin:0 auto}
.liq .eyebrow{color:var(--amber);font-size:12px;letter-spacing:.22em;margin:0 0 22px}
.liq h2{font-size:clamp(28px,4.6vw,50px);line-height:1.04;letter-spacing:-.035em;margin:0 0 14px;font-weight:700;text-transform:uppercase}
.liq p{margin:0 0 16px;font-size:16px;line-height:1.6}
.liq .sub{color:#ebe9dca8;max-width:62ch}
.liq .block{margin:0 0 76px}
.liq .block h2{font-size:clamp(22px,3.1vw,32px);margin-bottom:10px}
.liq .block:last-child{margin-bottom:0}
.liq h3{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--amber);margin:0 0 12px;font-weight:700}
.says{display:flex;flex-direction:column;gap:9px;margin:24px 0 0}
.say{display:flex;align-items:center;gap:14px;border:1px solid #f0b34a42;padding:13px 17px;font-weight:700;font-size:16px}
.say::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--amber);flex:none}
.say i{font-style:normal;font-size:10px;font-weight:700;color:#ebe9dc8c;margin-left:auto;letter-spacing:.16em;text-transform:uppercase}
.steps{counter-reset:s;margin:24px 0 0;padding:0;list-style:none}
.steps li{counter-increment:s;position:relative;padding:0 0 25px 50px;border-left:1px solid #f0b34a3d;margin-left:13px}
.steps li:last-child{border-left-color:transparent;padding-bottom:0}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:-14px;top:-2px;width:27px;height:27px;border-radius:50%;border:1px solid var(--amber);color:var(--amber);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;background:var(--ink)}
.steps strong{display:block;font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:5px}
.steps p{color:#ebe9dcad;font-size:15px;margin:0}
.panel{border:1px solid #f0b34a42;background:#f0b34a0b;padding:24px;margin:24px 0 0}
.panel .hd{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:15px;border-bottom:1px solid #f0b34a42}
.panel .amt{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.lbl{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:#ebe9dc99;font-weight:700}
.panel table{width:100%;border-collapse:collapse;font-size:15px}
.panel th,.panel td{text-align:left;padding:11px 0;border-bottom:1px solid #ebe9dc17}
.panel th{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#ebe9dc99;font-weight:700}
.panel td.n,.panel th.n{text-align:right;font-variant-numeric:tabular-nums}
.panel tr:last-child td{border-bottom:0}
.neg{color:#e2705f}
.totals{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-top:15px;border-top:1px solid #f0b34a42}
.totals .v{font-size:21px;font-weight:700}
.quote{margin:24px 0 0;padding:17px 21px;border-left:2px solid var(--amber);background:#f0b34a10;font-size:17px;line-height:1.5}
.quote span{display:block;margin-top:9px;font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#ebe9dc99}
/* ---- floating section navigation --------------------------------------------
   The page is a long scroll with three destinations. This is a left-hand rail
   that tracks which one you are in.

   It uses BUTTONS, never <a href="#…">: the site's design rule is zero anchor
   links, and verify.py asserts document.querySelectorAll('a').length===0.

   It floats over BOTH the cream hero and the black sections, so its colour is
   swapped by .on-hero rather than fixed. Note the site's global
   `button:focus-visible{outline:3px solid var(--ink)}` would be invisible on
   black, so the rail carries its own focus ring.
   ---- */
.sectionnav{position:fixed;left:20px;top:50%;transform:translateY(-50%);z-index:5;display:flex;flex-direction:column;margin:0;padding:0}
.sectionnav button{all:unset;cursor:pointer;display:flex;align-items:center;gap:11px;padding:6px 10px 6px 0;font-family:inherit;font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--paper);transition:color .3s ease}
.sectionnav .dot{width:14px;height:1px;background:currentColor;opacity:.4;flex:none;transition:width .3s ease,opacity .3s ease,background .3s ease}
.sectionnav button:hover .dot{opacity:.75}
.sectionnav button[aria-current="true"]{color:var(--amber)}
.sectionnav button[aria-current="true"] .dot{width:26px;opacity:1;background:var(--amber)}
/* over the cream hero paper-coloured text would vanish; amber on cream is only
   ~1.6:1, so the whole rail goes ink and the ACTIVE item is marked by the dot's
   length and opacity rather than by hue */
.sectionnav.on-hero button{color:var(--ink)}
.sectionnav.on-hero button .dot{background:var(--ink)}
.sectionnav.on-hero button[aria-current="true"]{color:var(--ink)}
.sectionnav.on-hero button[aria-current="true"] .dot{background:var(--ink)}
.sectionnav button:focus-visible{outline:3px solid var(--amber);outline-offset:4px;border-radius:2px}
.sectionnav.on-hero button:focus-visible{outline-color:var(--ink)}
@media(max-width:760px){
  /* keep the rail but drop the words: on a 390px screen labels would sit over
     the content. The accessible name moves to aria-label on each button. */
  .sectionnav{left:9px}
  .sectionnav .lbl{display:none}
  .sectionnav button{gap:0;padding:7px 8px 7px 0}
  .sectionnav .dot{width:12px}
  .sectionnav button[aria-current="true"] .dot{width:20px}
}
@media(prefers-reduced-motion:reduce){.sectionnav button,.sectionnav .dot{transition:none}}
@media(max-height:560px){.sectionnav{display:none}}

button:not(:disabled),[role="button"]:not(:disabled){cursor:pointer}

/* dGEN1 slab — photo face, real thickness, live TUI in the screen hole.
   Ancestors must not use filter/opacity<1 or the depth flattens. */
.stage {
  perspective: 1400px;
  perspective-origin: 50% 42%;
}
.stage .ground {
  position: absolute;
  left: 50%;
  top: 62%;
  width: 42%;
  height: 14%;
  transform: translate(-50%, 0);
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.22), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.r1-object,
.r1-object.ready,
.r1-object:hover {
  filter: none;
  opacity: 1;
  animation: none;
  transform: translate(-50%, -50%) scale(var(--scale, 1));
}
#r1Model.slab {
  position: absolute;
  inset: auto;
  left: 50%;
  top: 52%;
  z-index: 1;
  width: 286px;
  height: 382px;
  margin: -191px 0 0 -143px;
  pointer-events: auto;
  --d: 54px;
}
#r1WheelZone {
  pointer-events: auto;
}
#deck {
  pointer-events: none;
}
.r1-object.ready {
  pointer-events: auto;
}
.r1-object iframe,
#glassHit {
  position: absolute;
  left: 5.1%;
  top: 5.9%;
  width: 89.8%;
  height: 72.4%;
  border: 0;
  border-radius: 10px;
  background: #05060a;
  transform: none;
  z-index: 3;
}
#glassHit {
  z-index: 6;
  background: transparent;
  cursor: pointer;
}
#glassHit i {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}
#glassHit i[data-c="tl"] { left: 0; top: 0; }
#glassHit i[data-c="tr"] { left: 100%; top: 0; }
#glassHit i[data-c="br"] { left: 100%; top: 100%; }
#glassHit i[data-c="bl"] { left: 0; top: 100%; }
#chinStatus {
  position: absolute;
  left: 34%;
  top: 87.4%;
  width: 49%;
  height: 3.5%;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px 0 7px;
  border-radius: 9px;
  background: #05070d;
  box-shadow: 0 0 0 2px #05070d;
  color: #7eebff;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.16em;
  pointer-events: none;
  overflow: hidden;
}
#chinStatus .eyes {
  flex: none;
  display: flex;
}
#chinStatus .eyes b {
  display: flex;
  gap: 3px;
  animation: chin-glance 5.6s ease-in-out infinite;
}
#chinStatus .eyes i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #7eefff;
  box-shadow: 0 0 4px #3ec8e8;
  transform-origin: center;
  animation: chin-blink 3.8s ease-in-out infinite;
}
#chinStatus .eyes i:nth-child(2) { animation-delay: 0.06s; }
#chinStatus .chin-track {
  flex: 1;
  overflow: hidden;
  min-width: 0;
  mask-image: linear-gradient(90deg, transparent, #000 8px, #000 calc(100% - 8px), transparent);
}
#chinStatus .chin-track span {
  display: inline-block;
  white-space: nowrap;
  animation: chin-ticker 7s linear infinite;
}
@keyframes chin-blink {
  0%, 38%, 46%, 100% { transform: scaleY(1); }
  42% { transform: scaleY(0.12); }
}
@keyframes chin-glance {
  0%, 62%, 100% { transform: translateX(0); }
  72% { transform: translateX(2px); }
  84% { transform: translateX(-2px); }
}
@keyframes chin-ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.slab {
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 8deg)) rotateY(var(--ry, -28deg)) rotateZ(-1deg);
  animation: slab-float 8s ease-in-out infinite;
  --rx: 8deg;
  --ry: -28deg;
}
.slab.holding,
.slab.settle {
  animation: none;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(-1.5deg);
}
.slab.settle {
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}
.face.front {
  background: #05060a;
  border-radius: 28px;
  transform: translateZ(1px);
  transform-style: flat;
}
.face.front img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  pointer-events: none;
  user-select: none;
}
.face.front::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.28) 0%,
    transparent 32%,
    transparent 60%,
    rgba(0, 0, 0, 0.08) 100%
  );
  pointer-events: none;
  z-index: 1;
}
.face.back {
  background: linear-gradient(165deg, #c5cad0, #8b9198);
  border-radius: 28px;
  transform: translateZ(calc(var(--d) * -1));
}
/* Closed shell. Each edge overlaps the front by 2px (hidden under the photo)
   and meets the back plate, and the sides run the full height into the top and bottom. */
.face.right,
.face.left,
.face.top,
.face.bottom {
  background: linear-gradient(90deg, #3a3f45, #c5cacf 18%, #e4e7ea 46%, #b4b9be);
}
.face.right,
.face.left {
  width: calc(var(--d) + 4px);
  top: 28px;
  bottom: 28px;
  height: auto;
  border-radius: 26px 4px 4px 26px;
}
.face.right {
  left: auto;
  right: calc(var(--d) * -1);
  transform-origin: 4px center;
  transform: rotateY(90deg);
  transform-style: preserve-3d;
}
.face.left {
  right: auto;
  left: calc(var(--d) * -1);
  border-radius: 0;
  transform-origin: calc(100% - 4px) center;
  transform: rotateY(-90deg);
  background: linear-gradient(90deg, #b4b9be, #e4e7ea 54%, #c5cacf 82%, #3a3f45);
}
.face.left .port {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 22px;
  height: 7px;
  transform: translateX(-50%);
  border-radius: 4px;
  background: #141618;
  box-shadow: inset 0 1px 1px #000;
}
.face.top,
.face.bottom {
  height: calc(var(--d) + 4px);
  left: 22px;
  right: 22px;
  width: auto;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.face.top {
  top: calc(var(--d) * -1);
  bottom: auto;
  transform-origin: center calc(100% - 4px);
  transform: rotateX(90deg);
}
.face.bottom {
  top: auto;
  bottom: calc(var(--d) * -1);
  border-radius: 0;
  transform-origin: center 4px;
  transform: rotateX(-90deg);
}
.face.top .grille {
  width: 54px;
  height: 16px;
  background:
    radial-gradient(circle, #1a1a1a 1.1px, transparent 1.3px) 0 0 / 8px 8px;
}
.face.top .usbc {
  width: 28px;
  height: 10px;
  border-radius: 4px;
  background: #1c1c1e;
  box-shadow: inset 0 0 0 1px #8a8a8e;
}
.face.top .laser {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, #ff3b3b 0 3px, #2a2a2a 4px 6px);
}
.face.right .side-blue,
.face.right .side-red,
.face.right .grip {
  position: absolute;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  border: 0;
  padding: 0;
}
.face.right .side-red {
  top: 27%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #ff5a4a, #d01212 55%, #8d1010);
  box-shadow:
    0 0 0 1px #6e1210,
    0 1px 1px rgba(0, 0, 0, 0.35);
}
.face.right .side-blue {
  top: 41%;
  width: 34px;
  height: 11%;
  border-radius: 17px;
  cursor: pointer;
  z-index: 2;
  transform: translateX(-50%) translateZ(1px);
  transform-style: preserve-3d;
  background: linear-gradient(90deg, #0b165c, #243ca8 48%, #0b165c);
  box-shadow: 0 0 0 1px #070e40;
}
.face.right .side-blue::before {
  content: "";
  position: absolute;
  inset: 3px 4px;
  border-radius: inherit;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.65), transparent 36%),
    linear-gradient(90deg, #6d93ff, #2c4ae4 50%, #1a2ea8);
  transform: translateZ(3px);
}
.face.right .side-blue::after {
  content: "";
  position: absolute;
  inset: -10px -8px;
}
.face.right .grip {
  left: 0;
  right: 2px;
  width: auto;
  top: 53.5%;
  height: 16.5%;
  transform: none;
  border-radius: 0 2px 2px 0;
  background: repeating-linear-gradient(
    #0b0c0e 0 3px,
    #2c2e32 3px 5px,
    #0b0c0e 5px 8px
  );
  box-shadow: inset 0 0 0 1px #000;
}
body.term-flat {
  overflow: hidden;
}
body.term-flat .sectionnav {
  visibility: hidden;
}
body.term-flat .poster {
  position: fixed;
  inset: 0;
  z-index: 30;
  height: 100%;
  min-height: 0;
  padding: 0;
  gap: 0;
  background: #07080c;
}
body.term-flat .poster > :not(#stage) {
  display: none !important;
}
body.term-flat .stage {
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  perspective: none;
}
body.term-flat .stage .ground {
  display: none;
}
body.term-flat .r1-object,
body.term-flat .r1-object.ready,
body.term-flat .r1-object:hover {
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  filter: none;
}
body.term-flat #r1Model.slab {
  animation: none;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%) scale(var(--term-scale, 2));
  transform-style: flat;
}
body.term-flat #deck {
  pointer-events: auto;
}
body.term-flat #glassHit {
  pointer-events: none;
}
#termHint {
  display: none;
}
body.term-flat #termHint {
  display: block;
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  margin: 0;
  z-index: 8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.42);
  pointer-events: none;
  white-space: nowrap;
}
@keyframes slab-float {
  0%,
  100% {
    transform: rotateX(8deg) rotateY(-30deg) rotateZ(-1deg) translateY(0);
  }
  50% {
    transform: rotateX(4deg) rotateY(-20deg) rotateZ(0.4deg) translateY(8px);
  }
}
@media (prefers-reduced-motion: reduce) {
  #r1Model.slab {
    position: absolute;
    inset: auto;
    left: 50%;
    top: 52%;
    width: 286px;
    height: 382px;
    margin: -191px 0 0 -143px;
    animation: none;
    transform: rotateX(8deg) rotateY(-26deg) rotateZ(-1deg);
  }
}
@media (max-width: 480px) {
  #r1Model.slab {
    width: 240px;
    height: 320px;
    margin: -160px 0 0 -120px;
  }
}

.tellr-bubble{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;border:0;background:#1a1a1a;color:#f0b34a;z-index:90;font-weight:700;font-size:22px;box-shadow:0 4px 12px #0000004d;cursor:pointer}
.tellr-bubble:hover{transform:scale(1.05)}
.tellr-chat-window{display:none;position:fixed;bottom:96px;right:24px;width:400px;height:500px;max-height:calc(100svh - 120px);background:#ebe9dc;color:#1a1a1a;border:1px solid #333;border-radius:12px;z-index:90;overflow:hidden;flex-direction:column}
.tellr-chat-window.open{display:flex}
.tellr-header{background:#1a1a1a;color:#ebe9dc;padding:16px;font-weight:700;font-size:14px}
.tellr-avatar-container{position:relative;height:0;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#0a0804}
.tellr-chat-window.open .tellr-avatar-container{height:120px}
.tellr-avatar{width:88px;height:88px;object-fit:contain;position:relative;z-index:1}
.tellr-glow{position:absolute;inset:18px 150px;border-radius:50%;z-index:0}
.tellr-noise{position:absolute;inset:0;background:#fff;mix-blend-mode:overlay;opacity:0;z-index:2;pointer-events:none}
.tellr-scanlines{position:absolute;inset:0;background:repeating-linear-gradient(to bottom,transparent 0 2px,#00000026 2px 4px);opacity:0;pointer-events:none;z-index:3}
.tellr-glitch-active .tellr-avatar{animation:tellr-drop 1.2s ease-out both,tellr-flicker 1.2s ease-out both}
.tellr-glitch-active .tellr-glow{animation:tellr-glow 1.2s ease-out both}
.tellr-glitch-active .tellr-noise{animation:tellr-flash .6s ease-out both}
.tellr-glitch-active .tellr-scanlines{animation:tellr-scan 1.2s ease-out both}
@keyframes tellr-drop{0%{transform:translateY(-40px) scale(.9);opacity:0}20%{transform:translateY(5px) scale(1)}100%{transform:none;opacity:1}}
@keyframes tellr-flicker{0%{opacity:0}15%{opacity:.8}40%{opacity:.2}70%{opacity:.6}100%{opacity:1}}
@keyframes tellr-glow{0%{box-shadow:0 0 0 transparent}15%{box-shadow:0 0 24px #f0b34acc}100%{box-shadow:0 0 0 transparent}}
@keyframes tellr-flash{0%{opacity:0}8%{opacity:1}20%{opacity:0}100%{opacity:0}}
@keyframes tellr-scan{0%{opacity:.9}100%{opacity:0}}
.tellr-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.tellr-msg-user,.tellr-msg-assistant{max-width:80%;padding:8px 12px;font-size:14px;line-height:1.4;white-space:pre-wrap}
.tellr-msg-user{align-self:flex-end;background:#1a1a1a;color:#fff;border-radius:16px 16px 4px 16px}
.tellr-msg-assistant{align-self:flex-start;background:#e4e1d2;color:#1a1a1a;border-radius:16px 16px 16px 4px}
.tellr-typing{padding:0 16px 8px;color:#666;font-style:italic;font-size:12px}
.tellr-input-area{padding:12px;border-top:1px solid #ccc;display:flex;gap:8px}
.tellr-input{flex:1;padding:8px 12px;border:1px solid #ccc;border-radius:20px;background:#fff;color:#1a1a1a;outline:none;font-size:14px}
.tellr-send{padding:8px 16px;background:#1a1a1a;color:#fff;border:0;border-radius:20px;cursor:pointer;font-size:14px}
.tellr-send:disabled{opacity:.5;cursor:not-allowed}
@media(max-width:520px){.tellr-chat-window{width:calc(100vw - 24px);right:12px;bottom:88px}.tellr-bubble{right:12px;bottom:12px}}
@media(prefers-reduced-motion:reduce){.tellr-glitch-active .tellr-avatar,.tellr-glitch-active .tellr-glow,.tellr-glitch-active .tellr-noise,.tellr-glitch-active .tellr-scanlines{animation:none}.tellr-avatar{opacity:1}}
