/* extracted from opener/index.html by ops/inline_style_extract.py — linked in the same document position to preserve cascade order */
:root{
    --mono:ui-monospace,"Cascadia Code","SF Mono",Menlo,monospace;--serif:"Iowan Old Style","Palatino Linotype",Georgia,serif;
    
          /* muted gold — soft, not blaring */
        /* green   — actions / go */
       /* teal    — movement / navigation */
        /* sand    — numbers / topics / routing */
        /* lavender — tabs: account / social */
       /* coral   — edit keys: undo/cut/copy/paste */
    
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  /* The site header (header.gnav + .gtrail) is injected at runtime by glee-header.js
     ABOVE the full-height panels below. Sizing those panels height:100% therefore made
     header + panel exceed the viewport (89px overflow at 1280x800, 241px at 390x844)
     and body{overflow:hidden} clipped the excess with no way to scroll to it — the
     numbered topic doors 4-6 were unreachable. Body is a flex column so the injected
     header keeps its natural height and the panel absorbs exactly what is left, at any
     header height. Fixed-position children (#rain, #veil, .patina-*) are out of flow
     and unaffected. */
  body{background:var(--bg);color:var(--ink);font-family:var(--mono);-webkit-font-smoothing:antialiased;overflow:hidden;display:flex;flex-direction:column}
  body>header.gnav,body>.gtrail{flex:none}
  /* The injected site nav's open dropdown (.gpanel) is 936px tall at 390x844 and starts
     at y=127, so it runs past the viewport. Every other page scrolls the body and can
     reach it; this page sets body{overflow:hidden}, so nothing scrolls and the panel's
     lower entries are simply unreachable — measured 2026-08-15 against the live page,
     /research-outputs/ sat at y=919 and forcing every ancestor scrollTop to its maximum
     moved it zero pixels. Cap the panel to the space under the header and let it scroll
     itself; reachability is restored without giving the BIOS page a body scrollbar.
     Desktop is unaffected (the panel already fits). Scoped here, not in glee-bios.js:
     the clipping comes from this page's overflow rule, not from the shared header. */
  header.gnav .gpanel{max-height:calc(100dvh - 9rem);overflow-y:auto;overscroll-behavior:contain}
  #rain{position:fixed;inset:0;z-index:0}
  #veil{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 85% at 50% 45%,transparent 26%,rgba(0,0,0,.58) 68%,rgba(0,0,0,.9))}
  .shell{position:relative;z-index:2;flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
  .topbar{display:flex;align-items:center;gap:var(--space-12);padding:var(--space-12) var(--space-24);font-size:var(--text-12);color:var(--faint);letter-spacing:.05em}
  .brand{display:flex;align-items:center;gap:var(--space-8);color:var(--sand);font-weight:600;letter-spacing:.14em}
  .brand .dot{width:9px;height:9px;border-radius:var(--radius-2);background:var(--sand);transform:rotate(45deg)}
  .topbar .right{margin-left:auto;color:var(--move)}
  .stage{flex:1;display:grid;place-items:center;padding:var(--space-12) var(--space-16) var(--space-4);min-height:0}
  #stage{width:100%;height:100%}
  .dock{flex:none;padding:var(--space-8) var(--space-16) var(--space-12);border-top:1px solid var(--edge)}
  /* bottom-right corner is reserved for the Companion cluster
     (210px nav/keys column + up to 400px companion-open + margins) — undersizing this
     makes the BIOS's own collision-avoidance (fixedTopUnder/settleBottom) think the
     dock bar overlaps the Navigator and shove it upward off the bottom edge. */
  @media(min-width:900px){ .dock{padding-right:var(--dock-pad-right, 610px)} }
  .files{display:flex;flex-wrap:wrap;gap:var(--space-8);overflow-x:auto;padding:var(--space-8) var(--space-8) var(--space-8)}
  .fbtn{flex:none;min-width:150px;display:flex;align-items:center;gap:var(--space-8);padding:var(--space-12) var(--space-12);border:1px solid var(--edge);border-radius:var(--radius-8);background:rgba(14,15,17,.7);color:var(--ink);font-family:var(--mono);font-size:var(--text-13);cursor:pointer;text-align:left;transition:all .16s}
  .fbtn:hover{border-color:var(--sand);transform:translateY(var(--gm-lift));background:color-mix(in srgb, var(--sand) 5%, transparent)}
  .fbtn .n{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:var(--radius-2);background:color-mix(in srgb, var(--sand) 13%, transparent);color:var(--sand);font-size:var(--text-11);font-weight:700;flex:none}
  /* social/account overlay — one panel, two switchable tabs */
  .sa-tabs{display:flex;gap:var(--space-4);margin-bottom:var(--space-12)}
  .sa-tab{font-family:var(--mono);font-size:var(--text-12);padding:var(--space-8) var(--space-12);border-radius:var(--radius-8);border:1px solid var(--edge2);background:color-mix(in srgb, var(--tab) 6%, transparent);color:var(--mist);cursor:pointer}
  .sa-tab.active{border-color:var(--tab);color:var(--tab);background:color-mix(in srgb, var(--tab) 14%, transparent)}
  .sa-pane{display:none;color:var(--mist);font-size:var(--text-14);line-height:1.6}
  .sa-pane.on{display:block}
  /* home pane (the pitch) — environment content */
  .home{padding:var(--space-2)}
  .boot{color:var(--move);font-size:var(--text-13);margin-bottom:var(--space-16)}
  .promise{font-family:var(--serif);font-size:clamp(var(--text-20),3vw,var(--text-28));line-height:1.1;color:var(--sand);margin:var(--space-2) 0 var(--space-12)}
  .promise .pr{color:var(--act);font-family:var(--mono);font-size:var(--text-10);margin-right:var(--space-4)}
  .sub{color:var(--mist);font-size:var(--text-16);line-height:1.55;max-width:60ch;margin-bottom:var(--space-16)} .sub b{color:var(--ink);font-weight:600}
  .badges{display:flex;gap:var(--space-8);flex-wrap:wrap;margin-bottom:var(--space-12)}
  .badge{font-size:var(--text-11);letter-spacing:.11em;text-transform:uppercase;padding:var(--space-4) var(--space-8);border:1px solid var(--edge2);border-radius:var(--radius-8);color:var(--move)}
  .badge.gold{color:var(--sand);border-color:color-mix(in srgb, var(--sand) 35%, transparent)}
  .badge.welcome{color:var(--act);border-color:color-mix(in srgb, var(--act) 35%, transparent);font-weight:600}
  .howto{font-size:var(--text-13);color:var(--mist);line-height:1.6;margin-bottom:var(--space-16);padding:var(--space-8) var(--space-12);border-left:2px solid var(--sand);background:color-mix(in srgb, var(--sand) 4%, transparent);border-radius:0 var(--radius-8) var(--radius-8) 0} .howto b{color:var(--ink)}
  .cmdrow{display:flex;align-items:center;gap:var(--space-8);flex-wrap:wrap}
  .go{font-family:var(--mono);font-weight:700;font-size:var(--text-14);padding:var(--space-12) var(--space-16);border-radius:var(--radius-8);background:var(--act);color: var(--bg);border:1px solid var(--act);cursor:pointer}
  .go:hover{background:var(--sand-hi);border-color:var(--sand-hi)}
  .ghost{font-family:var(--mono);font-size:var(--text-14);padding:var(--space-12) var(--space-16);border-radius:var(--radius-8);background:color-mix(in srgb, var(--move) 5%, transparent);border:1px solid var(--edge2);color:var(--ink);cursor:pointer}
  .qbadge{display:inline-block;background:var(--act);color: var(--bg);border-radius:var(--radius-2);padding:var(--space-2) var(--space-4);font-size:var(--text-13);margin-right:var(--space-8);font-weight:700} .qbadge.alt{background:color-mix(in srgb, var(--move) 16%, transparent);color:var(--move)}
  /* the-unmade boot screen — GLEE art + CLI status header (the hero) */
  .gart{font-family:var(--mono);color:var(--act);line-height:1.02;font-size:clamp(var(--text-10),1.02vw,var(--text-12));white-space:pre;margin:var(--space-2) 0 var(--space-8);text-shadow:0 0 14px color-mix(in srgb, var(--act) 25%, transparent);overflow-x:auto}
  /* GLEE logo — hollow letters with the words raining inside (give/live/experience/enjoy) */
  .glogo{width:min(300px,44vw);height:auto;display:block;margin:var(--space-2) 0 var(--space-8);filter:drop-shadow(0 0 6px color-mix(in srgb, var(--act) 22%, transparent))}
  .glogo .lout{fill:none;stroke:var(--act);stroke-width:2.4;stroke-linejoin:miter;stroke-linecap:square;filter:drop-shadow(0 0 4px color-mix(in srgb, var(--act) 35%, transparent))}
  .glogo .fc{font-family:var(--mono);font-size:var(--text-14);font-weight:700;fill:var(--act);text-anchor:middle;dominant-baseline:central;opacity:0;filter:drop-shadow(0 0 3px color-mix(in srgb, var(--act) 60%, transparent))}
  @keyframes fcflash{0%{opacity:0}10%{opacity:1}78%{opacity:1}100%{opacity:0}}
  .gsub{color:var(--mist);font-size:var(--text-12);letter-spacing:.04em;margin:0 0 var(--space-16)}
  .ginfo{font-family:var(--mono);font-size:var(--text-13);line-height:1.95;margin:0 0 var(--space-16);padding:var(--space-12) var(--space-16);border:1px solid var(--edge);border-radius:var(--radius-8);background:rgba(255,255,255,.012)}
  .ginfo .k{color:var(--faint);display:inline-block;width:70px}
  .ginfo .v{color:var(--ink)} .ginfo .g{color:var(--act)} .ginfo .t{color:var(--move)}
  .tiers{display:flex;flex-direction:column;gap:var(--space-8);margin:0 0 var(--space-16)}
  .tier{display:flex;align-items:baseline;gap:var(--space-12);font-family:var(--mono);font-size:var(--text-13)}
  .tier .tn{font-weight:700;text-transform:uppercase;font-size:var(--text-11);letter-spacing:.08em;min-width:42px}
  .tier .tn.g{color:var(--act)} .tier .tn.f{color:var(--sand)}
  .tier .td{color:var(--mist)}
  /* GLEE acronym reveal — Give · Live · Experience · Enjoy, w/ AI+human vignettes */
  .ghero{display:flex;gap:var(--space-24);align-items:center;flex-wrap:wrap;margin:var(--space-2) 0 var(--space-4)}
  .gacro{display:flex;flex-direction:column;gap:var(--space-8)}
  .aw{display:flex;align-items:center;gap:var(--space-12);font-family:var(--mono);font-size:var(--text-16);color:var(--ink);letter-spacing:.01em}
  .aw .word{min-width:120px;display:inline-block}
  .aw .al{color:var(--act);font-weight:800;font-size:var(--text-20);text-shadow:0 0 10px color-mix(in srgb, var(--act) 30%, transparent)}
  .aw .av{width:64px;height:42px;color:var(--act);flex:none;animation:avbreath 4s ease-in-out infinite}
  .gacro .aw:nth-child(2) .av{animation-delay:1s} .gacro .aw:nth-child(3) .av{animation-delay:2s} .gacro .aw:nth-child(4) .av{animation-delay:3s}
  @keyframes avbreath{0%,100%{opacity:.5}50%{opacity:.95}}
  /* the menagerie — a 4-row parade of GLEE's beings: animals · aliens · robots · humans · wild things */
  .gmenagerie{flex:1 1 240px;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(4,auto);gap:var(--space-8) var(--space-4);align-items:end;justify-items:center;min-width:0}
  .fig{height:34px;flex:none;transform-origin:bottom center;cursor:grab;touch-action:none;animation:figpulse 4.6s ease-in-out infinite both;animation-delay:var(--d,0s);will-change:transform,opacity}
  .fig:active{cursor:grabbing}
  .figfloat{position:fixed;left:0;top:0;z-index:9999;margin:0!important;animation:none!important;pointer-events:none}
  .platform{position:fixed;z-index:9998;pointer-events:none;color:var(--act);font-family:var(--mono);font-size:var(--text-10);line-height:11px;letter-spacing:2px;white-space:pre;opacity:.8}
  .pfall{position:fixed;z-index:9998;pointer-events:none;color:var(--act);font-family:var(--mono);font-size:var(--text-10);transition:transform .5s linear,opacity .3s}
  .fig:hover{animation:fighi .6s ease-in-out}
  /* a pulse of life that travels the parade — each being reacts as it passes */
  @keyframes figpulse{0%{transform:translateY(0) scale(1);opacity:.8}5%{transform:translateY(-6px) scale(1.06);opacity:1}10%{transform:translateY(0) scale(1)}14%{transform:translateY(-2px);opacity:.95}19%,100%{transform:translateY(0);opacity:.8}}
  /* a livelier wiggle when the cursor comes near */
  @keyframes fighi{0%{transform:translateY(0) rotate(0)}25%{transform:translateY(-9px) rotate(-9deg)}50%{transform:translateY(-4px) rotate(9deg)}75%{transform:translateY(-8px) rotate(-5deg)}100%{transform:translateY(0) rotate(0)}}
  @media(prefers-reduced-motion:reduce){.fig{animation:none}}
  /* mobile gate — the keyboard/WASD BIOS shell isn't built for touch yet.
     Show a plain message instead of a half-working desktop UI. */
  .mobile-gate{display:none}
  @media(max-width:760px){
    .shell{display:none}
    #glee-companion{display:none!important}
    .mobile-gate{
      display:flex;position:relative;z-index:2;flex:1 1 auto;min-height:0;flex-direction:column;
      align-items:center;justify-content:center;text-align:center;padding:var(--space-24) var(--space-24);gap:var(--space-12)
    }
    .mobile-gate .brand{display:flex;align-items:center;gap:var(--space-8);color:var(--sand);font-weight:600;letter-spacing:.14em;font-size:var(--text-16)}
    .mobile-gate .brand .dot{width:9px;height:9px;border-radius:var(--radius-2);background:var(--sand);transform:rotate(45deg)}
    .mobile-gate p{color:var(--mist);font-size:var(--text-16);line-height:1.55;max-width:38ch}
    .mobile-gate .hint{color:var(--faint);font-size:var(--text-13)}
    .mobile-gate .mg-go{margin-top:var(--space-4);font-family:var(--mono);font-weight:700;font-size:var(--text-16);padding:var(--space-12) var(--space-24);border-radius:var(--radius-8);background:var(--act);color: var(--bg);text-decoration:none}
  }