/* A compact chooser beside one uninterrupted preview. */
body.atlas-app{
  --header:56px;
  --rail-width:210px;
  --controls-width:calc(var(--rail-width) * 2);
  height:100dvh;
  overflow:hidden;
  background:#F4F5F7;
}

.atlas-app .site-header{
  position:fixed;
  inset:0 0 auto;
  height:var(--header);
  padding:0 18px;
  display:flex;
  align-items:center;
  gap:20px;
  border-bottom:1px solid #E0E3EA;
  background:#FFFFFF;
  z-index:40;
}
.atlas-app .brand{min-width:0;width:auto;height:auto;font-size:21px;gap:10px;letter-spacing:-.7px}
.atlas-app .brand-dot{margin-left:-10px}
.atlas-app .brand-mark{width:28px;height:29px;transform:scale(.83);transform-origin:left center;margin-right:-4px}

.atlas-app .sidebar,
.atlas-app .colors-sidebar{
  position:fixed;
  top:var(--header);
  bottom:0;
  width:var(--rail-width);
  display:flex;
  flex-direction:column;
  padding:15px 12px 12px;
  border-right:1px solid #E0E3EA;
  background:#FFFFFF;
  overflow:hidden;
  z-index:20;
}
.atlas-app .sidebar{left:0}
.atlas-app .colors-sidebar{left:var(--rail-width)}
.atlas-app .sidebar-heading{flex-shrink:0;padding:0 6px;margin:0 0 13px;min-height:23px}
.atlas-app .sidebar-heading h2{font-size:14px;font-weight:650;letter-spacing:-.15px}
.atlas-app .sidebar-heading>span{font-size:10px;padding:2px 5px;background:#F3F4F7;color:#687082}
.atlas-app .style-search{flex-shrink:0;height:34px;min-height:34px;padding:0 9px;gap:8px;margin:0 2px 10px;border-color:#DDE1EA;background:#FFFFFF}
.atlas-app .style-search input{font-size:12px}
.atlas-app .style-search kbd{font-size:10px}
.atlas-app .search-symbol{width:11px;height:11px}
.atlas-app #style-menu{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:2px 3px 8px 0;scrollbar-width:thin;scrollbar-color:#D9DDE5 transparent;overscroll-behavior:contain}
.atlas-app #style-menu:empty{flex:0}
.atlas-app .style-menu-button{width:100%;min-height:38px;margin:0 0 2px;padding:7px 7px;gap:9px;border:1px solid transparent;border-radius:6px;font-size:12px;line-height:1.35;flex-shrink:0}
.atlas-app .style-menu-button:hover{background:#F5F6F9}
.atlas-app .style-menu-button.active{border-color:#D9E0FF;background:#EEF1FF;color:#2448CC}
.atlas-app .swatch{width:20px;height:20px;flex:0 0 20px}
.atlas-app .menu-empty{font-size:12px;line-height:1.6;padding:4px 6px}

.atlas-app .colors-sidebar .palette-options{display:block;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;margin:0;padding:2px 3px 8px 0;scrollbar-width:thin;scrollbar-color:#D9DDE5 transparent;overscroll-behavior:contain}
.atlas-app .colors-sidebar .palette-group{margin:0 0 14px;min-width:0}
.atlas-app .colors-sidebar .palette-group>h3{font-size:10.5px;line-height:1.5;font-weight:550;color:#727A89;padding:0 7px;margin:0 0 5px;gap:6px}
.atlas-app .colors-sidebar .palette-group>h3>span{font-size:9px;color:#7C8492}
.atlas-app .colors-sidebar .palette-group-options{display:flex;flex-direction:column;gap:2px;margin:0;padding:1px 0;overflow:visible;scroll-snap-type:none}
.atlas-app .colors-sidebar .palette-choice{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:8px;width:100%;min-height:38px;padding:7px;border:1px solid transparent;border-radius:6px;background:transparent;box-shadow:none;color:#444C5D;scroll-snap-align:none}
.atlas-app .colors-sidebar .palette-choice:hover{border-color:#E2E6F0;background:#F6F7FA}
.atlas-app .colors-sidebar .palette-choice[aria-pressed=true]{border-color:#CCD6FF;background:#EEF1FF;color:#2448CC;box-shadow:none}
.atlas-app .colors-sidebar .palette-mini{flex:0 0 60px;width:60px;height:16px;min-height:16px;border-radius:3px;border:1px solid #1B294218}
.atlas-app .colors-sidebar .palette-choice>span:last-child{min-width:0;font-size:11.5px;font-weight:500;line-height:1.35;text-align:left;white-space:normal}
.atlas-app .style-menu-button:focus-visible,
.atlas-app .colors-sidebar .palette-choice:focus-visible{outline:2px solid #3155E7;outline-offset:0}

.atlas-app .mobile-controls{display:none}
.atlas-app main#main{position:relative;top:var(--header);height:calc(100dvh - var(--header));min-height:0;max-width:none;margin-left:var(--controls-width);padding:16px;overflow:hidden}
.atlas-app #lab-page{display:flex;flex-direction:column;height:100%;min-height:0;min-width:0}
.atlas-app .lab-toolbar{display:flex;align-items:center;flex-wrap:nowrap;flex-shrink:0;gap:16px;min-height:46px;padding:0;margin:0 0 14px;background:transparent;border:0;border-radius:0}
.atlas-app .preview-heading{flex:1;min-width:0}
.atlas-app .preview-heading h1{font-size:19px;font-weight:650;line-height:1.3;letter-spacing:-.4px;margin:0 0 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.atlas-app .preview-heading p{font-size:11.5px;line-height:1.4;color:#697182;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.atlas-app .lab-toolbar .example-picker{display:flex;flex:none;width:auto;gap:0;margin-left:auto}
.atlas-app .lab-toolbar .segmented{display:flex;width:auto;padding:3px;border-color:#D9DEE8;border-radius:7px;background:#FFFFFF}
.atlas-app .lab-toolbar .segmented button{min-height:33px;padding:6px 10px;font-size:11.5px;gap:6px;white-space:nowrap}
.atlas-app #open-website{flex-shrink:0;min-height:39px;padding:7px 11px;font-size:11.5px;line-height:1.4;border:1px solid #D6DCE7;border-radius:6px;background:#FFFFFF;color:#414B5D;white-space:nowrap}
.atlas-app #open-website:hover{background:#F8F9FC;border-color:#AEBBE0}
.atlas-app .lab-grid{display:flex;flex:1;grid-template-columns:minmax(0,1fr);align-items:stretch;min-height:0;min-width:0;gap:0}
.atlas-app .stage-container{--website-preview-height:100%;display:flex;flex:1;height:100%;min-height:0;min-width:0;overflow:hidden;border-radius:10px;background:transparent}
.atlas-app #lab-stage{display:block;flex:1;height:100%;min-height:0;min-width:0}
.atlas-app #lab-stage>.specimen-board{height:100%!important;min-height:440px;width:100%;border-radius:10px}
.atlas-app #lab-stage>.specimen-board.specimen-website-board{height:100%!important;min-height:0;padding:12px}
.atlas-app #lab-stage .website-frame{max-width:none}
.atlas-app .demo-caption{display:none}

@media(min-width:901px) and (max-width:1200px){
  body.atlas-app{--rail-width:180px}
  .atlas-app .sidebar,.atlas-app .colors-sidebar{padding-left:9px;padding-right:9px}
  .atlas-app .style-menu-button{font-size:11.5px;gap:7px;padding-left:5px;padding-right:5px}
  .atlas-app .colors-sidebar .palette-mini{flex-basis:50px;width:50px}
  .atlas-app .colors-sidebar .palette-choice{gap:7px;padding-left:5px;padding-right:5px}
  .atlas-app .colors-sidebar .palette-choice>span:last-child{font-size:11px}
  .atlas-app main#main{padding:14px}
  .atlas-app .lab-toolbar{gap:10px}
  .atlas-app .preview-heading h1{font-size:17px}
  .atlas-app .lab-toolbar .segmented button{padding:6px 8px;font-size:11px}
  .atlas-app .lab-toolbar .segmented .music-symbol,.atlas-app .lab-toolbar .segmented .web-symbol,.atlas-app .lab-toolbar .segmented .profile-symbol{display:none}
}

@media(max-width:900px){
  body.atlas-app{height:auto;min-height:100dvh;overflow:auto;--controls-width:0px}
  .atlas-app .site-header{position:sticky;top:0;inset:auto;display:flex;height:var(--header);padding:0 15px}
  .atlas-app .sidebar,.atlas-app .colors-sidebar{display:none}
  .atlas-app .mobile-controls{position:sticky;top:var(--header);z-index:35;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;padding:10px 12px 12px;background:#FFFFFF;border-bottom:1px solid #E0E3EA}
  .atlas-app .mobile-controls label{display:flex;flex-direction:column;min-width:0;gap:5px;font-size:11px;font-weight:550;line-height:1.4;color:#616B7E}
  .atlas-app .mobile-controls select{width:100%;min-width:0;min-height:44px;height:44px;padding:0 9px;border:1px solid #D4DAE6;border-radius:6px;background:#FFFFFF;color:#242C3A;font-size:12px}
  .atlas-app main#main{top:0;height:auto;min-height:0;max-width:none;margin:0;padding:12px;overflow:visible}
  .atlas-app #lab-page{height:auto;min-height:0}
  .atlas-app .lab-toolbar{flex-wrap:wrap;gap:10px;margin-bottom:12px;min-height:0}
  .atlas-app .preview-heading{flex:1;min-width:0}
  .atlas-app .preview-heading h1{font-size:18px}
  .atlas-app .preview-heading p{font-size:11px}
  .atlas-app #open-website{min-height:44px;min-width:72px;font-size:12px;order:2}
  .atlas-app .lab-toolbar .example-picker{order:3;flex:1 1 100%;width:100%;margin:0}
  .atlas-app .lab-toolbar .segmented{width:100%;padding:3px}
  .atlas-app .lab-toolbar .segmented button{flex:1;min-width:0;min-height:44px;padding:8px 7px;font-size:12px;gap:6px}
  .atlas-app .lab-grid{flex:none;height:clamp(500px,calc(100dvh - 250px),900px);min-height:500px}
  .atlas-app .stage-container,.atlas-app #lab-stage{height:100%;min-height:500px}
  .atlas-app #lab-stage>.specimen-board{min-height:500px}
  .atlas-app #lab-stage>.specimen-board.specimen-website-board{min-height:500px;padding:7px}
}

@media(prefers-reduced-motion:reduce){
  .atlas-app .style-menu-button,.atlas-app .palette-choice,.atlas-app .segmented button{transition:none}
}