@font-face{font-family:Geist Mono;src:url(/patterns/fonts/line/GeistMono-Light.woff2) format("woff2");font-weight:300;font-display:swap}@font-face{font-family:Geist Mono;src:url(/patterns/fonts/line/GeistMono-Regular.woff2) format("woff2");font-weight:400;font-display:swap}@font-face{font-family:Geist Mono;src:url(/patterns/fonts/line/GeistMono-Medium.woff2) format("woff2");font-weight:500;font-display:swap}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden}.line{--ink: #141414;--paper: #f2f1ec;--rule: color-mix(in srgb, var(--ink) 22%, transparent);--muted: color-mix(in srgb, var(--ink) 58%, transparent);--gutter: 28px;--bar: 52px;--panel: 288px;position:fixed;top:0;right:0;bottom:0;left:0;display:grid;grid-template-columns:1fr 0;grid-template-rows:var(--bar) 1fr auto;background:var(--paper);color:var(--ink);font:300 11px/1.5 Geist Mono,ui-monospace,monospace;letter-spacing:.02em;font-feature-settings:"zero" 1,"tnum" 1;transition:grid-template-columns .24s ease}.line.panel-open{grid-template-columns:1fr var(--panel)}.line button,.line select,.line input{font:inherit;color:inherit;letter-spacing:inherit}.line :focus-visible{outline:1px solid var(--ink);outline-offset:3px}.line-bar{grid-column:1 / -1;display:flex;align-items:center;gap:32px;padding:0 var(--gutter);border-bottom:1px solid var(--rule);text-transform:uppercase;letter-spacing:.14em}.line-mark{color:inherit;text-decoration:none;font-weight:500;white-space:nowrap}.line-mark span{color:var(--muted);padding:0 4px}.line-tabs{display:flex;gap:14px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}.line-tabs::-webkit-scrollbar{display:none}.line-tab{position:relative;display:flex;flex-shrink:0;gap:8px;padding:17px 0 16px;color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}.line-tab .num{font-weight:300}.line-tab .name{display:none}.line-tab:hover{color:var(--ink)}.line-tab[aria-current=page]{color:var(--ink);border-bottom-color:var(--ink)}.line-tab[aria-current=page] .name{display:inline}.line-actions{display:flex;gap:8px}.line-toggle{height:26px;padding:0 10px;background:none;border:1px solid var(--rule);text-transform:uppercase;letter-spacing:.12em;cursor:pointer}.line-toggle:hover{border-color:var(--ink)}.line-toggle[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}.line-stage{position:relative;grid-column:1;grid-row:2;margin:var(--gutter) var(--gutter) 0;min-height:0;overflow:hidden;cursor:crosshair}.line-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;touch-action:none}.line-crop{position:absolute;width:14px;height:14px;pointer-events:none;z-index:1}.line-crop:before,.line-crop:after{content:"";position:absolute;background:var(--ink)}.line-crop:before{width:14px;height:1px}.line-crop:after{width:1px;height:14px}.line-crop.tl{top:0;left:0}.line-crop.tr{top:0;right:0}.line-crop.tr:before{right:0}.line-crop.tr:after{right:0}.line-crop.bl{bottom:0;left:0}.line-crop.bl:before{bottom:0}.line-crop.bl:after{bottom:0}.line-crop.br{bottom:0;right:0}.line-crop.br:before{bottom:0;right:0}.line-crop.br:after{bottom:0;right:0}.line-caption{grid-column:1;grid-row:3;display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:auto auto;column-gap:40px;align-items:end;padding:14px var(--gutter) 20px}.line-caption-title{font-weight:400}.line-caption-title span{text-transform:uppercase;letter-spacing:.14em;margin-right:10px}.line-caption-hint{grid-row:2;color:var(--muted)}.line-rule{grid-column:2;grid-row:1 / 3;display:grid;gap:4px;justify-items:start}.line-rule span{width:100px;height:7px;border:1px solid var(--ink);border-top:0;background:linear-gradient(90deg,var(--ink) 0 1px,transparent 1px) 0 0 / 10px 4px repeat-x}.line-rule em{font-style:normal;color:var(--muted)}.line-readout{grid-column:3;grid-row:1 / 3;display:grid;grid-template-columns:repeat(4,auto);gap:2px 18px}.line-readout div{display:flex;gap:6px}.line-readout .wide{grid-column:1 / -1}.line-readout dt{color:var(--muted);text-transform:uppercase;letter-spacing:.12em}.line-readout dd{min-width:4ch}.line-panel{grid-column:2;grid-row:2 / 4;overflow-y:auto;overflow-x:hidden;border-left:1px solid var(--rule);padding:8px 20px 32px;scrollbar-width:thin}.line:not(.panel-open) .line-panel{visibility:hidden}.line-panel section{padding:16px 0 14px;border-bottom:1px solid var(--rule)}.line-panel h2{font-size:10px;font-weight:400;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);margin-bottom:12px}.line-presets{display:flex;flex-wrap:wrap;gap:6px}.line-presets button{height:24px;padding:0 9px;background:none;border:1px solid var(--rule);cursor:pointer}.line-presets button:hover{border-color:var(--ink)}.line-presets button.quiet{border-style:dashed;color:var(--muted)}.line-field{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 8px;padding:5px 0;cursor:pointer}.line-field output{text-align:right}.line-field input[type=range]{grid-column:1 / -1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:14px;background:linear-gradient(var(--ink),var(--ink)) 0 50% / var(--fill, 0%) 1px no-repeat,linear-gradient(var(--rule),var(--rule)) 0 50% / 100% 1px no-repeat;cursor:ew-resize}.line-field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:7px;height:13px;background:var(--paper);border:1px solid var(--ink)}.line-field input[type=range]::-moz-range-thumb{width:5px;height:11px;background:var(--paper);border:1px solid var(--ink);border-radius:0}.line-field input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:13px;height:13px;border:1px solid var(--ink);display:grid;place-items:center;cursor:pointer}.line-field input[type=checkbox]:checked:after{content:"";width:7px;height:7px;background:var(--ink)}.line-field select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;border-bottom:1px solid var(--rule);padding:2px 14px 2px 0;text-align:right;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-size:4px 4px;background-position:right 4px center,right 0 center;background-repeat:no-repeat}.line-field select option{background:var(--paper);color:var(--ink)}@media(max-width:760px){.line{--gutter: 14px;--panel: 100vw;grid-template-columns:1fr 0}.line.panel-open{grid-template-columns:0 1fr}.line-bar{gap:14px;overflow-x:auto}.line-mark{display:none}.line-tabs{gap:12px}.line-caption{grid-template-columns:1fr;row-gap:8px}.line-rule{display:none}.line-readout{grid-column:1;grid-row:auto}}.line-camera{position:absolute;left:14px;bottom:14px;z-index:2;display:flex;align-items:center;gap:10px;max-width:calc(100% - 28px);padding:8px 14px 8px 10px;background:color-mix(in srgb,var(--paper) 88%,transparent);border:1px solid var(--ink);border-radius:999px;text-align:left;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.line-camera[hidden]{display:none}.line-camera svg{flex:none;width:22px;height:22px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linejoin:round}.line-camera .pulse{opacity:0;transform-origin:12px 12px;animation:line-camera-pulse 2.4s ease-out infinite}.line-camera .text{display:flex;flex-direction:column;gap:2px;min-width:0}.line-camera strong{font-weight:500;text-transform:uppercase;letter-spacing:.12em}.line-camera .sub{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.line-camera:hover{background:var(--paper)}.line-camera[aria-pressed=true]{background:var(--ink);color:var(--paper)}.line-camera[aria-pressed=true] .sub{color:color-mix(in srgb,var(--paper) 65%,transparent)}.line-camera[aria-pressed=true] .pulse,.line-camera.blocked .pulse{animation:none}@keyframes line-camera-pulse{0%{opacity:.7;transform:scale(.75)}70%,to{opacity:0;transform:scale(1.45)}}@media(prefers-reduced-motion:reduce){.line-camera .pulse{animation:none}}