:root {
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  color:#242424;
  background:#fdfdfd;
  font-synthesis:none;
  --muted:#8b8b8b;
  --blue:#2da4c5;
  --radius:24px;
  --ease:cubic-bezier(.22,1,.36,1);
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
}
button,input,textarea {
  font:inherit;
}
button,a,input {
  -webkit-tap-highlight-color:transparent;
}
button {
  border:0;
  color:inherit;
  background:none;
  cursor:pointer;
  padding:0;
}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible {
  outline:2px solid #3799b7;
  outline-offset:5px;
}
svg {
  width:16px;
  height:16px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
}
p,h2 {
  margin:0;
  font-size:inherit;
  font-weight:400;
}
a {
  color:inherit;
  text-decoration:none;
}
small,.muted {
  color:var(--muted);
}
small {
  font-size:12px;
}
.gallery {
  max-width:1120px;
  margin:0 auto;
  padding:94px 0 64px;
  display:grid;
  grid-template-columns:repeat(3,344px);
  column-gap:47px;
  row-gap:50px;
  align-items:start;
}
.playground {
  min-width:0;
}
.card-label {
  height:27px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding:0 8px;
  color:var(--muted);
  font-size:12px;
}
.card-label button {
  display:flex;
  justify-content:space-between;
  width:100%;
  text-align:left;
}
.card-label svg {
  width:13px;
  height:13px;
  opacity:0;
  transition:opacity .2s;
}
.playground:hover .card-label svg,.card-label button:focus-visible svg {
  opacity:1;
}
.card-home {
  position:relative;
}
.card {
  position:relative;
  width:100%;
  border-radius:var(--radius);
  border:1px solid #ececec;
  background:#fdfdfd;
  box-shadow:0 2px 3px #00000003,0 12px 22px -16px #00000012;
  padding:23px;
  overflow:hidden;
  font-size:14px;
  line-height:1.55;
  isolation:isolate;
  cursor:zoom-in;
}
.card h2 {
  font-size:16px;
  line-height:22px;
  letter-spacing:-.3px;
}
.card-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.card-top small {
  font-size:12px;
}
.icon-button {
  width:30px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:var(--muted);
}
.icon-button:hover {
  background:#00000006;
  color:#222;
}
.music {
  height:196px;
}
.music-main {
  display:flex;
  gap:24px;
  height:94px;
}
.album {
  height:94px;
  width:94px;
  border-radius:7px;
  object-fit:cover;
}
.track {
  padding-top:0;
  flex:1;
}
.track p {
  color:var(--muted);
  margin-top:1px;
}
.transport {
  display:flex;
  align-items:center;
  gap:13px;
  margin-top:7px;
}
.transport .main-play {
  background:#222;
  color:white;
  width:40px;
  height:40px;
}
.progress {
  width:100%;
  height:4px;
  margin-top:19px;
  display:block;
  appearance:none;
  border:0;
  border-radius:4px;
  cursor:pointer;
  background:linear-gradient(to right,#7c7c7c var(--progress,56%),#e8e8e8 var(--progress,56%));
  padding:0;
}
.progress::-webkit-slider-thumb {
  appearance:none;
  width:9px;
  height:12px;
  border-radius:5px;
  background:#777;
  opacity:0;
}
.progress:hover::-webkit-slider-thumb,.progress:focus-visible::-webkit-slider-thumb {
  opacity:1;
}
.progress::-moz-range-thumb {
  border:0;
  width:9px;
  height:12px;
  background:#777;
}
.time-row {
  display:flex;
  justify-content:space-between;
  margin-top:10px;
  font-size:12px;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.focus {
  height:298px;
  background:radial-gradient(ellipse at 20% 0%,#29394f 0%,transparent 61%),radial-gradient(ellipse at 96% 100%,#1d2d43,transparent 59%),#181b29;
  color:#f3f4f8;
  border:0;
  padding:24px;
}
.focus .card-top small {
  color:#ced1db;
}
.dial {
  width:164px;
  height:164px;
  margin:17px auto 11px;
  position:relative;
  display:grid;
  place-items:center;
}
.dial svg {
  width:164px;
  height:164px;
  position:absolute;
  inset:0;
}
.dial time {
  font-size:40px;
  line-height:1;
  letter-spacing:-1.8px;
  font-variant-numeric:tabular-nums;
}
.focus-actions {
  display:flex;
  justify-content:center;
  gap:16px;
}
.focus-actions button {
  height:40px;
  background:#ffffff28;
  color:#e0e3ec;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:25px;
  padding:0 20px;
  font-size:14px;
}
.focus-actions button:first-child {
  width:40px;
  padding:0;
}
.focus-actions button:hover {
  background:#ffffff38;
}
.flight {
  height:220px;
}
.airport-row {
  display:flex;
  justify-content:space-between;
  margin-top:17px;
}
.airport-row strong {
  font-weight:400;
  font-size:34px;
  letter-spacing:-1px;
  line-height:39px;
}
.airport-row small {
  display:block;
  line-height:18px;
}
.airport-row>div:last-child {
  text-align:right;
}
.flight-path {
  height:4px;
  background:#ededed;
  border-radius:4px;
  margin:21px 0 14px;
  position:relative;
}
.flight-path:before {
  content:'';
  width:58%;
  background:var(--blue);
  position:absolute;
  height:100%;
  border-radius:4px;
}
.flight-path svg {
  position:absolute;
  color:#4b9fba;
  left:56%;
  top:-6px;
  background:#fdfdfd;
  width:16px;
  height:16px;
}
.flight-times {
  display:flex;
  justify-content:space-between;
  line-height:20px;
}
.flight-times strong {
  font-size:16px;
  font-weight:400;
  display:block;
}
.flight-times>div:last-child {
  text-align:right;
}
.flight-times small {
  display:block;
}
.location {
  height:298px;
  border:0;
  background:#99dff0;
  padding:0;
}
.map-image {
  position:absolute;
  inset:0;
  width:100%;
  height:auto;
  mask-image:linear-gradient(#000 83%,transparent);
}
.location:after {
  content:'';
  position:absolute;
  inset:58% 0 0;
  background:linear-gradient(transparent,#f6fdff 94%);
  pointer-events:none;
}
.location-caption {
  position:absolute;
  bottom:25px;
  left:24px;
  z-index:1;
  line-height:24px;
}
.location-caption h2 {
  font-size:16px;
  letter-spacing:-.3px;
}
.weather {
  height:180px;
  border:0;
  color:#eff9fe;
  padding:24px;
  background:linear-gradient(180deg,transparent,#6f9cbe),linear-gradient(110deg,#80aaca,#a0c8e2);
}
.weather h2 {
  color:#eef8fd;
}
.temperature-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:65px;
}
.temperature {
  font-size:50px;
  line-height:1;
  font-weight:400;
  letter-spacing:-1.7px;
}
.temperature-unit {
  display:inline;
  margin-left:3px;
  font-size:12px;
  color:#d4e6f1;
  vertical-align:baseline;
}
.condition {
  font-size:14px;
  color:#eef8fd;
}
.forecast {
  display:flex;
  justify-content:space-between;
  font-size:14px;
  line-height:24px;
}
.forecast div {
  text-align:center;
}
.forecast span {
  display:block;
  color:#d5e8f3;
}
.news {
  height:268px;
}
.stories {
  display:grid;
  gap:14px;
  margin-top:24px;
}
.story {
  display:flex;
  text-align:left;
  align-items:center;
  gap:16px;
  border-radius:6px;
}
.story img {
  width:46px;
  height:46px;
  border-radius:7px;
  object-fit:cover;
}
.story p {
  font-size:14px;
  line-height:23px;
  white-space:nowrap;
}
.story small {
  font-size:14px;
  line-height:20px;
  display:block;
  white-space:nowrap;
}
.inbox {
  height:382px;
}
.inbox .card-top {
  margin-bottom:24px;
}
.inbox-heading {
  display:flex;
  align-items:center;
  gap:8px;
}
.search-box {
  display:flex;
  align-items:center;
  gap:6px;
  background:#f6f6f6;
  border-radius:6px;
  height:29px;
  padding:0 9px;
  width:94px;
  color:#888;
}
.search-box svg {
  flex-shrink:0;
  width:13px;
  height:13px;
}
.search-box input {
  width:100%;
  min-width:0;
  font-size:12px;
  color:#333;
  background:none;
  border:0;
  padding:0;
  outline-offset:2px;
}
.message-list {
  display:grid;
  gap:17px;
}
.message {
  padding-left:16px;
  position:relative;
  text-align:left;
  display:block;
  width:100%;
}
.message[data-unread="true"]:before {
  content:'';
  position:absolute;
  left:0;
  top:7px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--blue);
}
.message-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:2px;
  font-size:14px;
}
.message time {
  font-size:12px;
  color:var(--muted);
}
.message p {
  font-size:14px;
  color:var(--muted);
  line-height:24px;
}
.attachments {
  height:30px;
  width:78px;
  display:block;
  margin-top:8px;
  object-fit:contain;
}
.empty-message {
  color:var(--muted);
  padding-top:32px;
}
.note {
  height:234px;
}
.note textarea {
  display:block;
  width:100%;
  height:103px;
  margin-top:18px;
  resize:none;
  border:0;
  background:none;
  padding:0;
  font-family:'Times New Roman',Georgia,serif;
  font-size:27px;
  letter-spacing:-1.1px;
  line-height:1.15;
  color:#242424;
  overflow:hidden;
}
.note-status {
  display:inline-block;
  color:#77702b;
  background:#fcf6a9;
  line-height:24px;
  padding:0 7px;
  border-radius:7px;
  font-size:12px;
  margin-top:9px;
}
.mood {
  height:344px;
}
.mood-images {
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:114px 114px;
  gap:8px;
}
.mood-images img {
  height:100%;
  width:100%;
  border-radius:7px;
  object-fit:cover;
}
.collection-caption {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:15px;
  line-height:23px;
}
.collection-caption h2 {
  font-size:16px;
}
.collection-caption p {
  color:var(--muted);
  font-size:14px;
}
.collection-caption small {
  font-size:12px;
  white-space:nowrap;
}
.upnext {
  height:234px;
}
.upnext .card-top svg,.activity .card-top svg {
  color:#888;
}
.event-time {
  font-size:48px;
  line-height:1.1;
  margin:11px 0 12px;
  letter-spacing:-2px;
}
.event-time small {
  color:#333;
  font-size:12px;
  margin-left:7px;
  letter-spacing:0;
}
.event-meta {
  font-size:14px;
  line-height:23px;
}
.event-meta p:last-child {
  color:var(--muted);
}
.event-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:10px;
}
.guests {
  width:80px;
  height:34px;
  object-fit:contain;
}
.directions {
  display:flex;
  align-items:center;
  gap:7px;
  padding:10px 14px;
  background:#f3f3f3;
  border-radius:24px;
  font-size:12px;
  line-height:19px;
}
.directions svg {
  width:15px;
  height:15px;
}
.directions:hover {
  background:#ebebeb;
}
.running {
  height:312px;
  padding:0;
  background:#1a363d;
  border:0;
}
.running video {
  position:absolute;
  inset:0;
  height:100%;
  width:100%;
  object-fit:cover;
}
.running:after {
  content:'';
  position:absolute;
  inset:65% 0 0;
  background:linear-gradient(transparent,#001117d9);
  pointer-events:none;
}
.running-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:absolute;
  bottom:24px;
  left:24px;
  right:24px;
  z-index:1;
  color:white;
}
.running-bottom h2 {
  font-size:16px;
}
.running-actions {
  display:flex;
  gap:18px;
}
.running-actions button {
  color:white;
  width:24px;
  height:26px;
  display:grid;
  place-items:center;
}
.activity {
  height:226px;
}
.activity-value {
  margin-top:9px;
  font-size:48px;
  line-height:1.05;
  letter-spacing:-1px;
}
.activity-value small {
  font-size:12px;
  letter-spacing:0;
  margin-left:6px;
}
.chart {
  height:82px;
  display:flex;
  align-items:flex-end;
  gap:7px;
  margin-top:13px;
}
.chart button {
  height:82px;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-direction:column;
  gap:1px;
  font-size:12px;
  color:#999;
}
.bar {
  display:block;
  width:100%;
  min-height:3px;
  background:#d5e7ed;
  border-radius:3px 3px 2px 2px;
  transition:background .2s,height .3s var(--ease);
}
.chart [aria-pressed="true"] .bar {
  background:#2ba2c6;
}
.chart button:hover .bar {
  background:#87c4d8;
}
.grass {
  height:344px;
}
.grass-images {
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:114px 114px;
  gap:8px;
}
.grass-images button {
  border-radius:7px;
  overflow:hidden;
  min-width:0;
}
.grass-images button:first-child {
  grid-row:span 2;
}
.grass-images video {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.grass .collection-caption {
  margin-top:15px;
}
.inspector {
  padding:0;
  border:0;
  width:100vw;
  max-width:none;
  height:100dvh;
  max-height:none;
  background:transparent;
  overflow:hidden;
  margin:0;
  color:#242424;
}
.inspector::backdrop {
  background:#fdfdfd;
  opacity:0;
  transition:opacity .4s;
}
.inspector.is-open::backdrop {
  opacity:1;
}
.inspection-stage {
  position:absolute;
  left:50%;
  top:50%;
  width:1014px;
  transform:translate(-50%,-50%);
  display:flex;
  gap:64px;
  align-items:center;
  --scale:1.378;
  --display-height:410.64px;
  --display-radius:33.07px;
  height:var(--display-height);
  transition:height .58s var(--ease),width .58s var(--ease);
  pointer-events:none;
}
.inspector:not(.show-grid) .inspection-stage {
  width:calc(344px * var(--scale));
}
.inspector:not(.show-grid) .wireframe,
.inspector:not(.show-grid) .measurements {
  opacity:0;
  visibility:hidden;
}
.live-slot {
  width:474px;
  height:var(--display-height);
  position:relative;
  flex:none;
  transition:height .58s var(--ease);
  pointer-events:auto;
}
.live-slot .card {
  width:344px;
  transform:scale(var(--scale));
  transform-origin:top left;
  position:absolute;
  left:0;
  top:0;
  cursor:default;
  will-change:transform;
}
.wireframe {
  height:var(--display-height);
  width:474px;
  flex:none;
  position:relative;
  border-radius:var(--display-radius);
  overflow:hidden;
  opacity:0;
  transition:height .58s var(--ease),border-radius .4s,opacity .28s;
  background-color:#fdfdfd;
  background-image:linear-gradient(#7b83d491 1px,transparent 1px),linear-gradient(90deg,#7b83d491 1px,transparent 1px);
  background-size:10.76px 10.76px;
  background-position:0 0;
}
.is-open .wireframe {
  opacity:1;
  transition-delay:0s,0s,.12s;
}
.wireframe-inset {
  position:absolute;
  inset:32px;
  background:transparent;
  border:1px dashed #cf8ddd;
  box-shadow:0 0 0 32px #c991df18;
}
.measurements {
  position:absolute;
  left:1046px;
  top:32px;
  bottom:32px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  white-space:nowrap;
  opacity:0;
  transition:opacity .25s;
}
.is-open .measurements {
  opacity:1;
  transition-delay:.2s;
}
.measurements label {
  font-family:monospace;
  font-size:16px;
  letter-spacing:.4px;
  color:#969696;
  line-height:27px;
  display:flex;
  flex-direction:column;
  pointer-events:auto;
}
.measurements output,.measurements span {
  color:#333;
}
.measurements input {
  background:none;
  border:0;
  width:24px;
  padding:0;
  color:inherit;
  font:inherit;
  appearance:textfield;
  outline-offset:3px;
}
.measurements input::-webkit-inner-spin-button {
  appearance:none;
}
.inspection-controls {
  position:absolute;
  bottom:30px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:13px;
  color:#8b8b8b;
  font-size:12px;
  background:#fdfdfdeb;
  border:1px solid #eee;
  border-radius:28px;
  padding:7px 11px;
  opacity:0;
  transition:opacity .2s;
}
.inspector:hover .inspection-controls,.inspection-controls:focus-within {
  opacity:1;
}
.inspection-controls button {
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:50%;
}
.inspection-controls button:hover,
.inspection-controls button[aria-pressed="true"] {
  background:#f1f1f1;
  color:#333;
}
.inspection-controls span {
  min-width:98px;
  text-align:center;
}
body.inspecting {
  overflow:hidden;
}
.gallery.is-muted {
  visibility:hidden;
}
@media(min-width:1800px) {
  .gallery {
    padding-top:110px;
  }
}
@media(max-width:1370px) {
  .gallery {
    max-width:1000px;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:48px 32px;
    padding-inline:24px;
  }
  .card {
    padding:20px;
  }
  .focus,.weather {
    padding:21px;
  }
  .location,.running {
    padding:0;
  }
  .music-main {
    gap:17px;
  }
  .track h2 {
    font-size:15px;
  }
  .transport {
    gap:8px;
  }
  .album {
    width:84px;
    height:94px;
    object-fit:cover;
  }
  .story {
    gap:12px;
  }
  .story p,.story small {
    font-size:12px;
  }
  .story img {
    width:42px;
    height:46px;
  }
  .note textarea {
    font-size:25px;
  }
  .inspection-stage {
    --scale:1.12;
    width:802px;
    gap:32px;
  }
  .live-slot,.wireframe {
    width:385.28px;
  }
  .measurements {
    left:826px;
    font-size:13px;
  }
  .measurements label {
    font-size:13px;
  }
  .wireframe-inset {
    inset:26px;
  }
  .live-slot .card {
    padding:23px;
  }
  .live-slot .location,.live-slot .running {
    padding:0;
  }
  .live-slot .album {
    width:94px;
  }
  .live-slot .story p,.live-slot .story small {
    font-size:14px;
  }
  .live-slot .story img {
    width:46px;
  }
  .live-slot .music-main {
    gap:24px;
  }
  .live-slot .note textarea {
    font-size:27px;
  }
}
@media(max-width:1020px) {
  .gallery {
    max-width:764px;
    grid-template-columns:repeat(2,minmax(0,344px));
    padding-top:48px;
    gap:36px 28px;
  }
  .card {
    padding:23px;
  }
  .focus,.weather {
    padding:24px;
  }
  .location,.running {
    padding:0;
  }
  .album {
    width:94px;
  }
  .music-main {
    gap:24px;
  }
  .story p,.story small {
    font-size:14px;
  }
  .story img {
    width:46px;
  }
  .note textarea {
    font-size:27px;
  }
  .inspection-stage {
    --scale:1;
    width:736px;
    gap:48px;
  }
  .live-slot,.wireframe {
    width:344px;
  }
  .measurements {
    left:auto;
    right:0;
    top:auto;
    bottom:-62px;
    width:344px;
    flex-direction:row;
  }
  .measurements label {
    font-size:12px;
    line-height:20px;
  }
  .wireframe-inset {
    inset:24px;
  }
  .wireframe {
    background-size:8px 8px;
  }
  .inspection-controls {
    opacity:1;
  }
}
@media(max-width:790px) {
  .inspection-stage {
    --scale:1;
    width:344px;
    gap:0;
  }
  .wireframe {
    display:none;
  }
  .measurements {
    width:344px;
  }
  .inspector .inspection-controls {
    bottom:20px;
  }
  .gallery {
    padding-inline:20px;
    column-gap:20px;
  }
  .card {
    padding:20px;
  }
  .focus,.weather {
    padding:21px;
  }
  .location,.running {
    padding:0;
  }
  .music-main {
    gap:16px;
  }
  .album {
    width:84px;
  }
  .story p,.story small {
    font-size:12px;
  }
  .story img {
    width:40px;
  }
  .story {
    gap:10px;
  }
  .note textarea {
    font-size:25px;
  }
}
@media(max-width:640px) {
  .inspection-controls {
    gap:8px;
  }
  .inspection-controls span {
    min-width:86px;
  }
  .gallery {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:34px;
    padding:30px 20px 40px;
  }
  .playground {
    width:344px;
    max-width:100%;
  }
  .card {
    padding:23px;
  }
  .focus,.weather {
    padding:24px;
  }
  .location,.running {
    padding:0;
  }
  .album {
    width:94px;
  }
  .music-main {
    gap:24px;
  }
  .story p,.story small {
    font-size:14px;
  }
  .story img {
    width:46px;
  }
  .story {
    gap:16px;
  }
  .note textarea {
    font-size:27px;
  }
}
@media(max-width:374px) {
  .gallery {
    padding-inline:12px;
  }
  .inspection-stage {
    --scale:.88;
    width:302.72px;
  }
  .live-slot {
    width:302.72px;
  }
  .measurements {
    width:302.72px;
  }
  .card {
    padding:18px;
  }
  .location,.running {
    padding:0;
  }
  .music-main {
    gap:16px;
  }
  .album {
    width:84px;
  }
  .story p,.story small {
    font-size:12px;
  }
  .note textarea {
    font-size:25px;
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}