:root{--primary-color: #37352F;--secondary-color: #787774;--link-color: #327DA9;--link-hover: #2a6a91;--bg-color: #fff;--code-bg: rgba(135, 131, 120, .15);--border-color: #E9E9E7;--nav-bg: #fff;--hover-bg: #f0f0f0;--active-bg: #e8f0f8;--code-block-bg: hsl(230, 1%, 98%);--canvas-bg: #f0f0f0;--callout-bg: #f8f9fa;--dot-color: rgba(0, 0, 0, .07);--accent-generative: #4a7fa5;--wave-color: rgba(50, 125, 169, .15);--section-blue-bg: #d4e5f7;--section-blue-color: #1a3a5c;--section-purple-bg: #e8daf0;--section-purple-color: #4a2a6a;--section-gray-bg: #e8e8e8;--section-gray-color: #444}:root[data-theme=dark]{--primary-color: #e0ddd8;--secondary-color: #a0a09c;--link-color: #5ba3d4;--link-hover: #7db8e0;--bg-color: #1a1a1a;--code-bg: rgba(200, 200, 200, .12);--border-color: #333;--nav-bg: #1a1a1a;--hover-bg: #2a2a2a;--active-bg: #1e2d3d;--code-block-bg: #1e1e1e;--canvas-bg: #2a2a2a;--callout-bg: #242424;--dot-color: rgba(255, 255, 255, .06);--accent-generative: #5ba3d4;--wave-color: rgba(91, 163, 212, .15);--section-blue-bg: #1e2d3d;--section-blue-color: #a0c4e0;--section-purple-bg: #2d1e3d;--section-purple-color: #c0a0e0;--section-gray-bg: #2a2a2a;--section-gray-color: #c0c0c0}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--primary-color: #e0ddd8;--secondary-color: #a0a09c;--link-color: #5ba3d4;--link-hover: #7db8e0;--bg-color: #1a1a1a;--code-bg: rgba(200, 200, 200, .12);--border-color: #333;--nav-bg: #1a1a1a;--hover-bg: #2a2a2a;--active-bg: #1e2d3d;--code-block-bg: #1e1e1e;--canvas-bg: #2a2a2a;--callout-bg: #242424;--dot-color: rgba(255, 255, 255, .06);--accent-generative: #5ba3d4;--wave-color: rgba(91, 163, 212, .15);--section-blue-bg: #1e2d3d;--section-blue-color: #a0c4e0;--section-purple-bg: #2d1e3d;--section-purple-color: #c0a0e0;--section-gray-bg: #2a2a2a;--section-gray-color: #c0c0c0}}.skip-link{position:absolute;top:-100%;left:16px;z-index:100;padding:8px 16px;background:var(--primary-color);color:var(--bg-color);border-radius:0 0 4px 4px;text-decoration:none;font-size:.9em}.skip-link:focus{top:0}*{box-sizing:border-box}body{font-family:Nanum Myeongjo,Georgia,serif;line-height:1.5;color:var(--primary-color);background-color:var(--bg-color);background-image:radial-gradient(circle,var(--dot-color) 1px,transparent 1px);background-size:24px 24px;margin:0;padding:0}.container{max-width:900px;margin:0 auto;padding:20px 48px}.site-nav{background:var(--nav-bg);padding:0;height:56px;display:flex;align-items:center;position:relative}.site-nav:after{content:"";position:absolute;bottom:0;left:0;right:0;height:8px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='8' viewBox='0 0 120 8'%3E%3Cpath d='M0 4 C15 0, 15 0, 30 4 S45 8, 60 4 S75 0, 90 4 S105 8, 120 4' fill='none' stroke='%23327DA9' stroke-width='1' opacity='0.15'/%3E%3C/svg%3E");background-repeat:repeat-x;background-size:120px 8px}.site-nav .container{display:flex;gap:30px;padding:0 48px;align-items:center;width:100%}.site-nav a{color:var(--secondary-color);text-decoration:none;font-size:.95em}.site-nav a:hover{color:var(--primary-color);background:var(--hover-bg);border-radius:3px;padding:2px 6px;margin:-2px -6px}.site-nav a.active{color:var(--primary-color);font-weight:600}.site-nav a .icon{vertical-align:-.15em}.theme-toggle{background:none;border:none;cursor:pointer;padding:4px;color:var(--secondary-color);font-size:1.2em;line-height:1}.theme-toggle:hover{color:var(--primary-color)}.theme-toggle .theme-icon-dark{display:none}:root[data-theme=dark] .theme-toggle .theme-icon-light{display:none}:root[data-theme=dark] .theme-toggle .theme-icon-dark{display:inline}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .theme-toggle .theme-icon-light{display:none}:root:not([data-theme=light]) .theme-toggle .theme-icon-dark{display:inline}}.search-container{margin-left:auto;max-width:200px;min-width:0}.search-container .pagefind-ui__search-input{font-size:.85em;padding:4px 8px;height:32px}.search-container .pagefind-ui__search-clear{height:32px;width:32px}.search-container .pagefind-ui__drawer{position:absolute;right:0;top:100%;z-index:50;background:var(--bg-color);border:1px solid var(--border-color);border-radius:4px;box-shadow:0 4px 12px #0000001a;max-width:500px;width:90vw}@media(max-width:600px){.search-container{max-width:140px}}.breadcrumb{font-size:.9em;color:var(--secondary-color);margin-bottom:20px}.breadcrumb a{color:var(--secondary-color)}.breadcrumb a:hover{color:var(--link-color)}.toc{margin-bottom:1.5em}.toc ul{list-style:none;padding-left:0}.toc li{margin-bottom:.4em}.toc a{color:var(--secondary-color);text-decoration:underline}.toc a:hover{color:var(--primary-color)}h1{font-size:2.5rem;margin-bottom:.5em;font-weight:600}h2{font-size:1.5rem;margin-top:2em;margin-bottom:.8em;font-weight:600}h3{font-size:1.25rem;margin-top:1.5em;margin-bottom:.5em;font-weight:600}p{margin-bottom:1.2em}p:has(>a:only-child){margin-bottom:.3em}a{color:var(--link-color);text-decoration:none}a:hover{text-decoration:underline}img{max-width:100%;height:auto}ul,ol{margin-bottom:1.5em;padding-left:1.5em}li{margin-bottom:.5em}.page-list{padding-left:1.5em}.page-list li{margin-bottom:.3em}pre{background:var(--code-block-bg);padding:1.4rem;border-radius:.3em;overflow-x:auto;font-family:Fira Code,Fira Mono,Monaco,Menlo,Ubuntu Mono,monospace;font-size:.85em;line-height:1.5;margin:1.5em 0}code{font-family:Fira Code,Fira Mono,Monaco,Menlo,Ubuntu Mono,monospace;font-size:.85em;background:var(--code-bg);padding:2px 6px;border-radius:3px}pre code{background:none;padding:0}.icon{width:1em;height:1em;vertical-align:middle;display:inline-block}.code-block-wrapper{position:relative}.copy-btn{position:absolute;top:8px;right:8px;background:#0006;color:#fff;border:none;border-radius:4px;padding:4px 10px;font-size:.8rem;cursor:pointer;opacity:0;transition:opacity .2s}.code-block-wrapper:hover .copy-btn,.code-block-wrapper:focus-within .copy-btn{opacity:.6}.copy-btn:hover,.copy-btn:focus-visible{opacity:1!important}.code-example{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;margin:2em 0;align-items:start}.code-example:not(:has(.canvas-preview)){grid-template-columns:minmax(0,1fr)}.code-block-wrapper{min-width:0}.code-block-wrapper pre{max-width:100%}.code-example pre{margin:0}.code-example .canvas-preview{position:relative;min-width:0;background:var(--canvas-bg);border:1px solid var(--border-color);border-radius:5px;padding:10px;text-align:center}.code-example .p5-clear-each-frame{display:flex;align-items:center;justify-content:center;gap:.4rem;margin-bottom:8px;font:.85rem/1.4 system-ui,sans-serif;color:var(--primary-color);cursor:pointer}pre .scrubbable-number{cursor:ew-resize!important;border-bottom:1px dashed currentColor}pre .scrubbable-number:hover{background:#327da926;border-radius:2px}pre .scrubbable-number:focus-visible{outline:2px solid var(--link-color);outline-offset:2px}pre .highlight-line{display:inline-block;width:calc(100% + 2.8rem);margin:0 -1.4rem;padding:0 1.4rem;background:var(--active-bg);--shiki-dark-bg: var(--active-bg);box-shadow:inset 2px 0 var(--link-color)}.p5-reset{position:absolute;top:8px;right:60px;background:#0006;color:#fff;border:none;border-radius:4px;padding:4px 8px;font-size:.8rem;cursor:pointer;opacity:.6;transition:opacity .2s}.p5-reset:hover{opacity:1}.p5-play-pause{position:absolute;bottom:8px;right:8px;background:#0006;color:#fff;border:none;border-radius:4px;padding:4px 8px;font-size:1rem;cursor:pointer;opacity:.3;transition:opacity .2s}.p5-play-pause:hover,.p5-play-pause:focus-visible{opacity:1}.canvas-preview:focus-within .p5-play-pause{opacity:.6}.sidebar a:focus-visible,.site-nav a:focus-visible,.step-btn:focus-visible,.p5-reset:focus-visible,.p5-play-pause:focus-visible,.copy-btn:focus-visible{outline:2px solid var(--link-color);outline-offset:2px}.code-example .canvas-preview img{max-width:100%;height:auto}.code-example .canvas-preview canvas{width:100%!important;max-width:100%;height:auto!important}.canvas-placeholder{background:linear-gradient(135deg,#e8e8e8 25%,#f5f5f5 25% 50%,#e8e8e8 50% 75%,#f5f5f5 75%);background-size:20px 20px;width:100%;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;color:var(--secondary-color);font-size:.85em;border-radius:3px}@media(max-width:800px){.code-example{grid-template-columns:minmax(0,1fr)}.code-example .canvas-preview{order:-1}}.step-tutorial{display:grid;grid-template-columns:1fr 300px;grid-template-rows:1fr auto;gap:20px;margin:2em 0;align-items:start}.step-tutorial-left{position:relative;grid-column:1;grid-row:1;min-width:0}.step-tutorial-left pre{margin:0}.step-description{margin-bottom:1em}.step-description p:last-child{margin-bottom:0}.step-tutorial-right{grid-column:2;grid-row:1;position:sticky;top:70px}.step-canvas-wrapper{position:relative;background:var(--canvas-bg);border:1px solid var(--border-color);border-radius:5px;padding:10px;text-align:center}.step-tutorial-nav{grid-column:1 / -1;grid-row:2;display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 0}.step-indicator{font-size:.9em;color:var(--secondary-color);min-width:100px;text-align:center}.step-btn{background:var(--hover-bg);border:1px solid var(--border-color);border-radius:4px;padding:6px 12px;font-size:1rem;cursor:pointer;transition:background .15s}.step-btn:hover:not(:disabled){background:var(--border-color)}.step-btn:disabled{opacity:.3;cursor:default}@media(max-width:800px){.step-tutorial{grid-template-columns:1fr}.step-tutorial-right{grid-column:1;grid-row:2;position:static}.step-tutorial-nav{grid-row:3}}.section-card{border:1px solid var(--border-color);border-radius:8px;padding:20px;margin-bottom:20px}.section-card h3{margin-top:0}.callout{background:var(--callout-bg);border-left:4px solid var(--link-color);padding:15px 20px;margin:1.5em 0;border-radius:2px}.callout p:last-child{margin-bottom:0}.section-header{font-size:1.4em;font-weight:600;padding:8px 15px;margin:1.5em 0 .8em;border-radius:3px}.section-header.blue{background:var(--section-blue-bg);color:var(--section-blue-color)}.section-header.purple{background:var(--section-purple-bg);color:var(--section-purple-color)}.section-header.gray{background:var(--section-gray-bg);color:var(--section-gray-color)}.two-column{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin:1em 0}@media(max-width:700px){.two-column{grid-template-columns:1fr}}table{width:100%;border-collapse:collapse;margin:1.5em 0;font-size:.9em}th,td{padding:10px 12px;text-align:left;border:1px solid var(--border-color)}th{background:var(--code-block-bg);font-weight:600}td code{font-size:.85em}.hamburger{display:none;background:none;border:none;cursor:pointer;padding:4px;color:var(--secondary-color)}.hamburger:hover{color:var(--primary-color)}.hamburger .hamburger-close,body.nav-open .hamburger .hamburger-open{display:none}body.nav-open .hamburger .hamburger-close{display:inline-block}.nav-backdrop{display:none}@media(max-width:1199px){body:has(.sidebar) .hamburger{display:inline-flex}.nav-backdrop{position:fixed;inset:0;background:#0000004d;z-index:9;display:none}body.nav-open .nav-backdrop{display:block}}.sidebar{position:fixed;top:57px;left:0;bottom:0;width:200px;overflow-y:auto;padding:20px 12px 20px 16px;font-size:.8em;background:var(--bg-color);background-image:radial-gradient(circle,var(--accent-generative) 1.5px,transparent 1.5px);background-size:8px 12px;background-repeat:repeat-y;background-position:right 2px top 0;z-index:10}.sidebar .sidebar-section-title{font-weight:600;color:var(--primary-color);text-decoration:none;display:block;margin-bottom:.6em;font-size:1.05em}.sidebar .sidebar-section-title:hover{color:var(--link-color)}.sidebar h3{font-size:.85em;text-transform:uppercase;letter-spacing:.05em;color:var(--secondary-color);margin:1em 0 .3em}.sidebar ul{list-style:none;padding:0;margin:0 0 .3em}.sidebar li{margin-bottom:.1em}.sidebar a{color:var(--secondary-color);text-decoration:none;display:block;padding:2px 6px;border-radius:3px;line-height:1.35}.sidebar a:hover{color:var(--primary-color);background:var(--hover-bg);text-decoration:none}.sidebar a.active{color:var(--primary-color);background:var(--active-bg);font-weight:600}@media(min-width:1200px){body:has(.sidebar) main.container{margin-left:200px}}@media(max-width:1199px){.sidebar{transform:translate(-100%);transition:transform .25s ease}body.nav-open .sidebar{transform:translate(0)}}.related-pages{margin-top:3em;padding-top:1.5em;position:relative}.related-pages:before{content:"";position:absolute;top:0;left:0;right:0;height:8px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='8' viewBox='0 0 120 8'%3E%3Cpath d='M0 4 C15 0, 15 0, 30 4 S45 8, 60 4 S75 0, 90 4 S105 8, 120 4' fill='none' stroke='%23327DA9' stroke-width='1' opacity='0.15'/%3E%3C/svg%3E");background-repeat:repeat-x;background-size:120px 8px}.related-pages h3{font-size:.9em;text-transform:uppercase;letter-spacing:.05em;color:var(--secondary-color);margin-top:0}.related-pages ul{padding-left:0;list-style:none}.related-pages li{margin-bottom:.3em}footer{margin-top:60px;padding:30px 0;color:var(--secondary-color);font-size:.9em;text-align:center;position:relative}footer:before{content:"";position:absolute;top:0;left:0;right:0;height:8px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='8' viewBox='0 0 120 8'%3E%3Cpath d='M0 4 C15 0, 15 0, 30 4 S45 8, 60 4 S75 0, 90 4 S105 8, 120 4' fill='none' stroke='%23327DA9' stroke-width='1' opacity='0.15'/%3E%3C/svg%3E");background-repeat:repeat-x;background-size:120px 8px}.last-updated{font-size:.85em;margin-bottom:.5em}@media(max-width:600px){.container{padding:15px 24px}.site-nav .container{padding:0 12px;gap:8px}h1{font-size:1.8em}.breadcrumb{font-size:.8em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}.code-block-wrapper:before{content:"(0,0)";position:absolute;top:6px;left:10px;font-family:Fira Code,Fira Mono,monospace;font-size:.65em;color:var(--secondary-color);opacity:.25;pointer-events:none;z-index:1}main.container h2:before{content:"";display:inline-block;width:16px;height:16px;margin-right:8px;vertical-align:middle;background-image:radial-gradient(circle,var(--accent-generative) 1.5px,transparent 1.5px);background-size:6px 6px;opacity:.4}.astro-code{background:var(--code-block-bg)!important;padding:1.4rem;border-radius:.3em;font-family:Fira Code,Fira Mono,Monaco,Menlo,monospace;font-size:.85em;line-height:1.5;margin:1.5em 0}:root[data-theme=dark] .astro-code,:root[data-theme=dark] .astro-code span{color:var(--shiki-dark)!important;background-color:var(--shiki-dark-bg)!important}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .astro-code,:root:not([data-theme=light]) .astro-code span{color:var(--shiki-dark)!important;background-color:var(--shiki-dark-bg)!important}}