.design-barometers { margin: 16px 0 20px; max-width: 290px; }
.design-barometers[hidden] { display: none; }
.design-dials { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.design-dial { position: relative; min-width: 0; isolation: isolate; }
.dial-face { position: relative; aspect-ratio: 5 / 3; }
.dial-face > img { display: block; width: 100%; height: 100%; filter: saturate(.7) brightness(.88); }
.dial-mechanism { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(1px 2px 1px #0009); }
.dial-needle { transform-origin: 50px 47.3px; transform: rotate(var(--dial-angle,0deg)); transition: transform 700ms cubic-bezier(.22,.8,.25,1); }
.dial-name,.dial-level { display: block; text-align: center; pointer-events: none; }
.dial-name { margin-top: 6px; color: #e1d1ae; font: 500 14px/1.2 'Barlow Condensed',sans-serif; letter-spacing: .13em; text-shadow: 0 1px 1px #000; }
.dial-level { margin-top: 4px; color: #a9baae; font: 400 11px/1.2 'Barlow Condensed',sans-serif; letter-spacing: .045em; }
@media(max-width:760px) { .design-barometers { max-width: 280px; margin-block: 16px 20px; } .design-dials { gap: 16px; } }
@media(max-width:360px) { .dial-name { font-size: 12px; } .dial-level { font-size: 10px; } }
@media(prefers-reduced-motion:reduce) { .dial-needle { transition: none; } }
 .showcase-page .detail-copy .tags { margin-bottom: 16px; }