@font-face{font-family:"Funnel Display";src:url(../fonts/display.woff2) format("woff2");font-weight:500 800;font-style:normal;font-display:swap}
@font-face{font-family:"Funnel Sans";src:url(../fonts/sans.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
/* Brand tokens copied from qvicom.io/assets/css/app.css, September 2026. */
:root{--ink:#17131f;--muted:#5c5670;--purple:#7c3aed;--deep:#5b21b6;--lite:#a855f7;--panel:#f7f5fc;--soft:#ede4fd;--line:#e4dcf2;--paper:#fff;--bg:#fbfafe;--card:#fff;--header:rgba(251,250,254,.94);--focus:#5b21b6;--font-d:'Funnel Display','Segoe UI',Calibri,sans-serif;--font-b:'Funnel Sans','Segoe UI',Calibri,sans-serif;--stripe:linear-gradient(90deg,#a855f7,#7c3aed 55%,#dc1f1f)}
html[data-theme=dark]{--ink:#f4f0fd;--muted:#c8c0d8;--panel:#241c33;--soft:#2d2440;--line:rgba(255,255,255,.16);--paper:#1b1428;--bg:#130e1d;--card:#1c1528;--header:rgba(19,14,29,.94);--focus:#c084fc;--deep:#c084fc}
@media(prefers-color-scheme:dark){html[data-theme=system]{--ink:#f4f0fd;--muted:#c8c0d8;--panel:#241c33;--soft:#2d2440;--line:rgba(255,255,255,.16);--paper:#1b1428;--bg:#130e1d;--card:#1c1528;--header:rgba(19,14,29,.94);--focus:#c084fc;--deep:#c084fc}}
[hidden]{display:none!important}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--font-b);min-width:0}a{color:var(--deep);text-underline-offset:3px}html[data-theme=dark] a{color:#d6b8ff}button,input,textarea,select{font:inherit}button{cursor:pointer}img{max-width:100%;height:auto}h1,h2,h3{font-family:var(--font-d);line-height:1.12;letter-spacing:-.035em}h1{font-size:clamp(2.5rem,6vw,4.75rem);margin:.15em 0}h2{font-size:clamp(1.5rem,3vw,2.2rem);margin:0 0 .7em}h3{font-size:1.2rem;margin:.2em 0}p{margin:0 0 1em}small,.muted{color:var(--muted)}:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.stripe{height:4px;background:var(--stripe)}.wrap{width:min(1180px,calc(100% - 32px));margin-inline:auto}.topbar{background:#130e1d;color:#d8d0e8;font-size:.83rem}.topbar .wrap{display:flex;align-items:center;gap:16px;min-height:36px;flex-wrap:wrap;padding:4px 0}.topbar a{color:#d8d0e8;text-decoration:none}.topbar .sp{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}.seg{display:flex;gap:4px}.seg button,.seg a{border:1px solid #9f92b7;background:transparent;color:#fff;border-radius:20px;padding:3px 8px;text-decoration:none;font-size:.8rem}.seg [aria-current=true],.seg button[aria-pressed=true]{color:#130e1d;background:#fff}.header{position:sticky;top:0;z-index:10;background:var(--header);border-bottom:1px solid var(--line);backdrop-filter:blur(16px)}.nav{display:flex;gap:20px;align-items:center;min-height:72px}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)!important;white-space:nowrap}.brand img{width:40px;height:38px;object-fit:contain}.brand strong{display:block;font-family:var(--font-d);line-height:1;font-size:1.2rem}.brand small{display:block;font-size:.64rem;letter-spacing:.08em;text-transform:uppercase}.links{display:flex;gap:4px;align-items:center;margin-left:auto}.links a{padding:10px 9px;color:var(--ink);text-decoration:none;font-weight:600;font-size:.91rem}.links a:hover,.text-link:hover{color:var(--purple)}.menu-toggle{display:none}.skip{position:absolute;left:12px;top:-80px;background:var(--deep);color:#fff;padding:10px;z-index:90}.skip:focus{top:7px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:9px 20px;background:#5b21b6;border:1px solid #5b21b6;color:#fff!important;border-radius:99px;text-decoration:none;font-weight:700}.btn:hover{background:#4c1d95}.btn.ghost{background:transparent;color:var(--ink)!important;border-color:var(--muted)}.btn.small{min-height:38px;padding:5px 13px;font-size:.88rem}.hero{padding:72px 0 56px;border-bottom:1px solid var(--line)}.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}.kicker{font-size:.76rem;text-transform:uppercase;letter-spacing:.13em;color:var(--deep);font-weight:800}.lead{color:var(--muted);font-size:1.12rem;max-width:650px}.search{display:flex;gap:8px;margin:24px 0;max-width:720px}.search input,.field,textarea,select{width:100%;min-height:46px;border:1px solid var(--muted);border-radius:12px;background:var(--paper);color:var(--ink);padding:10px 12px}.search input{border-radius:99px;padding-left:20px}.hero-graphic{padding:24px;background:#130e1d;border-radius:24px;min-height:290px;color:#f4f0fd;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 20px 50px #170a3424}.hero-graphic .glyph{font:800 clamp(4rem,12vw,9rem)/1 var(--font-d);letter-spacing:-.1em;color:#b789fb}.hero-graphic .mini{border-top:1px solid #675a7b;padding-top:14px;display:flex;justify-content:space-between;gap:10px}.section{padding:54px 0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:12px}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.card,.panel{border:1px solid var(--line);background:var(--card);border-radius:20px;padding:22px}.card{display:flex;flex-direction:column;min-height:210px}.card:hover{border-color:var(--purple);transform:translateY(-2px)}.card a.title{color:var(--ink);text-decoration:none}.card p{color:var(--muted);font-size:.94rem;flex:1}.icon{display:inline-grid;place-items:center;min-width:42px;height:42px;padding:0 6px;border-radius:12px;background:var(--soft);color:var(--deep);font-weight:800;margin-bottom:14px}.card .tag{font-size:.76rem;color:var(--muted)}.category-card{min-height:115px}.category-card .tag{margin-top:auto}.page-title{padding:46px 0 16px}.filters{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 24px}.pill{border:1px solid var(--line);border-radius:99px;padding:6px 14px;background:var(--card);text-decoration:none;color:var(--ink)!important}.pill.on{background:#5b21b6;color:#fff!important}.tool-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;padding-bottom:56px}.tool-layout .panel{min-width:0}.workspace label,form label{display:block;font-weight:700;margin:13px 0 6px}.workspace textarea{min-height:170px;resize:vertical;font:14px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace}.workspace textarea[readonly]{background:var(--panel)}.actions{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0}.note{background:var(--panel);border-left:3px solid var(--purple);border-radius:8px;padding:12px 14px;color:var(--ink);font-size:.9rem}.notice{color:var(--muted);font-size:.9rem}.output-message{min-height:22px;color:var(--ink)}.site-footer{margin-top:50px;border-top:1px solid var(--line);padding:40px 0}.footer-row{display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap}.footer-links{display:flex;gap:15px;flex-wrap:wrap}.admin-layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;padding:30px 0 80px}.admin-menu{display:flex;flex-direction:column;gap:5px}.admin-menu a{color:var(--ink);padding:9px 12px;text-decoration:none;border-radius:10px}.admin-menu a:hover{background:var(--soft)}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.stat strong{display:block;font:700 2rem var(--font-d)}.table-wrap{overflow-x:auto}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:11px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.table th{white-space:nowrap}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}.wide{grid-column:1/-1}.error{color:#ae2020;font-weight:700}.success{color:#10724a;font-weight:700}html[data-theme=dark] .error{color:#ff9292}html[data-theme=dark] .success{color:#72dfaa}.stack>*+*{margin-top:14px}.max{max-width:650px}.version{font-size:.82rem;color:var(--muted)}
@media(max-width:980px){.links{gap:0}.links a{padding:9px 5px;font-size:.82rem}.hero-grid{gap:24px}.tool-layout{grid-template-columns:minmax(0,1fr) 260px}}@media(max-width:760px){.menu-toggle{display:block;margin-left:auto;background:var(--card);border:1px solid var(--line);color:var(--ink);border-radius:10px;min-width:44px;min-height:44px}.links{display:none;position:absolute;top:72px;left:0;right:0;padding:14px 16px;background:var(--card);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch}.links.open{display:flex}.links a{padding:10px}.hero-grid,.admin-layout{grid-template-columns:1fr}.tool-layout{grid-template-columns:minmax(0,1fr)}.hero{padding:42px 0}.hero-graphic{min-height:180px}.hero-graphic .glyph{font-size:5rem}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stats{grid-template-columns:repeat(2,1fr)}.admin-menu{flex-direction:row;flex-wrap:wrap}.topbar .wrap{gap:8px}.topbar .sp{margin-left:0}}
@media(max-width:480px){.grid{grid-template-columns:1fr}.search{flex-direction:column}.search button{width:100%}.hero-graphic{display:none}.form-grid{grid-template-columns:1fr}.topbar .wrap>a:nth-child(2){display:none}.card{min-height:170px}.stats{grid-template-columns:1fr 1fr}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
/* 0.4.1: generous mobile navigation hit targets. */
@media(max-width:760px){.links a{min-height:44px;display:flex;align-items:center}}
.header a:focus-visible{border-radius:6px}
/* Collection controls: a quiet extension of Qvicom cards. */
.card-bottom{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:auto}.card-bottom .tag{margin:0}.favorite{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:50%;min-width:44px;min-height:44px;font-size:1.3rem;line-height:1}.favorite:hover,.favorite[aria-pressed=true]{border-color:var(--purple);color:var(--purple)}.favorite-page{border-radius:99px;margin:4px 0 16px}.links a[aria-current=page]{color:var(--deep)}
@media(max-width:1120px){.menu-toggle{display:block;margin-left:auto;background:var(--card);border:1px solid var(--line);color:var(--ink);border-radius:10px;min-width:44px;min-height:44px}.links{display:none;position:absolute;top:72px;left:0;right:0;padding:14px 16px;background:var(--card);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch}.links.open{display:flex}.links a{padding:10px;min-height:44px}}

.stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
@media(max-width:480px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Browser-only image workbench. */
.image-controls{display:grid;gap:6px}.image-preview{display:block;max-width:100%;max-height:380px;object-fit:contain;border:1px solid var(--line);border-radius:12px;margin:18px auto}.faq .panel{min-width:0}.faq .panel h3{line-height:1.3}.faq .panel p{color:var(--muted)}

.admin-theme button{color:var(--ink);border-color:var(--line);min-height:38px}.admin-theme button[aria-pressed=true]{background:var(--soft);color:var(--ink);border-color:var(--purple)}.admin-controls{margin-left:auto;display:flex;gap:12px;align-items:center;flex-wrap:wrap}@media(max-width:700px){.admin-header .nav{flex-wrap:wrap;padding:10px 0}.admin-controls{width:100%;margin-left:0;gap:14px}.admin-theme button{min-height:44px}.admin-menu a{min-height:44px;display:flex;align-items:center}}

/* Preserve 320px reflow when visitors increase text spacing or use long translations. */
h1,h2,h3,.card a.title{overflow-wrap:anywhere}

/* 1.1.0 workflow: unavailable results and in-progress actions. */
.workspace button:disabled{opacity:.55;cursor:not-allowed}.workspace button[aria-disabled="true"]{cursor:progress}

/* Optional structured inputs, preserving the legacy line textarea when JavaScript is absent. */
.guided-toggle{margin:0 0 14px;min-height:44px}.guided-fields{min-width:0;border:1px solid var(--line);border-radius:12px;padding:14px;margin:0 0 16px}.guided-fields legend{font-weight:700;padding:0 6px}.guided-fields .form-grid>*{min-width:0}.guided-fields .field{width:100%}.guided-fields .muted{margin:0 0 10px}

/* 1.3.0: keep existing language/theme controls and brand usable after text resizing on narrow screens. */
@media(max-width:480px){.topbar .sp,.topbar .seg{max-width:100%;flex-wrap:wrap}.nav{flex-wrap:wrap;gap:8px;padding:10px 0}.brand{white-space:normal;min-width:0;max-width:100%;overflow-wrap:anywhere}.brand span{min-width:0}.menu-toggle{margin-left:auto}}

/* 1.3.1: preserve card reflow when localized text and spacing grow at narrow widths. */
@media(max-width:980px){.card{min-width:0}.card p,.card .tag{overflow-wrap:anywhere}.card-bottom .tag{min-width:0}}
@media(max-width:760px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.grid{grid-template-columns:minmax(0,1fr)}}

/* 1.3.2: keep desktop navigation reachable when user text grows without shrinking the viewport. */
@media(min-width:1121px){.links{min-width:0;flex-wrap:wrap;justify-content:flex-end}.links a{display:inline-flex;align-items:center;min-height:44px;padding-inline:5px;white-space:nowrap}.links .btn.small{min-height:44px}}

/* 1.4.0 Image Cropper — existing brand tokens, pixel-aligned selection. */
.crop-controls{min-width:0;margin:8px 0 18px;padding:16px;border:1px solid var(--line);border-radius:14px}.crop-controls legend{padding:0 6px;font-weight:700}.crop-controls p{margin:10px 0}.crop-stage{position:relative;width:fit-content;max-width:100%;margin:16px 0 6px;overflow:hidden;touch-action:none;cursor:crosshair;user-select:none;-webkit-user-select:none;border:1px solid var(--line);background:var(--panel)}.crop-stage img{display:block;width:auto;height:auto;max-width:100%;max-height:380px;object-fit:contain;pointer-events:none}.crop-selection{position:absolute;border:2px solid var(--focus);background:rgba(124,58,237,.2);box-shadow:0 0 0 9999px rgba(15,11,24,.38);pointer-events:none}.crop-coordinates{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;min-width:0}.crop-coordinates>div{min-width:0}.crop-coordinates label{line-height:1.35;min-height:2.7em;overflow-wrap:anywhere}.crop-coordinates input{min-width:0}[aria-invalid=true]{outline:2px solid #ae2020;outline-offset:1px}@media(max-width:680px){.crop-coordinates{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:370px){.crop-controls{padding:10px}.crop-coordinates{gap:6px}}

/* 1.5.0: user-image sampled colors, never a change to Qvicom brand tokens. */
.palette-controls{min-width:0;margin:8px 0 18px;padding:16px;border:1px solid var(--line);border-radius:14px}.palette-controls legend{padding:0 6px;font-weight:700}.palette-controls p{margin:10px 0}.palette-preview{display:block;margin:12px 0;max-width:100%;max-height:380px}.palette-results{margin:20px 0;min-width:0}.palette-results h2{font-size:1.3rem}.palette-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.palette-list li{display:flex;align-items:center;gap:10px;min-width:0;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);overflow-wrap:anywhere}.palette-chip{flex:none;display:block;width:44px;height:44px;border:1px solid var(--muted);border-radius:8px}.palette-list code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;white-space:nowrap}@media(max-width:850px){.palette-list{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:380px){.palette-controls{padding:10px}.palette-list{grid-template-columns:minmax(0,1fr)}}

/* 1.6.0: pair-only contrast preview; user colors never replace brand tokens. */
.contrast-controls{min-width:0;padding:16px;margin:8px 0 18px;border:1px solid var(--line);border-radius:14px}.contrast-controls legend{font-weight:700;padding:0 6px}.contrast-controls p{margin:10px 0}.contrast-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.contrast-fields>div{min-width:0}.contrast-fields label{overflow-wrap:anywhere}.contrast-results{min-width:0;margin:20px 0}.contrast-results h2{font-size:1.3rem}.contrast-example{display:grid;place-items:center;min-height:100px;padding:12px;border:2px solid var(--line);border-radius:12px;font:700 1.5rem var(--font-d);text-align:center;overflow-wrap:anywhere}.contrast-results .muted{margin:9px 0}.contrast-list{margin:12px 0;padding-left:1.5em}.contrast-list li{margin:6px 0;overflow-wrap:anywhere}.contrast-list strong{margin-left:3px}@media(max-width:640px){.contrast-fields{grid-template-columns:minmax(0,1fr)}}@media(max-width:370px){.contrast-controls{padding:10px}}
/* Keep translated related-tool links within very narrow, zoomed viewports. */
.tool-layout aside a{overflow-wrap:anywhere}
/* Long localized guidance remains readable with user text-spacing overrides. */
.tool-layout .panel,.faq .panel{overflow-wrap:anywhere}

/* Browser-local UTM URL builder: bounded fields and breakable help at enlarged text sizes. */
.utm-controls{min-width:0;padding:16px;margin:8px 0 18px;border:1px solid var(--line);border-radius:14px}.utm-controls legend{font-weight:700;padding:0 6px}.utm-controls p{margin:12px 0 0;overflow-wrap:anywhere}.utm-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px}.utm-fields>div{min-width:0}.utm-fields .utm-wide{grid-column:1/-1}.utm-fields label{overflow-wrap:anywhere;line-height:1.4}.utm-fields .field{min-width:0}.utm-detail{overflow-wrap:anywhere}@media(max-width:640px){.utm-fields{grid-template-columns:minmax(0,1fr)}}@media(max-width:370px){.utm-controls{padding:10px}}

/* Local CSS unit converter: semantic labels, bounded fields and narrow-screen reflow. */
.unit-controls{min-width:0;padding:16px;margin:8px 0 18px;border:1px solid var(--line);border-radius:14px}.unit-controls legend{font-weight:700;padding:0 6px}.unit-controls p{margin:12px 0 0;overflow-wrap:anywhere}.unit-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 12px}.unit-fields>div{min-width:0}.unit-fields label{overflow-wrap:anywhere;line-height:1.4}.unit-fields .field{min-width:0}@media(max-width:720px){.unit-fields{grid-template-columns:minmax(0,1fr)}}@media(max-width:370px){.unit-controls{padding:10px}}