:root[data-skin="real"] {
  color-scheme: light;
  --desk: #e7e7ea; --desk2: #dadade;
  --plat: #ffffff; --plat-lt: #ffffff; --plat-dk: #8c8c95; --plat-mid: #ececef; --edge: #d6d6db;
  --ink: #16161a; --muted: #5d5d66; --field: #f6f6f8; --sel: #6d4fd0; --sel-ink: #ffffff;
  --ok: #1d7f3a; --warn: #9a6400; --bad: #b3261e; --link: #5b3fc4;
  --ui: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif; --body: var(--ui);
  --line: rgba(22, 22, 26, .08); --lift: 0 1px 2px rgba(22, 22, 26, .06), 0 8px 24px rgba(22, 22, 26, .07);
  --bar: rgba(255, 255, 255, .78); --title-line: rgba(22, 22, 26, .07);
}
@media (prefers-color-scheme: dark) { :root[data-skin="real"]:not([data-theme="light"]) {
  color-scheme: dark; --desk: #0d0d10; --desk2: #131317;
  --plat: #18181c; --plat-lt: #222228; --plat-dk: #6f6f78; --plat-mid: #222228; --edge: #2c2c33;
  --ink: #ececf0; --muted: #a3a3ad; --field: #111114; --sel: #a78bfa; --sel-ink: #0d0d10; --link: #c4b2ff;
  --ok: #6fd08f; --warn: #f0b64a; --bad: #ff8a80;
  --line: rgba(255, 255, 255, .08); --lift: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .35);
  --bar: rgba(13, 13, 16, .78); --title-line: rgba(255, 255, 255, .06); } }
:root[data-skin="real"][data-theme="dark"] {
  color-scheme: dark; --desk: #0d0d10; --desk2: #131317;
  --plat: #18181c; --plat-lt: #222228; --plat-dk: #6f6f78; --plat-mid: #222228; --edge: #2c2c33;
  --ink: #ececf0; --muted: #a3a3ad; --field: #111114; --sel: #a78bfa; --sel-ink: #0d0d10; --link: #c4b2ff;
  --ok: #6fd08f; --warn: #f0b64a; --bad: #ff8a80;
  --line: rgba(255, 255, 255, .08); --lift: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .35);
  --bar: rgba(13, 13, 16, .78); --title-line: rgba(255, 255, 255, .06);
}

:root[data-skin="real"] body { background: var(--desk); background-image: none; font: 14px/1.5 var(--body); }


:root[data-skin="real"] .menubar { background: var(--bar); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line); font: 600 13px var(--ui); color: var(--ink); }
:root[data-skin="real"] .menubar button.m { border-radius: 6px; }
:root[data-skin="real"] .menubar button.m[aria-current="true"] { background: none; color: var(--ink); box-shadow: inset 0 -2px 0 var(--sel); }
:root[data-skin="real"] .menubar button.m:hover { background: var(--plat-mid); color: var(--ink); }
:root[data-skin="real"] .menubar .apple { color: var(--sel); }


:root[data-skin="real"] .win { background: var(--plat); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--lift); overflow: hidden; }
:root[data-skin="real"] .win > .title { height: var(--title-h); margin: 0; padding: 0 12px; background: var(--plat); border-bottom: 1px solid var(--title-line); }
:root[data-skin="real"] .win > .title h2 { margin: 0; padding: 0; background: none; color: var(--ink); font: 600 13.5px var(--ui); line-height: var(--title-h); max-width: 80%; }
:root[data-skin="real"] .win > .title .box { width: 12px; height: 12px; border-radius: 50%; background: var(--plat-mid); border: 1px solid var(--edge); box-shadow: none; order: 2; margin-left: auto; }
:root[data-skin="real"] .win > .title .count { position: static; order: 1; margin-left: auto; }
:root[data-skin="real"] .win > .body { margin: 0; padding: 12px 14px; background: var(--plat); border-top: 0; }
:root[data-skin="real"] .win.inset > .body { background: var(--field); border: 0; box-shadow: none; }


:root[data-skin="real"] .btn { border: 1px solid var(--edge); border-radius: 8px; background: var(--plat); color: var(--ink); font: 600 13px var(--ui); box-shadow: 0 1px 1px rgba(0, 0, 0, .04); }
:root[data-skin="real"] .btn:hover { background: var(--plat-mid); }
:root[data-skin="real"] .btn:active { background: var(--plat-mid); color: var(--ink); transform: scale(.98); }
:root[data-skin="real"] .btn:focus-visible { outline: 2px solid var(--sel); outline-offset: 2px; }
:root[data-skin="real"] .btn.default { margin: 0; border-color: transparent; background: var(--sel); color: var(--sel-ink); box-shadow: none; }
:root[data-skin="real"] .btn.ok { color: var(--ok); } :root[data-skin="real"] .btn.no { color: var(--bad); }
:root[data-skin="real"] .btn.default.ok, :root[data-skin="real"] .btn.default.no { color: var(--sel-ink); }
:root[data-skin="real"] .field, :root[data-skin="real"] textarea.field { border: 1px solid var(--edge); border-radius: 8px; background: var(--field); box-shadow: none; font: 14px var(--body); }
:root[data-skin="real"] .field:focus, :root[data-skin="real"] textarea.field:focus { outline: 2px solid var(--sel); outline-offset: 0; }
:root[data-skin="real"] .tag { border-radius: 6px; font: 600 11px var(--ui); }
:root[data-skin="real"] .lbl { color: var(--sel); letter-spacing: .02em; }
:root[data-skin="real"] .dash .kpi, :root[data-skin="real"] .dash .chart { border-radius: 10px; border: 1px solid var(--line); }
:root[data-skin="real"] .toast { border-radius: 10px; border-color: var(--line); box-shadow: var(--lift); }


:root[data-skin="real"] .dock { background: var(--bar); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
:root[data-skin="real"] .dock button { color: var(--ink); font-family: var(--ui); }
:root[data-skin="real"] .dock button[aria-current="true"] { background: none; color: var(--sel); box-shadow: inset 0 2px 0 var(--sel); }


:root[data-skin="real"] #w-crew .stage { border-color: #000; background: radial-gradient(ellipse 70% 45% at 35% 20%, rgba(167, 139, 250, .12), transparent 70%),
  linear-gradient(#17171c, #09090b); }
:root[data-skin="real"] .office .iso-bg, :root[data-skin="real"] .office .roadster .car img { image-rendering: auto; }

:root[data-skin="real"] .sprite.real3d svg { image-rendering: auto; }
:root[data-skin="real"] .office .actor .sprite.real3d svg { filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .35)); }

:root[data-skin="real"] .stage .office .actor .sprite.real3d svg { width: max(40px, calc(var(--w) * .082)); height: max(40px, calc(var(--w) * .082)); }

:root[data-skin="real"] .real3d .w1, :root[data-skin="real"] .real3d .w2, :root[data-skin="real"] .office .actor.walking .real3d .st { visibility: hidden; }
:root[data-skin="real"] .office .actor.walking .real3d .w1 { animation: real-step .44s steps(1) infinite; }
:root[data-skin="real"] .office .actor.walking .real3d .w2 { animation: real-step .44s steps(1) -.22s infinite; }
@keyframes real-step { 0% { visibility: visible; } 50% { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { :root[data-skin="real"] .office .actor.walking .real3d .st { visibility: visible; } }

:root[data-skin="real"] .office .cat { --cw: max(26px, calc(var(--w) * .043)); }
:root[data-skin="real"] .office .cat .pix { position: relative; width: var(--cw); aspect-ratio: 20 / 16; }
:root[data-skin="real"] .office .cat.left .pix { transform: none; }   
:root[data-skin="real"] .office .cat .st img { position: absolute; left: 50%; top: calc(var(--cw) * .117); width: calc(var(--cw) * .531);
  margin-left: calc(var(--cw) * -.2655); filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .35)); }
:root[data-skin="real"] .office .cat .walk { display: none; position: absolute; left: 50%; bottom: calc(var(--cw) * .0905);
  width: calc(var(--cw) * .859); height: calc(var(--cw) * .649); margin-left: calc(var(--cw) * -.4295);
  background: url(/os/real/crew/cc-walk.webp) 0 0 / 1600% 100% no-repeat; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .35)); }
:root[data-skin="real"] .office .cat.left .walk { transform: scaleX(-1); }
:root[data-skin="real"] .office .cat.walking .walk { display: block; animation: cc-walk 1s steps(16) infinite; }
:root[data-skin="real"] .office .cat.walking .st { visibility: hidden; }
:root[data-skin="real"] .office .cat .f1 { animation: none; }   
:root[data-skin="real"] .office .cat.walking { animation: none; }
:root[data-skin="real"] .office .cat.walking .f2 { display: none; }
@keyframes cc-walk { to { background-position: 106.6667% 0; } }   
@media (prefers-reduced-motion: reduce) { :root[data-skin="real"] .office .cat.walking .walk { display: none; }
  :root[data-skin="real"] .office .cat.walking .st { visibility: visible; } }
:root[data-skin="real"] .office .roadster .car img { filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .35)); }
:root[data-skin="real"] .office .actor .nm { font-family: var(--ui); font-weight: 600; border-radius: 4px; }
:root[data-skin="real"] .office .doortag { font: 600 12px/1 var(--ui); border-radius: 6px; background: rgba(13, 13, 16, .82); color: #ececf0; border: 1px solid rgba(255, 255, 255, .14); }
:root[data-skin="real"] .office .doortag:hover, :root[data-skin="real"] .office .doortag:focus-visible { background: rgba(40, 34, 64, .9); border-color: #a78bfa; }
:root[data-skin="real"] .office .wallsign { border-radius: 4px; }
:root[data-skin="real"] .board, :root[data-skin="real"] .room-pop { border-radius: 12px; }