:root{--color-primary: #6366f1;--color-primary-light: #818cf8;--color-primary-dark: #4338ca;--color-accent: #f97316;--color-accent-light: #fdba74;--color-bg: #fefce8;--color-bg-surface: #ffffff;--color-bg-code: #1a1b26;--color-bg-sidebar: #faf5ff;--color-text: #1e1b4b;--color-text-muted: #4b5563;--color-text-inverse: #f8fafc;--color-tip: #059669;--color-warning: #d97706;--color-exercise: #8b5cf6;--color-note: #3b82f6;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--space-3xl: 4rem;--space-4xl: 5rem;--space-5xl: 6rem;--font-sans: "Noto Sans JP", system-ui, -apple-system, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.25rem;--line-height-relaxed: 1.8;--line-height-tight: 1.3;--sidebar-width: 280px;--header-height: 60px;--content-max-width: 768px;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1)}*,*:before,*:after{box-sizing:border-box}body,h1,h2,h3,h4,h5,h6,p,ul,ol,figure,blockquote,dl,dd{margin:0}ul,ol{padding:0}html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-sans);font-size:var(--font-size-base);line-height:var(--line-height-relaxed);color:var(--color-text);background-color:var(--color-bg);min-height:100vh}img{max-width:100%;height:auto;display:block}a{color:var(--color-primary);text-decoration:none;transition:color .2s}a:hover{color:var(--color-primary-dark)}code{font-family:var(--font-mono);font-size:.9em}:not(pre)>code{background:#6366f11a;color:var(--color-primary-dark);padding:.2em .5em;border-radius:var(--radius-sm);border:1px solid rgba(99,102,241,.15);font-size:.85em}.callout{padding:var(--space-xl) var(--space-xl) var(--space-lg);border-left:4px solid;border-radius:0 var(--radius-md) var(--radius-md) 0;margin:var(--space-2xl) 0;position:relative}.callout-title{font-weight:700;font-size:var(--font-size-sm);margin-bottom:var(--space-md);display:flex;align-items:center;gap:var(--space-sm)}.callout p:last-child{margin-bottom:0}.callout-body>*:last-child{margin-bottom:0}.callout-body pre{margin:var(--space-lg) 0}.callout--exercise{border-color:var(--color-exercise);background:#8b5cf60f}.callout--exercise .callout-title{color:var(--color-exercise)}.callout--tip{border-color:var(--color-tip);background:#10b9810f}.callout--tip .callout-title{color:var(--color-tip)}.callout--warning{border-color:var(--color-warning);background:#f59e0b0f}.callout--warning .callout-title{color:var(--color-warning)}.callout--note{border-color:var(--color-note);background:#3b82f60f}.callout--note .callout-title{color:var(--color-note)}.screenshot-frame{border:1px solid #e5e7eb;border-radius:var(--radius-lg);overflow:hidden;margin:var(--space-2xl) 0;box-shadow:var(--shadow-md);background:var(--color-bg-surface)}.screenshot-chrome{background:#f3f4f6;padding:var(--space-sm) var(--space-md);display:flex;align-items:center;gap:var(--space-sm);border-bottom:1px solid #e5e7eb}.screenshot-dots{display:flex;gap:6px;flex-shrink:0}.screenshot-dots span{width:12px;height:12px;border-radius:50%}.screenshot-dots span:nth-child(1){background:#ef4444}.screenshot-dots span:nth-child(2){background:#f59e0b}.screenshot-dots span:nth-child(3){background:#22c55e}.screenshot-url{background:#fff;border-radius:var(--radius-sm);padding:var(--space-xs) var(--space-md);font-size:.8rem;color:var(--color-text-muted);font-family:var(--font-mono);flex:1;border:1px solid #e5e7eb}.screenshot-frame img{display:block;width:100%}.screenshot-caption{padding:var(--space-sm) var(--space-md);font-size:var(--font-size-sm);color:var(--color-text-muted);text-align:center;background:#fafafa;border-top:1px solid #e5e7eb}.code-block-wrapper{position:relative;margin:var(--space-2xl) 0}.code-filename{display:inline-block;background:#2d2b55;color:var(--color-text-inverse);padding:var(--space-xs) var(--space-md);font-family:var(--font-mono);font-size:.8rem;border-radius:var(--radius-md) var(--radius-md) 0 0;margin-bottom:-1px;position:relative;z-index:1}.code-block-wrapper pre{margin-top:0!important;border-top-left-radius:0!important}.chapter-nav{display:flex;justify-content:space-between;gap:var(--space-lg);margin-top:var(--space-3xl);padding-top:var(--space-2xl);border-top:1px solid rgba(99,102,241,.15)}.chapter-nav-link{display:flex;flex-direction:column;gap:var(--space-xs);padding:var(--space-lg);background:var(--color-bg-surface);border:1px solid rgba(99,102,241,.15);border-radius:var(--radius-lg);transition:all .2s;flex:1;max-width:50%;text-decoration:none}.chapter-nav-link:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md);transform:translateY(-2px)}.chapter-nav-link--next{text-align:right;margin-left:auto}.chapter-nav-label{font-size:var(--font-size-sm);color:var(--color-text-muted);font-weight:500}.chapter-nav-title{font-weight:700;color:var(--color-primary)}.compare-code{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);margin:var(--space-2xl) 0}.compare-code-panel{overflow:hidden}.compare-code-label{display:block;padding:var(--space-sm) var(--space-md);font-size:var(--font-size-sm);font-weight:700;text-align:center;border-radius:var(--radius-md) var(--radius-md) 0 0}.compare-code-label--before{background:#ef44441a;color:#dc2626}.compare-code-label--after{background:#10b9811a;color:#059669}.compare-code-panel pre{border-top-left-radius:0!important;border-top-right-radius:0!important;margin:0!important}@media(max-width:768px){.compare-code{grid-template-columns:1fr}.callout{padding:var(--space-lg) var(--space-md);margin:var(--space-xl) 0}.screenshot-frame{margin:var(--space-xl) calc(-1 * var(--space-md));border-radius:0;border-left:none;border-right:none}}.header[data-astro-cid-3ef6ksr2]{position:fixed;top:0;left:0;right:0;height:var(--header-height);background:#fefce8f2;backdrop-filter:blur(8px);border-bottom:1px solid rgba(99,102,241,.1);z-index:100}.header-inner[data-astro-cid-3ef6ksr2]{display:flex;align-items:center;justify-content:space-between;height:100%;padding:0 var(--space-xl);max-width:1400px;margin:0 auto}.header-logo[data-astro-cid-3ef6ksr2]{display:flex;align-items:center;gap:var(--space-sm);text-decoration:none;color:var(--color-text);font-weight:700;font-size:var(--font-size-lg)}.header-logo-icon[data-astro-cid-3ef6ksr2]{font-size:1.5rem;color:var(--color-primary)}.header-nav[data-astro-cid-3ef6ksr2]{display:flex;gap:var(--space-lg)}.header-nav-link[data-astro-cid-3ef6ksr2]{color:var(--color-text-muted);font-size:var(--font-size-sm);font-weight:500;transition:color .2s}.header-nav-link[data-astro-cid-3ef6ksr2]:hover{color:var(--color-primary)}.header-nav-link--active[data-astro-cid-3ef6ksr2]{color:var(--color-primary);font-weight:600}.header-menu-btn[data-astro-cid-3ef6ksr2]{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:var(--space-sm)}.header-menu-btn[data-astro-cid-3ef6ksr2] span[data-astro-cid-3ef6ksr2]{display:block;width:22px;height:2px;background:var(--color-text);border-radius:1px;transition:all .3s}@media(max-width:768px){.header-nav[data-astro-cid-3ef6ksr2]{display:none}.header-menu-btn[data-astro-cid-3ef6ksr2]{display:flex}}