/* OpsDen GPU guide: self-contained widgets using site color tokens */
.gpu-hero-visual{margin-top:-20px;margin-bottom:5px;position:relative;overflow:hidden;border:1px solid var(--border);background:#090f23;height:clamp(230px,36vw,420px)}
.gpu-hero-visual img{width:100%;height:100%;object-fit:cover;object-position:center 45%;display:block}.gpu-hero-tag{position:absolute;left:24px;bottom:24px;max-width:390px;padding:15px 18px;background:rgba(7,14,26,.87);border:1px solid rgba(85,239,220,.39);color:#e5fcff;font:11px/1.5 var(--mono);letter-spacing:.02em}.gpu-hero-tag strong{display:block;font:700 16px var(--sans);letter-spacing:-.01em;margin-top:3px;color:#fff}
.article-content .gpu-widget{background:#0b1523;border:1px solid #293b50;color:#eaf1ff;margin:31px 0 38px;padding:0;overflow:hidden;font-family:var(--sans);line-height:1.5}.gpu-widget *{box-sizing:border-box}.gpu-widget-head{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:14px 19px;background:#102039;border-bottom:1px solid #293b50;font:10px var(--mono);letter-spacing:.07em;color:#a7b7d1}.gpu-widget-head>span{color:#63dfdf}.gpu-widget-head strong{font:inherit;color:#b5c5db}.gpu-arch-nodes{display:grid;grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr) 52px minmax(0,1fr);align-items:stretch;padding:25px 18px 18px;gap:4px}.gpu-arch-node{min-width:0;min-height:215px;padding:18px 14px;background:linear-gradient(145deg,#142942,#0d192b);border:1px solid #345879;display:flex;flex-direction:column;align-items:flex-start;border-radius:7px}.gpu-arch-node.gpu-arch-store{border-color:#247f82;background:linear-gradient(135deg,#163c46,#10212d)}.gpu-arch-node.gpu-arch-gpu{border-color:#66853f;background:linear-gradient(135deg,#283e2a,#101e27)}.gpu-arch-node.gpu-arch-cluster{border-color:#7a64c5;background:linear-gradient(135deg,#28284f,#121d31)}.gpu-node-icon{font:42px var(--sans);line-height:1.1;margin-bottom:13px;color:#9cece8}.gpu-arch-cluster .gpu-node-icon{color:#bfb4ff}.gpu-arch-gpu .gpu-node-icon{color:#b5f08c}.gpu-arch-node small{font:9px var(--mono);letter-spacing:.09em;color:#9eafc9}.gpu-arch-node b{font:700 17px/1.2 var(--sans);color:#fff;letter-spacing:-.035em;margin-top:7px}.gpu-arch-node p{font:12px/1.5 var(--sans)!important;color:#bbcada!important;margin:9px 0 13px!important}.gpu-node-tag{margin-top:auto;border:1px solid #45647c;font:9px var(--mono);padding:5px 7px;color:#bfe0f5}.gpu-arch-arrow{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#78d8e8}.gpu-arch-arrow span{font:8px var(--mono);text-align:center;letter-spacing:.02em}.gpu-arch-arrow i{font:35px var(--sans);font-style:normal}.gpu-arch-foot{border-top:1px solid #22364d;padding:14px 18px;display:flex;gap:19px;flex-wrap:wrap;font:10px var(--mono);color:#b5c6d7}.gpu-key{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px}.gpu-key-teal{background:#4ddacb}.gpu-key-violet{background:#b69aff}.gpu-key-lime{background:#bbeb79}
.gpu-storage-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-bottom:1px solid #2d3c54}.gpu-widget button,.gpu-widget select{font-family:var(--sans)}.gpu-storage-tabs button{background:#101b30;color:#9baeca;border:0;border-right:1px solid #2a3b54;cursor:pointer;font-weight:650;padding:17px 10px;font-size:12px}.gpu-storage-tabs button:last-child{border-right:0}.gpu-storage-tabs button[aria-pressed=true]{background:#17364a;color:#8cf4ee;box-shadow:inset 0 -3px #59d2d4}.gpu-storage-detail{display:grid;grid-template-columns:38% 1fr;align-items:center;min-height:278px}.gpu-storage-graphic{height:100%;min-height:250px;background:radial-gradient(ellipse at center,rgba(31,126,150,.23),transparent 67%),repeating-linear-gradient(90deg,transparent,transparent 27px,rgba(60,130,160,.07) 28px);position:relative;display:grid;place-items:center;overflow:hidden}.gpu-graphic-ring{width:180px;height:180px;border-radius:50%;position:absolute;border:1px solid rgba(83,211,225,.22);box-shadow:0 0 0 28px rgba(66,198,222,.025),0 0 0 56px rgba(66,198,222,.025)}.gpu-storage-graphic>span{z-index:1;font-size:100px;color:#71f0ed;text-shadow:0 0 45px rgba(89,230,234,.4);line-height:1}.gpu-storage-copy{padding:28px}.gpu-micro{font:10px var(--mono);color:#7de8df;letter-spacing:.07em}.gpu-storage-copy h3,.gpu-step-content h3,.gpu-flow-toolbar h3{color:#fff!important;font:700 24px/1.2 var(--sans)!important;letter-spacing:-.035em;margin:8px 0 11px!important}.gpu-storage-copy p{color:#c3d4e4!important;font-size:13px!important;line-height:1.65!important;margin:0 0 19px!important}.gpu-storage-copy dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}.gpu-storage-copy dt{font:9px var(--mono);text-transform:uppercase;color:#829db6}.gpu-storage-copy dd{color:#e5f7ff;font-size:12px;font-weight:650;margin:5px 0 0}.gpu-clarifier{padding:15px 20px;background:#10233a;border-top:1px solid #2d415b;display:flex;gap:15px;align-items:flex-start;font-size:12px;color:#aec7dc}.gpu-clarifier strong{flex:0 0 135px;color:#89e5e4}
.gpu-step-nav{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid #2c3b51}.gpu-step-nav button{display:flex;flex-direction:column;align-items:start;text-align:left;gap:7px;cursor:pointer;padding:18px 12px;background:#111f33;color:#a2b4cb;border:0;border-right:1px solid #293b52;font-size:12px;font-weight:700}.gpu-step-nav button:last-child{border-right:0}.gpu-step-nav button small{font:10px var(--mono);color:#92acc2}.gpu-step-nav button[aria-pressed=true]{background:#223c50;color:#9ff5ef;box-shadow:inset 0 -3px #77e7d9}.gpu-step-content{display:grid;grid-template-columns:1fr 165px;gap:20px;padding:26px;min-height:290px}.gpu-step-content p{color:#c2d4e5!important;font-size:13px!important;line-height:1.65!important;margin:10px 0 20px!important}.gpu-command-panel{max-width:490px;background:#07101c;border:1px solid #354962}.gpu-command-panel>div{padding:9px 12px;border-bottom:1px solid #2c4059;color:#88b2c5;font:9px var(--mono);display:flex;justify-content:space-between;align-items:center}.gpu-command-panel button{background:#173648;border:1px solid #327278;color:#a6fcfa;font:10px var(--mono);padding:6px 9px;cursor:pointer}.gpu-command-panel pre{color:#b4f3ec;font:12px/1.7 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;margin:0;padding:15px}.gpu-step-art{display:grid;place-items:center;min-height:180px;position:relative}.gpu-step-art:before,.gpu-step-art:after{content:'';position:absolute;border:1px solid #345178;border-radius:50%;width:130px;height:130px}.gpu-step-art:after{width:178px;height:178px;opacity:.38}.gpu-step-art span{font:90px/1 var(--sans);color:#84e8ee;text-shadow:0 0 47px rgba(80,220,230,.3);z-index:1}
.gpu-flow-toolbar{padding:23px 23px 0;display:flex;gap:20px;justify-content:space-between;align-items:start}.gpu-flow-toolbar h3{margin:0 0 3px!important}.gpu-flow-toolbar p{margin:0!important;color:#afc2db!important;font-size:12px!important}.gpu-segments{display:flex;border:1px solid #435d76;flex-shrink:0}.gpu-segments button{background:#122238;border:0;border-right:1px solid #435d76;color:#acc0d8;cursor:pointer;padding:11px 12px;font-weight:650;font-size:11px}.gpu-segments button:last-child{border:0}.gpu-segments button[aria-pressed=true]{background:#6be0df;color:#082033}.gpu-flow-stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;padding:24px}.gpu-flow-node{position:relative;min-height:170px;background:linear-gradient(130deg,#19364b,#111e31);border:1px solid #345875;padding:17px 13px}.gpu-flow-node:not(:last-child):after{content:'→';position:absolute;right:-14px;top:50%;transform:translateY(-50%);font-size:25px;color:#73f7e6;z-index:2}.gpu-flow-node small{color:#8cece3;font:10px var(--mono);display:block;margin-bottom:25px}.gpu-flow-node strong{color:#fff;display:block;font-size:15px;line-height:1.2}.gpu-flow-node p{color:#baccdf!important;font-size:11px!important;line-height:1.5!important;margin:10px 0 0!important}.gpu-flow-bottom{padding:16px 24px 22px;border-top:1px solid #273b55}.gpu-flow-bottom label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:12px;font-weight:650;color:#b9f9ee}.gpu-flow-bottom input{accent-color:#69ded4;width:17px;height:17px}.gpu-flow-bottom p{color:#9fb4cd!important;font-size:11px!important;line-height:1.5!important;margin:10px 0 0!important}
.gpu-memory-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}.gpu-memory-inputs{padding:23px;display:grid;gap:13px}.gpu-memory-inputs label{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;font-weight:650;color:#ccdeeb}.gpu-memory-inputs select{width:150px;border:1px solid #455a70;background:#1a3044;color:#eaffff;padding:9px 7px;font-size:12px}.gpu-memory-formula{padding:13px 22px;border-top:1px solid #283e58;font:10px/1.5 var(--mono);color:#b0c5d8}.gpu-memory-results{padding:23px;background:linear-gradient(150deg,#1b2846,#122038);border-left:1px solid #2c415a}.gpu-memory-number{font:12px var(--mono);margin:6px 0 21px;display:flex;align-items:baseline;gap:8px}.gpu-memory-number strong{font:700 63px/1 var(--sans);letter-spacing:-.06em;color:#a1f6e6}.gpu-memory-number span{color:#afc4d9}.gpu-meter{height:23px;background:#25354b;overflow:hidden;border:1px solid #3b516a;border-radius:4px}.gpu-meter>div{height:100%;width:20%;background:linear-gradient(90deg,#55bdce,#aaf2a3);transition:width .25s ease}.gpu-meter-labels{display:flex;justify-content:space-between;margin:8px 0 15px;font:10px var(--mono);color:#c3d8e8}.gpu-memory-results p{font-size:12px!important;color:#cadbec!important;margin:0!important;line-height:1.5!important}.article-content .gpu-fineprint{font-size:11px!important;padding:13px 20px;margin:0!important;color:#b3c3d6!important;border-top:1px solid #293d56;line-height:1.5!important}
@media(max-width:800px){.gpu-arch-nodes{grid-template-columns:1fr;gap:10px}.gpu-arch-arrow{flex-direction:row}.gpu-arch-arrow i{transform:rotate(90deg);font-size:25px}.gpu-arch-node{min-height:165px}.gpu-arch-node .gpu-node-icon{font-size:32px;margin-bottom:8px}.gpu-storage-detail{grid-template-columns:1fr}.gpu-storage-graphic{min-height:150px}.gpu-storage-graphic>span{font-size:62px}.gpu-storage-tabs{grid-template-columns:repeat(2,1fr)}.gpu-step-nav{grid-template-columns:repeat(5,1fr)}.gpu-step-nav button{font-size:10px;padding:14px 7px}.gpu-step-content{grid-template-columns:1fr}.gpu-step-art{display:none}.gpu-flow-stages{grid-template-columns:repeat(2,1fr)}.gpu-flow-node:nth-child(2):after{display:none}.gpu-flow-toolbar{flex-direction:column}.gpu-memory-grid{grid-template-columns:1fr}.gpu-memory-results{border-left:0;border-top:1px solid #2c415a}}
@media(max-width:480px){.gpu-widget-head{font-size:9px;padding:12px}.gpu-arch-nodes{padding:13px}.gpu-arch-foot{gap:9px;font-size:8px}.gpu-storage-tabs button{font-size:11px;padding:13px 7px}.gpu-storage-copy{padding:19px}.gpu-storage-copy dl{grid-template-columns:1fr}.gpu-clarifier{flex-direction:column}.gpu-clarifier strong{flex:auto}.gpu-step-nav{grid-template-columns:repeat(5,1fr)}.gpu-step-nav button{font-size:0;gap:0;align-items:center}.gpu-step-nav button small{font-size:12px}.gpu-step-content{padding:17px}.gpu-flow-stages{padding:14px;grid-template-columns:1fr}.gpu-flow-node{min-height:100px}.gpu-flow-node:not(:last-child):after{display:none}.gpu-flow-node small{margin-bottom:10px}.gpu-flow-toolbar{padding:16px}.gpu-segments{width:100%}.gpu-segments button{flex:1}.gpu-memory-inputs{padding:14px}.gpu-memory-inputs label{font-size:11px}.gpu-memory-inputs select{width:135px}.gpu-hero-tag{bottom:12px;left:12px;font-size:9px;padding:10px 12px}.gpu-hero-tag strong{font-size:13px}}
@media print{.gpu-widget{background:#fff!important;color:#000!important;border:1px solid #bbb!important}.gpu-widget *{color:#111!important;box-shadow:none!important;text-shadow:none!important}.gpu-widget-head,.gpu-step-nav,.gpu-storage-tabs,.gpu-segments,.gpu-hero-tag{display:none!important}.gpu-hero-visual{height:200px!important}.gpu-arch-node,.gpu-flow-node,.gpu-memory-results,.gpu-storage-detail,.gpu-storage-graphic{background:white!important;border-color:#777!important}.gpu-arch-arrow i{color:#111!important}}
