/* ===========================================================================
   Dalizhe — the blog (/blog/, /fa/blog/), rendered by the server (server/pages/blog.ts).
   The site's own ground, type and colours (css/site.css), without its stage: a page to read.
   No script runs here, and text can be selected and copied (the home page's no-select rule
   is for its canvas, not for an article).
   =========================================================================== */
@font-face{font-family:"Outfit";src:url("../fonts/Outfit-Variable.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"IRANSansX";src:url("../fonts/iransansx/IRANSansXV.woff2") format("woff2");font-weight:100 1000;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+2066-2069}
:root{
  --sky:#DDF1FC;--night:#04060C;
  --ink:rgba(255,255,255,.76);--faint:rgba(255,255,255,.5);--hair:rgba(255,255,255,.1);
  --sans:"Outfit","IRANSansX",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.22,.8,.18,1);
  --side:max(22px,4.4vw);
  --measure:66ch;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:dark}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;color:var(--sky);font-family:var(--sans);font-weight:400;-webkit-font-smoothing:antialiased;
  /* the home page's living navy-black, still: blue high on one side, a breath of sky on the other */
  background:radial-gradient(90vw 60vh at 12% -10%,rgba(30,64,150,.34),transparent 70%),radial-gradient(70vw 50vh at 96% 0%,rgba(56,189,248,.08),transparent 70%),var(--night);
  background-attachment:fixed}
a{color:inherit;text-decoration:none}
::selection{background:rgba(56,189,248,.35)}
:focus-visible{outline:1px solid var(--sky);outline-offset:4px}
.defs{position:absolute;width:0;height:0}

/* the bar: the falcon and the name, three links, the other language */
.bar{display:flex;align-items:center;gap:28px;padding:26px var(--side) 0;min-height:60px}
.logo{display:flex;align-items:center;gap:14px;font-size:11.5px;font-weight:500;letter-spacing:.44em;color:#fff}
.mark{height:21px;width:auto;flex:none}
.nav{display:flex;gap:30px;margin-inline-start:auto}
.nav a,.lang{font-size:10.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--sky);opacity:.55;padding:10px 0;transition:opacity .3s}
.nav a:hover,.lang:hover,.nav a[aria-current]{opacity:1}
.nav a[aria-current]{box-shadow:0 1px 0 #fff}
.lang{opacity:.7}

main{flex:1;width:100%;max-width:calc(var(--measure) + 2 * var(--side));margin:0 auto;padding:clamp(56px,11vh,120px) var(--side) 80px}
h1{margin:0;font-weight:300;letter-spacing:-.035em;line-height:1.08;color:#fff;font-size:clamp(34px,5.2vw,58px);text-wrap:balance}
.when{margin:0 0 18px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--sky);opacity:.8}
.intro,.standfirst{margin:18px 0 0;font-size:17px;line-height:1.7;color:var(--ink);max-width:52ch}
.empty{margin:56px 0 0;padding:28px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);color:var(--faint);font-size:15px;line-height:1.7}

/* the list: a rule between posts, the date over the title */
.posts{list-style:none;margin:56px 0 0;padding:0;border-top:1px solid var(--hair)}
.posts li{border-bottom:1px solid var(--hair)}
.posts a{display:block;padding:30px 0}
.posts .when{margin-bottom:12px;opacity:.6}
.posts h2{margin:0;font-size:clamp(22px,2.6vw,28px);font-weight:300;letter-spacing:-.02em;line-height:1.25;color:#fff;transition:letter-spacing .5s var(--ease)}
.posts a:hover h2{letter-spacing:-.008em}
.posts p{margin:12px 0 0;font-size:14.5px;line-height:1.72;color:var(--ink);max-width:58ch}
.pager,.back{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:40px}
.pager a,.back a{font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--sky);border-bottom:1px solid var(--sky);padding-bottom:3px}
.pager .count{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.back{justify-content:flex-start;margin-top:64px;padding-top:28px;border-top:1px solid var(--hair)}

/* a post */
article header{margin-bottom:44px}
.prose{font-size:17px;line-height:1.85;color:var(--ink);text-align:justify;text-align-last:start;overflow-wrap:break-word}
.prose>*:first-child{margin-top:0}
.prose p{margin:0 0 1.35em}
.prose h2,.prose h3,.prose h4{margin:2.2em 0 .7em;font-weight:400;letter-spacing:-.02em;line-height:1.3;color:#fff;text-align:start}
.prose h2{font-size:26px}.prose h3{font-size:21px}.prose h4{font-size:18px}
.prose a{color:#fff;border-bottom:1px solid rgba(221,241,252,.5);transition:border-color .3s}
.prose a:hover{border-color:#fff}
.prose strong{font-weight:600;color:#fff}
.prose ul,.prose ol{margin:0 0 1.35em;padding-inline-start:1.4em;text-align:start}
.prose li{margin:.35em 0}
.prose blockquote{margin:1.8em 0;padding-inline-start:22px;border-inline-start:2px solid var(--sky);color:#fff;font-size:19px;line-height:1.7;text-align:start}
.prose blockquote p:last-child{margin-bottom:0}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;background:rgba(255,255,255,.07);border-radius:4px;padding:.12em .4em;direction:ltr;unicode-bidi:isolate}
.prose pre{margin:0 0 1.5em;padding:18px 20px;background:rgba(255,255,255,.05);border:1px solid var(--hair);border-radius:10px;overflow-x:auto;direction:ltr;text-align:left;line-height:1.6}
.prose pre code{background:none;padding:0;font-size:13.5px}
.prose hr{margin:2.6em 0;border:0;border-top:1px solid var(--hair)}
.prose table{border-collapse:collapse;margin:0 0 1.5em;font-size:15px;text-align:start;display:block;overflow-x:auto}
.prose th,.prose td{border-bottom:1px solid var(--hair);padding:10px 16px 10px 0;text-align:start}
.preview{margin:0 0 36px;padding:12px 16px;border:1px solid rgba(253,186,116,.5);border-radius:10px;color:#fdba74;font-size:13px}

footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 28px;padding:26px var(--side) 34px;border-top:1px solid var(--hair);font-size:12px;line-height:1.8;color:var(--faint)}
footer p{margin:0;display:flex;flex-wrap:wrap;gap:4px 12px}   /* the row of the site's pages wraps on a phone */
footer a{white-space:nowrap;border-bottom:1px solid var(--hair);transition:border-color .3s,color .3s}
footer a:hover{color:#fff;border-color:var(--sky)}

/* the static blog's extras (tools/build-blog.js): the path back, the byline, the contents, the
   topics, a line to write to us, more posts, our own pictures */
.crumbs{display:flex;gap:10px;align-items:center;margin:0 0 30px;font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.crumbs a{transition:color .3s}.crumbs a:hover{color:#fff}
.byline{margin:20px 0 0;font-size:13px;color:var(--faint)}
.byline a{color:var(--sky);border-bottom:1px solid var(--hair)}
.toc{margin:0 0 44px;padding:20px 24px;border:1px solid var(--hair);border-radius:12px;background:rgba(255,255,255,.025)}
.toc p{margin:0 0 10px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.toc ol{margin:0;padding-inline-start:1.3em;font-size:15px;line-height:1.75;color:var(--ink)}
.toc a{transition:color .3s}.toc a:hover{color:#fff}
.prose h2,.prose h3{scroll-margin-top:24px}
.prose figure{margin:2em 0}
.prose img{display:block;max-width:100%;height:auto;border-radius:10px;border:1px solid var(--hair)}
.prose figcaption{margin-top:10px;font-size:13px;line-height:1.6;color:var(--faint);text-align:start}
.tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:36px 0 0}
.tags>span:first-child{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-inline-end:6px}
.tag{font-size:12.5px;padding:5px 11px;border:1px solid var(--hair);border-radius:99px;color:var(--ink)}
.cta{margin:44px 0 0;padding:24px 26px;border-radius:14px;background:linear-gradient(135deg,rgba(30,64,150,.28),rgba(56,189,248,.06));border:1px solid rgba(221,241,252,.14)}
.cta p{margin:0;font-size:16px;line-height:1.7;color:#fff}
.cta a{border-bottom:1px solid rgba(221,241,252,.6);white-space:nowrap}
.related{margin-top:72px}
.related h2{margin:0;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.related .posts{margin-top:18px}
.related .posts h3{margin:0;font-size:clamp(19px,2.2vw,23px);font-weight:300;letter-spacing:-.015em;line-height:1.3;color:#fff}

/* Persian: its own face at its own sizes, no spacing between letters (it breaks the joins), no capitals */
html[lang="fa"] .logo,html[lang="fa"] .nav a,html[lang="fa"] .when,html[lang="fa"] .pager a,html[lang="fa"] .back a{letter-spacing:0;text-transform:none}
html[lang="fa"] .logo{font-size:16px;font-weight:600}
html[lang="fa"] .nav a,html[lang="fa"] .pager a,html[lang="fa"] .back a{font-size:14px}
html[lang="fa"] .when{font-size:13px;font-weight:500}
html[lang="fa"] h1{letter-spacing:0;font-weight:500;line-height:1.5;font-size:clamp(30px,4.6vw,50px)}
html[lang="fa"] .posts h2{letter-spacing:0;font-weight:500;line-height:1.6}
html[lang="fa"] .posts a:hover h2{letter-spacing:0}
html[lang="fa"] .prose{font-size:17.5px;line-height:2.15}
html[lang="fa"] .prose h2,html[lang="fa"] .prose h3,html[lang="fa"] .prose h4{letter-spacing:0;font-weight:600;line-height:1.7}
html[lang="fa"] .intro,html[lang="fa"] .standfirst,html[lang="fa"] .posts p,html[lang="fa"] .empty{line-height:2.05}
html[lang="fa"] .lang{letter-spacing:.26em}
html[lang="fa"] .prose th,html[lang="fa"] .prose td{padding:10px 0 10px 16px}
html[lang="fa"] .crumbs,html[lang="fa"] .toc p,html[lang="fa"] .tags>span:first-child,html[lang="fa"] .related h2{letter-spacing:0;text-transform:none;font-size:13.5px}
html[lang="fa"] .related .posts h3{letter-spacing:0;font-weight:500;line-height:1.7}
html[lang="fa"] .cta p{line-height:2}
html[lang="fa"] .toc ol,html[lang="fa"] .prose ol{list-style-type:persian}

/* the photographs (tools/blog-photos.js): drawn in the site's own night-to-sky, framed like the
   contents box; the cover under the heading, a smaller one beside each post in the lists */
.cover{margin:0 0 44px}
.cover img,.photo img,.thumb{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--hair);background:#0a1024}
.cover figcaption{margin-top:10px;text-align:end}
.prose .photo{margin:2.2em 0}
.credit{font-size:12px;color:var(--faint);white-space:nowrap}
.credit a{border-bottom:1px solid var(--hair);transition:color .3s}.credit a:hover{color:#fff}
.posts a.pic{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:32px;align-items:center}
.posts .thumb{border-radius:10px;opacity:.86;transition:opacity .4s var(--ease),transform .6s var(--ease)}
.posts a.pic:hover .thumb{opacity:1;transform:scale(1.015)}
.related .posts a.pic{grid-template-columns:minmax(0,1fr) 160px;gap:24px}

/* the site's own pages (tools/blog/pages.js): a chapter's label, the team, the address to write to */
.prose .kicker{margin:2.4em 0 .3em;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.prose .kicker+h2{margin-top:0}
.people{list-style:none;margin:0 0 1.4em;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:28px}
.people li{display:flex;flex-direction:column;gap:2px;padding:12px 0;border-bottom:1px solid var(--hair)}
.people .who{color:#fff;font-size:18px;font-weight:400}
.people .who a{border-bottom:1px solid var(--hair)}
.people .role{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.prose .mail{font-size:clamp(22px,3.2vw,30px);font-weight:300;margin:.6em 0 1.4em}
.prose .mail a{color:#fff;border-bottom:1px solid rgba(221,241,252,.4)}
html[lang="fa"] .prose .kicker,html[lang="fa"] .people .role{letter-spacing:0;text-transform:none;font-size:13px}
html[lang="fa"] .people .who{font-weight:500}

/* the office (tools/blog/pages.js, the owner, 2026-10-25): the address, our building from the street beside four
   pictures from inside, no captions */
.prose .addr{margin:0 0 .5em;color:#fff;font-size:18px;line-height:1.7;text-align:start}
.prose .office{display:grid;gap:12px;margin:1.4em 0 0}
.og-a,.og-b{display:grid;grid-template-columns:minmax(0,74fr) minmax(0,100fr);gap:12px}
.og-b{grid-template-columns:minmax(0,100fr) minmax(0,74fr)}
.og-pair{display:grid;gap:12px;align-content:start}
.og-tall,.prose .og-pair img{border-radius:12px;border:1px solid var(--hair);background:#0a1024;
  transition:transform .9s var(--ease),border-color .4s,box-shadow .9s var(--ease)}
.og-tall{position:relative;overflow:hidden}
.prose .og-tall>*{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;border:0;border-radius:0}
.prose .og-pair img{display:block;width:100%;height:auto;max-width:none}
.og-tall:hover,.prose .og-pair img:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.26);box-shadow:0 18px 40px -18px rgba(0,0,0,.8)}
html[lang="fa"] .prose .addr{line-height:2}
/* directions on Balad and Google Maps, and Google's map, darkened to the page's night (inverted, its hues turned back) */
.prose .maps{margin:0 0 1em}
.og-map iframe{border:0;filter:invert(.92) hue-rotate(180deg) saturate(.75) brightness(.92)}

/* the Persian pages' button home (the owner, 2026-10-25): a glass pill, as the home page's buttons are, never a ledge */
.home-btn{display:flex;justify-content:center;margin:64px 0 0}
.home-btn a{display:inline-flex;align-items:center;gap:12px;padding:13px 28px;border-radius:999px;border:1px solid rgba(221,241,252,.26);
  background:rgba(255,255,255,.04);color:#fff;font-size:15px;font-weight:500;transition:border-color .4s var(--ease),background .4s var(--ease),gap .4s var(--ease)}
.home-btn a:hover{border-color:rgba(125,211,252,.7);background:rgba(125,211,252,.08);gap:16px}
.home-btn svg{width:14px;height:14px}

/* ---------------------------------------------------------------- motion, quietly
   The owner, 2026-10-25: "the blog pages seem so vacent in comparison to our homepage ... add some elements in them but
   dont make them too complicated only some animated elements subtle stuff". All CSS, so the pages still run no script:
   the home page's ground (its light pools drifting, very slowly), a faint grid of points near the top, its light ring
   breathing behind the heading, a reading line along the top, each part rising in as it scrolls into view, a light
   running round the contents box and the note to write to us. Only transforms and opacity move, so a phone composites
   them without repainting the page. Nothing waits on prefers-reduced-motion: the owner's own PC reports it */
html{background:var(--night)}
/* the page shows once this sheet is here (the inline style in its head hides it until then, for at most 3 s) */
body{background:none;visibility:visible;animation:none;position:relative}            /* the night is the page's own (the root), so the light below sits over it */
.ambient{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.ambient i{position:absolute;border-radius:50%;will-change:transform}
.ambient i:nth-child(1){width:92vmax;height:92vmax;left:-40vmax;top:-60vmax;background:radial-gradient(closest-side,rgba(30,64,150,.44),rgba(30,64,150,0));animation:dz-a 34s ease-in-out infinite alternate}
.ambient i:nth-child(2){width:64vmax;height:64vmax;right:-30vmax;top:-28vmax;background:radial-gradient(closest-side,rgba(56,189,248,.12),rgba(56,189,248,0));animation:dz-b 42s ease-in-out infinite alternate}
.ambient i:nth-child(3){width:84vmax;height:84vmax;left:-6vmax;bottom:-66vmax;background:radial-gradient(closest-side,rgba(253,186,116,.06),rgba(253,186,116,0));animation:dz-c 50s ease-in-out infinite alternate}
@keyframes dz-a{to{transform:translate3d(16vmax,12vmax,0) scale(1.08)}}
@keyframes dz-b{to{transform:translate3d(-14vmax,10vmax,0) scale(.9)}}
@keyframes dz-c{to{transform:translate3d(14vmax,-8vmax,0) scale(1.12)}}
.ambient::before{content:"";position:absolute;inset:0;background:radial-gradient(rgba(221,241,252,.1) 1px,rgba(221,241,252,0) 1.5px) 0 0/28px 28px;
  -webkit-mask:radial-gradient(76vw 42vh at 50% 0,#000 15%,transparent 78%);mask:radial-gradient(76vw 42vh at 50% 0,#000 15%,transparent 78%)}
/* the light ring, as on the home page but faint: a cool white line and its glow, breathing. It belongs to the top of
   the page and scrolls away with it, so it never sits behind the text being read */
.halo{position:absolute;inset:0 0 auto;height:min(110vh,980px);overflow:hidden;z-index:-1;pointer-events:none}
.halo b{position:absolute;top:-6vmin;inset-inline-end:-24vw;width:min(54vw,620px);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(234,246,255,.17);box-shadow:0 0 70px rgba(125,211,252,.1),inset 0 0 70px rgba(125,211,252,.07);animation:dz-ring 9s ease-in-out infinite}
@keyframes dz-ring{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.025)}}
/* the reading line: how far down the page you are (browsers that drive animations by scroll; elsewhere it stays hidden) */
.progress{position:fixed;inset:0 0 auto;height:2px;z-index:30;pointer-events:none;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,rgba(56,189,248,0),#7DD3FC 55%,#EAF6FF)}
html[dir="rtl"] .progress{transform-origin:right;background:linear-gradient(270deg,rgba(56,189,248,0),#7DD3FC 55%,#EAF6FF)}
@supports (animation-timeline: scroll()){.progress{animation:dz-read linear both;animation-timeline:scroll(root)}}
@keyframes dz-read{to{transform:scaleX(1)}}
/* the page arrives: its parts rise in, one after another */
main>*,article header>*{animation:dz-in 1s var(--ease) both}
main>*:nth-child(2),article header>*:nth-child(2){animation-delay:.07s}
main>*:nth-child(3),article header>*:nth-child(3){animation-delay:.14s}
article header>*:nth-child(4){animation-delay:.21s}
@keyframes dz-in{from{opacity:0;transform:translateY(16px)}}
/* and as it scrolls: each post in a list, each heading and picture, each person */
@supports (animation-timeline: view()){
  .posts li,.prose h2,.prose .photo,.prose .office,.people li,.tags,.cta,.related h2{animation:dz-rise linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
}
@keyframes dz-rise{from{opacity:0;transform:translateY(24px)}}
/* a list's title: a line draws under it on hover */
.posts h2,.related .posts h3{background:linear-gradient(rgba(221,241,252,.6),rgba(221,241,252,.6)) 0 100%/0 1px no-repeat;transition:background-size .7s var(--ease),letter-spacing .5s var(--ease)}
html[dir="rtl"] .posts h2,html[dir="rtl"] .related .posts h3{background-position:100% 100%}
.posts a:hover h2,.related .posts a:hover h3{background-size:100% 1px}
/* a light that runs round the contents box and the note to write to us, as the home page's cards have */
@property --dz-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.toc,.cta{position:relative}
.toc::before,.cta::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--dz-a),rgba(125,211,252,0) 0 60%,rgba(125,211,252,.5) 78%,rgba(234,246,255,.85) 83%,rgba(125,211,252,0) 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:dz-spin 10s linear infinite}
@keyframes dz-spin{to{--dz-a:360deg}}

@media(max-width:620px){
  .og-a,.og-b,.og-pair{grid-template-columns:1fr;gap:10px}
  .og-tall{aspect-ratio:3/4}
  .og-map{aspect-ratio:4/3}
  .halo b{width:86vw;top:-14vw;inset-inline-end:-40vw}
  .people{grid-template-columns:1fr}
  .bar{gap:16px;padding-top:18px;flex-wrap:wrap}
  .nav{gap:18px;order:3;width:100%;margin:0}
  .lang{margin-inline-start:auto}
  .prose{font-size:16.5px;text-align:start}
  .posts a.pic{grid-template-columns:1fr;gap:18px}
  .posts a.pic .thumb{order:-1}
  .related .posts a.pic{grid-template-columns:minmax(0,1fr) 112px;gap:16px}
  .related .posts a.pic .thumb{order:0}
  .credit{white-space:normal}
}
@media print{body{background:#fff;color:#000}.bar,.back,footer,.pager{display:none}.prose,h1,.prose h2,.prose h3,.prose strong,.prose a{color:#000}}

/* The pages behind a sign-in (js/members.js, tools/blog/members.js): forms, the systems, the accounts table */
main:has(#m-app[data-page="admin"]){max-width:calc(1080px + 2 * var(--side))}
#m-app{margin-top:32px}
.m-wait{color:var(--faint)}
.m-form{display:grid;gap:18px;max-width:420px}
#m-app[data-page="admin"] .m-form{max-width:none;justify-items:start}
#m-app[data-page="admin"] .m-row{width:100%}
.m-row{display:grid;grid-template-columns:1fr 1fr 170px;gap:14px}
.m-f{display:grid;gap:7px;font-size:13px;color:var(--ink);min-width:0}
.m-f small{color:var(--faint);font-size:12px}
.m-in{width:100%;height:46px;padding:0 14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.16);border-radius:10px;color:#fff;font:inherit;font-size:15px;transition:border-color .2s,background .2s}
.m-in:focus{outline:0;border-color:var(--sky);background:rgba(255,255,255,.07)}
.m-in option{background:#0B1120;color:#fff}
.m-in.m-small{height:36px;padding:0 8px;font-size:13px;min-width:112px}
.m-in:disabled{opacity:.55}
.m-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;border:1px solid var(--sky);border-radius:10px;background:var(--sky);color:#0B1A33!important;font:inherit;font-size:14px;font-weight:500;text-decoration:none;cursor:pointer;transition:opacity .2s}
.m-btn:hover{opacity:.86}
.m-btn:disabled{opacity:.5;cursor:default}
.m-ghost{background:transparent;color:var(--sky)!important;border-color:rgba(255,255,255,.22)}
.m-mini{min-height:32px;padding:0 10px;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:none;color:var(--sky);font:inherit;font-size:12.5px;cursor:pointer;white-space:nowrap}
.m-mini:hover{border-color:var(--sky)}
.m-link{color:var(--sky);text-decoration:underline;text-underline-offset:4px}
.m-err{margin:0;color:#FDBA74;font-size:14px;line-height:1.8}
.m-ok{margin:0;color:var(--sky);font-size:14px}
.m-msg:empty{display:none}
.m-note{margin:28px 0 0;color:var(--faint);font-size:14px;line-height:1.9}
.m-note a{color:var(--sky)}
.m-warn{margin:0 0 24px;color:#FDBA74}
.m-h{margin:52px 0 18px;font-size:20px;font-weight:400;letter-spacing:-.01em;color:#fff}
.m-hello{display:grid;gap:4px;margin:0;font-size:18px;color:#fff}
.m-hello span{font-size:13px;color:var(--faint);justify-self:start}
.m-out{margin-top:44px}
.m-reveal{margin-top:22px;padding:20px 22px;border:1px solid var(--sky);border-radius:14px;background:rgba(221,241,252,.05)}
.m-reveal p{margin:0;font-size:14px;line-height:1.8}
.m-code{display:block;margin:14px 0;font:500 19px/1.4 ui-monospace,Consolas,monospace;color:#fff;letter-spacing:.04em;overflow-wrap:anywhere;text-align:left}
.m-actions{display:flex;flex-wrap:wrap;gap:10px}
.m-table{overflow-x:auto;border:1px solid var(--hair);border-radius:14px}
.m-table table{width:100%;min-width:640px;border-collapse:collapse;font-size:13.5px}
.m-table th{padding:12px 14px;font-weight:500;font-size:12px;color:var(--faint);text-align:start;border-bottom:1px solid var(--hair)}
.m-table td{padding:12px 14px;vertical-align:top;line-height:1.6;border-bottom:1px solid rgba(255,255,255,.05)}
.m-table tr:last-child td{border-bottom:0}
.m-dim td{opacity:.5}
.m-mail{font-size:12.5px;color:var(--faint);unicode-bidi:isolate}
.m-sub{display:block;font-size:12px;color:var(--faint)}
.m-acts .m-mini{margin:0 0 6px;margin-inline-end:6px}
.m-bar{display:block;width:100%;max-width:420px;height:4px;margin-top:14px;appearance:none;border:0;border-radius:2px;background:var(--hair);overflow:hidden}
.m-bar::-webkit-progress-bar{background:var(--hair)}
.m-bar::-webkit-progress-value{background:var(--sky)}
.m-bar::-moz-progress-bar{background:var(--sky)}
.m-cta{margin-top:32px}
/* Deep Search: the request, the questions, the plan, the run (js/members.js searchPage, searchPanel) */
main:has(#m-app[data-page="search"]){max-width:calc(1080px + 2 * var(--side))}
#m-app[data-page="search"] .m-form{max-width:760px}
#m-app[data-page="search"] .m-table td:first-child{min-width:180px}
.m-area{height:auto;min-height:150px;padding:12px 14px;line-height:1.8;resize:vertical}
.m-tight{margin:0 0 8px}
.m-first{margin-top:8px}
.m-h3{margin:34px 0 12px;font-size:15px;font-weight:500;color:#fff}
.m-q{margin:0;padding:0;border:0;display:grid;gap:10px;min-width:0}
.m-q legend{padding:0;margin-bottom:10px;font-size:15px;color:#fff;line-height:1.7}
.m-opts{display:flex;flex-wrap:wrap;gap:8px}
.m-opt{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid rgba(255,255,255,.18);border-radius:10px;font-size:14px;cursor:pointer;transition:border-color .2s,background .2s}
.m-opt:hover{border-color:rgba(255,255,255,.34)}
.m-opt:has(input:checked){border-color:var(--sky);background:rgba(221,241,252,.07);color:#fff}
.m-opt input{accent-color:var(--sky);margin:0}
.m-group{display:grid;gap:10px;padding-top:18px;border-top:1px solid var(--hair)}
.m-group .m-mini{justify-self:start}
.m-lbl{font-size:13px;color:var(--ink)}
.m-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) auto;gap:8px;align-items:center}
.m-busy{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 6px;color:var(--ink)}
.m-spin{width:14px;height:14px;border-radius:50%;border:2px solid var(--hair);border-top-color:var(--sky);animation:m-spin .9s linear infinite;flex:none}
@keyframes m-spin{to{transform:rotate(360deg)}}
.m-tally{display:flex;flex-wrap:wrap;gap:10px 38px;margin:26px 0 6px}
.m-tally b{display:block;font-size:28px;font-weight:300;color:#fff;font-variant-numeric:tabular-nums;line-height:1.2}
.m-tally span{font-size:12.5px;color:var(--faint)}
.m-log{margin-top:26px;padding-top:12px;border-top:1px solid var(--hair);font-size:12.5px;line-height:1.8;color:var(--faint);overflow-wrap:anywhere}
.m-dimtext{color:var(--faint)}
.m-runs{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.m-runs li{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 18px;border:1px solid var(--hair);border-radius:12px}
.m-runs li .m-actions{margin:0}
.m-runs b{font-weight:500;color:#fff}
.m-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25);margin-inline-end:10px;vertical-align:1px}
.m-dot.on{background:#7DD3FC;box-shadow:0 0 0 4px rgba(125,211,252,.15)}
.m-now{margin:14px 0 4px}
.m-now p+p{margin-top:12px}
.m-table .m-actions{margin-top:8px}
.m-table .m-actions .m-btn{min-height:34px;padding:0 12px;font-size:12.5px}
@media(max-width:720px){.m-pair{grid-template-columns:1fr auto}.m-pair .m-in:nth-child(2){grid-column:1}}
@media(max-width:720px){.m-row{grid-template-columns:1fr}}

.m-systems{list-style:none;margin:0;padding:0}
/* the systems on the account page (the owner, 2026-11-04, on a phone: "i hate the design in here … make it look separated and
   clean"): each one a card of its own with space around it, a small mark, its name and two lines at most, and the whole card
   is the way in (the Open link's ::before covers it); on a phone the Open is a round arrow */
.m-systems{display:grid;gap:12px}
.m-systems li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:16px;padding:16px 18px;border:1px solid rgba(221,241,252,.1);border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));transition:border-color .2s,background .2s}
.m-systems li:hover{border-color:rgba(221,241,252,.24);background:rgba(255,255,255,.05)}
.m-systems li::before{content:'';width:44px;height:44px;border-radius:12px;background:rgba(221,241,252,.07) center/22px no-repeat;border:1px solid rgba(221,241,252,.1)}
.m-systems li[data-system=studio]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DDF1FC' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18c1 0 1.6-.8 1.6-1.6 0-.5-.2-.8-.4-1.1-.3-.3-.4-.7-.4-1.1 0-.9.7-1.6 1.6-1.6H16a5 5 0 0 0 5-5c0-4-4-7.6-9-7.6z'/%3E%3Ccircle cx='7.5' cy='11' r='1'/%3E%3Ccircle cx='10.5' cy='7.5' r='1'/%3E%3Ccircle cx='15' cy='7.5' r='1'/%3E%3C/svg%3E")}
.m-systems li[data-system=search]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DDF1FC' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3Cpath d='M8 10.5h5M10.5 8v5'/%3E%3C/svg%3E")}
.m-systems li[data-system=workspace]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DDF1FC' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4' width='17' height='16' rx='2.5'/%3E%3Cpath d='M8 9.5l1.6 1.6L12.5 8M8 15h8M14.5 10h1.5'/%3E%3C/svg%3E")}
.m-systems b{display:block;font-size:16px;font-weight:500;color:#fff}
.m-systems p{margin:4px 0 0;font-size:13.5px;line-height:1.6;color:var(--faint);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.m-systems p.m-sub{-webkit-line-clamp:unset;display:block;color:var(--ink)}
.m-systems .m-btn{min-height:38px;padding:0 16px;border-radius:999px;border-color:rgba(221,241,252,.28);background:transparent;color:#fff!important;font-size:13.5px;gap:8px}
.m-systems a.m-btn::after{content:'\2192';font-size:15px;line-height:1}
html[dir=rtl] .m-systems a.m-btn::after{transform:scaleX(-1)}
.m-systems a.m-btn::before{content:'';position:absolute;inset:0;border-radius:16px}
.m-systems li:hover a.m-btn{background:var(--sky);border-color:var(--sky);color:#0B1A33!important}
@media(max-width:720px){
  .m-systems li{grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px}
  .m-systems li::before{width:40px;height:40px;border-radius:11px;background-size:20px}
  .m-systems b{font-size:15px}
  .m-systems p{font-size:13px}
  .m-systems a.m-btn{width:40px;min-height:40px;padding:0;font-size:0;gap:0}
  .m-systems a.m-btn::after{font-size:17px}
  .m-systems li:active{background:rgba(255,255,255,.07)}
  .m-systems li > .m-sys-act:has(button){grid-column:2 / -1}
  .m-systems li > .m-sys-act:empty{display:none}
  .m-systems button.m-btn{min-height:36px}
}