/* pantheon.inc's design language, as on the tools themselves: white paper under a fixed noise grain,
   ink and muted greys, 1px hairlines instead of boxes, square shapes, DM Sans 400 for titles, Geist
   for text, Geist Mono for numbers, 14px as the smallest type. */
@font-face { font-family:"Geist"; src:url("type/Geist-Latin.woff2") format("woff2"); font-weight:100 900; font-display:swap; }
@font-face { font-family:"Geist Mono"; src:url("type/GeistMono-Latin.woff2") format("woff2"); font-weight:100 900; font-display:swap; }
@font-face { font-family:"DM Sans"; src:url("type/DM-Sans.woff2") format("woff2"); font-weight:400; font-display:swap; }
:root {
  color-scheme:light;
  --bg:#ffffff; --soft:#f0f3f6; --ink:#1c1c1a; --muted:#6c6b66; --muted-2:#8a8984;
  --line:rgba(28,28,26,.22); --line-soft:rgba(28,28,26,.12); --highlight:#24241f;
  --side:272px; --gutter:clamp(16px,6vw,96px);
  --font-body:"Geist",Arial,Helvetica,sans-serif; --font-mono:"Geist Mono","SFMono-Regular",Consolas,monospace;
  --font-h1:"DM Sans","Geist",Arial,Helvetica,sans-serif;
  --grain:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection { background:var(--highlight); color:#fff; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:400 16px/1.55 var(--font-body); -webkit-font-smoothing:antialiased; }
.grain { position:fixed; inset:-20%; pointer-events:none; z-index:2147483644; background-image:var(--grain); background-size:200px 200px;
         filter:contrast(80%); opacity:.2; }
a { color:inherit; }
/* page loader, as pantheon.inc's (landing app/globals.css .page-loader): the page stays hidden from the
   first paint while the logo plays, then fades in as the loader goes */
.page-loader { position:fixed; inset:0; z-index:2147483645; display:flex; align-items:center; justify-content:center;
               background:var(--bg); opacity:0; transition:opacity 300ms ease; }
.page-loader--entered { opacity:1; }
.page-loader--exiting { opacity:0; pointer-events:none; }
.page-loader-video { display:block; height:auto; max-width:calc(100vw - 64px); width:clamp(58px,6vw,78px); transform:rotate(180deg); }
body > :not(.page-loader):not(.grain) { opacity:1; transition:opacity 1000ms ease; }
body:has(> .page-loader) > :not(.page-loader):not(.grain) { opacity:0; pointer-events:none; }
a:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }

body { min-height:100svh; display:flex; flex-direction:column; }
.shell { display:grid; grid-template-columns:var(--side) minmax(0,1fr); min-height:calc(100svh - 59px); padding-top:76px; }

/* sidebar: the lockup, the sections, and who is signed in */
.side { position:sticky; top:76px; height:calc(100svh - 135px); display:flex; flex-direction:column; gap:40px;
        padding:24px 16px 20px 24px; border-right:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:11px; height:44px; text-decoration:none; }
.brand img { display:block; filter:invert(1); }
.brand .icon { height:24px; width:auto; }
.brand .word { height:11px; width:auto; }
.brand .tag { color:var(--muted); font:400 14px/1 var(--font-body); padding-left:11px; border-left:1px solid var(--line); }
.nav { display:flex; flex-direction:column; gap:2px; }
.nav .group { margin:20px 0 6px 8px; color:var(--muted-2); font:400 14px/1.4 var(--font-body); }
.nav a { display:block; padding:7px 8px; text-decoration:none; color:var(--muted); font:400 15px/1.4 var(--font-body);
         transition:color 240ms ease, background-color 240ms ease; }
.nav a:hover { color:var(--ink); }
.nav a[aria-current="page"] { color:var(--ink); background:var(--soft); }
/* a tool in the navigation says what it is for, so the column explains where each link goes */
.nav .tool-link { display:flex; flex-direction:column; gap:4px; margin-top:12px; padding:10px 8px; }
.nav .tool-link .name { color:var(--ink); }
.nav .tool-link .about { color:var(--muted-2); font-size:14px; line-height:1.45; }
.nav .tool-link:hover .about { color:var(--muted); }
.account .name { color:var(--ink); font-size:15px; }
.account .name:empty { display:none; }
.account { margin-top:auto; display:flex; flex-direction:column; gap:4px; padding:16px 8px 0; border-top:1px solid var(--line-soft); }
.account .email { color:var(--muted); font-size:14px; overflow-wrap:anywhere; }
.account[hidden] { display:none; }
.account .signout { color:var(--ink); font-size:14px; text-underline-offset:4px; text-decoration-thickness:1px; }

/* home */
.main { min-width:0; padding:0 var(--gutter); max-width:calc(1120px + 2 * var(--gutter)); }
.hello { padding:72px 0 36px; border-bottom:1px solid var(--line); }
.hello h1 { margin:0; font:400 clamp(34px,4.4vw,54px)/0.98 var(--font-h1); }

/* one block per tool: its name and the way in on one line, its numbers under them */
.tool { display:flex; flex-direction:column; gap:28px; padding:32px 0; border-bottom:1px solid var(--line); }
.tool-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; }
.tool h2 { margin:0; font:400 21px/1.2 var(--font-h1); }
.tool p { flex:0 0 100%; order:3; margin:0; color:var(--muted); font-size:15px; line-height:1.55; }
.tool .open { display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px; background:var(--ink); color:#fff;
              border-radius:5px; text-decoration:none; font:500 14px/1 var(--font-body); transition:background-color 240ms ease; }
.tool .open:hover { background:#3f3f3b; }
.tool .open span { transition:transform 240ms ease; }
.tool .open:hover span { transform:translateX(3px); }
.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.metric { padding:2px 0 2px 20px; border-left:1px solid var(--line); min-width:0; }
.metric .label { color:var(--muted); font-size:14px; line-height:1.4; }
/* every value takes the height of a number, so a cell without one keeps its note on the shared line */
.metric .value { display:flex; align-items:flex-end; height:clamp(28px,3vw,38px); margin:10px 0 8px;
                 font:500 clamp(28px,3vw,38px)/1 var(--font-mono); letter-spacing:-.01em; white-space:nowrap;
                 opacity:0; transition:opacity 320ms ease; }
.metric .value.in { opacity:1; }
.metric .value.na { font:400 15px/1.2 var(--font-body); letter-spacing:0; color:var(--muted-2); }
.metric .note { color:var(--muted-2); font-size:14px; line-height:1.4; }

.foot { padding:24px 0 32px; color:var(--muted); font-size:14px; }

/* the sign-in and sign-in error pages: the lockup, one line on what this is, and one button */
.gate { display:flex; flex-direction:column; min-height:calc(100svh - 59px); padding:76px var(--gutter) 0; }
.gate .card { margin:auto 0; max-width:560px; }
.gate h1 { margin:0 0 18px; font:400 clamp(34px,4.4vw,54px)/0.98 var(--font-h1); }
/* with no line under the title, the button keeps the same gap the line used to leave above it */
.gate h1 + form { margin-top:28px; }
.gate p { margin:0 0 28px; color:var(--muted); font-size:16px; line-height:1.55; max-width:440px; }
.gate .open { display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px; background:var(--ink); color:#fff; border:0;
              border-radius:5px; cursor:pointer; text-decoration:none; font:500 14px/1 var(--font-body); transition:background-color 240ms ease; }
.gate .open:hover { background:#3f3f3b; }
.gate .open span { transition:transform 240ms ease; }
.gate .open:hover span { transform:translateX(3px); }
.gate .open:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
.gate .detail { margin:20px 0 0; color:var(--muted-2); font:400 14px/1.4 var(--font-mono); }
.gate .foot { padding:24px 0 32px; }

/* the sign-in page: the title and button on the left, two YAM arms at work on the right. The arms share the
   text's paper, and their canvas runs under the text with its left edge faded out; ?layout=divider draws a
   hairline between the halves instead */
.split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); min-height:calc(100svh - 59px); }
.split .gate { position:relative; z-index:1; pointer-events:none; }
.split .gate > * { pointer-events:auto; }
.art { position:sticky; top:0; height:calc(100svh - 59px); min-width:0; }
.art canvas { position:absolute; top:0; height:100%; left:-28%; width:128%; display:block; touch-action:none; --fade-left:.25;
              -webkit-mask-image:linear-gradient(to right, transparent 0, #000 24%); mask-image:linear-gradient(to right, transparent 0, #000 24%);
              opacity:0; transition:opacity 1000ms ease; }
.art canvas.in { opacity:1; }
.divider .art { border-left:1px solid var(--line); overflow:hidden; }
.divider .art canvas { left:0; width:100%; -webkit-mask-image:none; mask-image:none; --fade-left:0; }

/* the two compared alternatives: only the account in the column, or no column with the links in the header */
.side-account .nav .tool-link { display:none; }
.side-account .account { margin-top:0; border-top:0; padding-top:0; }
.side-none .shell { grid-template-columns:minmax(0,1fr); }
.side-none .side { display:none; }
.side-none .main { margin-inline:auto; width:100%; }
.header-links { display:flex; gap:4px; }
.header-links a { padding:7px 10px; color:var(--muted); text-decoration:none; font:400 15px/1.4 var(--font-body); transition:color 240ms ease; }
.header-links a:hover { color:var(--ink); }

/* narrow screens: the sidebar becomes a bar across the top */
@media (max-width:900px) {
  .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:24px; }
}
@media (max-width:760px) {
  .shell { grid-template-columns:minmax(0,1fr); }
  .side { position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; gap:12px 20px;
          padding:12px 16px; border-right:0; border-bottom:1px solid var(--line); }
  .nav { flex-direction:row; flex-wrap:wrap; gap:4px; }
  .nav .tool-link { margin-top:0; padding:7px 8px; }
  .nav .tool-link .about { display:none; }
  .account { margin:0 0 0 auto; padding:0; border:0; flex-direction:row; align-items:center; gap:12px; }
  .account .email { display:none; }
  .main { padding:0 16px; }
  .hello { padding:40px 0 28px; }
  .gate { padding:76px 16px 0; }
  .split { grid-template-columns:minmax(0,1fr); grid-template-rows:76px minmax(220px,40svh) minmax(190px,1fr); min-height:calc(100svh - 59px); }
  .split .gate { display:contents; }
  .split .gate .card { grid-row:3; align-self:center; margin:24px 16px; }
  .art { grid-row:2; position:relative; height:100%; order:0; overflow:hidden; }
  .art canvas { left:0; width:100%; -webkit-mask-image:linear-gradient(to bottom, #000 80%, transparent); mask-image:linear-gradient(to bottom, #000 80%, transparent); --fade-left:0; --fade-bottom:.2; }
  .divider .art { border-left:0; border-bottom:1px solid var(--line); }
}
@media (prefers-reduced-motion:reduce) { * { transition:none !important; } }