@font-face{font-family:"Void Mono";font-weight:400;font-display:block;src:url(fonts/void-mono.ttf?v=7e2ce125) format("truetype")}
@font-face{font-family:"Void Mono";font-weight:700;font-display:block;src:url(fonts/void-mono-bold.ttf?v=cc0e2d8b) format("truetype")}
@font-face{font-family:"Void Mono Small";font-weight:400;font-display:block;src:url(fonts/void-mono-small.ttf?v=a5dd8f34) format("truetype")}
@font-face{font-family:"Void Mono Small";font-weight:700;font-display:block;src:url(fonts/void-mono-small-bold.ttf?v=5d7ce620) format("truetype")}

/* the landing of Void. the same plate as the panel: greys only, the pixel face in whole multiples of its grid
   (text 16, titles 32 and 48, labels 11 and 22), hairline frames, no rounded corners.
   sections alternate night and paper and are joined by a band of dither; each has one live picture.
   what moves, moves smoothly: parts fade and rise as they come into view, hovers ease */
:root{
  --bg:#0c0c0e;--pn:#121215;--fill:#19191d;--fill2:#202025;--line:#222227;--line2:#34343a;
  --top:#eeeef2;--hi:#d6d6dc;--ink:#adadb5;--mute:#82828a;--faint:#696971;--ok:#7fc79a;--warn:#d9b06a;--bad:#e07a7a;
  --p0:#09090a;
  --echo:238,238,242;
  --w:1120px;--gut:32px;--headh:72px;
  --e-out:cubic-bezier(.16,.84,.3,1);
  color-scheme:dark;
}
[data-tone="light"]{
  --bg:#e2dfd7;--pn:#ece9e1;--fill:#e4e1d9;--fill2:#dad7cf;--line:#d3d0c8;--line2:#b3b0a8;
  --top:#000;--hi:#141416;--ink:#2b2b2e;--mute:#55534e;--faint:#6f6d67;--ok:#2f7a4c;
  --echo:20,20,22;
}
*,*::before,*::after{box-sizing:border-box}
html{background:#0c0c0e;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
/* the page scrolls as any page does, but no scroll bar is drawn: not for the window, not for anything inside it.
   a bar that is never there takes no room, so the width of the page is the width of the window from the first frame */
*{scrollbar-width:none;-ms-overflow-style:none}
::-webkit-scrollbar{display:none;width:0;height:0}
body{margin:0;background:var(--bg);color:var(--ink);font:700 16px/26px "Void Mono",ui-monospace,monospace;-webkit-font-smoothing:none;font-variant-numeric:tabular-nums;-webkit-tap-highlight-color:transparent;overflow-x:hidden}
h1,h2,p{margin:0}
[hidden]{display:none!important}
.nw{white-space:nowrap}
b{font-weight:700;color:var(--hi)}
a{color:inherit}
:focus{outline:none}
:focus-visible{outline:1px solid var(--hi);outline-offset:3px}
::selection{background:var(--ink);color:var(--bg)}
canvas.gfx{display:block;width:100%;height:100%;image-rendering:pixelated}
/* a live picture glows a little; on paper it casts a faint shade instead */
[data-tone="dark"] canvas.gfx{filter:drop-shadow(0 0 18px rgba(214,214,212,.15))}
[data-tone="light"] canvas.gfx{filter:drop-shadow(0 0 14px rgba(20,20,22,.08))}
/* a night picture set into a paper section: framed, like the picture of the panel */
.art.night{background:#0c0c0e;border:1px solid var(--line2);color:#adadb5}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 18px;white-space:nowrap;text-decoration:none;
  border:1px solid var(--line2);color:var(--hi);background:none;transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .08s ease}
.btn:hover{border-color:var(--mute);color:var(--top)}
.btn.pri{background:var(--hi);border-color:var(--hi);color:var(--bg)}
.btn.pri:hover{background:var(--top);border-color:var(--top);color:var(--bg)}
.btn.l{height:48px;padding:0 26px}
.btn:active{transform:translateY(1px)}
button.btn{margin:0;border-radius:0;font:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
button.btn:disabled{cursor:default}

/* ---------- header: the logo and the ways in; lower and framed once the page has moved ---------- */
.top{position:fixed;left:0;right:0;top:0;z-index:50;height:var(--headh);border-bottom:1px solid transparent;
  transition:height .32s var(--e-out),background-color .32s ease,border-color .32s ease}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:32px;height:100%;max-width:var(--w);margin:0 auto;padding:0 var(--gut)}
.logo{display:block;line-height:0;flex:none}
.logo img{display:block}
.top-r{display:flex;align-items:center;gap:12px;flex:none}
/* the other language: a quiet word before the ways in */
.lang{display:inline-flex;align-items:center;height:40px;padding:0 6px;color:var(--mute);text-decoration:none;
  font:400 11px/18px "Void Mono Small",ui-monospace,monospace;letter-spacing:.5px;transition:color .16s ease}
.lang:hover{color:var(--top)}
/* what works now: a square in the status page's colours and the word that leads there. the square is always drawn, grey until
   the script hears a fresh answer, so nothing in the bar moves when it comes (and without the script it stays grey) */
.stl{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 6px;color:var(--mute);text-decoration:none;white-space:nowrap;
  font:400 11px/18px "Void Mono Small",ui-monospace,monospace;letter-spacing:.5px;transition:color .16s ease}
.stl:hover{color:var(--top)}
.stl i{flex:none;width:8px;height:8px;background:var(--faint);transition:background-color .3s ease}
.stl[data-s="ok"] i{background:var(--ok)}
.stl[data-s="degraded"] i{background:var(--warn)}
.stl[data-s="down"] i{background:var(--bad)}
/* a phone has no room for the bar's longest button beside the status: «открыть панель» says «панель» there
   (the first screen's own button says it in full) */
.wd{white-space:pre}
@media (max-width:420px){.top-r .wd{display:none}}
.scrolled .top{height:56px;background:rgba(12,12,14,.94);border-bottom-color:var(--line)}

/* ---------- first screen ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:calc(var(--headh) + 24px) 0 72px;background:var(--bg)}
.hero-art{position:absolute;right:max(-80px,calc(50% - 820px));top:50%;width:min(64vw,860px)!important;height:min(78svh,640px)!important;transform:translateY(-52%)}
.hero-in{position:relative;width:100%;max-width:var(--w);margin:0 auto;padding:0 var(--gut)}
.hero-in>*{max-width:560px}
.hero-in>.facts{max-width:675px}
.hero h1{font-size:48px;line-height:52px;color:var(--top)}
.lead{margin-top:22px;font-size:32px;line-height:38px;color:var(--hi)}
/* the facts stand in a row with a rule between neighbours. when they wrap, a line must not begin with a rule: every fact
   carries one on its left, the row is moved left by its width and that strip is cut off, so only the rules inside a line show */
.facts{--fp:14px;display:flex;flex-wrap:wrap;gap:6px 0;margin:22px 0 0 calc(-1px - var(--fp));clip-path:inset(0 0 0 calc(var(--fp) + 1px));
  font:700 11px/18px "Void Mono Small",ui-monospace,monospace;letter-spacing:1px;text-transform:uppercase;color:var(--mute)}
.facts span{padding:0 var(--fp);border-left:1px solid var(--line2)}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.or{margin-top:16px;font:400 11px/18px "Void Mono Small",ui-monospace,monospace;letter-spacing:.5px;color:var(--mute)}
.or a{color:var(--hi);text-decoration:underline;text-decoration-color:var(--faint);text-underline-offset:4px;text-decoration-thickness:1px}
.or a:hover{color:var(--top);text-decoration-color:var(--top)}
/* a title casts faint copies of itself above and below */
.echo{text-shadow:0 -38px 0 rgba(var(--echo),.055),0 -76px 0 rgba(var(--echo),.025),0 38px 0 rgba(var(--echo),.055),0 76px 0 rgba(var(--echo),.025)}
.echo.two{text-shadow:0 -104px 0 rgba(var(--echo),.05),0 -208px 0 rgba(var(--echo),.022),0 104px 0 rgba(var(--echo),.05),0 208px 0 rgba(var(--echo),.022)}
/* three arrows at the foot of the first screen, drawn on the grid of the pictures (3px to a cell) in the greys of the plate.
   they are one button: it turns the page to the next section, as the wheel does. they light up one after another from
   the top down, slowly; with no motion they stand still, each lower one lighter. the box is odd-sized so that the cells
   fall on whole pixels. (shown by the script: without it there is nothing to press) */
.down{position:absolute;left:calc(50% - 25px);bottom:8px;display:grid;place-items:center;width:49px;height:57px;padding:0;border:0;background:none;
  cursor:pointer;animation:fade .8s ease .55s both}
.down svg{display:block;transition:transform .18s var(--e-out)}
.down path{fill:var(--faint);animation:down 2.8s linear infinite}
.down path:first-child{fill:var(--line2)}
.down path:last-child{fill:var(--hi)}
.down path:nth-child(2){animation-delay:.28s}
.down path:nth-child(3){animation-delay:.56s}
.down:hover svg{transform:translateY(3px)}
.down:active svg{transform:translateY(6px)}
@keyframes down{0%,52%,100%{fill:var(--faint)}12%{fill:var(--top)}30%{fill:var(--mute)}}

/* ---------- sections ---------- */
.sec{position:relative;padding:112px 0;background:var(--bg);color:var(--ink)}
.sec-in{max-width:var(--w);margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 72px;align-items:center}
.sec-in.one{display:block;max-width:800px}
.sec-in.center{text-align:center}
.art{position:relative;height:400px;min-width:0}
.txt{min-width:0}
h2{font-size:32px;line-height:38px;color:var(--top)}
.txt>p,.sec-in.one>p{margin-top:16px}
.txt>h2+p,.sec-in.one>h2+p{margin-top:22px}
.txt a:not(.btn),.qa a{text-decoration:underline;text-decoration-color:var(--faint);text-underline-offset:5px;text-decoration-thickness:1px;color:var(--hi)}
.note{font:400 11px/18px "Void Mono Small",ui-monospace,monospace;letter-spacing:.5px;color:var(--mute)}
.txt>p.note{margin-top:10px}
.txt>p:has(.btn),.sec-in.one>p:has(.btn){margin-top:26px}
.box{background:var(--pn);border:1px solid var(--line2)}

/* a band of dither joins night and paper (painted by the script; a plain blend without it) */
.band{height:64px;background:linear-gradient(#0c0c0e,#e2dfd7);background-size:16px 64px;image-rendering:pixelated}
.band[data-band="ld"]{background-image:linear-gradient(#e2dfd7,#0c0c0e)}

/* price rows */
.rows{margin-top:22px;border-top:1px solid var(--line)}
.rows>div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--line)}
.rows span{min-width:0}
.rows i{font:400 11px/18px "Void Mono Small",ui-monospace,monospace;font-style:normal;letter-spacing:.5px;color:var(--mute);white-space:nowrap}
.rows b{flex:none}

/* zones */
.zones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:22px}
.zones>div{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:9px 12px;border:1px solid var(--line2);background:var(--pn)}
.zones span{color:var(--hi)}
.zones b{font:400 11px/18px "Void Mono Small",ui-monospace,monospace;letter-spacing:.5px;color:var(--mute);white-space:nowrap}

/* ---------- the domain search: the cabinet's field with its button, over the tiles; the tiles are where the answer goes ---------- */
.ds{display:flex;gap:8px;margin-top:22px}
.ds:not([hidden])+.zones,.ds+.dres,.ds+.dwait{margin-top:8px}
.fld{flex:1 1 auto;display:flex;align-items:center;gap:8px;height:40px;padding:0 10px;min-width:0;background:var(--p0);border:1px solid var(--line2);cursor:text;transition:border-color .16s ease}
.fld:focus-within{border-color:var(--mute)}
.ds.err .fld{border-color:var(--bad)}
.fld .pfx{flex:none;color:var(--faint)}
.fld input{flex:1;width:100%;min-width:0;height:100%;margin:0;padding:0;background:none;border:0;border-radius:0;outline:none;font:inherit;letter-spacing:inherit;color:var(--hi);caret-color:var(--hi);-webkit-appearance:none;appearance:none}
.fld input::placeholder{color:var(--faint);opacity:1}
.ds .btn{flex:none}
.note.bad{color:var(--bad)}
/* while the registries are asked: a plate of the height the answer had, a word and three squares that step */
.dwait{display:grid;place-content:center;justify-items:center;row-gap:4px;background:var(--pn);border:1px solid var(--line2)}
/* a wait of more than three seconds is said to be one (the line has its room from the start, so nothing moves when it comes) */
.dwait small{font:400 11px/18px "Void Mono Small",ui-monospace,monospace;letter-spacing:.5px;color:var(--faint);visibility:hidden}
.dwait small.on{visibility:visible}
.dw{display:flex;align-items:center;gap:6px;max-width:100%;padding:0 12px;color:var(--mute)}
.dw span{min-width:0;margin-right:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dw i{flex:none;width:4px;height:4px;background:var(--hi);opacity:.25;animation:dwDot 1.2s steps(1) infinite}
.dw i:nth-of-type(2){animation-delay:.4s}
.dw i:nth-of-type(3){animation-delay:.8s}
@keyframes dwDot{0%{opacity:1;transform:translateY(-2px)}33%{opacity:.25;transform:none}}
/* the names that were found: one framed list, a row to a name, and the columns stand under each other.
   on the left the name (the part before the zone gives way, the zone never does) and under it what the server said;
   then the price and under it what a year costs afterwards; then the way on: to register a free name, or to look
   again in the cabinet at one that nobody could check */
.drl{display:grid;grid-template-columns:minmax(0,1fr) auto auto;column-gap:12px;background:var(--pn);border:1px solid var(--line2)}
.dr{display:grid;grid-column:1/-1;grid-template-columns:subgrid;grid-template-rows:22px 14px;align-items:center;padding:4px 8px 4px 12px;border-top:1px solid var(--line)}
.dr:first-child{border-top:0}
.dn{grid-area:1/1;display:flex;min-width:0;line-height:22px;color:var(--hi);white-space:nowrap}
.dn span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.dn b{flex:none;color:var(--top)}
.dst,.dre,.txt a.dck{font:400 11px/14px "Void Mono Small",ui-monospace,monospace;letter-spacing:.5px;color:var(--mute);white-space:nowrap}
.dst{grid-area:2/1;display:inline-flex;align-items:center;gap:7px;min-width:0}
.dst::before{content:"";flex:none;width:6px;height:6px;background:var(--faint)}
.dr.free .dst{color:var(--ink)}
.dr.free .dst::before{background:var(--ok)}
.dr.unk .dst::before{background:var(--warn)}
.dr.taken .dn,.dr.taken .dn b{color:var(--mute)}
.dr.unk .dn{color:var(--ink)}
.dr.unk .dn b{color:var(--hi)}
.dp{grid-area:1/2;justify-self:end;line-height:22px;color:var(--top);white-space:nowrap}
.dre{grid-area:2/2;justify-self:end}
.txt a.dgo,.txt a.dck{grid-area:1/3/3/4;justify-self:end}
.txt a.dgo{display:inline-flex;align-items:center;justify-content:center;height:28px;padding:0 10px;border:1px solid var(--line2);color:var(--hi);text-decoration:none;white-space:nowrap;
  font:400 11px/18px "Void Mono Small",ui-monospace,monospace;letter-spacing:.5px;transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .08s ease}
.txt a.dgo:hover{background:var(--hi);border-color:var(--hi);color:var(--bg)}
.txt a.dgo:active{transform:translateY(1px)}
.txt a.dck{margin-right:4px;line-height:18px;color:var(--hi);text-underline-offset:4px}
.txt a.dck:hover{color:var(--top);text-decoration-color:var(--top)}
@supports not (grid-template-columns:subgrid){
  .dr{grid-template-columns:minmax(0,1fr) auto auto;column-gap:12px}
}
/* a low window beside the picture: the rows stand closer, so that eight of them leave the block (almost) where it was */
@media (min-width:1001px) and (max-height:800px){
  .dr{grid-template-rows:20px 14px;padding-top:3px;padding-bottom:3px}
  .dn,.dp{line-height:20px}
}

/* hosting plans */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:8px;margin-top:22px}
.txt .plans>a{display:flex;flex-direction:column;gap:2px;padding:12px;border:1px solid var(--line2);background:var(--pn);min-width:0;text-decoration:none;color:inherit;
  transition:border-color .16s ease,background-color .16s ease,transform .08s ease}
.txt .plans>a:hover{border-color:var(--mute);background:var(--fill)}
.txt .plans>a:active{transform:translateY(1px)}
.plans .pn{color:var(--top)}
.plans .pp{font:400 11px/18px "Void Mono Small",ui-monospace,monospace;letter-spacing:.5px;color:var(--mute);white-space:nowrap}
.plans .pp b{font:700 22px/30px "Void Mono Small",ui-monospace,monospace;color:var(--hi)}
.plans .pf{margin-top:6px;font:400 11px/18px "Void Mono Small",ui-monospace,monospace;letter-spacing:.5px;color:var(--mute)}

/* ---------- the configurator ---------- */
.cfg{position:relative;margin-top:24px}
.cfg-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.slrow{display:grid;grid-template-columns:minmax(0,1fr) 104px;grid-template-areas:"l p" "s o";align-items:center;gap:8px 14px;padding:14px 16px 16px;border-bottom:1px solid var(--line);min-width:0}
.slrow:nth-child(odd){border-right:1px solid var(--line)}
.slrow .cl{grid-area:l;font:700 11px/16px "Void Mono Small",ui-monospace,monospace;letter-spacing:1px;text-transform:uppercase;color:var(--mute)}
.slrow .pr{grid-area:p;text-align:right;font:400 11px/16px "Void Mono Small",ui-monospace,monospace;letter-spacing:.5px;color:var(--mute)}
.sl{grid-area:s;display:flex;align-items:center;min-width:0;height:32px;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.sl:active{cursor:grabbing}
.sl.off{cursor:default}
.sl:focus-visible{outline:none}
.sl:focus-visible .trk{outline:1px solid var(--hi);outline-offset:2px}
.trk,.trk0{flex:1;display:flex;align-items:center;gap:2px;height:32px;min-width:0}
.trk i{flex:1;height:4px;background:var(--line2);transition:background-color .14s ease}
.trk i.on{background:var(--mute)}
.trk i.kn{position:relative;background:linear-gradient(90deg,var(--mute) 50%,var(--line2) 50%)}
.trk i.kn::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:18px;margin:-9px 0 0 -4px;background:var(--hi);box-shadow:0 0 0 2px var(--pn);transition:background-color .12s ease}
.sl:hover .kn::after,.sl:focus-visible .kn::after,.sl.held .kn::after{background:var(--top)}
.trk0{background:repeating-linear-gradient(90deg,var(--line2) 0 2px,transparent 2px 4px) center/100% 4px no-repeat}
.ro{grid-area:o;display:flex;align-items:stretch;justify-content:space-between;height:32px;padding-left:10px;border:1px solid var(--line2);background:var(--bg);color:var(--top);line-height:30px;white-space:nowrap}
.ro b{flex:1;min-width:0;color:var(--top)}
.ro span{flex:none;min-width:44px;padding:0 8px;border-left:1px solid var(--line2);font:400 11px/30px "Void Mono Small",ui-monospace,monospace;letter-spacing:.5px;color:var(--mute);text-align:center}
.cfg-sum{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;padding:14px 16px}
.seg{display:inline-flex;border:1px solid var(--line2)}
.seg button{height:34px;padding:0 12px;background:none;border:0;border-left:1px solid var(--line2);font:inherit;color:var(--mute);cursor:pointer;white-space:nowrap;transition:background-color .16s ease,color .16s ease}
.seg button:first-child{border-left:0}
.seg button:hover{color:var(--top)}
.seg button[aria-pressed="true"]{background:var(--fill2);color:var(--top);box-shadow:inset 0 -1px 0 var(--top)}
.tot{display:flex;align-items:baseline;gap:10px;margin-left:auto}
.tot .big{font:700 32px/40px "Void Mono",ui-monospace,monospace;color:var(--top)}
.tot .per{font:400 11px/18px "Void Mono Small",ui-monospace,monospace;letter-spacing:.5px;color:var(--mute)}
.cfg-note{min-height:18px;padding:0 16px 12px;font:400 11px/18px "Void Mono Small",ui-monospace,monospace;letter-spacing:.5px;color:var(--mute)}
/* the hand that shows how it works until someone takes over */
.ghost{position:absolute;left:0;top:0;width:16px;height:20px;margin:-2px 0 0 -3px;pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:3;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M0 0h1v1h1v1h1v1h1v1h1v1h1v1h1v1H5v1h1v2H4V8H3v1H2v1H0z'/%3E%3Cpath fill='%23fff' d='M1 1h1v1h1v1h1v1h1v1h1v1H4v2H3V7H2v1H1z'/%3E%3C/svg%3E") 0 0/16px 20px no-repeat;image-rendering:pixelated}
.ghost.on{opacity:1}

/* ---------- questions ---------- */
.qas{margin-top:26px;border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:54px;padding:10px 0;color:var(--hi);cursor:pointer;list-style:none;transition:color .16s ease}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";flex:none;color:var(--faint);transition:transform .3s var(--e-out),color .16s ease}
.qa summary:hover{color:var(--top)}
.qa[open] summary::after{transform:rotate(45deg);color:var(--hi)}
.qa-a{overflow:hidden}
.qa-a p{padding:0 40px 16px 0;color:var(--ink)}

.sec.last{padding:136px 0 148px}
.sec.last p{margin-top:18px}
.sec.last .last-cta{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:26px}
.sec.last p.or{margin-top:16px}

/* ---------- foot ---------- */
.foot{background:var(--bg);border-top:1px solid var(--line);color:var(--mute)}
.foot-in{display:flex;align-items:center;flex-wrap:wrap;gap:16px 32px;max-width:var(--w);margin:0 auto;padding:28px var(--gut) 36px;font:400 11px/18px "Void Mono Small",ui-monospace,monospace;letter-spacing:.5px}
.foot nav{display:flex;flex-wrap:wrap;gap:0 20px}
.foot a{color:var(--mute);text-decoration:none;transition:color .16s ease}
.foot a:hover{color:var(--top)}
.foot p{margin-left:auto}

/* ---------- the support chat, for whoever is signed in: the cabinet's own button and window (its css/76-chat.css), drawn here
   around the cabinet in a frame. a speech bubble with three dots in the corner, the count of answers not read yet on it,
   a word beside it now and then; open, it is the way out, and over it stands the window: a hairline frame with three steps
   that point at the button. over a paper section the button takes the paper's greys (the script sets data-tone) ---------- */
.tcl{position:fixed;right:24px;bottom:24px;z-index:61;display:block;width:60px;height:54px;margin:0;padding:0;background:none;border:0;border-radius:0;font:inherit;color:var(--hi);cursor:pointer;-webkit-appearance:none;appearance:none}
.tcl:focus-visible{outline:1px solid var(--hi);outline-offset:4px}
.tcl-i{display:block}
.tcl-b{display:block;width:60px;height:54px;overflow:visible}
.tcl-bg{fill:var(--hi);stroke:var(--bg);stroke-width:1;paint-order:stroke}
.tcl-d{fill:var(--bg)}
.tcl:hover .tcl-bg{fill:var(--top)}
.tcl:hover .tcl-d{animation:tclDot .9s steps(1) infinite}
.tcl .d2{animation-delay:.3s!important}
.tcl .d3{animation-delay:.6s!important}
@keyframes tclDot{0%{transform:translateY(-1px)}34%{transform:none}}
.tcl-x{display:none}
.tcl.on{width:44px;height:44px;bottom:28px;right:32px}
.tcl.on .tcl-i{display:none}
.tcl.on .tcl-x{display:grid;place-items:center;width:44px;height:44px;background:var(--bg);border:1px solid var(--line2)}
.tcl.on:hover .tcl-x{border-color:var(--mute)}
.tcl-x svg{display:block;width:24px;height:24px;fill:currentColor}
.tcl-n{position:absolute;top:-8px;right:-8px;min-width:20px;height:20px;padding:0 5px;background:var(--ok);color:var(--bg);
  font:700 11px/20px "Void Mono Small",ui-monospace,monospace;letter-spacing:0;text-align:center}
/* beside it, under the pointer or the keyboard's focus, what it is; and now and then a word that comes by itself (the
   cabinet's css/77-tease.css): it stands where that label stands and gives way to it, takes no click, and comes and goes
   in three steps of 80 ms, unrolled from the bubble's side and rolled back into it */
.tcl-t,.tcl-z{position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-58%);padding:6px 10px 7px;background:var(--bg);border:1px solid var(--line2);
  color:var(--hi);white-space:nowrap;visibility:hidden;pointer-events:none}
.tcl:hover .tcl-t,.tcl:focus-visible .tcl-t{visibility:visible}
.tcl.on .tcl-t{display:none}
/* an answer waits: the green of the count on the button */
.tcl-z.new::before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;vertical-align:2px;background:var(--ok)}
.tcl.tz .tcl-z{visibility:visible;animation:tzIn .24s steps(1) both}
.tcl.tz.tz-out .tcl-z{animation:tzOut .24s steps(1) both}
.tcl:hover .tcl-z,.tcl:focus-visible .tcl-z,.tcl.on .tcl-z{display:none}
@keyframes tzIn{0%{clip-path:inset(0 0 0 100%)}33%{clip-path:inset(0 0 0 66%)}66%{clip-path:inset(0 0 0 33%)}100%{clip-path:inset(0)}}
@keyframes tzOut{0%{clip-path:inset(0)}33%{clip-path:inset(0 0 0 33%)}66%{clip-path:inset(0 0 0 66%)}100%{clip-path:inset(0 0 0 100%)}}
/* the window: always night, whatever it stands over. the cabinet's page fills it once it has said that it is up.
   the cabinet's size and place (400 wide, up to 640 high, 24 from the right, 96 from the bottom); here it also stops
   12px under the bar of the header, so that it never cuts through the header's buttons */
.cw{position:fixed;right:24px;bottom:96px;z-index:60;width:400px;max-width:calc(100vw - 48px);height:min(640px,calc(100dvh - 164px));background:#0c0c0e;border:1px solid #34343a;color:#adadb5;color-scheme:dark}
.cw:not([hidden]){animation:cwIn .22s var(--e-out) both}
@keyframes cwIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cw::after{content:"";position:absolute;right:20px;bottom:-7px;width:18px;height:6px;background:#34343a;
  clip-path:polygon(0 0,100% 0,100% 33.4%,83.3% 33.4%,83.3% 66.7%,66.6% 66.7%,66.6% 100%,33.3% 100%,33.3% 66.7%,16.6% 66.7%,16.6% 33.4%,0 33.4%)}
.cw iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;background:#0c0c0e;visibility:hidden}
.cw.ok iframe{visibility:visible}
.cw-say,.cw-no{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;align-content:center;flex-wrap:wrap;gap:6px;margin:0;padding:24px;text-align:center;font-style:normal;color:#82828a}
.cw-say span{margin-right:6px}
.cw-say i{flex:none;width:4px;height:4px;background:#d6d6dc;opacity:.25;animation:dwDot 1.2s steps(1) infinite}
.cw-say i:nth-of-type(2){animation-delay:.4s}
.cw-say i:nth-of-type(3){animation-delay:.8s}
.cw-no{display:block;inset:auto 0;top:50%;transform:translateY(-50%);color:#adadb5}
.cw-no a{color:#d6d6dc;text-decoration:underline;text-decoration-color:#696971;text-underline-offset:5px;text-decoration-thickness:1px}
.cw-no a:hover{color:#eeeef2;text-decoration-color:#eeeef2}
.cw.ok .cw-say,.cw.no .cw-say,.cw:not(.no) .cw-no{display:none}
/* the foot's last line gives the button room where the two would meet */
@media (max-width:1330px){body.chat .foot-in{padding-right:108px}}

/* ---------- one section to a window (the script sets .paged where there is a mouse and motion is welcome):
   each section fills the window with its parts in the middle, and the page moves a whole section at a time.
   the questions and the closing block are the tail of the page: they keep their own height and scroll freely ---------- */
/* where the page stands is the script's to say: when a block changes its height (the answer of the domain search), the
   browser does not move the page to keep some part of it in place */
.paged{overflow-anchor:none}
.paged .sec:not(.faq):not(.last){min-height:100svh;display:flex;align-items:center;padding:96px 0}
.paged .sec:not(.faq):not(.last)>.sec-in{flex:1 1 auto;width:100%}
.paged .art{height:clamp(400px,46svh,620px)}
/* a large screen (a full-HD monitor and up): a section has the whole window to itself, so its parts are set larger.
   the title goes to the next whole size of the face (48), the picture grows, the column widens enough for the longest title */
@media (min-width:1700px) and (min-height:1000px){
  .paged{--w:1480px}
  .paged .sec-in{gap:40px 96px}
  .paged .sec h2{font-size:48px;line-height:52px}
  .paged .sec h2.echo{text-shadow:0 -52px 0 rgba(var(--echo),.055),0 -104px 0 rgba(var(--echo),.025),0 52px 0 rgba(var(--echo),.055),0 104px 0 rgba(var(--echo),.025)}
  .paged .txt>h2+p,.paged .sec-in.one>h2+p{margin-top:28px}
  .paged .art{height:clamp(480px,50svh,720px)}
}
/* a live picture is seen while its section has the window: it fades in as it turns into place and goes when the page moves on */
.js canvas.gfx{opacity:0;transition:opacity .22s ease}
.js canvas.gfx.live{opacity:1;transition:opacity .75s ease}

/* ---------- parts come in as they are scrolled to ---------- */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--e-out),transform .7s var(--e-out);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
.js .hero-in>*{opacity:0;transform:translateY(16px);animation:rise .8s var(--e-out) both}
.js .hero-in>:nth-child(1){animation-delay:.05s}
.js .hero-in>:nth-child(2){animation-delay:.14s}
.js .hero-in>:nth-child(3){animation-delay:.22s}
.js .hero-in>:nth-child(4){animation-delay:.3s}
.js .hero-in>:nth-child(5){animation-delay:.38s}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}

@media (max-width:1000px){
  .sec{padding:80px 0}
  .sec-in{grid-template-columns:minmax(0,1fr);gap:28px}
  .sec.flip .art{order:-1}
  .art{height:300px}
  .txt>h2.echo{text-shadow:0 38px 0 rgba(var(--echo),.055),0 76px 0 rgba(var(--echo),.025)}
  .hero-art{right:-10%;top:calc(var(--headh) + 8px);width:120%!important;height:46svh!important;transform:none;opacity:.9}
  .hero{align-items:flex-end;padding-bottom:88px}
}
@media (max-width:640px){
  :root{--gut:16px;--headh:60px}
  .top-in{gap:16px}
  .hero h1{font-size:32px;line-height:38px}
  .echo.two{text-shadow:0 -76px 0 rgba(var(--echo),.05),0 76px 0 rgba(var(--echo),.05)}
  .lead{font-size:16px;line-height:26px;margin-top:14px}
  .facts{--fp:10px}
  .btn.l{height:44px;padding:0 18px}
  .cta .btn,.last-cta .btn{flex:1}
  .top-r .new{display:none}
  .sec{padding:64px 0}
  .art{height:260px}
  .cfg-grid{grid-template-columns:minmax(0,1fr)}
  .slrow:nth-child(odd){border-right:0}
  .zones{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.chat .foot-in{padding-right:var(--gut);padding-bottom:96px}
  .plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sec h2.echo{text-shadow:none}
  .seg{display:flex;flex:1 1 100%}
  .seg button{flex:1;padding:0 6px}
  .tot{margin-left:0}
  .foot p{margin-left:0}
  .qa-a p{padding-right:0}
}
/* ---------- under a finger (a touch screen, or a window as narrow as one): whatever can be pressed is at least 44px high
   and wide. the small things grow where nothing is drawn (padding, and margins that give the room back), so the layout stays ---------- */
@media (pointer:coarse),(max-width:1000px){
  .btn{height:44px}
  .logo{padding:7px 0}
  .lang{justify-content:center;height:44px;min-width:44px;margin:0 -8px}
  .stl{justify-content:center;height:44px;min-width:44px;margin:0 -6px 0 -8px}
  .or a{padding:15px 0}
  .txt p a:not(.btn),.qa a{padding:13px 0}
  .sl:not(.off){height:44px;margin:-6px 0}
  .seg button{height:44px}
  .fld{height:44px}
  .dr{grid-template-rows:26px 18px}
  .txt a.dgo{height:44px}
  .txt a.dck{display:inline-flex;align-items:center;height:44px}
  .txt p.note a{padding:15px 0}
  .foot-in{row-gap:4px}
  .foot nav{gap:0 4px;margin:0 -8px}
  .foot nav a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 8px}
}
@media (max-width:640px){
  /* a found name on a narrow screen: the name and its price, under them what the server said and what a year costs
     afterwards, and under those the way on, at the right */
  .drl{display:block}
  .dr{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto;column-gap:12px;padding:10px 12px}
  .dn,.dp{line-height:26px}
  .dst,.dre{line-height:18px}
  .txt a.dgo,.txt a.dck{grid-area:3/1/4/3;margin:6px 0 0}
  .txt a.dgo{padding:0 14px;font:inherit;letter-spacing:0}
  .txt a.dck{margin-bottom:-6px}
}
@media (max-width:760px){
  .tcl{right:16px;bottom:calc(16px + env(safe-area-inset-bottom))}
  .tcl-t,.tcl-z{display:none}
  /* open, the window is the whole screen and has its own way out in its head; until it is up, this one stands where that will be */
  .cw{inset:0;width:auto;max-width:none;height:auto;border:0}
  .cw::after{display:none}
  .cw:not([hidden]){animation-name:cwUp}
  .tcl.on{right:4px;top:10px;bottom:auto}
  .tcl.on.ok{display:none}
  html.cw-on,html.cw-on body{overflow:hidden}
}
@keyframes cwUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .tcl-z{display:none}
  .js .rv,.js .hero-in>*{opacity:1;transform:none}
}