.hero-controls{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:20px}.hero-controls button{display:inline-flex;align-items:center;gap:12px;min-height:40px;padding:9px 13px;border-radius:11px;border:1px solid #444;background:linear-gradient(150deg,#262626,#131313);color:#ddd;font-size:.75rem;box-shadow:inset 0 1px 0 #ffffff0b;transition:background .2s,border-color .2s,transform .2s}.hero-controls button:hover{border-color:#8a8a8a;background:#282828;transform:translateY(-1px)}.hero-controls #hero-toggle::before{content:'Ⅱ';font-size:13px}.hero-controls #hero-toggle[aria-pressed=false]::before{content:'▷'}.hero-motion{height:235px}.hero-side{min-width:0}
.data-deck{position:relative;min-width:0;align-self:center;padding-top:138px;perspective:1000px}.deck-tabs{position:absolute;inset:0 0 auto;height:145px}.deck-tabs button{--deck-rank:0;position:absolute;top:calc(var(--deck-rank) * 44px);left:calc((2 - var(--deck-rank)) * 8px);width:calc(100% - (2 - var(--deck-rank)) * 16px);height:50px;display:flex;align-items:flex-start;gap:14px;padding:14px 18px;border:1px solid #454545;border-radius:12px 12px 0 0;background:linear-gradient(130deg,#303030,#191919);color:#bbb;text-align:start;font-family:Arial,sans-serif;transition:top .36s ease,left .36s ease,width .36s ease,background .2s}
.deck-tabs button:nth-child(2){--deck-rank:1}.deck-tabs button:nth-child(3){--deck-rank:2}.deck-tabs button[aria-selected=true]{background:#090909;color:#eee;border-color:#666}.deck-tabs button:hover{background:#353535;color:#fff}.deck-tabs button>span:first-child{font:10px/1.5 Consolas,monospace;letter-spacing:.05em;padding-top:2px;white-space:nowrap}.deck-tabs strong{font-weight:400;font-size:.8125rem;flex:1}.deck-tabs button>span:last-child{font:18px/1 Consolas,monospace}.deck-tabs button:focus-visible{outline-offset:-5px;z-index:5!important}
.deck-panel{position:relative;z-index:4;background:#090909;border:1px solid #666;border-top:0;border-radius:0 0 12px 12px;padding:12px 24px 24px;box-shadow:10px 13px 0 #1b1b1b;min-height:395px}.deck-panel pre{margin:5px 0 23px;min-height:84px;font:12px/1.8 Consolas,'Courier New',monospace;white-space:pre-wrap;overflow-wrap:anywhere;color:#a5a5a5}.deck-direction{display:flex;align-items:center;gap:13px;font-size:.75rem;color:#ddd;margin-bottom:20px}.deck-direction>span{font-size:24px}.deck-tree{font:12px/1.6 Consolas,'Courier New',monospace;min-height:220px}.deck-tree details{margin:0}.deck-tree summary{cursor:pointer;padding:9px 0;color:#ddd;border-bottom:1px solid #242424;list-style-position:inside;min-height:36px}.deck-tree summary::marker{color:#888}.deck-tree summary small{font:10px/1.4 Arial,sans-serif;color:#888;margin-inline-start:8px}.tree-children{border-inline-start:1px solid #383838;margin-inline-start:5px;padding-inline-start:15px}.tree-row{display:flex;justify-content:space-between;gap:18px;padding:9px 0;border-bottom:1px solid #242424;overflow-wrap:anywhere}.tree-row>span{color:#999}.tree-row b{font-weight:400;color:#eee;text-align:end}.deck-panel .data-bottom{border-top:1px solid #333;padding-top:16px;margin-top:22px;gap:10px}
@media(max-width:1000px){.product-heading{gap:38px}.deck-panel{padding-inline:18px}.deck-tabs button{padding-inline:13px;gap:10px}.deck-tabs strong{font-size:.75rem}}
@media(max-width:760px){.hero-side{display:block;padding-top:24px;margin-top:20px;max-width:430px;width:100%;justify-self:center}.hero-motion{height:205px}.hero-side>p{margin:4px 0 10px}.hero-controls{margin-top:12px}.data-deck{width:100%;max-width:550px;margin-top:12px}.deck-tabs button{min-height:44px}.deck-tree summary{min-height:44px;padding-block:12px}}
@media(max-width:430px){.deck-panel{padding-inline:14px;box-shadow:5px 8px 0 #1b1b1b}.deck-tabs button>span:first-child{font-size:9px}.deck-tabs button{gap:8px}.tree-children{padding-inline-start:10px}.deck-tree{font-size:11px}.deck-tabs strong{font-size:.75rem}.hero-controls button{min-height:44px}}
@media(prefers-reduced-motion:reduce){.hero-controls button:hover{transform:none}.deck-tabs button{transition:none}}
/* Tilted cards, with deliberately simple reading views. */
.data-deck{transform:rotate(-2deg);transform-origin:center center;margin-inline:8px;padding-top:138px}
.deck-tabs button{top:calc(var(--deck-rank) * 44px);height:50px;transform:rotate(calc((2 - var(--deck-rank)) * 1.2deg));transform-origin:bottom right;padding-block:11px;}
.deck-panel{padding:24px 26px 23px;min-height:0;box-shadow:10px 14px 0 #1d1d1d}
.reader-heading{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:30px;color:#b8b8b8;font:10px/1.6 Arial,sans-serif;letter-spacing:.075em}
.reader-heading>span:last-child{font:24px/1 Consolas,monospace;color:#ddd;flex-shrink:0}
.deck-panel pre{min-height:85px;margin:0 0 24px;font-size:12px;line-height:1.85}
.deck-direction{margin-bottom:25px}.reading-rows{margin:0;font:13px/1.6 Consolas,'Courier New',monospace}
.reading-rows>div{display:flex;justify-content:space-between;gap:18px;border-bottom:1px solid #2e2e2e;min-height:43px;padding:11px 0}
.reading-rows dt{color:#aaa;overflow-wrap:anywhere}.reading-rows dd{margin:0;color:#eee;overflow-wrap:anywhere;text-align:end}
.reading-rows .reader-nested{padding-inline-start:23px}.deck-panel .data-bottom{border-top:0;margin-top:29px;padding-top:0}
@media(max-width:760px){.data-deck{width:calc(100% - 16px);margin-inline:8px}.deck-panel{padding-inline:22px}.deck-tabs button{height:50px}}
@media(max-width:430px){.data-deck{transform:rotate(-1.3deg)}.deck-panel{padding:20px 16px}.reader-heading{font-size:9px;letter-spacing:.04em;gap:10px}.reading-rows{font-size:12px}.deck-panel pre{font-size:11px}.deck-tabs button{gap:8px;padding-inline:11px}.reader-heading>span:last-child{font-size:20px}}