.fv{padding:28px 0 50px;color:#242d49}.fv-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}.fv h1{font-size:43px;margin:0}.fv h2{background:#151763;color:white;font-size:20px;line-height:1.35;padding:12px 16px;margin:0}.fv button,.fv select,.fv input{font:inherit;font-size:15px;min-height:38px;border:1px solid #b9c2d7;border-radius:5px;background:white;color:#242d49;padding:7px 10px}.fv button{cursor:pointer;font-weight:600}.fv button:hover{background:#eef0fa;border-color:#202396}.fv button:disabled{opacity:.4;cursor:default}.fv button[aria-pressed=true],#fv-save{background:#202396;color:white;border-color:#202396}.fv button:focus-visible,.fv input:focus-visible,.fv select:focus-visible{outline:3px solid #8ea7ec;outline-offset:2px}.fv-actions,.fv-toolbar,.fv-palette,.fv-canvas-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.fv-toolbar{margin-bottom:16px}.fv-toolbar label{display:flex;align-items:center;gap:8px}.fv-toolbar select{max-width:230px}.fv #fv-message{font-size:14px;flex:1;min-width:160px;color:#505976}.fv-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:18px;align-items:start}.fv-workspace,.fv-inspector,.fv-results{border:1px solid #d1d7e7;border-radius:8px;overflow:hidden;background:white}.fv-palette{padding:12px;background:#f5f6fc;border-bottom:1px solid #dce1ed}.fv-palette span{font-weight:600}.fv-palette button,.fv-palette select{font-size:14px}.fv-canvas-tools{padding:10px 12px;border-bottom:1px solid #dce1ed}.fv-canvas-tools button{font-size:14px}#fv-canvas{display:block;width:100%;height:530px;background:#fcfdff;touch-action:none;user-select:none}#fv-canvas.connecting{cursor:crosshair}#fv-canvas .part{cursor:grab}#fv-canvas .part:active{cursor:grabbing}#fv-canvas .port{cursor:crosshair}#fv-canvas .port:hover{fill:#e2b66b;stroke:#151763}#fv-canvas .selected{stroke:#e4a82c;stroke-width:3}#fv-canvas [tabindex]:focus{outline:none;filter:drop-shadow(0 0 3px #202396)}.fv-instruction,.fv-note{font-size:14px;line-height:1.55;color:#56607a;padding:10px 14px;margin:0}.fv-legend{display:flex;gap:18px;flex-wrap:wrap;padding:0 14px 14px;font-size:14px}.fv-swatch{display:inline-block;width:24px;height:4px;border-radius:2px;vertical-align:middle;margin-right:6px}.fv-inspector #fv-properties{padding:14px}.fv-inspector label{display:block;font-size:14px;font-weight:600;margin:12px 0 4px}.fv-inspector label:first-child{margin-top:0}.fv-inspector input:not([type=checkbox]),.fv-inspector select{display:block;width:100%;margin-top:5px;min-width:0}.fv-inspector input[type=color]{height:38px;padding:3px}.fv-inspector input[type=checkbox]{min-height:18px;width:18px;vertical-align:middle}.fv-inspector p{font-size:14px;line-height:1.55;margin:8px 0}.fv-inspector h3{font-size:17px;margin:16px 0 6px}.fv-inspector .fv-row{display:flex;gap:8px;align-items:end}.fv-inspector .fv-row label{flex:1;min-width:0}.fv-inspector .fv-row button{padding:6px;flex:none}.fv-inspector .fv-gradient-head{display:flex;font-size:13px;gap:16px;margin-top:8px}.fv-inspector .fv-gradient input{width:100%;min-width:0}.fv-inspector .fv-gradient .fv-row{margin:5px 0}.fv-inspector .fv-gradient .fv-row input{flex:1;width:60px}.fv-inspector details{margin-top:15px}.fv-inspector summary{cursor:pointer;font-size:15px;font-weight:600}.fv-results{margin:20px 0}.fv-table-wrap{overflow:auto}.fv table{width:100%;border-collapse:collapse;font-size:15px}.fv th,.fv td{text-align:left;padding:13px 16px;border-bottom:1px solid #e0e5f0;white-space:nowrap}.fv th{font-weight:600;background:#f5f6fc;font-size:14px}.fv .warning{color:#9c3e11;font-weight:600}.fv .details{margin:14px 0}.fv .fv-error{color:#a02a30!important}.fv-method p{max-width:90ch}
@media(min-width:1500px){.fv-layout{grid-template-columns:minmax(0,1fr) 310px}#fv-canvas{height:610px}}
@media(max-width:900px){.fv-layout{grid-template-columns:1fr}.fv-inspector #fv-properties{max-height:none}.fv-inspector{width:100%}#fv-canvas{height:440px}.fv-inspector input:not([type=checkbox]),.fv-inspector select{max-width:450px}}
@media(max-width:520px){.fv{padding-top:20px}.fv-actions{gap:6px}.fv button,.fv select{min-height:42px}.fv-actions button{font-size:14px;padding:6px 9px}.fv h2{font-size:20px}.fv-palette{gap:6px}.fv-palette button,.fv-palette select{font-size:13px;padding:5px 8px}.fv-toolbar select{max-width:205px}#fv-canvas{height:360px}.fv-canvas-tools{gap:5px}.fv-canvas-tools button{font-size:13px;padding:5px 8px}}
.fv-canvas-tools label{display:flex;align-items:center;gap:5px;font-size:14px}.fv-canvas-tools input[type=checkbox]{min-height:18px;width:18px;height:18px}
.fv h2{font-family:inherit;font-weight:600;letter-spacing:-.3px}
.fv-port-key{display:inline-block;width:13px;height:13px;border:2px solid #46567a;border-radius:50%;background:white;vertical-align:middle;margin-right:6px}.fv-port-key.connected{background:#96d9ed;box-shadow:0 0 0 2px white,0 0 0 3px #151763}.fv-port-key.connected:after{content:"";display:block;width:3px;height:3px;background:#151763;border-radius:50%;margin:3px}
.fv-colors{border:0;padding:0;margin:14px 0}.fv-colors legend{font-size:14px;font-weight:600;margin-bottom:8px}.fv-color-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:260px}.fv button.fv-color-swatch{min-height:38px;border:2px solid transparent;color:#151763;border-radius:6px;padding:3px;font-size:22px;line-height:1}.fv button.fv-color-swatch[aria-pressed=true]{border-color:#151763;box-shadow:inset 0 0 0 2px white}.fv-color-swatch span{background:white;border-radius:50%;display:inline-block;width:24px;height:24px;line-height:24px}.fv button.fv-color-swatch:hover{border-color:#151763}
/* Picture palette sits beside the diagram; compact screens place it above. */
.fv-editor{display:grid;grid-template-columns:148px minmax(0,1fr)}.fv-drawing{min-width:0}.fv .fv-palette{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:12px 10px;border-bottom:0;border-right:1px solid #dce1ed;background:#f0f2fa}.fv-palette>strong{font-size:14px;padding:0 3px 2px}.fv .fv-palette button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px;min-height:68px;font-size:14px;font-weight:600;background:white}.fv-palette button svg{width:56px;height:38px;flex:none}.fv-palette button span{font-weight:600}.fv-palette .fv-valve-choice{font-size:13px;font-weight:600;display:flex;flex-direction:column;gap:5px;margin-top:2px}.fv-palette .fv-valve-choice select{width:100%;min-width:0;font-size:12px;padding:5px 2px}.fv-palette button:hover svg{filter:drop-shadow(0 1px 2px #20239626)}
@media(max-width:600px){.fv-editor{grid-template-columns:1fr}.fv .fv-palette{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-right:0;border-bottom:1px solid #dce1ed;gap:7px}.fv-palette>strong{grid-column:1/-1}.fv .fv-palette button{min-height:70px;font-size:13px}.fv-palette .fv-valve-choice{grid-column:1/-1;flex-direction:row;align-items:center;gap:10px}.fv-palette .fv-valve-choice select{flex:1;width:auto;font-size:14px}.fv-palette button svg{height:34px}}

@media(max-width:850px){.fv h1{font-size:37px}}
@media(max-width:550px){.fv h1{font-size:34px}}
.fv-editor{grid-template-columns:180px minmax(0,1fr)}.fv .fv-palette{max-height:720px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.fv-basic-parts,.fv-valve-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.fv .fv-palette button{min-width:0;font-size:12px}.fv .fv-palette .fv-valve-list button{gap:1px;min-height:100px;padding:5px 2px}.fv-valve-list button svg{width:48px;height:48px}.fv-valve-list button small{font-size:11px;line-height:1.25;font-weight:400}.fv-basic-parts button svg{width:48px;height:34px}.fv-basic-parts button[data-add=autosampler]{font-size:11px}.fv-palette>strong:not(:first-child){margin-top:6px}
@media(max-width:600px){.fv-editor{grid-template-columns:1fr}.fv .fv-palette{display:flex;max-height:300px;flex-direction:column;overflow-y:auto}.fv-basic-parts{grid-template-columns:repeat(3,minmax(0,1fr))}.fv-valve-list{grid-template-columns:repeat(3,minmax(0,1fr))}.fv .fv-palette button{font-size:13px}.fv-basic-parts button[data-add=autosampler]{font-size:12px}.fv-palette>strong{grid-column:auto}}
.fv .fv-palette{flex-wrap:nowrap;overflow-x:hidden}.fv-basic-parts,.fv-valve-list{flex-shrink:0;width:100%}.fv-palette>strong{flex-shrink:0}
#fv-canvas.placing{cursor:crosshair}.fv .fv-palette button[aria-pressed=true]{background:#e1e6fa;color:#151763;border-color:#202396;box-shadow:0 0 0 1px #202396}

.fv button.fv-help{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;width:22px;height:22px;min-height:22px;padding:0;margin-left:6px;border-radius:50%;font-size:14px;line-height:1;color:#151763;background:#f0f2fa;border:1px solid #a5afce;font-weight:700}.fv-help-panel{position:fixed;z-index:1000;width:340px;max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);overflow:auto;box-sizing:border-box;padding:18px 20px;background:white;color:#242d49;border:1px solid #a5afce;border-top:4px solid #151763;border-radius:8px;box-shadow:0 8px 32px #15176330;font:16px/1.55 "Segoe UI",Arial,sans-serif}.fv-help-panel[hidden]{display:none}.fv-help-panel strong{display:block;padding-right:26px;color:#151763;font-size:17px}.fv-help-panel p{margin:10px 0 0}.fv-help-close{position:absolute;right:8px;top:7px;width:32px;height:32px;padding:0;background:white;border:0;border-radius:4px;font-size:25px;color:#151763;cursor:pointer}.fv-help-close:focus-visible{outline:3px solid #8ea7ec}
