/* Miniature feature scenes. The script measures chrome before sizing the media. */
#platform-tools { padding-block:clamp(16px,3svh,36px); }
#platform-tools > .cp-shell { width:min(1280px,calc(100% - clamp(24px,4vw,64px))); }
#platform-tools .cp-tools-stage { min-width:0; }
#platform-tools .cp-tools-heading { margin-bottom:16px; }
#platform-tools .cp-tools-eyebrow { margin-bottom:8px; }
#platform-tools h2 { font-size:clamp(28px,3.8vw,52px); line-height:1.08; }
#platform-tools .cp-tools-heading > p { margin-top:8px; font-size:14px; line-height:1.5; }
#platform-tools .cp-tools-layout { grid-template-columns:clamp(180px,17vw,220px) minmax(0,1fr); align-items:stretch; }
#platform-tools .cp-tools-nav { display:grid; grid-template-rows:repeat(6,minmax(44px,1fr)); grid-template-columns:minmax(0,1fr); gap:4px; padding:8px; overflow:visible; }
#platform-tools .cp-tools-tab { min-height:44px; min-width:0; gap:8px; padding:10px 12px; white-space:normal; font-size:14px; line-height:1.3; }
#platform-tools .cp-tools-tab > span:first-child { overflow-wrap:normal; }
#platform-tools .cp-tools-product { min-width:0; }
#platform-tools .cp-tools-preview { flex:none; }
#platform-tools .cp-tools-appbar { min-height:38px; padding:8px 14px; gap:12px; font-size:11px; line-height:1.3; }
#platform-tools .cp-tools-appbar b { width:22px; height:22px; }
#platform-tools .cp-tools-screen { display:block; width:100%; height:var(--tools-scene-height,auto); min-height:0; aspect-ratio:16/9; background:#ead8c1; }
#platform-tools .cp-tools-panel { position:absolute; inset:0; min-width:0; overflow:hidden; }
#platform-tools .cp-tools-illustration { display:block; width:100%; height:100%; object-fit:contain; object-position:center; }
#platform-tools .cp-tools-caption { display:grid; grid-template-columns:minmax(0,1fr) auto; flex:none; align-items:center; min-height:0; gap:12px; padding:12px 16px; }
#platform-tools .cp-tools-caption > div:first-child { display:block; min-width:0; }
#platform-tools .cp-tools-caption h3 { margin:0; font-size:15px; line-height:1.3; overflow-wrap:normal; }
#platform-tools .cp-tools-caption p { margin:4px 0 0; max-width:none; font-size:13px; line-height:1.5; }
#platform-tools .cp-tools-controls { grid-column:auto; grid-row:auto; align-self:center; gap:4px; margin:0; }
#platform-tools .cp-tools-controls button { width:44px; height:44px; flex:0 0 44px; }
#platform-tools .cp-tools-preview-count { margin-right:4px; font-size:10px; }
#platform-tools .cp-tools-disclaimer { position:absolute; width:1px; height:1px; padding:0; margin:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media (max-width:900px), (max-height:640px) {
 #platform-tools .cp-tools-layout { display:block; }
 #platform-tools .cp-tools-nav { grid-template-rows:none; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:minmax(44px,auto); gap:4px; padding:6px; }
 #platform-tools .cp-tools-tab { justify-content:center; padding:6px 4px; text-align:center; font-size:12px; }
 #platform-tools .cp-tools-tab > span:last-child { display:none; }
 #platform-tools .cp-tools-product { border-left:0; }
}
@media (min-width:600px) and (max-height:640px) {
 #platform-tools .cp-tools-nav { grid-template-columns:repeat(6,minmax(0,1fr)); }
}
@media (max-width:480px) {
 #platform-tools .cp-tools-caption { gap:6px 8px; padding:10px 12px; }
 #platform-tools .cp-tools-caption > div:first-child { display:contents; }
 #platform-tools .cp-tools-caption h3 { grid-column:1; grid-row:1; font-size:13px; align-self:center; }
 #platform-tools .cp-tools-caption p { grid-column:1 / -1; grid-row:2; margin:0; font-size:12px; }
 #platform-tools .cp-tools-controls { grid-column:2; grid-row:1; }
 #platform-tools .cp-tools-preview-count { margin-right:0; font-size:9px; }
 #platform-tools .cp-tools-appbar { padding-inline:12px; font-size:10px; }
}
@media (max-height:640px) {
 #platform-tools .cp-tools-heading { margin-bottom:12px; }
 #platform-tools .cp-tools-eyebrow { font-size:10px; margin-bottom:6px; }
 #platform-tools h2 { font-size:clamp(26px,3.8vw,38px); }
 #platform-tools .cp-tools-heading > p { display:none; }
}
@media (max-width:359px) {
 #platform-tools .cp-tools-tab { font-size:11px; }
}
@media (max-width:319px) {
 #platform-tools .cp-tools-caption { grid-template-columns:minmax(0,1fr); }
 #platform-tools .cp-tools-caption h3 { grid-column:1; grid-row:1; }
 #platform-tools .cp-tools-caption p { grid-column:1; grid-row:2; }
 #platform-tools .cp-tools-controls { grid-column:1; grid-row:3; justify-self:end; }
}
@media (max-height:480px) and (min-width:600px) {
 #platform-tools .cp-tools-heading > p { display:none; }
}