/* Intro: the first-visit choice between the 3D desk and this site.
   Only active while <html> has the .intro class, which the inline script in <head> sets,
   so without JavaScript the classic page renders as usual. */
html.intro{overflow:hidden}
html.intro body>main,html.intro .theme-switch,html.intro .desk-link{visibility:hidden}
/* A remembered desk choice is redirecting: show the desk's own backdrop instead of this page. */
html.leaving{background:#1a140f}
html.leaving body{visibility:hidden}

.intro-panel{--intro-desk:#1a140f;position:fixed;inset:0;display:block;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:auto;background:var(--paper);color:var(--ink);font-family:Manrope,Arial,sans-serif;font-synthesis:none;-webkit-font-smoothing:antialiased;transition:opacity 360ms ease,background-color 420ms ease}
.intro-panel:not([open]){display:none}
.intro-panel::backdrop{background:transparent}
.intro-panel:focus{outline:none}
/* The column sits exactly where the classic page's header does, so choosing the website leaves the name in place. */
.intro-inner{width:720px;margin:92px auto 64px}
@media(max-width:1199px){.intro-inner{width:76vw;margin-left:12vw}}
@media(max-width:850px){.intro-inner{width:auto;margin:64px 16px 40px}}
.intro-panel h2{margin:0;font-size:19px;line-height:27px;font-weight:500;color:var(--ink)}
.intro-lede{max-width:460px;margin:16px 0 0;font-size:15px;line-height:24px;color:var(--muted)}
.intro-label{margin:64px 0 0;font-size:13px;line-height:20px;color:var(--muted)}

.intro-choices{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:640px;margin-top:16px}
.intro-choice{display:grid;grid-template-columns:1fr auto;grid-template-areas:"art art" "text arrow";border:1px solid var(--line);color:inherit;text-decoration:none;transition:border-color 220ms ease;-webkit-tap-highlight-color:transparent}
.intro-choice:hover{text-decoration:none}
.intro-art{grid-area:art;display:grid;place-items:center;height:144px;border-bottom:1px solid var(--line);background:var(--surface);color:var(--muted);transition:color 220ms ease,border-color 220ms ease}
.intro-art svg{display:block;width:150px;height:100px;overflow:visible}
.intro-art svg *{vector-effect:non-scaling-stroke}
.intro-art .sheet{fill:var(--paper)}
.intro-art .soft{opacity:.55}
.intro-text{grid-area:text;display:flex;flex-direction:column;padding:16px 0 18px 18px}
.intro-title{font-size:15px;line-height:23px;font-weight:500}
.intro-desc,.intro-note{font-size:13px;line-height:20px;color:var(--muted)}
.intro-note{display:none;margin-top:4px}
.intro-arrow{grid-area:arrow;align-self:center;padding:0 18px 0 12px;font-size:15px;line-height:1;color:var(--muted);transition:transform 300ms cubic-bezier(.22,1,.36,1),color 220ms ease}
.intro-choice:is(:hover,:focus-visible){border-color:var(--muted)}
.intro-choice:is(:hover,:focus-visible) .intro-art{color:var(--ink);border-color:var(--muted)}
.intro-choice:is(:hover,:focus-visible) .intro-arrow{color:var(--ink);transform:translateX(4px)}
.intro-choice:focus-visible{outline:2px solid var(--muted);outline-offset:4px;border-radius:0}
.intro-foot{margin:24px 0 0;font-size:13px;line-height:20px;color:var(--muted)}

/* Touch screens and narrow windows get a gentle note that the desk is happiest on a laptop. */
@media(pointer:coarse),(max-width:600px){.intro-note{display:block}}
@media(max-width:600px){
  .intro-label{margin-top:48px}
  .intro-choices{grid-template-columns:1fr;gap:12px}
  .intro-art{height:120px}
}
@media(max-width:600px) and (max-height:720px){.intro-art{height:88px}.intro-art svg{width:110px;height:72px}.intro-label{margin-top:32px}}

/* Entrance: the column settles in, one line after another. */
.intro-inner>*{animation:intro-in 640ms cubic-bezier(.22,1,.36,1) backwards}
.intro-inner>:nth-child(2){animation-delay:50ms}
.intro-inner>:nth-child(3){animation-delay:100ms}
.intro-inner>:nth-child(4){animation-delay:150ms}
.intro-inner>:nth-child(5){animation-delay:200ms}
@keyframes intro-in{from{opacity:0;transform:translateY(6px)}}

/* Leaving: fade away to reveal the site, or dim into the desk's dark backdrop before navigating. */
.intro-panel.is-leaving{opacity:0;transition-delay:140ms}
.intro-panel.is-leaving :is(.intro-label,.intro-choices,.intro-foot){opacity:0;transition:opacity 180ms ease}
.intro-panel.to-desk{background:var(--intro-desk)}
.intro-panel.to-desk .intro-inner{opacity:0;transition:opacity 240ms ease}

@media(prefers-reduced-motion:reduce){
  .intro-panel,.intro-panel.to-desk .intro-inner,.intro-panel.is-leaving :is(.intro-label,.intro-choices,.intro-foot),.intro-choice,.intro-art,.intro-arrow{transition:none}
  .intro-inner>*{animation:none}
  .intro-choice:is(:hover,:focus-visible) .intro-arrow{transform:none}
}