.process-figure{margin:32px 0}.process-figure figcaption{color:var(--notebook-muted);margin-top:12px;font-size:14px;line-height:1.6}.process-wireframe,.process-spacing,.process-options{border:1px solid var(--notebook-rule);background:var(--notebook-surface);color:var(--notebook-text);border-radius:8px;padding:24px}.process-wire-nav{border-bottom:1px solid var(--notebook-rule);justify-content:space-between;gap:16px;padding-bottom:16px;font-size:14px;display:flex}.process-wire-intro{text-align:center;flex-direction:column;align-items:center;gap:12px;padding:32px 0;font-size:14px;display:flex}.process-wire-intro strong{font-size:18px;font-weight:500}.process-wire-action{border:1px solid var(--notebook-muted);border-radius:4px;padding:8px 12px}.process-wire-gallery{grid-template-columns:repeat(4,1fr);gap:12px;display:grid}.process-wire-gallery i,.process-options i{background:color-mix(in srgb, var(--notebook-muted) 10%, transparent);border:1px solid var(--notebook-rule);border-radius:4px;display:block}.process-wire-gallery i{height:64px}.process-wire-section{border:1px dashed var(--notebook-rule);text-align:center;margin-top:16px;padding:16px;font-size:14px}.process-width-label{text-align:center;color:var(--notebook-muted);padding:12px 0;font-size:14px;line-height:1.5}.process-spacing-content{border-inline:1px dashed var(--notebook-muted);margin-inline:12px;padding:16px}.process-spacing-block{border:1px solid var(--notebook-rule);border-radius:4px;padding:12px;font-size:16px}.process-gap-small,.process-gap-large{border-left:1px solid var(--notebook-muted);color:var(--notebook-muted);margin-left:12px;padding:8px 12px;font-size:14px;line-height:1.5}.process-gap-large{padding-block:28px}.process-options{grid-template-columns:1fr 1fr;gap:24px;display:grid}.process-option-grid,.process-option-strip{height:128px;margin-bottom:16px}.process-option-grid{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.process-option-strip{align-items:center;gap:8px;display:flex;overflow:hidden}.process-option-strip i{flex:0 0 40%;height:72px}.process-options strong{font-size:16px;font-weight:500}.notebook-article .process-options p{margin:8px 0 0;font-size:15px}@media (max-width:520px){.process-wireframe,.process-spacing,.process-options{padding:16px}.process-wire-nav{flex-direction:column;gap:8px}.process-options{gap:16px}.process-spacing-content{margin-inline:0;padding-inline:12px}}.process-workflow{border:1px solid var(--notebook-rule);border-radius:8px;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:24px;display:grid}.process-workflow strong{color:var(--notebook-text);font-size:16px;font-weight:500;line-height:1.5;display:block}.process-workflow span{margin-top:8px;font-size:15px;line-height:1.6;display:block}.process-comparison{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}.process-comparison>div{border:1px dashed var(--notebook-muted);text-align:center;place-items:center;min-height:100px;padding:12px;font-size:14px;display:grid}.reading-capture{margin:32px 0}.reading-capture img{border:1px solid var(--notebook-rule);border-radius:8px;width:100%;height:auto;display:block}.reading-capture figcaption{margin-top:12px;font-size:14px;line-height:1.6}@media (max-width:520px){.process-workflow{grid-template-columns:1fr;gap:24px;padding:16px}}
.skill-comparison,.skill-workflow{margin:32px 0}.skill-comparison-controls{flex-wrap:wrap;gap:8px;margin-bottom:16px;display:flex}.skill-comparison-controls button{min-height:44px;font:inherit;color:var(--notebook-muted);border:1px solid var(--notebook-rule);cursor:pointer;background:0 0;border-radius:6px;padding:8px 14px;font-size:15px}.skill-comparison-controls button[aria-pressed=true]{background:var(--notebook-text);color:var(--notebook-bg);border-color:var(--notebook-text)}.skill-comparison-controls button:focus-visible{outline:2px solid var(--notebook-text);outline-offset:3px}.skill-comparison figcaption,.skill-workflow figcaption{margin-top:12px;font-size:14px;line-height:1.6}.skill-workflow-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;display:grid}.skill-workflow-step strong{color:var(--notebook-text);margin-top:12px;font-size:16px;font-weight:500;display:block}.notebook-article .skill-workflow-step p{margin:6px 0 0;font-size:15px;line-height:1.6}.skill-workflow-drawing{background:var(--notebook-surface);border:1px solid var(--notebook-rule);height:112px;color:var(--notebook-text);border-radius:8px;justify-content:center;align-items:center;gap:8px;padding:16px;display:flex}.skill-workflow-drawing i,.skill-workflow-drawing b{background:color-mix(in srgb,var(--notebook-muted) 22%,transparent);border-radius:2px;display:block}.drawing-note{border:1px solid var(--notebook-muted);border-radius:3px;width:75%;padding:12px}.drawing-note b{width:50%;height:6px;margin-bottom:10px}.drawing-note i{height:3px;margin-top:6px}.drawing-reference{border:1px solid var(--notebook-muted);border-radius:3px;width:42%;height:64px;padding:6px}.drawing-reference:last-child{transform:translateY(8px)}.drawing-reference i{height:28px}.drawing-reference b{width:70%;height:4px;margin-top:8px}.drawing-layout{border:1px solid var(--notebook-muted);flex-direction:column;gap:5px;width:28%;height:62px;padding:5px;display:flex}.drawing-layout i{height:16px}.drawing-layout b{flex:1}.drawing-layout:nth-child(2){flex-direction:row}.drawing-layout:nth-child(2) i{width:40%;height:auto}.drawing-layout:last-child{flex-direction:column-reverse}.drawing-window{border:1px solid var(--notebook-muted);border-radius:3px;width:100%;height:68px;padding:8px}.drawing-window>i{width:35%;height:4px}.drawing-window>div{gap:8px;height:32px;margin-top:10px;display:flex}.drawing-window b{width:60%}.drawing-window span{border:1px solid var(--notebook-muted);border-radius:2px;flex:1}.drawing-review{grid-template-columns:16px 1fr;align-items:center;gap:4px 8px;width:80%;display:grid}.drawing-review i{height:4px}@media (max-width:520px){.skill-workflow-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}}.skill-live-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;font-size:14px;line-height:1.5;display:flex}.skill-live-toolbar a{align-items:center;min-height:44px;display:inline-flex}.skill-live-frame{border:1px solid var(--notebook-rule);isolation:isolate;border-radius:8px;overflow:hidden}.skill-live-frame iframe{background:#fff;border:0;width:100%;height:580px;display:block}@media (max-width:520px){.skill-live-frame iframe{height:520px}}
.sketch-page-body{padding-bottom:2rem}.sketch-chrome-footer{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 20px;font-size:13px;display:flex}.sketch-chrome-footer-link{color:var(--notebook-text,#121212);font-variation-settings:var(--site-font-variation-bold);font-weight:var(--site-font-weight-bold);text-decoration:none;transition:opacity .16s}.sketch-chrome-footer-link:hover{opacity:.55}.sketch-chrome-footer-sep,.sketch-chrome-footer-muted{color:var(--notebook-muted,#8c8c8c)}.sketch-design-note{padding-top:4px;scroll-margin-top:6rem}.sketch-design-note-link{color:var(--notebook-text,#121212);font-variation-settings:var(--site-font-variation-bold);font-weight:var(--site-font-weight-bold);text-decoration:none;transition:opacity .16s}.sketch-design-note-link:hover{opacity:.55}.sketch-digit-flow{flex-direction:column;gap:20px;display:flex}.sketch-example{flex-direction:column;gap:12px;display:flex}.sketch-example-label{color:#121212;font-size:13px;line-height:1.3;font-family:var(--font-inter), system-ui, -apple-system, BlinkMacSystemFont, sans-serif;letter-spacing:normal;margin:0;padding:0}.sketch-example .notebook-media{flex-direction:column;gap:8px;display:flex}.sketch-example .notebook-media-caption{margin:0}.sketch-flow-stage{--media-letterbox:var(--notebook-surface,#fafafa);aspect-ratio:auto;min-height:220px;padding:32px 24px}:is(.sketch-flow-stage:has(.sketch-activity),.sketch-flow-stage:has(.sketch-slider)){min-height:120px;padding:28px 20px}.sketch-ascii-stage{--media-letterbox:#0c0c0e;min-height:min(72vw,420px);padding:18px 10px 20px}@media (prefers-color-scheme:dark){.sketch-ascii-stage{--media-letterbox:#050505}}.sketch-ascii-panel{flex-direction:column;align-items:center;gap:14px;width:100%;display:flex}.sketch-ascii-viewport{justify-content:center;align-items:center;width:100%;height:300px;display:flex;overflow:hidden}.sketch-ascii-viewport-inner{transform-origin:50%;will-change:transform;display:inline-block}.sketch-ascii-panel--hover{color:inherit;cursor:pointer;background:0 0;border:none;width:100%;margin:0;padding:0}.sketch-ascii-panel--hover:focus-visible{outline-offset:4px;border-radius:4px;outline:2px solid #ffffff59}.sketch-ascii-pre{letter-spacing:0;white-space:pre;color:#d8e8d8;-webkit-user-select:none;user-select:none;width:max-content;margin:0;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:7px;line-height:.52}.sketch-ascii-pre--color .sketch-ascii-row{display:block}.sketch-ascii-hint{text-align:center;font-size:12px}.sketch-ascii-control{color:#ffffff8c;align-items:center;gap:10px;width:min(100%,220px);font-size:12px;display:flex}.sketch-ascii-range{accent-color:#d8e8d8;flex:1}.sketch-ascii-range-value{text-align:right;font-variant-numeric:tabular-nums;color:#ffffffb8;min-width:1.5rem}.notebook-media-stage.sketch-liquid-stage{--media-letterbox:#2c2c2c;--media-stage-border:#ffffff24;aspect-ratio:16/9;touch-action:none;cursor:default;min-height:200px;padding:0;box-shadow:0 10px 32px #1212121f}.sketch-liquid-fill{position:absolute;inset:0}.sketch-liquid-canvas{width:100%;height:100%;display:block}.sketch-liquid-status{z-index:2;color:#ffffff8c;pointer-events:none;font-size:12px;position:absolute;bottom:12px;left:50%;transform:translate(-50%)}.sketch-flow-inner{flex-direction:column;align-items:center;gap:20px;width:100%;display:flex}.sketch-flow-label{font-size:13px}.sketch-flow-hit{cursor:pointer;color:inherit;background:0 0;border:none;margin:0;padding:0}.sketch-flow-hit:focus-visible{outline-offset:6px;border-radius:4px;outline:2px solid #12121259}.sketch-flow-number{font-variation-settings:var(--site-font-variation-bold);font-size:clamp(2.1rem,8vw,2.85rem);font-weight:var(--site-font-weight-bold);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--notebook-text,#121212);--number-flow-mask-height:.2em;--number-flow-mask-width:.4em;line-height:.88;display:inline-block}.sketch-flow-action{font:inherit;font-variation-settings:var(--site-font-variation-bold);font-size:16px;font-weight:var(--site-font-weight-bold);color:var(--notebook-text,#121212);cursor:pointer;background:0 0;border:none;margin:0;padding:0;text-decoration:none;transition:opacity .16s}.sketch-flow-action:hover{opacity:.55}.sketch-activity{width:100%;color:var(--notebook-muted,#8c8c8c);-webkit-user-select:none;user-select:none;align-items:center;gap:4px;display:flex}.sketch-activity-item,.sketch-activity-btn{flex:1;align-items:center;gap:6px;min-width:0;display:flex}.sketch-activity-btn{font:inherit;color:inherit;cursor:pointer;background:0 0;border:none;margin:0;padding:0;transition:color .16s}.sketch-activity-btn:hover{color:var(--notebook-text,#121212)}.sketch-activity-btn.is-reply.is-on{color:#1d8cd6}.sketch-activity-btn.is-like.is-on{color:#c23d67}.sketch-activity-btn.is-save.is-on{color:#2f5d9b}.sketch-activity-btn.is-on svg{fill:currentColor}.sketch-activity-bookmark{flex:1}.sketch-activity-share{flex-shrink:0;margin-left:auto;display:flex}.sketch-activity-icon{flex-shrink:0;place-items:center;width:18px;height:18px;display:grid}.sketch-activity-icon svg{width:16px;height:16px}.sketch-activity-number{font-variant-numeric:tabular-nums;color:inherit;font-size:14px;font-weight:400;line-height:1}@media (max-width:380px){.sketch-activity-number--bookmark{display:none}.sketch-activity-bookmark{flex:0}}.sketch-slider{width:min(100%,200px);margin:28px auto 8px;padding-top:36px;position:relative}.sketch-slider-value{pointer-events:none;position:absolute;top:0;transform:translate(-50%)}.sketch-slider-number{font-variation-settings:var(--site-font-variation-bold);font-size:18px;font-weight:var(--site-font-weight-bold);font-variant-numeric:tabular-nums;color:var(--notebook-text,#121212);line-height:1}.sketch-slider-input{appearance:none;cursor:pointer;background:0 0;width:100%;height:20px;margin:0}.sketch-slider-input:focus-visible{outline:none}.sketch-slider-input::-webkit-slider-runnable-track{background:#1212121a;border-radius:999px;height:3px}.sketch-slider-input::-webkit-slider-thumb{-webkit-appearance:none;background:#fff;border:1px solid #1212121f;border-radius:50%;width:20px;height:20px;margin-top:-8px;box-shadow:0 2px 8px #1212121f}.sketch-slider-input::-moz-range-track{background:#1212121a;border-radius:999px;height:3px}.sketch-slider-input::-moz-range-thumb{background:#fff;border:1px solid #1212121f;border-radius:50%;width:20px;height:20px;box-shadow:0 2px 8px #1212121f}@media (prefers-color-scheme:dark){.sketch-flow-hit:focus-visible{outline-color:#fff6}.sketch-slider-input::-webkit-slider-runnable-track{background:#ffffff24}.sketch-slider-input::-moz-range-track{background:#ffffff24}.sketch-slider-input::-webkit-slider-thumb{background:var(--notebook-surface,#0d0d0d);border-color:#ffffff29}.sketch-slider-input::-moz-range-thumb{background:var(--notebook-surface,#0d0d0d);border-color:#ffffff29}}@media (prefers-reduced-motion:reduce){.sketch-flow-action:hover,.sketch-chrome-footer-link:hover{opacity:1}}