/* The Stackworks page language, one stylesheet for the public site (site/stackworks), the Wilson console, the account page and the public
   pages: a framed sheet on the binary field, the dot-matrix wordmark, navigation and captions in uppercase mono, display type, the
   vermilion block action with its hard shadow, the outlined cobalt box, the full-width cobalt band, square rules. Loaded after
   brand.css, which owns every colour; this file names none. */
/* The page is a sheet floating over the field of 0s and 1s, in the theme's own tone; on a narrow screen the sheet is the whole screen. */
:root{--backdrop:color-mix(in srgb,var(--brand-bg) 90%,var(--brand-ink))}
body{background:var(--backdrop);overflow-x:clip}
#pixel-rain{position:fixed;inset:0;width:100%;height:100vh;height:100lvh;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 82% 38%,color-mix(in srgb,var(--brand-accent) 7%,transparent),transparent 66%)}
.binary-bursts{position:fixed;inset:0;width:100%;height:100vh;height:100lvh;z-index:4;pointer-events:none}
.sheet{position:relative;z-index:1;background:var(--brand-bg);max-width:1560px;margin:0 auto}
@media(min-width:1100px){.sheet{width:calc(100% - clamp(96px,16vw,560px));margin-block:44px 56px;border-radius:14px;overflow:clip;box-shadow:0 0 0 2px var(--brand-ink),0 24px 70px color-mix(in srgb,black 22%,transparent)}}
@media print{#pixel-rain,.binary-bursts{display:none}body{background:white}}
/* Dark: black and monochrome, white outlines; colour only in small places (links, the star, the model, the bursts). */
:root[data-theme="dark"]{--brand-bg:var(--brand-mono-bg);--brand-panel:var(--brand-mono-panel);--brand-ink:var(--brand-mono-ink);--brand-text:var(--brand-mono-text);--brand-muted:var(--brand-mono-muted);--brand-chrome:color-mix(in srgb,var(--brand-mono-bg) 94%,transparent);
--brand-accent:var(--brand-mono-pop);--brand-accent-ink:var(--brand-mono-bg);--brand-second:var(--brand-mono-link);
--brand-block-blue:var(--brand-mono-bg);--brand-on-block:var(--brand-mono-ink);--brand-block-ink:var(--brand-mono-ink);--brand-block-paper:var(--brand-mono-bg);--brand-block-paper-ink:var(--brand-mono-ink);--brand-block-paper-text:var(--brand-mono-paper-text);
--backdrop:var(--brand-mono-backdrop)}
@media(min-width:1100px){:root[data-theme="dark"] .sheet{box-shadow:0 0 0 1px color-mix(in srgb,var(--brand-ink) 55%,transparent)}}:root{--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}
::selection{background:var(--brand-ink);color:var(--brand-bg)}
.sw-wrap{padding-inline:clamp(18px,3vw,40px)}
/* the bar: wordmark left, mono navigation and controls right */
.sw-top{display:flex;align-items:center;gap:28px;height:64px;padding-inline:clamp(18px,3vw,40px);border-bottom:1px solid var(--brand-line);background:var(--brand-bg);position:relative;z-index:3}
.sw-logo{display:flex;align-items:center;height:100%;color:var(--brand-ink);text-decoration:none}
.sw-logo img{display:block;height:21px;width:auto}
.sw-logo .dark,:root[data-theme="dark"] .sw-logo .light{display:none}:root[data-theme="dark"] .sw-logo .dark{display:block}
.sw-label,.sw-nav,.sw-action,.sw-outline,.theme-toggle{font:400 11px var(--brand-mono);letter-spacing:.14em;text-transform:uppercase}
.sw-label{color:var(--brand-muted)}
.sw-nav{display:flex;align-items:center;gap:26px}
.sw-nav a,.sw-nav button{background:none;border:0;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--brand-ink);opacity:.6;cursor:pointer;text-decoration:none;white-space:nowrap}
.sw-nav a:hover,.sw-nav button:hover,.sw-nav [aria-current]{opacity:1}
.sw-nav [aria-current]::before{content:'> '}
.theme-toggle{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border:0;border-left:1px solid var(--brand-line);padding:0 0 0 18px;background:none;color:var(--brand-ink);cursor:pointer;flex:none}
.theme-toggle:hover{color:var(--brand-accent)}.theme-toggle[hidden]{display:flex;visibility:hidden}
/* the primary action: a vermilion block with a hard offset shadow and an arrow; the secondary an outlined cobalt box */
.sw-action,.sw-outline{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 20px;font-weight:500;letter-spacing:.12em;text-decoration:none;cursor:pointer;white-space:nowrap;border-radius:0}
.sw-action{background:var(--brand-accent);border:1px solid var(--brand-accent);color:var(--brand-accent-ink);box-shadow:5px 5px 0 0 var(--brand-ink);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.sw-action::after{content:'→'}
.sw-action:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 0 var(--brand-ink)}
.sw-action:active{transform:translate(5px,5px);box-shadow:0 0 0 0 var(--brand-ink)}
.sw-action:disabled{opacity:.5;cursor:wait;transform:none;box-shadow:5px 5px 0 0 var(--brand-ink)}
.sw-outline{background:none;border:1px solid var(--brand-second);color:var(--brand-second)}
.sw-outline:hover{background:var(--brand-second);color:var(--brand-bg)}
.sw-outline:disabled{opacity:.5;cursor:wait}
:is(.sw-action,.sw-outline,.sw-nav a,.sw-nav button,.theme-toggle):focus-visible{outline:2px solid var(--brand-second);outline-offset:3px}
/* the band: the one thing a view is about, across the full width of the sheet */
.sw-band{background:var(--brand-block-blue);color:var(--brand-on-block)}
:root[data-theme="dark"] .sw-band{border-block:1px solid color-mix(in srgb,var(--brand-ink) 60%,transparent)}
.sw-display{margin:0;font:500 clamp(40px,5.6vw,92px)/1 var(--brand-sans);letter-spacing:-.055em;text-transform:none}
.sw-footer{display:flex;flex-wrap:wrap;gap:8px 26px;padding:26px clamp(18px,3vw,40px) 34px;border-top:1px solid var(--brand-line);color:var(--brand-muted)}
@media(max-width:560px){.sw-logo img{height:17px}.sw-top{gap:16px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* the one wordmark: the Stackworks dot-matrix mark, drawn in the ink of the theme it sits in */
.console-wordmark{display:block;height:21px;aspect-ratio:5900/700;background:currentColor;-webkit-mask:url(/console/stackworks.svg) no-repeat center/contain;mask:url(/console/stackworks.svg) no-repeat center/contain}
@media(max-width:560px){.console-wordmark{height:17px}}