/* Only one design participates in layout and accessibility at any time. */
#workspace-layout {
  display:block
}
#classic-layout {
  display:none
}
:root[data-style=classic] #workspace-layout {
  display:none
}
:root[data-style=classic] #classic-layout {
  display:block
}
.header-tools {
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0
}
.style-switch {
  display:grid;
  grid-template-columns:1fr 1fr;
  position:relative;
  isolation:isolate;
  width:118px;
  height:36px;
  padding:3px;
  border:1px solid #d9dfE6;
  border-radius:999px;
  background:#eef1f5
}
.style-switch:before {
  content:'';
  position:absolute;
  left:3px;
  top:3px;
  width:calc((100% - 6px)/2);
  height:calc(100% - 6px);
  border-radius:999px;
  background:#fff;
  box-shadow:0 2px 6px #25385620;
  transform:translateX(0);
  transition:transform .42s cubic-bezier(.25,.8,.25,1);
  z-index:-1
}
.style-switch[data-selected=classic]:before {
  transform:translateX(100%)
}
.style-switch button {
  padding:0;
  border:0;
  background:transparent;
  color:#7e8796;
  font:11px/1 sans-serif;
  cursor:pointer;
  min-width:0;
  border-radius:999px;
  transition:color .3s
}
.style-switch button[aria-pressed=true] {
  color:#3370ff;
  font-weight:600
}
.style-switch[data-selected=classic] button[aria-pressed=true] {
  color:#244f43
}
.theme-toggle {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  flex-shrink:0;
  border:1px solid #d9dfe6;
  border-radius:50%;
  background:transparent;
  color:inherit;
  padding:7px;
  cursor:pointer;
  transition:transform .25s,background .25s
}
.theme-toggle svg {
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round
}
.theme-toggle:hover {
  transform:rotate(15deg);
  background:#8199b418
}
#classic-layout .header-inner {
  gap:24px
}
#classic-layout .header-tools {
  order:3;
  margin-left:auto
}
#classic-layout .site-nav {
  gap:24px
}
#classic-layout .style-switch {
  background:#e7e9df;
  border-color:#d5d9cc
}
#classic-layout .style-switch:before {
  background:#faf8f1
}
.style-transition {
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-content:center;
  justify-items:center;
  overflow:hidden;
  pointer-events:auto;
  animation:curtain 1.2s ease both;
  --build-ink:#3370ff;
  --build-paper:#f1f5ff;
  color:var(--build-ink);
  background:var(--build-paper)
}
.style-transition[data-destination=classic] {
  --build-ink:#355a48;
  --build-paper:#f4f2ea
}
.transition-mesh {
  position:absolute;
  inset:-15%;
  background-image:linear-gradient(#3370ff12 1px,transparent 1px),linear-gradient(90deg,#3370ff12 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse,black,transparent 70%);
  animation:mesh-build 1.2s ease both
}
.transition-stage {
  position:relative;
  width:280px;
  height:180px;
  margin-bottom:36px;
  perspective:800px
}
.construction-piece {
  position:absolute;
  display:block;
  border:1px solid #9bb8fa;
  background:#fff;
  box-shadow:0 10px 30px #3370ff14;
  border-radius:6px;
  animation:card-build 1.2s cubic-bezier(.2,.75,.2,1) both
}
.construction-piece:before,.construction-piece:after {
  content:'';
  position:absolute;
  background:#c9dafb;
  border-radius:2px;
  height:6px;
  left:14px;
  right:14px;
  top:18px
}
.construction-piece:after {
  top:32px;
  right:30px;
  opacity:.5
}
.construction-piece:nth-child(1) {
  left:5px;
  top:8px;
  width:52px;
  height:165px;
  --from-x:-130px;
  --from-y:0px;
  --tilt:-20deg
}
.construction-piece:nth-child(2) {
  left:70px;
  top:8px;
  width:205px;
  height:35px;
  --from-x:0px;
  --from-y:-100px;
  --tilt:12deg;
  animation-delay:45ms
}
.construction-piece:nth-child(3) {
  left:70px;
  top:56px;
  width:95px;
  height:117px;
  --from-x:0px;
  --from-y:130px;
  --tilt:-12deg;
  animation-delay:80ms
}
.construction-piece:nth-child(4) {
  left:178px;
  top:56px;
  width:97px;
  height:117px;
  --from-x:150px;
  --from-y:60px;
  --tilt:25deg;
  animation-delay:120ms
}
.construction-piece:nth-child(2):before {
  top:12px;
  height:8px;
  right:100px
}
.construction-piece:nth-child(2):after {
  display:none
}
.construction-piece:nth-child(3):after,.construction-piece:nth-child(4):after {
  height:46px;
  top:52px;
  right:14px
}
.construction-scan {
  position:absolute;
  left:-20px;
  right:-20px;
  top:-5px;
  height:2px;
  background:var(--build-ink);
  box-shadow:0 0 14px var(--build-ink);
  animation:construction-scan 1.1s ease both
}
.style-transition strong {
  font-size:22px;
  letter-spacing:2px;
  font-weight:500;
  position:relative
}
.transition-caption {
  font-size:12px;
  letter-spacing:1px;
  opacity:.7;
  margin-top:10px;
  position:relative
}
.construction-progress {
  width:150px;
  height:2px;
  background:#3370ff20;
  margin-top:28px;
  overflow:hidden
}
.construction-progress:after {
  content:'';
  display:block;
  height:100%;
  background:var(--build-ink);
  transform-origin:left;
  animation:progress-build 1.1s ease both
}
.style-transition[data-destination=classic] .transition-mesh {
  background-image:repeating-linear-gradient(0deg,#62764e09 0,#62764e09 1px,transparent 1px,transparent 6px);
  background-size:auto;
  animation:paper-mesh 1.2s ease both
}
.style-transition[data-destination=classic] .construction-piece {
  width:122px;
  height:154px;
  left:79px;
  top:13px;
  background:#fffdf5;
  border-color:#c9cfb9;
  border-radius:1px;
  box-shadow:4px 10px 18px #244f4314;
  animation-name:paper-build;
  transform-origin:bottom left;
  --paper-angle:-9deg
}
.style-transition[data-destination=classic] .construction-piece:before {
  background:#809675;
  top:27px;
  height:2px;
  right:25px
}
.style-transition[data-destination=classic] .construction-piece:after {
  background:repeating-linear-gradient(0deg,#c9cfba 0,#c9cfba 1px,transparent 1px,transparent 10px);
  top:50px;
  height:80px;
  right:14px;
  opacity:.7
}
.style-transition[data-destination=classic] .construction-piece:nth-child(1) {
  --paper-angle:-22deg;
  background:#e1e5d4
}
.style-transition[data-destination=classic] .construction-piece:nth-child(2) {
  --paper-angle:16deg;
  background:#ececdd
}
.style-transition[data-destination=classic] .construction-piece:nth-child(3) {
  --paper-angle:5deg
}
.style-transition[data-destination=classic] .construction-piece:nth-child(4) {
  --paper-angle:-7deg
}
.style-transition[data-destination=classic] .construction-scan {
  animation-name:ink-stroke;
  top:170px;
  height:2px;
  box-shadow:none;
  left:63px;
  right:60px;
  transform-origin:left
}
.style-transition[data-destination=classic] strong {
  font-family:var(--serif);
  font-size:25px
}
.style-transition[data-destination=classic] .construction-progress {
  background:#244f4318
}
@keyframes curtain {
  0% {
    opacity:0;
    clip-path:inset(100% 0 0)
  }
  20%,78% {
    opacity:1;
    clip-path:inset(0)
  }
  100% {
    opacity:0;
    clip-path:inset(0 0 100%)
  }
}
@keyframes card-build {
  0%,8% {
    opacity:0;
    transform:translate(var(--from-x),var(--from-y)) rotate(var(--tilt)) scale(.65)
  }
  42%,85% {
    opacity:1;
    transform:translate(0,0) rotate(0) scale(1)
  }
  100% {
    opacity:0;
    transform:translateY(-12px) scale(1.04)
  }
}
@keyframes paper-build {
  0%,8% {
    opacity:0;
    transform:translate(120px,-50px) rotateY(80deg) rotate(25deg)
  }
  48%,86% {
    opacity:1;
    transform:translate(0,0) rotateY(0) rotate(var(--paper-angle))
  }
  100% {
    opacity:0;
    transform:translate(-30px,0) rotate(var(--paper-angle))
  }
}
@keyframes construction-scan {
  0%,25% {
    opacity:0;
    transform:translateY(0)
  }
  35% {
    opacity:.65
  }
  85% {
    opacity:.65;
    transform:translateY(185px)
  }
  100% {
    opacity:0;
    transform:translateY(185px)
  }
}
@keyframes ink-stroke {
  0%,40% {
    transform:scaleX(0);
    opacity:0
  }
  70%,90% {
    transform:scaleX(1);
    opacity:1
  }
  100% {
    opacity:0;
    transform:scaleX(1)
  }
}
@keyframes mesh-build {
  0% {
    transform:scale(1.12) rotate(-4deg);
    opacity:0
  }
  40%,80% {
    transform:scale(1) rotate(0);
    opacity:1
  }
  100% {
    opacity:0
  }
}
@keyframes paper-mesh {
  0% {
    opacity:0;
    transform:translateX(40px)
  }
  40%,80% {
    opacity:1;
    transform:translateX(0)
  }
  100% {
    opacity:0
  }
}
@keyframes progress-build {
  from {
    transform:scaleX(0)
  }
  to {
    transform:scaleX(1)
  }
}
:root[data-theme=dark] {
  color-scheme:dark;
  --paper:#20241f;
  --ink:#e0e5d8;
  --green:#a5c39e;
  --muted:#acb6a6;
  --line:#42493d;
  --accent:#303b2e
}
:root[data-theme=dark] .style-switch {
  background:#30343d;
  border-color:#464c57
}
:root[data-theme=dark] .style-switch:before {
  background:#48515f
}
:root[data-theme=dark] .style-switch button {
  color:#a7b1c1
}
:root[data-theme=dark] .style-switch button[aria-pressed=true] {
  color:#d8e4ff
}
:root[data-theme=dark] .theme-toggle {
  border-color:#464c57
}
:root[data-theme=dark] #classic-layout .style-switch {
  background:#30372b
}
:root[data-theme=dark] #classic-layout .style-switch:before {
  background:#4a5543
}
:root[data-theme=dark] #classic-layout .style-switch button[aria-pressed=true] {
  color:#deead5
}
:root[data-theme=dark] .site-header,:root[data-theme=dark] .site-nav {
  background:var(--paper)
}
:root[data-theme=dark] .journey-preview {
  background:#282e24;
  border-color:var(--line)
}
:root[data-theme=dark] .profile-card,:root[data-theme=dark] .orbit-note {
  background:#2a3026;
  border-color:var(--line);
  color:var(--ink)
}
:root[data-theme=dark] .profile-card dd {
  color:var(--muted)
}
:root[data-theme=dark] .knowledge-entry:hover {
  background:#2b3328
}
:root[data-theme=dark] .project-image {
  border-color:var(--line)
}
:root[data-theme=dark] #classic-layout .project-image {
  filter:brightness(.78)
}
:root[data-theme=dark] .profile-personality summary {
  background:#303b2e;
  border-color:var(--line)
}
:root[data-theme=dark] .chapter-object {
  background:#2b3328
}
:root[data-theme=dark] .chapter-nav>a[aria-current=true] {
  background:#303b2e
}
:root[data-theme=dark] .style-transition {
  --build-paper:#1e283a;
  --build-ink:#a3beff
}
:root[data-theme=dark] .style-transition[data-destination=classic] {
  --build-paper:#242b22;
  --build-ink:#b4cba3
}
@media(max-width:1100px) and (min-width:601px) {
  #classic-layout .header-inner {
    gap:12px;
    width:calc(100% - 40px)
  }
  #classic-layout .site-nav {
    gap:12px
  }
  #classic-layout .brand {
    font-size:19px
  }
  #classic-layout .brand-sub {
    font-size:6px
  }
  #classic-layout .private-nav {
    padding-left:12px!important
  }
  #classic-layout .style-switch {
    width:100px
  }
}
@media(max-width:600px) {
  #classic-layout .site-header {
    height:auto;
    min-height:116px
  }
  #classic-layout .header-inner {
    position:relative;
    flex-wrap:wrap;
    gap:8px;
    padding:14px 0
  }
  #classic-layout .header-tools {
    order:2;
    margin-left:auto
  }
  #classic-layout .menu-toggle {
    order:3;
    min-height:32px;
    width:100%;
    justify-content:flex-end;
    padding:0
  }
  #classic-layout .site-nav {
    top:115px
  }
  #classic-layout .style-switch {
    width:108px
  }
  #classic-layout .brand-sub {
    font-size:5px
  }
  #classic-layout .brand {
    font-size:19px;
    gap:8px
  }
  #classic-layout .brand img {
    width:27px;
    height:27px
  }
  .header-tools {
    gap:8px
  }
  .style-switch {
    width:108px;
    height:34px
  }
  .theme-toggle {
    height:32px;
    width:32px
  }
  .style-transition strong {
    font-size:20px
  }
  .transition-caption {
    font-size:11px
  }
  .transition-stage {
    transform:scale(.85);
    margin-bottom:15px
  }
}
html:not(.js-enabled) .header-tools,html:not(.js-enabled) .sidebar-toggle {
  display:none
}
@media(prefers-reduced-motion:reduce) {
  .style-transition {
    display:none!important
  }
  .style-switch:before {
    transition:none
  }
  .theme-toggle:hover {
    transform:none
  }
}