/* Skrupt vapecalculator 3.0.9. Colours are CSS variables: a theme overrides them on .vcal-calc. Contrasts checked AA.
   Compact layout: tight spacing, small headings, one frame at most and hairlines only where they separate. Number fields
   read « − [ 100 ml ] + »: value and unit centred together in a narrow field. Narrow blocks put each label beside its
   field; wider ones set the fields two or three per row, and the result beside the form. */
.vcal-calc{--vcal-ink:#1d2433;--vcal-muted:#5a6475;--vcal-line:#e4e8ee;--vcal-field:#858f9e;--vcal-accent:#1f4f8f;--vcal-soft:#f5f7fa;--vcal-frame:#e4e8ee;--vcal-warn:#9b1c1c;--vcal-radius:12px;
  --vcal-h:44px;--vcal-mid:82px;--vcal-ctl:calc(var(--vcal-h) * 2 + var(--vcal-mid));--vcal-link-h:44px;
  container:vcal/inline-size;box-sizing:border-box;margin:24px 0;padding:16px;border:1px solid var(--vcal-frame);border-radius:var(--vcal-radius);background:#fff;color:var(--vcal-ink);font-family:inherit;font-size:15px;line-height:1.45;text-align:left}
/* Touch screens keep 44 px targets; with a mouse, 40 px controls. */
@media (hover:hover) and (pointer:fine){.vcal-calc{--vcal-h:40px;--vcal-link-h:32px}}
.vcal-calc *,.vcal-calc *::before,.vcal-calc *::after{box-sizing:border-box}
.vcal-calc [hidden]{display:none!important}
.vcal-calc--open{padding:0;border:0;border-radius:0;background:transparent}
.vcal-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
@media (min-width:768px){.vcal-calc:not(.vcal-calc--open){padding:20px 24px}}

/* Heading */
.vcal-head{max-width:46em;margin:0 0 12px}
.vcal-calc .vcal-title{margin:0;color:var(--vcal-ink);font-family:inherit;font-size:18px;font-weight:700;line-height:1.3;letter-spacing:0;text-transform:none}
.vcal-calc .vcal-intro{margin:4px 0 0;color:var(--vcal-muted);font-size:14px;line-height:1.45}
.vcal-calc--compact .vcal-title{font-size:17px}

/* Form. Narrow: one field per line, label on the left and the field on the right. */
.vcal-body{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.vcal-form{container:vcalform/inline-size;min-width:0;margin:0}
.vcal-fields{display:grid;grid-template-columns:minmax(0,1fr);gap:10px 16px}
.vcal-field{min-width:0;margin:0;padding:0;border:0}
.vcal-field:not(.vcal-field--seg){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px}
.vcal-ctl{display:contents}
.vcal-ctl > *{grid-column:1/-1}
.vcal-field:not(.vcal-field--seg) > .vcal-label{grid-column:1;margin:0}
.vcal-ctl > .vcal-input,.vcal-ctl > .vcal-select{grid-column:2;width:var(--vcal-ctl)}
.vcal-calc .vcal-label{display:block;float:none;width:auto;max-width:none;padding:0;margin:0 0 4px;border:0;text-align:left;color:var(--vcal-ink);font-size:15px;font-weight:600;line-height:1.3;text-transform:none;letter-spacing:0}
.vcal-field--seg > .vcal-label{float:left;width:100%}
.vcal-field--seg > .vcal-seg{clear:both}
/* A row of one-character buttons (« 1 2 3 ») sits beside its label, like the other fields. */
.vcal-calc .vcal-field--short > .vcal-label{display:flex;align-items:center;width:calc(100% - var(--vcal-ctl) - 12px);min-height:calc(var(--vcal-h) + 2px);margin:0}
.vcal-field--short > .vcal-seg{clear:none;width:var(--vcal-ctl);margin-left:auto}
.vcal-field--short > .vcal-hint{clear:both}

/* Number: − [ value unit ] +. The input is as wide as its value, so the value and the unit stay together in the middle. */
.vcal-input{display:flex;align-items:stretch;max-width:100%;height:calc(var(--vcal-h) + 2px);border:1px solid var(--vcal-field);border-radius:10px;background:#fff}
.vcal-input:focus-within{outline:2px solid var(--vcal-accent);outline-offset:2px;border-color:var(--vcal-accent)}
@supports selector(:has(*)){
  .vcal-input:focus-within{outline:0;border-color:var(--vcal-field)}
  .vcal-input:has(input:focus){outline:2px solid var(--vcal-accent);outline-offset:2px;border-color:var(--vcal-accent)}
}
.vcal-num{flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-width:0;padding:0;overflow:hidden;cursor:text}
.vcal-calc .vcal-num input{flex:0 1 auto;width:calc(var(--vcal-len, 3) * 1ch + 2px);min-width:1ch;height:100%;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--vcal-ink);font:inherit;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;line-height:normal;text-align:right;outline:0;-webkit-appearance:none;appearance:none}
@supports (field-sizing:content){.vcal-calc .vcal-num input{field-sizing:content;width:auto}}
/* The ring is drawn around the whole field: no second outline hugging the value, even when a theme outlines every
   focused input with a stronger selector. */
.vcal-calc .vcal-num input:focus,.vcal-calc .vcal-num input:focus-visible{outline:0!important;box-shadow:none}
.vcal-calc .vcal-input input[aria-invalid=true]{color:var(--vcal-warn)}
.vcal-input:has(input[aria-invalid=true]){border-color:var(--vcal-warn);box-shadow:inset 0 0 0 1px var(--vcal-warn)}
.vcal-unit{flex:none;padding:0 0 0 4px;color:var(--vcal-muted);font-size:13px;font-weight:500;line-height:1;white-space:nowrap}
/* − and +: square targets inside the field. Invisible without JavaScript; their room is kept, so nothing moves when the
   script starts. */
.vcal-calc .vcal-step{flex:none;display:flex;align-items:center;justify-content:center;width:var(--vcal-h);min-width:var(--vcal-h);height:var(--vcal-h);min-height:0;margin:0;padding:0;border:0;border-radius:9px;background:transparent;box-shadow:none;color:var(--vcal-accent);font:inherit;line-height:1;text-transform:none;cursor:pointer;visibility:hidden;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.vcal-live .vcal-step{visibility:visible}
.vcal-calc .vcal-step:hover{background:var(--vcal-soft)}
.vcal-calc .vcal-step:focus-visible{outline:2px solid var(--vcal-accent);outline-offset:-2px}
.vcal-calc .vcal-step:disabled{color:#a9b1bd;background:transparent;cursor:default}
.vcal-step svg{display:block;pointer-events:none}
.vcal-calc .vcal-select{display:block;max-width:100%;height:calc(var(--vcal-h) + 2px);margin:0;padding:0 30px;border:1px solid var(--vcal-field);border-radius:10px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235a6475' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;color:var(--vcal-ink);font:inherit;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;text-align:center;text-align-last:center;-webkit-appearance:none;appearance:none;box-shadow:none}
.vcal-calc .vcal-select:focus{outline:2px solid var(--vcal-accent);outline-offset:2px;border-color:var(--vcal-accent)}
/* A short choice: a row of buttons (radio inputs) */
.vcal-seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);border:1px solid var(--vcal-field);border-radius:10px;background:#fff;overflow:hidden}
.vcal-calc .vcal-seg-opt{position:relative;display:block;margin:0;padding:0;cursor:pointer;font-weight:400}
.vcal-seg-opt + .vcal-seg-opt{border-left:1px solid var(--vcal-line)}
.vcal-calc .vcal-seg-opt input{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;font-size:16px}
.vcal-seg-opt span{display:flex;align-items:center;justify-content:center;min-height:var(--vcal-h);padding:2px 8px;color:var(--vcal-ink);font-size:14px;font-weight:500;line-height:1.2;text-align:center}
.vcal-seg-opt:hover input:not(:checked) + span{background:var(--vcal-soft)}
.vcal-seg-opt input:checked + span{background:var(--vcal-accent);color:#fff;font-weight:600}
.vcal-seg-opt input:focus-visible + span{outline:2px solid var(--vcal-accent);outline-offset:-2px;box-shadow:inset 0 0 0 4px #fff}
.vcal-calc .vcal-hint{margin:3px 0 0;color:var(--vcal-muted);font-size:13px;font-weight:400;line-height:1.4}
.vcal-calc .vcal-error{margin:3px 0 0;color:var(--vcal-warn);font-size:13px;font-weight:600;line-height:1.4}

/* Folding parts: « Plus de réglages », detailed table, « Comment le calcul est fait » */
.vcal-calc summary{display:inline-flex;align-items:center;gap:6px;min-height:var(--vcal-link-h);margin:0;padding:0;cursor:pointer;list-style:none;color:var(--vcal-accent);font-size:14px;font-weight:600;line-height:1.35}
.vcal-calc summary::-webkit-details-marker{display:none}
.vcal-calc summary:hover span{text-decoration:underline;text-underline-offset:3px}
.vcal-calc summary:focus-visible{outline:2px solid var(--vcal-accent);outline-offset:2px;border-radius:6px}
.vcal-chevron{flex:none;transition:transform .15s ease}
.vcal-calc details[open] > summary .vcal-chevron{transform:rotate(180deg)}
.vcal-more{margin-top:2px}
.vcal-more > .vcal-fields{padding:4px 0 2px}
.vcal-calc .vcal-submit{display:inline-flex;align-items:center;justify-content:center;min-height:var(--vcal-h);margin:12px 0 0;padding:0 20px;border:0;border-radius:10px;background:var(--vcal-accent);color:#fff;font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.vcal-calc .vcal-submit:focus-visible{outline:2px solid var(--vcal-accent);outline-offset:2px}
.vcal-live .vcal-submit{display:none}

/* Result: « Résultat » (and the ml | g choice of the DIY recipe), the answer, then a few figures */
.vcal-result{min-width:0;padding-top:12px;border-top:1px solid var(--vcal-line)}
.vcal-calc--panel .vcal-result{padding:14px 16px;border:0;border-radius:10px;background:var(--vcal-soft)}
.vcal-result-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;margin:0 0 4px}
.vcal-calc .vcal-eyebrow{margin:0;color:var(--vcal-accent);font-size:12px;font-weight:700;line-height:1.3;letter-spacing:.06em;text-transform:uppercase}
.vcal-calc .vcal-answer{margin:0;color:var(--vcal-ink);font-size:17px;font-weight:700;line-height:1.35}
.vcal-calc .vcal-answer:focus{outline:0}
.vcal-calc .vcal-detail{margin:4px 0 0;color:var(--vcal-muted);font-size:14px;line-height:1.45}
.vcal-calc .vcal-detail:empty{display:none}
.vcal-calc .vcal-note{margin:8px 0 0;color:var(--vcal-muted);font-size:14px;line-height:1.45}
.vcal-calc .vcal-note strong{color:var(--vcal-ink);font-weight:700}
.vcal-calc .vcal-note:empty{display:none}
.vcal-calc .vcal-warn{position:relative;padding-left:26px;color:var(--vcal-warn);font-weight:600}
.vcal-calc .vcal-warn::before{content:"";position:absolute;left:0;top:1px;width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2.5l8 14H2z' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'/%3E%3Cpath d='M10 8v4' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14.4' r='1.1'/%3E%3C/svg%3E") no-repeat center/contain;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2.5l8 14H2z' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'/%3E%3Cpath d='M10 8v4' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14.4' r='1.1'/%3E%3C/svg%3E") no-repeat center/contain}
.vcal-figures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;margin:12px 0 0}
.vcal-figures div{min-width:0}
.vcal-calc .vcal-figures dt{margin:0;color:var(--vcal-muted);font-size:13px;font-weight:500;line-height:1.3}
.vcal-calc .vcal-figures dd{margin:2px 0 0;color:var(--vcal-ink);font-size:18px;font-weight:700;line-height:1.25;font-variant-numeric:tabular-nums}
.vcal-fold{margin-top:4px}
.vcal-table{width:100%;margin:0;border-collapse:collapse;background:transparent;font-size:14px;font-variant-numeric:tabular-nums}
.vcal-table caption{padding:0 0 4px;caption-side:top;text-align:left;color:var(--vcal-muted);font-size:13px;font-weight:600}
.vcal-table th,.vcal-table td{padding:5px 8px;border:0;border-bottom:1px solid var(--vcal-line);background:transparent;text-align:right;font-weight:400;line-height:1.4}
.vcal-table th:first-child{padding-left:0;text-align:left}
.vcal-table th:last-child,.vcal-table td:last-child{padding-right:0}
.vcal-table thead th{padding-top:0;padding-bottom:4px;color:var(--vcal-muted);font-size:12px;font-weight:600;line-height:1.3}
.vcal-table tbody tr:last-child th,.vcal-table tbody tr:last-child td{border-bottom:0}
.vcal-table .vcal-best th,.vcal-table .vcal-best td{color:var(--vcal-accent);font-weight:700}
.vcal-table .vcal-total th,.vcal-table .vcal-total td{font-weight:700}
.vcal-table--recipe{margin-top:10px}
/* Recipe unit: one column at a time, ml by default. « Afficher en » appears next to « Résultat » once the script runs
   (.vcal-live); the table's caption is then read by screen readers only. */
.vcal-unitpick{display:none;min-width:0;margin:0;padding:0;border:0}
.vcal-live .vcal-unitpick{display:block}
.vcal-calc .vcal-unitpick > .vcal-label{float:left;width:auto;margin:0 8px 0 0;color:var(--vcal-muted);font-size:13px;line-height:calc(var(--vcal-h) + 2px)}
.vcal-unitpick .vcal-seg{width:112px}
.vcal-unitpick .vcal-seg-opt span{font-size:15px}
.vcal-live .vcal-table--recipe caption{position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.vcal-table--recipe .vcal-col-ml,.vcal-table--recipe .vcal-col-g{padding-right:0}
.vcal-table--recipe .vcal-col-g,.vcal-grams .vcal-table--recipe .vcal-col-ml{display:none}
.vcal-grams .vcal-table--recipe .vcal-col-g{display:table-cell}
.vcal-seg-opt .vcal-sr{min-height:0;padding:0}

/* Footer: how it is computed, links */
/* Closed, « Comment le calcul est fait » and the links share one line; open, the explanation takes the whole width. */
.vcal-foot{display:flex;flex-wrap:wrap;align-items:center;gap:0 20px;margin-top:8px}
.vcal-foot > *{min-width:0}
.vcal-how[open]{flex:1 0 100%}
.vcal-how-body{max-width:46em;padding:0 0 6px}
.vcal-calc .vcal-how-body p{margin:6px 0 0;color:var(--vcal-muted);font-size:14px;line-height:1.5}
.vcal-calc .vcal-links{display:flex;flex-wrap:wrap;gap:0 20px;margin:0}
.vcal-calc .vcal-links a{display:inline-flex;align-items:center;gap:6px;min-height:var(--vcal-link-h);font-size:14px;font-weight:600}
.vcal-calc a{color:var(--vcal-accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.vcal-calc a:hover{text-decoration-thickness:2px}
.vcal-calc a:focus-visible{outline:2px solid var(--vcal-accent);outline-offset:2px;border-radius:2px}

/* Very narrow: label above its field. */
@container vcalform (max-width:299px){
  .vcal-field:not(.vcal-field--seg){display:block}
  .vcal-field:not(.vcal-field--seg) > .vcal-label{margin:0 0 4px}
  .vcal-ctl{display:block}
  .vcal-ctl > .vcal-input,.vcal-ctl > .vcal-select{width:100%}
  .vcal-calc .vcal-field--short > .vcal-label{display:block;width:100%;min-height:0;margin:0 0 4px}
  .vcal-field--short > .vcal-seg{clear:both;width:100%}
}
/* Wider form: labels above, fields two or three per row; a row of buttons takes two cells. Each field spans two rows
   of the form grid (label, then field) and shares them (subgrid): when one label takes two lines, the fields of that
   row stay level. */
@container vcalform (min-width:380px){
  .vcal-fields{grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:0 16px}
  .vcal-fields > .vcal-field{grid-row:span 2;margin:0 0 10px}
  .vcal-field:not(.vcal-field--seg){display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:subgrid;row-gap:0;align-items:start}
  .vcal-field:not(.vcal-field--seg) > .vcal-label{align-self:end;margin:0 0 4px}
  .vcal-ctl{display:block}
  .vcal-more{margin-top:-4px}
  .vcal-fields > .vcal-field--seg,.vcal-fields > .vcal-field--wide{grid-column:span 2}
  .vcal-fields > .vcal-field--short{grid-column:auto}
  .vcal-fields > .vcal-field--seg > .vcal-seg{max-width:calc((100% - 16px) / 2 + 16px + var(--vcal-ctl))}
  .vcal-fields > .vcal-field--short > .vcal-seg{max-width:100%}
  .vcal-calc .vcal-field--short > .vcal-label{display:block;width:100%;min-height:0;margin:0 0 4px}
  .vcal-field--short > .vcal-seg{clear:both;margin-left:0}
  .vcal-calc .vcal-label{font-size:14px}
}
/* Wide blocks: form and result side by side */
@container vcal (min-width:640px){
  .vcal-body{grid-template-columns:minmax(0,11fr) minmax(0,9fr);gap:24px;align-items:start}
  .vcal-result{padding:0 0 0 24px;border-top:0;border-left:1px solid var(--vcal-line)}
  .vcal-calc--panel .vcal-result{padding:16px 20px;border:0}
}
@container vcal (min-width:900px){
  .vcal-body{gap:32px}
  .vcal-result{padding-left:28px}
  .vcal-calc .vcal-answer{font-size:18px}
}
@container vcal (max-width:360px){.vcal-calc .vcal-figures dd{font-size:17px}}
@media (prefers-reduced-motion:reduce){.vcal-chevron{transition:none}}
/* 3.0.8: « Chercher un arôme » (DIY). A full-width text field with a magnifier; the aromas found sit in the flow under
   it (nothing for a theme column, a frame or another site to cut), then the chosen aroma with ✕ takes the field's place. */
.vcal-fields > .vcal-field--search{grid-column:1/-1}
.vcal-field--search{visibility:hidden}
.vcal-live .vcal-field--search{visibility:visible}
.vcal-calc .vcal-opt{color:var(--vcal-muted);font-weight:400}
.vcal-combo{position:relative;min-width:0}
.vcal-combo-icon{position:absolute;top:calc((var(--vcal-h) + 2px - 18px) / 2);left:12px;color:var(--vcal-muted);pointer-events:none}
.vcal-calc .vcal-combo-input{display:block;width:100%;max-width:none;height:calc(var(--vcal-h) + 2px);margin:0;padding:0 12px 0 38px;border:1px solid var(--vcal-field);border-radius:10px;background:#fff;box-shadow:none;color:var(--vcal-ink);font:inherit;font-size:16px;line-height:normal;-webkit-appearance:none;appearance:none}
.vcal-calc .vcal-combo-input::placeholder{color:#6b7584;opacity:1}
.vcal-calc .vcal-combo-input:focus{outline:2px solid var(--vcal-accent);outline-offset:2px;border-color:var(--vcal-accent);box-shadow:none}
.vcal-calc .vcal-options{margin:4px 0 0;padding:4px;list-style:none;border:1px solid var(--vcal-line);border-radius:10px;background:#fff;box-shadow:0 6px 18px rgba(29,36,51,.08)}
.vcal-calc .vcal-option{display:flex;align-items:center;gap:10px;min-height:var(--vcal-h);margin:0;padding:4px 8px;border-radius:8px;cursor:pointer;line-height:1.3;list-style:none}
.vcal-calc .vcal-option:hover{background:var(--vcal-soft)}
.vcal-calc .vcal-option[aria-selected=true]{background:var(--vcal-soft);box-shadow:inset 0 0 0 2px var(--vcal-accent)}
.vcal-option-img,.vcal-picked-img{flex:none;display:block;width:36px;height:36px;border-radius:6px;background:var(--vcal-soft);object-fit:contain}
.vcal-option-text,.vcal-picked-text{display:flex;flex-direction:column;min-width:0}
.vcal-option-name,.vcal-picked-name{color:var(--vcal-ink);font-size:14px;font-weight:600;overflow-wrap:anywhere}
.vcal-option-meta,.vcal-picked-meta{color:var(--vcal-muted);font-size:13px;overflow-wrap:anywhere}
.vcal-picked{display:flex;align-items:center;gap:10px;min-height:calc(var(--vcal-h) + 2px);padding:2px 2px 2px 8px;border:1px solid var(--vcal-field);border-radius:10px;background:var(--vcal-soft)}
.vcal-picked-text{flex:1 1 auto}
.vcal-calc .vcal-unpick{flex:none;display:flex;align-items:center;justify-content:center;width:var(--vcal-h);height:var(--vcal-h);min-height:0;margin:0;padding:0;border:0;border-radius:8px;background:transparent;box-shadow:none;color:var(--vcal-ink);cursor:pointer}
.vcal-calc .vcal-unpick:hover{background:#fff}
.vcal-calc .vcal-unpick:focus-visible{outline:2px solid var(--vcal-accent);outline-offset:-2px}
.vcal-unpick svg{display:block;pointer-events:none}
.vcal-calc .vcal-search-msg:empty{display:none}
/* Dedicated pages */
.vcal-page{max-width:980px;margin:0 auto;padding:8px 0 64px;color:#1d2433;font-size:16px;line-height:1.65}
.vcal-page .vcal-lead{max-width:44em;margin:0;color:#3a4354;font-size:18px;line-height:1.6}
.vcal-page .vcal-calc{margin:24px 0 0}
.vcal-page h2{margin:0 0 16px;font-size:24px;font-weight:700;line-height:1.3;letter-spacing:0;text-transform:none}
.vcal-page .vcal-article h2 ~ h2{margin-top:48px}
.vcal-page h3{margin:32px 0 8px;font-size:18px;font-weight:700;line-height:1.35;letter-spacing:0;text-transform:none}
.vcal-page .vcal-article,.vcal-page .vcal-faq,.vcal-page .vcal-others-nav{margin-top:72px}
.vcal-page .vcal-article p,.vcal-page .vcal-article li{max-width:44em}
.vcal-page .vcal-formula{max-width:44em;margin:16px 0;padding:2px 0 2px 16px;border-left:3px solid #1f4f8f;background:none;color:#1d2433;font-variant-numeric:tabular-nums}
.vcal-page .vcal-faq dl{max-width:44em;margin:0}
.vcal-page .vcal-qa{padding:20px 0;border-top:1px solid #e4e8ee}
.vcal-page .vcal-qa:first-child{padding-top:4px;border-top:0}
.vcal-page .vcal-faq dt{margin:0;font-size:17px;font-weight:700;line-height:1.4}
.vcal-page .vcal-faq dd{margin:6px 0 0;color:#4d5768}
.vcal-page .vcal-guide{margin:40px 0 0}
.vcal-page a{color:#1f4f8f}
.vcal-page a:focus-visible{outline:2px solid #1f4f8f;outline-offset:2px;border-radius:2px}
.vcal-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px;margin:32px 0 0;padding:0;list-style:none}
.vcal-card{position:relative;margin:0;padding:24px 56px 24px 24px;border-radius:16px;background:#fff}
.vcal-page .vcal-cards h2{margin:0 0 6px;font-size:19px;line-height:1.35}
.vcal-cards h2 a{color:#1f4f8f;text-decoration:none}
.vcal-cards h2 a::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:16px}
.vcal-cards h2 a:focus-visible{outline:0}
.vcal-cards h2 a:focus-visible::after{outline:2px solid #1f4f8f;outline-offset:2px}
.vcal-card:hover h2 a{text-decoration:underline;text-underline-offset:3px}
.vcal-cards p{margin:0;color:#4d5768}
.vcal-card-arrow{position:absolute;top:26px;right:22px;color:#1f4f8f}
.vcal-others{max-width:44em;margin:0;padding:0;list-style:none}
.vcal-others li{margin:0;border-top:1px solid #e4e8ee}
.vcal-others li:last-child{border-bottom:1px solid #e4e8ee}
.vcal-page .vcal-others a{position:relative;display:block;padding:16px 44px 16px 0;color:#1d2433;text-decoration:none}
.vcal-others-name{display:block;color:#1f4f8f;font-size:17px;font-weight:700;line-height:1.35}
.vcal-others-short{display:block;margin-top:4px;color:#4d5768;font-size:15px;line-height:1.5}
.vcal-page .vcal-others a:hover .vcal-others-name{text-decoration:underline;text-underline-offset:3px}
.vcal-others svg{position:absolute;top:50%;right:8px;margin-top:-9px;color:#1f4f8f}
.vcal-embed{margin-top:56px}
.vcal-page summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;list-style:none;color:#1f4f8f;font-size:16px;font-weight:600}
.vcal-page summary::-webkit-details-marker{display:none}
.vcal-page summary:hover span{text-decoration:underline;text-underline-offset:3px}
.vcal-page summary:focus-visible{outline:2px solid #1f4f8f;outline-offset:2px;border-radius:6px}
.vcal-page details[open] > summary .vcal-chevron{transform:rotate(180deg)}
.vcal-embed p{max-width:44em;margin:8px 0 0;color:#4d5768}
.vcal-embed-box{margin:16px 0 0}
.vcal-embed-box textarea{display:block;width:100%;min-height:104px;padding:12px 14px;border:1px solid #858f9e;border-radius:10px;background:#fff;color:#1d2433;font:14px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;resize:vertical}
.vcal-embed-box label{display:block;margin:0 0 6px;font-size:15px;font-weight:600}
.vcal-copy{min-height:44px;margin:12px 0 0;padding:0 20px;border:0;border-radius:10px;background:#1f4f8f;color:#fff;font:inherit;font-weight:600;cursor:pointer}
.vcal-copy:focus-visible{outline:2px solid #1f4f8f;outline-offset:2px}
.vcal-attrib{margin:8px 0 0;font-size:14px;color:#4d5768}
@media (max-width:480px){.vcal-page h2{font-size:21px}.vcal-page .vcal-article,.vcal-page .vcal-faq,.vcal-page .vcal-others-nav{margin-top:56px}.vcal-calc{margin:20px 0}}