/* Decorative studio furniture; the drawing and its paint overlays stay untouched. */
.art-area{
  container-type:inline-size;
  height:clamp(462px,calc(100svh - 230px),680px);
  min-height:0;
  padding:36px 0 88px;
  isolation:isolate;
}
.art-area::after{
  content:"";
  position:absolute;
  bottom:5px;
  left:12%;
  width:76%;
  height:19px;
  background:radial-gradient(ellipse,#46392a24,transparent 68%);
  pointer-events:none;
}
.portrait-easel{
  position:relative;
  z-index:1;
  isolation:isolate;
  flex:none;
  height:min(100%,calc((100cqw - 40px) / .748));
  aspect-ratio:.748;
}
.portrait-easel .paper{
  width:100%;
  height:100%;
  max-width:none;
  transform:rotate(-.7deg);
  box-shadow:1px 2px 3px #382c2526,4px 6px 9px #382c2526;
}
.easel-frame,.easel-clamp,.easel-ledge{pointer-events:none;user-select:none}
.easel-frame{position:absolute;inset:0;z-index:-1}
.easel-mast,.easel-leg,.easel-clamp,.easel-ledge{
  position:absolute;
  border:1px solid #81613f;
  border-radius:3px 2px 2px 3px;
  background:
    repeating-linear-gradient(91deg,transparent 0 4px,#7753311c 5px,transparent 6px 11px),
    linear-gradient(90deg,#bd9564,#dcc093 23%,#c8a576 70%,#a98051);
  box-shadow:inset 1px 0 #f6dfb5a6,inset -2px 0 #7753312e,2px 3px 3px #392b2021;
}
.easel-mast{width:26px;left:calc(50% - 13px);top:-33px;bottom:-32px;background-color:#b68e5f}
.easel-mast::after{
  content:"";position:absolute;inset:8px 10px 14px;border-radius:3px;
  background:#805e3d;box-shadow:inset 1px 0 2px #4833215e;
}
.easel-leg{width:23px;left:calc(50% - 11.5px);top:5%;height:calc(95% + 96px);transform-origin:50% 0}
.easel-leg-left{transform:rotate(18deg)}
.easel-leg-right{transform:rotate(-18deg)}
.easel-clamp{
  z-index:2;top:-13px;left:calc(50% - 39px);width:78px;height:20px;
  background:
    repeating-linear-gradient(1deg,transparent 0 4px,#77533124 5px,transparent 6px 9px),
    linear-gradient(#e3c89e,#c9a473 75%,#a87f50);
  box-shadow:inset 0 1px #f6dfb5,0 3px 2px #392b203b;
}
.easel-clamp::after{
  content:"";position:absolute;width:9px;height:9px;left:calc(50% - 4.5px);top:4px;
  border:1px solid #514b43;border-radius:50%;
  background:linear-gradient(100deg,#b7af9b 43%,#625d50 44% 56%,#b7af9b 57%);
  box-shadow:0 1px 1px #48332140;
}
.easel-ledge{
  z-index:3;bottom:-14px;left:-18px;right:-18px;height:19px;
  border-bottom:3px solid #89633f;
  background:
    repeating-linear-gradient(1deg,transparent 0 3px,#77533121 4px,transparent 5px 8px),
    linear-gradient(#d7b789,#bd9464);
  box-shadow:inset 0 1px #f6dfb5,0 4px 4px #392b202e;
}
.easel-ledge::before{
  content:"";position:absolute;top:-8px;left:-1px;right:-1px;height:8px;
  background:linear-gradient(#99734c,#d9ba8c);
  clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 100%,0 100%);
}
.easel-ledge::after{
  content:"";position:absolute;left:12px;right:12px;top:6px;height:3px;
  background:radial-gradient(circle at 2px,#795a3c 1.5px,transparent 2px),radial-gradient(circle at calc(100% - 2px),#795a3c 1.5px,transparent 2px);
}
.easel-pencil{
  position:absolute;right:24px;bottom:17px;width:67px;height:4px;
  border-radius:1px;background:linear-gradient(#72785b 50%,#434b36 50%);
  transform:rotate(-2deg);box-shadow:0 2px 1px #392b2040;
}
.easel-pencil::before{
  content:"";position:absolute;left:-9px;top:0;width:9px;height:4px;
  background:linear-gradient(90deg,#343330 30%,#dbc39a 30%);
  clip-path:polygon(0 50%,100% 0,100% 100%);
}
.art-area .source-card{z-index:2;bottom:83px}
.drawing-desk:fullscreen{background:#e9e7e4;overflow:auto}
.drawing-desk:fullscreen>*{flex-shrink:0}
.drawing-desk:fullscreen .portrait-workspace{flex:none;min-height:0}
.drawing-desk:fullscreen .art-area{height:clamp(462px,calc(100svh - 300px),880px);flex:none}
.drawing-desk:fullscreen .source-card{left:0}
@media(max-width:760px){
  .art-area{height:min(550px,calc(132cqw + 112px))}
  .easel-leg{width:19px;left:calc(50% - 9.5px)}
  .art-area .source-card{bottom:81px}
}