.na-tools,.na-tools *{box-sizing:border-box}
.na-tools{display:block;position:relative;z-index:60;border-bottom:1px solid #111;padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left));background:rgba(255,255,255,.55);font-family:"Space Mono",ui-monospace,monospace;color:#111}
.na-tools-inner{display:flex;align-items:center;justify-content:space-between;gap:10px;max-width:530px;margin-inline:auto}
.na-clock{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:1px solid #111;padding:5px 7px;min-height:44px;font-size:11px;letter-spacing:.02em;line-height:1.2;white-space:nowrap;background:rgba(255,255,255,.6)}
.na-palette{min-height:44px;padding:6px 8px;border:1px solid #111;border-radius:0;background:rgba(255,255,255,.6);color:#111;font:inherit;font-size:clamp(9px,2.5vw,11px);letter-spacing:.02em;cursor:pointer}
.na-palette:hover{background:#111;color:#fff}
.na-tools button:focus-visible{outline:3px solid #fa38ce;outline-offset:3px}
.srf.srf-hd{position:static;display:flex;flex-direction:column;align-items:center;gap:2px;flex-shrink:0;margin:0;padding:0;line-height:1}
.srf-btn{position:relative;display:block;width:44px;height:44px;padding:0;border:2px solid #111;border-radius:50%;box-shadow:0 0 0 2px #fff;background:#111;cursor:pointer}
.srf-disc{display:block;width:100%;height:100%;border-radius:50%;object-fit:contain}.srf-lbl{font:7px/1 ui-monospace,monospace;letter-spacing:.03em;text-align:center;white-space:nowrap}.srf-br{display:none}
.srf-pp{position:absolute;right:-3px;bottom:-2px;width:14px;height:14px;background:#fff;border:1px solid #111;border-radius:50%}.srf-pp:before{content:"";position:absolute;top:3px;left:5px;border-top:3px solid transparent;border-bottom:3px solid transparent;border-left:4px solid #111}.is-on .srf-pp:before{top:3px;left:4px;width:5px;height:6px;border:0;border-inline:2px solid #111}
.srf.is-on .srf-disc{animation:na-spin 1.8s linear infinite}@keyframes na-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.srf.is-on .srf-disc{animation:none}}
@media(max-width:359px){.na-tools-inner{gap:6px}.na-clock{font-size:10px;padding-inline:5px}.na-palette{max-width:115px;line-height:1.3;white-space:normal}.srf-lbl{font-size:6px}}