.screen-shell {
  background:#171718;
  border-radius:15px;
  padding:7px;
  box-shadow:0 18px 45px -25px #0006,0 0 0 1px #0000000a
}
.screen-viewport {
  aspect-ratio:var(--screen-aspect,1496/967);
  position:relative;
  overflow:hidden;
  border-radius:9px;
  background:#adbac7
}
.desktop {
  width:var(--world-width,960px);
  height:var(--world-height,620.535px);
  position:absolute;
  top:0;
  left:0;
  transform-origin:top left;
  overflow:hidden;
  isolation:isolate;
  color:#202124
}
.wallpaper {
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 83% 58% at 3% 80%,#9babc1 0%,#9babc100 72%),radial-gradient(ellipse 100% 90% at 110% 15%,#c6ccd4 0%,#b1bcc900 78%),linear-gradient(130deg,#858f9c,#b8c2cc 65%,#a0abb8)
}
.wallpaper:after {
  position:absolute;
  content:"";
  width:1300px;
  height:500px;
  border-radius:50%;
  transform:rotate(-24deg);
  background:linear-gradient(180deg,#8898ad20,#6885a82b);
  left:-150px;
  top:300px;
  border-top:1px solid #f7fafc1a
}
.menu-bar {
  height:var(--native-menu-height);
  width:var(--native-screen-width);
  transform:scale(var(--native-scale));
  transform-origin:top left;
  background:#e5e8ed47;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 14px;
  font-size:10px;
  position:absolute;
  top:0;
  left:0;
  z-index:20;
  color:#303943
}
.menu-bar>div {
  display:flex;
  gap:16px;
  align-items:center
}
.menu-bar strong {
  font-size:10px
}
.notch {
  position:absolute;
  width:var(--notch-width);
  height:var(--notch-height);
  top:0;
  left:var(--notch-left);
  transform:scale(var(--native-scale));
  transform-origin:top left;
  background:#171718;
  z-index:70;
  border-radius:0 0 11px 11px;
  display:grid;
  place-items:center
}
.notch>span {
  width:4px;
  height:4px;
  border-radius:50%;
  background:#2b3c2e
}
.window-layer {
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none
}
.demo-window {
  position:absolute;
  left:0;
  top:0;
  border-radius:8px;
  border:1px solid #0004;
  background:#fff;
  box-shadow:0 8px 24px #17202a33;
  overflow:hidden;
  transform-origin:top left;
  pointer-events:none;
  contain:layout paint;
  will-change:transform
}
.demo-window.is-active {
  pointer-events:auto
}
.window-chrome {
  height:30px;
  background:#f2f2f2;
  border-bottom:1px solid #ddd;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:grab;
  user-select:none;
  touch-action:none;
  font-size:10px;
  color:#616161
}
.lights {
  position:absolute;
  left:11px;
  display:flex;
  gap:5px
}
.lights i {
  height:8px;
  width:8px;
  border-radius:50%;
  background:#ff6258;
  border:1px solid #0001
}
.lights i:nth-child(2) {
  background:#ffc12e
}
.lights i:nth-child(3) {
  background:#28ca42
}
.window-body {
  height:calc(100% - 30px);
  overflow:hidden;
  font-size:11px
}
.editor {
  height:100%;
  display:flex;
  background:#1e1e1e;
  color:#cbd0d6
}
.editor-sidebar {
  width:125px;
  flex-shrink:0;
  background:#252526;
  padding:15px 11px;
  font:9px/2.1 monospace;
  color:#b9bcc1
}
.editor-sidebar strong {
  display:block;
  font-size:8px;
  letter-spacing:.6px;
  color:#d7d7d7;
  margin-bottom:10px
}
.active-file {
  background:#37373d;
  margin:0 -11px;
  padding:0 11px
}
.editor-main {
  font:10px/1.9 monospace;
  overflow:hidden;
  flex:1;
  padding:0 14px
}
.editor-tabs {
  margin:0 -14px 12px;
  padding:7px 14px;
  font-size:9px;
  background:#2d2d30;
  color:#d7d7db
}
.editor-main pre {
  font:inherit;
  margin:0
}
.line-no {
  color:#737373;
  display:inline-block;
  width:15px;
  margin-right:14px
}
.code-purple {
  color:#c586c0
}
.code-green {
  color:#ce9178
}
.code-orange {
  color:#dcdcaa
}
.browser-toolbar {
  height:32px;
  background:#f6f6f6;
  border-bottom:1px solid #e8e8e8;
  display:flex;
  align-items:center;
  gap:13px;
  padding:0 13px;
  font-size:13px;
  color:#909090
}
.browser-url {
  max-width:260px;
  flex:1;
  text-align:center;
  line-height:21px;
  background:#e7e7e7;
  border-radius:5px;
  font-size:9px;
  color:#707070
}
.browser-page {
  padding:25px;
  color:#202020;
  background:#fff;
  min-height:100%
}
.browser-page h3 {
  font-size:22px;
  font-weight:550;
  letter-spacing:-.5px;
  margin:0 0 18px
}
.browser-page p {
  font-size:10px;
  line-height:1.7;
  color:#767676
}
.browser-page .doc-line {
  height:6px;
  background:#ececec;
  margin:12px 0;
  border-radius:2px;
  width:90%
}
.browser-page .doc-line:nth-child(2n) {
  width:70%
}
.browser-page code {
  display:block;
  padding:14px;
  background:#f5f5f5;
  border-radius:5px;
  font:9px/1.8 monospace;
  color:#484848;
  margin-top:20px
}
.terminal {
  height:100%;
  background:#202124;
  color:#e4e4e4;
  padding:14px 17px;
  font:10px/1.8 monospace
}
.terminal .green {
  color:#81c784
}
.terminal .dim {
  color:#929292
}
.terminal .cursor {
  display:inline-block;
  width:5px;
  height:11px;
  background:#dedede;
  vertical-align:-2px
}
.notes {
  height:100%;
  display:flex;
  background:#fff
}
.notes-side {
  width:98px;
  background:#f4f3ef;
  border-right:1px solid #e7e5de;
  flex-shrink:0;
  padding:12px 10px;
  font:9px/2.5 -apple-system,sans-serif;
  color:#575752
}
.notes-side b {
  font-size:8px;
  color:#8c8a82
}
.notes-main {
  padding:18px 20px;
  line-height:1.7;
  font-size:11px
}
.notes-main small {
  font-size:8px;
  color:#9a9a9a
}
.notes-main h4 {
  font-size:23px;
  letter-spacing:-.5px;
  margin:10px 0 15px;
  font-weight:600
}
.notes-main ul {
  padding-left:16px
}
.notes-main li {
  margin:7px 0
}
.music {
  padding:22px;
  background:#fbfbfb;
  height:100%
}
.music h4 {
  font-size:18px;
  margin:0 0 6px
}
.music p {
  font-size:9px;
  color:#888
}
.playlist-row {
  display:flex;
  justify-content:space-between;
  padding:12px 0;
  border-bottom:1px solid #eee;
  font-size:10px
}
.playlist-row span:last-child {
  font-size:9px;
  color:#8c8c8c
}
.design-canvas {
  height:100%;
  display:flex;
  background:#e7e7e7
}
.design-tools {
  width:35px;
  padding-top:12px;
  text-align:center;
  font-size:13px;
  line-height:2.5;
  background:#f8f8f8;
  border-right:1px solid #d7d7d7
}
.artboard {
  margin:auto;
  width:70%;
  height:75%;
  background:#fff;
  padding:22px;
  border:1px solid #d8d8d8;
  position:relative;
  overflow:hidden
}
.artboard small {
  font-size:7px;
  letter-spacing:1.5px;
  color:#999
}
.artboard strong {
  display:block;
  font-size:35px;
  line-height:1.1;
  letter-spacing:-1.2px;
  font-weight:500;
  margin-top:17px
}
.artboard .canvas-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:20px
}
.canvas-grid i {
  height:60px;
  background:#ececec;
  border-radius:3px
}
.canvas-grid i:first-child {
  background:#c1cddb
}
.canvas-grid i:nth-child(2) {
  background:#abb8a4
}
.palette {
  height:100%;
  padding:22px;
  background:#fff
}
.palette h4 {
  margin:0;
  font-size:16px
}
.palette p {
  font-size:9px;
  color:#999
}
.swatches {
  display:flex;
  height:90px;
  overflow:hidden;
  border-radius:3px;
  margin-top:20px
}
.swatches i {
  flex:1;
  background:#496581
}
.swatches i:nth-child(2) {
  background:#c5d1de
}
.swatches i:nth-child(3) {
  background:#899b8d
}
.swatches i:nth-child(4) {
  background:#313942
}
.palette-labels {
  display:flex;
  justify-content:space-between;
  font:7px/3 monospace;
  color:#888
}
.dock {
  position:absolute;
  bottom:10px;
  left:50%;
  transform:translateX(-50%);
  padding:5px 7px;
  display:flex;
  align-items:center;
  gap:7px;
  border-radius:12px;
  z-index:15;
  background:#f0f0f04d;
  border:1px solid #fff3;
  backdrop-filter:blur(20px)
}
.dock>span {
  height:35px;
  width:35px;
  border-radius:8px;
  display:grid;
  place-items:center;
  box-shadow:0 2px 4px #0002;
  font-size:22px
}
.dock-finder {
  background:#91bfdc;
  color:#f3fcff
}
.dock-safari {
  background:#fcfcfc;
  color:#4d9cce
}
.dock-code {
  background:#2379a9;
  color:#a6d5ed
}
.dock-notes {
  background:linear-gradient(#ebc359 0 30%,#fbfbf4 30%);
  color:#aaa
}
.dock-terminal {
  background:#28282a;
  color:#e2e2e2;
  font:17px monospace!important
}
.dock>i {
  height:25px;
  width:1px;
  background:#fff4
}
.dock img {
  width:35px;
  height:35px;
  object-fit:contain
}
.project-toast {
  position:absolute;
  z-index:60;
  left:var(--feedback-left);
  top:var(--feedback-top);
  width:var(--feedback-width);
  height:var(--feedback-height);
  display:grid;
  place-items:center;
  transform-origin:center top;
  transform:translateY(8px) scale(calc(var(--native-scale)*.96));
  opacity:0;
  background:#282b30dd;
  color:#eee;
  padding:0;
  border:1px solid #fff2;
  box-shadow:0 5px 20px #0003;
  border-radius:10px;
  font-size:13px;
  pointer-events:none;
  transition:opacity .2s,transform .26s
}
.project-toast.show {
  transform:translateY(0) scale(var(--native-scale));
  opacity:1
}
.demo-cursor {
  width:28px;
  height:35px;
  position:absolute;
  left:0;
  top:0;
  z-index:80;
  opacity:0;
  pointer-events:none;
  transform:translate(700px,400px)
}
.demo-cursor svg {
  width:100%;
  height:100%;
  filter:drop-shadow(0 2px 2px #0004)
}
.cursor-pulse {
  position:absolute;
  width:28px;
  height:28px;
  border:1px solid #fff;
  border-radius:50%;
  left:-12px;
  top:-12px;
  opacity:0
}
.demo-cursor.press .cursor-pulse {
  animation:pulse .4s ease-out
}
@keyframes pulse {
  0% {
    opacity:.9;
    transform:scale(.4)
  }
  100% {
    opacity:0;
    transform:scale(1.4)
  }
}
/* Window content stays in native points; the whole window scales with its display. */
.native-displays {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:14px
}
.native-displays.dual-display {
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.native-displays>.screen-shell {
  min-width:0
}
.menu-bar button {
  padding:0;
  font-size:16px;
  line-height:18px
}
.notch:before {
  content:"";
  height:4px;
  width:4px;
  background:#2b3c2e;
  border-radius:50%
}
.lights {
  align-items:center
}
.lights button,.lights i {
  padding:0;
  width:8px;
  height:8px;
  min-width:0;
  min-height:0;
  border-radius:50%;
  border:1px solid #0001
}
.lights .minimize-window {
  background:#ffc12e
}
.lights .fullscreen-window {
  background:#28ca42
}
.lights button:focus-visible {
  outline:2px solid #586ea7;
  outline-offset:3px
}
.window-chrome:active {
  cursor:grabbing
}
.demo-window[data-fullscreen=true] {
  border-radius:0
}
.demo-window[data-fullscreen=true] .window-chrome {
  cursor:default
}
.native-seam {
  position:absolute;
  width:8px;
  transform:translateX(-50%);
  border-radius:4px;
  z-index:25;
  cursor:col-resize;
  touch-action:none
}
.native-seam:after {
  content:"";
  position:absolute;
  top:42%;
  bottom:42%;
  left:3px;
  width:2px;
  background:#ffffffb3;
  border-radius:3px;
  box-shadow:0 0 2px #0007
}
.native-seam:hover:after,.native-seam:focus-visible:after {
  top:37%;
  bottom:37%;
  background:#fff
}
.dock {
  transform:translateX(-50%) scale(var(--native-scale));
  transform-origin:bottom center
}
.dock-launch {
  padding:0;
  width:35px;
  height:35px;
  display:grid;
  place-items:center
}
.native-launcher {
  position:absolute;
  left:50%;
  top:calc(37px * var(--native-scale));
  width:174px;
  height:44px;
  transform:translateX(-50%) scale(var(--native-scale));
  transform-origin:top center;
  background:#292c31f2;
  color:#eee;
  border:1px solid #fff2;
  border-radius:10px;
  z-index:60;
  font-size:13px;
  box-shadow:0 5px 20px #0003
}
.native-launcher:active {
  transform:translateX(-50%) scale(var(--native-scale))
}
.has-editor .native-seam {
  pointer-events:none
}
@media(max-width:600px) {
  .native-displays.dual-display {
    grid-template-columns:minmax(0,1fr)
  }
}
.native-seam {
  width:calc(10px * var(--native-scale))
}
.native-seam:after,.native-seam:hover:after,.native-seam:focus-visible:after {
  top:25%;
  bottom:25%;
  left:30%;
  width:40%;
  background:#ffffff3d;
  box-shadow:none
}
.native-launcher {
  border-radius:22px;
  font-size:14px;
  font-weight:600
}
.notch:active {
  transform:scale(var(--native-scale))
}
.demo-cursor {
  z-index:100;
  width:calc(28px * var(--native-scale));
  height:calc(35px * var(--native-scale))
}
.cursor-pulse {
  width:calc(28px * var(--native-scale));
  height:calc(28px * var(--native-scale));
  left:calc(-12px * var(--native-scale));
  top:calc(-12px * var(--native-scale))
}