/* PORTED VERBATIM from the Liberty OS prototype. Generated by os_ui/extract_design.py.
   DO NOT HAND-EDIT. Every value here is a copy of the design, not a reading of it - editing by hand
   reintroduces exactly the drift this file exists to remove. When the design changes, re-run the
   extractor against the new prototype. */


@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("/os/fonts/bricolage-grotesque-400-88b400b4.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("/os/fonts/bricolage-grotesque-400-32bae32f.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("/os/fonts/bricolage-grotesque-400-39dbc6ea.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("/os/fonts/bricolage-grotesque-400-88b400b4.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("/os/fonts/bricolage-grotesque-400-32bae32f.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("/os/fonts/bricolage-grotesque-400-39dbc6ea.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("/os/fonts/bricolage-grotesque-400-88b400b4.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("/os/fonts/bricolage-grotesque-400-32bae32f.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("/os/fonts/bricolage-grotesque-400-39dbc6ea.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fragment Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/os/fonts/fragment-mono-400-7a7036e8.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Fragment Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/os/fonts/fragment-mono-400-4b9edba0.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fragment Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/os/fonts/fragment-mono-400-0ad182ee.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/os/fonts/schibsted-grotesk-400-61bab310.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/os/fonts/schibsted-grotesk-400-f003f8d3.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/os/fonts/schibsted-grotesk-400-61bab310.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/os/fonts/schibsted-grotesk-400-f003f8d3.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/os/fonts/schibsted-grotesk-400-61bab310.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/os/fonts/schibsted-grotesk-400-f003f8d3.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/os/fonts/schibsted-grotesk-400-61bab310.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/os/fonts/schibsted-grotesk-400-f003f8d3.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
      /* paper, not blue-white: warm neutrals read as document, not app */
      --canvas:#F2F2EE; --canvas-2:#EDECE7;
      --surface:#FFFFFF; --surface-2:#FAFAF7; --surface-3:#EFEEE9;
      --line:#E1E0DA; --line-soft:#ECEBE5; --line-strong:#CBC9C2;
      --ink:#16181D; --ink-2:#4C5052; --ink-3:#7C8083; --ink-4:#A6A9AB;
      /* one accent, deepened, spent sparingly */
      --brand:#2B3A66; --brand-ink:#2B3A66; --brand-soft:#ECEEF3; --brand-hover:#1D2947; --brass:#C9A45C;
      --accent-quiet:#6B7A9E;
      --iris-soft:#F5F4F1; --iris-line:#DCD9D3; --btn-line:#D3D0CA;
      --glass:rgba(252,251,249,.92); --glass-line:rgba(255,255,255,.55);
      --wall:radial-gradient(85% 70% at 78% -12%,rgba(126,146,208,.3),transparent 56%),radial-gradient(50% 70% at 8% 108%,rgba(201,164,92,.14),transparent 60%),linear-gradient(158deg,#232B47 0%,#161B32 46%,#0B0F1E 100%);
      /* status: earth tones, never primaries */
      --pos:#3A7561; --pos-soft:rgba(58,117,97,.10);
      --caut:#A67C33; --caut-soft:rgba(166,124,51,.12);
      --crit:#93413B; --crit-soft:rgba(147,65,59,.10);
      /* chrome is deep harbor — inked Liberty blue, never pure black */
      --chrome-1:#1F2542; --chrome-2:#1F2542; --chrome-dock:#181C38; --chrome-status:#111428;
      /* radii: architectural, not friendly */
      --r1:3px; --r2:6px; --r3:9px; --r4:12px;
      /* depth: hairlines do the work; shadow only where things truly float */
      --sh1:0 1px 1px rgba(23,25,27,.03);
      --sh2:0 2px 8px rgba(23,25,27,.07);
      --sh3:0 14px 30px rgba(23,25,27,.15);
      --sh4:0 32px 72px rgba(23,25,27,.30);
      --chrome-edge:0 1px 0 rgba(23,25,27,.14);
      --dock-edge:inset 0 1px 0 rgba(255,255,255,.05);
      --recess:inset 0 1px 0 rgba(23,25,27,.07);
      --ease:cubic-bezier(.22,1,.36,1);
      --ui:"Schibsted Grotesk",-apple-system,"Segoe UI",system-ui,sans-serif;
      --disp:"Bricolage Grotesque","Schibsted Grotesk",system-ui,sans-serif;
      --mono:"Fragment Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
    }

@keyframes lospulse{0%,100%{opacity:.5}50%{opacity:.85}}
@keyframes losfade{from{opacity:0}to{opacity:1}}
@keyframes losIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes losPop{from{opacity:0;transform:scale(.985) translateY(-2px)}to{opacity:1;transform:none}}
@keyframes losSlideR{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes losbar{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes losRail{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes losStart{from{opacity:0;transform:translate(-50%,18px) scale(.985)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes losWin{from{opacity:0;transform:translateY(12px) scale(.992)}to{opacity:1;transform:none}}
@keyframes irisGlow{0%,100%{opacity:.62}50%{opacity:1}}
@keyframes irisThink{0%{transform:translateX(-100%)}100%{transform:translateX(320%)}}
@keyframes irisDot{0%,80%,100%{opacity:.2}40%{opacity:1}}

.noscroll{scrollbar-width:none;-ms-overflow-style:none}
.noscroll::-webkit-scrollbar{height:0;width:0;display:none}
/* Interaction rules CAPTURED FROM THE RENDERED PROTOTYPE, not from its source file.
 *
 * The DesignCanvas runtime synthesises these classes at load time from inline :hover styles, so
 * they do not exist anywhere in the .html to extract - reading the file alone silently loses every
 * hover, focus and active state in the design. They are captured once from the running prototype
 * and appended verbatim by os_ui/extract_design.py, so re-extracting never drops them.
 *
 * To refresh after a design change, run this in the console on the rendered prototype and paste the
 * result below:
 *
 *   [...document.styleSheets].flatMap(s => { try { return [...s.cssRules] } catch(e) { return [] } })
 *     .map(r => r.cssText).filter(t => /^\.(scp[0-9a-z]+|noscroll)\b/.test(t)).join('\n')
 */
.scp1:hover { background: rgba(127, 127, 127, 0.25) !important; }
.scp2:hover { background: rgba(255, 255, 255, 0.1) !important; color: rgb(255, 255, 255) !important; }
.scp3:hover { background: rgb(179, 66, 58) !important; color: rgb(255, 255, 255) !important; }
.scp4:hover { border-color: var(--ink-3) !important; color: var(--ink) !important; }
.scp5:focus-within { border-color: var(--ink-3) !important; }
.scp6:hover { opacity: 0.82 !important; }
.scp7:hover { color: var(--ink) !important; text-decoration-color: var(--ink-3) !important; }
.scp8:hover { color: var(--crit) !important; }
.scp9:hover { box-shadow: var(--sh2) !important; }
.scpa:hover { opacity: 0.85 !important; }
.scpb:hover { color: var(--brand-ink) !important; }
.scpc:hover { border-color: var(--accent-quiet) !important; }
.scpd:hover { background: var(--surface-3) !important; }
.scpe:hover { background: var(--surface-2) !important; }
.scpf:hover { border-color: var(--accent-quiet) !important; box-shadow: var(--sh2) !important; }
.scpg:hover { background: var(--brand) !important; color: rgb(255, 255, 255) !important; }
.scph:focus { border-color: var(--accent-quiet) !important; box-shadow: 0 0 0 3px var(--brand-soft) !important; }
.scpi:hover { border-color: var(--brand-ink) !important; }
.scpj:hover { border-color: var(--accent-quiet) !important; background: var(--iris-soft) !important; }
.scpk:focus { box-shadow: 0 0 0 3px var(--brand-soft) !important; }
.scpl:hover { text-decoration: underline !important; }
.scpm:hover { background: var(--accent-quiet) !important; }
.scpn:hover { text-decoration-color: var(--accent-quiet) !important; }
.scpo:hover { color: var(--brand-ink) !important; background: var(--brand-soft) !important; }
.scpp:hover { background: var(--crit-soft) !important; }
.scpq:hover { box-shadow: var(--sh3) !important; transform: translateY(-2px) !important; }
.scpr:hover { background: var(--brand-soft) !important; color: var(--brand-ink) !important; }
.scps:hover { background: rgba(0, 0, 0, 0.25) !important; color: rgb(255, 255, 255) !important; }
.scpt:hover { background: rgba(255, 255, 255, 0.14) !important; transform: translateY(-2px) !important; }
.scpu:hover { background: rgba(255, 255, 255, 0.12) !important; transform: translateY(-2px) !important; }
.scpv:hover { color: rgb(255, 255, 255) !important; }
.scpw:hover { background: rgba(255, 255, 255, 0.09) !important; }
.scpx:hover { background: rgba(255, 255, 255, 0.1) !important; }
.scpy:hover { background: rgba(255, 255, 255, 0.13) !important; }
.scpz:hover { background: rgba(255, 255, 255, 0.08) !important; }
.scp10:hover { background: var(--iris-soft) !important; }
.scp11:hover { background: var(--crit) !important; }
.scp12:hover { background: var(--iris-soft) !important; color: var(--brand-ink) !important; }
.noscroll { scrollbar-width: none; }
.noscroll::-webkit-scrollbar { height: 0px; width: 0px; display: none; }