.security-route-figure { --route-ink:#00071f; --route-orange:#ff4b00; --route-scale:1; --route-window-scale:1; position:relative; margin:24px 0 0; color:var(--route-ink); background:transparent; container-type:inline-size; }
.security-route-figure *, .security-route-figure *::before, .security-route-figure *::after { box-sizing:border-box; }
.security-route-viewport { position:relative; height:calc(680px * var(--route-scale)); }
.security-route-stage { position:relative; width:960px; height:680px; transform:scale(var(--route-scale)); transform-origin:top left; font-family:var(--font-ja,'Noto Sans JP',sans-serif); }
.security-route-stage img { display:block; max-width:none; object-fit:contain; }
.route-actor { position:absolute; left:0; width:182px; height:232px; }
.route-actor--viewer { top:36px; }
.route-actor--editor { top:350px; }
.route-mascot { position:absolute; left:0; top:0; width:182px; height:182px; }
.route-actor-label { position:absolute; left:6px; top:190px; width:170px; min-height:42.5px; display:flex; justify-content:center; align-items:center; padding:10px 16px; border-radius:22px; background:var(--route-ink); color:#fff; font-size:15px; font-weight:700; line-height:22.5px; text-align:center; }
.route-lane { position:absolute; height:24px; }
.route-lane-geometry { position:relative; width:100%; height:24px; }
.route-lane-asset { position:absolute; pointer-events:none; }
.route-lane--view { left:196px; top:137px; width:330px; }
.route-lane--view .route-lane-asset { left:-196px; top:-137px; }
.route-lane--login { left:196px; top:450px; width:85px; }
.route-lane--login .route-lane-asset { left:-196px; top:-450px; }
.route-lane--operate { left:431px; top:450px; width:106px; }
.route-lane--operate .route-lane-asset { left:-431px; top:-450px; }
.route-lane-label { position:absolute; display:block; white-space:nowrap; font-size:13px; line-height:19.5px; font-weight:700; color:#5b6171; text-align:center; }
.route-lane--view .route-lane-label { left:15px; top:-29px; width:314px; font-size:17px; line-height:25.5px; color:var(--route-ink); }
.route-lane--login .route-lane-label { left:-2px; top:36px; width:100px; }
.route-lane--operate .route-lane-label { left:-4px; top:36px; width:112px; }
.route-packet-position { position:absolute; top:6px; width:12px; height:12px; }
.route-lane--view .route-packet-position { left:19px; }
.route-lane--login .route-packet-position { left:5px; }
.route-lane--operate .route-packet-position { left:0; }
.route-packet { display:block; width:12px; height:12px; }
.route-mobile-line { display:none; }
.route-window-shell { position:absolute; width:364px; }
.route-window-shell--public { left:542px; top:17px; height:274px; }
.route-window-shell--admin { left:542px; top:365px; height:255px; }
.route-window { position:relative; width:364px; transform-origin:top left; }
.route-window--public { height:274px; }
.route-window--admin { height:225px; }
.route-window-art { position:absolute; left:0; top:0; }
.route-window-shadow { position:absolute; }
.route-window--public .route-window-shadow { left:10px; top:248px; }
.route-window--admin .route-window-shadow { left:8px; top:200px; }
.route-window-title { position:absolute; color:#fff; font-size:22px; font-weight:700; line-height:33px; }
.route-window--public .route-window-title { top:32px; left:83px; width:236px; }
.route-window--admin .route-window-title { top:48px; left:27px; width:260px; }
.route-badge { position:absolute; display:grid; place-items:center; width:34px; height:34px; border-radius:17px; background:var(--route-orange); color:#fff; font:700 14px/21px var(--font-en,Teachers,sans-serif); transform-origin:center; }
.route-badge--admin { left:-4px; top:13px; }
.route-admin-caption { position:absolute; left:10px; top:231px; width:335px; font-size:16px; line-height:24px; text-align:center; font-weight:700; }
.route-auth { position:absolute; top:371px; left:248px; width:220px; height:227px; }
.route-shield { position:absolute; top:0; left:33px; width:148px; height:170px; }
.route-badge--auth { left:24px; top:2px; }
.route-auth-label { position:absolute; left:0; top:179px; width:220px; font-size:16px; font-weight:700; line-height:24px; text-align:center; }
.route-publish { position:absolute; left:650px; top:283px; width:310px; height:88px; }
.route-publish-geometry { position:absolute; inset:0; }
.route-publish-path { display:contents; }
.route-publish-asset { position:absolute; left:-650px; top:-283px; pointer-events:none; }
.route-badge--publish { left:0; top:24px; }
.route-confirmed { position:absolute; left:39px; top:60px; width:34px; height:28px; }
.route-publish-title { position:absolute; top:29px; left:94px; width:211px; font-size:17px; font-weight:700; line-height:25.5px; }
.route-publish-description { position:absolute; top:57px; left:94px; width:211px; font-size:13px; line-height:19.5px; color:#5b6171; }
.route-statement { position:absolute; left:0; top:644px; width:960px; font-size:22px; font-weight:700; line-height:33px; text-align:center; }
.route-controls { display:flex; justify-content:flex-end; gap:8px; padding-top:8px; }
.route-controls[hidden] { display:none; }
.route-controls button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:0 10px; border:0; border-radius:4px; background:transparent; color:#5b6171; font:500 13px/1.5 var(--font-ja,'Noto Sans JP',sans-serif); cursor:pointer; }
.route-controls button:hover { background:rgb(255 255 255/.7); color:var(--route-ink); }
.route-controls button:focus-visible { outline:2px solid var(--route-orange); outline-offset:2px; }
.security-route-figure:not([data-route-running='true']) .route-motion { animation-play-state:paused !important; }
.security-route-figure[data-route-ready='true'] .route-motion { animation-play-state:running; }
.security-route-figure[data-route-restarting='true'] .route-motion { animation:none !important; }
/* Keep text readable inside narrow reading columns. Both paths share one public site. */
@container (max-width:689px) {
  .security-route-viewport { height:auto; }
  .security-route-stage { display:flex; flex-direction:column; align-items:center; width:100%; height:auto; transform:none; gap:8px; }
  .route-actor { position:relative; left:auto; top:auto; width:182px; height:172px; }
  .route-mascot { width:130px; height:130px; left:26px; }
  .route-actor-label { top:130px; }
  .route-lane { position:relative; left:auto; top:auto; width:100%; }
  .security-route-stage .route-lane-asset { display:none; }
  .route-lane--view { height:106px; }
  .route-lane--view .route-lane-label { left:0; top:0; width:100%; font-size:15px; line-height:24px; }
  .route-lane--view .route-lane-geometry { position:absolute; top:28px; left:calc(50% - 6px); width:12px; height:78px; }
  .route-lane--view .route-mobile-line { left:5px; top:4px; width:2px; height:70px; }
  .route-lane--view .route-mobile-line::after { right:-4px; top:auto; bottom:0; transform:rotate(135deg); }
  .route-lane--view .route-packet-position { left:0; top:0; transform:rotate(90deg) scaleX(.24); transform-origin:6px 6px; }
  .route-lane--view .route-packet img { transform:scaleX(4.1666666667); transform-origin:6px 6px; }
  .route-mobile-line { position:absolute; display:block; background:#c4c5c8; }
  .route-mobile-line::after { content:""; position:absolute; width:12px; height:12px; border-top:2.5px solid var(--route-orange); border-right:2.5px solid var(--route-orange); }
  .route-lane--login { height:85px; }
  .route-lane--operate { height:106px; }
  .route-lane--login .route-lane-geometry, .route-lane--operate .route-lane-geometry { position:absolute; left:calc(50% - 42.5px); top:30.5px; width:85px; transform:rotate(-90deg); }
  .route-lane--operate .route-lane-geometry { left:calc(50% - 53px); top:41px; width:106px; }
  .route-lane--login .route-mobile-line, .route-lane--operate .route-mobile-line { left:6px; top:11px; width:calc(100% - 12px); height:2px; }
  .route-lane--login .route-mobile-line::after, .route-lane--operate .route-mobile-line::after { top:-5px; right:0; transform:rotate(45deg); }
  .route-lane--login .route-lane-label, .route-lane--operate .route-lane-label { left:calc(50% + 18px); top:calc(50% - 10px); width:auto; }
  .route-window-shell { position:relative; left:auto; top:auto; width:calc(364px * var(--route-window-scale)); }
  .route-window-shell--public { height:calc(278px * var(--route-window-scale)); }
  .route-window-shell--admin { height:calc(230px * var(--route-window-scale) + 28px); }
  .route-window { transform:scale(var(--route-window-scale)); }
  .route-badge--admin { left:0; top:calc(13px * var(--route-window-scale)); }
  .route-admin-caption { left:0; top:calc(230px * var(--route-window-scale)); width:100%; font-size:15px; }
  .route-publish { position:relative; left:auto; top:auto; width:310px; max-width:100%; height:98px; }
  .route-publish-geometry { overflow:visible; }
  .route-publish-path { position:absolute; inset:0; display:block; overflow:clip; }
  .route-publish-asset { clip-path:inset(281px 242px 307px 694px); }
  .route-publish-title { width:calc(100% - 94px); font-size:15px; }
  .route-publish-description { width:calc(100% - 94px); font-size:12px; }
  .route-auth { position:relative; left:auto; top:auto; width:220px; height:227px; }
  .route-statement { position:relative; left:auto; top:auto; width:100%; padding-top:24px; font-size:18px; line-height:1.65; text-wrap:balance; }
  .route-controls { justify-content:center; }
}
@media (prefers-reduced-motion:reduce) {
 .security-route-figure .route-motion { animation:none !important; translate:none !important; scale:none !important; }
 .security-route-figure .route-packet { opacity:0 !important; }
 .security-route-figure .route-confirmed { opacity:1 !important; }
 .security-route-figure .route-controls { display:none; }
}

/* Figma 2393:759: one 8,000 ms looping timeline, 10 animated nodes. */
.security-route-figure[data-route-ready='true'] :is([data-node-id="2393:785"],[data-node-id="2393:807"],[data-node-id="2393:820"]) { animation: kf_2393_785_translate_0 8s linear; animation-iteration-count: infinite;  }
@keyframes kf_2393_785_translate_0 { 0% { animation-timing-function: ease-in-out; translate: 0px 0px; } 50% { animation-timing-function: ease-in-out; translate: 0px -5px; } 100% { translate: 0px 0px; } }
.security-route-figure[data-route-ready='true'] [data-node-id="2393:817"] { animation: kf_2393_817_scale_0 8s linear; animation-iteration-count: infinite;  }
@keyframes kf_2393_817_scale_0 { 0% { scale: 1 1; } 16.25% { animation-timing-function: ease-out; scale: 1 1; } 19.375% { animation-timing-function: ease-out; scale: 1.22 1.22; } 25% { scale: 1 1; } 100% { scale: 1 1; } }
.security-route-figure[data-route-ready='true'] [data-node-id="2393:839"] { animation: kf_2393_839_scale_0 8s linear; animation-iteration-count: infinite;  }
@keyframes kf_2393_839_scale_0 { 0% { scale: 1 1; } 41.25% { animation-timing-function: ease-out; scale: 1 1; } 44.375% { animation-timing-function: ease-out; scale: 1.22 1.22; } 50% { scale: 1 1; } 100% { scale: 1 1; } }
.security-route-figure[data-route-ready='true'] [data-node-id="2393:842"] { animation: kf_2393_842_scale_0 8s linear; animation-iteration-count: infinite;  }
@keyframes kf_2393_842_scale_0 { 0% { scale: 1 1; } 52.5% { animation-timing-function: ease-out; scale: 1 1; } 55.625% { animation-timing-function: ease-out; scale: 1.22 1.22; } 61.25% { scale: 1 1; } 100% { scale: 1 1; } }
.security-route-figure[data-route-ready='true'] [data-node-id="2393:844"] { animation: kf_2393_844_opacity_0 8s linear, kf_2393_844_translate_0 8s linear; animation-iteration-count: infinite;  }
@keyframes kf_2393_844_opacity_0 { 0% { opacity: 0; } 50% { opacity: 0; } 52.5% { opacity: 1; } 67.5% { opacity: 1; } 70% { opacity: 0; } 100% { opacity: 0; } } @keyframes kf_2393_844_translate_0 { 0% { translate: 0px 0px; } 52.5% { animation-timing-function: ease-in-out; translate: 0px 0px; } 70% { translate: 0px -81px; } 100% { translate: 0px -81px; } }
.security-route-figure[data-route-ready='true'] [data-node-id="2393:847"] { animation: kf_2393_847_opacity_0 8s linear, kf_2393_847_translate_0 8s linear; animation-iteration-count: infinite;  }
@keyframes kf_2393_847_opacity_0 { 0% { opacity: 1; } 26.25% { opacity: 1; } 27.5% { opacity: 0; } 31.25% { opacity: 0; } 32.5% { opacity: 1; } 58.75% { opacity: 1; } 60% { opacity: 0; } 63.75% { opacity: 0; } 65% { opacity: 1; } 91.25% { opacity: 1; } 92.5% { opacity: 0; } 100% { opacity: 0; } } @keyframes kf_2393_847_translate_0 { 0% { translate: 0px 0px; } 27.5% { translate: 296px 0px; } 28.75% { translate: 0px 0px; } 32.5% { translate: 0px 0px; } 60% { translate: 296px 0px; } 61.25% { translate: 0px 0px; } 65% { translate: 0px 0px; } 92.5% { translate: 296px 0px; } 100% { translate: 296px 0px; } }
.security-route-figure[data-route-ready='true'] [data-node-id="2393:848"] { animation: kf_2393_848_opacity_0 8s linear, kf_2393_848_translate_0 8s linear; animation-iteration-count: infinite;  }
@keyframes kf_2393_848_opacity_0 { 0% { opacity: 1; } 15% { opacity: 1; } 17.5% { opacity: 0; } 100% { opacity: 0; } } @keyframes kf_2393_848_translate_0 { 0% { translate: 0px 0px; } 16.25% { translate: 66px 0px; } 100% { translate: 66px 0px; } }
.security-route-figure[data-route-ready='true'] [data-node-id="2393:849"] { animation: kf_2393_849_opacity_0 8s linear, kf_2393_849_translate_0 8s linear; animation-iteration-count: infinite;  }
@keyframes kf_2393_849_opacity_0 { 0% { opacity: 0; } 23.75% { opacity: 0; } 25% { opacity: 1; } 40% { opacity: 1; } 42.5% { opacity: 0; } 100% { opacity: 0; } } @keyframes kf_2393_849_translate_0 { 0% { translate: 0px 0px; } 25% { translate: 0px 0px; } 41.25% { translate: 91px 0px; } 100% { translate: 91px 0px; } }