[data-tool-root="monitor-color-test"]{--g50:#fbfbfb;--g100:#f7f7f7;--g150:#f2f2f2;--g200:#eee;--g300:#ddd;--g500:#999;--g600:#666;--g800:#222;--g900:#111;--border:#ddd;--danger:#a12424;--success:#276749;box-sizing:border-box;width:100%;padding:0 360px 40px 30px;color:#111;font:15px/1.65 "Noto Sans SC",system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
[data-tool-root="monitor-color-test"] *,[data-tool-root="monitor-color-test"] *::before,[data-tool-root="monitor-color-test"] *::after{box-sizing:border-box}[data-tool-root="monitor-color-test"] [hidden]{display:none!important}[data-tool-root="monitor-color-test"] h1,[data-tool-root="monitor-color-test"] h2,[data-tool-root="monitor-color-test"] h3,[data-tool-root="monitor-color-test"] p{margin-top:0}[data-tool-root="monitor-color-test"] .tool-page-header{padding:24px 0 18px}[data-tool-root="monitor-color-test"] h1{margin-bottom:8px;font-size:30px;line-height:1.2;font-weight:800;letter-spacing:-.5px}[data-tool-root="monitor-color-test"] .page-description{max-width:72ch;margin-bottom:0;color:#444;font-size:16px}[data-tool-root="monitor-color-test"] .tool-page-divider{height:1px;margin-bottom:24px;background:var(--border)}
[data-tool-root="monitor-color-test"] .workspace-grid{display:grid;grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);gap:16px;align-items:start}[data-tool-root="monitor-color-test"] .input-panel,[data-tool-root="monitor-color-test"] .result-panel{min-width:0;padding:20px;border:1px solid var(--border);border-radius:6px;background:#f2f2f2}[data-tool-root="monitor-color-test"] .input-panel>h3,[data-tool-root="monitor-color-test"] .result-panel>h3{margin-bottom:16px;font-size:18px;line-height:1.35}[data-tool-root="monitor-color-test"] .field-group+.field-group{margin-top:15px}[data-tool-root="monitor-color-test"] .field-label{display:block;margin-bottom:8px;font-weight:800}
[data-tool-root="monitor-color-test"] .segmented{display:grid;gap:1px;padding:1px;overflow:hidden;border:1px solid var(--border);border-radius:10px;background:#d9d9d9}[data-tool-root="monitor-color-test"] .segmented--palette{grid-template-columns:repeat(4,minmax(0,1fr))}[data-tool-root="monitor-color-test"] .segmented--four{grid-template-columns:repeat(4,minmax(0,1fr))}[data-tool-root="monitor-color-test"] .segmented--five{grid-template-columns:repeat(5,minmax(0,1fr))}[data-tool-root="monitor-color-test"] .segmented__item{position:relative;min-width:0;min-height:48px;padding:10px 11px;border:0;border-radius:0;background:#fff;color:#111;font:inherit;font-weight:750;line-height:1.3;text-align:center;cursor:pointer;overflow-wrap:anywhere;transition:background-color .15s ease,color .15s ease}[data-tool-root="monitor-color-test"] .segmented__item:hover{background:var(--g100)}[data-tool-root="monitor-color-test"] .segmented__item.is-active{background:#111;color:#fff}[data-tool-root="monitor-color-test"] .color-option{display:flex;align-items:center;justify-content:center;gap:7px}[data-tool-root="monitor-color-test"] .color-option span{width:14px;height:14px;flex:0 0 auto;border:1px solid rgba(0,0,0,.35);border-radius:50%;background:var(--swatch)}[data-tool-root="monitor-color-test"] .color-option.is-active span{border-color:rgba(255,255,255,.7)}
[data-tool-root="monitor-color-test"] button:focus-visible,[data-tool-root="monitor-color-test"] input:focus-visible,[data-tool-root="monitor-color-test"] [tabindex]:focus-visible,[data-tool-root="monitor-color-test"] summary:focus-visible,[data-tool-root="monitor-color-test"] a:focus-visible{outline:3px solid rgba(17,17,17,.3);outline-offset:2px}[data-tool-root="monitor-color-test"] .custom-color-row{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:8px;align-items:center}[data-tool-root="monitor-color-test"] input[type="color"]{width:46px;height:44px;padding:3px;border:1px solid #222;border-radius:6px;background:#fff}[data-tool-root="monitor-color-test"] input[type="text"]{width:100%;min-height:44px;padding:9px 12px;border:1px solid #222;border-radius:6px;background:#fff;color:#111;font:inherit;font-weight:700;text-transform:uppercase}[data-tool-root="monitor-color-test"] .field-help,[data-tool-root="monitor-color-test"] .field-error{margin:6px 0 0;font-size:13px}[data-tool-root="monitor-color-test"] .field-help{color:#666}[data-tool-root="monitor-color-test"] .field-error{color:var(--danger)}
[data-tool-root="monitor-color-test"] .setup-checklist{margin:18px 0 0;padding:14px;border:1px solid var(--border);border-radius:6px;background:#fff}[data-tool-root="monitor-color-test"] .setup-checklist legend{padding:0 6px;font-weight:800}[data-tool-root="monitor-color-test"] .setup-checklist label{display:flex;gap:9px;align-items:flex-start;padding:6px 0;color:#444}[data-tool-root="monitor-color-test"] .setup-checklist input{width:18px;height:18px;flex:0 0 auto;margin-top:3px;accent-color:#111}[data-tool-root="monitor-color-test"] .input-panel__footer{margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}[data-tool-root="monitor-color-test"] .button-row{display:flex;flex-wrap:wrap;gap:8px}[data-tool-root="monitor-color-test"] .btn{min-height:44px;padding:10px 16px;border:1px solid #222;border-radius:6px;background:#fff;color:#111;font:inherit;font-weight:750;cursor:pointer}[data-tool-root="monitor-color-test"] .btn:hover{background:var(--g100)}[data-tool-root="monitor-color-test"] .btn-primary{background:#111;color:#fff}[data-tool-root="monitor-color-test"] .btn-primary:hover{background:#222}[data-tool-root="monitor-color-test"] .btn-compact{padding-inline:12px}[data-tool-root="monitor-color-test"] .status-line{margin:10px 0 0;padding:10px 12px;border:1px solid var(--border);border-radius:6px;background:#fff;color:#444}[data-tool-root="monitor-color-test"] .status-line[data-tone="error"]{border-color:var(--danger);color:var(--danger)}[data-tool-root="monitor-color-test"] .status-line[data-tone="success"]{border-color:var(--success);color:var(--success)}
[data-tool-root="monitor-color-test"] .result-surface{display:grid;gap:14px;padding:16px;border:1px solid var(--border);border-radius:6px;background:#fff}[data-tool-root="monitor-color-test"] .color-stage{position:relative;display:grid;place-items:center;width:100%;height:300px;overflow:hidden;border:1px solid #222;border-radius:6px;background:#ff0000;color:#fff;touch-action:manipulation}[data-tool-root="monitor-color-test"] .stage-hint{max-width:calc(100% - 24px);padding:6px 10px;border:1px solid currentColor;border-radius:999px;background:rgba(0,0,0,.22);font-size:13px;text-align:center}[data-tool-root="monitor-color-test"] .color-stage[data-text-tone="dark"]{color:#111}[data-tool-root="monitor-color-test"] .color-stage[data-text-tone="dark"] .stage-hint{background:rgba(255,255,255,.45)}[data-tool-root="monitor-color-test"] .color-stage:fullscreen{width:100vw;height:100vh;border:0;border-radius:0}[data-tool-root="monitor-color-test"] .color-stage:fullscreen .stage-hint{display:none}[data-tool-root="monitor-color-test"] .fullscreen-controls{position:absolute;left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px;border:1px solid rgba(255,255,255,.45);border-radius:6px;background:rgba(17,17,17,.86);color:#fff}[data-tool-root="monitor-color-test"] .fullscreen-controls__text{display:grid;gap:2px}[data-tool-root="monitor-color-test"] .fullscreen-controls__text span{font-size:13px;color:rgba(255,255,255,.78)}[data-tool-root="monitor-color-test"] .fullscreen-button-row{display:flex;gap:7px}[data-tool-root="monitor-color-test"] .fullscreen-button-row button{min-height:38px;padding:6px 11px;border:1px solid rgba(255,255,255,.65);border-radius:6px;background:#111;color:#fff;font:inherit;font-weight:700;cursor:pointer}
[data-tool-root="monitor-color-test"] .observation-block{padding:14px;border-top:1px solid var(--border);background:var(--g50)}[data-tool-root="monitor-color-test"] .observation-block:first-of-type{border-top:0}[data-tool-root="monitor-color-test"] .observation-heading strong{font-size:16px}[data-tool-root="monitor-color-test"] .observation-heading p{margin:3px 0 10px;color:#555;font-size:13px}[data-tool-root="monitor-color-test"] .result-summary{padding:16px;border:1px solid var(--border);border-radius:6px;background:var(--g100)}[data-tool-root="monitor-color-test"] .result-summary__header{display:flex;align-items:center;justify-content:space-between;gap:12px}[data-tool-root="monitor-color-test"] .result-summary__eyebrow{font-weight:800}[data-tool-root="monitor-color-test"] .result-badge{padding:3px 9px;border:1px solid #222;border-radius:999px;background:#fff;font-size:13px;font-weight:700}[data-tool-root="monitor-color-test"] .result-primary{display:grid;gap:3px;margin-top:12px}[data-tool-root="monitor-color-test"] .result-primary__value{font-size:clamp(27px,3vw,40px);line-height:1.15;overflow-wrap:anywhere}[data-tool-root="monitor-color-test"] .result-primary__secondary{color:#444;font-weight:700;overflow-wrap:anywhere}[data-tool-root="monitor-color-test"] .result-data-band{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:14px;padding:1px;overflow:hidden;border:1px solid var(--border);border-radius:6px;background:var(--border)}[data-tool-root="monitor-color-test"] .result-data-band>div{min-width:0;padding:10px 11px;background:#fff}[data-tool-root="monitor-color-test"] .result-data-band span{display:block;color:#666;font-size:12px}[data-tool-root="monitor-color-test"] .result-data-band strong{display:block;margin-top:2px;font-size:14px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}[data-tool-root="monitor-color-test"] .result-summary__note{margin:14px 0 0;color:#555;font-size:13px}
[data-tool-root="monitor-color-test"] .desc-section{margin-top:34px}[data-tool-root="monitor-color-test"] .desc-section h2{margin-bottom:16px;padding-left:12px;border-left:3px solid #111;font-size:24px;line-height:1.3}[data-tool-root="monitor-color-test"] .content-card,[data-tool-root="monitor-color-test"] details{border:1px solid var(--border);border-radius:6px;background:#fff}[data-tool-root="monitor-color-test"] .content-card{padding:18px 20px}[data-tool-root="monitor-color-test"] .content-card p:last-child,[data-tool-root="monitor-color-test"] .details-body p:last-child{margin-bottom:0}[data-tool-root="monitor-color-test"] .accordion-stack{display:grid;gap:10px}[data-tool-root="monitor-color-test"] details summary{padding:15px 18px;font-weight:800;cursor:pointer}[data-tool-root="monitor-color-test"] .details-body{padding:0 18px 18px;color:#444}[data-tool-root="monitor-color-test"] .details-body h3{color:#111;font-size:18px}[data-tool-root="monitor-color-test"] .source-list{margin:8px 0 0;padding-left:20px}[data-tool-root="monitor-color-test"] .source-list a{color:#111;text-underline-offset:3px}[data-tool-root="monitor-color-test"] .related-tools-accordion{padding:0 20px;background:var(--g100)}[data-tool-root="monitor-color-test"] .related-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding-bottom:20px}[data-tool-root="monitor-color-test"] .related-link{display:flex;min-width:0;min-height:92px;flex-direction:column;justify-content:center;padding:14px 16px;border:1px solid var(--border);border-radius:6px;background:#fff;color:#111;text-decoration:none}[data-tool-root="monitor-color-test"] .related-link:hover{border-color:#222}[data-tool-root="monitor-color-test"] .related-link strong{font-size:16px}[data-tool-root="monitor-color-test"] .related-link span{margin-top:5px;color:#555;font-size:14px}[data-tool-root="monitor-color-test"] .noscript-note{margin-top:24px;padding:14px;border:1px solid #222;border-radius:6px}
@media(max-width:900px){[data-tool-root="monitor-color-test"]{padding:0 8px 32px}}@media(max-width:720px){[data-tool-root="monitor-color-test"] .workspace-grid{grid-template-columns:minmax(0,1fr)}[data-tool-root="monitor-color-test"] .input-panel,[data-tool-root="monitor-color-test"] .result-panel{padding:14px}[data-tool-root="monitor-color-test"] .color-stage{height:320px}[data-tool-root="monitor-color-test"] .related-links{grid-template-columns:1fr}}@media(max-width:430px){[data-tool-root="monitor-color-test"] h1{font-size:27px}[data-tool-root="monitor-color-test"] .segmented--palette{grid-template-columns:repeat(3,minmax(0,1fr))}[data-tool-root="monitor-color-test"] .segmented--four{grid-template-columns:repeat(2,minmax(0,1fr))}[data-tool-root="monitor-color-test"] .segmented--five{grid-template-columns:repeat(2,minmax(0,1fr))}[data-tool-root="monitor-color-test"] .custom-color-row{grid-template-columns:46px minmax(0,1fr)}[data-tool-root="monitor-color-test"] .custom-color-row .btn{grid-column:1/-1;width:100%}[data-tool-root="monitor-color-test"] .button-row,[data-tool-root="monitor-color-test"] .fullscreen-controls{align-items:stretch;flex-direction:column}[data-tool-root="monitor-color-test"] .btn{width:100%}[data-tool-root="monitor-color-test"] .result-data-band{grid-template-columns:repeat(2,minmax(0,1fr))}[data-tool-root="monitor-color-test"] .color-stage{height:260px}[data-tool-root="monitor-color-test"] .fullscreen-button-row{display:grid;grid-template-columns:1fr 1fr}}@media(prefers-reduced-motion:reduce){[data-tool-root="monitor-color-test"] *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.demo-related-note{grid-column:1/-1;margin:0;padding:10px 12px;border:1px dashed #ddd;background:#fff;color:#666;font-size:13px}