/* The shared look of the module pages (moon, impact, scale): the site's warm ivory on near-black, Cormorant numerals, hairlines
   instead of boxes, small tracked capitals for labels, and drawn controls (slider, switch, buttons) instead of the browser's.
   Loaded by each module with its own ?v= (tools/site/bump.py counts this file into every module's version). Everything is under
   .xm, which each module puts on its root. */
.xm{--gold:#e6cc98;--gold2:rgba(230,204,152,.6);--hair:rgba(236,230,216,.1);--hair2:rgba(236,230,216,.18);--panel:rgba(9,10,18,.66);color:var(--ink);font-family:var(--f-body);-webkit-font-smoothing:antialiased;}
.xm *{box-sizing:border-box;}
.xm ::selection{background:rgba(230,204,152,.3);}
.xm .xm-eyebrow{margin:0;font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);}
:lang(zh) .xm .xm-eyebrow,:lang(ja) .xm .xm-eyebrow,:lang(ko) .xm .xm-eyebrow{letter-spacing:.28em;font-size:11px;} :lang(ar) .xm .xm-eyebrow{letter-spacing:0;font-size:12px;}
.xm .xm-num{font-family:var(--f-display);font-weight:400;font-variant-numeric:lining-nums tabular-nums;letter-spacing:.01em;line-height:1;}
.xm .xm-rule{height:1px;border:0;margin:0;background:linear-gradient(90deg,var(--hair2),var(--hair) 60%,transparent);}
:dir(rtl) .xm .xm-rule{background:linear-gradient(270deg,var(--hair2),var(--hair) 60%,transparent);}
/* title block on the stage */
.xm .xm-title{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(22px,2.4vw,30px);letter-spacing:.14em;text-transform:uppercase;text-shadow:0 1px 18px #000;}
:lang(zh) .xm .xm-title,:lang(ja) .xm .xm-title,:lang(ko) .xm .xm-title{letter-spacing:.3em;} :lang(ar) .xm .xm-title{letter-spacing:0;}
.xm .xm-sub{margin:8px 0 0;max-width:440px;font-size:13px;line-height:1.6;color:var(--mute);text-shadow:0 1px 12px #000;}
/* buttons */
.xm .xm-btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:34px;padding:0 16px;border:1px solid var(--hair2);border-radius:999px;background:rgba(236,230,216,.03);color:var(--ink);font:500 11.5px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:border-color .25s,background .25s,color .25s,transform .25s;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);}
:lang(zh) .xm .xm-btn,:lang(ja) .xm .xm-btn,:lang(ko) .xm .xm-btn{letter-spacing:.16em;font-size:12.5px;} :lang(ar) .xm .xm-btn{letter-spacing:0;font-size:13px;}
.xm .xm-btn:hover{border-color:var(--gold2);color:var(--gold);background:rgba(230,204,152,.06);} .xm .xm-btn:active{transform:scale(.97);}
.xm .xm-btn.on{border-color:var(--gold2);color:var(--gold);background:rgba(230,204,152,.09);} .xm .xm-btn:disabled{opacity:.3;pointer-events:none;}
.xm .xm-btn.sm{height:28px;padding:0 12px;font-size:10.5px;}
.xm .xm-cta{appearance:none;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:52px;border:0;border-radius:14px;background:linear-gradient(180deg,#f3ead6,#d9c394);color:#17130a;font:600 13px/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;cursor:pointer;box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 10px 40px -8px rgba(230,204,152,.45);transition:transform .2s,box-shadow .3s,filter .3s;}
:lang(zh) .xm .xm-cta,:lang(ja) .xm .xm-cta,:lang(ko) .xm .xm-cta{font-size:15px;letter-spacing:.3em;} :lang(ar) .xm .xm-cta{letter-spacing:0;font-size:15px;}
.xm .xm-cta:hover{filter:brightness(1.06);box-shadow:0 0 0 1px rgba(255,255,255,.3) inset,0 14px 50px -6px rgba(230,204,152,.6);} .xm .xm-cta:active{transform:scale(.985);}
.xm .xm-x{appearance:none;width:42px;height:42px;flex:none;border:1px solid var(--hair2);border-radius:50%;background:rgba(9,10,18,.5);color:var(--ink);font-size:15px;cursor:pointer;pointer-events:auto;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:border-color .25s,color .25s,transform .35s;}
.xm .xm-x:hover{border-color:var(--gold2);color:var(--gold);transform:rotate(90deg);}
/* slider: a hairline with a small bright bead; --p (0..1) fills the part behind the bead when the module sets it */
.xm input[type=range]{appearance:none;-webkit-appearance:none;height:26px;margin:0;background:transparent;cursor:pointer;--p:.5;}
.xm input[type=range]::-webkit-slider-runnable-track{height:1px;background:linear-gradient(90deg,var(--gold2) calc(var(--p)*100%),var(--hair2) calc(var(--p)*100%));}
.xm input[type=range]::-moz-range-track{height:1px;background:var(--hair2);} .xm input[type=range]::-moz-range-progress{height:1px;background:var(--gold2);}
.xm input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;margin-top:-6px;border-radius:50%;border:0;background:#f4ecd8;box-shadow:0 0 0 5px rgba(230,204,152,.14),0 0 18px rgba(230,204,152,.7);transition:box-shadow .2s,transform .2s;}
.xm input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;border:0;background:#f4ecd8;box-shadow:0 0 0 5px rgba(230,204,152,.14),0 0 18px rgba(230,204,152,.7);}
.xm input[type=range]:hover::-webkit-slider-thumb,.xm input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15);box-shadow:0 0 0 7px rgba(230,204,152,.18),0 0 24px rgba(230,204,152,.9);}
.xm input[type=range]:focus-visible{outline:1px solid var(--gold2);outline-offset:4px;border-radius:4px;}
:dir(rtl) .xm input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(270deg,var(--gold2) calc(var(--p)*100%),var(--hair2) calc(var(--p)*100%));}
/* switch */
.xm .xm-sw{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);cursor:pointer;user-select:none;-webkit-user-select:none;}
:lang(ar) .xm .xm-sw{letter-spacing:0;font-size:13px;} :lang(zh) .xm .xm-sw,:lang(ja) .xm .xm-sw,:lang(ko) .xm .xm-sw{font-size:12.5px;}
.xm .xm-sw input{position:absolute;opacity:0;pointer-events:none;}
.xm .xm-sw i{position:relative;width:30px;height:16px;flex:none;border-radius:999px;border:1px solid var(--hair2);background:rgba(236,230,216,.04);transition:background .25s,border-color .25s;}
.xm .xm-sw i::after{content:'';position:absolute;top:2px;inset-inline-start:2px;width:10px;height:10px;border-radius:50%;background:var(--mute);transition:transform .25s,background .25s;}
.xm .xm-sw input:checked+i{border-color:var(--gold2);background:rgba(230,204,152,.14);} .xm .xm-sw input:checked+i::after{transform:translateX(14px);background:var(--gold);}
:dir(rtl) .xm .xm-sw input:checked+i::after{transform:translateX(-14px);}
.xm .xm-sw:hover{color:var(--ink);} .xm .xm-sw input:focus-visible+i{outline:1px solid var(--gold2);outline-offset:3px;}
/* the side column: no boxes, a soft edge, thin scrollbar */
.xm .xm-side{background:linear-gradient(180deg,rgba(10,11,20,.9),rgba(6,7,13,.94));border-inline-start:1px solid var(--hair);scrollbar-width:thin;scrollbar-color:rgba(236,230,216,.18) transparent;}
.xm .xm-side::-webkit-scrollbar{width:6px;} .xm .xm-side::-webkit-scrollbar-thumb{background:rgba(236,230,216,.16);border-radius:3px;}
.xm .xm-sec{padding:22px 0;border-top:1px solid var(--hair);} .xm .xm-sec:first-child{border-top:0;padding-top:4px;}
.xm .xm-note{margin:0;font-size:11px;line-height:1.6;color:var(--faint);}
/* things arrive softly */
@keyframes xm-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.xm .xm-in{animation:xm-in .7s cubic-bezier(.2,.7,.2,1) both;} .xm .xm-in.d1{animation-delay:.08s;} .xm .xm-in.d2{animation-delay:.16s;} .xm .xm-in.d3{animation-delay:.24s;}
@media (prefers-reduced-motion:reduce){.xm .xm-in{animation:none;}}
.xm .xm-eyebrow+.xm-note{margin-top:10px;}
/* the phone's explanation card (ui/coach.js): large enough to read, there until it is put away */
.xm .xm-coach{display:none;}
@media (max-width:760px){
  .xm .xm-coach{display:flex;flex-direction:column;align-items:flex-start;gap:14px;position:absolute;z-index:6;top:calc(max(16px,var(--sat)) + 58px);left:14px;right:14px;padding:18px 18px 16px;border:1px solid var(--hair2);border-radius:16px;background:rgba(8,9,16,.9);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 20px 60px rgba(0,0,0,.6);animation:xm-in .6s cubic-bezier(.2,.7,.2,1) both;transition:opacity .35s,transform .35s;}
  .xm .xm-coach p{margin:0;font-size:16px;line-height:1.65;color:#f4ecdb;}
  .xm .xm-coach .xm-btn{height:40px;padding:0 22px;font-size:13px;}
  .xm .xm-coach.out{opacity:0;transform:translateY(-8px);pointer-events:none;}
}
/* phones: controls large enough for a thumb */
@media (max-width:760px){
  .xm .xm-btn.sm{height:36px;padding:0 14px;font-size:11px;}
  .xm input[type=range]{height:36px;}
  .xm .xm-sw{min-height:36px;}
  .xm .xm-eyebrow{font-size:11.5px;}
  #sm .sm-l{font-size:11.5px;}
}