.app{ margin:0 auto; background-color: #060c1a; padding: 28px; color: #e8eef5; background-image: radial-gradient(circle at 1px 1px, rgba(179, 25, 66, .10) 1px, transparent 0); border-radius: 30px; margin-bottom: 25px; }
.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:#5c6c8f;}
.card-list{display:flex;flex-direction:column;gap:10px;}
.card{ display:flex;gap:12px;align-items:flex-start; background:#0d1c3c; border:1px solid #1b2c4d; 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:#e8eef5; width:100%; position:relative; }
.card:hover{background:#132548;border-color:#2b4272;}
.card:focus-visible{outline:2px solid #e0355c;outline-offset:2px;}
.card:active{transform:scale(.995);}
.card.active{ border-color:#e0355c; background:linear-gradient(180deg, rgba(179,25,66,.09), rgba(179,25,66,.03)); box-shadow:0 0 0 1px rgba(179,25,66,.25); }
.card-icon{ width:34px;height:34px;border-radius:8px; background:#0a1730; border:1px solid #1b2c4d; display:flex;align-items:center;justify-content:center; flex-shrink:0; }
.card-icon svg{width:17px;height:17px;stroke:#8b98ab;}
.card.active .card-icon{border-color:rgba(179,25,66,.4);background:rgba(179,25,66,.18);}
.card.active .card-icon svg{stroke:#e0355c;}
.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:10.5px; letter-spacing:.06em; color:#5c6c8f; font-weight:600; }
.card.active .card-code{color:#e0355c;}
.active-pill{ font-family:'Inter',sans-serif; font-size:9.5px; font-weight:600; letter-spacing:.06em; color:#4a0f1e; background:#e0355c; padding:2px 7px; border-radius:20px; }
.card-title{font-size:14.5px;font-weight:600;margin:3px 0 4px;color:#fff;}
.card-desc{font-size:12.5px;line-height:1.5;color:#8b98ab; 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:#5c6c8f;text-transform:uppercase; }
.viewport-label svg{width:15px;height:15px;stroke:#e0355c;}
.active-title-pill{ font-family:'Inter',sans-serif; font-size:12px;font-weight:600;letter-spacing:.03em; color:#e0355c; background:rgba(179,25,66,.18); border:1px solid rgba(179,25,66,.35); padding:6px 13px;border-radius:6px; }
.viewport{ background:var(--bg-viewport); border:1px solid #1b2c4d; border-radius:14px; padding:20px 22px 0; position:relative; overflow:hidden; }
.viewport-grid{ background-image: linear-gradient(rgba(179,25,66,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(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:#e0355c; font-weight:600; margin-bottom:2px; }
.viewport-status-sub{ font-family:'Inter',sans-serif; font-size:10.5px; color:#5c6c8f; margin-bottom:12px; }
.viewport-meta{ font-family:'Inter',sans-serif; font-size:9.5px; color:#5c6c8f; 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 #e0355c;outline-offset:3px;border-radius:50%;}
.tooltip{ position:absolute; background:#0a1730; border:1px solid #e0355c; border-radius:8px; padding:10px 13px; font-size:12.5px; max-width:220px; box-shadow:0 8px 24px rgba(0,0,0,.5); 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:#e0355c; letter-spacing:.03em; margin-bottom:4px; }
.tooltip-detail{color:#8b98ab;line-height:1.5;font-size:12px;}
.hint-bar{ display:flex;align-items:center;gap:8px; background:#0a1730; border:1px solid #1b2c4d; border-radius:8px; padding:11px 14px; margin:14px 0 16px; font-size:12.5px; color:#8b98ab; }
.hint-bar svg{width:15px;height:15px;stroke:var(--accent-amber);flex-shrink:0;}
.spec-panel{ background:#0a1730; border:1px solid #1b2c4d; 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:#e0355c;}
.single-post .BlogDetailSection .entry-content .spec-header h2{ font-family:'Inter',sans-serif; font-size:13px; line-height: 20px; margin-bottom: 0;letter-spacing:.06em; color:#e8eef5; font-weight:600; }
.single-post .BlogDetailSection .entry-content .spec-intro{ font-size:14.5px;line-height:1.7; color:#c9d3e0; margin-bottom:18px; max-width:820px; }
.spec-subhead{ font-family:'Inter',sans-serif; font-size:10.5px;letter-spacing:.08em; color:#5c6c8f; 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 .app .spec-highlights li{ display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.6; color: #c9d3e0; padding-left: 17px; }
.single-post .BlogDetailSection .entry-content .app .spec-highlights li::before{ content: "" !important; width: 6px; height: 6px; min-width: 6px; border-radius: 50%; background: #e0355c; margin-top: 7px; flex-shrink: 0; box-shadow: 0 0 6px rgba(179, 25, 66, .6); top: 0; }
.spec-highlights li.hl-focus{color:#fff;}
.spec-highlights li.hl-focus::before{background:var(--accent-amber);box-shadow:0 0 6px rgba(240,169,58,.7);}
.spec-footer{ border-top:1px solid #1b2c4d; padding-top:12px; display:flex;align-items:center;gap:8px; font-size:12px;color:#5c6c8f; }
.spec-footer svg{width:14px;height:14px;stroke:var(--text-tertiary);flex-shrink:0;}
.single-post .BlogDetailSection .entry-content .disclaimer{ margin-top:16px; font-size:11px; color:var(--text-tertiary); line-height:1.6; text-align:left; }
@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;}
}