/* Domain Operator Kit: the landing (/) and the example desk (/desk/). Same editorial system as the
   eSIM kit's landing, in ink blue instead of green, so the two kits read as siblings. The hero is a
   dark stage in both themes; everything below it follows the theme. */
:root{
  color-scheme:light;
  --bg:#f4f2ec; --bg2:#ecebe3; --ink:#18223a; --muted:#5a6478; --line:#d9dce3;
  --brand:#2c4c8c; --brand2:#5873a8; --violet:#7c5cd6; --gold:#94702e; --glass:#fffefae0; --card:#fffefb;
  --surface:#eef0ec; --code:#0f1626; --code-ink:#d7e2fa; --ok:#22744f; --bad:#a0402a; --warn:#8a6418;
  --radius:20px; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sh-1:0 1px 2px rgba(20,30,60,.06),0 2px 6px -2px rgba(20,30,60,.08);
  --sh-2:0 1px 2px rgba(20,30,60,.05),0 10px 24px -8px rgba(20,30,60,.12),0 32px 64px -28px rgba(30,50,110,.22);
  --sh-3:0 2px 4px rgba(20,30,60,.06),0 22px 44px -12px rgba(20,30,60,.20),0 50px 100px -34px rgba(44,76,160,.38);
  --spot:color-mix(in srgb,var(--brand) 11%,transparent);
  --edge:linear-gradient(135deg,#5ac8ff,#7c5cd6 45%,#f5c26b);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0b101b; --bg2:#0f1522; --ink:#eef1f8; --muted:#a3aec4; --line:#263048;
  --brand:#a9c1f5; --brand2:#86a0d4; --violet:#b9a4ff; --gold:#e3cb98; --glass:#0f1522d9; --card:#131a2a;
  --surface:#19223a; --code:#080c16; --code-ink:#d2def8; --ok:#79d6a6; --bad:#f2a08e; --warn:#ecc97f;
  --sh-1:0 1px 2px rgba(0,0,0,.4),0 2px 8px -2px rgba(0,0,0,.45);
  --sh-2:0 1px 2px rgba(0,0,0,.35),0 14px 30px -10px rgba(0,0,0,.55),0 40px 80px -30px rgba(40,70,160,.35);
  --sh-3:0 2px 4px rgba(0,0,0,.4),0 26px 52px -14px rgba(0,0,0,.6),0 60px 120px -40px rgba(80,110,220,.45);
  --spot:color-mix(in srgb,var(--brand) 14%,transparent);
}
@media(prefers-color-scheme:dark){:root:not([data-theme]){color-scheme:dark;--bg:#0b101b;--bg2:#0f1522;--ink:#eef1f8;--muted:#a3aec4;--line:#263048;--brand:#a9c1f5;--brand2:#86a0d4;--violet:#b9a4ff;--gold:#e3cb98;--glass:#0f1522d9;--card:#131a2a;--surface:#19223a;--code:#080c16;--code-ink:#d2def8;--ok:#79d6a6;--bad:#f2a08e;--warn:#ecc97f;--sh-1:0 1px 2px rgba(0,0,0,.4),0 2px 8px -2px rgba(0,0,0,.45);--sh-2:0 1px 2px rgba(0,0,0,.35),0 14px 30px -10px rgba(0,0,0,.55),0 40px 80px -30px rgba(40,70,160,.35);--sh-3:0 2px 4px rgba(0,0,0,.4),0 26px 52px -14px rgba(0,0,0,.6),0 60px 120px -40px rgba(80,110,220,.45);--spot:color-mix(in srgb,var(--brand) 14%,transparent)}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
::selection{background:color-mix(in srgb,var(--brand) 30%,transparent)}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px;position:relative}
.muted{color:var(--muted)}
.mono{font-family:var(--mono)}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;
     padding:14px 4vw;background:var(--glass);border-bottom:1px solid var(--line);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);
     box-shadow:0 8px 30px -18px rgba(10,20,50,.35)}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:600;letter-spacing:-.02em;min-width:0}
.logo:hover{text-decoration:none}
.logo i{display:inline-grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;font:700 14px var(--mono);font-style:normal;color:#fff;
        background:radial-gradient(circle at 30% 25%,#8fb3ff,#2c4c8c 55%,#1b2a55);box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 6px 18px -6px rgba(44,76,140,.8)}
.logo span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.nav nav a{font-size:13px;color:var(--ink);padding:7px 12px;border-radius:999px;min-height:40px;display:inline-flex;align-items:center;transition:background .2s}
.nav nav a:hover{text-decoration:none;background:var(--surface)}
.langs{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--card);box-shadow:var(--sh-1)}
.langs button{border:0;background:none;color:var(--muted);font:700 11px var(--mono);letter-spacing:.06em;padding:8px 9px;min-height:40px;cursor:pointer;transition:color .2s,background .2s}
.langs button:hover{color:var(--ink)}
.langs button[aria-pressed="true"]{color:#fff;background:linear-gradient(135deg,#3b62b8,#2c4c8c)}
.theme-toggle{border:1px solid var(--line);border-radius:50%;width:42px;height:42px;flex:none;font:22px/1 system-ui;background:var(--card);color:var(--ink);cursor:pointer;box-shadow:var(--sh-1);transition:transform .3s}
.theme-toggle:hover{transform:rotate(180deg)}

/* type */
.eyebrow{display:inline-flex;gap:9px;align-items:center;font:500 11px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.eyebrow b{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent);animation:ping 2.4s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
h1{font:400 clamp(44px,5.6vw,80px)/1.02 Georgia,"Times New Roman","Songti SC",serif;letter-spacing:-.045em;margin:22px 0}
h2{font-size:clamp(28px,3.4vw,46px);line-height:1.08;margin:10px 0 14px;letter-spacing:-.035em;font-weight:500}
.kicker{display:inline-flex;align-items:center;gap:10px;font:600 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--brand)}
.kicker::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--edge)}
.lead{font-size:17.5px;line-height:1.75;max-width:560px;color:var(--muted);margin:0 0 30px}
.sub{color:var(--muted);max-width:760px;font-size:17px;margin:0 0 44px}
.grad{background:var(--edge);-webkit-background-clip:text;background-clip:text;color:transparent}

/* buttons */
.cta{display:flex;gap:10px;flex-wrap:wrap}
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 19px;border-radius:12px;font:600 14px/1.2 inherit;
     border:1px solid var(--line);color:var(--ink);background:var(--card);cursor:pointer;box-shadow:var(--sh-1);
     transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s}
.btn:hover{text-decoration:none;transform:translateY(-2px);border-color:var(--brand);box-shadow:var(--sh-2)}
.btn:active{transform:translateY(0)}
.btn.primary{color:#fff;border-color:transparent;background:linear-gradient(135deg,#4a74d0,#2c4c8c 55%,#3b2f86);
             box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 10px 28px -10px rgba(44,76,160,.75)}
.btn.primary::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s}
.btn.primary:hover::after{transform:translateX(120%)}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

/* sections */
section.block{padding:110px 0;position:relative;overflow:hidden;isolation:isolate}
section.block + section.block{border-top:1px solid var(--line)}
section.block::before{content:"";position:absolute;z-index:-1;width:720px;height:720px;border-radius:50%;filter:blur(90px);opacity:.5;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--brand) 16%,transparent),transparent 65%);top:-260px;right:-240px;animation:drift 22s ease-in-out infinite alternate}
section.block:nth-of-type(even)::before{left:-260px;right:auto;background:radial-gradient(circle,color-mix(in srgb,var(--violet) 14%,transparent),transparent 65%)}
@keyframes drift{to{transform:translate(-80px,120px) scale(1.15)}}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}

/* cards: layered shadow, a spotlight that follows the pointer, a gradient edge on hover */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px;position:relative;min-width:0;box-shadow:var(--sh-2);
      transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
             background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),var(--spot),transparent 45%)}
.card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .35s;background:var(--edge);
              -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.card.lift:hover{transform:translateY(-6px);box-shadow:var(--sh-3)}
.card.lift:hover::after,.card.lift:hover::before{opacity:1}
.card > *{position:relative;z-index:1}
.card h3{margin:14px 0 8px;font-size:19px;font-weight:600;letter-spacing:-.01em}
.card p{margin:0;color:var(--muted);font-size:15px;line-height:1.75}
.card .n{font:700 34px/1 Georgia,serif;letter-spacing:-.03em;background:var(--edge);-webkit-background-clip:text;background-clip:text;color:transparent}
.ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:22px;background:linear-gradient(145deg,var(--surface),var(--card));border:1px solid var(--line);box-shadow:var(--sh-1)}
.tag{display:inline-block;font:600 11px var(--mono);letter-spacing:.04em;padding:4px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted);margin-top:16px;background:var(--surface)}
.tag.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent);background:color-mix(in srgb,var(--ok) 9%,transparent)}
.tag.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent);background:color-mix(in srgb,var(--warn) 9%,transparent)}

/* code windows */
pre{margin:0;background:var(--code);border:1px solid color-mix(in srgb,var(--line) 60%,#000);border-radius:16px;padding:16px 18px;overflow-x:auto;font:13px/1.65 var(--mono);color:var(--code-ink);white-space:pre;
    box-shadow:0 1px 0 rgba(255,255,255,.06) inset,var(--sh-2)}
pre.win{padding-top:44px;position:relative}
pre.win::before{content:"";position:absolute;top:16px;left:18px;width:11px;height:11px;border-radius:50%;background:#ff6058;box-shadow:18px 0 0 #ffbd2e,36px 0 0 #28c940}
pre.win[data-title]::after{content:attr(data-title);position:absolute;top:11px;left:0;right:0;text-align:center;font:600 11px var(--mono);letter-spacing:.06em;color:#7b89a8}
pre .c{color:#7685a6} pre .k{color:#9cc0ff} pre .s{color:#f2cf8a} pre .n{color:#b4f0c8} pre .p{color:#c8a8ff}
code{font:0.9em var(--mono);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:1px 5px;overflow-wrap:anywhere}

/* the name search: the hero card on the landing and the desk's search */
.search{display:flex;gap:8px}
.search input{flex:1;min-width:0;font:inherit;font-size:17px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 15px;
              transition:border-color .2s,box-shadow .2s}
.search input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 22%,transparent)}
.search button{flex:none}
.err{color:var(--bad);font-size:14px;margin:10px 0 0}
.results{display:grid;gap:9px;margin-top:16px}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;align-items:center;padding:13px 16px;border-radius:14px;background:var(--surface);border:1px solid var(--line);
     animation:rowIn .55s cubic-bezier(.2,.8,.2,1) both;transition:border-color .25s,transform .25s}
.row:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--line))}
.results .row:nth-child(2){animation-delay:.07s} .results .row:nth-child(3){animation-delay:.14s} .results .row:nth-child(4){animation-delay:.21s}
@keyframes rowIn{from{opacity:0;transform:translateY(10px) scale(.98)}}
.row .name{font:600 16px var(--mono);overflow-wrap:anywhere}
.row .price{font:700 20px ui-sans-serif,system-ui;text-align:right;white-space:nowrap;letter-spacing:-.01em}
.row .price small{font:500 12px var(--mono);color:var(--muted);margin-left:5px}
.row .meta{font-size:12.5px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row .act{text-align:right}
.row.taken .name{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px}
.row.wait{opacity:.75}
.row.wait .name{background:linear-gradient(90deg,var(--muted) 20%,var(--ink) 50%,var(--muted) 80%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 1.2s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}
.pill{display:inline-flex;align-items:center;gap:6px;font:600 11px var(--mono);letter-spacing:.05em;text-transform:uppercase}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}
.pill.free{color:var(--ok)} .pill.taken{color:var(--muted)} .pill.unknown{color:var(--warn)} .pill.wait{color:var(--muted)}
.pill.wait::before{animation:blink 1s infinite}
@keyframes blink{50%{opacity:.2}}
.sig{font:12px var(--mono);color:var(--ok)}
.sig:not(.na){animation:pop .5s cubic-bezier(.2,1.6,.4,1) both}
@keyframes pop{from{opacity:0;transform:scale(.6)}}
.sig.no{color:var(--bad)} .sig.na{color:var(--muted)}
.fine{font-size:12.5px;color:var(--muted);margin:14px 0 0;line-height:1.6}

/* lanes diagram with travelling packets */
.diagram{padding:24px;border-radius:var(--radius);background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-2)}
.lane{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr) 34px minmax(0,1fr);align-items:center;margin:10px 0}
.node{padding:12px 8px;border-radius:12px;text-align:center;font-weight:600;font-size:14px;background:var(--surface);border:1px solid var(--line);overflow-wrap:anywhere;box-shadow:var(--sh-1)}
.node small{display:block;font-weight:500;color:var(--muted);font-size:11.5px}
.node.you{border-color:transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--edge) border-box;border:1.5px solid transparent;box-shadow:0 10px 30px -14px rgba(90,120,230,.6)}
.arrow{height:2px;background:linear-gradient(90deg,var(--brand2),var(--violet));position:relative;opacity:.8}
.arrow::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left-color:var(--violet)}
.arrow::before{content:"";position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--brand),0 0 14px 2px var(--brand);animation:packet 2.2s cubic-bezier(.5,0,.5,1) infinite}
.lane:nth-of-type(odd) .arrow::before{animation-delay:.7s}
.lane .arrow:last-of-type::before{animation-delay:1.1s}
@keyframes packet{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 8px);opacity:0}}
.lane-label{font:11px var(--mono);color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-top:16px}

/* status lists */
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px 18px;margin:16px 0 0;font-size:14.5px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;font-weight:600;overflow-wrap:anywhere}
ul.list{margin:12px 0 0;padding-left:20px;color:var(--muted);line-height:1.75;font-size:15px}
ul.list li{margin:3px 0}
ul.list li b{color:var(--ink);font-weight:600}
ul.list li::marker{color:var(--brand)}

footer{padding:56px 0 76px;border-top:1px solid var(--line);color:var(--muted);font-size:14px}
footer .row2{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer a{color:var(--ink)}

/* content rises in as it scrolls into view; browsers without scroll-driven animations just show it */
@supports (animation-timeline: view()){
  .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% cover 24%}
  @keyframes rise{from{opacity:0;transform:translateY(34px) scale(.975)}to{opacity:1;transform:none}}
}

@media (max-width:1000px){
  .grid3,.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid2{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .nav{padding:10px 12px;gap:8px}
  .nav nav{gap:2px}
  .nav nav a{font-size:12px;padding:6px 8px}
  .nav nav a.hide-s{display:none}
  .langs button{padding:6px 6px;font-size:10px}
  .theme-toggle{width:38px;height:38px}
  .grid3,.grid4{grid-template-columns:minmax(0,1fr)}
  section.block{padding:76px 0}
  .search{flex-direction:column}
  .lane{grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr) 16px minmax(0,1fr)}
  .node{font-size:12px;padding:10px 4px}
  .row{grid-template-columns:minmax(0,1fr)}
  .row .price,.row .act{text-align:left}
}
@media (max-width:460px){.logo span{display:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}