/* Letterpress signature, stitched paper, a working little notebook. */
/* Monochrome overrides are kept at the end of this stylesheet. */
.site-header .brand{gap:15px}.site-header .brand-mark{position:relative;width:49px;height:56px;border:1px solid #bcb8af;border-radius:48% 48% 45% 45%;background:transparent;color:#e9e5dc;font:italic 30px/1 Georgia,'Times New Roman',serif;letter-spacing:-.13em;padding-right:4px;transform:rotate(-7deg)}.site-header .brand-mark:after{content:"";position:absolute;inset:4px;border:1px solid #a8a29866;border-radius:inherit}.site-header .brand-copy strong{font:500 29px/.95 Georgia,'Times New Roman',serif;letter-spacing:-.065em;color:#eeebe4}.site-header .brand-copy strong em{font-weight:400}.site-header .brand-copy small{font-size:7px;letter-spacing:.19em;margin-top:8px;color:#93908a}
.page-seam{position:relative;height:88px;background:linear-gradient(#101010 0 43%,#020202 45% 49%,#161616 51%,#090909 56%);box-shadow:inset 0 1px #ffffff07,inset 0 -1px #ffffff05;overflow:hidden}.seam-thread{position:absolute;inset:13px -20px 23px;display:flex;align-items:center;justify-content:space-around;gap:20px}.seam-thread i{position:relative;flex:0 0 19px;height:40px;transform:rotate(33deg);border-left:2px solid #c8c1b4;border-right:1px solid #777064;border-radius:50%;box-shadow:-2px 1px 1px #000,1px 0 1px #e7dfc844}.seam-thread i:before,.seam-thread i:after{content:"";position:absolute;left:5px;width:5px;height:5px;border-radius:50%;background:#000;box-shadow:0 1px 0 #ffffff28}.seam-thread i:before{top:-1px}.seam-thread i:after{bottom:-1px}.seam-tag{position:absolute;left:50%;top:24px;transform:translateX(-50%) rotate(-2deg);white-space:nowrap;padding:11px 20px;border:1px dashed #7b756b;background:#ded8ca;color:#48433b;font:8px 'JetBrains Mono',monospace;letter-spacing:.12em;box-shadow:0 4px 10px #0008}
.laptop-scene{width:500px;height:465px;right:3%;top:100px;opacity:1;transform:none;perspective:1200px}.laptop{left:0;top:40px;width:100%;height:330px;opacity:1;transform:translateY(0) rotate(-4deg);animation:atelier-drop 1.7s cubic-bezier(.16,1,.3,1) both;transform-style:preserve-3d}.laptop-screen{left:9%;top:0;width:82%;height:252px;border:0;padding:10px;border-radius:15px 15px 5px 5px;background:linear-gradient(140deg,#96938e,#292929 25%,#666 50%,#171717 85%,#777);box-shadow:0 0 0 1px #b5b1aa66,0 22px 50px #0009;transform-origin:50% 100%;animation:atelier-open 1.3s .75s cubic-bezier(.2,.75,.2,1) both;overflow:hidden}.laptop-screen:before{content:"";position:absolute;inset:8px;background:#0a0e10;border:1px solid #111;border-radius:7px}.laptop-screen:after{background:linear-gradient(125deg,#ffffff10,transparent 40%);z-index:5}.screen-camera{position:absolute;top:3px;left:50%;width:3px;height:3px;border-radius:50%;background:#222;box-shadow:0 0 0 1px #ffffff13;z-index:6}.screen-logo{z-index:3;font:italic 60px Georgia,serif;letter-spacing:-.13em;color:#f0eade;display:flex;align-items:center;justify-content:center;flex-direction:column;animation:atelier-boot 2.1s 1.65s both;transform:none}.screen-logo:after{display:none}.screen-logo small{font:italic 13px Georgia,serif;letter-spacing:.03em;margin-top:12px}.screen-code{z-index:4;inset:10px;bottom:10px;border-radius:5px;overflow:hidden;background:radial-gradient(ellipse at top right,#222b2c,#101416 65%);animation:atelier-editor .5s 3.65s forwards;font:11px/1.9 'JetBrains Mono',monospace;opacity:0}.editor-bar{height:27px;display:flex;align-items:center;gap:5px;padding:0 12px;background:#ffffff07;border-bottom:1px solid #ffffff09}.editor-bar i{width:5px;height:5px;border:1px solid #aaa;border-radius:50%;opacity:.6}.editor-bar label{margin-left:18px;color:#9b9d99;font-size:8px}.code-lines{padding:22px 13px 10px;counter-reset:line}.screen-code .code-lines span{display:block;white-space:nowrap;animation:code-type 1.25s steps(32,end) forwards;clip-path:inset(0 100% 0 0);color:#dbddd7}.code-lines span:before{counter-increment:line;content:counter(line);display:inline-block;width:22px;color:#616867;font-size:9px}.screen-code em{font-style:normal;color:#c0d7d5}.screen-code q{color:#d6c7a3;quotes:'"' '"'}.screen-code .code-lines span:nth-child(1){animation-delay:4.15s}.screen-code .code-lines span:nth-child(2){animation-delay:5.4s}.screen-code .code-lines span:nth-child(3){animation-delay:6.65s}.screen-code .code-lines span:nth-child(4){animation-delay:7.9s}.screen-code .code-lines span:nth-child(5){animation-delay:9.15s;color:#7b9286}.screen-code b{margin-left:22px;animation:cursor-blink .8s steps(2) 4s infinite}.editor-status{position:absolute;bottom:0;left:0;right:0;height:20px;padding:2px 10px;background:#ffffff06;color:#87918d;font-size:7px}.editor-status label{float:right}.laptop-base{left:0;top:250px;width:100%;height:83px;transform:none;border:0;border-radius:3px 3px 35px 35px;clip-path:polygon(9% 0,91% 0,100% 90%,99% 96%,97% 100%,3% 100%,1% 96%,0 90%);background:linear-gradient(175deg,#92908d,#555451 25%,#aaa8a2 88%,#4c4c49 90%,#272727 95%,#888680);box-shadow:none}.laptop-base:after{content:"";left:40%;bottom:4px;width:20%;height:4px;transform:none;background:#383836;border-radius:0 0 10px 10px}.laptop-keyboard{left:17%;right:17%;top:7px;height:35px;padding:3px;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(4,1fr);gap:2px;border:0;border-radius:3px;background:#393936;transform:perspective(100px) rotateX(18deg);opacity:1}.laptop-keyboard i{display:block;background:linear-gradient(#292a28,#111);border-radius:1px;box-shadow:0 1px #bbb5}.laptop-trackpad{left:39%;bottom:13px;width:22%;height:24px;border:1px solid #5557;border-radius:3px;background:#acaaa244}.laptop-shadow{left:10%;right:0;bottom:72px;height:28px;background:#000;filter:blur(12px);animation:shadow-land 1s 1s both}.laptop-scene .orb-caption{bottom:10px;right:8px}.laptop-scene .orb-coordinate{top:5px;right:8px}
@keyframes atelier-drop{0%{opacity:0;transform:translateY(-540px) rotate(17deg) scale(.85)}65%{opacity:1;transform:translateY(14px) rotate(-6deg) scale(1)}82%{transform:translateY(-8px) rotate(-3deg)}100%{transform:translateY(0) rotate(-4deg)}}@keyframes atelier-open{0%{transform:rotateX(-86deg);filter:brightness(.5)}80%{transform:rotateX(5deg)}100%{transform:rotateX(0);filter:brightness(1)}}@keyframes atelier-boot{0%{opacity:0;filter:blur(8px)}20%,72%{opacity:1;filter:blur(0)}100%{opacity:0;filter:blur(2px)}}@keyframes atelier-editor{to{opacity:1}}
@media(max-width:1100px) and (min-width:761px){.laptop-scene{width:370px;right:1%;top:160px}.laptop{transform:rotate(-4deg)}.laptop-screen{height:210px}.laptop-base{top:208px}.screen-code{font-size:8px}.code-lines{padding:15px 8px}.code-lines span:before{width:17px}}
@media(max-width:760px){.site-header .brand-copy strong{font-size:23px}.site-header .brand-mark{width:36px;height:43px;font-size:25px}.site-header .brand{gap:10px}.laptop-scene{width:310px;height:290px;right:calc(50% - 155px);top:500px;transform:none}.laptop{top:12px;height:240px}.laptop-screen{height:175px}.laptop-base{top:173px;height:65px}.screen-code{font-size:7px;inset:8px}.screen-logo{font-size:44px}.editor-bar{height:21px;padding:0 8px}.editor-bar label{font-size:6px;margin-left:6px}.code-lines{padding:9px 6px}.code-lines span:before{width:14px;font-size:6px}.editor-status{font-size:5px;height:15px}.laptop-keyboard{height:27px}.laptop-trackpad{height:17px;bottom:12px}.laptop-scene .orb-caption{bottom:0;font-size:7px}.laptop-scene .orb-coordinate{font-size:7px;top:-12px}.page-seam{height:72px}.seam-thread{gap:15px}.seam-tag{font-size:6px;padding:9px 12px;top:17px}}
@media(prefers-reduced-motion:reduce){.laptop,.laptop-screen,.screen-logo,.screen-code,.screen-code .code-lines span,.screen-code b{animation:none}.laptop{transform:rotate(-4deg)}.laptop-screen{transform:none;filter:none}.screen-logo{opacity:0}.screen-code{opacity:1}.screen-code .code-lines span{clip-path:none}}

/* Minimal black-and-white hardware and stitched divider. */
.laptop-screen{background:#252525;box-shadow:0 0 0 1px #777,0 18px 35px #0008;border-radius:10px 10px 3px 3px}
.laptop-screen:before{background:#090909;border-color:#111;border-radius:4px}
.laptop-screen:after{background:none}
.screen-logo{color:#fff}
.screen-code{background:#0c0c0c;border-radius:3px}
.editor-bar{background:#141414;border-color:#292929}
.editor-bar label{color:#999}
.screen-code .code-lines span{color:#ddd}
.screen-code em{color:#fff}
.screen-code q{color:#bcbcbc}
.screen-code .code-lines span:nth-child(5){color:#777}
.code-lines span:before{color:#555}
.editor-status{background:#151515;color:#888}
.laptop-base{background:linear-gradient(#303030 0 88%,#111 89% 95%,#555 96%);border-radius:2px 2px 14px 14px}
.laptop-base:after{background:#080808}
.laptop-keyboard{background:#222}
.laptop-keyboard i{background:#0a0a0a;box-shadow:0 1px #666}
.laptop-trackpad{background:#292929;border-color:#555}
.page-seam{height:70px;background:linear-gradient(#0b0b0b 0 47%,#000 48% 51%,#111 52% 54%,#080808 55%);box-shadow:none}
.seam-thread{inset:15px -20px;gap:24px}
.seam-thread i{flex-basis:15px;height:29px;border-left:1px solid #ddd;border-right:1px solid #777;border-radius:45%;box-shadow:none}
.seam-thread i:before,.seam-thread i:after{width:3px;height:3px;background:#000;box-shadow:0 1px #444}
.seam-tag{display:none}
