.mtrm{--rm-color:#B8F6FF;--rm-halo:.7;--rm-bg:#07111f;--rm-horizon:#07111f;--rm-stars:.6;--rm-fog:0;--rm-fog-soft:.55;--rm-frost:0;--rm-heat:0;--rm-daylight:0}
.mtrm .mtrm-stage{position:relative;isolation:isolate;width:100%;max-width:680px;min-height:200px;aspect-ratio:680/220;margin:12px auto 0;overflow:hidden;border:1px solid #294356;border-radius:20px;background:var(--rm-bg);box-shadow:inset 0 0 19px #020a142e,0 12px 25px #0b22331c;transition:background 4s}
.mtrm-horizon{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 110%,var(--rm-horizon) 0%,transparent 76%);opacity:.8;transition:background 4s}
.mtrm-stars{position:absolute;inset:0;opacity:var(--rm-stars);background-image:radial-gradient(circle at 13% 19%,#cee5ff 0 1px,transparent 1.7px),radial-gradient(circle at 83% 25%,#d5e5ff 0 1px,transparent 1.7px),radial-gradient(circle at 72% 11%,#d5e5ff 0 .7px,transparent 1.5px),radial-gradient(circle at 29% 30%,#d5e5ff 0 .6px,transparent 1.5px);transition:opacity 4s}
.mtrm-moving{position:absolute;inset:0;transform-origin:50% 60%;will-change:transform}
.mtrm-moving::before{content:"";position:absolute;inset:15% 4% 23%;border-radius:25px;background:rgba(3,12,24,.22);filter:blur(15px);pointer-events:none}
.mtrm-digits,.mtrm-fx{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.mtrm-digits{overflow:visible;color:var(--rm-color);filter:drop-shadow(0 0 2px var(--rm-color)) drop-shadow(0 0 9px var(--rm-color));transition:color 2s,filter 2s;animation:mtrm-ignite 1.1s ease-out both}
.mtrm-digits .rm-segment{fill:currentColor;stroke:currentColor;stroke-width:1.1;stroke-linejoin:round;paint-order:stroke fill;transition:fill 2s,stroke 2s}
.mtrm-digits .rm-off{fill:#9ecddd;opacity:.035}
.mtrm-digits [data-rm-digit]{transition:opacity .1s}
.mtrm-caption{position:absolute;bottom:14px;left:10px;right:10px;display:grid;gap:5px;text-align:center;color:#e0e9ef;font:12px/1.4 system-ui,sans-serif;font-variant-numeric:tabular-nums;pointer-events:none}
.mtrm-phase{position:absolute;top:12px;left:18px;right:18px;color:#d4e0eb;font:10px/1.4 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;text-align:center}
.mtrm-status{margin:10px 10px 0;text-align:center;color:#526877;font:12px/1.5 system-ui,sans-serif}
.mtrm-accessible{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.mtrm-fog{position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent,#deebf5 40%,transparent 70%);opacity:var(--rm-fog);transition:opacity 4s;transform:translateX(var(--rm-fog-x,0px))}
.mtrm-flash{position:absolute;inset:0;background:radial-gradient(ellipse at 75% 15%,#ffffff 0%,#c8e4ff 24%,#819cdb 54%,transparent 92%);opacity:0;mix-blend-mode:screen;pointer-events:none;z-index:4}
.mtrm-test{max-width:680px;margin:16px auto 0;padding:16px;background:#fff8e8;border:1px solid #e2be62;border-radius:14px;color:#5e4613;font:13px/1.5 system-ui,sans-serif}
.mtrm-test>strong{display:block;margin-bottom:12px}
.mtrm-controls{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px}.mtrm-controls>label{display:grid;gap:5px}.mtrm-controls output{float:right;font-variant-numeric:tabular-nums}.mtrm-controls input[type=range]{width:100%;accent-color:#187b91}.mtrm-controls select{width:100%;padding:8px;background:#fff;border:1px solid #c3cbd1;border-radius:8px;color:#293c46}.mtrm-toggles{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.mtrm-toggles button{border:1px solid #c3cbd1;border-radius:7px;background:#fff;color:#293c46;padding:6px 9px;cursor:pointer}
@keyframes mtrm-ignite{from{opacity:.45;filter:drop-shadow(0 0 1px currentColor)}70%{opacity:1}to{opacity:1}}
@media(max-width:540px){.mtrm .mtrm-stage{min-height:200px}.mtrm-caption{font-size:10px;bottom:12px}.mtrm-phase{font-size:9px;top:10px}.mtrm-controls{grid-template-columns:1fr}.mtrm-test{padding:12px}}
@media(prefers-reduced-motion:reduce){.mtrm *{animation:none!important;transition:none!important}.mtrm-moving{will-change:auto}}

/* v1.0.1: controls de recorregut astronòmic i boira demostrativa */
.mtrm-tour{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px;border:1px solid #b4cad8;border-radius:10px;background:#edf6fc}
.mtrm-tour button{background:#164b70;color:#fff;border:0;border-radius:8px;padding:9px 12px;cursor:pointer;font-weight:650}
.mtrm-tour output{font-size:12px;color:#24495e;flex-basis:100%}
.mtrm[data-rm-fog="true"] .mtrm-fog{background:linear-gradient(100deg,rgba(219,233,245,.16),rgba(235,246,252,.9) 38%,rgba(219,233,245,.24) 75%);mix-blend-mode:screen}
.mtrm[data-rm-fog="true"] .mtrm-stage{box-shadow:inset 0 0 28px #a8c4d43b,0 12px 25px #0b22331c}
.mtrm .mtrm-horizon{transition:background 1s linear}
.mtrm .mtrm-stage{transition:background 1s linear}

/* v1.0.2: ambient solar observable, condensació visible i proves accessibles */
.mtrm .mtrm-stage{transition:background-color .3s linear}
.mtrm .mtrm-horizon{transition:background .3s linear}
.mtrm[data-rm-fog="true"] .mtrm-fog{z-index:3;background:linear-gradient(105deg,rgba(198,220,236,.16),rgba(239,248,255,.94) 44%,rgba(198,220,236,.22) 80%);mix-blend-mode:screen}
.mtrm[data-rm-condensation="true"] .mtrm-fx{filter:drop-shadow(0 0 2px #d8f4ff)}

/* v1.0.3 — boira estratificada i llamps ramificats */
.mtrm-fog{z-index:3;opacity:var(--rm-fog);background:radial-gradient(ellipse at 30% 65%,rgba(244,251,255,.95),transparent 62%),radial-gradient(ellipse at 72% 34%,rgba(235,247,255,.85),transparent 54%),linear-gradient(105deg,transparent 5%,rgba(221,239,249,.8) 50%,transparent 95%);background-size:115% 110%,130% 110%,130% 100%;filter:blur(10px);mix-blend-mode:screen;animation:mtrm-mist 9s ease-in-out infinite alternate;pointer-events:none}
.mtrm[data-rm-fog="true"] .mtrm-fog{background:radial-gradient(ellipse at 30% 65%,rgba(244,251,255,.95),transparent 62%),radial-gradient(ellipse at 72% 34%,rgba(235,247,255,.85),transparent 54%),linear-gradient(105deg,transparent 5%,rgba(221,239,249,.8) 50%,transparent 95%)}
@keyframes mtrm-mist{from{background-position:-15px 0,20px 0,-35px 0}to{background-position:25px -8px,-20px 10px,35px 0}}
.mtrm-lightning{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;filter:drop-shadow(0 0 6px #bce8ff) drop-shadow(0 0 12px #8acbff)}
.mtrm-flash{z-index:2;pointer-events:none}
.mtrm-moving{z-index:4}
.mtrm-phase{z-index:5}
.mtrm-caption{z-index:5}
@media(prefers-reduced-motion:reduce){.mtrm-fog{animation:none!important}.mtrm-lightning{display:none}}

/* v1.0.4: control independent per a la demostració de rosada */
.mtrm-dew-controls{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:end;gap:12px;padding:11px;border:1px solid #b1d3dd;border-radius:10px;background:#eaf7fa}
.mtrm-dew-controls label{display:grid;gap:5px;flex:1 1 220px}
.mtrm-dew-controls select{padding:8px;background:#fff;border:1px solid #acc5d2;border-radius:7px}
.mtrm-dew-controls button{padding:9px 12px;background:#0d6281;color:#fff;border:0;border-radius:8px;cursor:pointer;font-weight:700}

/* v1.0.5: format de capçalera, sense targeta blanca */
.mtrm--hero{background:transparent!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important}
.mtrm--hero .mtrm-hero-label{color:#b9d5e3;font:700 10px/1.5 system-ui,sans-serif;letter-spacing:.13em;text-transform:uppercase;margin:0 0 5px 3px}
.mtrm--hero .mtrm-stage{width:100%}
.mtrm--hero .mtrm-test{box-shadow:0 5px 18px #0003}

/* v1.0.10 — Fons blanc de dia, negre de nit, transició pels crepuscles */
.mtrm--strip { background:transparent!important; padding:0!important; border:0!important; border-radius:0!important; box-shadow:none!important; }
.mtrm--strip .mtrm-hero-label { font:700 10px/1.4 system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase; }
.mtrm--strip .mtrm-stage { border-color:rgba(53,79,99,.16); box-shadow:inset 0 0 7px rgba(31,52,65,.08); transition:background-color 1s linear; }
.mtrm--strip .mtrm-horizon { opacity:.22; }
.mtrm--strip .mtrm-moving::before { display:none; }
.mtrm--strip .mtrm-digits { filter: drop-shadow(0 0 1px rgba(5,23,35,.45)) drop-shadow(0 0 4px var(--rm-color)); }
.mtrm--strip .mtrm-stars { transition:opacity 1s linear; }


/* v1.0.11 — contrast diürn millorat, segments més gruixuts */
.mtrm--strip .mtrm-digits .rm-segment{stroke-width:1.35}
.mtrm--strip .mtrm-digits .rm-off{opacity:.028}

/* v1.0.13 — segons amb segments una mica mes definits, nomes dins la franja */
.mtrm--strip .mtrm-digits [data-rm-seconds] .rm-segment{stroke-width:2.1}


/* v1.0.14 — boira més natural: vel translúcid, sense taques fosques */
.mtrm-fog{
 z-index:3;
 opacity:var(--rm-fog);
 background:
  linear-gradient(90deg,
   rgba(255,255,255,0) 0%,
   rgba(246,250,253,calc(.18 + var(--rm-fog-soft) * .18)) 18%,
   rgba(236,244,249,calc(.24 + var(--rm-fog-soft) * .22)) 34%,
   rgba(248,251,253,calc(.16 + var(--rm-fog-soft) * .16)) 52%,
   rgba(233,242,248,calc(.20 + var(--rm-fog-soft) * .18)) 70%,
   rgba(255,255,255,0) 100%),
  linear-gradient(103deg,
   rgba(255,255,255,0) 0%,
   rgba(243,248,252,calc(.12 + var(--rm-fog-soft) * .16)) 28%,
   rgba(229,239,246,calc(.20 + var(--rm-fog-soft) * .18)) 47%,
   rgba(246,250,253,calc(.10 + var(--rm-fog-soft) * .12)) 64%,
   rgba(255,255,255,0) 100%),
  radial-gradient(ellipse at 22% 62%,rgba(251,253,255,calc(.12 + var(--rm-fog-soft) * .18)),rgba(255,255,255,0) 62%),
  radial-gradient(ellipse at 74% 38%,rgba(241,247,251,calc(.10 + var(--rm-fog-soft) * .16)),rgba(255,255,255,0) 58%);
 background-size:132% 100%,126% 100%,110% 90%,118% 92%;
 background-position:-18% 0, 108% 0, -8% 0, 104% 0;
 filter:blur(14px);
 mix-blend-mode:screen;
 animation:mtrm-mist-14 18s ease-in-out infinite alternate;
 pointer-events:none;
}
.mtrm[data-rm-fog="true"] .mtrm-stage{box-shadow:inset 0 0 16px rgba(176,197,210,.20),0 12px 25px rgba(11,34,51,.10)}
.mtrm[data-rm-fog="true"] .mtrm-digits{opacity:.985}
@keyframes mtrm-mist-14{
 from{background-position:-20px 0,22px 0,-12px 3px,8px -5px;transform:translate3d(-5px,0,0)}
 50%{background-position:12px -3px,-8px 3px,18px 1px,-14px 4px;transform:translate3d(2px,-1px,0)}
 to{background-position:28px -4px,-28px 4px,12px -4px,-18px 6px;transform:translate3d(7px,0,0)}
}
@media(prefers-reduced-motion:reduce){.mtrm-fog{animation:none!important;transform:none!important}}


/* v1.0.15 — boira diürna: dígits lleugerament entelats */
.mtrm-digits{transition:color 2s,filter 2s,opacity 2s}
.mtrm[data-rm-fog="true"] .mtrm-digits{will-change:filter,opacity}