.app{margin:0 auto;background:#fff;padding:0;color:#101d33;background-image:radial-gradient(circle at 1px 1px,rgb(179 25 66 / .10) 1px,transparent 0);border-radius:30px;margin-bottom:25px;margin-top:40px}.layout{display:grid;grid-template-columns:340px 1fr;gap:22px;align-items:start}.sidebar-label{display:flex;align-items:center;gap:8px;font-family:var(--font-body);font-size:11.5px;letter-spacing:.08em;color:#5c6c8f;margin-bottom:12px;text-transform:uppercase}.sidebar-label svg{width:14px;height:14px;stroke:#64748b}.card-list{display:flex;flex-direction:column;gap:10px}.card{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid #e1e7f0;border-radius:10px;padding:14px;text-align:left;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .1s ease;font-family:var(--font-body);color:#101d33;width:100%;position:relative}.card:hover{background:#eef2f9;border-color:#c3cee0}.card:focus-visible{outline:2px solid #B31942;outline-offset:2px}.card:active{transform:scale(.995)}.card.active{border-color:#B31942;background:linear-gradient(180deg,rgb(179 25 66 / .09),rgb(179 25 66 / .03));box-shadow:0 0 0 1px rgb(179 25 66 / .25)}.card-icon{width:40px;height:40px;border-radius:8px;background:#fff;border:1px solid #e1e7f0;display:flex;align-items:center;justify-content:center;flex-shrink:0}.card-icon svg{width:20px;height:20px;stroke:#55637d}.card.active .card-icon{border-color:rgb(179 25 66 / .4);background:rgb(179 25 66 / .18)}.card.active .card-icon svg{stroke:#B31942}.card.active .card-icon svg path{fill:#B31942}.card-body{flex:1;min-width:0}.card-top-row{display:flex;justify-content:space-between;align-items:center;gap:8px}.card-code{font-family:'Inter',sans-serif;font-size:12px;letter-spacing:.06em;color:#64748b;font-weight:600}.card.active .card-code{color:#B31942}.active-pill{font-family:'Inter',sans-serif;font-size:12px;line-height:20px;font-weight:600;letter-spacing:.06em;color:#fff;background:#B31942;padding:2px 7px;border-radius:20px}.card-title{font-size:16px;line-height:25px;font-weight:600;margin:3px 0 4px;color:#101d33}.card-desc{font-size:14px;line-height:20px;color:#55637d;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.content{display:flex;flex-direction:column;gap:22px;min-width:0}.viewport-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}.viewport-label{display:flex;align-items:center;gap:8px;font-family:'Inter',sans-serif;font-size:11.5px;letter-spacing:.08em;color:#64748b;text-transform:uppercase}.viewport-label svg{width:15px;height:15px;stroke:#B31942}.active-title-pill{font-family:'Inter',sans-serif;font-size:12px;font-weight:600;letter-spacing:.03em;color:#B31942;background:rgb(179 25 66 / .18);border:1px solid rgb(179 25 66 / .35);padding:6px 13px;border:1px solid rgb(179 25 66 / .35);padding:6px 13px;border-radius:6px}.spec-highlights{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:16px}.viewport{background:#f7f9fc;border:1px solid #e1e7f0;border-radius:14px;padding:20px 22px 0;position:relative;overflow:hidden}.viewport-grid{background-image:linear-gradient(rgb(179 25 66 / .05) 1px,transparent 1px),linear-gradient(90deg,rgb(179 25 66 / .05) 1px,transparent 1px);background-size:24px 24px;border-radius:8px;padding:16px 16px 8px;position:relative}.viewport-status{font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.04em;color:#B31942;font-weight:600;margin-bottom:2px}.viewport-status-sub{font-family:'Inter',sans-serif;font-size:10.5px;color:#64748b;margin-bottom:12px}.viewport-meta{font-family:'Inter',sans-serif;font-size:9.5px;color:#64748b;line-height:1.6;position:absolute;top:16px;right:18px;text-align:right}.diagram-holder{position:relative;width:100%;min-height:260px;display:flex;align-items:center;justify-content:center}.diagram-holder svg{width:100%;height:auto;max-width:760px;display:block}.hotspot circle.pulse{animation:pulse 2.1s ease-in-out infinite;transform-origin:center}@keyframes pulse{0%,100%{opacity:.35}50%{opacity:.9}}.hotspot{cursor:pointer}.hotspot:focus-visible{outline:2px solid #B31942;outline-offset:3px;border-radius:50%}.tooltip{position:absolute;background:#fff;border:1px solid #B31942;border-radius:8px;padding:10px 13px;font-size:12.5px;max-width:220px;box-shadow:0 8px 24px rgb(15 23 42 / .12);z-index:20;pointer-events:none;opacity:0;transition:opacity .12s ease}.tooltip.visible{opacity:1}.tooltip-title{font-family:'Inter',sans-serif;font-size:11px;font-weight:700;color:#B31942;letter-spacing:.03em;margin-bottom:4px}.tooltip-detail{color:#55637d;line-height:1.5;font-size:12px}.hint-bar{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #e1e7f0;border-radius:8px;padding:11px 14px;margin:14px 0 16px;font-size:12.5px;color:#55637d}.hint-bar svg{width:15px;height:15px;stroke:#c9820f;flex-shrink:0}.spec-panel{background:#fff;border:1px solid #e1e7f0;border-radius:14px;padding:22px 24px 20px}.spec-header{display:flex;align-items:center;gap:9px;margin-bottom:14px}.spec-header svg{width:17px;height:17px;stroke:#B31942}.spec-header h2{font-family:'Inter',sans-serif;font-size:13px!important;line-height:20px!important;letter-spacing:.06em!important;color:#101d33;font-weight:600!important;margin-bottom:0!important}.spec-intro{font-size:15px;line-height:25px;color:#1d1e22;margin-bottom:18px;max-width:820px}.spec-subhead{font-family:'Inter',sans-serif;font-size:10.5px;letter-spacing:.08em;color:#64748b;text-transform:uppercase;margin-bottom:10px}.spec-highlights{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:16px}.single-post .BlogDetailSection .entry-content .spec-highlights li{display:flex;gap:10px;align-items:flex-start;font-size:15px!important;line-height:25px!important;color:#1d1e22;padding-left:15px;margin-bottom:0}.single-post .BlogDetailSection .entry-content .spec-highlights li::before{content:"";width:6px;height:6px;border-radius:50%;min-width:6px;background:#B31942;margin-top:5px;flex-shrink:0;box-shadow:0 0 6px rgb(179 25 66 / .6)}.single-post .BlogDetailSection .entry-content .spec-highlights li.hl-focus{color:#101d33}.single-post .BlogDetailSection .entry-content .spec-highlights li.hl-focus::before{background:#c9820f;box-shadow:0 0 6px rgb(201 130 15 / .45)}.spec-footer{border-top:1px solid #e1e7f0;padding-top:12px;display:flex;align-items:center;gap:8px;font-size:12px;color:#64748b}.spec-footer svg{width:14px;height:14px;stroke:#64748b;flex-shrink:0}.disclaimer{margin-top:10px;font-size:12px;color:#1d1e22;line-height:20px;margin-bottom:0;margin-top:0}@media (max-width:1280px){.layout{display:flex;flex-direction:column}.sidebar{order:1}.content{order:2}.card-list{flex-direction:column;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}.card{min-width:250px}.header-right{text-align:left}}@media (max-width:600px){.viewport{padding:16px 14px 0}.spec-panel{padding:18px 16px 16px}}@media (max-width:500px){.viewport-meta{position:relative;text-align:left;left:0}.viewport-status-sub{margin-bottom:0}.viewport-grid{padding:0}.hint-bar{margin-top:0}}