: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}*{box-sizing:border-box}body{font-family:Nanum Myeongjo,Georgia,serif;line-height:1.5;color:var(--primary-color);background:var(--bg-color);margin:0;padding:0}.container{max-width:900px;margin:0 auto;padding:20px 96px}.site-nav{background:var(--nav-bg);border-bottom:1px solid var(--border-color);padding:0;height:56px;display:flex;align-items:center}.site-nav .container{display:flex;gap:30px;padding:0 96px;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:#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}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:#fafafa;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{border:1px solid var(--border-color);border-radius:8px;padding:20px;margin-bottom:20px}.section-card h3{margin-top:0}.callout{background:#f8f9fa;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:#d4e5f7;color:#1a3a5c}.section-header.purple{background:#e8daf0;color:#4a2a6a}.section-header.gray{background:#e8e8e8;color:#444}.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:#fafafa;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}.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:1px solid var(--border-color);color:var(--secondary-color);font-size:.9em;text-align:center}@media(max-width:600px){.container{padding:15px 24px}.site-nav .container{padding:0 24px;gap:20px}h1{font-size:1.8em}}.astro-code{background:#fafafa!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}