@import url("/image-converter/styles.css?v=1");
/* device-test kit: shared UI on top of the site's base panel/button styles */
.dt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.dt-badge { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: #10130a; background: var(--accent); border-radius: 999px; padding: 4px 12px; }
.dt-badge.paused { background: var(--warn); }
.dt-banner { width: 100%; text-align: left; background: rgba(255, 180, 84, 0.08); border: 1px solid #4a3b1f; color: var(--warn); border-radius: 8px; padding: 10px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.dt-surface { position: relative; background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 16px; outline: none; }
.dt-surface:focus-visible { border-color: var(--accent-dim); }
.dt-surface.live { border-color: var(--accent-dim); box-shadow: 0 0 0 1px rgba(149, 214, 0, 0.15) inset; }
.dt-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.dt-tabs button { background: transparent; color: var(--muted); border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.dt-tabs button[aria-selected="true"] { color: var(--text); border-color: var(--accent); background: rgba(149, 214, 0, 0.06); }
.dt-stats { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; margin: 10px 0 0; }
.dt-stats b { color: var(--text); }
.dt-stats span { color: var(--muted); }
.dt-kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 12px; }
.dt-kv dt { color: var(--muted); }
.dt-kv dd { margin: 0; overflow-wrap: anywhere; }
.dt-log { list-style: none; margin: 8px 0 0; padding: 0; font-size: 12px; max-height: 180px; overflow: auto; }
.dt-log li { padding: 2px 0; border-top: 1px solid var(--border); color: var(--muted); }
.dt-log li b { color: var(--text); font-weight: 600; }
.dt-steps { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.dt-steps li { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; color: var(--muted); }
.dt-steps li.cur { color: var(--text); font-weight: 600; }
.dt-steps li.done { color: var(--good); }
.dt-steps li::before { content: "○"; width: 14px; flex: none; }
.dt-steps li.cur::before { content: "▶"; color: var(--accent); }
.dt-steps li.done::before { content: "✓"; }
.dt-prompt { font-size: 15px; margin: 10px 0; }
.dt-prompt strong { color: var(--accent); }
.dt-progress { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin: 6px 0; }
.dt-progress i { display: block; height: 100%; background: var(--accent); width: 0; transition: width 0.15s; }
@media (prefers-reduced-motion: reduce) { .dt-progress i { transition: none; } }
/* summary */
.checks { list-style: none; margin: 8px 0 0; padding: 0; }
.chk { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 13px; }
.chk .ic { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 12px; border: 1px solid var(--border); color: var(--muted); }
.chk.st-ok .ic { color: #10130a; background: var(--good); border-color: var(--good); }
.chk.st-possible-fault .ic { color: #10130a; background: var(--warn); border-color: var(--warn); }
.chk.st-not-received .ic { color: #fff; background: var(--bad); border-color: var(--bad); }
.chk .stat { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.chk.st-possible-fault .stat { color: var(--warn); }
.chk.st-ok .stat { color: var(--good); }
.chk.st-not-received .stat { color: var(--bad); }
.chk .cw { color: var(--text); margin-top: 2px; }
.chk .cy { color: var(--muted); font-size: 12px; margin-top: 2px; }
.cov { font-size: 14px; margin: 0; }
.lims { margin-top: 10px; font-size: 12px; color: var(--muted); }
.lims summary { cursor: pointer; }
.notes { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.notes li { padding: 3px 0 3px 18px; position: relative; color: var(--muted); }
.notes li::before { position: absolute; left: 0; }
.notes li.yes::before { content: "✓"; color: var(--good); }
.notes li.no::before { content: "–"; color: var(--warn); }
.dt-thr { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; }
.dt-thr output { min-width: 56px; font-weight: 700; }
table.raw { width: 100%; border-collapse: collapse; font-size: 11px; }
table.raw th, table.raw td { text-align: left; padding: 3px 6px; border-top: 1px solid var(--border); overflow-wrap: anywhere; }
table.raw th { color: var(--muted); font-weight: 600; }
.pill { display: inline-block; font-size: 11px; border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; color: var(--muted); margin: 2px 4px 2px 0; }
.pill.on { border-color: var(--accent); color: var(--text); background: rgba(149, 214, 0, 0.1); }
.pill.warn { border-color: #4a3b1f; color: var(--warn); }
.pill.bad { border-color: #4a2626; color: var(--bad); }
.bigstat { font-size: 32px; font-weight: 700; line-height: 1.1; }
.bigstat small { font-size: 13px; color: var(--muted); font-weight: 400; }
/* keyboard diagram */
.kbd { width: 100%; height: auto; display: block; user-select: none; }
.kbd .key rect { fill: #1a1d24; stroke: #2e333d; stroke-width: 1.5; }
.kbd .key text { fill: #8b90a0; font: 12px ui-monospace, Consolas, monospace; pointer-events: none; }
.kbd .key.seen rect { fill: #1f2a12; stroke: #4f7300; }
.kbd .key.seen text { fill: var(--text); }
.kbd .key.down rect { fill: var(--accent); stroke: var(--accent); }
.kbd .key.down text { fill: #10130a; font-weight: 700; }
.kbd .key.suspect rect { stroke: var(--warn); stroke-width: 3; }
.kbd .key.nx rect { fill: url(#hatch); stroke: #3a3f4a; stroke-dasharray: 4 3; }
.kbd .key.nx text { fill: #5c6272; }
.presets { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.presets li { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 0; border-top: 1px solid var(--border); }
.warnrow b, .warn b { color: var(--warn); }
@media (max-width: 600px) { .kbd .key text { font-size: 10px; } }
/* device tests use a wide test surface with results underneath */
body.dt .grid { grid-template-columns: 1fr; }
body.dt .col-right { position: static; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: start; }
body.dt .col-right .panel { margin-bottom: 0; }
@media (max-width: 900px) { body.dt .col-right { grid-template-columns: 1fr; } }
/* mouse */
.mouse-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 760px) { .mouse-grid { grid-template-columns: 1fr; } }
.mouse-area { min-height: 280px; cursor: crosshair; user-select: none; overflow: hidden; }
.mouse-area .area-hint { margin: 0 0 6px; }
.mfig { width: 100%; max-width: 320px; height: auto; display: block; margin: 0 auto 8px; }
.mfig .mbody { fill: #15171c; stroke: #3a3f4a; stroke-width: 2; }
.mfig .mbtn { fill: #1a1d24; stroke: #3a3f4a; stroke-width: 1.5; }
.mfig .mbtn.seen { fill: #1f2a12; stroke: #4f7300; }
.mfig .mbtn.down { fill: var(--accent); stroke: var(--accent); }
.mfig .mbtn.suspect { stroke: var(--warn); stroke-width: 3; }
.mfig .warrow { fill: #3a3f4a; }
.mfig .warrow.seen { fill: #4f7300; }
.mfig .warrow.down { fill: var(--accent); }
.mfig .mlab { fill: #8b90a0; font: 10px ui-monospace, Consolas, monospace; }
td.warn, dd.warn, .warn { color: var(--warn); }
/* controller */
.pad-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 760px) { .pad-grid { grid-template-columns: 1fr; } }
#padWrap { position: relative; }
#padWrap.dim .padfig { opacity: 0.35; }
.connect { position: absolute; inset: 16px; margin: 0; display: flex; flex-direction: column; justify-content: center; text-align: center; gap: 6px; z-index: 1; pointer-events: none; }
.padfig { width: 100%; max-width: 460px; height: auto; display: block; margin: 0 auto; }
.padfig .pbody { fill: #15171c; stroke: #3a3f4a; stroke-width: 2; }
.padfig .pb { fill: #1a1d24; stroke: #3a3f4a; stroke-width: 1.5; }
.padfig .pb.seen { fill: #26380f; stroke: #7fb300; }
.padfig .pb.on { fill: var(--accent); stroke: var(--accent); }
.padfig .plab { fill: #8b90a0; stroke: none; font: 10px ui-monospace, Consolas, monospace; }
.padfig .pb.on .plab { fill: #10130a; }
.padfig .tfill { fill: var(--accent); opacity: 0.55; pointer-events: none; }
.padfig .dz { fill: rgba(149, 214, 0, 0.08); stroke: none; }
.padfig .trail { fill: none; stroke: var(--warn); stroke-width: 1; opacity: 0.8; }
.padfig .dot { fill: #e8eaf0; stroke: #10130a; stroke-width: 1.5; }
/* hub */
.hubcard h2 a { color: var(--accent); text-decoration: none; }
.hubcard p { margin: 6px 0 10px; color: var(--muted); font-size: 14px; }
/* reaction time test */
.rt-surface { position: relative; min-height: 62vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; border-radius: 16px; background: #0d0f14; border: 1px solid var(--border); color: var(--text); cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; outline: none; }
.rt-surface:focus-visible { border-color: var(--accent-dim); }
.rt-surface.live { border-color: var(--accent-dim); }
.rt-surface.disabled { cursor: not-allowed; opacity: 0.6; }
.rt-surface.go { background: #f2f4f0; color: #10130a; border-color: #f2f4f0; }
.rt-surface.go .rt-big::before { content: "⚡ "; }
.rt-big { font-size: clamp(28px, 6vw, 64px); font-weight: 800; line-height: 1.1; }
.rt-sub { margin-top: 10px; font-size: 15px; color: var(--muted); min-height: 1.4em; }
.rt-surface.go .rt-sub { color: #3a3f4a; }
.rt-tag { position: absolute; top: 12px; left: 16px; font-size: 12px; color: var(--muted); letter-spacing: 0.04em; }
.rt-hint { position: absolute; bottom: 14px; font-size: 12px; color: var(--muted); margin: 0; }
.rt-dots { display: flex; gap: 8px; margin-top: 18px; }
.rt-dots i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--border); background: transparent; display: block; }
.rt-dots i.on { background: var(--accent); border-color: var(--accent); }
.rt-dots i.on.slow { background: var(--warn); border-color: var(--warn); }
.rt-surface.go .rt-dots i { border-color: #b8bcc4; }
.rt-bar { margin: 10px 0; }
.rt-median { font-size: 48px; }
.rt-strip { display: flex; gap: 6px; align-items: flex-end; height: 70px; margin: 10px 0; }
.rt-strip .rbar { flex: 1; max-width: 48px; background: var(--accent); height: var(--h, 40%); border-radius: 4px 4px 0 0; font-size: 11px; color: #10130a; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 2px; opacity: 0.9; }
.rt-strip .rbar.slow { background: var(--warn); }
.rt-checks { margin: 8px 0; font-size: 13px; }
:fullscreen .rt-surface, #focusWrap:fullscreen .rt-surface { min-height: 100vh; border-radius: 0; }
@media (max-width: 600px) { .rt-surface { min-height: 70vh; } .rt-median { font-size: 40px; } }
/* mic test */
.btn.big { font-size: 18px; padding: 14px 26px; }
.mic-surface { position: relative; min-height: 46vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 28px 20px; }
.mic-big { font-size: clamp(22px, 4vw, 34px); font-weight: 800; line-height: 1.15; max-width: 760px; }
.mic-sub { font-size: 15px; color: var(--muted); max-width: 720px; min-height: 1.4em; }
.mic-ring { width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(var(--accent) calc(var(--p, 0) * 360deg), var(--border) 0); mask: radial-gradient(circle, transparent 58%, #000 60%); -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%); }
.mic-meter { width: min(520px, 100%); display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.mic-meter .track { position: relative; flex: 1; height: 14px; background: var(--border); border-radius: 7px; overflow: hidden; }
.mic-meter .bar { display: block; height: 100%; width: 0; background: #6aa0ff; transition: width 0.05s linear; }
.mic-meter .bar.good { background: var(--accent); }
.mic-meter .bar.hot { background: var(--bad); }
.mic-meter .mark { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,0.35); }
.mic-meter .mark.m20 { left: 66.7%; } .mic-meter .mark.m9 { left: 85%; }
.mic-meter span { min-width: 72px; text-align: right; }
.mic-settings { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; margin: 12px 0; }
@media (max-width: 760px) { .mic-settings { grid-template-columns: 1fr; } }
.mic-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.mic-card h3 { margin: 0 0 8px; font-size: 15px; }
.obs-kv { font-size: 14px; margin-bottom: 10px; }
.obs-kv dd { font-weight: 700; color: var(--accent); }
/* dead pixel test */
.dp-stage { position: relative; min-height: 62vh; border-radius: 16px; overflow: hidden; background: var(--panel-2); border: 1px solid var(--border); }
.dp-landing { padding: 28px 22px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; min-height: 62vh; justify-content: center; }
.dp-prep { font-size: 14px; color: var(--muted); max-width: 640px; margin: 0; }
.dp-start { max-width: 420px; }
.dp-field { display: none; position: absolute; inset: 0; forced-color-adjust: none; color-scheme: only light; }
.dp-stage.run .dp-landing { display: none; }
.dp-stage.run .dp-field { display: block; }
.dp-stage.run { border: 0; border-radius: 0; }
.dp-stage.fill { position: fixed; inset: 0; z-index: 100; min-height: 0; }
body.dp-lock { overflow: hidden; }
#stageWrap:fullscreen, #stageWrap:-webkit-full-screen { background: #000; }
#stageWrap:fullscreen .dp-stage { position: fixed; inset: 0; min-height: 0; }
.dp-c-black, .dp-c-black2 { background: #000; --ring: #fff; }
.dp-c-white { background: #fff; --ring: #000; }
.dp-c-red { background: rgb(255 0 0); --ring: #fff; }
.dp-c-green { background: rgb(0 255 0); --ring: #000; }
.dp-c-blue { background: rgb(0 0 255); --ring: #fff; }
.dp-c-gray { background: #808080; --ring: #fff; }
@media (color-gamut: p3) { .dp-c-red { background: color(display-p3 1 0 0); } .dp-c-green { background: color(display-p3 0 1 0); } .dp-c-blue { background: color(display-p3 0 0 1); } }
.dp-stage.quiet { cursor: none; }
.dp-stage.quiet .dp-ctl { opacity: 0; pointer-events: none; }
.dp-hint { position: absolute; top: 14px; left: 0; right: 0; margin: 0 auto; width: fit-content; background: rgba(14, 15, 18, 0.85); color: #e6e8ee; font-size: 15px; padding: 8px 14px; border-radius: 999px; opacity: 0; transition: opacity 0.3s; pointer-events: none; max-width: 90%; text-align: center; }
.dp-hint.show { opacity: 1; }
.dp-ring { position: absolute; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; border: 2px solid var(--ring, #fff); box-shadow: 0 0 0 1px rgba(128, 128, 128, 0.6); pointer-events: none; }
.dp-ctl { position: absolute; left: 0; right: 0; margin: 0 auto; width: fit-content; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; background: rgba(14, 15, 18, 0.88); color: #e6e8ee; border-radius: 12px; padding: 8px 10px; transition: opacity 0.3s; max-width: 96%; font-size: 12px; }
.dp-step { font-weight: 700; flex: 1 1 100%; text-align: center; }
.dp-ctlhint { color: #b7bcc8; flex: 1 1 100%; text-align: center; }
.dp-stage.asking .dp-ctl { opacity: 0; pointer-events: none; }
.dp-prog { display: block; width: 100%; height: 3px; background: #2a2e37; border-radius: 2px; overflow: hidden; order: 9; }
.dp-prog i { display: block; height: 100%; width: 0; background: var(--accent); }
.dp-ask { position: absolute; left: 0; right: 0; margin: 0 auto; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); background: rgba(14, 15, 18, 0.92); color: #e6e8ee; border-radius: 12px; padding: 12px 14px; max-width: 94%; width: fit-content; font-size: 14px; z-index: 2; }
.dp-ask.top { bottom: auto; top: 56px; }
.dp-ask p { margin: 0 0 8px; }
.dp-vid { position: fixed; width: 1px; height: 1px; opacity: 0.01; left: -10px; top: 0; pointer-events: none; }
.dp-headline { font-size: 24px; }
.dp-result { display: grid; grid-template-columns: minmax(0, 220px) 1fr; gap: 16px; align-items: start; margin-top: 8px; }
@media (max-width: 600px) { .dp-result { grid-template-columns: 1fr; } }
.dp-map { width: 100%; height: auto; display: block; }
.dp-map .mapbg { fill: #1a1d24; stroke: #3a4150; stroke-width: 0.6; }
.dp-map .mk { fill: #8b90a0; } .dp-map .mk.bright { fill: #ffd166; } .dp-map .mk.dark { fill: #6aa0ff; }
.dp-map text { fill: #e6e8ee; font-size: 5px; }
.dp-policy p { margin: 6px 0; font-size: 14px; }
.dp-policy .dp-may { color: var(--warn); font-weight: 600; }
#brand, #line { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 13px; max-width: 100%; }