/* Independent, proportional diagram; source screenshot remains unchanged. */
.mode-pro{padding-top:70px;container-type:inline-size}
.mode-pro>.mode-copy{max-width:800px;margin:0 auto 55px}
.pro-guide{margin:0}
.pro-guide-heading{text-align:center;margin-bottom:35px}
.pro-guide-heading h3{font-size:2rem;margin-bottom:12px}
.pro-guide-heading p{color:#395561}
.pro-guide-canvas{position:relative;width:100%;aspect-ratio:11/10}
.pro-guide-screen{position:absolute;left:35%;top:12%;width:30%}
.pro-guide-image{width:100%;border-radius:24px;box-shadow:0 20px 45px #102c3d20}
.pro-guide-markers{display:none}
.guide-marker{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:grid;place-items:center;width:26px;height:26px;border:1px solid #d2f8ff;border-radius:50%;background:radial-gradient(circle at 30% 22%,#b4f5ff,#1489b3 48%,#064865);color:#fff;font-size:13px;font-weight:700;line-height:1;box-shadow:0 2px 5px #001f3970;text-shadow:0 1px 2px #002d42}
.pro-guide-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pro-guide-lines path{fill:none;stroke:#348391;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.pro-guide-notes{list-style:none;padding:0;margin:0}
.guide-note{position:absolute;width:24%;display:flex;gap:.91cqi;align-items:flex-start;font-size:1.35cqi;line-height:1.45}
.guide-number{display:grid;place-items:center;flex:0 0 2.09cqi;height:2.09cqi;border-radius:50%;background:#dcebee;color:#086373;font-size:1.09cqi;font-weight:700}
.guide-note strong{display:block;font-size:1.05em;line-height:1.25;color:#123848;margin-bottom:.64cqi}
.guide-note p{color:#46616d;margin:0}
.guide-note--time{left:36%;top:0;width:28%}
.guide-note--batch{left:0;top:13.5%}
.guide-note--ranking{left:0;top:25%}
.guide-note--answer{left:0;top:37.5%}
.guide-note--question{left:0;top:48%}
.guide-note--keyboard{left:0;top:63.5%}
.guide-note--power{left:76%;top:19%}
.guide-note--record{left:76%;top:30%}
.guide-note--effort{left:76%;top:41.5%}
.guide-note--timer{left:76%;top:55.5%}
.guide-note--basic{left:4%;top:90%}
.guide-note--exit{left:37%;top:90%;width:27%}
.guide-note--help{left:73%;top:90%;width:27%}
.pro-guide-caption{text-align:center;margin:30px 0 0;color:#52646b;font-size:.85rem}
.pro-guide-caption a{display:inline-block;padding:8px 0;color:#095cad;text-underline-offset:3px}
/* The approved wide diagram is unchanged. Narrow screens use numbered spheres
   anchored to the screenshot and readable explanations immediately below it. */
@container(max-width:760px){
 .pro-guide-canvas{aspect-ratio:auto;display:flex;flex-direction:column;gap:35px}
 .pro-guide-screen{position:relative;left:auto;top:auto;width:min(100%,360px);align-self:center}
 .pro-guide-markers{display:block;position:absolute;inset:0;pointer-events:none}
 .pro-guide-lines{display:none}
 .pro-guide-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
 .guide-note{position:static;width:auto;gap:10px;font-size:.94rem}
 .guide-number{flex-basis:26px;height:26px;border:1px solid #d2f8ff;background:radial-gradient(circle at 30% 22%,#b4f5ff,#1489b3 48%,#064865);color:#fff;font-size:13px;box-shadow:0 2px 5px #001f3930;text-shadow:0 1px 2px #002d42}
 .guide-note strong{margin-bottom:7px}
}
@container(max-width:450px){.pro-guide-notes{grid-template-columns:1fr}.pro-guide-heading h3{font-size:1.6rem}}