.native-board {
  position:absolute;
  top:var(--projects-top);
  left:var(--projects-left);
  width:var(--projects-width);
  height:var(--projects-height);
  transform-origin:center top;
  z-index:40;
  background:#17191bfa;
  color:#e9eaec;
  border:1px solid #ffffff2b;
  border-radius:15px;
  padding:12px;
  box-shadow:0 20px 48px #10101566;
  backdrop-filter:blur(20px);
  transform:translateY(-25px) scale(calc(var(--native-scale)*.98));
  opacity:0;
  pointer-events:none;
  transition:opacity .18s,transform .22s cubic-bezier(.4,0,1,1)
}
.board-open .native-board {
  opacity:1;
  transform:translateY(0) scale(var(--native-scale));
  pointer-events:auto;
  transition:opacity .2s,transform .32s cubic-bezier(.22,1,.36,1)
}
.native-header {
  height:22px;
  display:flex;
  align-items:center;
  gap:7px;
  font-size:12px
}
.native-header strong {
  font-size:13px;
  font-weight:600
}
.native-header>span:nth-of-type(2) {
  color:#aaaeb4
}
.native-grid {
  font-size:17px;
  line-height:1;
  color:#f0f0f0
}
.native-header .native-passive {
  margin-left:auto;
  color:#d7d9dd;
  font-size:12px
}
.native-passive,.native-toolbar-right {
  cursor:default;
  user-select:none
}
.native-projects {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  height:296px;
  margin-top:10px
}
.native-column {
  padding:9px;
  background:#ffffff06;
  border:1px solid #ffffff1e;
  border-radius:12px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:9px;
  transition:background .22s,border-color .22s
}
.native-column.is-selected {
  background:#ffffff0e;
  border-color:#ffffff52
}
.native-project-header {
  display:flex;
  align-items:center;
  gap:4px;
  padding:0 3px;
  height:18px;
  flex-shrink:0
}
.native-project-select {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:500;
  flex:1;
  text-align:left;
  padding:0;
  min-width:0
}
.native-project-select .native-check {
  margin-left:auto;
  color:#969a9f;
  font-size:10px;
  opacity:0
}
.native-column.is-selected .native-check {
  opacity:1
}
.project-symbol {
  width:17px;
  height:17px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0
}
.project-symbol svg {
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round
}
.native-column[data-native-project=personal]>.native-project-header .project-symbol {
  color:#64d2ff
}
.native-column[data-native-project=development]>.native-project-header .project-symbol {
  color:#bf5af2
}
.native-column[data-native-project=design]>.native-project-header .project-symbol {
  color:#ffd60a
}
.native-project-menu {
  font-size:12px;
  color:#aaa;
  line-height:1;
  letter-spacing:1px;
  padding-left:2px;
  cursor:default
}
.native-preview {
  height:96px;
  border-radius:7px;
  background:#00000029;
  position:relative;
  flex-shrink:0;
  overflow:hidden
}
.mini-window {
  position:absolute;
  overflow:hidden;
  background:#1a1a1a;
  border:1px solid #ffffff29;
  border-radius:3px;
  padding:4px;
  transition:transform .36s cubic-bezier(.22,1,.36,1),width .36s,height .36s
}
.mini-window>div {
  display:flex;
  align-items:center;
  gap:4px;
  font-size:9px;
  white-space:nowrap;
  overflow:hidden
}
.mini-window .app-tile {
  width:12px;
  height:12px;
  font-size:8px;
  flex-shrink:0;
  border-radius:2px
}
.mini-window small {
  font-size:8px;
  color:#999;
  white-space:nowrap;
  display:block;
  margin-top:3px
}
.native-rows {
  display:flex;
  flex-direction:column;
  gap:6px;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:#ffffff26 transparent;
  min-height:0
}
.native-row {
  display:flex;
  align-items:center;
  gap:6px;
  background:#ffffff0b;
  border-radius:6px;
  padding:6px 7px;
  min-height:39px;
  flex-shrink:0
}
.native-row>button {
  flex:1;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0;
  text-align:left;
  min-width:0
}
.native-row>button:hover .native-row-title {
  color:#fff
}
.native-row-text {
  min-width:0;
  flex:1
}
.native-row-title {
  font-size:11px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  display:block;
  line-height:13px;
  color:#e5e7e9
}
.native-row-subtitle {
  font-size:9px;
  color:#9b9ea4;
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-top:2px;
  line-height:11px
}
.native-row-menu {
  font-size:11px;
  color:#9a9da4;
  cursor:default
}
.app-tile {
  width:19px;
  height:19px;
  border-radius:4px;
  flex-shrink:0;
  display:inline-grid;
  place-items:center;
  font-size:12px;
  background:#858e9c;
  color:#fff;
  box-shadow:0 0 0 1px #ffffff1a inset
}
.app-tile.icon-safari {
  color:#fff;
  background:linear-gradient(#53baee,#2481cc)
}
.app-tile.icon-notes {
  background:linear-gradient(#e9bd45 0 30%,#f6f6ed 30%);
  color:#afab9f;
  font-size:10px
}
.app-tile.icon-music {
  background:#e85970
}
.app-tile.icon-code {
  background:#1688c4;
  color:#fff
}
.app-tile.icon-terminal {
  background:#252527;
  font:10px monospace;
  padding:0;
  color:#ddd
}
.app-tile.icon-design {
  background:#4d586a
}
.app-tile.icon-preview {
  background:#4598b9
}
.native-empty {
  font-size:11px;
  color:#999;
  text-align:center;
  padding:18px
}
.native-unassigned {
  height:50px;
  padding-top:10px;
  font-size:12px;
  color:#a4a7ac
}
.native-unassigned>div {
  display:flex;
  align-items:center;
  gap:6px
}
.native-unassigned>div>span {
  font-size:15px;
  margin-right:3px
}
.native-toolbar {
  display:flex;
  align-items:center;
  gap:15px;
  border-top:1px solid #ffffff1f;
  padding-top:10px;
  margin-top:10px;
  height:28px;
  position:relative
}
.native-toolbar>button {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  padding:0;
  white-space:nowrap
}
.native-toolbar>button:hover {
  color:white
}
.native-layout-symbol {
  font-size:15px
}
.chevrons {
  font-size:7px;
  line-height:5px;
  color:#aaa;
  display:block;
  margin-left:3px
}
.native-toolbar-right {
  display:flex;
  align-items:center;
  gap:20px;
  margin-left:auto;
  color:#c7cad0;
  font-size:13px
}
.native-toolbar-right>span:first-child {
  font-size:12px
}
.native-status {
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:10px;
  line-height:12px;
  height:12px;
  color:#94999f
}
.native-status i {
  display:inline-block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#32d74b;
  margin-right:4px
}
.native-status>span:last-child {
  display:flex;
  gap:13px;
  align-items:center
}
.native-status>span:last-child>span {
  font-size:15px
}
.native-layout-menu {
  position:absolute;
  left:12px;
  top:447px;
  width:var(--layout-menu-width);
  height:var(--layout-menu-height);
  padding:4px;
  background:#303236fa;
  border:1px solid #ffffff2e;
  border-radius:7px;
  box-shadow:0 8px 25px #0006;
  z-index:8
}
.native-layout-menu button {
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  height:24px;
  padding:0 7px;
  text-align:left;
  font-size:12px;
  white-space:nowrap;
  border-radius:4px;
  color:#eee
}
.native-layout-menu button:hover {
  background:#2864c8
}
.native-layout-menu button .menu-check {
  width:13px;
  font-size:11px
}
.drop-board {
  position:absolute;
  z-index:55;
  left:var(--drop-left);
  top:var(--drop-top);
  width:var(--drop-width);
  height:var(--drop-height);
  transform-origin:center top;
  padding:14px;
  background:#24262aef;
  backdrop-filter:blur(22px);
  border:1px solid #ffffff22;
  border-radius:18px;
  color:#eee;
  box-shadow:0 12px 25px #0005;
  transform:translateY(-30px) scale(calc(var(--native-scale)*.96));
  opacity:0;
  pointer-events:none;
  transition:transform .26s cubic-bezier(.22,1,.36,1),opacity .18s
}
.drop-open .drop-board {
  opacity:1;
  transform:translateY(0) scale(var(--native-scale));
  pointer-events:auto
}
.drop-title {
  text-align:center;
  font-size:12px;
  font-weight:500;
  color:#b6b9c0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-bottom:12px
}
.drop-projects {
  display:flex;
  gap:6px
}
.drop-projects button {
  height:85px;
  flex:1;
  border-radius:11px;
  background:#ffffff08;
  border:1px solid #ffffff12;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:12px;
  font-weight:500;
  color:#a4a7ae;
  transition:background .2s,border-color .2s
}
.drop-projects .project-symbol {
  width:22px;
  height:22px
}
.drop-projects button.drop-target,.drop-projects button:hover {
  background:#ffffff16;
  border-color:#ffffff52;
  color:#fff
}
.native-project-select .native-check {
  display:grid;
  place-items:center;
  width:10px;
  height:10px;
  border-radius:50%;
  font-size:7px;
  background:#92969d;
  color:#1b1c1f;
  line-height:1
}
.native-board button,.native-settings button,.native-context-menu button,.native-project-editor button {
  font-family:inherit
}
.native-board button:active,.native-settings button:active,.native-context-menu button:active {
  transform:none
}
.native-board button:focus-visible,.native-settings :focus-visible,.native-context-menu :focus-visible,.native-project-editor :focus-visible {
  outline:2px solid #7cafff;
  outline-offset:2px
}
.native-board .native-new {
  margin-left:auto;
  font-size:12px;
  padding:0
}
.native-projects {
  display:flex;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
  scrollbar-color:#ffffff26 transparent
}
.native-column {
  flex:0 0 calc((100% - (var(--project-count) - 1)*10px)/var(--project-count));
  min-width:210px
}
.native-project-name {
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis
}
.native-project-menu,.native-row-menu {
  padding:0;
  cursor:pointer
}
.native-row>.native-row-menu {
  flex:0 0 13px;
  display:block;
  text-align:center
}
.native-unassigned {
  height:73px;
  padding-top:8px;
  overflow:hidden
}
.native-unassigned>div {
  gap:3px
}
.native-unassigned>div>button {
  padding:0;
  font-size:12px;
  white-space:nowrap
}
.native-unassigned>div>button:first-child {
  width:20px;
  height:20px
}
.native-unassigned-rows {
  display:flex!important;
  gap:8px;
  overflow-x:auto;
  scrollbar-width:thin;
  padding-top:5px;
  min-height:0
}
.native-unassigned-rows[hidden] {
  display:none!important
}
.native-unassigned-rows>.native-row {
  width:260px;
  flex-shrink:0
}
.native-toolbar {
  margin-top:5px
}
.native-toolbar-right {
  gap:18px
}
.native-toolbar-right>button {
  padding:0;
  font-size:13px;
  white-space:nowrap
}
.native-toolbar-right>button:first-child {
  font-size:12px
}
.native-status button {
  padding:0;
  font-size:10px;
  line-height:12px;
  color:#aeb2b8
}
.native-message {
  position:absolute;
  left:12px;
  right:12px;
  bottom:33px;
  color:#e4b263;
  font-size:10px;
  line-height:12px;
  max-height:24px;
  overflow:hidden
}
.native-empty strong {
  font-size:12px;
  font-weight:500
}
.native-empty p {
  font-size:11px;
  line-height:1.35;
  margin:6px 0
}
.native-context-menu {
  position:absolute;
  z-index:85;
  width:220px;
  padding:4px;
  background:#303236fa;
  color:#eee;
  border:1px solid #ffffff2e;
  border-radius:7px;
  box-shadow:0 8px 25px #0006;
  transform:scale(var(--native-scale));
  transform-origin:top left;
  font-size:12px;
  max-height:470px;
  overflow-y:auto;
  scrollbar-width:thin
}
.native-context-menu.is-layout-menu {
  width:147px;
  height:130px
}
.native-context-menu button {
  display:flex;
  align-items:center;
  gap:6px;
  width:100%;
  height:24px;
  padding:0 7px;
  text-align:left;
  font-size:12px;
  border-radius:4px;
  white-space:nowrap
}
.native-context-menu button:hover:not(:disabled),.native-submenu summary:hover {
  background:#2864c8
}
.native-context-menu button>span:last-child {
  overflow:hidden;
  text-overflow:ellipsis
}
.native-context-menu .menu-check {
  width:13px;
  flex-shrink:0
}
.native-context-menu hr {
  border:0;
  border-top:1px solid #ffffff26;
  margin:4px 1px
}
.native-context-menu .destructive {
  color:#ff8e86
}
.native-submenu summary {
  display:block;
  cursor:pointer;
  padding:5px 8px;
  border-radius:4px;
  list-style:none;
  white-space:nowrap
}
.native-submenu summary::-webkit-details-marker {
  display:none
}
.native-submenu-items {
  padding-left:10px;
  border-left:1px solid #ffffff24;
  margin:2px 6px
}
.native-settings {
  position:absolute;
  left:200px;
  top:calc(112px * var(--native-scale));
  width:560px;
  height:688px;
  transform:scale(var(--native-scale));
  transform-origin:center top;
  z-index:45;
  background:#202122;
  color:#e9eaec;
  border:1px solid #ffffff3d;
  border-radius:10px;
  box-shadow:0 20px 48px #10101566;
  overflow:hidden;
  font-size:13px
}
.settings-titlebar {
  height:28px;
  background:#303132;
  border-bottom:1px solid #0007;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative
}
.settings-titlebar strong {
  font-size:12px;
  font-weight:600
}
.settings-close {
  position:absolute;
  left:10px;
  top:8px;
  height:12px;
  width:12px;
  padding:0;
  line-height:10px;
  border-radius:50%;
  background:#ff6258;
  color:#76231c;
  font-size:11px
}
.settings-form {
  height:660px;
  overflow-y:auto;
  padding:13px 19px 25px;
  scrollbar-width:thin;
  scrollbar-color:#ffffff38 transparent
}
.settings-section {
  margin:0 0 17px
}
.settings-section h3 {
  margin:0 0 7px 9px;
  font-size:13px;
  font-weight:600;
  color:#ddd
}
.settings-group {
  background:#ffffff05;
  border:1px solid #ffffff18;
  border-radius:8px;
  padding:10px
}
.settings-toggle {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:30px;
  line-height:17px
}
.settings-toggle span {
  flex:1
}
.settings-toggle input {
  appearance:none;
  position:relative;
  width:26px;
  height:16px;
  flex-shrink:0;
  margin:0 0 0 6px;
  background:#606164;
  border-radius:10px;
  cursor:pointer;
  transition:background .15s
}
.settings-toggle input:after {
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  width:12px;
  height:12px;
  background:#dedee0;
  border-radius:50%;
  transition:transform .15s
}
.settings-toggle input:checked {
  background:#0b84ff
}
.settings-toggle input:checked:after {
  transform:translateX(10px);
  background:#fff
}
.native-settings input:disabled {
  opacity:.35;
  cursor:default
}
.settings-note {
  font-size:11px;
  line-height:14px;
  color:#a0a1a5;
  margin:4px 0 8px
}
.settings-range {
  margin:0 0 5px
}
.settings-range>label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:13px;
  margin-bottom:4px
}
.settings-range output {
  color:#a7a9ae;
  font-size:12px
}
.settings-range input {
  display:block;
  width:100%;
  height:16px;
  margin:0;
  accent-color:#0b84ff;
  cursor:pointer
}
.settings-picker {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 12px
}
.settings-picker select {
  width:210px;
  background:#454649;
  border:1px solid #ffffff21;
  border-radius:5px;
  color:#eee;
  font:12px inherit;
  padding:3px 7px
}
.settings-group>button,.settings-buttons button,.settings-rule button {
  background:#454649;
  border:1px solid #ffffff18;
  border-radius:5px;
  padding:3px 8px;
  font-size:11px;
  box-shadow:0 1px 2px #0003
}
.settings-buttons {
  display:flex;
  gap:7px;
  margin:7px 0;
  align-items:center
}
.settings-buttons button:last-child {
  margin-left:auto
}
.settings-rule {
  display:flex;
  align-items:center;
  gap:7px;
  margin:8px 0;
  font-size:12px
}
.settings-rule button {
  margin-left:auto;
  max-width:220px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.access-boundary {
  color:#e4b263
}
.native-modal-layer {
  position:absolute;
  inset:0;
  z-index:90;
  background:#0002;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:calc(157px * var(--native-scale));
  pointer-events:auto
}
.native-project-editor {
  background:#262729;
  color:#eee;
  width:340px;
  height:172px;
  transform:scale(var(--native-scale));
  transform-origin:top center;
  border:1px solid #ffffff2c;
  border-radius:10px;
  padding:16px;
  box-shadow:0 20px 55px #0008;
  display:flex;
  flex-direction:column;
  gap:12px;
  font-size:13px
}
.native-project-editor.is-rename {
  height:132px
}
.native-project-editor.is-delete {
  height:auto;
  min-height:172px
}
.native-project-editor h3 {
  font-size:13px;
  font-weight:600;
  margin:0;
  line-height:16px
}
.native-project-editor>input {
  height:22px;
  min-height:22px;
  width:100%;
  background:#161719;
  border:1px solid #ffffff35;
  border-radius:5px;
  color:white;
  padding:2px 6px;
  font-size:12px;
  font-family:inherit
}
.native-symbol-picker {
  display:flex;
  border-radius:5px;
  background:#141517;
  min-height:22px;
  padding:1px
}
.native-symbol-picker>button {
  flex:1;
  border-radius:4px;
  padding:1px;
  display:grid;
  place-items:center
}
.native-symbol-picker>button[aria-pressed=true] {
  background:#626365
}
.native-symbol-picker .project-symbol {
  height:15px;
  width:15px
}
.native-editor-buttons {
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:auto
}
.native-editor-buttons>button {
  height:22px;
  min-width:60px;
  border-radius:5px;
  border:1px solid #ffffff20;
  background:#4a4b4f;
  padding:1px 10px;
  font-size:12px;
  line-height:17px
}
.native-editor-buttons>.native-save {
  background:#0b73ef
}
.native-editor-buttons>.destructive {
  background:#c44139
}
.native-project-editor>p {
  font-size:12px;
  line-height:17px;
  margin:0;
  color:#cacbd0
}
.native-project-editor>.native-editor-error {
  color:#ffb5ae;
  font-size:10px;
  line-height:12px
}
.native-project-editor:has(.native-editor-error:not([hidden])) {
  height:auto;
  min-height:172px
}
.native-board button:disabled,.native-context-menu button:disabled,.native-project-editor button:disabled {
  opacity:.35;
  cursor:default
}
.drop-projects {
  overflow-x:auto;
  scrollbar-width:thin
}
.drop-projects>button {
  flex:1 0 120px;
  min-width:0
}
.drop-projects>button>span:last-child {
  max-width:115px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
@media(prefers-reduced-motion:reduce) {
  .native-board,.drop-board,.project-toast,.native-seam,.mini-window,.demo-cursor,.settings-toggle input,.settings-toggle input:after {
    transition:none!important;
    animation:none!important
  }
}
.native-project-editor {
  padding:22px;
  gap:14px
}
.settings-picker select {
  font-family:inherit;
  font-size:12px
}
.drop-projects>button {
  flex:1;
  min-width:0
}
.drop-projects>button>span:last-child {
  max-width:100%
}
.native-board, .native-settings, .native-project-editor {
  color-scheme: dark;
}