.np-viewer { margin-block: 2rem; padding: clamp(1rem, 3vw, 2rem); border: 1px solid #7b8d96; border-radius: 16px; background: #fff; color: #192d38; }
[data-viewer-canvas] { position: relative; width: 100%; height: clamp(280px, 50vw, 620px); overflow: hidden; border-radius: 12px; background: #f5f7f8; }
[data-viewer-canvas]:empty { display: none; }
[data-viewer-canvas] canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }
.np-viewer [hidden] { display: none !important; }
.np-viewer button, .np-viewer select { min-height: 44px; max-width: 100%; padding: .65rem 1rem; font: inherit; line-height: 1.4; color: #192d38; background: #fff; border: 1px solid #7b8d96; border-radius: 8px; white-space: normal; cursor: pointer; }
.np-viewer button:hover:not(:disabled) { color: #fff; background: #285f75; border-color: #285f75; }
.np-viewer button:disabled { cursor: default; }
.np-viewer :where(button, select, input, summary, a):focus-visible { outline: 3px solid #285f75; outline-offset: 4px; }
[data-viewer-load] { background: #285f75 !important; color: #fff !important; }
[data-viewer-status] { min-height: 1.65em; margin-block: 1rem; overflow-wrap: anywhere; }
.np-viewer-instructions { max-width: 68ch; margin-block: 1rem; font-size: .9375rem; }
.np-viewer-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 1rem; }
.np-viewer-part-label { display: flex; flex-direction: column; gap: .5rem; max-width: 32rem; margin-block: 1.5rem; font-weight: 600; }
.np-viewer-motion { min-width: 0; margin-block: 1rem; padding: 1rem; border: 1px solid #7b8d96; border-radius: 12px; }
.np-viewer-motion legend { padding-inline: .4rem; font-weight: 600; overflow-wrap: anywhere; }
.np-viewer-motion input[type="range"] { display: block; width: 100%; min-height: 44px; margin-block: .75rem; accent-color: #285f75; }
.np-viewer-motion output { display: block; font-variant-numeric: tabular-nums; }
.np-viewer-motion:disabled { border-style: dashed; }
[data-viewer-measures] { margin-block: 1.5rem; overflow-x: auto; }
[data-viewer-measures] table { width: 100%; border-collapse: collapse; text-align: start; }
[data-viewer-measures] :where(th, td) { padding: .75rem; border: 1px solid #7b8d96; overflow-wrap: anywhere; }
@media (max-width: 480px) { .np-viewer-toolbar button { flex: 1 1 45%; } [data-viewer-canvas] { height: 300px; } }
@media (prefers-reduced-motion: reduce) { .np-viewer *, .np-viewer *::before, .np-viewer *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media print { [data-viewer-canvas], [data-viewer-controls], [data-viewer-load], [data-viewer-dimensions] { display: none !important; } [data-viewer-measures] { display: block !important; } }