.theme-toggle[data-astro-cid-x3pjskd3]{background:none;border:1px solid var(--border-color);border-radius:6px;cursor:pointer;padding:4px 6px;color:var(--secondary-color);display:flex;align-items:center;transition:color .15s,border-color .15s;margin-left:auto}.theme-toggle[data-astro-cid-x3pjskd3]:hover{color:var(--primary-color)}[data-astro-cid-x3pjskd3][data-theme=dark] .icon-sun[data-astro-cid-x3pjskd3]{display:inline}[data-astro-cid-x3pjskd3][data-theme=dark] .icon-moon[data-astro-cid-x3pjskd3]{display:none}[data-astro-cid-x3pjskd3]:not([data-theme=dark]) .icon-sun[data-astro-cid-x3pjskd3]{display:none}[data-astro-cid-x3pjskd3]:not([data-theme=dark]) .icon-moon[data-astro-cid-x3pjskd3]{display:inline}.search-btn[data-astro-cid-2hkkvdbw]{background:none;border:1px solid var(--border-color);border-radius:6px;cursor:pointer;padding:4px 6px;color:var(--secondary-color);display:flex;align-items:center;transition:color .15s,border-color .15s}.search-btn[data-astro-cid-2hkkvdbw]:hover{color:var(--primary-color)}.search-overlay[data-astro-cid-2hkkvdbw]{position:fixed;inset:0;background:#0006;z-index:100;display:flex;align-items:flex-start;justify-content:center;padding-top:15vh}.search-modal[data-astro-cid-2hkkvdbw]{background:var(--bg-color, #fff);border-radius:8px;padding:20px;width:90%;max-width:600px;position:relative;box-shadow:0 8px 32px #00000026}.search-close[data-astro-cid-2hkkvdbw]{position:absolute;top:8px;right:12px;background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--secondary-color)}:root{--primary-color: #37352F;--secondary-color: #787774;--link-color: #327DA9;--link-hover: #2a6a91;--bg-color: #FFFFFF;--code-bg: rgba(135, 131, 120, .15);--border-color: #E9E9E7;--nav-bg: #FFFFFF}[data-theme=dark]{--primary-color: #E8E6E3;--secondary-color: #9B9A97;--link-color: #6CB4E0;--link-hover: #8CC8F0;--bg-color: #191919;--code-bg: rgba(135, 131, 120, .25);--border-color: #383838;--nav-bg: #202020}[data-theme=dark] pre,[data-theme=dark] .astro-code{background:#1e1e1e!important}[data-theme=dark] .astro-code span{color:var(--shiki-dark)!important}[data-theme=dark] th{background:#2a2a2a}[data-theme=dark] .section-header.blue{background:#1a3a5c;color:#a8c8e8}[data-theme=dark] .section-header.purple{background:#3a2050;color:#c8a8e0}[data-theme=dark] .section-header.gray{background:#333;color:#ccc}[data-theme=dark] img{opacity:.9}[data-theme=dark] .callout{background:#222}[data-theme=dark] .section-card{background:#1f1f1f;border-color:var(--border-color)}[data-theme=dark] .canvas-preview,[data-theme=dark] .step-canvas-wrapper{background:#2a2a2a}html{scroll-behavior:smooth}*{box-sizing:border-box}body{font-family:Nanum Myeongjo,Georgia,serif;line-height:1.5;color:var(--primary-color);background-color:var(--bg-color);margin:0;padding:0}.container{max-width:900px;margin:0 auto;padding:20px clamp(24px,5vw,96px)}.site-nav{background:var(--nav-bg);border-bottom:2px solid #D4C9B8;padding:0;height:56px;display:flex;align-items:center}.site-nav .container{display:flex;gap:30px;padding:0 clamp(24px,5vw,96px);align-items:center;width:100%}.site-nav a{color:var(--secondary-color);text-decoration:none;font-size:.95em;transition:color .15s,background .15s}.site-nav a:hover{color:var(--primary-color);background:#f0f0f0;border-radius:3px;padding:2px 6px;margin:-2px -6px}.site-nav a.active{color:var(--primary-color);font-weight:600}.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:2em}.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;transition:color .15s}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:#f9f6f1;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}.code-example{display:grid;grid-template-columns:1fr 300px;gap:20px;margin:2em 0;align-items:start}.code-example pre{margin:0}.code-example .canvas-preview{position:relative;background:#f0f0f0;border:1px solid var(--border-color);border-radius:5px;padding:10px;text-align:center}pre .scrubbable-number{cursor:ew-resize!important;border-bottom:1px dashed currentColor}pre .scrubbable-number:hover{background:#327da926;border-radius:2px}.p5-reset{position:absolute;bottom:8px;right:36px;background:#0006;color:#fff;border:none;border-radius:4px;padding:4px 8px;font-size:1rem;cursor:pointer;opacity:.3;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{opacity:1}.code-example .canvas-preview img{max-width:100%;height:auto}.code-example .canvas-preview canvas{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:1fr}}.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{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:#f0f0f0;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:#f0f0f0;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:#e0e0e0}.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{background:#fffdf9;border:1px solid var(--border-color);border-radius:8px;padding:20px;margin-bottom:20px;transition:box-shadow .2s,transform .2s}.section-card:hover{box-shadow:0 2px 8px #00000014}.section-card h3{margin-top:0}.callout{background:#f8f5ef;border-left:4px solid var(--link-color);padding:15px 20px;margin:1.5em 0;border-radius:2px}.callout p:last-child{margin-bottom:0}@media(max-width:700px){.two-column{grid-template-columns:1fr}}.code-wrong,.code-correct{position:relative;min-width:0}.code-wrong:before,.code-correct:before{display:inline-block;font-size:.75em;font-weight:600;padding:2px 8px;border-radius:3px;margin-bottom:.5em}.code-wrong:before{content:"Wrong";background:#fde8e8;color:#9b1c1c}.code-correct:before{content:"Correct";background:#def7ec;color:#03543f}.code-wrong pre{border-left:3px solid #f87171}.code-correct pre{border-left:3px solid #34d399}.code-wrong pre,.code-correct pre{margin-top:0}.two-column .code-wrong>h2,.two-column .code-wrong>h3,.two-column .code-correct>h2,.two-column .code-correct>h3{display:none}.two-column .code-wrong,.two-column .code-correct{min-width:0}.two-column .code-wrong pre,.two-column .code-correct pre{margin-bottom:0}[data-theme=dark] .code-wrong:before{background:#4a1c1c;color:#f8a8a8}[data-theme=dark] .code-correct:before{background:#0f3a2a;color:#8aecc0}[data-theme=dark] .code-wrong pre{border-left-color:#b91c1c}[data-theme=dark] .code-correct pre{border-left-color:#059669}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:#f5f1eb;font-weight:600}td code{font-size:.85em}.sidebar{position:fixed;top:57px;left:0;bottom:0;width:200px;overflow-y:auto;padding:20px 12px 20px 16px;font-size:.8em;border-right:1px solid var(--border-color);background:var(--bg-color);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;transition:color .15s,background .15s}.sidebar a:hover{color:var(--primary-color);background:#f0f0f0;text-decoration:none}.sidebar a.active{color:var(--primary-color);background:#e8f0f8;font-weight:600}@media(min-width:1200px){body:has(.sidebar) main.container{margin-left:200px}}@media(max-width:1199px){.sidebar{display:none}}footer{margin-top:60px;padding:30px 0;border-top:2px solid #D4C9B8;color:var(--secondary-color);font-size:.9em;text-align:center}.footer-links{display:flex;justify-content:center;gap:16px;margin-bottom:10px}.social-link{color:var(--secondary-color);transition:color .15s;display:flex;align-items:center}.social-link:hover{color:var(--primary-color);text-decoration:none}@media(max-width:600px){h1{font-size:1.8em}}.section-header{font-size:1.4em;font-weight:600;padding:8px 15px;margin:1.5em 0 .8em;border-radius:3px}.section-header.blue{background:#d4e5f7;color:#1a3a5c}.section-header.purple{background:#e8daf0;color:#4a2a6a}.section-header.gray{background:#e8e8e8;color:#444}[data-theme=dark] .section-header.blue{background:#2a3b4c;color:#c7d9ec}[data-theme=dark] .section-header.purple{background:#3b2f40;color:#dcc8e0}[data-theme=dark] .section-header.gray{background:#34312c;color:#d8d6d2}.section-header a{color:inherit;text-decoration:none}.section-header a:hover{text-decoration:underline;text-underline-offset:3px}.two-column{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin:1em 0}@media(max-width:720px){.two-column{grid-template-columns:1fr;gap:0}}.subhead{font-weight:600;font-style:italic;margin:1em 0 .3em}.code-block-wrapper{position:relative}.copy-btn{position:absolute;top:8px;right:8px;background:#0000000d;border:1px solid var(--border-color);border-radius:4px;padding:4px 6px;cursor:pointer;color:var(--secondary-color);opacity:0;transition:opacity .15s,background .15s;display:flex;align-items:center}.code-block-wrapper:hover .copy-btn{opacity:1}.copy-btn:hover{background:#0000001a;color:var(--primary-color)}[data-theme=dark] .copy-btn{background:#ffffff0d}[data-theme=dark] .copy-btn:hover{background:#ffffff1a}@media(min-width:1200px){body:has(.toc) main.container{margin-right:220px}.toc{position:fixed;top:70px;right:20px;width:200px;max-height:calc(100vh - 100px);overflow-y:auto;font-size:.85em}}[data-theme=dark] .sidebar a:hover{background:#2a2a2a}[data-theme=dark] .sidebar a.active{background:#1a3a5c}[data-theme=dark] .site-nav a:hover{background:#2a2a2a}[data-theme=dark] .step-btn{background:#333;border-color:var(--border-color);color:var(--primary-color)}[data-theme=dark] .step-btn:hover:not(:disabled){background:#444}.astro-code{background:#f9f6f1!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}