/* v3: very pale mint-blue workspace, with two independent paper studies. */
body { background:#f3f9f7; }
.versions,.faq { background:#fff; box-shadow:0 0 0 24px #fff; }
.hero-desk { min-height:565px; }
.hero-desk::before { top:74px; bottom:27px; }
.hero-desk .paper-note { top:7px; left:0; border-bottom-width:2px; font-size:10px; }
.first-tool-label { position:absolute; z-index:4; top:47px; right:-2px; padding:7px 12px; background:var(--yellow); color:#142d25; font-size:10px; letter-spacing:.03em; transform:rotate(4deg); box-shadow:2px 3px 0 #203e350b; }
.first-tool-label b { margin-left:6px; font:700 10px Arial,sans-serif; letter-spacing:.05em; }
.hero-desk .draft-paper { position:absolute; aspect-ratio:210 / 297; margin:0; display:flex; flex-direction:column; padding:21px 18px 16px; background:#fff; box-shadow:0 0 0 1px #c8d7d0,5px 10px 15px #24483b0a; }
.hero-desk .paper-top { margin-bottom:10px; padding-bottom:10px; flex-shrink:0; }
.hero-desk .paper-bottom { margin-top:10px; padding-top:10px; flex-shrink:0; }
.hero-desk .study-art { width:100%; flex:1; min-height:0; }
.hero-desk .paper-line { z-index:1; width:68%; left:28%; top:62px; transform:rotate(8deg); }
.hero-desk .paper-ellipse { z-index:2; width:74%; left:4%; top:153px; transform:rotate(-7deg); }
.hero-desk .brand-stamp { z-index:3; width:112px; right:-2px; bottom:-8px; background:transparent; }
.hero-desk .brand-stamp img { width:112px; height:112px; }
.hero-desk .desk-ruler { top:119px; right:-14px; height:318px; }
.hero-desk .desk-caption { bottom:3px; }
@media(max-width:1100px) {
  .hero-desk { min-height:530px; }
  .hero-desk .draft-paper { padding:18px 14px 14px; }
  .hero-desk .brand-stamp,.hero-desk .brand-stamp img { width:100px; height:100px; }
  .first-tool-label { right:0; top:48px; padding:6px 10px; }
}
@media(max-width:800px) {
  .hero-desk { min-height:460px; }
  .hero-desk .paper-line { top:76px; }
  .hero-desk .paper-ellipse { top:156px; }
  .hero-desk .draft-paper { padding:15px 10px 12px; }
  .hero-desk .paper-top,.hero-desk .paper-bottom { font-size:7px; }
  .hero-desk .paper-top { padding-bottom:7px; margin-bottom:7px; }
  .hero-desk .paper-bottom { padding-top:7px; margin-top:7px; }
  .hero-desk .paper-note { font-size:9px; }
  .first-tool-label { top:53px; font-size:9px; }
  .first-tool-label b { font-size:9px; }
  .hero-desk .brand-stamp,.hero-desk .brand-stamp img { width:85px; height:85px; }
  .hero-desk .desk-ruler { top:130px; height:235px; right:-9px; }
}
@media(max-width:600px) {
  .versions,.faq { box-shadow:0 0 0 14px #fff; }
  .hero-desk { min-height:520px; margin-top:35px; }
  .hero-desk .draft-paper { padding:18px 13px 14px; }
  .hero-desk .paper-top,.hero-desk .paper-bottom { font-size:8px; }
  .hero-desk .paper-line { top:72px; }
  .hero-desk .paper-ellipse { top:166px; }
  .hero-desk .paper-note { top:12px; left:8px; font-size:10px; }
  .first-tool-label { top:52px; right:3px; font-size:10px; padding:7px 12px; }
  .first-tool-label b { font-size:10px; }
  .hero-desk .brand-stamp,.hero-desk .brand-stamp img { width:98px; height:98px; }
  .hero-desk .brand-stamp { right:0; bottom:-8px; }
  .hero-desk .desk-ruler { right:0; top:126px; height:280px; }
  .hero-desk .desk-caption { left:9px; bottom:2px; }
}