/* ─────────────────────────────────────────────────────────────────────────
   webportico[-<lang>].html only: the hero, the gallery of the real panel and the two-state views (site decision S66).
   The words and the markup come from docs/site/webportico-page/ through tools/site-product-pages.py; the behaviour from
   assets/webportico.js. Without a script every frame shows, one under the other.
   ───────────────────────────────────────────────────────────────────────── */
.wp .vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wp-a{display:block;height:0;scroll-margin-top:calc(var(--mast,64px) + 24px)}

/* the first screen */
.wp-hero{padding-block:clamp(14px,2vw,26px) clamp(24px,3.2vw,44px)}
.wp-hero .ht-crumbs{margin:0 0 clamp(18px,2.4vw,30px)}
.wp-hero-grid{display:grid;gap:22px}
@media (min-width:1000px){
  .wp-hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(32px,4.5vw,84px);align-items:end}
}
.wp-hero h1{
  max-width:none;margin:0;font-family:var(--cond);font-weight:700;font-size:clamp(34px,4.5vw,66px);line-height:1.04;
  letter-spacing:-.012em;color:var(--ink);text-wrap:balance;
}
html[lang="ja"] .wp-hero h1,html[lang="zh-TW"] .wp-hero h1{letter-spacing:0;line-height:1.18}
.wp-tag{margin:clamp(12px,1.4vw,18px) 0 0;font-family:var(--cond);font-weight:700;font-size:clamp(20px,2.2vw,31px);line-height:1.18;color:var(--led);text-wrap:balance}
.wp-hero-r p{margin:0 0 12px;font-size:clamp(16px,1.2vw,18px);line-height:1.6;color:color-mix(in srgb,var(--ink) 88%,transparent);text-wrap:pretty}
.wp-acts{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.wp-hero-r .wp-more{margin:14px 0 0}
.wp-more a{color:var(--ink);text-underline-offset:3px;margin-right:18px;display:inline-block}
.wp-more a:hover,.wp-more a:focus-visible{color:var(--led)}
.wp-hero-r .wp-meta{margin:14px 0 0;font-family:var(--mono);font-size:12px;line-height:1.5;letter-spacing:.01em;color:var(--dim)}

/* the panel: one gallery, six named views */
.wp-panel{
  padding-block:clamp(26px,3.4vw,46px) clamp(30px,4vw,60px);border-top:1px solid var(--rule);
  background:radial-gradient(90% 420px at 50% 0%,rgba(255,176,32,.055),transparent 70%);
  scroll-margin-top:calc(var(--mast,64px) + 8px);
}
.wp-panel-head{display:grid;gap:8px;margin:0 0 clamp(14px,1.8vw,22px)}
@media (min-width:1000px){.wp-panel-head{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(32px,4.5vw,84px);align-items:end}}
.wp-panel-head h2{margin:0;font-family:var(--cond);font-weight:700;font-size:clamp(25px,2.7vw,38px);line-height:1.1;color:var(--ink);text-wrap:balance}
.wp-panel-head p{margin:0;font-size:clamp(15px,1.1vw,17px);line-height:1.55;color:var(--dim);text-wrap:pretty}

.wp-tabs{
  display:flex;gap:6px;margin:0 0 12px;padding:2px;overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.wp-tabs::-webkit-scrollbar{display:none}
.wp-tabs button{
  flex:none;min-height:40px;padding:8px 15px;border:1px solid var(--rule-hi);border-radius:999px;background:transparent;
  color:var(--ink);font:500 14px/1.2 var(--sans);cursor:pointer;
  transition:border-color .2s ease,background-color .2s ease,color .2s ease;
}
.wp-tabs button:hover{border-color:var(--led)}
.wp-tabs button:focus-visible,.wp-zoom:focus-visible,.wp-ctl button:focus-visible,.wp-close:focus-visible{outline:2px solid var(--led);outline-offset:2px}
.wp-tabs button[aria-pressed="true"]{background:var(--led);border-color:var(--led);color:#14100a}
/* the panel's gallery has thirteen views (site S76): on a wide screen its buttons wrap into rows, so every view is in sight;
   on a phone they scroll sideways, and the row's right end fades so a cut button reads as more to come */
@media (min-width:900px){.wp-panel .wp-tabs{flex-wrap:wrap;overflow:visible}}
@media (max-width:899px){.wp-panel .wp-tabs{mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}}

.wp-fig{margin:0;min-width:0}
.wp-art .wp-fig,.wp-art .wp-views{margin:20px 0 26px}
.wp-art .wp-views .wp-fig{margin:0}
.wp-tray{
  --tray:clamp(16px,1.7vw,24px);--lip:5px;padding:var(--lip);border:1px solid var(--rule);border-radius:var(--tray);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012) 42%,transparent);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 26px 60px rgba(0,0,0,.45);
}
.wp-plate{position:relative;overflow:hidden;border:1px solid var(--rule);border-radius:calc(var(--tray) - var(--lip));background:#050505;aspect-ratio:var(--ar);cursor:zoom-in}
.wp-plate picture,.wp-plate img{display:block;width:100%;height:100%}
.wp-plate img{object-fit:cover;object-position:top left}
.wp-miss{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:18px;text-align:center;color:var(--dim);font-size:15px}
.wp-fig figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin:10px 2px 0;font-size:14px;line-height:1.5;color:color-mix(in srgb,var(--ink) 82%,transparent)}
.wp-fig figcaption p{flex:1 1 280px;min-width:0;margin:0;font-size:inherit;text-wrap:pretty}
.wp-fig figcaption b{color:var(--ink);font-weight:600}
.wp-fig .wp-det{display:none;flex-basis:100%;font-size:12.5px;color:var(--dim)}
.wp-zoom{
  flex:none;padding:4px 0;border:0;background:none;color:var(--led);font:500 13.5px/1.3 var(--sans);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;
}
.wp-ctl{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:12px}
.wp-ctl button{display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid var(--rule-hi);border-radius:50%;background:transparent;color:var(--ink);cursor:pointer}
.wp-ctl button:hover{border-color:var(--led);color:var(--led)}
.wp-ctl svg{width:18px;height:18px}
.wp-count{min-width:6ch;text-align:center;font-family:var(--mono);font-size:13px;color:var(--dim);font-variant-numeric:tabular-nums}
.wp-count b{color:var(--ink);font-weight:500}
.wp-origin{margin:10px 0 0;text-align:center;font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--dim)}
@media (prefers-reduced-motion:no-preference){
  .wp-frames.wp-on .wp-fig:not([hidden]){animation:wp-in .2s ease}
  @keyframes wp-in{from{opacity:.25}to{opacity:1}}
}
@media (scripting:none){
  .wp-tabs,.wp-ctl,.wp-zoom{display:none}
  .wp-frames{display:grid;gap:22px}
}
/* on a phone the plate shows a crop that can be read, and the enlarged view the whole frame */
@media (max-width:640px){
  .wp-plate{aspect-ratio:4/3}
  .wp-fig .wp-det{display:block}
}

/* the article */
.wp-art h2{scroll-margin-top:calc(var(--mast,64px) + 64px);margin:clamp(50px,6vw,78px) 0 14px;text-wrap:balance}
.wp-art > h2:first-of-type{margin-top:0}
.wp-art h3{scroll-margin-top:calc(var(--mast,64px) + 64px)}
.wp-cases{display:grid;gap:12px;margin:22px 0 6px}
@media (min-width:760px){.wp-cases{grid-template-columns:repeat(3,minmax(0,1fr))}}
.wp-cases section{padding:16px 18px;border:1px solid var(--rule);border-radius:12px;background:var(--panel)}
.wp-cases h3{margin:0 0 8px}
.wp-cases p{margin:0;font-size:15px;line-height:1.55}
.wp-faq h3{margin:26px 0 6px}
.wp-faq h3:first-child{margin-top:0}
.wp-end{margin:clamp(46px,6vw,74px) 0 0;padding:clamp(20px,3vw,34px);border:1px solid var(--rule-hi);border-radius:16px;background:linear-gradient(160deg,rgba(255,176,32,.09),transparent 60%),var(--panel)}
.wp-art .wp-end h2{margin:0 0 10px}
.wp-end p{margin:0}
/* Build it yourself (site decision S73): the example project of Bucket & Code Server IDE in three steps, its two commands
   and the one prerequisite line; the steps stand in a row from 900 px, joined by a short amber line, one under the other
   below that */
.wp-build{margin:clamp(40px,5vw,64px) 0 0;padding:clamp(20px,3vw,34px);border:1px solid var(--rule-hi);border-radius:16px;
  background:radial-gradient(120% 220px at 0 0,rgba(255,176,32,.075),transparent 70%),var(--panel)}
.wp-art .wp-build h2{margin:0 0 12px}
.wp-build-brow{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-family:var(--mono);font-size:12px;line-height:1.4;letter-spacing:.02em;color:var(--dim)}
.wp-build-brow img{flex:none;width:18px;height:18px}
.wp-art .wp-build-lead{margin:0 0 22px;max-width:70ch}
.wp-art .wp-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:wp-step}
@media (min-width:900px){.wp-art .wp-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}
.wp-art .wp-steps>li{position:relative;display:flex;flex-direction:column;margin:0;padding:16px 18px;border:1px solid var(--rule);
  border-radius:12px;background:var(--rack);counter-increment:wp-step}
.wp-art .wp-steps>li::before{content:counter(wp-step,decimal-leading-zero);display:block;margin:0 0 8px;font-family:var(--cond);
  font-weight:700;font-size:28px;line-height:1;color:var(--led)}
.wp-art .wp-steps>li:not(:last-child)::after{content:"";position:absolute;left:31px;bottom:-15px;width:2px;height:14px;background:var(--led);opacity:.55}
@media (min-width:900px){.wp-art .wp-steps>li:not(:last-child)::after{left:auto;bottom:auto;top:30px;right:-19px;width:18px;height:2px}}
.wp-art .wp-steps h3{margin:0 0 8px}
.wp-art .wp-steps p{margin:0;font-size:15px;line-height:1.55}
.wp-art .wp-steps .wp-more{margin-top:auto;padding-top:12px;font-size:14.5px}
.wp-build .ht-cmd{margin:18px 0 0}
.wp-art .wp-build-note{margin:14px 0 0;font-size:14px;line-height:1.5;color:var(--dim)}
.wp-art .wp-build>.wp-more{margin:12px 0 0}
/* WebPortico and other hosting panels (site decision S74): one table in a box of its own that scrolls sideways (the page
   never does), the feature column sticky, our column marked by words, a thicker border and a tint; source and note marks
   link the lists under it */
.wp-cmp-box{position:relative;margin:8px 0 0;overflow-x:auto;overscroll-behavior-x:contain;border:1px solid var(--rule);
  border-radius:12px;background:var(--panel);-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--rule-hi) transparent}
.wp-cmp-box:focus-visible{outline:2px solid var(--led);outline-offset:2px}
.wp-cmp{width:100%;min-width:900px;border-collapse:separate;border-spacing:0;font-size:13px;line-height:1.45}
.wp-cmp-cap{margin:14px 0 0;font-family:var(--mono);font-size:12px;line-height:1.5;letter-spacing:.01em;color:var(--dim)}
.wp-cmp th,.wp-cmp td{padding:9px 9px;vertical-align:top;text-align:left;border-top:1px solid var(--rule)}
.wp-cmp thead th{border-top:0;font-family:var(--cond);font-weight:700;font-size:14.5px;line-height:1.2;color:var(--ink)}
.wp-cmp tbody th{font-weight:600;color:var(--ink);width:128px;min-width:118px}
.wp-cmp td{color:color-mix(in srgb,var(--ink) 86%,transparent);min-width:94px}
.wp-cmp th:first-child{position:sticky;left:0;z-index:1;background:var(--panel);box-shadow:1px 0 0 var(--rule)}
.wp-cmp .wp-cmp-ours{background:rgba(255,176,32,.07);border-left:2px solid var(--led);border-right:2px solid var(--led);min-width:136px}
.wp-cmp thead .wp-cmp-ours{border-top:2px solid var(--led);border-radius:6px 6px 0 0}
.wp-cmp tbody tr:last-child .wp-cmp-ours{border-bottom:2px solid var(--led)}
.wp-cmp-ours small{display:block;margin-top:2px;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.02em;color:var(--led)}
.wp-cmp-notes{margin:14px 0 0;padding:0 0 0 1.1em;list-style:disc;font-size:14px;line-height:1.5;color:color-mix(in srgb,var(--ink) 84%,transparent)}
.wp-cmp-notes li{margin:0 0 6px}
.wp-art .wp-cmp-srcfile{margin:12px 0 0;font-size:14px;line-height:1.5;color:var(--dim)}
.wp-cmp-srcfile a{font-family:var(--mono);font-size:13px;overflow-wrap:anywhere}
/* the owner's icons beside the text-only blocks (site decision S75): floated beside a heading's text, at the top of a
   card or a step; decorative, the heading says the same */
.wp-art .wp-ico{float:right;width:72px;height:72px;margin:0 0 10px 18px}
.wp-art h2,.wp-art h3,.wp-art .wp-fig,.wp-art .wp-views,.wp-art .ht-cmd,.wp-art .ht-call,.wp-art .wp-cmp-box,.wp-art .wp-faq{clear:both}
.wp-cases .wp-ico{float:none;display:block;width:56px;height:56px;margin:0 0 8px}
.wp-art .wp-steps .wp-ico{position:absolute;top:12px;right:14px;float:none;width:52px;height:52px;margin:0}
.wp-art .wp-end .wp-ico{margin-top:-6px}
@media (max-width:640px){.wp-art .wp-ico{width:56px;height:56px;margin-left:12px}.wp-art .wp-steps .wp-ico{width:44px;height:44px}}
/* the comparison's verdicts (site decision S75): a mark a person reads at a glance, then one plain sentence; the marks are
   characters with a hidden word for screen readers, never colour alone */
.wp-cmp-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:10px 0 0;padding:0;list-style:none;font-size:13px;line-height:1.4;color:color-mix(in srgb,var(--ink) 84%,transparent)}
.wp-cmp-legend li{display:flex;align-items:baseline;gap:6px}
.wp-v{display:block;margin:0 0 3px;font-size:15px;line-height:1.2;letter-spacing:.06em;white-space:nowrap;font-weight:700}
.wp-cmp-legend .wp-v{display:inline;flex:none;margin:0}
.wp-cmp-legend .wp-v-s{font-size:12px}
/* on a computer the seven products share the column's width, so the table fits without scrolling; on a phone the box
   scrolls and the feature and WebPortico columns stay in view */
@media (min-width:1000px){.wp-cmp{table-layout:fixed;min-width:0}.wp-cmp thead th:first-child{width:112px}
  .wp-cmp th,.wp-cmp td{overflow-wrap:break-word;hyphens:auto}}
.wp-v-n{color:var(--dim)}
.wp-v-nd{color:var(--dim);font-weight:400}
.wp-v-y1,.wp-v-y2,.wp-v-y3{color:#7BD88F}
.wp-v-s1,.wp-v-s2,.wp-v-s3{letter-spacing:0}
.wp-src{margin:22px 0 0;border:1px solid var(--rule);border-radius:12px;background:var(--panel)}
.wp-src summary{padding:11px 16px;cursor:pointer;font-weight:500}
.wp-src p,.wp-src ul{margin:0 16px 12px;font-size:15px}
.wp-rel{margin-top:22px}
.wp-legal{margin:18px 0 0;font-size:13px;color:var(--dim)}

/* the enlarged view */
.wp-dialog{width:min(96vw,1800px);max-width:none;max-height:94dvh;margin:auto;padding:0;overflow:hidden;border:1px solid var(--rule-hi);border-radius:14px;background:var(--panel);color:var(--ink)}
.wp-dialog-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 12px}
.wp-dialog-t{min-width:0;margin:0;font-size:14px;line-height:1.35;color:var(--ink)}
.wp-close{flex:none;min-height:40px;padding:8px 14px;border:1px solid var(--rule-hi);border-radius:999px;background:transparent;color:var(--ink);font:500 13.5px/1.2 var(--sans);cursor:pointer}
.wp-close:hover{border-color:var(--led);color:var(--led)}
.wp-dialog-body{max-height:calc(94dvh - 58px);overflow:auto;overscroll-behavior:contain;background:#050505}
.wp-dialog-body img{display:block;width:100%;height:auto}
@media (max-width:820px){.wp-dialog-body img{width:1000px;max-width:none}}

/* ─────────────────────────────────────────────────────────────────────────
   The hero (site decision S78): the owner's headline over a carousel of the real panel, one slide per feature, and his
   features grid under it. The carousel's frame is a tray with a plate in it, as the gallery's; every slide sits in the
   same grid cell, so the box keeps the height of its tallest slide and nothing below it moves. A new slide is wiped in
   from the side it comes from (clip-path) while its picture settles from 104 % (the one moving thing of the page); the
   reduced-motion setting shows it at once. Without a script the first slide shows; the tabs, the controls and the cards'
   buttons keep their room but stay invisible, so nothing moves when the script starts.
   ───────────────────────────────────────────────────────────────────────── */
.wp-hx{
  position:relative;isolation:isolate;padding-block:clamp(14px,2vw,26px) clamp(30px,4vw,64px);
  background:
    radial-gradient(70% 520px at 50% 62%,rgba(14,150,247,.11),transparent 72%),
    radial-gradient(48% 340px at 50% 8%,rgba(255,176,32,.07),transparent 70%);
}
.wp-hx-head{display:grid;justify-items:center;text-align:center;max-width:1040px;margin:0 auto}
.wp-hx-brow{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 10px;margin:0 0 clamp(18px,2.2vw,28px)}
.wp-hx-brow .sd-brow{margin:0}
.wp-hx-brow .sd-brow img{display:block;border-radius:3px}
.wp-badge{
  display:inline-flex;align-items:center;gap:8px;margin:0;padding:5px 13px 4px 10px;max-width:100%;
  font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.35;
  color:#ffd277;border:1px solid rgba(14,150,247,.42);border-radius:999px;
  background:rgba(14,150,247,.12);
}
.wp-badge svg{width:13px;height:13px;flex:none;fill:var(--led)}
.wp-hx h1{
  max-width:16ch;margin:0;font-family:var(--cond);font-weight:700;font-size:clamp(40px,6.4vw,92px);line-height:.98;
  letter-spacing:-.022em;color:#f1f5f7;text-wrap:balance;
}
/* one sentence a line (the generator wraps each in .wp-l) */
.wp-hx h1 .wp-l{display:block}
html[lang="ja"] .wp-hx h1{word-break:auto-phrase}
html[lang="ja"] .wp-hx h1,html[lang="zh-TW"] .wp-hx h1{max-width:20em;letter-spacing:0;line-height:1.14;font-size:clamp(32px,4.8vw,68px)}
.wp-hx-sub{
  max-width:64ch;margin:clamp(16px,1.8vw,24px) 0 0;font-size:clamp(16.5px,1.32vw,19.5px);line-height:1.58;
  color:color-mix(in srgb,var(--ink) 84%,transparent);text-wrap:pretty;
}
.wp-hx .wp-acts{justify-content:center;margin:clamp(20px,2.2vw,28px) 0 0}
.wp-hx .isl{font-size:15.5px;padding:8px 8px 8px 20px}
.wp-hx .isl .wl{width:30px;height:30px}
.wp-hx-meta{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;max-width:84ch;margin:16px 0 0;
  font-family:var(--mono);font-size:12px;line-height:1.55;letter-spacing:.01em;color:var(--dim);
}
.wp-hx-meta a{color:var(--ink);font-family:var(--sans);font-size:14.5px;text-underline-offset:3px}
.wp-hx-meta a:hover,.wp-hx-meta a:focus-visible{color:var(--led)}

/* the carousel */
.wp-car{max-width:1310px;margin:clamp(30px,3.6vw,52px) auto 0}
.wp-car-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px;margin:0 0 14px}
.wp-car-tabs{display:flex;gap:6px;padding:2px;min-width:0;flex-wrap:wrap;justify-content:center}
.wp-car:not(.on) .wp-car-top,.wp:not(.wp-car-on) .wp-card-go{visibility:hidden} /* their room is kept: nothing moves when the script starts */
.wp-car-tabs button{
  position:relative;overflow:hidden;flex:none;min-height:40px;padding:8px 15px;border:1px solid var(--rule-hi);border-radius:999px;
  background:rgba(255,255,255,.025);color:color-mix(in srgb,var(--ink) 86%,transparent);font:500 14px/1.2 var(--sans);cursor:pointer;
  transition:border-color .45s var(--ease-seat),background-color .45s var(--ease-seat),color .45s var(--ease-seat);
}
.wp-car-tabs button:hover{border-color:rgba(255,176,32,.55);color:var(--ink)}
.wp-car-tabs button[aria-selected="true"]{border-color:rgba(255,176,32,.6);background:var(--led-soft);color:var(--led)}
.wp-car-tabs button i{position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;background:var(--led);opacity:0;transform:scaleX(0);transform-origin:left}
.wp-car-tabs button[aria-selected="true"] i{opacity:.85}
.wp-car.tick .wp-car-tabs button[aria-selected="true"] i{animation:wp-car-prog var(--ms,7000ms) linear forwards}
@keyframes wp-car-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.wp-car-ctl{display:flex;align-items:center;gap:6px}
.wp-car-ctl button{
  display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--rule-hi);border-radius:50%;
  background:rgba(255,255,255,.035);color:var(--ink);cursor:pointer;
  transition:border-color .45s var(--ease-seat),color .45s var(--ease-seat),transform .45s var(--ease-seat);
}
.wp-car-ctl button:hover{border-color:var(--led);color:var(--led)}
.wp-car-ctl button:active{transform:scale(.96)}
.wp-car-ctl svg{width:16px;height:16px}
.wp-car-play .wp-i-play,.wp-car-play.is-paused .wp-i-pause{display:none}
.wp-car-play.is-paused .wp-i-play{display:block}
.wp-car-count{min-width:3.4em;text-align:center;font:500 12.5px/1 var(--mono);color:var(--dim);font-variant-numeric:tabular-nums}
.wp-car-count b{color:var(--ink);font-weight:600}
.wp-car-tabs button:focus-visible,.wp-car-ctl button:focus-visible,.wp-card-go:focus-visible{outline:2px solid var(--led);outline-offset:2px}

.wp-car-tray{
  --tray:clamp(18px,1.9vw,26px);--lip:6px;padding:var(--lip);border-radius:var(--tray);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015) 38%,rgba(14,150,247,.04));
  box-shadow:0 1px 0 rgba(255,255,255,.09) inset,0 0 0 1px rgba(255,255,255,.07) inset,0 30px 70px -20px rgba(0,0,0,.72);
}
.wp-car-plate{display:grid;touch-action:pan-y}
.wp-car-slide{grid-area:1/1;margin:0;min-width:0}
.wp-car-pic{
  position:relative;overflow:hidden;aspect-ratio:1440/900;border:1px solid var(--rule);border-radius:calc(var(--tray) - var(--lip));
  background:#050505;
}
.wp-car-pic picture,.wp-car-pic img{display:block;width:100%;height:100%}
.wp-car-pic img{object-fit:cover;object-position:top left}
.wp-car-slide figcaption{
  margin:0;padding:12px 10px 6px;font-size:15px;line-height:1.5;color:color-mix(in srgb,var(--ink) 86%,transparent);text-wrap:pretty;
}
.wp-car-slide figcaption b{color:var(--ink);font-weight:600}
.wp-car-origin{margin:10px 4px 0;text-align:center;font-family:var(--mono);font-size:12px;color:var(--dim)}
/* every slide stays in the cell and keeps its room; the one shown is on top. A slide that is neither shown, leaving, nor
   next has no picture drawn, so its lazy picture is not fetched until it comes near (the script marks .near) */
.wp-car-slide{visibility:hidden;opacity:0}
.wp-car-slide.is-on{visibility:visible;opacity:1;z-index:2}
.wp-car-slide:not(.is-on):not(.is-out):not(.near) picture{display:none}
.wp-car.on .wp-car-slide{transition:visibility 0s .9s,opacity .5s var(--ease-seat)}
.wp-car.on .wp-car-slide.is-on{transition:none}
.wp-car.on .wp-car-slide.is-out{visibility:visible;opacity:1;z-index:1;transition:visibility 0s .9s}
.wp-car.on .wp-car-slide.is-on.wipe .wp-car-pic{animation:wp-car-wipe-r .9s var(--ease-seat) both}
.wp-car.on .wp-car-slide.is-on.wipe.from-l .wp-car-pic{animation-name:wp-car-wipe-l}
.wp-car.on .wp-car-slide.is-on.wipe img{animation:wp-car-settle 1.1s var(--ease-seat) both}
.wp-car.on .wp-car-slide.is-on.wipe figcaption{animation:wp-car-cap .6s var(--ease-seat) .12s both}
@keyframes wp-car-wipe-r{from{clip-path:inset(0 0 0 100% round 12px)}to{clip-path:inset(0 0 0 0 round 0)}}
@keyframes wp-car-wipe-l{from{clip-path:inset(0 100% 0 0 round 12px)}to{clip-path:inset(0 0 0 0 round 0)}}
@keyframes wp-car-settle{from{transform:scale(1.04)}to{transform:none}}
@keyframes wp-car-cap{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.wp-car.on .wp-car-slide.is-out figcaption{opacity:0}

@media (max-width:899px){
  .wp-car-top{flex-direction:column;flex-wrap:nowrap;align-items:stretch}
  .wp-car-tabs{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
  .wp-car-tabs::-webkit-scrollbar{display:none}
  .wp-car-ctl{justify-content:center}
}
@media (max-width:640px){
  .wp-hx h1{max-width:none}
  .wp-hx .wp-acts{flex-direction:column;align-items:stretch;width:100%;max-width:420px}
  .wp-hx .isl{justify-content:space-between}
  .wp-car-tray{--lip:5px}
  .wp-car-pic{aspect-ratio:412/560}
  .wp-car-slide figcaption{font-size:14px;padding:10px 6px 4px}
}

/* from 1200 px the words stand left and the carousel right, so a frame of the panel is in the first screen; the tabs
   and the controls go under the frame there */
@media (min-width:1200px){
  .wp-hx{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);column-gap:clamp(36px,3.6vw,64px);align-items:center}
  .wp-hx>.ht-crumbs{grid-column:1/-1}
  .wp-hx-head{justify-items:start;text-align:left;margin:0}
  .wp-hx-brow{justify-content:flex-start}
  .wp-hx h1{max-width:none;font-size:clamp(44px,4.25vw,76px)}
  html[lang="ja"] .wp-hx h1,html[lang="zh-TW"] .wp-hx h1{max-width:none;font-size:clamp(34px,3.4vw,58px)}
  .wp-hx-sub{font-size:clamp(16.5px,1.18vw,19px)}
  .wp-hx .wp-acts{justify-content:flex-start}
  .wp-hx-meta{justify-content:flex-start;flex-direction:column;align-items:flex-start;gap:8px}
  .wp-car{display:flex;flex-direction:column;width:100%;margin:0}
  .wp-car-top{order:2;margin:16px 0 0;justify-content:space-between;flex-wrap:nowrap;align-items:flex-start}
  .wp-car-tabs{justify-content:flex-start}
  .wp-car-tray{order:1}
  .wp-car-origin{order:3;text-align:left}
}

/* the features grid: the owner's cards, in the carousel's order */
.wp-feat{padding-block:clamp(36px,5vw,84px) clamp(30px,4vw,64px);border-top:1px solid var(--rule)}
.wp-feat h2{
  max-width:1310px;margin:0 auto clamp(18px,2.4vw,32px);font-family:var(--cond);font-weight:700;font-size:clamp(30px,3.8vw,56px);
  line-height:1.02;letter-spacing:-.015em;color:#f1f5f7;text-wrap:balance;
}
.wp-cards{list-style:none;margin:0 auto;padding:0;max-width:1310px;display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.wp-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.wp-card-debug{grid-column:1/-1}}
@media (min-width:1100px){
  .wp-cards{grid-template-columns:repeat(12,minmax(0,1fr))}
  .wp-card-takeover{grid-column:span 7}.wp-card-php{grid-column:span 5}
  .wp-card-databases{grid-column:span 5}.wp-card-caches{grid-column:span 7}
  .wp-card-proxy,.wp-card-dns,.wp-card-debug{grid-column:span 4}
}
.wp-card{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:0;min-width:0;padding:clamp(20px,2vw,28px);
  border:1px solid var(--rule);border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008) 55%),var(--rack);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset;
  transition:border-color .5s var(--ease-seat),transform .5s var(--ease-seat);
}
.wp-card:hover{border-color:var(--rule-hi);transform:translateY(-2px)}
.wp-card-ico{width:56px;height:56px;margin:0 0 14px}
.wp-card h3{margin:0;font-family:var(--cond);font-weight:700;font-size:clamp(21px,1.7vw,26px);line-height:1.12;color:#eef3f5;text-wrap:balance}
.wp-card-s{margin:6px 0 0;font-family:var(--cond);font-weight:600;font-size:clamp(16px,1.25vw,18.5px);line-height:1.3;color:var(--led)}
.wp-card-p{margin:12px 0 0;font-size:16px;line-height:1.6;color:color-mix(in srgb,var(--ink) 90%,transparent);text-wrap:pretty;max-width:68ch}
.wp-card-go{
  display:inline-flex;align-items:center;gap:8px;margin:auto 0 0;padding:16px 0 0;border:0;background:none;color:var(--led);
  font:600 14px/1.2 var(--cond);letter-spacing:.01em;cursor:pointer;
}
.wp-card-go span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(255,176,32,.14);transition:transform .45s var(--ease-seat)}
.wp-card-go svg{width:12px;height:12px}
.wp-card-go:hover span,.wp-card-go:focus-visible span{transform:translateY(-2px) scale(1.06)}

/* the first screen's words, now under the hero */
.wp-intro{border-top:1px solid var(--rule);padding-block:clamp(30px,4vw,60px) clamp(24px,3.2vw,44px)}
.wp-intro h2{
  margin:0;font-family:var(--cond);font-weight:700;font-size:clamp(30px,3.6vw,52px);line-height:1.05;letter-spacing:-.012em;color:var(--ink);text-wrap:balance;
}
html[lang="ja"] .wp-intro h2,html[lang="zh-TW"] .wp-intro h2{letter-spacing:0;line-height:1.2}

@media (prefers-reduced-motion:reduce){
  .wp-car.on .wp-car-slide,.wp-car.on .wp-car-slide.is-out{transition:none}
  .wp-car.on .wp-car-slide.is-on.wipe .wp-car-pic,.wp-car.on .wp-car-slide.is-on.wipe img,.wp-car.on .wp-car-slide.is-on.wipe figcaption{animation:none}
  .wp-car-tabs button,.wp-car-ctl button,.wp-card,.wp-card-go span{transition:none}
  .wp-card:hover{transform:none}
}

/* ─────────────────────────────────────────────────────────────────────────
   Round two of the page (site decision S80): the requirements as a plain list, numbered FAQ with a link on every
   question, a copy-link anchor on every section heading, drawings beside the four installation steps, the two guides as
   cards, and the comparison's register line and trademark notice as small print at the foot.
   ───────────────────────────────────────────────────────────────────────── */
/* requirements: the name in bold, the value beside it (under it on a phone) */
.wp-dl{margin:16px 0 18px;padding:0;border-top:1px solid var(--rule)}
.wp-dl>div{display:grid;grid-template-columns:minmax(150px,13em) minmax(0,1fr);gap:4px 22px;padding:12px 2px;border-bottom:1px solid var(--rule)}
.wp-dl dt{margin:0;font-weight:600;color:var(--ink)}
.wp-dl dd{margin:0;color:color-mix(in srgb,var(--ink) 88%,transparent);line-height:1.55}
@media (max-width:640px){.wp-dl>div{grid-template-columns:minmax(0,1fr);gap:2px}}

/* a link to the heading itself: shown on hover and focus with a pointer, always on a touch screen */
.wp-anchor{
  display:inline-grid;place-items:center;width:28px;height:28px;margin-left:8px;vertical-align:middle;border-radius:8px;
  color:var(--dim);text-decoration:none;opacity:0;transition:opacity .3s var(--ease-seat),color .3s var(--ease-seat),background-color .3s var(--ease-seat);
}
.wp-anchor svg{width:16px;height:16px}
h2:hover>.wp-anchor,h3:hover>.wp-anchor,.wp-anchor:focus-visible{opacity:1}
.wp-anchor:hover,.wp-anchor:focus-visible{color:var(--led);background:var(--led-soft)}
.wp-anchor:focus-visible{outline:2px solid var(--led);outline-offset:1px}
@media (hover:none){.wp-anchor{opacity:1}}
.wp-anchor-tip{
  position:absolute;z-index:3;padding:4px 9px;border-radius:7px;background:#1d262c;border:1px solid var(--rule-hi);
  color:var(--ink);font:500 12.5px/1.3 var(--sans);white-space:nowrap;pointer-events:none;
}
.wp-a-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* the FAQ: its own band, numbered questions */
.wp-faqs{margin:clamp(50px,6vw,78px) 0 0;padding:clamp(18px,2.4vw,30px) clamp(16px,2.4vw,30px);border:1px solid var(--rule);border-radius:18px;background:var(--rack)}
.wp-art .wp-faqs h2{margin-top:0}
ol.wp-faq{list-style:none;counter-reset:wpfaq;margin:18px 0 0;padding:0}
ol.wp-faq>li{counter-increment:wpfaq;position:relative;padding:16px 0 16px 46px;border-top:1px solid var(--rule)}
ol.wp-faq>li::before{
  content:counter(wpfaq);position:absolute;left:0;top:16px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--led-soft);color:var(--led);font:600 14px/1 var(--cond);font-variant-numeric:tabular-nums;
}
.wp-art ol.wp-faq h3{margin:3px 0 6px}
ol.wp-faq p{margin:0}

/* the installation steps: a drawing beside the words (above them on a phone) */
.wp-step{display:grid;gap:4px 28px;margin:22px 0 0;clear:both}
.wp-art .wp-step h3{margin-top:0}
@media (min-width:860px){
  .wp-step{grid-template-columns:minmax(0,1fr) minmax(250px,320px)}
  .wp-step>.wp-ill{grid-column:2;grid-row:1/span 4;align-self:start}
  .wp-step>:not(.wp-ill){grid-column:1}
}
.wp-ill{margin:0 0 10px;font-family:var(--sans)}
.wp-win{border:1px solid var(--rule-hi);border-radius:14px;background:#0b1013;overflow:hidden;box-shadow:0 18px 40px -22px rgba(0,0,0,.8)}
.wp-win-bar{display:flex;align-items:center;gap:6px;padding:8px 10px;background:#141b20;border-bottom:1px solid var(--rule)}
.wp-win-bar i{width:8px;height:8px;border-radius:50%;background:#33424b}
.wp-win-bar i:first-child{background:#e05252}.wp-win-bar i:nth-child(2){background:#ffb020}.wp-win-bar i:nth-child(3){background:#4fb477}
.wp-win-bar span{flex:1;margin-left:6px;font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wp-win-body{padding:12px;font-size:13px;color:var(--ink)}
.wp-art .wp-ill .wp-ac{display:grid;grid-template-columns:86px minmax(0,1fr);gap:10px}
.wp-art .wp-ill .wp-ac-side{margin:0;font-size:11px;display:grid;align-content:start;gap:7px}
.wp-art .wp-ill .wp-ac-side b{font-size:11px;font-weight:600;color:var(--led);padding:5px 7px;border-radius:7px;background:var(--led-soft)}
.wp-art .wp-ill .wp-ac-side span{display:block;height:7px;border-radius:4px;background:#1c252b}
.wp-art .wp-ill .wp-ac-side span:last-child{width:70%}
.wp-art .wp-ill .wp-ac ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.wp-art .wp-ill .wp-ac li{display:flex;align-items:center;gap:8px;padding:6px 7px;border-radius:9px;border:1px solid transparent}
.wp-art .wp-ill .wp-ac li.on{border-color:rgba(14,150,247,.45);background:rgba(14,150,247,.08)}
.wp-art .wp-ill .wp-ac li img{width:24px;height:24px;border-radius:6px;flex:none}
.wp-art .wp-ill .wp-ac li span{flex:1;font-weight:600;font-size:12.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wp-art .wp-ill .wp-ac li em{font-style:normal;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;background:#0e96f7;color:#03121d}
.wp-art .wp-ill .wp-ac li em.off{width:46px;height:18px;padding:0;background:#1c252b}
.wp-art .wp-ill .wp-inst{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 10px}
.wp-art .wp-ill .wp-inst img{width:36px;height:36px;border-radius:8px}
.wp-art .wp-ill .wp-inst p{margin:0;display:grid;font-size:13.5px;line-height:1.35;color:var(--ink)}
.wp-art .wp-ill .wp-inst p span{font-size:12px;color:var(--dim)}
.wp-art .wp-ill .wp-prog{grid-column:1/-1;height:8px;margin-top:6px;border-radius:999px;background:#1c252b;overflow:hidden}
.wp-art .wp-ill .wp-prog i{display:block;height:100%;width:62%;border-radius:inherit;background:#0e96f7}
.wp-art .wp-ill .wp-pw p{margin:0;font-size:13px;line-height:1.35;color:var(--ink)}
.wp-art .wp-ill .wp-pw .wp-pw-t{font-weight:700;font-size:14px;margin-bottom:8px!important}
.wp-art .wp-ill .wp-pw .wp-pw-l{font-size:11.5px;color:var(--dim);margin-top:6px!important}
.wp-art .wp-ill .wp-pw-f{display:flex;align-items:center;height:30px;margin-top:4px!important;padding:0 10px;border:1px solid var(--rule-hi);border-radius:8px;background:#11181c}
.wp-art .wp-ill .wp-dots{letter-spacing:2px;font-size:13px;color:var(--ink)}
.wp-art .wp-ill .wp-pw-f i{width:1.5px;height:15px;margin-left:2px;background:var(--led)}
.wp-art .wp-ill .wp-pw .wp-pw-b{display:inline-block;margin-top:10px!important;padding:6px 12px;border-radius:999px;background:var(--ink);color:#0b1013;font-weight:600;font-size:12px}
.wp-art .wp-ill .wp-addr span{flex:1;margin-left:8px;padding:4px 10px;border-radius:999px;background:#0b1013;border:1px solid var(--rule);color:var(--ink);font-size:12px}
.wp-art .wp-ill .wp-addr b{font-family:var(--mono);font-weight:500;display:inline-block;max-width:100%;overflow:hidden;white-space:nowrap;vertical-align:bottom;border-right:1.5px solid var(--led)}
.wp-art .wp-ill .wp-site{padding:18px 14px 20px;background:#f6f4ee;color:#1b1f22}
.wp-art .wp-ill .wp-site p{margin:0;color:#1b1f22}
.wp-art .wp-ill .wp-site .wp-site-h{font:700 17px/1.2 var(--cond)}
.wp-art .wp-ill .wp-site .wp-site-p{margin-top:6px!important;font-size:12px;line-height:1.45;color:#4a5157}
@media (prefers-reduced-motion:no-preference){
  .wp-prog i{animation:wp-install 3.6s var(--ease-seat) infinite}
  .wp-ill .wp-pw-f i{animation:wp-caret 1.05s steps(1) infinite}
  .wp-ill .wp-addr b{animation:wp-type 7s steps(15) infinite,wp-caret 1.05s steps(1) infinite}
  .wp-ill .wp-site{animation:wp-answer 7s var(--ease-seat) infinite}
}
@keyframes wp-install{0%{width:4%}70%{width:100%}100%{width:100%}}
@keyframes wp-caret{50%{border-color:transparent;background-color:transparent}}
@keyframes wp-type{0%{width:0}28%,100%{width:15ch}}
@keyframes wp-answer{0%,30%{opacity:0;transform:translateY(4px)}40%,100%{opacity:1;transform:none}}

/* the two guides as cards */
.wp-links{display:grid;gap:10px;margin:16px 0 0}
@media (min-width:700px){.wp-links{grid-template-columns:repeat(2,minmax(0,1fr))}}
.wp-link{
  display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--rule);border-radius:16px;background:var(--rack);
  color:var(--ink);text-decoration:none;font-weight:600;line-height:1.35;transition:border-color .45s var(--ease-seat),background-color .45s var(--ease-seat);
}
.wp-art .wp-link .wp-ico{float:none;width:48px;height:48px;margin:0;flex:none}
.wp-link span{flex:1}
.wp-link>svg{width:18px;height:18px;flex:none;color:var(--led);transition:transform .45s var(--ease-seat)}
.wp-link:hover,.wp-link:focus-visible{border-color:rgba(255,176,32,.5);background:color-mix(in srgb,var(--rack) 80%,var(--led) 6%)}
.wp-link:hover>svg,.wp-link:focus-visible>svg{transform:translateX(3px)}
.wp-link:focus-visible{outline:2px solid var(--led);outline-offset:2px}

/* the comparison's register line and trademark notice: small print at the foot */
.wp-fine{margin:22px 0 0;padding-top:12px;border-top:1px solid var(--rule)}
.wp-fine p{margin:0 0 6px;font-size:11.5px;line-height:1.5;color:var(--dim)}
.wp-fine a{color:var(--dim);font-family:var(--mono);font-size:11px}
@media (prefers-reduced-motion:reduce){.wp-anchor,.wp-link,.wp-link>svg{transition:none}}