/* "Red pen" guide template: a printed white page with light red hand-drawn marks (lab/pdf-style variation C). Loaded only on pages with template "pen". */
@font-face{font-family:"Inter";src:url(/assets/fonts/Inter-var.woff2) format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"Caveat";src:url(/assets/fonts/Caveat-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
:root{color-scheme:light;--ink:#111113;--grey:#6B6B72;--faint:#8E8E95;--rule:#E6E6E9;--box:#F4F4F5;--boxline:#E3E3E7;--accent:#9A1B1F;--lime:#C7FF3D;--limeink:#0B0B0C;--limeglow:rgba(120,170,0,.28);--gl:max(16px,env(safe-area-inset-left,0px));--gr:max(16px,env(safe-area-inset-right,0px))}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:56px}
body.pen{margin:0;background:#F3F1EC;color:var(--ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.4;overflow-x:clip;-webkit-font-smoothing:antialiased}
.pen h1,.pen h2,.pen h3,.pen p,.pen ol,.pen figure{margin:0;padding:0}
.pen button{font-family:inherit}
.pen .sr,.pen .skip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pen .skip:focus{width:auto;height:auto;clip:auto;left:12px;top:8px;background:#fff;padding:8px 12px;z-index:100}

/* slim always-visible tab: back to all guides */
.ptab{position:sticky;top:0;z-index:50;background:rgba(255,254,252,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid #E1DED6;padding-top:env(safe-area-inset-top)}
.ptab-in{max-width:760px;margin:0 auto;height:42px;padding:0 var(--gr) 0 var(--gl);display:flex;align-items:center;justify-content:space-between;gap:12px}
.ptab a{display:inline-flex;align-items:center;gap:8px;height:42px;font:700 15px/1 Inter,system-ui,sans-serif;color:var(--accent);text-decoration:none}
.ptab a svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ptab span{font:500 11px/1 ui-monospace,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}

.pen .wrap{max-width:760px;margin:0 auto;padding:28px var(--gr) 64px var(--gl)}
.pen .c-page{background:#FFFEFC;padding:22px 22px 26px;box-shadow:0 0 0 1px rgba(60,50,30,.07),0 2px 4px rgba(60,50,30,.08),0 18px 40px -10px rgba(60,50,30,.18)}
.pen .printhead{display:flex;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid var(--rule);font:500 11px/1 ui-monospace,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.pen .cover{padding-top:34px}
.pen .rule{display:block;width:72px;height:5px;background:var(--accent);border-radius:1px}
.pen h1{margin-top:26px;font-size:clamp(28px,8.4vw,64px);line-height:1.05;font-weight:800;letter-spacing:-.035em}
.pen h1 b{display:block;font-weight:800;letter-spacing:-.03em}
.pen .sub{margin-top:16px;font-size:clamp(17px,4.6vw,24px);line-height:1.35;color:var(--grey);max-width:30em}
.pen .limebox{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;margin-top:30px;padding:20px 22px 20px 24px;border:0;border-radius:24px;background:var(--lime);color:var(--limeink);text-align:left;font-size:clamp(20px,5.8vw,28px);line-height:1.15;font-weight:800;letter-spacing:-.02em;box-shadow:0 10px 30px var(--limeglow);cursor:pointer}
.pen .sec{margin-top:52px;padding-top:44px;border-top:1px solid var(--rule)}
.pen .sec .tip{margin-top:6px}
.pen .intro h2{font-size:clamp(28px,8vw,44px);line-height:1.05;font-weight:800;letter-spacing:-.03em}
.pen .intro p{margin-top:10px;font-size:18px;color:var(--grey)}
.pen .end{margin-top:68px}

/* pictures: the result is the bigger one */
.pen .pair{display:flex;gap:12px;align-items:flex-start;margin-top:26px;max-width:620px}
.pen .p-in{flex:2 1 0;min-width:0}
.pen .p-out{flex:3 1 0;min-width:0}
.pen .im{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--rule);background:#EFEFF1}
.pen .p-in .im{aspect-ratio:1/1}
.pen .p-out .im{aspect-ratio:2/3}
.pen .pair.vid{max-width:none}
.pen .pair.vid .p-out{flex:0 1 300px}
.pen .vclip{position:relative;overflow:hidden;aspect-ratio:9/16;background:#EFEFF1;isolation:isolate}
.pen .pair.vid .vclip{aspect-ratio:9/16}
.pen .vclip img,.pen .vclip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;border-radius:0}
.pen .vclip video{opacity:0;transition:opacity .5s ease}
.pen .vclip.vid-on video{opacity:1}
.pen figcaption{margin-top:10px;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--faint)}

.pen .steps{list-style:none}
.pen .step{position:relative;display:grid;grid-template-columns:34px 1fr;gap:0 14px;padding:22px 0;border-top:1px solid var(--rule)}
.pen .step:first-child{border-top:0;padding-top:0}
.pen .step .n{font-size:30px;line-height:1.05;font-weight:700;color:var(--accent)}
.pen .step h3{font-size:22px;line-height:1.25;font-weight:600;letter-spacing:-.015em}
.pen .step p{margin-top:6px;font-size:17px;line-height:1.45;color:var(--grey)}
.pen .tip{margin-top:6px;padding-top:22px;border-top:1px solid var(--rule);font-size:16px;line-height:1.45;color:var(--faint)}
.pen .pr{margin-top:52px;padding-top:50px;border-top:1px solid var(--rule)}
.pen .plabel{font-size:13px;line-height:1;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.pen .code{margin-top:14px;font-size:clamp(30px,9vw,46px);line-height:1.08;font-weight:800;letter-spacing:-.03em;text-wrap:balance;overflow-wrap:anywhere}
.pen .pline{margin-top:14px;font-size:17px;line-height:1.4;color:var(--grey)}
.pen .pnote{margin-top:6px;font-size:14px;line-height:1.4;color:var(--faint)}
.pen .act{margin-top:26px}

/* buttons */
.pen .btn{display:inline-grid;place-items:center;border:0;cursor:pointer;background:var(--lime);color:var(--limeink);border-radius:18px;padding:0 24px;min-height:60px;font-size:20px;line-height:1;font-weight:800;letter-spacing:-.01em;text-decoration:none;box-shadow:0 8px 22px var(--limeglow);transition:transform .15s ease,box-shadow .15s ease}
.pen .btn.copy,.pen .btn.big{width:100%}
.pen .btn.big{min-height:66px;font-size:21px}
.pen .btn.big+.btn.big{margin-top:14px}
.pen .btn.dark{background:var(--ink);color:#fff;box-shadow:0 8px 22px rgba(20,20,30,.22)}
@media(hover:hover){.pen .btn:hover{transform:translateY(-2px)}}
.pen .btn:active{transform:translateY(1px) scale(.99)}
.pen .alt{margin-top:16px;padding-top:14px;border-top:1px solid var(--rule)}
.pen .alt.open{margin-top:14px;padding-top:0;border-top:0}
.pen .altp{font-size:14px;line-height:1.45;color:var(--faint)}
.pen .quiet{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:10px}
.pen .alt.open .quiet{margin-top:0}
.pen .qbtn{background:none;border:0;padding:10px 2px;font-size:14px;font-weight:600;color:var(--grey);text-decoration:underline;text-decoration-color:#D5D5DA;text-underline-offset:4px;cursor:pointer}
.pen .qbtn.copy{display:inline-grid;min-height:40px;padding:0 16px;border:1.5px solid #CFCFD6;border-radius:99px;color:var(--ink);text-decoration:none;background:#fff}
.pen .copy{position:relative}
.pen .copy>span{grid-area:1/1;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.pen .copy .l2{visibility:hidden}
.pen .copy.done .l1{visibility:hidden}.pen .copy.done .l2{visibility:visible}
.pen .qbtn.copy.done{border-color:var(--accent);color:var(--accent)}
.pen .tick{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pen .tick path{stroke-dasharray:1;stroke-dashoffset:0}
.pen .l2 b{font-weight:inherit}
.pen .fulltext pre{margin:10px 0 0;background:var(--box);border:1px solid var(--boxline);border-radius:14px;padding:16px 18px;font:400 13.5px/1.6 ui-monospace,Menlo,"SF Mono",Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;color:#1C1C1F}
.pen a:focus-visible,.pen button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.pen .fine{margin-top:22px;font-size:14px;line-height:1.45;color:var(--faint)}
.pen .made{margin-top:8px;font-size:16px;color:var(--faint)}
.pen .foot{display:flex;justify-content:space-between;gap:12px;margin-top:56px;padding-top:18px;border-top:1px solid var(--rule);font-size:13px;font-weight:500;color:var(--faint)}
.pen .cue-c{display:flex;align-items:flex-end;justify-content:flex-end;gap:8px;height:62px;padding-right:30px}
.pen .cue-d{display:flex;align-items:flex-end;justify-content:center;gap:10px;height:76px;margin-bottom:6px}
.pen .cue-row{display:flex;align-items:flex-end;justify-content:flex-end;gap:6px;margin:6px 24px -4px 0}
.pen .cue-c .note{margin-bottom:6px}

/* red pen marks: hand-drawn, drawn on when they scroll into view */
.pen .ar{display:block;flex:none;color:var(--accent);pointer-events:none}
.pen .ar svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.pen .ar-d{width:38px;height:57px}
.pen .ar-c{width:88px;height:51px}
.pen .hl{position:relative;display:inline-block}
.pen .mk{position:absolute;pointer-events:none;overflow:visible}
.pen .mk path{fill:none;stroke:var(--accent);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.pen .mk.ul{left:-3%;width:106%;bottom:-.3em;height:auto}
.pen h1 .mk.ul{bottom:-.18em}
.pen .tip .mk.ul,.pen .step .mk.ul{bottom:-.12em}
.pen .mk.ring{left:-12px;right:-12px;top:-10px;bottom:-12px;width:calc(100% + 24px);height:calc(100% + 22px)}
.pen .cir{padding:2px 4px}
.pen .step .cir{padding:0 2px}
.pen .step .cir .mk.ring{left:-9px;right:-9px;top:-6px;bottom:-6px;width:calc(100% + 18px);height:calc(100% + 12px)}
.pen .note{display:inline-block;margin-left:10px;font-family:Caveat,"Bradley Hand",cursive;font-size:29px;font-weight:700;line-height:1;color:var(--accent);white-space:nowrap;transform:rotate(var(--r,-4deg))}
.pen .step h3 .note{position:absolute;right:2px;top:-6px;margin:0;font-size:28px}
.pen .p2{opacity:.9;stroke-width:2.6}
@media(prefers-reduced-motion:no-preference){
  .pen .ar-d{animation:pen-nd 1.7s ease-in-out infinite}
  .pen .ar-c{animation:pen-nc 1.7s ease-in-out infinite}
  .pen .copy.done{animation:pen-pop .42s cubic-bezier(.3,1.7,.5,1)}
  .pen .copy.done .tick path{animation:pen-draw .4s .05s ease-out both}
  .pen.js .mk path{transition:stroke-dashoffset .9s cubic-bezier(.5,0,.2,1)}
  .pen.js .mk:not(.on) path{stroke-dashoffset:1}
  .pen.js .mk .p2{transition-delay:.45s}
}
@keyframes pen-nd{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}
@keyframes pen-nc{0%,100%{transform:translate(0,0)}50%{transform:translate(-8px,7px)}}
@keyframes pen-pop{0%{transform:scale(1)}40%{transform:scale(1.035)}100%{transform:scale(1)}}
@keyframes pen-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media(min-width:700px){.pen .wrap{padding-top:36px;padding-bottom:72px}.pen .c-page{padding:30px 56px 34px}}
@media(prefers-reduced-motion:reduce){.pen *{animation:none!important;transition:none!important}html{scroll-behavior:auto}}