:root {
  color-scheme: light;
  --blue: #526fe8;
  --coral: #ff8068;
  --periwinkle: #e9edff;
  --paper: #fffdf8;
  --ink: #29344e;
  --secondary: #687187;
  --sunshine: #f6d477;
  --rule: #e2e5ef;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 35px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
.page { max-width: 840px; margin: auto; padding: 0 42px; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; border-radius: 4px; }
header { height: 105px; display: flex; align-items: center; justify-content: space-between; }
.brand { font-size: 27px; letter-spacing: -1px; font-weight: 650; display: flex; align-items: center; gap: 8px; }
.made-for { font-size: 12px; color: var(--secondary); }
.hello { text-align: center; padding: 61px 0 79px; }
.sun { width: 91px; height: 91px; margin: 0 auto 23px; transform: rotate(-8deg); }
.sun svg { width: 100%; height: 100%; }
.greeting { font-size: 13px; color: var(--secondary); margin: 0 0 13px; }
h1 { font-size: clamp(40px, 7vw, 61px); font-weight: 650; letter-spacing: -2.5px; line-height: 1.12; margin: 0 0 22px; }
.intro { font-size: 17px; line-height: 1.7; color: var(--secondary); margin: 0; }
.button { margin-top: 28px; display: inline-flex; align-items: center; gap: 22px; background: var(--blue); color: white; border: 1px solid #405ccc; border-radius: 9px; padding: 13px 19px; font-size: 13px; font-weight: 600; box-shadow: 0 3px 0 #d7ddfb; transition: background .15s, transform .15s; }
.button:hover { background: #435fd6; transform: translateY(-1px); }
.release-note { font-size: 11px; color: var(--secondary); margin: 16px 0 0; }
.little-things { border-top: 1px solid var(--rule); padding-top: 32px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; }
.section-heading h2 { font-size: 16px; font-weight: 550; letter-spacing: -.2px; margin: 0; }
.section-heading > span { font-size: 30px; font-family: Georgia, serif; color: var(--sunshine); transform: rotate(-15deg); }
article { display: grid; grid-template-columns: 125px 1fr; gap: 28px; align-items: center; padding: 25px 0; }
h3 { font-size: 18px; font-weight: 600; letter-spacing: -.4px; margin: 0 0 9px; }
article p { font-size: 14px; line-height: 1.8; color: var(--secondary); margin: 0; max-width: 490px; }
.drawing { height: 90px; position: relative; display: flex; align-items: center; justify-content: center; font-family: Georgia, serif; font-style: italic; font-size: 13px; }
.folders span { position: absolute; background: var(--periwinkle); border: 1px solid #c5cdf7; border-radius: 3px 7px 7px 7px; width: 78px; height: 48px; padding: 16px 11px; transform: rotate(-10deg); left: 9px; top: 13px; color: #4054ad; }
.folders span::before { content: ""; position: absolute; width: 29px; height: 7px; top: -7px; left: -1px; border: 1px solid #c5cdf7; border-bottom: 0; border-radius: 4px 4px 0 0; background: inherit; }
.folders span:last-child { transform: rotate(8deg); background: #fff0ec; border-color: #f2c2b8; top: 35px; left: 36px; color: #9f4f40; }
.folders span:last-child::before { border-color: #f2c2b8; }
.panes { gap: 5px; transform: rotate(-4deg); }
.panes span { width: 50px; height: 64px; border: 1px solid #c5cdf7; background: var(--periwinkle); border-radius: 5px; display: grid; place-items: center; color: #4054ad; }
.panes span:last-child { background: #fff0ec; border-color: #f2c2b8; color: #9f4f40; }
.keys { gap: 7px; transform: rotate(5deg); }
kbd { font-family: inherit; font-style: normal; display: grid; place-items: center; border: 1px solid #cbd1e7; border-bottom-width: 4px; background: #f6f7ff; border-radius: 8px; width: 43px; height: 44px; font-size: 22px; color: var(--ink); }
.illustration-note { font-size: 10px; color: var(--secondary); margin: 19px 0 0; text-align: center; }
.note { margin: 57px 0 0; padding: 29px 32px; background: #f4f6ff; border: 1px solid #dce2fb; border-radius: 3px 14px 14px 14px; position: relative; }
.note-label { font-size: 11px; color: #5263a7; }
.note h2 { font-size: 20px; letter-spacing: -.5px; font-weight: 600; margin: 14px 0 10px; }
.note p { font-size: 13px; line-height: 1.8; max-width: 570px; color: var(--secondary); margin: 0; }
.note .signoff { margin-top: 20px; color: #536079; }
.signoff span { color: #b88a26; margin-left: 4px; }
footer { margin-top: 55px; padding: 25px 0 31px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; font-size: 11px; color: var(--secondary); }
.footer-dot { padding: 0 7px; color: var(--coral); }
footer a:hover { text-decoration: underline; }
@media (max-width: 560px) {
  .page { padding: 0 24px; }
  header { height: 82px; }
  .made-for { font-size: 10px; }
  .hello { padding: 40px 0 55px; }
  .sun { width: 78px; height: 78px; }
  h1 { letter-spacing: -1.8px; }
  .intro { font-size: 15px; }
  .desktop { display: none; }
  .section-heading h2 { font-size: 14px; }
  .section-heading > span { font-size: 23px; }
  article { grid-template-columns: 82px 1fr; gap: 18px; padding: 24px 0; }
  .drawing { transform: scale(.75); transform-origin: left center; width: 115px; }
  h3 { font-size: 16px; }
  article p { font-size: 13px; }
  .note { padding: 25px 23px; margin-top: 40px; }
  .note h2 { font-size: 18px; }
  footer { font-size: 10px; gap: 20px; line-height: 1.7; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button { transition: none; }
}