.desk-study{margin:35px 6% 70px}.desk-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.desk-heading h2{font:18px/1.5 Departure,monospace}
.desk-study .desk-surface{position:relative;--desk-height:820px;height:var(--desk-height);display:block!important;border:1px solid var(--line);border-radius:5px;background:radial-gradient(#b5c2a31c .65px,transparent 1px) 0 0/12px 12px,linear-gradient(125deg,#131710,#090b08);box-shadow:inset 0 1px #ffffff0a,0 12px 35px #0005;overflow:clip;isolation:isolate}
[data-theme=forest] .desk-study .desk-surface{background:radial-gradient(#c6d7ab18 .65px,transparent 1px) 0 0/12px 12px,linear-gradient(125deg,#244733,#193426)}
.desk-study #music-art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1;opacity:.85}
.desk-study .desk-player{position:absolute;width:300px;max-width:40%;padding:0;z-index:2;display:block}.desk-study .desk-player .ipod{width:100%}
.desk-grip{display:block;width:60px;margin:0 auto 8px;padding:0;border:0;background:none;color:var(--soft);cursor:grab;touch-action:none;font:16px/1 Departure,monospace;letter-spacing:5px}
.desk-study .sticky{width:220px}
[data-desk-item][data-dragging=true]{z-index:4;cursor:grabbing}.desk-study #clear-drawing{display:grid!important}
@media(max-width:900px){.desk-study .desk-surface{--desk-height:950px}.desk-study .desk-player{width:250px}.desk-study .sticky{width:200px}}
@media(max-width:700px){.desk-study{margin:25px 5% 50px}.desk-study .desk-surface{--desk-height:1370px}.desk-study .desk-player{max-width:80%;width:260px}.desk-study .sticky{width:175px}}
#note-drawing[data-sand=true]{cursor:crosshair}

.desk-surface.pointer-drag-focus :focus{outline:none}
.drawing-modes{display:flex;gap:4px}.drawing-modes [aria-pressed=true]{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.desk-heading{gap:16px;flex-wrap:wrap}
@media(max-width:700px){.desk-heading>.note-tools{width:100%;justify-content:space-between;gap:8px}}

#touch-drawing{display:none}
@media(pointer:coarse){
  #touch-drawing{display:grid}
  .desk-study #note-drawing{touch-action:pan-y pinch-zoom}
  .desk-study #note-drawing[data-touch-drawing=true]{touch-action:none}
  #touch-drawing[aria-pressed=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
  .desk-grip,.note-handle{min-height:44px}
  .desk-heading .icon-button{width:44px;height:44px;padding:11px;flex-shrink:0}
  .desk-heading>.note-tools{flex-wrap:wrap;gap:8px}
  .desk-heading .text-link{flex-basis:100%;min-height:32px}
}

@media(pointer:coarse){
  .desk-heading button{touch-action:manipulation}
  .desk-heading #touch-drawing{width:64px;display:flex;align-items:center;justify-content:center;gap:5px;padding:6px}
  #touch-drawing svg{width:16px;height:16px;flex-shrink:0}
  #touch-drawing span{font:10px/1 Departure,monospace}
}

@media(pointer:coarse){.board .note-open,.board .note-handle{filter:none}}

@media(pointer:coarse){
  .desk-study .board.is-interactive .sticky{width:min(220px,calc(100% - 48px))}
  .note-open.pixel-handwriting{position:relative}
  .note-open.pixel-handwriting>strong,.note-open.pixel-handwriting>span,.note-open.pixel-handwriting>time{opacity:0}
  .note-open>.handwriting-bitmap{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;pointer-events:none}
}