@font-face{font-family:Caveat;font-style:normal;font-weight:400;font-display:swap;src:url('/assets/editorial/Caveat-Regular.ttf') format('truetype')}
.article-content>.editorial-figure{margin:2.5rem 0 3rem}
.editorial-figure{color:#333}
.sketch-demo{--straighten:0;--title:0;--rough-title:1;--hint:1;--row-one:0;--row-two:0;--field:0;--note:1;--surface:0}
.sketch-demo [hidden]{display:none!important}
.sketch-stage{position:relative;display:flex;justify-content:center;align-items:center;min-height:352px}
.sketch-sheet{position:relative;width:260px;height:260px;flex:none;transform:rotate(calc(-1deg + var(--straighten)*1deg));border-radius:18px;background:rgb(255 255 255 / var(--surface));box-shadow:0 3px 12px rgb(0 0 0 / calc(var(--surface)*.02))}
.sketch-drawing{position:absolute;inset:0;width:100%;height:100%;overflow:visible;stroke:#969996;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.sketch-check{stroke:#fff;opacity:0}
.sketch-scribble-one{opacity:calc(1 - var(--row-one))}
.sketch-scribble-two{opacity:calc(1 - var(--row-two))}
.sketch-title{position:absolute;left:24px;top:24px;line-height:24px;width:180px;height:24px}
.sketch-title-rough{position:absolute;inset:0;font-family:Caveat,cursive;font-size:23px;color:#666;opacity:var(--rough-title);transform:translateY(calc(var(--title)*-1px)) scale(calc(1 - var(--title)*.08));transform-origin:left center}
.sketch-title-clean{position:absolute;inset:0;font-size:14px;font-weight:500;color:#333;opacity:var(--title);transform:translateY(calc((1 - var(--title))*1px))}
.sketch-input-hint{position:absolute;left:36px;top:197px;font-family:Caveat,cursive;font-size:18px;color:#8a8c89;opacity:var(--hint)}
.sketch-activate{position:absolute;inset:0;z-index:2;border:0;border-radius:18px;background:none;cursor:pointer}
.sketch-activate:hover{background:#00000002}
.sketch-note{position:absolute;left:calc(50% + 74px);top:10px;width:152px;height:78px;color:#8a8c89;transform:rotate(2deg);opacity:var(--note);pointer-events:none}
.sketch-note span{display:block;text-align:right;font-family:Caveat,cursive;font-size:20px;line-height:25px;white-space:nowrap}
.sketch-note svg{position:absolute;inset:0;width:126px;height:78px;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.sketch-demo figcaption{display:flex;justify-content:center;align-items:baseline;gap:14px;min-height:23px;font-size:12px;line-height:1.5;text-align:center}
.sketch-reset{font:inherit;border:0;padding:0;background-color:transparent;color:inherit;cursor:pointer;flex:none}
.sketch-app{position:absolute;inset:0}
.sketch-books{position:absolute;left:24px;top:60px;width:212px;height:108px;list-style:none;margin:0;padding:0}
.sketch-books li{margin:0;padding:0;font-size:12px}
.sketch-books label{display:flex;gap:12px;align-items:center;min-height:36px;cursor:pointer}
.sketch-books input{appearance:none;flex:none;width:13px;height:13px;margin:0;border:0;border-radius:4px;background:transparent;cursor:pointer}
.sketch-books li[data-added] input{border:1px solid #d7d7d7;background:#fff}
.sketch-books li[data-added] input:checked{border-color:#333;background:#333 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2.5 6 2.2 2.2 4.8-4.8' fill='none' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
.sketch-demo:has(.sketch-books li:first-child input:checked) .sketch-checkbox-one,.sketch-demo:has(.sketch-books li:nth-child(2) input:checked) .sketch-checkbox-two{fill:#333;stroke:#333!important}
.sketch-demo:has(.sketch-books li:first-child input:checked) .sketch-check-one,.sketch-demo:has(.sketch-books li:nth-child(2) input:checked) .sketch-check-two{opacity:1}
.sketch-books span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sketch-books li:first-child span{clip-path:inset(0 calc((1 - var(--row-one))*100%) 0 0)}
.sketch-books li:nth-child(2) span{clip-path:inset(0 calc((1 - var(--row-two))*100%) 0 0)}
.sketch-books input:checked+span{color:#999;text-decoration:line-through}
.sketch-add-form{position:absolute;left:24px;top:188px;display:flex;gap:8px;width:212px;height:40px}
.sketch-add-form input{width:174px;min-width:0;padding:0 12px;border:0;border-radius:8px;background:transparent;color:#333;font:inherit;font-size:12px;opacity:var(--field)}
.sketch-add-form input::placeholder{color:#999}
.sketch-add-form button{display:flex;justify-content:center;align-items:center;flex:none;width:30px;height:40px;border:0;border-radius:8px;background:transparent;cursor:pointer}
.sketch-add-form button:hover{background:#00000014}
.sketch-demo.has-added .sketch-form-drawing,.sketch-demo.has-added .sketch-input-hint{visibility:hidden}
@media(max-width:520px){.sketch-stage{min-height:350px;padding-top:38px}.sketch-note{left:auto;right:0;top:0}.sketch-demo figcaption{flex-wrap:wrap;gap:5px 14px}.article-content>.editorial-figure{margin:2rem 0 2.5rem}.sketch-add-form input{font-size:16px}.sketch-add-form input::placeholder{font-size:12px}}
@media(prefers-reduced-motion:reduce){.sketch-demo *{transition:none!important}}

.system-demo [hidden]{display:none!important}
.system-stage{padding:12px 0 14px}
.system-diagram{display:block;width:100%;height:auto;overflow:visible;stroke:#969996;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.system-diagram--narrow{display:none}
.system-route{stroke:#bfc2bb;stroke-width:1.1;stroke-dasharray:2 5}
.system-route-pulse,.system-input-pulse{stroke:#888b85;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.system-card{stroke:#b9b9b9;fill:#fff}
.system-card-title{stroke-width:2;stroke:#a0a0a0}
.system-card-body{stroke:#a0a0a0}
.system-copy,.system-previous-button,.system-button-label{opacity:0}
.system-copy,.system-previous-button{stroke:#333;fill:#333}
.system-button-label{stroke:#fff;stroke-width:1.6}
.system-source{fill:none}
.system-source-label{stroke-width:1.6}
.system-model{fill:#fff;stroke:#a0a0a0}
.system-diagram text{stroke:none;text-anchor:middle}
.system-ai-label{fill:#666;font-size:12px;font-family:inherit}
.system-stage-label{fill:#888;font-size:12px;font-family:inherit}
.system-annotation{stroke:#999}
.system-annotation text{font-family:Caveat,cursive;font-size:20px;fill:#8a8c89;transform:rotate(-4deg);transform-origin:72px 88px}
.system-demo figcaption{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:5px 14px;font-size:12px;line-height:1.5;text-align:center}
.system-play{padding:0;border:0;background-color:transparent;font:inherit;color:inherit;cursor:pointer;min-height:24px}
.system-play[aria-disabled=true]{cursor:default;opacity:.55}
@media(max-width:520px){.system-stage{max-width:340px;margin:auto;padding:4px 0 14px}.system-diagram--wide{display:none}.system-diagram--narrow{display:block}.system-demo figcaption{flex-direction:column;align-items:center}.system-stage-label{font-size:13px}}

.editorial-circle{position:relative;display:inline-block;max-width:100%}
.editorial-circle::after{content:'';position:absolute;inset:-12px -17px -13px;background:url('/assets/editorial/pencil-circle.svg') center/100% 100% no-repeat;pointer-events:none}