@font-face{font-family:Excalifont;src:url(/trama/fonts/Excalifont-Regular.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}.guide-article{counter-reset:guide-step}.guide-step{counter-increment:guide-step;margin-top:2.25rem}.guide-step .guide-step-title{align-items:center;gap:.75rem;margin-top:0;font-size:1.2rem;line-height:1.3;display:flex}.guide-step .guide-step-title:before{content:counter(guide-step);background:var(--primary);width:2rem;height:2rem;color:var(--primary-foreground);border-radius:50%;flex:none;place-items:center;font-size:1rem;font-weight:700;line-height:1;display:grid}.guide-step-text,.guide-step-text>*+*{margin-top:.5rem}.guide-step .shot{margin-top:1rem}.shot{--shot-accent:#b42318;width:100%;margin:0;font-family:Excalifont,Segoe Print,Bradley Hand,Comic Sans MS,cursive;position:relative;container:shot/inline-size}.dark .shot{--shot-accent:#fbbf24}.prose>.shot{margin-top:1.5rem}.shot-frame{position:relative}.shot-open{border-radius:var(--radius);cursor:zoom-in;background:0 0;border:0;width:100%;padding:0;display:block}.shot-open:focus-visible{outline:3px solid var(--ring);outline-offset:3px}.shot-image{border:1px solid var(--border);border-radius:var(--radius);width:100%;height:auto;box-shadow:var(--shadow);display:block}.shot-image.shot-dark,.dark .shot-image.shot-light{display:none}.dark .shot-image.shot-dark{display:block}.shot-marks{pointer-events:none;width:100%;height:100%;filter:drop-shadow(0 0 2px color-mix(in srgb, var(--background) 75%, transparent));position:absolute;inset:0;overflow:visible}.shot-marks path{fill:none;stroke:var(--shot-accent);stroke-width:3px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}.shot .shot-notes{pointer-events:none;margin:0;padding:0;font-size:2.3cqw;line-height:1.15;list-style:none;position:absolute;inset:0}.shot .shot-note{left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);transform:translate(var(--tx), -50%);width:max-content;max-width:calc(var(--chars) * .56em);color:var(--shot-accent);text-shadow:0 0 .3em var(--background), 0 0 .12em var(--background);margin:0;position:absolute}.shot .shot-note-busy{background:color-mix(in srgb, var(--background) 88%, transparent);text-shadow:none;border-radius:.5em;padding:.15em .45em}.shot .shot-badges{pointer-events:none;margin:0;padding:0;list-style:none;display:none;position:absolute;inset:0}.shot .shot-badge{left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);background:var(--shot-accent);width:1.5rem;height:1.5rem;color:var(--background);border-radius:50%;place-items:center;margin:0;font-size:1rem;line-height:1;display:grid;position:absolute;transform:translate(-50%,-50%)}@container shot (width<=34rem){.shot .shot-badges{display:block}.shot .shot-notes{pointer-events:auto;margin-top:.75rem;padding-left:1.6rem;font-size:1.15rem;list-style:decimal;position:static}.shot .shot-note{width:auto;max-width:none;text-shadow:none;background:0 0;margin-top:.2rem;padding:0;position:static;transform:none}.shot .shot-note::marker{color:var(--shot-accent)}}@keyframes shot-draw{0%{opacity:0;stroke-dashoffset:1px}1%{opacity:1;stroke-dashoffset:1px}to{opacity:1;stroke-dashoffset:0}}@keyframes shot-note-in{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:no-preference){.js .shot:not(.in-view):not(.shot-static) .shot-marks path{opacity:0;stroke-dashoffset:1px}.js .shot:not(.in-view):not(.shot-static) .shot-note{opacity:0}.shot.in-view:not(.shot-static) .shot-marks path{animation:shot-draw var(--dur) ease-out var(--start) both}.shot.in-view:not(.shot-static) .shot-note{animation:shot-note-in .25s ease-out var(--at) both}@container shot (width<=34rem){.js .shot:not(.in-view):not(.shot-static) .shot-note{opacity:1}.shot.in-view:not(.shot-static) .shot-note{animation:none}}}.shot-modal-open{overflow:hidden}.shot-dialog{border-radius:var(--radius);width:min(96vw, calc(88vh * var(--ratio,1.6)));background:var(--background);max-width:96vw;max-height:94vh;color:var(--foreground);box-shadow:var(--shadow);border:0;margin:auto;padding:0;position:fixed;inset:0;overflow:auto}.shot-dialog::backdrop{background:oklch(0% 0 0/.7)}.shot-dialog .shot{margin:0}.shot-dialog .shot-image{box-shadow:none;border:0;border-radius:0}.shot-dialog .shot-notes{pointer-events:none}.shot-close{z-index:1;border:1px solid var(--border);background:var(--background);width:2.25rem;height:2.25rem;color:var(--foreground);cursor:pointer;border-radius:50%;place-items:center;font-size:1.5rem;line-height:1;display:grid;position:absolute;top:.5rem;right:.5rem}.shot-close:hover{background:var(--muted)}@media (prefers-reduced-motion:no-preference){.shot-dialog[open]{animation:.15s ease-out shot-note-in}}