html,
body.app-shell{
  width:100%;
  height:100%;
  min-height:100%;
  overflow:hidden;
}

.shell-sidebar{ position:relative; height:100vh; overflow:hidden; }
.shell-sidebar .nv{ min-height:0; }
.file-name-group{ margin-top:44px; }

.notebook-rail{
  width:126px;
  min-width:126px;
  height:100vh;
  display:flex;
  flex-direction:column;
  flex-shrink:0;
  gap:12px;
  padding:12px 9px;
  overflow:hidden;
  border-right:1px solid #e3e7f1;
  background:rgba(255,255,255,.9);
}

.rail-home{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:42px;
  padding:9px 8px;
  border:1px solid #e3e7f1;
  border-radius:12px;
  background:#fff;
  color:#4d5774;
  font-size:12px;
  font-weight:600;
  box-shadow:0 5px 14px rgba(69,78,113,.07);
  transition:transform .15s ease, border-color .15s ease, color .15s ease;
}

.rail-home:hover{
  transform:translateY(-1px);
  border-color:#cfd6e8;
  color:#303957;
}

.rail-home.ac{
  color:#4438ca;
  border-color:#abb4ff;
  background:#f4f3ff;
}

.rail-home-icon{ font-size:17px; line-height:1; }

.rail-covers{
  display:grid;
  gap:10px;
  overflow-y:auto;
  padding:2px 2px 6px;
}

.rail-cover{
  --rail-cover:#d9e6fb;
  --rail-spine:#bfd2ef;
  --rail-ink:#294467;
  position:relative;
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto 1fr auto;
  min-height:112px;
  padding:12px 10px 11px 22px;
  overflow:hidden;
  border:1px solid rgba(76,88,113,.12);
  border-radius:9px 13px 13px 9px;
  background:var(--rail-cover);
  color:var(--rail-ink);
  box-shadow:3px 3px 0 #fff, 4px 3px 0 #e2dfdc;
  transition:transform .15s ease, box-shadow .15s ease;
}

.rail-cover:hover{
  transform:translateY(-2px);
  box-shadow:3px 5px 0 #fff, 4px 5px 0 #ddd9d5;
}

.rail-cover.ac{
  outline:0;
  box-shadow:inset 0 0 0 2px #5b6cff, 3px 3px 0 #fff, 4px 3px 0 #e2dfdc;
}

.rail-workbook{ --rail-cover:#d9e6fb; --rail-spine:#bfd2ef; --rail-ink:#294467; }
.rail-tracker{ --rail-cover:#dceddc; --rail-spine:#c3ddc7; --rail-ink:#315942; }
.rail-names{ --rail-cover:#f8dfd0; --rail-spine:#eccdbd; --rail-ink:#783c29; }
.rail-file-name{ --rail-cover:#fff0d7; --rail-spine:#f4d6a4; --rail-ink:#7d5520; }

.rail-spine{
  position:absolute;
  inset:0 auto 0 0;
  width:13px;
  background:var(--rail-spine);
}

.rail-code{
  grid-column:1 / -1;
  color:currentColor;
  font-family:var(--font-mono);
  font-size:7px;
  letter-spacing:.9px;
  opacity:.72;
}

.rail-symbol{
  grid-column:2;
  grid-row:2 / span 2;
  align-self:center;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border:1px solid currentColor;
  border-radius:50%;
  font-size:13px;
  opacity:.72;
}

.rail-symbol-text{ font-family:Georgia,serif; }

.rail-title{
  grid-column:1;
  grid-row:3;
  align-self:end;
  font-size:12px;
  font-weight:700;
  line-height:1.12;
}

.workbook-panel{
  display:none;
  width:200px;
  min-width:200px;
}

.workbook-active .workbook-panel{ display:flex; }

.sidebar-notebooks{
  display:grid;
  gap:8px;
  margin-top:44px;
}

.mini-notebook{
  --mini-cover:#dceddc;
  --mini-spine:#c3ddc7;
  position:relative;
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto auto;
  min-height:62px;
  padding:10px 10px 9px 24px;
  overflow:hidden;
  border:1px solid rgba(90,100,110,.12);
  border-radius:9px 12px 12px 9px;
  background:var(--mini-cover);
  color:#172019;
  box-shadow:3px 3px 0 #fff, 4px 3px 0 #e3dfda;
  transition:transform .15s ease, box-shadow .15s ease;
}

.mini-notebook:hover{
  transform:translateY(-2px);
  box-shadow:3px 5px 0 #fff, 4px 5px 0 #ddd8d3;
}

.mini-notebook.ac{
  outline:2px solid #5b6cff;
  outline-offset:1px;
}

.mini-names{ --mini-cover:#f8dfd0; --mini-spine:#eccdbd; color:#3b2118; }

.mini-spine{
  position:absolute;
  inset:0 auto 0 0;
  width:13px;
  background:var(--mini-spine);
}

.mini-code{
  align-self:start;
  color:#55705e;
  font-family:var(--font-mono);
  font-size:8px;
  letter-spacing:1px;
}

.mini-names .mini-code{ color:#91563f; }

.mini-title{
  align-self:end;
  font-size:13px;
  font-weight:700;
  line-height:1.1;
}

.mini-symbol{
  grid-column:2;
  grid-row:1 / span 2;
  align-self:center;
  display:grid;
  place-items:center;
  width:29px;
  height:29px;
  border:1px solid rgba(20,40,30,.22);
  border-radius:50%;
  font-size:13px;
}

.mini-symbol-text{ font-family:Georgia,serif; }

.drive-panel{
  display:grid;
  gap:6px;
  padding:9px 8px;
  border-top:1px solid #e6eaf5;
  background:#fff;
}

.drive-status{
  min-height:30px;
  padding:6px 8px;
  border-radius:9px;
  background:#f6f7fb;
  color:#747d99;
  font-size:11px;
  line-height:1.35;
  text-align:center;
}

.drive-status.connected{ color:#087a4f; background:#ecfdf5; }
.drive-status.error{ color:#b42318; background:#fff1f0; }

.drive-button{
  min-height:34px;
  padding:7px 9px;
  border:0;
  border-radius:10px;
  color:#fff;
  background:linear-gradient(135deg,#6d3df5,#5b6cff);
  font-size:12px;
  font-weight:700;
}

.drive-button.secondary{ color:#4b55a6; background:#f0f2ff; }
.drive-button:disabled{ opacity:.5; cursor:not-allowed; }
.shell-main{ position:relative; flex:1; min-width:0; height:100vh; background:#f4f6fb; }
.app-frame{ display:block; width:100%; height:100%; border:0; background:#f4f6fb; }
.app-frame.is-loading{ visibility:hidden; }
.frame-loader{
  position:absolute;
  inset:0;
  z-index:2;
  display:grid;
  place-items:center;
  background:#f4f6fb;
  color:#8a92aa;
  font-size:13px;
}
.frame-loader[hidden]{ display:none !important; }
.app-frame[hidden],
.home-screen[hidden]{ display:none !important; }
.tracker-active .shell-actions{ display:none; }

.home-active .shell-sidebar,
.home-active .notebook-rail{ display:none; }
.home-active .shell-main{ width:100%; }

.home-screen{
  width:100%;
  min-height:100vh;
  padding:20px 38px 16px;
  overflow:auto;
  background:#fff;
  color:#080b13;
}

.home-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  width:min(100%, 1050px);
  margin:0 auto;
}

.home-header h1{
  margin:0;
  font-size:24px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:-.5px;
}

.home-header p{
  margin:7px 0 0;
  color:#747474;
  font-size:14px;
}

.home-drive-status{
  display:flex;
  align-items:center;
  gap:5px;
  max-width:310px;
  min-height:38px;
  padding:8px 13px;
  border:1px solid #e6e2de;
  border-radius:999px;
  background:#fff;
  color:#6d6d6d;
  font-size:13px;
  white-space:nowrap;
}

.home-drive-status:hover{ background:#faf9f7; }
.home-drive-status.connected{ color:#087a4f; border-color:#bcebd6; background:#f1fcf6; }
.home-drive-status.error{ color:#a33a31; border-color:#f0d2ce; background:#fff8f7; }
.home-cloud{ color:#707780; font-size:12px; }

.notebook-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:22px;
  width:min(100%, 1050px);
  margin:47px auto 20px;
}

.notebook-card{
  --cover:#dbe7fa;
  --spine:#bfd2ee;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
  min-height:350px;
  padding:29px 23px 25px 46px;
  overflow:visible;
  border:0;
  border-radius:10px 15px 15px 10px;
  background:var(--cover);
  color:#080b13;
  text-align:left;
  box-shadow:8px 7px 0 -2px #fff, 9px 7px 0 -1px #e1ddd9;
  transition:transform .18s ease, box-shadow .18s ease;
}

.notebook-card:hover{
  transform:translateY(-5px);
  box-shadow:9px 12px 0 -2px #fff, 10px 12px 0 -1px #ded9d4;
}

.notebook-card:focus-visible{
  outline:3px solid #5b6cff;
  outline-offset:5px;
}

.workbook-cover{ --cover:#d9e6fb; --spine:#bfd2ef; }
.tracker-cover{ --cover:#dceddc; --spine:#c3ddc7; }
.names-cover{ --cover:#f8dfd0; --spine:#eccdbd; }
.file-name-cover{ --cover:#fff0d7; --spine:#f4d6a4; }

.cover-spine{
  position:absolute;
  inset:0 auto 0 0;
  width:25px;
  border-radius:10px 0 0 10px;
  background:var(--spine);
}

.cover-code{
  color:#334969;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:1.4px;
}

.tracker-cover .cover-code{ color:#386049; }
.names-cover .cover-code{ color:#914a31; }
.file-name-cover .cover-code{ color:#8a5c20; }

.cover-icon{
  display:grid;
  place-items:center;
  width:49px;
  height:49px;
  margin-top:46px;
  border:1px solid rgba(29,45,53,.28);
  border-radius:50%;
  font-size:19px;
  line-height:1;
}

.cover-icon-text{ font-family:Georgia,serif; font-size:18px; }

.cover-title{
  margin-top:27px;
  font-size:24px;
  line-height:1.08;
  font-weight:600;
  letter-spacing:-.5px;
}

.cover-description{
  margin-top:auto;
  color:#40536f;
  font-size:13px;
  line-height:1.45;
}

.tracker-cover .cover-description{ color:#456254; }
.names-cover .cover-description{ color:#955138; }
.file-name-cover .cover-description{ color:#8a642f; }

.home-footer{
  width:min(100%, 1050px);
  margin:20px auto 0;
  padding:16px 0 0;
  border-top:1px solid #ddd9d5;
  color:#847565;
  font-size:13px;
  text-align:center;
}

@media (max-width:860px){
  body.app-shell{ display:flex; }
  .workbook-panel{
    position:relative;
    width:180px;
    min-width:180px;
    height:100vh;
    min-height:100vh;
    border-right:1px solid rgba(224,229,242,.95);
    border-bottom:0;
  }
}

@media (max-width:760px){
  :root{ --sidebar-width:164px; }
  body.app-shell{ display:flex; }
  .notebook-rail{ width:100px; min-width:100px; padding:9px 6px; }
  .rail-home{ font-size:10px; }
  .rail-cover{ min-height:94px; padding:9px 7px 9px 18px; }
  .rail-title{ font-size:10px; }
  .rail-symbol{ width:24px; height:24px; font-size:11px; }
  .workbook-panel{
    position:relative;
    width:164px;
    min-width:164px;
    height:100vh;
    min-height:100vh;
    border-right:1px solid rgba(224,229,242,.95);
    border-bottom:0;
  }
  .logo-n{ font-size:20px; }
  .ni{ font-size:12px; }
  .shell-actions{ display:none; }

  .home-screen{ padding:18px 18px 28px; }
  .home-header{ align-items:flex-start; }
  .home-drive-status{ max-width:190px; white-space:normal; }
  .notebook-grid{ grid-template-columns:1fr; width:min(100%, 330px); margin-top:32px; }
  .notebook-card{ min-height:310px; }
}

@media (min-width:761px) and (max-width:980px){
  .notebook-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; width:min(100%,650px); }
  .notebook-card{ min-height:330px; padding-right:20px; padding-left:45px; }
}