/* Only this product route overrides the existing shell and glass background. */
.p20 .p19-feature { display:block; }
.p20 .p19-copy { display:grid; grid-template-columns:.9fr 1.1fr; gap:0 64px; margin-bottom:36px; }
.p20 .p19-copy .eyebrow { grid-column:1/-1; }
.p20 .p19-copy h2 { grid-column:1; grid-row:2/5; margin-top:22px; max-width:450px; }
.p20 .p19-summary { grid-column:2; max-width:none; margin-top:20px; }
.p20 .p19-copy h3 { grid-column:2; margin:16px 0 10px; }
.p20 .p19-definition { grid-column:2; max-width:none; }
.p20 .p19-copy .vp-links { grid-column:2; }
.p20 .p19-model { border-radius:22px; background:linear-gradient(128deg,#ffffffda,#f7faf5c9 48%,#d6e8df8a 78%,#fff0e3a8); box-shadow:inset 0 1px 0 #fff,0 28px 65px -48px #397765; }
.p20 .p19-model figcaption { font-size:15px; padding:26px 32px 0; }
.p20-relation { padding:10px 32px 0; font-size:13px; color:#54716a; line-height:1.9; }
.p20-stage { position:relative; width:100%; aspect-ratio:8/5; max-height:430px; min-height:360px; margin-top:12px; }
.p20-stage>svg { position:absolute; inset:0; width:100%; height:100%; }
.p20-node { position:absolute; left:var(--x); top:var(--y); width:var(--w); height:var(--h); transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; padding:12px 18px; font:inherit; border:1px solid #ffffff; border-radius:12px; color:#164e52; background:linear-gradient(145deg,#ffffffed,#eff6f0d9 65%,#bddbd08a); box-shadow:inset 0 1px 1px #fff,0 9px 18px -14px #397a6c,0 2px 0 #a7c9ba8a; cursor:pointer; transition:background .3s,border-color .3s,box-shadow .3s; }
.p20-node b { font-size:16px; line-height:1.5; font-weight:550; }
.p20-node small { font-size:12px; line-height:1.7; color:#56776d; }
.p20-node-number { position:absolute; top:10px; left:12px; font-size:10px; color:#638b7f; font-variant-numeric:tabular-nums; }
.p20-node:hover { border-color:#79aaa0; background:#f8fcf7; }
.p20 .p20-node:active { transform:translate(-50%,-50%); }
.p20-node[aria-pressed=true] { box-shadow:inset 0 0 0 1px #719b8f,0 9px 18px -14px #397a6c,0 2px 0 #a7c9ba8a; }
.p20-node.is-flowing { border-color:#e9b184; background:linear-gradient(145deg,#fffcf2,#ffebd3c9 60%,#f6b98170); box-shadow:inset 0 1px 1px #fff,0 12px 22px -15px #d88654,0 2px 0 #e4b08c; }
.p20-node.is-flowing small { color:#865b3d; }
.p20-node:focus-visible,.p20-player button:focus-visible { outline:3px solid #12636a; outline-offset:4px; }
.p20-link { fill:none; stroke:#63998b; stroke-width:2.3; opacity:.75; stroke-linejoin:round; }
.p20-link.is-flowing { stroke:#dc762f; stroke-width:3; opacity:1; stroke-dasharray:14 9; animation:p20-path 1s linear infinite; }
.p20-model[data-paused=true] .p20-link { animation-play-state:paused; }
.p20-player { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 32px; padding:14px 0; border-top:1px solid #cfdfd3; }
.p20-player p { font-size:12px; color:#98613d; font-variant-numeric:tabular-nums; }
.p20-player button { min-height:44px; padding:8px 16px; background:#ffffffc4; color:#3c6c63; border:1px solid #c5dace; border-radius:6px; font:inherit; font-size:12px; cursor:pointer; }
.p20-player button:hover { background:#fff3e5; border-color:#dbb595; }
.p20 .p19-explain { margin:0 32px 26px; padding-top:16px; min-height:90px; }
.p20 .p19-explain .vm-detail p:last-child { font-size:13px; }
.p20-framework { padding:24px; border:1px solid #fff; border-radius:18px; background:linear-gradient(120deg,#ffffffad,#cee3d68a,#fff3e6a3); box-shadow:inset 0 1px #fff,0 20px 42px -35px #3f7b6c; }
.p20-framework>div { display:grid; grid-template-columns:85px 1fr; background:#ffffffa8; border:1px solid #fff; border-radius:7px; overflow:hidden; }
.p20-framework>div>span { display:flex; justify-content:center; align-items:center; padding:12px; font-size:11px; background:#12636a; color:#fff; line-height:1.7; }
.p20-framework p { display:flex; flex-wrap:wrap; gap:10px 16px; padding:18px; align-items:center; }
.p20-framework b { font-size:12px; font-weight:500; color:#245e59; }
.p20-framework>i { display:block; font-style:normal; color:#dc8549; text-align:center; line-height:24px; }
.p20-framework>small { display:block; font-size:11px; color:#617c70; line-height:1.8; margin-top:17px; }
.p20-operation { margin:12px 32px 24px; padding:22px; border:1px solid #fff; background:#ffffff8a; border-radius:12px; }
.p20-operation>p { font-size:12px; font-weight:550; color:#315d56; margin-bottom:16px; }
.p20-operation ol { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); list-style:none; padding:0; gap:20px; }
.p20-operation li { position:relative; padding:12px 6px; background:#eaf3ed; border-radius:6px; text-align:center; }
.p20-operation li span { font-size:10px; color:#668c7e; display:block; margin-bottom:7px; }
.p20-operation li b { font-size:12px; font-weight:500; }
.p20-operation li:not(:last-child):after { content:'→'; position:absolute; left:100%; width:20px; top:50%; color:#749e8d; transform:translateY(-50%); }
.p20-operation li.is-flowing { background:#ffe9cc; color:#94552d; }
.p20-operation>small { display:block; font-size:11px; color:#5a796e; margin-top:15px; }
@keyframes p20-path { to { stroke-dashoffset:-46; } }
@media(max-width:860px) { .p20 .p19-copy { display:block; } .p20 .p19-copy h2 { margin-top:18px; max-width:none; } .p20 .p19-copy h3 { margin-top:18px; } .p20-node b { font-size:14px; } .p20-node small { font-size:11px; } .p20 .p19-model { max-width:none; } }
@media(max-width:600px) { .p20 .p19-hero-in { padding-bottom:30px; gap:28px; } .p20-framework { padding:17px; } .p20-framework>div { grid-template-columns:74px 1fr; } .p20-framework p { padding:14px; gap:9px; } .p20-framework b { font-size:11px; } .p20 .p19-model figcaption { padding:20px 16px 0; font-size:12px; } .p20-relation { padding:10px 16px 0; font-size:12px; } .p20-stage { height:500px; min-height:0; aspect-ratio:auto; max-height:none; } .p20-node { padding:20px 7px 10px; border-radius:8px; gap:6px; } .p20-node b { font-size:12px; line-height:1.6; } .p20-node small { font-size:10px; line-height:1.65; } .p20-node-number { top:7px; left:8px; font-size:9px; } .p20-player { margin:0 16px; } .p20 .p19-explain { margin:0 16px 20px; min-height:115px; } .p20-operation { margin:16px; padding:15px; } .p20-operation ol { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 20px; } .p20-operation li:nth-child(2n):after { display:none; } .p20-operation li { text-align:left; padding:12px; } .p20-operation li span { display:inline; margin-right:6px; } .p20 .p19-copy { margin-bottom:25px; } }
@media(max-width:600px) { .p20-operation ol { grid-template-columns:1fr; gap:24px; } .p20-operation li:not(:last-child):after { display:block; content:'↓'; left:50%; top:100%; width:auto; height:24px; line-height:24px; transform:none; } }
@media(prefers-reduced-motion:reduce) { .p20-link.is-flowing { animation:none; stroke-dasharray:none; } .p20-node { transition:none; } }