.sheet {
  position: relative;
  width: var(--sheet-w, calc(100% - var(--frame-inset) * 2));
  
  margin: var(--frame-inset) auto var(--frame-inset)
          max(0px, min(var(--sheet-x, 0px), calc(100% - var(--sheet-w, 0px))));
  
  min-height: calc(100vh - var(--frame-inset) * 2);
  min-height: calc(100svh - var(--frame-inset) * 2);

  
  background-image:
    repeating-linear-gradient(to right,
      var(--grid-line) 0 var(--hairline),
      transparent var(--hairline) var(--cell)),
    repeating-linear-gradient(to bottom,
      var(--grid-line) 0 var(--hairline),
      transparent var(--hairline) var(--cell));
  background-position: 0 0;
}

.sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/png;base64,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");
  background-repeat: repeat;
  mix-blend-mode: multiply;
  opacity: 0.07;
}

.sheet::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--hairline);
  background: var(--grid-line);
  pointer-events: none;
}

.frame {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
}

.frame__trim {
  position: absolute;
  top: var(--frame-inset);
  bottom: var(--frame-inset);
  left: max(0px, min(var(--sheet-x, 0px), calc(100% - var(--sheet-w, 0px))));
  width: var(--sheet-w, calc(100% - var(--frame-inset) * 2));
  border: var(--hairline) solid var(--ink);
  box-shadow: 0 0 0 100vmax var(--bg);
  transition: box-shadow var(--dur) var(--ease);
}

.frame__crop {
  position: absolute;
  width: 0;
  height: 0;
}
.frame__crop::before,
.frame__crop::after {
  content: "";
  position: absolute;
  background: var(--ink);
}
.frame__crop::before { width: var(--hairline); height: var(--crop-len); }
.frame__crop::after  { height: var(--hairline); width: var(--crop-len); }

.frame__crop--tl { top: 0; left: 0; }
.frame__crop--tl::before { left: 0; bottom: var(--crop-gap); }
.frame__crop--tl::after  { top: 0; right: var(--crop-gap); }

.frame__crop--tr { top: 0; right: 0; }
.frame__crop--tr::before { right: 0; bottom: var(--crop-gap); }
.frame__crop--tr::after  { top: 0; left: var(--crop-gap); }

.frame__crop--bl { bottom: 0; left: 0; }
.frame__crop--bl::before { left: 0; top: var(--crop-gap); }
.frame__crop--bl::after  { bottom: 0; right: var(--crop-gap); }

.frame__crop--br { bottom: 0; right: 0; }
.frame__crop--br::before { right: 0; top: var(--crop-gap); }
.frame__crop--br::after  { bottom: 0; left: var(--crop-gap); }

.frame__ruler {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(max(0px, min(var(--sheet-x, 0px), calc(100% - var(--sheet-w, 0px)))) + var(--sheet-w, 0px));
  width: var(--frame-inset);
  
  background-image:
    linear-gradient(to bottom, var(--ink) 0 var(--hairline), transparent var(--hairline)),
    
    repeating-linear-gradient(to bottom,
      var(--grid-line-strong) 0 var(--hairline),
      transparent var(--hairline) calc(100% / var(--tick-per-cell)));
  background-size:
    var(--tick-major) var(--cell),
    var(--tick-minor) var(--cell);
  background-repeat: repeat-y, repeat-y;
  background-position: 8px var(--ruler-offset, 0px), 8px var(--ruler-offset, 0px);
  will-change: background-position;
}

@media (max-width: 620px) {
  .frame__ruler {
    background-position: 4px var(--ruler-offset, 0px), 4px var(--ruler-offset, 0px);
  }
}

.frame__note {
  position: fixed;
  z-index: 42;
  top: 0;
  bottom: 0;
  left: calc(max(0px, min(var(--sheet-x, 0px), calc(100% - var(--sheet-w, 0px)))) - var(--frame-inset));
  width: var(--frame-inset);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-body);
  white-space: nowrap;
}

.frame__note span {
  writing-mode: vertical-rl;
  rotate: 180deg;
}

.frame__note-btn {
  pointer-events: auto;
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}

[data-pen] .frame__note-btn { color: var(--ink-margin); }

.frame__note-btn:disabled {
  color: inherit;
  cursor: default;
  opacity: 1;
}

@media (max-width: 620px) {
  .frame__note { font-size: 8px; letter-spacing: 0.12em; }
}

.block,
.mint {
  box-shadow: inset var(--hairline) var(--hairline) 0 0 var(--grid-line);
}
.block { background: var(--bg); }

.page {
  display: grid;
  grid-template-columns:
    calc(var(--cell) * var(--gutter-cols))
    repeat(var(--cols), var(--cell))
    calc(var(--cell) * var(--gutter-cols));
  align-content: start;
}
.page > * { grid-column: 2 / calc(var(--cols) + 2); }

.margin-ink {
  position: absolute;
  
  pointer-events: none;
  z-index: 41;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cg fill='none' stroke='rgba(255,255,255,.9)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21 L6 14 L17 3 L21 7 L10 18 Z'/%3E%3Cpath d='M6 14 L10 18'/%3E%3C/g%3E%3Cg fill='none' stroke='%232a4ba8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21 L6 14 L17 3 L21 7 L10 18 Z'/%3E%3Cpath d='M6 14 L10 18'/%3E%3C/g%3E%3C/svg%3E") 3 21, crosshair;
  touch-action: auto;      
  
  overflow: hidden;
}

.margin-ink path { stroke: var(--ink-margin); }

:root[data-theme="mat"] .margin-ink { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cg fill='none' stroke='rgba(1,54,47,.55)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21 L6 14 L17 3 L21 7 L10 18 Z'/%3E%3Cpath d='M6 14 L10 18'/%3E%3C/g%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21 L6 14 L17 3 L21 7 L10 18 Z'/%3E%3Cpath d='M6 14 L10 18'/%3E%3C/g%3E%3C/svg%3E") 3 21, crosshair; }

[data-pen] .margin-ink { pointer-events: auto; }