:root {color-scheme: dark; font: 14px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #edf1ef; background: #111917}
* {box-sizing: border-box} body {margin: 0; height: 100dvh; min-height: 360px; display: grid; grid-template-rows: auto 1fr auto}
header {padding: max(18px,env(safe-area-inset-top)) 24px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #31443e; gap: 16px}
h1 {font-size: clamp(18px, 3vw, 24px); margin: 4px 0 0; font-weight: 600; overflow-wrap: anywhere} .eyebrow {font-size: 10px; letter-spacing: .18em; color: #a6c3b7} .badge {font-size: 10px; letter-spacing: .1em; border: 1px solid #587366; padding: 7px 10px; white-space: nowrap}
#viewport {position: relative; min-height: 0; overflow: hidden; outline-offset: -3px; background: radial-gradient(ellipse at 50% 40%, #293c33, #14221b)} canvas {display: block; touch-action: none; width: 100%; height: 100%}
#panel {padding: 14px 24px max(18px,env(safe-area-inset-bottom)); border-top: 1px solid #31443e; background: #16211d} p {margin: 0 0 8px; line-height: 1.5} #inspection {color: #b0c5ba; min-height: 21px}.fine {font-size: 11px; color: #9cb1a6; margin: 12px 0 0}
.actions {display: flex; gap: 8px; flex-wrap: wrap; align-items: center} button,.button {font: inherit; font-size: 11px; letter-spacing: .07em; cursor: pointer; color: #ecf5ee; background: #314b3d; border: 1px solid #64816d; border-radius: 0; padding: 11px 14px; min-height: 40px} button:disabled {opacity: .4; cursor: default} button:focus-visible,.button:focus-within {outline: 2px solid #dcf3d2; outline-offset: 3px} #open {max-width: 240px; font-size: 11px} #open-label {display: none} [hidden] {display: none !important}
@media (max-width: 560px) {header {padding-inline: 16px} #panel {padding-inline: 16px}.fine {font-size: 10px} #inspection {font-size: 12px}.actions {gap: 6px} button,.button {padding-inline: 11px} #open {max-width: 100%; width: 100%}}