/* Three matte discs. HTML carries the meaning; SVG only shows the clockwise route. */
figure.cycle-diagram.remma-cycle3d{
  --ct-navy:#183e55;
  --ct-blue:#087fad;
  --ct-paper:#fbfaf6;
  --ct-depth:10px;
  width:100%;
  max-width:520px;
  min-width:0;
  margin:0 auto;
  padding:0;
  border:0;
  background:transparent;
  color:var(--ct-navy);
  text-align:center;
  overflow:visible;
  container:remma-cycle3d / inline-size;
}
figure.remma-cycle3d *{box-sizing:border-box}
figure.remma-cycle3d .ct-stage{position:relative;isolation:isolate;width:100%;aspect-ratio:600/520}
figure.remma-cycle3d .ct-orbit{display:block;position:absolute;inset:0;z-index:0;width:100%;height:100%;overflow:visible;fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
figure.remma-cycle3d .ct-orbit-depth{stroke:#c4c9c5;stroke-width:16;transform:translateY(5px);opacity:.75}
figure.remma-cycle3d .ct-orbit-body{stroke:#e2e6dd;stroke-width:14}
figure.remma-cycle3d .ct-orbit-edge{stroke:#fdfdf8;stroke-width:6;transform:translateY(-1px)}
figure.remma-cycle3d .ct-orbit-light{
  stroke:var(--ct-blue);
  stroke-width:7;
  stroke-dasharray:54 946;
  stroke-dashoffset:0;
  filter:drop-shadow(0 0 3px #087fad35);
  animation:none;
  opacity:0;
}
.motion-user-enabled figure.remma-cycle3d .ct-orbit-light,
.motion-on figure.remma-cycle3d .ct-orbit-light{animation:remma-cycle3d-orbit 5.6s linear infinite;opacity:1}
figure.remma-cycle3d .ct-arrow-depth{stroke:#bdc8c7;stroke-width:12;transform:translateY(4px)}
figure.remma-cycle3d .ct-arrow{stroke:var(--ct-blue);stroke-width:7;transition:stroke-width .2s ease}
.motion-user-enabled figure.remma-cycle3d .ct-arrow.ct-pulse{animation:remma-cycle3d-pulse .5s ease}
figure.cycle-diagram.remma-cycle3d .ct-nodes{position:absolute;inset:0;display:block;list-style:none;margin:0;padding:0!important;border:0}
figure.cycle-diagram.remma-cycle3d .cycle-node,
figure.cycle-diagram.remma-cycle3d .cycle-node+.cycle-node{
  --ct-face-light:#355d6f;
  --ct-face:#183e55;
  --ct-face-low:#122e40;
  --ct-rim:#102b3a;
  --ct-text:#fbfaf6;
  --ct-edge:#fbfaf631;
  position:absolute;
  top:27%;
  left:50%;
  z-index:1;
  display:block;
  width:40%;
  aspect-ratio:1;
  min-width:0;
  margin:0;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--ct-text);
  transform:translate(-50%,-50%);
}
figure.cycle-diagram.remma-cycle3d .cycle-node::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:50%;
  background:var(--ct-rim);
  transform:translateY(var(--ct-depth));
  box-shadow:0 14px 22px -10px #183e554a,inset 0 -3px 3px #00000014;
  transition:box-shadow .32s ease;
}
figure.cycle-diagram.remma-cycle3d .cycle-node.ct-node--act{
  --ct-face-light:#347387;
  --ct-face:#087297;
  --ct-face-low:#0b4d68;
  --ct-rim:#07455b;
  left:77%;
  top:72%;
}
figure.cycle-diagram.remma-cycle3d .cycle-node.ct-node--review{
  --ct-face-light:#ffffff;
  --ct-face:#f1f0e6;
  --ct-face-low:#d8ded6;
  --ct-rim:#bec8c2;
  --ct-text:#183e55;
  --ct-edge:#ffffffa6;
  left:23%;
  top:72%;
}
figure.remma-cycle3d .ct-disc{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  padding:18px 10px;
  border:1px solid var(--ct-edge);
  border-radius:50%;
  background:radial-gradient(ellipse at 29% 14%,var(--ct-face-light),var(--ct-face) 48%,var(--ct-face-low));
  color:var(--ct-text);
  box-shadow:inset 0 2px 2px #ffffff2b,inset 0 -2px 3px #00000010;
  transform:translateY(0);
  transition:transform .32s ease,box-shadow .32s ease;
}
figure.remma-cycle3d .ct-disc::before{
  content:'';
  position:absolute;
  inset:5px;
  border:1px solid var(--ct-edge);
  border-radius:50%;
  opacity:.48;
  pointer-events:none;
}
figure.cycle-diagram.remma-cycle3d .cycle-node.is-active .ct-disc{
  transform:translateY(-5px);
  box-shadow:inset 0 2px 2px #ffffff3d,inset 0 -2px 3px #00000010,0 0 0 2px #087fad82,0 0 0 5px #087fad0b;
}
figure.cycle-diagram.remma-cycle3d .cycle-node.is-active::before{box-shadow:0 17px 26px -9px #183e5552,inset 0 -3px 3px #00000014}
figure.remma-cycle3d .ct-key{display:flex;align-items:baseline;justify-content:center;gap:9px;flex:0 0 auto;margin:0;font:500 clamp(10px,2.2cqw,12px)/1.35 var(--sans,'Yu Gothic',Meiryo,sans-serif);letter-spacing:.12em;color:inherit;white-space:nowrap;overflow-wrap:normal;word-break:normal}
figure.remma-cycle3d .ct-number{font:400 1em/1.35 Georgia,serif;letter-spacing:0;white-space:nowrap;overflow-wrap:normal;word-break:normal}
figure.remma-cycle3d .ct-name{display:block;flex:0 0 auto;margin:5px 0 0;color:inherit;font:500 clamp(18px,5.15cqw,28px)/1.5 var(--serif,'Yu Mincho',serif);letter-spacing:.035em;white-space:nowrap;overflow-wrap:normal;word-break:normal}
figure.cycle-diagram.remma-cycle3d .ct-description{flex:0 0 auto;margin:7px 0 0;color:inherit;font:400 clamp(12px,2.65cqw,14px)/1.65 var(--sans,'Yu Gothic',Meiryo,sans-serif);letter-spacing:0}
figure.remma-cycle3d .ct-description>span{display:block;white-space:nowrap;overflow-wrap:normal;word-break:normal}
figure.cycle-diagram.remma-cycle3d .ct-caption{display:block;margin:8px 0 0;padding:0;border:0;color:var(--ct-navy);font:400 13px/1.8 var(--sans,'Yu Gothic',Meiryo,sans-serif);letter-spacing:.06em;text-align:center}
@keyframes remma-cycle3d-orbit{to{stroke-dashoffset:-1000}}
@keyframes remma-cycle3d-pulse{0%,100%{stroke-width:7}40%{stroke-width:10}}

/* The sticky homepage column has a fixed viewport height. Only the drawing scales. */
@media(min-width:761px){
  .approach-cycle figure.cycle-diagram.remma-cycle3d{max-width:min(520px,62svh)}
}
@container remma-cycle3d (max-width:380px){
  figure.cycle-diagram.remma-cycle3d .cycle-node,
  figure.cycle-diagram.remma-cycle3d .cycle-node+.cycle-node{--ct-depth:6px;width:44%}
  figure.remma-cycle3d .ct-disc{padding:9px 5px}
  figure.remma-cycle3d .ct-disc::before{inset:4px}
  figure.remma-cycle3d .ct-key{gap:7px;font-size:10px;line-height:1.25;letter-spacing:.08em}
  figure.remma-cycle3d .ct-name{font-size:clamp(18px,5.3cqw,21px);line-height:1.4;margin-top:3px;letter-spacing:0}
  figure.cycle-diagram.remma-cycle3d .ct-description{font-size:12px;line-height:1.55;margin-top:5px}
  figure.cycle-diagram.remma-cycle3d .ct-caption{font-size:12px;margin-top:12px}
  figure.cycle-diagram.remma-cycle3d .cycle-node.is-active .ct-disc{transform:translateY(-2px)}
}

/* Existing site controls and OS preference stop all new movement. Static arrows remain. */
.motion-off figure.remma-cycle3d .ct-orbit-light,
.motion-paused figure.remma-cycle3d .ct-orbit-light,
figure.remma-cycle3d.motion-paused .ct-orbit-light{animation:none!important;opacity:0}
.motion-off figure.remma-cycle3d .ct-disc,
.motion-off figure.remma-cycle3d .cycle-node::before,
.motion-paused figure.remma-cycle3d .ct-disc,
.motion-paused figure.remma-cycle3d .cycle-node::before,
figure.remma-cycle3d.motion-paused .ct-disc,
figure.remma-cycle3d.motion-paused .cycle-node::before{transition:none!important}
@media(prefers-reduced-motion:reduce){
  html:not(.motion-user-enabled) figure.remma-cycle3d .ct-orbit-light{animation:none!important;opacity:0}
  html:not(.motion-user-enabled) figure.remma-cycle3d .ct-disc,
  html:not(.motion-user-enabled) figure.remma-cycle3d .cycle-node::before{transition:none!important}
}
@media print{
  figure.cycle-diagram.remma-cycle3d,
  .approach-cycle figure.cycle-diagram.remma-cycle3d{width:100%;max-width:400px;break-inside:avoid;print-color-adjust:exact;-webkit-print-color-adjust:exact}
  figure.remma-cycle3d .ct-orbit-light{animation:none!important;display:none}
  figure.remma-cycle3d .ct-disc,
  figure.remma-cycle3d .cycle-node::before{transition:none!important;box-shadow:none!important}
  figure.cycle-diagram.remma-cycle3d .cycle-node.is-active .ct-disc{transform:none}
}

.motion-off figure.remma-cycle3d .ct-arrow,.motion-paused .ct-arrow,figure.motion-paused .ct-arrow{animation:none!important}