/* FreeStudio: graphite surfaces, technical linework, electric orange. */
:root {
  color-scheme: var(--theme-scheme, dark);
  --ink: var(--workspace-color-0);
  --muted: var(--workspace-color-1);
  --paper: var(--workspace-color-2);
  --line: var(--workspace-color-3);
  --accent: var(--workspace-color-4);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--workspace-color-5);
  color: var(--ink);
  font: 14px 'Bahnschrift', 'DIN Alternate', 'Microsoft YaHei', sans-serif;
}
button, input { font: inherit; color: inherit; }
button, a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
button { border: 0; }
[hidden] { display: none !important; }
::selection { background: var(--accent); color: var(--workspace-color-6); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.icon { width: 20px; height: 20px; flex-shrink: 0; }
.svg-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link { position: fixed; top: -80px; left: 15px; padding: 14px; background: var(--accent); color: var(--workspace-color-7); z-index: 20; }
.skip-link:focus { top: 12px; }
.menubar { height: 65px; margin: 0 36px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: flex; align-items: center; gap: 13px; font-size: 17px; font-weight: 600; letter-spacing: -.4px; }
.brand-mark { color: var(--accent); font-size: 27px; font-weight: 800; letter-spacing: -4px; margin-right: 7px; }
.menu-divider { width: 1px; height: 15px; background: var(--line); margin: 0 5px; }
.menu-caption { font-size: 11px; color: var(--muted); font-weight: 400; letter-spacing: 1px; }
.menu-right { display: flex; gap: 26px; align-items: center; font-size: 11px; color: var(--workspace-color-8); }
.menu-right a { border-bottom: 1px solid var(--workspace-color-9); padding-bottom: 2px; }
.menu-right a:hover { color: var(--accent); }
.byline { color: var(--muted); }
.desktop { max-width: 1540px; margin: auto; padding: 0 36px; }
.desktop-intro { min-height: 388px; display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: 25px; padding: 38px 0 34px; }
.eyebrow { display: flex; align-items: center; gap: 11px; font-size: 10px; letter-spacing: 1.8px; color: var(--workspace-color-10); margin: 0 0 21px; }
.signal-square { width: 7px; height: 7px; background: var(--accent); }
.eyebrow-index { color: var(--workspace-color-11); margin-left: 7px; }
h1 { font-family: 'Impact', 'Arial Narrow', 'Bahnschrift', sans-serif; font-weight: 900; font-size: clamp(78px, 8.3vw, 133px); line-height: .83; letter-spacing: -3px; margin: 0; }
h1 > span { display: block; }
.title-second { margin-left: 92px; }
.title-period { color: var(--accent); }
.workspace-window { background: var(--paper); border: 1px solid var(--workspace-color-12); position: relative; animation: arrive .5s ease-out both; }
.workspace-window::before { content: ''; position: absolute; top: -1px; left: -1px; width: 38px; height: 3px; background: var(--accent); }
.window-chrome { height: 36px; padding: 0 17px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--workspace-color-12); font-size: 9px; letter-spacing: 1.2px; background: var(--workspace-color-13); }
.window-index { color: var(--accent); }
#window-title { display: flex; gap: 8px; align-items: center; color: var(--workspace-color-14); font-size: 10px; letter-spacing: .4px; }
#window-title .icon { width: 14px; height: 14px; }
.window-caption { color: var(--workspace-color-15); font-size: 8px; }
.window-layout { display: grid; grid-template-columns: 188px minmax(0,1fr); }
.sidebar { display: flex; flex-direction: column; padding: 24px 0 15px; background: var(--workspace-color-16); border-right: 1px solid var(--line); }
.sidebar-label { font-size: 9px; letter-spacing: 1px; color: var(--workspace-color-17); margin: 0 19px 21px; }
.category-button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 15px 17px; background: transparent; text-align: left; font-size: 12px; color: var(--workspace-color-18); border-left: 2px solid transparent; transition: background .15s, color .15s; }
.category-button .icon { width: 16px; height: 16px; }
.category-count { margin-left: auto; color: var(--workspace-color-19); font-size: 10px; }
.category-button:hover { background: var(--workspace-color-20); color: var(--workspace-color-21); }
.category-button.active { background: var(--workspace-color-22); border-left-color: var(--accent); color: var(--accent); }
.category-button.active .category-count { color: var(--accent); }
.sidebar-foot { display: flex; gap: 10px; align-items: center; padding: 60px 18px 4px; margin-top: auto; }
.avatar { font-size: 27px; line-height: 1; font-weight: 700; color: var(--workspace-color-23); }
.sidebar-foot strong { font-size: 11px; font-weight: 500; }
.sidebar-foot div > span { display: block; margin-top: 3px; font-size: 9px; color: var(--workspace-color-17); }
.project-area { padding: 24px 25px 0; min-width: 0; scroll-margin-top: 15px; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.breadcrumb { font-size: 9px; color: var(--workspace-color-24); margin: 0 0 9px; }
.breadcrumb > span:first-child { padding: 0 8px; color: var(--workspace-color-25); }
h2 { font-size: 23px; line-height: 1.3; letter-spacing: -.7px; font-weight: 600; margin: 0; }
.heading-dot { font-size: 11px; color: var(--workspace-color-26); letter-spacing: 2px; font-weight: 400; margin-left: 10px; }
.view-switch { display: flex; gap: 3px; }
.view-switch button { display: flex; padding: 9px; color: var(--workspace-color-27); background: transparent; border: 1px solid var(--line); }
.view-switch .icon { width: 16px; height: 16px; }
.view-switch button[aria-pressed=true] { color: var(--accent); border-color: var(--workspace-color-28); background: var(--workspace-color-29); }
.search-row { margin-top: 19px; padding-bottom: 18px; display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.search-box { display: flex; align-items: center; gap: 10px; width: 300px; max-width: 100%; border-bottom: 1px solid var(--workspace-color-30); padding: 8px 0; }
.search-box:focus-within { border-color: var(--accent); }
.search-box .icon { width: 16px; height: 16px; color: var(--workspace-color-31); }
.search-box input { min-width: 0; width: 100%; background: transparent; outline: 0; border: 0; font-size: 11px; }
.search-box input::placeholder { color: var(--workspace-color-32); }
.search-box kbd { font-size: 10px; color: var(--workspace-color-33); border: 1px solid var(--workspace-color-34); padding: 0 5px; }
.open-hint { font-size: 10px; color: var(--workspace-color-35); white-space: nowrap; }
.project-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); align-content: start; min-height: 335px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin-bottom: 22px; }
.project { min-width: 0; position: relative; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .16s; }
.project::after { content: ''; position: absolute; left: -1px; top: -1px; width: 5px; height: 5px; border-top: 1px solid var(--workspace-color-36); border-left: 1px solid var(--workspace-color-36); pointer-events: none; }
.project:hover, .project:focus-within { background: var(--workspace-color-37); }
.project-main { min-height: 154px; display: flex; flex-direction: column; align-items: flex-start; padding: 19px 15px 15px; height: 100%; }
.project-number { font-size: 9px; color: var(--workspace-color-38); position: absolute; top: 13px; right: 14px; }
.app-icon { color: var(--workspace-color-39); display: block; margin-bottom: 17px; transition: transform .18s, color .18s; }
.app-icon .icon { width: 25px; height: 25px; stroke-width: 1.3; }
.project-main:hover .app-icon { color: var(--accent); transform: translateX(4px); }
.project-text { display: block; min-width: 0; }
.project-kind { text-transform: uppercase; font-size: 8px; letter-spacing: 1.6px; color: var(--workspace-color-40); display: block; margin-bottom: 6px; }
.project-name { font-size: 12px; font-weight: 500; line-height: 1.5; display: block; overflow-wrap: anywhere; padding-right: 9px; }
.project-description { font-size: 10px; color: var(--workspace-color-41); line-height: 1.6; display: block; margin-top: 6px; overflow-wrap: anywhere; }
.launch-arrow { position: absolute; bottom: 10px; right: 10px; color: var(--workspace-color-42); font-size: 15px; transition: color .15s, transform .15s; }
.project-main:hover .launch-arrow { color: var(--accent); transform: translate(2px,-2px); }
.project:has(.platform-links) .project-main { height: auto; }
.platform-links { display: flex; gap: 15px; padding: 0 15px 12px; font-size: 10px; }
.platform-links a { color: var(--workspace-color-43); border-bottom: 1px solid var(--workspace-color-44); padding: 2px 0; }
.platform-links a:hover { color: var(--accent); border-color: var(--accent); }
.window-status { min-height: 34px; display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--line); color: var(--workspace-color-45); font-size: 9px; letter-spacing: .7px; }
.window-status span[aria-hidden] { color: var(--accent); margin-left: 7px; }
.desktop-footer { padding: 18px 0 23px; display: flex; justify-content: space-between; align-items: center; gap: 15px; font-size: 9px; color: var(--workspace-color-46); letter-spacing: .5px; }
.dock { display: flex; gap: 3px; border: 1px solid var(--workspace-color-47); padding: 4px; background: var(--workspace-color-48); }
.dock button, .dock a { width: 36px; height: 33px; display: grid; place-items: center; background: transparent; color: var(--workspace-color-49); transition: color .15s, background .15s; }
.dock button:hover, .dock a:hover { background: var(--accent); color: var(--workspace-color-50); }
.dock img { filter: grayscale(1) invert(.8); width: 22px; height: 22px; }
.dock-divider { width: 1px; background: var(--workspace-color-51); margin: 5px; }
.empty-state { min-height: 335px; padding: 70px 10px; border-top: 1px solid var(--line); }
.empty-state > .icon { color: var(--accent); width: 30px; height: 30px; margin-bottom: 20px; }
.empty-state h3 { margin-bottom: 10px; font-size: 20px; }
.empty-state p { color: var(--muted); font-size: 12px; }
.empty-state button { background: var(--accent); color: var(--workspace-color-52); margin-top: 25px; padding: 11px 15px; font-size: 12px; }
.project-grid.list-view { grid-template-columns: 1fr; }
.list-view .project { display: flex; align-items: center; }
.list-view .project-main { min-height: 75px; flex-direction: row; align-items: center; flex: 1; min-width: 0; gap: 20px; padding: 13px 15px; }
.list-view .project-number { position: static; width: 20px; flex-shrink: 0; }
.list-view .app-icon { margin: 0; }
.list-view .project-kind { display: none; }
.list-view .project-text { flex: 1; }
.list-view .project-name { font-size: 13px; }
.list-view .project-description { margin-top: 3px; }
.list-view .launch-arrow { position: static; }
.list-view .platform-links { padding: 12px 15px; }
@keyframes arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 1450px) {
  .desktop-intro { padding: 47px 0; }
  .project-main { min-height: 172px; padding: 20px; }
  .project-name { font-size: 14px; }
  .project-description { font-size: 11px; }
}
@media (max-width: 1100px) {
  .window-layout { grid-template-columns: 165px minmax(0,1fr); }
  .project-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .desktop-intro { min-height: 335px; }

  .title-second { margin-left: 48px; }


}
@media (max-width: 760px) {
  .menubar { margin: 0 20px; height: 57px; }
  .menu-caption, .menu-divider, .byline { display: none; }
  .menu-right { gap: 15px; font-size: 10px; }
  .desktop { padding: 0 20px; }
  .desktop-intro { grid-template-columns: 1.5fr 1fr; gap: 10px; min-height: 300px; padding: 30px 0; }
  .eyebrow { font-size: 8px; letter-spacing: 1px; }
  .eyebrow-index { display: none; }
  h1 { font-size: clamp(68px,12vw,90px); }
  .title-second { margin-left: 25px; }





  .window-layout { display: block; }
  .sidebar { padding: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .sidebar-label, .sidebar-foot { display: none; }
  .sidebar nav { display: flex; overflow-x: auto; }
  .category-button { width: auto; flex-shrink: 0; border-left: 0; border-bottom: 2px solid transparent; padding: 14px 15px; gap: 8px; font-size: 11px; }
  .category-button.active { border-bottom-color: var(--accent); }
  .category-count { margin-left: 4px; }
  .project-area { padding: 22px 16px 0; }
  .window-caption { display: none; }
  .footer-caption { display: none; }
}
@media (max-width: 480px) {
  .menubar { margin: 0 14px; }
  .brand { font-size: 14px; gap: 8px; }
  .brand-mark { font-size: 23px; }
  .menu-right { font-size: 9px; gap: 11px; }
  .desktop { padding: 0 14px; }
  .desktop-intro { display: block; position: relative; min-height: 320px; padding: 30px 0; }
  .intro-type { position: relative; z-index: 1; }
  h1 { font-size: clamp(78px,23vw,106px); letter-spacing: -2px; }
  .title-second { margin-left: 35px; }
  .eyebrow { margin-bottom: 22px; }





  .window-chrome { padding: 0 11px; font-size: 8px; }
  #window-title { font-size: 9px; }
  .project-area { padding: 18px 11px 0; }
  h2 { font-size: 20px; }
  .heading-dot { font-size: 9px; margin-left: 4px; }
  .view-switch button { padding: 7px; }
  .search-row { gap: 10px; margin-top: 14px; }
  .search-box { width: 190px; }
  .open-hint { font-size: 9px; }
  .search-box kbd { display: none; }
  .project-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .project-main { padding: 16px 12px 18px; min-height: 169px; }
  .project-description { font-size: 10px; }
  .project-name { font-size: 12px; }
  .project-kind { font-size: 8px; }
  .list-view .project { flex-wrap: wrap; }
  .list-view .project-main { gap: 12px; }
  .list-view .project-number { width: 12px; }
  .list-view .project-name { font-size: 12px; }
  .list-view .platform-links { width: 100%; padding: 0 15px 12px 80px; }
  .desktop-footer { padding-top: 14px; }
  .window-status { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* The masthead is typography only. */
.desktop-intro { display: block; min-height: 0; padding: 38px 0 40px; }
h1 { display: flex; gap: .15em; font-size: clamp(68px, 11vw, 165px); line-height: .95; }
.title-second { margin-left: 0; }
@media (max-width: 480px) {
  .desktop-intro { min-height: 0; padding: 28px 0; }
  h1 { font-size: clamp(51px, 12.5vw, 65px); letter-spacing: -1.5px; }
  .title-second { margin-left: 0; }
}

/* Paired workspace colors preserve the original night palette. */
:root {
  --workspace-color-0: #e8e7df;
  --workspace-color-1: #969995;
  --workspace-color-2: #191b1d;
  --workspace-color-3: #35393c;
  --workspace-color-4: #ff6b2c;
  --workspace-color-5: #121415;
  --workspace-color-6: #151615;
  --workspace-color-7: #161715;
  --workspace-color-8: #b2b5ae;
  --workspace-color-9: #72766d;
  --workspace-color-10: #b3b7bb;
  --workspace-color-11: #70766d;
  --workspace-color-12: #454a41;
  --workspace-color-13: #222426;
  --workspace-color-14: #a6adb0;
  --workspace-color-15: #a4ad9a;
  --workspace-color-16: #16181a;
  --workspace-color-17: #8b9582;
  --workspace-color-18: #aeb6bb;
  --workspace-color-19: #89957d;
  --workspace-color-20: #292c2e;
  --workspace-color-21: #e0e5d8;
  --workspace-color-22: #ff6b2c12;
  --workspace-color-23: #b8c2ac;
  --workspace-color-24: #939a8d;
  --workspace-color-25: #626b59;
  --workspace-color-26: #8b9580;
  --workspace-color-27: #99a18f;
  --workspace-color-28: #8d4d2e;
  --workspace-color-29: #ff6b2c0a;
  --workspace-color-30: #535c49;
  --workspace-color-31: #9da68e;
  --workspace-color-32: #8e9881;
  --workspace-color-33: #a8b397;
  --workspace-color-34: #424b38;
  --workspace-color-35: #a5af99;
  --workspace-color-36: #75816a;
  --workspace-color-37: #2b2d2f;
  --workspace-color-38: #919a86;
  --workspace-color-39: #c3c9cd;
  --workspace-color-40: #9fa8ae;
  --workspace-color-41: #a0a8ad;
  --workspace-color-42: #768368;
  --workspace-color-43: #bbc8aa;
  --workspace-color-44: #637452;
  --workspace-color-45: #a0ae91;
  --workspace-color-46: #9ba98c;
  --workspace-color-47: #454e3a;
  --workspace-color-48: #202325;
  --workspace-color-49: #bbc9a8;
  --workspace-color-50: #161913;
  --workspace-color-51: #414e32;
  --workspace-color-52: #181b15;
}
:root[data-theme="light"] {
  --workspace-color-0: #24282b;
  --workspace-color-1: #566168;
  --workspace-color-2: #faf9f5;
  --workspace-color-3: #b8bcb9;
  --workspace-color-4: #b94311;
  --workspace-color-5: #eeede8;
  --workspace-color-6: #fffaf5;
  --workspace-color-7: #fffaf5;
  --workspace-color-8: #566168;
  --workspace-color-9: #566168;
  --workspace-color-10: #566168;
  --workspace-color-11: #566168;
  --workspace-color-12: #b8bcb9;
  --workspace-color-13: #e4e3dd;
  --workspace-color-14: #566168;
  --workspace-color-15: #566168;
  --workspace-color-16: #e9e8e2;
  --workspace-color-17: #566168;
  --workspace-color-18: #566168;
  --workspace-color-19: #566168;
  --workspace-color-20: #deddd6;
  --workspace-color-21: #24282b;
  --workspace-color-22: #b9431112;
  --workspace-color-23: #566168;
  --workspace-color-24: #566168;
  --workspace-color-25: #b8bcb9;
  --workspace-color-26: #566168;
  --workspace-color-27: #566168;
  --workspace-color-28: #b8bcb9;
  --workspace-color-29: #b943110a;
  --workspace-color-30: #b8bcb9;
  --workspace-color-31: #566168;
  --workspace-color-32: #566168;
  --workspace-color-33: #566168;
  --workspace-color-34: #b8bcb9;
  --workspace-color-35: #566168;
  --workspace-color-36: #566168;
  --workspace-color-37: #eeede6;
  --workspace-color-38: #566168;
  --workspace-color-39: #24282b;
  --workspace-color-40: #566168;
  --workspace-color-41: #566168;
  --workspace-color-42: #566168;
  --workspace-color-43: #566168;
  --workspace-color-44: #b8bcb9;
  --workspace-color-45: #566168;
  --workspace-color-46: #566168;
  --workspace-color-47: #b8bcb9;
  --workspace-color-48: #e4e3dc;
  --workspace-color-49: #566168;
  --workspace-color-50: #fffaf5;
  --workspace-color-51: #b8bcb9;
  --workspace-color-52: #fffaf5;
}
:root[data-theme="light"] .dock img { filter: grayscale(1); }