soroban-abacus-flashcards/packages/templates/crop-marks-demo.html

2399 lines
124 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>🧮 Crop Marks Demonstration</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family:
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
line-height: 1.6;
color: #333;
background: #f5f5f5;
padding: 20px;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
.header {
text-align: center;
margin-bottom: 40px;
padding: 40px 20px;
background: white;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.header h1 {
font-size: 2.5rem;
margin-bottom: 10px;
color: #2c3e50;
}
.header p {
font-size: 1.1rem;
color: #666;
margin-bottom: 15px;
}
.comparison {
background: white;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
margin-bottom: 40px;
overflow: hidden;
}
.comparison-header {
background: #2c3e50;
color: white;
padding: 20px;
text-align: center;
}
.comparison-title {
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 10px;
}
.comparison-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
font-size: 0.9rem;
}
.stat-item {
background: rgba(255, 255, 255, 0.1);
padding: 8px 12px;
border-radius: 6px;
}
.stat-label {
font-weight: 600;
margin-bottom: 4px;
}
.stat-value {
font-family: "Monaco", "Consolas", monospace;
font-size: 0.8rem;
opacity: 0.9;
}
.comparison-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
}
.comparison-side {
padding: 30px;
display: flex;
flex-direction: column;
align-items: center;
min-height: 400px;
}
.comparison-side.before {
background: #ffeaa7;
border-right: 3px solid #fdcb6e;
}
.comparison-side.after {
background: #a8e6cf;
}
.side-label {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 20px;
padding: 8px 16px;
border-radius: 20px;
color: white;
}
.before .side-label {
background: #e17055;
}
.after .side-label {
background: #00b894;
}
.svg-container {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
}
.svg-container svg {
max-width: 100%;
max-height: 300px;
border: 2px solid rgba(0, 0, 0, 0.1);
border-radius: 8px;
background: white;
}
.viewbox-info {
margin-top: 15px;
font-family: "Monaco", "Consolas", monospace;
font-size: 0.8rem;
color: #666;
text-align: center;
background: rgba(255, 255, 255, 0.8);
padding: 8px 12px;
border-radius: 6px;
max-width: 100%;
word-break: break-all;
}
.footer {
text-align: center;
margin-top: 40px;
padding: 30px;
background: white;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
color: #666;
}
@media (max-width: 768px) {
.comparison-content {
grid-template-columns: 1fr;
}
.comparison-side.before {
border-right: none;
border-bottom: 3px solid #fdcb6e;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>🧮 Crop Marks Demonstration</h1>
<p>
Automatic SVG viewBox cropping using embedded crop mark annotations
</p>
<p style="font-size: 0.9rem; color: #999">
Shows before/after comparison of viewBox optimization
</p>
</div>
<div class="comparison">
<div class="comparison-header">
<div class="comparison-title">debug-crop-marks-89</div>
<div class="comparison-stats">
<div class="stat-item">
<div class="stat-label">Original ViewBox</div>
<div class="stat-value">0 0 270 210</div>
</div>
<div class="stat-item">
<div class="stat-label">Cropped ViewBox</div>
<div class="stat-value">88.65 21.5 89.70000000000002 132</div>
</div>
<div class="stat-item">
<div class="stat-label">Size Reduction</div>
<div class="stat-value">79%</div>
</div>
</div>
</div>
<div class="comparison-content">
<div class="comparison-side before">
<div class="side-label">🎯 Before: Original ViewBox</div>
<div class="svg-container">
<svg
class="typst-doc"
viewBox="0 0 270 210"
width="270pt"
height="210pt"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:h5="http://www.w3.org/1999/xhtml"
>
<path
class="typst-shape"
fill="#ffffff"
fill-rule="nonzero"
d="M 0 0 L 0 210 L 270 210 L 270 0 Z "
/>
<g>
<g transform="translate(97.5 17.5)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<g class="typst-group">
<g>
<g transform="translate(16.5 26)">
<path
class="typst-shape"
fill="#eeeeee"
fill-rule="nonzero"
d="M 0 0 L 0 104.5 L 4.5 104.5 L 4.5 0 Z "
/>
</g>
<g transform="translate(6.150000000000001 26)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<path
class="typst-shape"
fill="#a23b72"
fill-rule="nonzero"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 12.6 0 L 25.2 9 L 12.6 18 L 0 9 Z "
/>
</g>
</g>
</g>
</g>
<g transform="translate(6.150000000000001 49)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<path
class="typst-shape"
fill="#a23b72"
fill-rule="nonzero"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 12.6 0 L 25.2 9 L 12.6 18 L 0 9 Z "
/>
</g>
</g>
</g>
</g>
<g transform="translate(6.150000000000001 67.75)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<path
class="typst-shape"
fill="#a23b72"
fill-rule="nonzero"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 12.6 0 L 25.2 9 L 12.6 18 L 0 9 Z "
/>
</g>
</g>
</g>
</g>
<g transform="translate(6.150000000000001 86.5)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<path
class="typst-shape"
fill="#a23b72"
fill-rule="nonzero"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 12.6 0 L 25.2 9 L 12.6 18 L 0 9 Z "
/>
</g>
</g>
</g>
</g>
<g transform="translate(6.150000000000001 112.5)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<path
class="typst-shape"
fill="#e6e6e6"
fill-rule="nonzero"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 12.6 0 L 25.2 9 L 12.6 18 L 0 9 Z "
/>
</g>
</g>
</g>
</g>
<g transform="translate(54 26)">
<path
class="typst-shape"
fill="#eeeeee"
fill-rule="nonzero"
d="M 0 0 L 0 97.25 L 4.5 97.25 L 4.5 0 Z "
/>
</g>
<g transform="translate(43.65 26)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<path
class="typst-shape"
fill="#2e86ab"
fill-rule="nonzero"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 12.6 0 L 25.2 9 L 12.6 18 L 0 9 Z "
/>
</g>
</g>
</g>
</g>
<g transform="translate(43.65 49)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<path
class="typst-shape"
fill="#2e86ab"
fill-rule="nonzero"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 12.6 0 L 25.2 9 L 12.6 18 L 0 9 Z "
/>
</g>
</g>
</g>
</g>
<g transform="translate(43.65 67.75)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<path
class="typst-shape"
fill="#2e86ab"
fill-rule="nonzero"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 12.6 0 L 25.2 9 L 12.6 18 L 0 9 Z "
/>
</g>
</g>
</g>
</g>
<g transform="translate(43.65 86.5)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<path
class="typst-shape"
fill="#2e86ab"
fill-rule="nonzero"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 12.6 0 L 25.2 9 L 12.6 18 L 0 9 Z "
/>
</g>
</g>
</g>
</g>
<g transform="translate(43.65 105.25)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<path
class="typst-shape"
fill="#2e86ab"
fill-rule="nonzero"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 12.6 0 L 25.2 9 L 12.6 18 L 0 9 Z "
/>
</g>
</g>
</g>
</g>
<g transform="translate(0 45)">
<path
class="typst-shape"
fill="#000000"
fill-rule="nonzero"
d="M 0 0 L 0 3 L 75 3 L 75 0 Z "
/>
</g>
<g transform="translate(-8.849999999999998 45)">
<path
class="typst-shape"
fill="#ff4136"
fill-rule="nonzero"
stroke="#ff4136"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0 0 L 0 3 L 3 3 L 3 0 Z "
/>
</g>
<g transform="translate(80.85000000000001 45)">
<path
class="typst-shape"
fill="#ff4136"
fill-rule="nonzero"
stroke="#ff4136"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0 0 L 0 3 L 3 3 L 3 0 Z "
/>
</g>
<g transform="translate(17.25 4)">
<path
class="typst-shape"
fill="#ff4136"
fill-rule="nonzero"
stroke="#ff4136"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0 0 L 0 3 L 3 3 L 3 0 Z "
/>
</g>
<g transform="translate(54.75 136)">
<path
class="typst-shape"
fill="#ff4136"
fill-rule="nonzero"
stroke="#ff4136"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0 0 L 0 3 L 3 3 L 3 0 Z "
/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
</div>
<div class="viewbox-info">viewBox="0 0 270 210"</div>
</div>
<div class="comparison-side after">
<div class="side-label">✂️ After: Crop Mark Processed</div>
<div class="svg-container">
<svg
class="typst-doc"
viewBox="88.65 21.5 89.70000000000002 132"
width="270pt"
height="210pt"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:h5="http://www.w3.org/1999/xhtml"
>
<path
class="typst-shape"
fill="#ffffff"
fill-rule="nonzero"
d="M 0 0 L 0 210 L 270 210 L 270 0 Z "
/>
<g>
<g transform="translate(97.5 17.5)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<g class="typst-group">
<g>
<g transform="translate(16.5 26)">
<path
class="typst-shape"
fill="#eeeeee"
fill-rule="nonzero"
d="M 0 0 L 0 104.5 L 4.5 104.5 L 4.5 0 Z "
/>
</g>
<g transform="translate(6.150000000000001 26)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<path
class="typst-shape"
fill="#a23b72"
fill-rule="nonzero"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 12.6 0 L 25.2 9 L 12.6 18 L 0 9 Z "
/>
</g>
</g>
</g>
</g>
<g transform="translate(6.150000000000001 49)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<path
class="typst-shape"
fill="#a23b72"
fill-rule="nonzero"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 12.6 0 L 25.2 9 L 12.6 18 L 0 9 Z "
/>
</g>
</g>
</g>
</g>
<g transform="translate(6.150000000000001 67.75)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<path
class="typst-shape"
fill="#a23b72"
fill-rule="nonzero"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 12.6 0 L 25.2 9 L 12.6 18 L 0 9 Z "
/>
</g>
</g>
</g>
</g>
<g transform="translate(6.150000000000001 86.5)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<path
class="typst-shape"
fill="#a23b72"
fill-rule="nonzero"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 12.6 0 L 25.2 9 L 12.6 18 L 0 9 Z "
/>
</g>
</g>
</g>
</g>
<g transform="translate(6.150000000000001 112.5)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<path
class="typst-shape"
fill="#e6e6e6"
fill-rule="nonzero"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 12.6 0 L 25.2 9 L 12.6 18 L 0 9 Z "
/>
</g>
</g>
</g>
</g>
<g transform="translate(54 26)">
<path
class="typst-shape"
fill="#eeeeee"
fill-rule="nonzero"
d="M 0 0 L 0 97.25 L 4.5 97.25 L 4.5 0 Z "
/>
</g>
<g transform="translate(43.65 26)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<path
class="typst-shape"
fill="#2e86ab"
fill-rule="nonzero"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 12.6 0 L 25.2 9 L 12.6 18 L 0 9 Z "
/>
</g>
</g>
</g>
</g>
<g transform="translate(43.65 49)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<path
class="typst-shape"
fill="#2e86ab"
fill-rule="nonzero"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 12.6 0 L 25.2 9 L 12.6 18 L 0 9 Z "
/>
</g>
</g>
</g>
</g>
<g transform="translate(43.65 67.75)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<path
class="typst-shape"
fill="#2e86ab"
fill-rule="nonzero"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 12.6 0 L 25.2 9 L 12.6 18 L 0 9 Z "
/>
</g>
</g>
</g>
</g>
<g transform="translate(43.65 86.5)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<path
class="typst-shape"
fill="#2e86ab"
fill-rule="nonzero"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 12.6 0 L 25.2 9 L 12.6 18 L 0 9 Z "
/>
</g>
</g>
</g>
</g>
<g transform="translate(43.65 105.25)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<path
class="typst-shape"
fill="#2e86ab"
fill-rule="nonzero"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 12.6 0 L 25.2 9 L 12.6 18 L 0 9 Z "
/>
</g>
</g>
</g>
</g>
<g transform="translate(0 45)">
<path
class="typst-shape"
fill="#000000"
fill-rule="nonzero"
d="M 0 0 L 0 3 L 75 3 L 75 0 Z "
/>
</g>
<g transform="translate(-8.849999999999998 45)">
<path
class="typst-shape"
fill="#ff4136"
fill-rule="nonzero"
stroke="#ff4136"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0 0 L 0 3 L 3 3 L 3 0 Z "
/>
</g>
<g transform="translate(80.85000000000001 45)">
<path
class="typst-shape"
fill="#ff4136"
fill-rule="nonzero"
stroke="#ff4136"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0 0 L 0 3 L 3 3 L 3 0 Z "
/>
</g>
<g transform="translate(17.25 4)">
<path
class="typst-shape"
fill="#ff4136"
fill-rule="nonzero"
stroke="#ff4136"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0 0 L 0 3 L 3 3 L 3 0 Z "
/>
</g>
<g transform="translate(54.75 136)">
<path
class="typst-shape"
fill="#ff4136"
fill-rule="nonzero"
stroke="#ff4136"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0 0 L 0 3 L 3 3 L 3 0 Z "
/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
</div>
<div class="viewbox-info">
viewBox="88.65 21.5 89.70000000000002 132"
</div>
</div>
</div>
</div>
<div class="comparison">
<div class="comparison-header">
<div class="comparison-title">crop-single-1</div>
<div class="comparison-stats">
<div class="stat-item">
<div class="stat-label">Original ViewBox</div>
<div class="stat-value">0 0 216 166</div>
</div>
<div class="stat-item">
<div class="stat-label">Cropped ViewBox</div>
<div class="stat-value">91.6 25 29.80000000000001 86</div>
</div>
<div class="stat-item">
<div class="stat-label">Size Reduction</div>
<div class="stat-value">95%</div>
</div>
</div>
</div>
<div class="comparison-content">
<div class="comparison-side before">
<div class="side-label">🎯 Before: Original ViewBox</div>
<div class="svg-container">
<svg
class="typst-doc"
viewBox="0 0 216 166"
width="216pt"
height="166pt"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:h5="http://www.w3.org/1999/xhtml"
>
<path
class="typst-shape"
fill="#ffffff"
fill-rule="nonzero"
d="M 0 0 L 0 166 L 216 166 L 216 0 Z "
/>
<g>
<g transform="translate(95.5 23)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<g class="typst-group">
<g>
<g transform="translate(11 10)">
<path
class="typst-shape"
fill="#eeeeee"
fill-rule="nonzero"
d="M 0 0 L 0 80 L 3 80 L 3 0 Z "
/>
</g>
<g transform="translate(4.1000000000000005 10)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<path
class="typst-shape"
fill="#e6e6e6"
fill-rule="nonzero"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
/>
</g>
</g>
</g>
</g>
<g transform="translate(4.1000000000000005 33)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<path
class="typst-shape"
fill="#000000"
fill-rule="nonzero"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
/>
</g>
</g>
</g>
</g>
<g transform="translate(4.1000000000000005 53)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<path
class="typst-shape"
fill="#e6e6e6"
fill-rule="nonzero"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
/>
</g>
</g>
</g>
</g>
<g transform="translate(4.1000000000000005 65.5)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<path
class="typst-shape"
fill="#e6e6e6"
fill-rule="nonzero"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
/>
</g>
</g>
</g>
</g>
<g transform="translate(4.1000000000000005 78)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<path
class="typst-shape"
fill="#e6e6e6"
fill-rule="nonzero"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
/>
</g>
</g>
</g>
</g>
<g transform="translate(0 30)">
<path
class="typst-shape"
fill="#000000"
fill-rule="nonzero"
d="M 0 0 L 0 2 L 25 2 L 25 0 Z "
/>
</g>
<g
transform="translate(-3.8999999999999995 29.5)"
>
<path
class="typst-shape"
fill="#ff4136"
fill-rule="nonzero"
stroke="#ff4136"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0 0 L 0 3 L 3 3 L 3 0 Z "
/>
</g>
<g transform="translate(25.900000000000002 29.5)">
<path
class="typst-shape"
fill="#ff4136"
fill-rule="nonzero"
stroke="#ff4136"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0 0 L 0 3 L 3 3 L 3 0 Z "
/>
</g>
<g transform="translate(11 2)">
<path
class="typst-shape"
fill="#ff4136"
fill-rule="nonzero"
stroke="#ff4136"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0 0 L 0 3 L 3 3 L 3 0 Z "
/>
</g>
<g transform="translate(11 88)">
<path
class="typst-shape"
fill="#ff4136"
fill-rule="nonzero"
stroke="#ff4136"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0 0 L 0 3 L 3 3 L 3 0 Z "
/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
</div>
<div class="viewbox-info">viewBox="0 0 216 166"</div>
</div>
<div class="comparison-side after">
<div class="side-label">✂️ After: Crop Mark Processed</div>
<div class="svg-container">
<svg
class="typst-doc"
viewBox="91.6 25 29.80000000000001 86"
width="216pt"
height="166pt"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:h5="http://www.w3.org/1999/xhtml"
>
<path
class="typst-shape"
fill="#ffffff"
fill-rule="nonzero"
d="M 0 0 L 0 166 L 216 166 L 216 0 Z "
/>
<g>
<g transform="translate(95.5 23)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<g class="typst-group">
<g>
<g transform="translate(11 10)">
<path
class="typst-shape"
fill="#eeeeee"
fill-rule="nonzero"
d="M 0 0 L 0 80 L 3 80 L 3 0 Z "
/>
</g>
<g transform="translate(4.1000000000000005 10)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<path
class="typst-shape"
fill="#e6e6e6"
fill-rule="nonzero"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
/>
</g>
</g>
</g>
</g>
<g transform="translate(4.1000000000000005 33)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<path
class="typst-shape"
fill="#000000"
fill-rule="nonzero"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
/>
</g>
</g>
</g>
</g>
<g transform="translate(4.1000000000000005 53)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<path
class="typst-shape"
fill="#e6e6e6"
fill-rule="nonzero"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
/>
</g>
</g>
</g>
</g>
<g transform="translate(4.1000000000000005 65.5)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<path
class="typst-shape"
fill="#e6e6e6"
fill-rule="nonzero"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
/>
</g>
</g>
</g>
</g>
<g transform="translate(4.1000000000000005 78)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<path
class="typst-shape"
fill="#e6e6e6"
fill-rule="nonzero"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
/>
</g>
</g>
</g>
</g>
<g transform="translate(0 30)">
<path
class="typst-shape"
fill="#000000"
fill-rule="nonzero"
d="M 0 0 L 0 2 L 25 2 L 25 0 Z "
/>
</g>
<g
transform="translate(-3.8999999999999995 29.5)"
>
<path
class="typst-shape"
fill="#ff4136"
fill-rule="nonzero"
stroke="#ff4136"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0 0 L 0 3 L 3 3 L 3 0 Z "
/>
</g>
<g transform="translate(25.900000000000002 29.5)">
<path
class="typst-shape"
fill="#ff4136"
fill-rule="nonzero"
stroke="#ff4136"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0 0 L 0 3 L 3 3 L 3 0 Z "
/>
</g>
<g transform="translate(11 2)">
<path
class="typst-shape"
fill="#ff4136"
fill-rule="nonzero"
stroke="#ff4136"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0 0 L 0 3 L 3 3 L 3 0 Z "
/>
</g>
<g transform="translate(11 88)">
<path
class="typst-shape"
fill="#ff4136"
fill-rule="nonzero"
stroke="#ff4136"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0 0 L 0 3 L 3 3 L 3 0 Z "
/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
</div>
<div class="viewbox-info">
viewBox="91.6 25 29.80000000000001 86"
</div>
</div>
</div>
</div>
<div class="comparison">
<div class="comparison-header">
<div class="comparison-title">crop-quad-9999</div>
<div class="comparison-stats">
<div class="stat-item">
<div class="stat-label">Original ViewBox</div>
<div class="stat-value">0 0 276 170</div>
</div>
<div class="stat-item">
<div class="stat-label">Cropped ViewBox</div>
<div class="stat-value">
93.2 32.4 86.60000000000001 77.20000000000002
</div>
</div>
<div class="stat-item">
<div class="stat-label">Size Reduction</div>
<div class="stat-value">88%</div>
</div>
</div>
</div>
<div class="comparison-content">
<div class="comparison-side before">
<div class="side-label">🎯 Before: Original ViewBox</div>
<div class="svg-container">
<svg
class="typst-doc"
viewBox="0 0 276 170"
width="276pt"
height="170pt"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:h5="http://www.w3.org/1999/xhtml"
>
<path
class="typst-shape"
fill="#ffffff"
fill-rule="nonzero"
d="M 0 0 L 0 170 L 276 170 L 276 0 Z "
/>
<g>
<g transform="translate(98 36)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<g class="typst-group">
<g>
<g
transform="translate(8.799999999999999 13.400000000000002)"
>
<path
class="typst-shape"
fill="#eeeeee"
fill-rule="nonzero"
d="M 0 0 L 0 52.8 L 2.4 52.8 L 2.4 0 Z "
/>
</g>
<g transform="translate(5.2 13.400000000000002)">
<path
class="typst-shape"
fill="#6a994e"
fill-rule="nonzero"
d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "
/>
</g>
<g transform="translate(5.2 13.400000000000002)">
<path
class="typst-shape"
fill="none"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "
/>
</g>
<g transform="translate(5.2 26.599999999999998)">
<path
class="typst-shape"
fill="#6a994e"
fill-rule="nonzero"
d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "
/>
</g>
<g transform="translate(5.2 26.599999999999998)">
<path
class="typst-shape"
fill="none"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "
/>
</g>
<g transform="translate(5.2 36.599999999999994)">
<path
class="typst-shape"
fill="#6a994e"
fill-rule="nonzero"
d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "
/>
</g>
<g transform="translate(5.2 36.599999999999994)">
<path
class="typst-shape"
fill="none"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "
/>
</g>
<g transform="translate(5.2 46.599999999999994)">
<path
class="typst-shape"
fill="#6a994e"
fill-rule="nonzero"
d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "
/>
</g>
<g transform="translate(5.2 46.599999999999994)">
<path
class="typst-shape"
fill="none"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "
/>
</g>
<g transform="translate(5.2 56.599999999999994)">
<path
class="typst-shape"
fill="#6a994e"
fill-rule="nonzero"
d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "
/>
</g>
<g transform="translate(5.2 56.599999999999994)">
<path
class="typst-shape"
fill="none"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "
/>
</g>
<g transform="translate(28.8 13.400000000000002)">
<path
class="typst-shape"
fill="#eeeeee"
fill-rule="nonzero"
d="M 0 0 L 0 52.8 L 2.4 52.8 L 2.4 0 Z "
/>
</g>
<g transform="translate(25.2 13.400000000000002)">
<path
class="typst-shape"
fill="#f18f01"
fill-rule="nonzero"
d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "
/>
</g>
<g transform="translate(25.2 13.400000000000002)">
<path
class="typst-shape"
fill="none"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "
/>
</g>
<g transform="translate(25.2 26.599999999999998)">
<path
class="typst-shape"
fill="#f18f01"
fill-rule="nonzero"
d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "
/>
</g>
<g transform="translate(25.2 26.599999999999998)">
<path
class="typst-shape"
fill="none"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "
/>
</g>
<g transform="translate(25.2 36.599999999999994)">
<path
class="typst-shape"
fill="#f18f01"
fill-rule="nonzero"
d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "
/>
</g>
<g transform="translate(25.2 36.599999999999994)">
<path
class="typst-shape"
fill="none"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "
/>
</g>
<g transform="translate(25.2 46.599999999999994)">
<path
class="typst-shape"
fill="#f18f01"
fill-rule="nonzero"
d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "
/>
</g>
<g transform="translate(25.2 46.599999999999994)">
<path
class="typst-shape"
fill="none"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "
/>
</g>
<g transform="translate(25.2 56.599999999999994)">
<path
class="typst-shape"
fill="#f18f01"
fill-rule="nonzero"
d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "
/>
</g>
<g transform="translate(25.2 56.599999999999994)">
<path
class="typst-shape"
fill="none"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "
/>
</g>
<g
transform="translate(48.800000000000004 13.400000000000002)"
>
<path
class="typst-shape"
fill="#eeeeee"
fill-rule="nonzero"
d="M 0 0 L 0 52.8 L 2.4 52.8 L 2.4 0 Z "
/>
</g>
<g
transform="translate(45.199999999999996 13.400000000000002)"
>
<path
class="typst-shape"
fill="#a23b72"
fill-rule="nonzero"
d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "
/>
</g>
<g
transform="translate(45.199999999999996 13.400000000000002)"
>
<path
class="typst-shape"
fill="none"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "
/>
</g>
<g
transform="translate(45.199999999999996 26.599999999999998)"
>
<path
class="typst-shape"
fill="#a23b72"
fill-rule="nonzero"
d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "
/>
</g>
<g
transform="translate(45.199999999999996 26.599999999999998)"
>
<path
class="typst-shape"
fill="none"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "
/>
</g>
<g
transform="translate(45.199999999999996 36.599999999999994)"
>
<path
class="typst-shape"
fill="#a23b72"
fill-rule="nonzero"
d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "
/>
</g>
<g
transform="translate(45.199999999999996 36.599999999999994)"
>
<path
class="typst-shape"
fill="none"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "
/>
</g>
<g
transform="translate(45.199999999999996 46.599999999999994)"
>
<path
class="typst-shape"
fill="#a23b72"
fill-rule="nonzero"
d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "
/>
</g>
<g
transform="translate(45.199999999999996 46.599999999999994)"
>
<path
class="typst-shape"
fill="none"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "
/>
</g>
<g
transform="translate(45.199999999999996 56.599999999999994)"
>
<path
class="typst-shape"
fill="#a23b72"
fill-rule="nonzero"
d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "
/>
</g>
<g
transform="translate(45.199999999999996 56.599999999999994)"
>
<path
class="typst-shape"
fill="none"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "
/>
</g>
<g transform="translate(68.8 13.400000000000002)">
<path
class="typst-shape"
fill="#eeeeee"
fill-rule="nonzero"
d="M 0 0 L 0 52.8 L 2.4 52.8 L 2.4 0 Z "
/>
</g>
<g transform="translate(65.2 13.400000000000002)">
<path
class="typst-shape"
fill="#2e86ab"
fill-rule="nonzero"
d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "
/>
</g>
<g transform="translate(65.2 13.400000000000002)">
<path
class="typst-shape"
fill="none"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "
/>
</g>
<g transform="translate(65.2 26.599999999999998)">
<path
class="typst-shape"
fill="#2e86ab"
fill-rule="nonzero"
d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "
/>
</g>
<g transform="translate(65.2 26.599999999999998)">
<path
class="typst-shape"
fill="none"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "
/>
</g>
<g transform="translate(65.2 36.599999999999994)">
<path
class="typst-shape"
fill="#2e86ab"
fill-rule="nonzero"
d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "
/>
</g>
<g transform="translate(65.2 36.599999999999994)">
<path
class="typst-shape"
fill="none"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "
/>
</g>
<g transform="translate(65.2 46.599999999999994)">
<path
class="typst-shape"
fill="#2e86ab"
fill-rule="nonzero"
d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "
/>
</g>
<g transform="translate(65.2 46.599999999999994)">
<path
class="typst-shape"
fill="none"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "
/>
</g>
<g transform="translate(65.2 56.599999999999994)">
<path
class="typst-shape"
fill="#2e86ab"
fill-rule="nonzero"
d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "
/>
</g>
<g transform="translate(65.2 56.599999999999994)">
<path
class="typst-shape"
fill="none"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "
/>
</g>
<g transform="translate(0 24)">
<path
class="typst-shape"
fill="#000000"
fill-rule="nonzero"
d="M 0 0 L 0 1.6 L 80 1.6 L 80 0 Z "
/>
</g>
<g transform="translate(-4.8 23.3)">
<path
class="typst-shape"
fill="#ff4136"
fill-rule="nonzero"
stroke="#ff4136"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0 0 L 0 3 L 3 3 L 3 0 Z "
/>
</g>
<g transform="translate(81.8 23.3)">
<path
class="typst-shape"
fill="#ff4136"
fill-rule="nonzero"
stroke="#ff4136"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0 0 L 0 3 L 3 3 L 3 0 Z "
/>
</g>
<g transform="translate(8.5 -3.6000000000000005)">
<path
class="typst-shape"
fill="#ff4136"
fill-rule="nonzero"
stroke="#ff4136"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0 0 L 0 3 L 3 3 L 3 0 Z "
/>
</g>
<g transform="translate(68.5 73.60000000000001)">
<path
class="typst-shape"
fill="#ff4136"
fill-rule="nonzero"
stroke="#ff4136"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0 0 L 0 3 L 3 3 L 3 0 Z "
/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
</div>
<div class="viewbox-info">viewBox="0 0 276 170"</div>
</div>
<div class="comparison-side after">
<div class="side-label">✂️ After: Crop Mark Processed</div>
<div class="svg-container">
<svg
class="typst-doc"
viewBox="93.2 32.4 86.60000000000001 77.20000000000002"
width="276pt"
height="170pt"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:h5="http://www.w3.org/1999/xhtml"
>
<path
class="typst-shape"
fill="#ffffff"
fill-rule="nonzero"
d="M 0 0 L 0 170 L 276 170 L 276 0 Z "
/>
<g>
<g transform="translate(98 36)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<g class="typst-group">
<g>
<g
transform="translate(8.799999999999999 13.400000000000002)"
>
<path
class="typst-shape"
fill="#eeeeee"
fill-rule="nonzero"
d="M 0 0 L 0 52.8 L 2.4 52.8 L 2.4 0 Z "
/>
</g>
<g transform="translate(5.2 13.400000000000002)">
<path
class="typst-shape"
fill="#6a994e"
fill-rule="nonzero"
d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "
/>
</g>
<g transform="translate(5.2 13.400000000000002)">
<path
class="typst-shape"
fill="none"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "
/>
</g>
<g transform="translate(5.2 26.599999999999998)">
<path
class="typst-shape"
fill="#6a994e"
fill-rule="nonzero"
d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "
/>
</g>
<g transform="translate(5.2 26.599999999999998)">
<path
class="typst-shape"
fill="none"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "
/>
</g>
<g transform="translate(5.2 36.599999999999994)">
<path
class="typst-shape"
fill="#6a994e"
fill-rule="nonzero"
d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "
/>
</g>
<g transform="translate(5.2 36.599999999999994)">
<path
class="typst-shape"
fill="none"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "
/>
</g>
<g transform="translate(5.2 46.599999999999994)">
<path
class="typst-shape"
fill="#6a994e"
fill-rule="nonzero"
d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "
/>
</g>
<g transform="translate(5.2 46.599999999999994)">
<path
class="typst-shape"
fill="none"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "
/>
</g>
<g transform="translate(5.2 56.599999999999994)">
<path
class="typst-shape"
fill="#6a994e"
fill-rule="nonzero"
d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "
/>
</g>
<g transform="translate(5.2 56.599999999999994)">
<path
class="typst-shape"
fill="none"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "
/>
</g>
<g transform="translate(28.8 13.400000000000002)">
<path
class="typst-shape"
fill="#eeeeee"
fill-rule="nonzero"
d="M 0 0 L 0 52.8 L 2.4 52.8 L 2.4 0 Z "
/>
</g>
<g transform="translate(25.2 13.400000000000002)">
<path
class="typst-shape"
fill="#f18f01"
fill-rule="nonzero"
d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "
/>
</g>
<g transform="translate(25.2 13.400000000000002)">
<path
class="typst-shape"
fill="none"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "
/>
</g>
<g transform="translate(25.2 26.599999999999998)">
<path
class="typst-shape"
fill="#f18f01"
fill-rule="nonzero"
d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "
/>
</g>
<g transform="translate(25.2 26.599999999999998)">
<path
class="typst-shape"
fill="none"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "
/>
</g>
<g transform="translate(25.2 36.599999999999994)">
<path
class="typst-shape"
fill="#f18f01"
fill-rule="nonzero"
d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "
/>
</g>
<g transform="translate(25.2 36.599999999999994)">
<path
class="typst-shape"
fill="none"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "
/>
</g>
<g transform="translate(25.2 46.599999999999994)">
<path
class="typst-shape"
fill="#f18f01"
fill-rule="nonzero"
d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "
/>
</g>
<g transform="translate(25.2 46.599999999999994)">
<path
class="typst-shape"
fill="none"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "
/>
</g>
<g transform="translate(25.2 56.599999999999994)">
<path
class="typst-shape"
fill="#f18f01"
fill-rule="nonzero"
d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "
/>
</g>
<g transform="translate(25.2 56.599999999999994)">
<path
class="typst-shape"
fill="none"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "
/>
</g>
<g
transform="translate(48.800000000000004 13.400000000000002)"
>
<path
class="typst-shape"
fill="#eeeeee"
fill-rule="nonzero"
d="M 0 0 L 0 52.8 L 2.4 52.8 L 2.4 0 Z "
/>
</g>
<g
transform="translate(45.199999999999996 13.400000000000002)"
>
<path
class="typst-shape"
fill="#a23b72"
fill-rule="nonzero"
d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "
/>
</g>
<g
transform="translate(45.199999999999996 13.400000000000002)"
>
<path
class="typst-shape"
fill="none"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "
/>
</g>
<g
transform="translate(45.199999999999996 26.599999999999998)"
>
<path
class="typst-shape"
fill="#a23b72"
fill-rule="nonzero"
d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "
/>
</g>
<g
transform="translate(45.199999999999996 26.599999999999998)"
>
<path
class="typst-shape"
fill="none"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "
/>
</g>
<g
transform="translate(45.199999999999996 36.599999999999994)"
>
<path
class="typst-shape"
fill="#a23b72"
fill-rule="nonzero"
d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "
/>
</g>
<g
transform="translate(45.199999999999996 36.599999999999994)"
>
<path
class="typst-shape"
fill="none"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "
/>
</g>
<g
transform="translate(45.199999999999996 46.599999999999994)"
>
<path
class="typst-shape"
fill="#a23b72"
fill-rule="nonzero"
d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "
/>
</g>
<g
transform="translate(45.199999999999996 46.599999999999994)"
>
<path
class="typst-shape"
fill="none"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "
/>
</g>
<g
transform="translate(45.199999999999996 56.599999999999994)"
>
<path
class="typst-shape"
fill="#a23b72"
fill-rule="nonzero"
d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "
/>
</g>
<g
transform="translate(45.199999999999996 56.599999999999994)"
>
<path
class="typst-shape"
fill="none"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "
/>
</g>
<g transform="translate(68.8 13.400000000000002)">
<path
class="typst-shape"
fill="#eeeeee"
fill-rule="nonzero"
d="M 0 0 L 0 52.8 L 2.4 52.8 L 2.4 0 Z "
/>
</g>
<g transform="translate(65.2 13.400000000000002)">
<path
class="typst-shape"
fill="#2e86ab"
fill-rule="nonzero"
d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "
/>
</g>
<g transform="translate(65.2 13.400000000000002)">
<path
class="typst-shape"
fill="none"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "
/>
</g>
<g transform="translate(65.2 26.599999999999998)">
<path
class="typst-shape"
fill="#2e86ab"
fill-rule="nonzero"
d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "
/>
</g>
<g transform="translate(65.2 26.599999999999998)">
<path
class="typst-shape"
fill="none"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "
/>
</g>
<g transform="translate(65.2 36.599999999999994)">
<path
class="typst-shape"
fill="#2e86ab"
fill-rule="nonzero"
d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "
/>
</g>
<g transform="translate(65.2 36.599999999999994)">
<path
class="typst-shape"
fill="none"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "
/>
</g>
<g transform="translate(65.2 46.599999999999994)">
<path
class="typst-shape"
fill="#2e86ab"
fill-rule="nonzero"
d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "
/>
</g>
<g transform="translate(65.2 46.599999999999994)">
<path
class="typst-shape"
fill="none"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "
/>
</g>
<g transform="translate(65.2 56.599999999999994)">
<path
class="typst-shape"
fill="#2e86ab"
fill-rule="nonzero"
d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "
/>
</g>
<g transform="translate(65.2 56.599999999999994)">
<path
class="typst-shape"
fill="none"
stroke="#000000"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "
/>
</g>
<g transform="translate(0 24)">
<path
class="typst-shape"
fill="#000000"
fill-rule="nonzero"
d="M 0 0 L 0 1.6 L 80 1.6 L 80 0 Z "
/>
</g>
<g transform="translate(-4.8 23.3)">
<path
class="typst-shape"
fill="#ff4136"
fill-rule="nonzero"
stroke="#ff4136"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0 0 L 0 3 L 3 3 L 3 0 Z "
/>
</g>
<g transform="translate(81.8 23.3)">
<path
class="typst-shape"
fill="#ff4136"
fill-rule="nonzero"
stroke="#ff4136"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0 0 L 0 3 L 3 3 L 3 0 Z "
/>
</g>
<g transform="translate(8.5 -3.6000000000000005)">
<path
class="typst-shape"
fill="#ff4136"
fill-rule="nonzero"
stroke="#ff4136"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0 0 L 0 3 L 3 3 L 3 0 Z "
/>
</g>
<g transform="translate(68.5 73.60000000000001)">
<path
class="typst-shape"
fill="#ff4136"
fill-rule="nonzero"
stroke="#ff4136"
stroke-width="0.5"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
d="M 0 0 L 0 3 L 3 3 L 3 0 Z "
/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
</div>
<div class="viewbox-info">
viewBox="93.2 32.4 86.60000000000001 77.20000000000002"
</div>
</div>
</div>
</div>
<div class="footer">
<h3>🛠️ How It Works</h3>
<p>
1. Typst templates generate invisible crop marks at abacus boundaries
</p>
<p>2. Script extracts crop mark positions from SVG</p>
<p>3. Calculates optimal viewBox from crop mark bounds</p>
<p>
4. Updates SVG with tight-fitting viewBox - no manual cropping needed!
</p>
<p style="margin-top: 15px; font-size: 0.9rem; color: #999">
Run <code>node extract-viewbox.js &lt;svg-file&gt;</code> to process
your own SVGs
</p>
</div>
</div>
</body>
</html>