.colour-tool{border:1px solid var(--border-input);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-sm);overflow:hidden}.colour-tool__top{border-bottom:1px solid var(--border);background:var(--bg-subtle);justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.5rem;display:flex}.colour-tool__modes{border:0;gap:.25rem;margin:0;padding:0;display:flex}.colour-tool__mode{position:relative}.colour-tool__modes label{border-radius:var(--r-sm);cursor:pointer;border:1px solid #0000;padding:.55rem .9rem;font-size:.875rem;font-weight:600;display:block}.colour-tool__modes input:checked+label{background:var(--surface);border-color:var(--border-input);box-shadow:var(--shadow-sm)}.colour-tool__modes input:focus-visible+label{outline:2px solid var(--accent);outline-offset:3px}.colour-tool__local{color:var(--text-muted);font-size:.75rem}.colour-tool__top-actions{align-items:center;gap:1rem;display:flex}.colour-tool__host{width:100%}.colour-tool__host [data-colour-panel],.colour-tool__host .colour-tool{min-height:100%}.colour-tool__host [data-colour-focus]{display:none}.colour-tool__inputbar{align-items:start;gap:1rem;padding:1.5rem;display:flex}.colour-tool__entry{flex:1;min-width:0}.colour-tool__entry>label,.colour-tool__picker,.colour-tool__batch-head>label{margin-bottom:.5rem;font-size:.875rem;font-weight:600;display:block}.colour-tool__entry>.input{font-family:var(--font-mono);height:48px;font-size:1.05rem}.colour-tool__hint{color:var(--text-muted);margin:.5rem 0 0;font-size:.8rem}.colour-tool__picker input{border:1px solid var(--border-input);border-radius:var(--r-sm);background:var(--surface);cursor:pointer;width:94px;height:48px;margin-top:.5rem;padding:.3rem;display:block}.colour-tool__layout{grid-template-columns:minmax(220px,.8fr) minmax(0,1.8fr);gap:2rem;padding:0 1.5rem 1.5rem;display:grid}.colour-tool__preview{min-width:0}.colour-tool__swatch{isolation:isolate;border:1px solid var(--border);border-radius:var(--r-md);background:repeating-conic-gradient(var(--surface) 0% 25%, var(--border) 0% 50%) 0 0 / 18px 18px;height:205px;position:relative;overflow:hidden}.colour-tool__swatch-fill{background:var(--colour-preview);position:absolute;inset:0}.colour-tool__swatch-label{font-family:var(--font-mono);background:var(--surface);color:var(--text);border-radius:var(--r-sm);padding:.4rem .65rem;font-size:.8rem;position:absolute;bottom:.8rem;left:.8rem}.colour-tool__opacity{margin-top:1rem}.colour-tool__opacity label{justify-content:space-between;font-size:.8rem;font-weight:600;display:flex}.colour-tool__opacity output{font-family:var(--font-mono);font-weight:400}.colour-tool__opacity input{width:100%;accent-color:var(--accent);margin:.6rem 0}.colour-tool__on-surfaces{grid-template-columns:1fr 1fr;gap:.5rem;display:grid}.colour-tool__on-surfaces>div{border:1px solid var(--border);border-radius:var(--r-sm);height:58px;position:relative;overflow:hidden}.colour-tool__on-white{background:var(--colour-reference-white)}.colour-tool__on-black{background:var(--colour-reference-black)}.colour-tool__on-surfaces span{position:absolute;inset:0}.colour-tool__on-surfaces small{background:var(--surface);color:var(--text);border-radius:var(--r-sm);padding:.1rem .3rem;font-size:.65rem;position:absolute;bottom:.3rem;left:.4rem}.colour-tool__examples{flex-wrap:wrap;align-items:center;gap:.45rem;margin-top:1rem;display:flex}.colour-tool__example{background:var(--colour-example);border:1px solid var(--border-input);cursor:pointer;width:32px;height:32px;box-shadow:inset 0 0 0 3px var(--surface);border-radius:50%}.colour-tool__example:hover{box-shadow:inset 0 0 0 5px var(--surface)}.colour-tool__examples>span{color:var(--text-muted);margin-left:.15rem;font-size:.7rem}.colour-tool__result-head{justify-content:space-between;align-items:baseline;gap:.5rem;margin:0 0 .65rem;display:flex}.colour-tool__result-head h2{letter-spacing:-.02em;font-size:1rem}.colour-tool__result-head>span{font-family:var(--font-mono);color:var(--text-muted);font-size:.7rem}.colour-tool__result-head>.is-warning{color:var(--warning)}.colour-tool__row{border-bottom:1px solid var(--border);grid-template-columns:75px minmax(0,1fr) auto;align-items:center;gap:.65rem;padding:.8rem 0;display:grid}.colour-tool__row>label{font-size:.82rem;font-weight:600}.colour-tool__row>label small{display:none}.colour-tool__value.input{font-family:var(--font-mono);width:100%;min-width:0;padding:.65rem .6rem;font-size:.76rem}.colour-tool__row--clipped>label:after{content:"Clipped";color:var(--warning);font-size:.62rem;font-weight:400;display:block}.colour-tool__advanced{margin-top:.25rem}.colour-tool__advanced>summary{cursor:pointer;border-radius:var(--r-sm);flex-wrap:wrap;align-items:center;gap:.4rem;padding:1rem 0;font-size:.8rem;font-weight:600;display:flex}.colour-tool__advanced>summary:before{content:"+";width:1rem}.colour-tool__advanced[open]>summary:before{content:"−"}.colour-tool__advanced>summary span{color:var(--text-muted);margin-left:auto;font-size:.7rem;font-weight:400}.colour-tool__caveat{margin-bottom:1rem}.colour-tool__actions{flex-wrap:wrap;align-items:center;gap:.8rem;padding-top:1rem;display:flex}.colour-tool__actions>span{color:var(--text-muted);font-size:.75rem}.colour-tool__status{border-top:1px solid var(--border);background:var(--bg-subtle);min-height:44px;margin:0;padding:.8rem 1.5rem;font-size:.8rem}.colour-tool--invalid .colour-tool__swatch{opacity:.4}.colour-tool--invalid #colour-status,.colour-tool__batch-results .is-error{color:var(--danger)}.colour-tool__batch{padding-top:1.5rem}.colour-tool__batch-grid{grid-template-columns:1fr 1fr;gap:1.5rem;padding:0 1.5rem 1.5rem;display:grid}.colour-tool__batch-head{justify-content:space-between;align-items:center;gap:.5rem;display:flex}.colour-tool__batch-head>label{margin:0}.colour-tool__palette.input,.colour-tool__export.input{font-family:var(--font-mono);resize:vertical;width:100%;min-height:235px;margin-top:.85rem;font-size:.8rem;line-height:1.8}.colour-tool__export-controls{gap:.8rem;display:flex}.colour-tool__export-controls>label{flex-direction:column;flex:1;gap:.35rem;min-width:0;font-size:.8rem;font-weight:600;display:flex}.colour-tool__batch-results{max-height:300px;margin:0;padding:0 1.5rem;list-style:none;overflow-y:auto}.colour-tool__batch-results li{border-bottom:1px solid var(--border);align-items:center;gap:.7rem;padding:.7rem 0;font-size:.75rem;display:flex}.colour-tool__batch-results li>span:last-child{overflow-wrap:anywhere}.colour-tool__batch-chip{border:1px solid var(--border);border-radius:var(--r-sm);flex:0 0 23px;height:23px}@media (width<=700px){.colour-tool__top{padding:.75rem 1rem}.colour-tool__local{display:none}.colour-tool__top{gap:.5rem}[data-colour-focus]>span{display:none}[data-colour-focus]{min-width:40px;min-height:40px;padding:.5rem}.colour-tool__inputbar{gap:.7rem;padding:1rem}.colour-tool__picker{font-size:.75rem}.colour-tool__picker input{width:58px}.colour-tool__entry>.input{font-size:.9rem}.colour-tool__layout{grid-template-columns:1fr;gap:1.4rem;padding:0 1rem 1rem}.colour-tool__preview{grid-template-columns:1fr 1.2fr;gap:.75rem 1rem;display:grid}.colour-tool__swatch{grid-row:span 2;height:120px}.colour-tool__swatch-label{font-size:.7rem;bottom:.5rem;left:.5rem}.colour-tool__opacity{align-self:end;margin-top:0}.colour-tool__on-surfaces>div{height:42px}.colour-tool__examples{grid-column:1/-1;margin-top:0}.colour-tool__result-head h2{font-size:.9rem}.colour-tool__row{grid-template-columns:minmax(0,1fr) auto;gap:.4rem}.colour-tool__row>label{grid-column:1/-1;align-items:baseline;gap:.5rem;display:flex}.colour-tool__row>label small{color:var(--text-muted);font-size:.65rem;font-weight:400;display:inline}.colour-tool__value.input{font-size:.74rem}.colour-tool__row>.btn{min-height:40px;padding-inline:.6rem}.colour-tool__status{padding-inline:1rem}.colour-tool__batch-grid{grid-template-columns:1fr;padding:0 1rem 1rem}}.tm-colour-swatch{fill:var(--accent-soft);stroke:var(--border-input)}.tm-colour-row{fill:var(--bg-subtle)}.tm-colour-format{fill:var(--text-muted);font-family:var(--font-mono);letter-spacing:.6px;font-size:7px;font-weight:600}.tm-colour-value{fill:var(--text);font-family:var(--font-mono);font-size:9px;font-weight:500}.tm-colour-arrow{stroke:var(--text-muted);stroke-width:2px}.tm-colour-tick{stroke:var(--success);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}@media (prefers-reduced-motion:no-preference){.tm-colour-input{animation:7s infinite tm-colour-input}.tm-colour-arrow{animation:7s infinite tm-colour-arrow}.tm-colour-output{animation:7s infinite tm-colour-output}}@keyframes tm-colour-input{0%,8%{opacity:.25;transform:translateY(8px)}18%,92%{opacity:1;transform:translateY(0)}to{opacity:.25;transform:translateY(8px)}}@keyframes tm-colour-arrow{0%,22%{opacity:0}34%,90%{opacity:1}to{opacity:0}}@keyframes tm-colour-output{0%,38%{opacity:0;transform:translate(8px)}55%,92%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(8px)}}