/* MagicMFD V10 — stable stage, automatic camera presets and transparent WebGL. */
#operation{height:var(--viewport);min-height:var(--viewport);overflow:hidden;isolation:isolate;scroll-snap-align:start;}
#operation .operation-layout{
  width:100%;height:100%;display:grid;grid-template-columns:minmax(0,60fr) minmax(0,40fr);
  align-items:stretch;gap:clamp(8px,2vw,30px);
  padding: max(83px,calc(env(safe-area-inset-top) + 76px)) clamp(14px,3vw,60px)
           max(16px,env(safe-area-inset-bottom,0px));
}
#operation .operation-visual{position:relative;min-width:0;min-height:0;overflow:hidden;isolation:isolate;}
#operation #journey-cluster{display:block;width:100%;height:100%;min-width:0;min-height:0;pointer-events:none;}
#operation #journey-copy{
  position:relative;z-index:2;min-width:0;min-height:0;width:100%;max-width:650px;
  display:flex;flex-direction:column;align-self:center;justify-self:center;gap:clamp(9px,1.4vh,18px);
  color:#f4f7ff;text-align:left;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;max-height:100%;padding:5px;
}
#operation .startup-intro-box,#operation .startup-controls-box,
#operation .functions-glass-panel,#operation #journey-copy.mfd-page-active {
  position:relative;isolation:isolate;width:100%;flex-shrink:0;overflow:hidden;
  padding:clamp(14px,1.8vw,28px);border:1px solid rgba(223,239,255,.22);border-radius:var(--glass-radius);
  background:rgba(25,27,32,.96);color:#f4f7ff;
}
#operation .startup-intro-box::before,#operation .startup-controls-box::before,
#operation .functions-glass-panel::before,#operation #journey-copy.mfd-page-active::before {
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:url('../assets/textures/box_background.png') center/cover no-repeat;opacity:.14;
}
#operation .startup-intro-box h2,#operation .functions-heading{
  color:#fff;margin:0 0 12px;font-size:clamp(24px,2.8vw,46px);letter-spacing:-.045em;line-height:1.08;font-weight:780;
}
#operation .startup-intro-box p,#operation .cluster-key-instruction{font-size:clamp(15px,1.35vw,21px);line-height:1.5;margin:10px 0 0;color:#e6ebf4;}
#operation .startup-controls-box .cluster-key-instruction{margin:0;}
#operation .cluster-reveal-eyebrow{font-size:11px;letter-spacing:.15em;font-weight:700;color:#fad4db;margin-bottom:10px;}
#operation .key-slider{--thumb-x:0px;touch-action:none;user-select:none;position:relative;cursor:grab;display:block;
  width:min(100%,325px);height:56px;border:1px solid rgba(231,241,255,.42);border-radius:99px;background:rgba(12,26,55,.76);margin:16px auto 0;overflow:hidden;}
#operation .key-slider:active{cursor:grabbing;}
#operation .key-slider::before{content:"";position:absolute;left:2px;top:2px;width:calc(var(--thumb-x) + 50px);height:50px;background:linear-gradient(100deg,#cd3b50,#eedc17);border-radius:99px;}
#operation .key-slider-label{position:absolute;inset:0;display:grid;place-items:center;font-weight:700;pointer-events:none;}
#operation .key-slider-handle{position:absolute;left:2px;top:3px;width:48px;height:48px;display:grid;place-items:center;
  background:#f7f8fc;color:#162a40;font-size:21px;font-weight:800;border-radius:50%;transform:translateX(var(--thumb-x));pointer-events:none;}
#operation .key-slider.is-started{opacity:.35;pointer-events:none;}
#operation .functions-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(7px,.9vw,13px);width:100%;}
#operation .function-option{min-width:0;min-height:clamp(40px,5vh,60px);padding:10px 12px;display:flex;justify-content:space-between;align-items:center;gap:4px;
  font:650 clamp(12px,1.05vw,17px)/1.2 system-ui,sans-serif;color:#edf1fa;text-align:left;cursor:pointer;
  background:rgba(34,48,66,.85);border:1px solid rgba(224,235,255,.23);border-radius:11px;}
#operation .function-option:hover,#operation .function-option:focus-visible{background:rgba(71,85,105,.9);}
#operation .function-option>span:first-child{min-width:0;overflow-wrap:break-word;}
#operation .function-arrow{color:#fff;flex:0 0 auto;font-size:22px;}
#operation #journey-copy.mfd-page-active{padding:clamp(14px,2vw,29px);}
#operation .mfd-feature-header{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:start;gap:6px;}
#operation .mfd-feature-header .functions-heading{margin:0;text-align:center;font-size:clamp(20px,2.1vw,37px);overflow-wrap:anywhere;}
#operation .mfd-page-arrow{min-height:38px;border-radius:50%;border:1px solid rgba(222,234,255,.32);background:#26354a;color:#fff;font-size:25px;cursor:pointer;}
#operation .mfd-page-arrow:disabled{opacity:.35;cursor:default;}
#operation .mfd-page-count{text-align:center;margin:8px 0;color:#c4d2e6;font-size:13px;font-weight:700;}
#operation .mfd-feature-description{color:#e3e9f4;font-size:clamp(14px,1.2vw,18px);line-height:1.5;margin:12px 0 0;overflow-wrap:break-word;}
#operation .mfd-back,#operation .diagnostics-read{border:1px solid rgba(220,232,255,.32);background:rgba(32,51,74,.87);color:#fff;
  cursor:pointer;padding:9px 13px;min-height:36px;border-radius:24px;font:650 13px system-ui,sans-serif;}
#operation .mfd-back{margin-bottom:12px;}#operation .diagnostics-read{margin-top:12px;}
#operation .operation-canvas-error{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:#fff;padding:25px;}
#operation .operation-canvas-error[hidden]{display:none;}
@media (orientation:portrait){
  #operation .operation-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(210px,44fr) minmax(0,56fr);
    padding:calc(max(9px,env(safe-area-inset-top,0px)) + 60px) max(12px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px));gap:5px;}
  #operation .operation-visual{min-height:0;}
  #operation #journey-copy{width:100%;max-width:none;align-self:stretch;justify-self:stretch;justify-content:start;max-height:100%;padding:4px 2px;gap:8px;}
  #operation .startup-intro-box,#operation .startup-controls-box,#operation .functions-glass-panel,#operation #journey-copy.mfd-page-active{padding:clamp(12px,3.4vw,20px);border-radius:15px;}
  #operation .startup-intro-box h2,#operation .functions-heading{font-size:clamp(22px,5.7vw,31px);}
  #operation .startup-intro-box p,#operation .cluster-key-instruction{font-size:clamp(13px,3.7vw,17px);line-height:1.4;}
  #operation .functions-list{gap:7px;}
  #operation .function-option{font-size:clamp(12px,3.15vw,15px);min-height:42px;padding:9px 8px;}
  #operation .mfd-feature-header .functions-heading{font-size:clamp(19px,5.2vw,28px);}
  #operation .mfd-feature-description{font-size:clamp(14px,3.7vw,18px);line-height:1.46;}
}
@media (orientation:landscape) and (max-height:530px){
  #operation .operation-layout{padding-top:max(60px,calc(env(safe-area-inset-top,0px) + 51px));padding-bottom:7px;}
  #operation .startup-intro-box h2,#operation .functions-heading{font-size:clamp(18px,3vw,28px);}
  #operation .startup-intro-box p,#operation .cluster-key-instruction,#operation .mfd-feature-description{font-size:clamp(11px,1.6vw,14px);line-height:1.38;}
  #operation .startup-intro-box,#operation .startup-controls-box,#operation .functions-glass-panel,#operation #journey-copy.mfd-page-active{padding:11px;}
  #operation .function-option{min-height:32px;padding:6px 8px;font-size:clamp(10px,1.35vw,13px);}
  #operation .mfd-back,#operation .diagnostics-read{min-height:27px;padding:5px 9px;}
  #operation .mfd-feature-header .functions-heading{font-size:clamp(16px,2.3vw,26px);}
  #operation .mfd-page-arrow{min-height:29px;}
  #operation .functions-list{gap:5px;}
}
@media (orientation:portrait) and (max-height:690px){
  #operation .operation-layout{grid-template-rows:minmax(160px,41fr) minmax(0,59fr);}
}

/* V9: render across the whole Operation section, not a cropped left-column canvas. */
#operation .operation-layout{position:relative;isolation:isolate;grid-template-columns:minmax(0,60fr) minmax(0,40fr);}
#operation .operation-stage-space{grid-column:1;grid-row:1;min-height:0;min-width:0;pointer-events:none;}
#operation .operation-visual{position:absolute;inset:0;z-index:0;overflow:visible;pointer-events:none;isolation:auto;}
#operation #journey-cluster{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
#operation #journey-copy{grid-column:2;grid-row:1;z-index:3;min-width:0;align-self:center;justify-self:center;max-height:100%;overflow-y:auto;overflow-x:hidden;transition:none;will-change:transform,opacity;}
#operation .operation-canvas-error{z-index:1;background:transparent;}
/* A brief full-screen ignition animation: the content glides away while the cluster moves to centre. */
#operation.is-igniting #journey-copy{transform:translate3d(calc(var(--ignition-focus,0) * 120vw),0,0);opacity:calc(1 - var(--ignition-focus,0));pointer-events:none;}
/* The established floral material stays; controls get a consistent, section-specific hierarchy. */
#operation .startup-intro-box,#operation .startup-controls-box,#operation .functions-glass-panel,
#operation #journey-copy.mfd-page-active{border-color:rgba(255,220,225,.19);background:rgba(25,25,29,.94);}
#operation .functions-heading{margin:0 0 clamp(12px,1.6vw,20px);}
#operation .function-option{background:rgba(54,55,61,.74);border:1px solid rgba(247,237,240,.21);border-radius:11px;color:#f6f4f5;transition:background .15s,border-color .15s;}
#operation .function-option:hover,#operation .function-option:focus-visible{background:rgba(121,46,65,.7);border-color:rgba(253,140,163,.68);}
#operation .function-arrow{font-size:20px;color:#ffb8c6;}
#operation #journey-copy.mfd-page-active{display:flex;flex-direction:column;gap:0;justify-content:flex-start;align-items:stretch;}
#operation .mfd-back{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;width:auto;max-width:100%;min-height:36px;margin:0 0 clamp(16px,1.8vw,24px);padding:7px 14px 7px 11px;
  font-size:12px;font-weight:700;text-align:left;color:#f7e8eb;background:rgba(59,58,63,.67);border:1px solid rgba(248,227,233,.27);border-radius:10px;}
#operation .mfd-back::before{content:'‹';font-size:22px;font-weight:500;line-height:.8;}
#operation .mfd-back:hover,#operation .mfd-back:focus-visible{background:rgba(124,49,70,.75);}
#operation .diagnostics-read{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin:clamp(18px,2vw,27px) 0 0;min-height:43px;
 background:linear-gradient(115deg,rgba(159,43,69,.95),rgba(108,36,61,.95));border:1px solid rgba(255,150,173,.6);border-radius:11px;
 color:#fff;font-size:14px;font-weight:750;box-shadow:inset 0 1px 0 rgba(255,255,255,.08);}
#operation .diagnostics-read:hover,#operation .diagnostics-read:focus-visible{background:linear-gradient(115deg,#bf3d60,#8f2948);}
#operation .mfd-feature-header{grid-template-columns:40px minmax(0,1fr) 40px;align-items:center;gap:8px;}
#operation .mfd-feature-header .functions-heading{margin:0;line-height:1.13;}
#operation .mfd-page-arrow{min-height:40px;width:40px;border-radius:12px;background:rgba(66,56,65,.78);border-color:rgba(252,223,233,.28);color:#fff;}
#operation .mfd-page-arrow:not(:disabled):hover{background:rgba(147,48,74,.85);}
#operation .mfd-page-count{align-self:center;margin:9px 0 0;padding:4px 11px;min-width:52px;border-radius:40px;
 background:rgba(102,55,69,.38);color:#f5d8df;font-size:12px;font-weight:700;}
#operation .mfd-feature-description{margin:clamp(14px,2.2vw,26px) 0 0;line-height:1.55;}
@media (orientation:portrait){
  #operation .operation-layout{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:clamp(12px,calc(var(--viewport) * .02),20px);
    padding-top:calc(max(9px,env(safe-area-inset-top,0px)) + 78px);
    padding-bottom:max(14px,env(safe-area-inset-bottom,0px));}
  #operation .operation-stage-space{display:block;flex:0 0 clamp(215px,calc(var(--viewport) * .43),365px);min-height:0;max-height:none;width:100%;}
  #operation #journey-copy{grid-column:auto;grid-row:auto;position:relative;flex:0 1 auto;align-self:stretch;justify-self:auto;max-width:none;
    max-height:min(calc(var(--viewport) * .51),calc(var(--viewport) - 260px));min-height:0;width:100%;overflow-y:auto;overscroll-behavior:contain;
    padding:0 2px;}
  #operation #journey-copy.mfd-page-active{padding:clamp(15px,4vw,22px);}
  #operation .functions-glass-panel{padding:clamp(13px,3.4vw,19px);}
  #operation .mfd-back{margin-bottom:17px;}
  #operation .mfd-feature-description{margin-top:14px;line-height:1.48;}
  #operation .mfd-feature-header .functions-heading{font-size:clamp(18px,5.3vw,29px);}
}
@media (orientation:portrait) and (max-height:690px){
  #operation .operation-stage-space{flex-basis:clamp(170px,calc(var(--viewport) * .40),250px);min-height:0;}
  #operation #journey-copy{max-height:min(calc(var(--viewport) * .51),calc(var(--viewport) - 218px));}
}
@media (orientation:landscape) and (max-height:530px){
  #operation .operation-layout{grid-template-columns:minmax(0,58fr) minmax(0,42fr);}
  #operation .mfd-back{margin-bottom:10px;min-height:30px;}
  #operation .mfd-feature-description{margin-top:8px;}
  #operation .diagnostics-read{margin-top:12px;min-height:35px;}
}

/* Keep a failure message within the visual stage, never across the content panel. */
#operation .operation-canvas-error{inset:24% auto auto 5%;width:52%;max-width:600px;min-height:60px;pointer-events:none;font-size:14px;}
@media (orientation:portrait){#operation .operation-canvas-error{top:28%;left:9%;width:82%;max-width:none;font-size:13px;}}

/* Fixed portrait stage anchor: page-description length never changes the camera crop. */
@media (orientation:portrait){#operation .operation-stage-space{align-self:stretch;} #operation #journey-copy{flex-shrink:1;}}

/* V13: visible Operation inner stage adapts with dvh; the section itself
   stays on the stable lvh document track (see site.css). */
#operation { height:var(--viewport); min-height:var(--viewport); overflow-anchor:none; }
#operation .operation-layout { height:100%; }
@media (pointer:coarse), (hover:none) {
  #operation { height:var(--scroll-viewport); min-height:var(--scroll-viewport); }
  #operation .operation-layout { height:var(--viewport); }
}
@media (pointer:coarse) {
  #operation #journey-copy { -webkit-overflow-scrolling:touch; }
}

/* V14 — Portrait overview is one centered composition instead of being
   pinned to the top of a tall screen. The detail stage keeps its own fixed
   camera anchor, independent from the length of a description. */
@media (orientation:portrait) {
  #operation .operation-layout:has(.startup-intro-box),
  #operation .operation-layout:has(.functions-glass-panel) {
    justify-content:center;
  }
  #operation .operation-layout:has(.startup-intro-box) .operation-stage-space,
  #operation .operation-layout:has(.functions-glass-panel) .operation-stage-space {
    flex-shrink:1;
  }
  #operation .operation-layout:has(.startup-intro-box) #journey-copy,
  #operation .operation-layout:has(.functions-glass-panel) #journey-copy {
    flex:0 0 auto;
    align-self:stretch;
    max-height:min(52%,calc(var(--viewport) - 215px));
  }
  /* A stable panel is allowed to scroll internally, not grow on each page. */
  #operation #journey-copy.mfd-page-active[data-stable-group] {
    flex:0 1 auto;
    min-height:0;
    overflow-y:auto;
  }
}
#operation #journey-copy[data-stable-group] {
  background-position:center center;
  background-size:cover;
  overflow-x:hidden;
}
#operation #journey-copy[data-stable-group] .mfd-feature-header,
#operation #journey-copy[data-stable-group] .mfd-page-count,
#operation #journey-copy[data-stable-group] .mfd-back {
  flex-shrink:0;
}
#operation #journey-copy[data-stable-group] .mfd-feature-description {
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
}

/* V15 — portrait Operation: anchor the panel to the visible bottom.
   The cluster's logical stage sits immediately above it. The panel keeps
   its V14 function-specific measured height; paging cannot move the camera.
   This applies only to portrait; landscape composition is unchanged. */
@media (orientation:portrait) {
  #operation .operation-layout,
  #operation .operation-layout:has(.startup-intro-box),
  #operation .operation-layout:has(.functions-glass-panel) {
    justify-content:flex-end;
    padding-bottom:max(20px, env(safe-area-inset-bottom,0px));
  }
  #operation .operation-stage-space {
    flex-shrink:1;
  }
  #operation #journey-copy {
    flex-shrink:0;
    max-height:min(52%,calc(var(--viewport) - 235px));
  }
  #operation #journey-copy.mfd-page-active[data-stable-group] {
    flex:0 1 auto;
    min-height:0;
  }
}
/* Safari's double-tap zoom must not be triggered by fast paging.
   Restrict this to actual controls: preserve document pinch-to-zoom. */
#operation button,
#operation .function-option,
#operation [role="button"],
#operation .mfd-back,
#operation .diagnostics-read {
  touch-action: manipulation;
}
/* Preserve drag handling on the dedicated ignition slider. */
#operation .key-slider { touch-action:none; }


/* V21 — approved two-box carousel: title alone, description and all controls together.
   Preserve the exact floral surfaces from the Device cards; never add an outer box. */
#operation .functions-carousel {
  display:flex;
  flex-direction:column;
  width:100%;
  gap:clamp(9px,1vw,15px);
  min-height:0;
  background:transparent;
  border:0;
  padding:0;
  box-shadow:none;
  overflow:visible;
}
#operation .function-title-box,
#operation .function-description-box {
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  width:100%;
  min-width:0;
  flex:0 0 auto;
  border:1px solid var(--glass-stroke);
  border-radius:var(--glass-radius);
  background:var(--glass-bg);
  color:#fff;
  overflow:hidden;
  padding:clamp(16px,1.7vw,30px);
}
#operation .function-title-box::before,
#operation .function-description-box::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  background:url('../assets/textures/box_background.png') center / 1100px auto no-repeat;
  filter:brightness(0) saturate(100%) invert(40%);
  opacity:.15;
}
#operation .function-carousel-title {
  color:#fff;
  margin:0;
  font-size:clamp(25px,3.45vw,57px);
  font-weight:770;
  letter-spacing:-.05em;
  line-height:1.08;
  text-wrap:balance;
  overflow-wrap:break-word;
}
#operation .function-description-box {
  gap:clamp(13px,1.4vw,21px);
}
#operation .function-carousel-description {
  margin:0;
  padding:0;
  width:100%;
  min-height:3.0em;
  max-width:none;
  color:#e1e9f6;
  font-size:clamp(14px,1.49vw,23px);
  font-weight:430;
  line-height:1.47;
}
/* Two equal, medium-sized paging buttons, with no numbered indicator. */
#operation .function-nav-cluster {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:center;
  gap:clamp(10px,1.1vw,17px);
  width:100%;
}
#operation .function-nav-arrow {
  display:grid;
  place-items:center;
  width:100%;
  min-width:0;
  min-height:clamp(45px,4.5vh,51px);
  padding:11px 16px;
  border:1px solid rgba(241,230,235,.28);
  border-radius:12px;
  background:rgba(54,50,58,.87);
  color:#f7edf0;
  font:750 clamp(13px,1.03vw,16px)/1.2 system-ui,sans-serif;
  text-align:center;
  cursor:pointer;
  transition:background .16s ease,border-color .16s ease;
}
#operation .function-nav-arrow:hover,
#operation .function-nav-arrow:focus-visible {
  background:rgba(102,49,65,.92);
  border-color:rgba(249,170,186,.55);
}
/* The sole emphasized action stays inside the same description card. */
#operation .function-explore-button {
  display:block;
  width:100%;
  min-width:0;
  min-height:clamp(46px,5vh,54px);
  padding:12px 20px;
  margin:0;
  border:1px solid rgba(255,158,179,.64);
  border-radius:12px;
  background:linear-gradient(120deg,rgba(157,47,75,.97),rgba(123,37,66,.97));
  color:#fff;
  font:800 clamp(14px,1.08vw,17px)/1.2 system-ui,sans-serif;
  letter-spacing:.01em;
  text-align:center;
  cursor:pointer;
  transition:filter .17s ease;
}
#operation .function-explore-button:hover,
#operation .function-explore-button:focus-visible { filter:brightness(1.11); }

@media (orientation:portrait) {
  #operation .functions-carousel {gap:clamp(8px,1vh,12px); padding:0;}
  #operation .function-title-box,
  #operation .function-description-box {
    padding:clamp(13px,3.4vw,23px);
    border-radius:clamp(13px,3.2vw,22px);
  }
  #operation .function-carousel-title {font-size:clamp(26px,7.3vw,39px);line-height:1.07;}
  #operation .function-description-box {gap:clamp(10px,1.35vh,16px);}
  #operation .function-carousel-description {
    font-size:clamp(13px,3.65vw,19px);
    line-height:1.43;
    min-height:3.0em;
  }
  #operation .function-nav-arrow {min-height:44px;padding:10px 12px;font-size:14px;}
  #operation .function-explore-button {min-height:47px;font-size:14px;}
}
@media (orientation:landscape) and (max-height:530px) {
  #operation .functions-carousel {gap:7px;}
  #operation .function-title-box,
  #operation .function-description-box {padding:10px 14px;border-radius:12px;}
  #operation .function-description-box {gap:9px;}
  #operation .function-carousel-title {font-size:clamp(18px,2.5vw,30px);}
  #operation .function-carousel-description {font-size:clamp(11px,1.5vw,15px);line-height:1.36;min-height:0;}
  #operation .function-nav-arrow {min-height:35px;padding:7px 10px;font-size:12px;}
  #operation .function-explore-button {min-height:37px;padding:8px 12px;font-size:12px;}
}
@media (prefers-reduced-motion:reduce) {
  #operation .function-nav-arrow,
  #operation .function-explore-button {transition:none;}
}

/* V23 — Gentle rotate suggestion in the unused upper portrait space.
   Keep the V21 two-card carousel under the actual 3D cluster. The hint appears before ignition as well as during function selection
   in PORTRAIT phone view. It is not a pop-up or a pointer-intercepting overlay. */
#operation .operation-rotate-hint { display:none; }
@media (orientation:portrait) and (max-width:700px) {
  #operation .operation-layout:has(.functions-carousel:not(.diagnostics-carousel):not(.detail-cards), .startup-intro-box) .operation-rotate-hint {
    position:absolute;
    top:clamp(105px,calc(var(--viewport) * .15),157px);
    left:50%;
    z-index:3;
    transform:translateX(-50%);
    width:max-content;
    max-width:calc(100% - 38px);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:11px;
    padding:11px 15px;
    border:1px solid rgba(250,214,223,.18);
    border-radius:15px;
    background:rgba(26,26,30,.73);
    color:#f6e9ed;
    box-shadow:0 6px 18px rgba(33,10,20,.09);
    pointer-events:none;
  }
  #operation .operation-rotate-hint-icon {
    display:block;
    flex:0 0 36px;
    width:36px;
    height:36px;
    stroke:#f9dee5;
    stroke-width:1.8;
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  #operation .operation-rotate-hint-copy {
    display:flex;
    flex-direction:column;
    gap:3px;
    min-width:0;
  }
  #operation .operation-rotate-hint-label {
    display:block;
    font:680 clamp(12px,3.2vw,14px)/1.3 system-ui,sans-serif;
    letter-spacing:-.01em;
  }
  #operation .operation-rotate-hint-compact { display:none; }
  #operation .operation-rotate-hint-subtitle {
    display:block;
    font:450 clamp(10px,2.8vw,12px)/1.25 system-ui,sans-serif;
    color:#e2bcc7;
  }
}
/* Short screens: keep hint clear of the gauge and header. */
@media (orientation:portrait) and (max-width:700px) and (max-height:700px) {
  #operation .operation-layout:has(.functions-carousel:not(.diagnostics-carousel):not(.detail-cards), .startup-intro-box) .operation-rotate-hint {
    top:clamp(81px,calc(var(--viewport) * .125),94px);
    padding:8px 11px;
    gap:8px;
  }
  #operation .operation-rotate-hint-icon {
    width:29px;
    height:29px;
    flex-basis:29px;
  }
}

/* Ultra-compact portrait: keep a one-line rotation cue clear of the cluster. */
@media (orientation:portrait) and (max-width:700px) and (max-height:620px) {
  #operation .operation-layout:has(.functions-carousel:not(.diagnostics-carousel):not(.detail-cards), .startup-intro-box) .operation-rotate-hint {
    top:clamp(75px,calc(var(--viewport) * .143),86px);
    padding:6px 9px;
    border-radius:12px;
  }
  #operation .operation-rotate-hint-icon { width:21px;height:21px;flex-basis:21px; }
  #operation .operation-rotate-hint-label,
  #operation .operation-rotate-hint-subtitle { display:none; }
  #operation .operation-rotate-hint-compact {
    display:block;
    font:650 12px/1.3 system-ui,sans-serif;
  }
}

/* V24: Diagnostics actions reuse the exact Functions two-card carousel,
   without the opaque container intended for ECU detail pages. */
#operation #journey-copy.diagnostics-carousel-active {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  gap:clamp(8px,1.15vw,13px);
  padding:0 2px;
  background:transparent;
  border:0;
  box-shadow:none;
  height:auto;
}
#operation #journey-copy.diagnostics-carousel-active > .mfd-back {
  flex-shrink:0;
  margin:0;
}
#operation .diagnostics-carousel { width:100%; }
@media (orientation:portrait) {
  #operation #journey-copy.diagnostics-carousel-active {
    justify-content:flex-start;
    overflow-y:auto;
    max-height:min(56%,calc(var(--viewport) - 205px));
  }
}
@media (orientation:landscape) and (max-height:530px) {
  #operation #journey-copy.diagnostics-carousel-active {gap:7px;}
  #operation #journey-copy.diagnostics-carousel-active > .mfd-back {min-height:28px;}
}

/* V25 — all detail views now use two independent floral cards (no outer
   opaque panel). Their heights follow each page's content, not the longest
   variant. The navigation and all action buttons live in the lower card. */
#operation #journey-copy.mfd-page-active.detail-cards-active {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:stretch;
  height:auto !important;
  min-height:0;
  max-height:100%;
  gap:0;
  padding:5px 2px;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow-x:hidden;
  overflow-y:auto;
}
#operation #journey-copy.mfd-page-active.detail-cards-active::before { display:none; }
#operation .detail-cards { min-height:0; flex:0 0 auto; }
#operation .detail-cards .function-carousel-description {
  min-height:0;
  max-height:none;
  overflow:visible;
  line-height:1.47;
}
#operation .function-carousel-description { min-height:0; }
#operation .detail-cards .detail-description p { margin:0; }
#operation .detail-cards .detail-description p + p { margin-top:.7em; }
#operation .detail-cards .function-nav-arrow:disabled {
  opacity:.37;
  cursor:default;
}
#operation .detail-cards .function-nav-arrow:disabled:hover {
  background:rgba(54,50,58,.87);
  border-color:rgba(241,230,235,.28);
}
#operation .detail-back-button {
  width:100%;
  min-height:clamp(44px,4.5vh,51px);
}
#operation .detail-cards .detail-link { text-decoration:none;display:grid;place-items:center; }
#operation .detail-cards .ecu-connecting-progress { width:100%; }
#operation .detail-cards .ecu-connecting-status { text-align:center; }
#operation .detail-cards .function-title-box,
#operation .detail-cards .function-description-box { height:auto; min-height:0; }
#operation .diagnostics-carousel .detail-back-button {
  width:100%;
}
@media (orientation:portrait) {
  #operation #journey-copy.mfd-page-active.detail-cards-active {
    flex:0 1 auto;
    justify-content:flex-start;
    max-height:min(61%,calc(var(--viewport) - 200px));
    min-height:0;
  }
  #operation .detail-cards .function-carousel-description { min-height:0; }
}
@media (orientation:landscape) and (max-height:530px) {
  #operation #journey-copy.mfd-page-active.detail-cards-active {padding:2px;}
  #operation .detail-back-button {min-height:35px;}
}

/* V26: panel/card heights remain natural. The transparent WebGL composition
   (eye/target, screen centre and stage scaling) eases on page reflow in JS. */