.guide{margin:30px 0;padding:24px;background:linear-gradient(145deg,#f7fff9,#eaf7ef);border:1px solid #c8ead4;border-radius:22px;box-shadow:0 18px 45px #0f634b16;color:#154635}.guide-heading{display:flex;align-items:start;justify-content:space-between;gap:14px}.guide-heading h2{font-size:21px;line-height:1.25;color:#124433;margin:7px 0 18px}.guide-kicker{font:750 10px/1.2 ui-monospace,monospace;letter-spacing:.16em;color:#218458}.guide-step-count{font-size:12px;color:#167a54;white-space:nowrap;border:1px solid #c2e5d0;padding:7px 10px;border-radius:30px;background:#fff}.guide-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:23px;align-items:center}.guide-visual{border-radius:17px;min-height:315px;display:grid;place-items:center;background:radial-gradient(circle at 50% 26%,#29745d,#092c26 70%);overflow:hidden;padding:17px}.guide-device{width:min(212px,100%);min-height:291px;border:5px solid #1b2928;border-radius:25px;background:#fff;box-shadow:0 18px 35px #001b16aa,0 0 0 1px #66947b;overflow:hidden;display:flex;flex-direction:column}.guide-device-top{display:flex;justify-content:space-between;padding:8px 14px 5px;font-size:8px;color:#566960}.guide-device-header{display:flex;align-items:center;gap:6px;padding:8px 13px;border-bottom:1px solid #e0eee5;color:#164833;font-size:10px}.guide-brand{display:grid;place-items:center;border-radius:5px;color:#fff;background:#12845a;width:20px;height:20px;font-weight:900}.guide-device-body{padding:14px 12px;flex:1}.guide-screen-caption{color:#194934;font-size:15px;font-weight:800;margin-bottom:13px}.guide-screen-rows{display:grid;gap:8px}.guide-screen-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 10px;border:1px solid #e2eee5;border-radius:8px;color:#476657;font-size:10px;min-height:33px}.guide-screen-row.is-target{border:2px solid #13c979;background:#eafff1;color:#116e47;font-weight:800;box-shadow:0 0 0 5px #42ef8945,0 0 18px #29d57c8a;animation:guide-glow 2s ease-in-out infinite}.guide-target-dot{font-size:14px;color:#08b965}.guide-device-bottom{height:14px;display:grid;place-items:center}.guide-device-bottom span{width:55px;height:3px;border-radius:3px;background:#223d2f}.guide-explain{padding:8px 2px}.guide-number{display:grid;place-items:center;width:35px;height:35px;border-radius:11px;color:#0b7f53;background:#d9f9e4;font-size:19px;font-weight:900}.guide-explain h3{margin:16px 0 7px;color:#124533;font-size:20px}.guide-explain p{font-size:14px;line-height:1.65;color:#4b6e5d;min-height:68px;margin:0}.guide-progress{display:flex;gap:7px;margin:25px 0}.guide-progress button{height:7px;width:23px;padding:0;border:0;border-radius:20px;background:#b8dcca;transition:width .2s,background .2s}.guide-progress button.active{width:38px;background:#0caa67}.guide-controls{display:flex;flex-wrap:wrap;gap:8px}.guide-controls button{border:1px solid #c6e8d2;border-radius:10px;padding:10px 15px;background:white;color:#146a49;font-size:13px;font-weight:700}.guide-controls [data-guide-next]{background:#0d985c;border-color:#0d985c;color:white}.guide-controls button:disabled{opacity:.45;cursor:not-allowed}.guide button:focus-visible{outline:3px solid #0a9864;outline-offset:3px}.guide-figure-caption{font-size:11px!important;color:#779687!important;margin:14px 0 0!important;line-height:1.5!important}.guide-real-screen{position:relative;width:min(250px,100%)}.guide-real-screen img{display:block;width:100%;height:auto;border-radius:14px}.guide-hotspot{position:absolute;left:var(--spot-x);top:var(--spot-y);width:44px;height:44px;transform:translate(-50%,-50%);border:3px solid #34ef8c;border-radius:50%;box-shadow:0 0 0 9px #12e87c44,0 0 20px #1add7b;animation:guide-glow 2s ease-in-out infinite}@keyframes guide-glow{50%{box-shadow:0 0 0 8px #47fb8c65,0 0 23px #2cdf84}}@media(max-width:650px){.guide{padding:18px}.guide-layout{grid-template-columns:1fr;gap:14px}.guide-visual{min-height:300px}.guide-explain p{min-height:0}.guide-progress{margin:18px 0}.guide-heading h2{font-size:18px}}@media(prefers-reduced-motion:reduce){.guide-screen-row.is-target,.guide-hotspot{animation:none}}
