/* ============================================================
   MYOFFICEOS — OS-style cockpit
   - Icon-only dock navigation (top)
   - Panel-based content (one screen = one panel)
   - Slide transitions between panels
   - Keyboard nav: ←/→, 1-8, j/k
============================================================ */

:root{
  --bg:          #08090C;
  --bg-1:        #11131A;
  --bg-2:        #181B24;
  --bg-3:        #21252F;
  --bg-elev:     #1A1D27;
  --bg-glass:    rgba(15,18,26,.78);

  --t:           #FAFAF7;
  --t-soft:      #C2C6CE;
  --t-mute:      #7C8290;
  --t-faint:     #4A505B;

  --line:        rgba(255,255,255,.06);
  --line-2:      rgba(255,255,255,.12);
  --line-3:      rgba(255,255,255,.22);

  --lime:        #C5F02B;
  --lime-2:      #D8FF61;
  --lime-soft:   rgba(197,240,43,.10);
  --lime-glow:   rgba(197,240,43,.40);

  --indigo:      #818CF8;
  --indigo-soft: rgba(129,140,248,.12);
  --cyan:        #67E8F9;
  --cyan-soft:   rgba(103,232,249,.10);
  --good:        #56D687;
  --warn:        #FFB347;

  --f-body:      'Inter', system-ui, -apple-system, sans-serif;
  --f-display:   'Sora', 'Inter', system-ui, sans-serif;
  --f-mono:      'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --pad-x:       clamp(1rem, 3.5vw, 3rem);
  --maxw:        1240px;
  --gap:         clamp(.7rem, 1.2vw, 1.2rem);
  --r:           14px;
  --r-sm:        10px;

  --header-h:    62px;
  --hud-h:       38px;

  --e:           cubic-bezier(.22,1,.36,1);
  --e-soft:      cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--f-body);
  font-feature-settings:"ss01","cv11";
  background:var(--bg);
  color:var(--t);
  font-size:15.5px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
  height:100vh;
}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0;margin:0}
::selection{background:var(--lime);color:var(--bg)}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:6px}

.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--lime);color:var(--bg);
  padding:.55rem .95rem;border-radius:6px;
  font-weight:600;font-size:.82rem;z-index:1000;
}
.skip:focus{left:1rem;top:1rem}

/* atmosphere */
body::before{
  content:"";
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(40% 30% at 90% 4%, rgba(197,240,43,.07), transparent 60%),
    radial-gradient(45% 35% at 4% 96%, rgba(129,140,248,.06), transparent 60%);
}
body::after{
  content:"";
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.14;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .035 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
}