.tabs-workbench { overflow: hidden; margin-top: 34px; background: #102f3c; border: 1px solid #1d4a58; border-radius: 15px; box-shadow: 0 28px 54px rgb(17 48 60 / 16%); }
.workbench-bar { display: flex; align-items: center; gap: 11px; min-height: 48px; padding: 0 17px; color: #bed8d6; border-bottom: 1px solid rgb(220 245 238 / 12%); font-size: 11px; font-weight: 750; }.workbench-bar b { margin-left: auto; color: #a2ecd2; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.window-dots { display: flex; gap: 5px; }.window-dots i { width: 8px; height: 8px; background: #e28a66; border-radius: 50%; }.window-dots i:nth-child(2) { background: #f2c66f; }.window-dots i:nth-child(3) { background: #55d6b2; }
.workbench-main { display: grid; grid-template-columns: 92px minmax(0, 1fr); }.project-rail { display: grid; align-content: start; justify-items: center; gap: 22px; min-height: 418px; padding: 19px 0; background: #0b2732; border-right: 1px solid rgb(220 245 238 / 10%); }.rail-mark { display: grid; place-items: center; width: 32px; height: 32px; color: #183842; background: #a7edcf; border-radius: 8px; font-size: 10px; font-weight: 900; }.project-rail i { width: 17px; height: 17px; border: 1px solid #71979b; border-radius: 5px; opacity: .85; }.project-rail i:nth-of-type(2) { background: #2c6870; border-color: #5d9e98; }.project-rail i:nth-of-type(3) { border-radius: 50%; }.project-rail small { display: grid; place-items: center; width: 20px; height: 20px; margin-top: 4px; color: #d1e8dc; background: #2b5d67; border-radius: 50%; font-size: 9px; font-weight: 800; }
.workbench-canvas { min-width: 0; padding: clamp(20px, 4vw, 34px); background: linear-gradient(135deg, #e0f3ea 0, #f5f7ec 60%, #e8f3e8 100%); }.canvas-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 23px; }.canvas-heading p { margin: 0 0 7px; color: #2b8e7b; font-size: 10px; font-weight: 840; letter-spacing: .1em; text-transform: uppercase; }.canvas-heading h2 { margin: 0; color: #173542; font-family: Georgia, serif; font-size: clamp(30px, 5vw, 46px); font-weight: 500; letter-spacing: -.06em; line-height: .88; }.canvas-heading > span { padding: 6px 8px; color: #33636a; background: rgb(255 255 255 / 62%); border: 1px solid #c6ddd2; border-radius: 999px; font-size: 10px; font-weight: 720; white-space: nowrap; }
.tabs-workbench .switcher { margin-bottom: 16px; }.tabs-workbench .switcher button { background: rgb(255 255 255 / 70%); }.tabs-workbench .switcher button[aria-pressed="true"] { background: #173542; }
.tabs-workbench output { margin-bottom: 0; color: #466c70; }
@media (max-width: 580px) { .workbench-main { grid-template-columns: 1fr; }.project-rail { display: flex; align-items: center; justify-content: start; min-height: auto; height: 55px; padding: 0 15px; border-right: 0; border-bottom: 1px solid rgb(220 245 238 / 10%); }.project-rail small { margin: 0 0 0 auto; }.project-rail i { width: 15px; height: 15px; }.workbench-canvas { padding: 21px 17px; }.canvas-heading { align-items: start; flex-direction: column; gap: 12px; }.canvas-heading > span { display: none; }.workbench-bar b { display: none; } }