:root{--color-primary:#43c6fa;--color-primary-hover:#2db5ea;--color-primary-light:#e8f7fe;--color-primary-dark:#1a9fd9;--color-accent:#da3241;--color-accent-hover:#c12030;--color-accent-light:#fdeaec;--color-accent-dark:#a8232f;--color-background:#fff;--color-background-alt:#f8f9fa;--color-surface:#fff;--color-text-primary:#333;--color-text-secondary:#666;--color-text-tertiary:#999;--color-text-inverse:#fff;--color-border:#e0e0e0;--color-border-light:#f0f0f0;--color-gray-50:#f9fafb;--color-gray-100:#f3f4f6;--color-gray-200:#e5e7eb;--color-gray-300:#d1d5db;--color-gray-400:#9ca3af;--color-gray-500:#6b7280;--color-gray-600:#4b5563;--color-gray-700:#374151;--color-gray-800:#1f2937;--color-gray-900:#111827;--color-success:#28a745;--color-success-light:#e6f4ea;--color-success-dark:#1e7e34;--color-warning:#ffc107;--color-warning-light:#fff8e1;--color-warning-dark:#d39e00;--color-error:#da3241;--color-error-light:#fdeaec;--color-error-dark:#a8232f;--color-info:#43c6fa;--color-info-light:#e8f7fe;--color-info-dark:#1a9fd9;--color-purple:#8b5cf6;--color-purple-light:#ede9fe;--color-purple-dark:#6d28d9;--color-pink:#ec4899;--color-pink-light:#fce7f3;--color-pink-dark:#be185d;--color-orange:#f97316;--color-orange-light:#fff7ed;--color-orange-dark:#c2410c;--color-teal:#14b8a6;--color-teal-light:#ccfbf1;--color-teal-dark:#0d9488;--color-indigo:#6366f1;--color-indigo-light:#e0e7ff;--color-indigo-dark:#4338ca;--color-cyan:#06b6d4;--color-cyan-light:#cffafe;--color-cyan-dark:#0891b2;--shadow-sm:0 1px 3px rgba(0,0,0,.05);--shadow-md:0 4px 12px rgba(0,0,0,.08);--shadow-lg:0 8px 24px rgba(0,0,0,.12);--font-family-ja:"BIZ UDPGothic","Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Meiryo",sans-serif;--font-family-en:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",sans-serif;--font-size-xs:0.75rem;--font-size-sm:0.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;--font-size-5xl:3rem;--line-height-tight:1.25;--line-height-normal:1.5;--line-height-relaxed:1.7;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--spacing-xs:0.25rem;--spacing-sm:0.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-2xl:3rem;--spacing-3xl:4rem;--spacing-4xl:6rem;--transition-fast:0.15s;--transition-base:0.2s;--transition-slow:0.3s}[data-theme=light]{--color-primary:#43c6fa;--color-primary-hover:#2db5ea;--color-primary-light:#e8f7fe;--color-primary-dark:#1a9fd9;--color-accent:#da3241;--color-accent-hover:#c12030;--color-accent-light:#fdeaec;--color-accent-dark:#a8232f;--color-background:#fff;--color-background-alt:#f8f9fa;--color-surface:#fff;--color-text-primary:#333;--color-text-secondary:#666;--color-text-tertiary:#999;--color-text-inverse:#fff;--color-border:#e0e0e0;--color-border-light:#f0f0f0;--color-gray-50:#f9fafb;--color-gray-100:#f3f4f6;--color-gray-200:#e5e7eb;--color-gray-300:#d1d5db;--color-gray-400:#9ca3af;--color-gray-500:#6b7280;--color-gray-600:#4b5563;--color-gray-700:#374151;--color-gray-800:#1f2937;--color-gray-900:#111827;--color-success:#28a745;--color-success-light:#e6f4ea;--color-success-dark:#1e7e34;--color-warning:#ffc107;--color-warning-light:#fff8e1;--color-warning-dark:#d39e00;--color-error:#da3241;--color-error-light:#fdeaec;--color-error-dark:#a8232f;--color-info:#43c6fa;--color-info-light:#e8f7fe;--color-info-dark:#1a9fd9;--color-purple:#8b5cf6;--color-purple-light:#ede9fe;--color-purple-dark:#6d28d9;--color-pink:#ec4899;--color-pink-light:#fce7f3;--color-pink-dark:#be185d;--color-orange:#f97316;--color-orange-light:#fff7ed;--color-orange-dark:#c2410c;--color-teal:#14b8a6;--color-teal-light:#ccfbf1;--color-teal-dark:#0d9488;--color-indigo:#6366f1;--color-indigo-light:#e0e7ff;--color-indigo-dark:#4338ca;--color-cyan:#06b6d4;--color-cyan-light:#cffafe;--color-cyan-dark:#0891b2;--shadow-sm:0 1px 3px rgba(0,0,0,.05);--shadow-md:0 4px 12px rgba(0,0,0,.08);--shadow-lg:0 8px 24px rgba(0,0,0,.12)}[data-theme=dark]{--color-primary:#5dd3ff;--color-primary-hover:#43c6fa;--color-primary-light:#1a3a4a;--color-primary-dark:#8de4ff;--color-accent:#ff4757;--color-accent-hover:#da3241;--color-accent-light:#4a1a1f;--color-accent-dark:#ff6b78;--color-background:#0f0f0f;--color-background-alt:#1a1a1a;--color-surface:#1f1f1f;--color-text-primary:#e8e8e8;--color-text-secondary:#b0b0b0;--color-text-tertiary:grey;--color-text-inverse:#1a1a1a;--color-border:#333;--color-border-light:#2a2a2a;--color-gray-50:#18181b;--color-gray-100:#27272a;--color-gray-200:#3f3f46;--color-gray-300:#52525b;--color-gray-400:#71717a;--color-gray-500:#a1a1aa;--color-gray-600:#d4d4d8;--color-gray-700:#e4e4e7;--color-gray-800:#f4f4f5;--color-gray-900:#fafafa;--color-success:#34d058;--color-success-light:#1a3d24;--color-success-dark:#5ee082;--color-warning:#ffd93d;--color-warning-light:#4a3d1a;--color-warning-dark:#ffe566;--color-error:#ff4757;--color-error-light:#4a1a1f;--color-error-dark:#ff6b78;--color-info:#5dd3ff;--color-info-light:#1a3a4a;--color-info-dark:#8de4ff;--color-purple:#a78bfa;--color-purple-light:#2e1f4a;--color-purple-dark:#c4b5fd;--color-pink:#f472b6;--color-pink-light:#4a1a35;--color-pink-dark:#f9a8d4;--color-orange:#fb923c;--color-orange-light:#4a2a1a;--color-orange-dark:#fdba74;--color-teal:#2dd4bf;--color-teal-light:#1a4a44;--color-teal-dark:#5eead4;--color-indigo:#818cf8;--color-indigo-light:#1f2347;--color-indigo-dark:#a5b4fc;--color-cyan:#22d3ee;--color-cyan-light:#1a3f4a;--color-cyan-dark:#67e8f9;--shadow-sm:0 1px 3px rgba(0,0,0,.3);--shadow-md:0 4px 12px rgba(0,0,0,.4);--shadow-lg:0 8px 24px rgba(0,0,0,.5)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]):not([data-theme=dark]){--color-primary:#5dd3ff;--color-primary-hover:#43c6fa;--color-primary-light:#1a3a4a;--color-primary-dark:#8de4ff;--color-accent:#ff4757;--color-accent-hover:#da3241;--color-accent-light:#4a1a1f;--color-accent-dark:#ff6b78;--color-background:#0f0f0f;--color-background-alt:#1a1a1a;--color-surface:#1f1f1f;--color-text-primary:#e8e8e8;--color-text-secondary:#b0b0b0;--color-text-tertiary:grey;--color-text-inverse:#1a1a1a;--color-border:#333;--color-border-light:#2a2a2a;--color-gray-50:#18181b;--color-gray-100:#27272a;--color-gray-200:#3f3f46;--color-gray-300:#52525b;--color-gray-400:#71717a;--color-gray-500:#a1a1aa;--color-gray-600:#d4d4d8;--color-gray-700:#e4e4e7;--color-gray-800:#f4f4f5;--color-gray-900:#fafafa;--color-success:#34d058;--color-success-light:#1a3d24;--color-success-dark:#5ee082;--color-warning:#ffd93d;--color-warning-light:#4a3d1a;--color-warning-dark:#ffe566;--color-error:#ff4757;--color-error-light:#4a1a1f;--color-error-dark:#ff6b78;--color-info:#5dd3ff;--color-info-light:#1a3a4a;--color-info-dark:#8de4ff;--color-purple:#a78bfa;--color-purple-light:#2e1f4a;--color-purple-dark:#c4b5fd;--color-pink:#f472b6;--color-pink-light:#4a1a35;--color-pink-dark:#f9a8d4;--color-orange:#fb923c;--color-orange-light:#4a2a1a;--color-orange-dark:#fdba74;--color-teal:#2dd4bf;--color-teal-light:#1a4a44;--color-teal-dark:#5eead4;--color-indigo:#818cf8;--color-indigo-light:#1f2347;--color-indigo-dark:#a5b4fc;--color-cyan:#22d3ee;--color-cyan-light:#1a3f4a;--color-cyan-dark:#67e8f9;--shadow-sm:0 1px 3px rgba(0,0,0,.3);--shadow-md:0 4px 12px rgba(0,0,0,.4);--shadow-lg:0 8px 24px rgba(0,0,0,.5)}}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background-color:var(--color-background);font-family:var(--font-family-ja);font-size:var(--font-size-base);line-height:var(--line-height-relaxed);transition:background-color var(--transition-slow) ease,color var(--transition-slow) ease}body,h1,h2,h3,h4,h5,h6{color:var(--color-text-primary)}h1,h2,h3,h4,h5,h6{font-weight:var(--font-weight-bold);line-height:var(--line-height-tight);margin-bottom:var(--spacing-md)}h1{font-size:var(--font-size-4xl);letter-spacing:-.02em}h2{font-size:var(--font-size-3xl);letter-spacing:-.01em}h3{font-size:var(--font-size-2xl)}h4{font-size:var(--font-size-xl)}h5{font-size:var(--font-size-lg)}h6{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold)}p{margin-bottom:var(--spacing-md)}a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-base) ease}a:hover{text-decoration:underline;text-underline-offset:.25em}a:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.text-link{border-bottom:1px solid transparent;color:var(--color-text-primary);text-decoration:none;transition:border-color var(--transition-base) ease}.text-link:hover{border-bottom-color:var(--color-primary);text-decoration:none}.text-link:focus-visible{border-bottom-color:var(--color-primary);outline:2px solid var(--color-primary);outline-offset:2px}.container{margin:0 auto;max-width:1400px;padding:0 var(--spacing-md)}.main-layout{display:flex;flex-direction:column;min-height:100vh}.content-wrapper{display:flex;flex:1;gap:var(--spacing-xl);padding:var(--spacing-xl) 0}.main-content{flex:1;max-width:900px}.grid{display:grid;gap:var(--spacing-md)}.grid-cols-1{grid-template-columns:repeat(1,1fr)}.grid-cols-2{grid-template-columns:repeat(2,1fr)}.grid-cols-3{grid-template-columns:repeat(3,1fr)}.grid-cols-4{grid-template-columns:repeat(4,1fr)}.grid-cols-5{grid-template-columns:repeat(5,1fr)}.grid-cols-6{grid-template-columns:repeat(6,1fr)}.grid-cols-12{grid-template-columns:repeat(12,1fr)}.gap-sm{gap:var(--spacing-sm)}.gap-md{gap:var(--spacing-md)}.gap-lg{gap:var(--spacing-lg)}.gap-xl{gap:var(--spacing-xl)}.col-span-1{grid-column:span 1}.col-span-2{grid-column:span 2}.col-span-3{grid-column:span 3}.col-span-4{grid-column:span 4}.col-span-5{grid-column:span 5}.col-span-6{grid-column:span 6}.col-span-7{grid-column:span 7}.col-span-8{grid-column:span 8}.col-span-9{grid-column:span 9}.col-span-10{grid-column:span 10}.col-span-11{grid-column:span 11}.col-span-12{grid-column:span 12}.col-span-full{grid-column:1/-1}@media (min-width:640px){.sm\:grid-cols-1{grid-template-columns:repeat(1,1fr)}.sm\:grid-cols-2{grid-template-columns:repeat(2,1fr)}.sm\:grid-cols-3{grid-template-columns:repeat(3,1fr)}.sm\:grid-cols-4{grid-template-columns:repeat(4,1fr)}.sm\:col-span-2{grid-column:span 2}.sm\:col-span-3{grid-column:span 3}.sm\:col-span-4{grid-column:span 4}}@media (min-width:768px){.md\:grid-cols-1{grid-template-columns:repeat(1,1fr)}.md\:grid-cols-2{grid-template-columns:repeat(2,1fr)}.md\:grid-cols-3{grid-template-columns:repeat(3,1fr)}.md\:grid-cols-4{grid-template-columns:repeat(4,1fr)}.md\:grid-cols-6{grid-template-columns:repeat(6,1fr)}.md\:col-span-2{grid-column:span 2}.md\:col-span-3{grid-column:span 3}.md\:col-span-4{grid-column:span 4}.md\:col-span-6{grid-column:span 6}}@media (min-width:1024px){.lg\:grid-cols-1{grid-template-columns:repeat(1,1fr)}.lg\:grid-cols-2{grid-template-columns:repeat(2,1fr)}.lg\:grid-cols-3{grid-template-columns:repeat(3,1fr)}.lg\:grid-cols-4{grid-template-columns:repeat(4,1fr)}.lg\:grid-cols-6{grid-template-columns:repeat(6,1fr)}.lg\:col-span-2{grid-column:span 2}.lg\:col-span-3{grid-column:span 3}.lg\:col-span-4{grid-column:span 4}.lg\:col-span-6{grid-column:span 6}}.header{background-color:var(--color-surface);border-bottom:1px solid var(--color-border-light);box-shadow:var(--shadow-sm);position:sticky;top:0;z-index:100}.header-container{justify-content:space-between;margin:0 auto;max-width:1400px;padding:var(--spacing-md)}.header-container,.logo{align-items:center;display:flex}.logo{color:var(--color-primary);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);gap:var(--spacing-sm);text-decoration:none}.logo img{display:block;height:40px;width:auto}.logo-text{align-items:baseline;display:flex;gap:.25rem}.nav-menu{align-items:center;display:flex;gap:var(--spacing-lg);list-style:none}.nav-link{border-radius:.375rem;color:var(--color-text-primary);font-weight:var(--font-weight-medium);padding:var(--spacing-sm) var(--spacing-md);text-decoration:none;transition:color var(--transition-base) ease}.nav-link:hover{background-color:var(--color-background-alt);color:var(--color-primary)}.nav-link.active{color:var(--color-primary);font-weight:var(--font-weight-semibold)}.theme-toggle{background:none;border:1px solid var(--color-border);border-radius:.375rem;color:var(--color-text-primary);cursor:pointer;font-size:var(--font-size-base);padding:var(--spacing-sm) var(--spacing-md);transition:all var(--transition-base) ease}.theme-toggle:hover{background-color:var(--color-background-alt);border-color:var(--color-primary)}.mobile-menu-toggle{background:none;border:1px solid var(--color-border);border-radius:.375rem;color:var(--color-text-primary);cursor:pointer;display:none;font-size:var(--font-size-lg);line-height:1;padding:var(--spacing-sm) var(--spacing-md);transition:all var(--transition-base) ease}.mobile-menu-toggle:hover{background-color:var(--color-background-alt);border-color:var(--color-primary)}.hamburger-icon{display:flex;flex-direction:column;gap:4px;width:20px}.hamburger-icon span{background-color:currentColor;border-radius:1px;display:block;height:2px;transition:transform var(--transition-base) ease,opacity var(--transition-base) ease}.mobile-menu-toggle.active .hamburger-icon span:first-child{transform:translateY(6px) rotate(45deg)}.mobile-menu-toggle.active .hamburger-icon span:nth-child(2){opacity:0}.mobile-menu-toggle.active .hamburger-icon span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}.sidebar{background-color:var(--color-surface);border:1px solid var(--color-border-light);border-radius:.5rem;height:fit-content;padding:var(--spacing-lg);position:sticky;top:80px;width:250px}.sidebar h3{color:var(--color-text-primary);font-size:var(--font-size-lg);margin-bottom:var(--spacing-md)}.sidebar-nav{list-style:none}.sidebar-nav li{margin-bottom:var(--spacing-sm)}.sidebar-nav a{border-radius:.25rem;color:var(--color-text-secondary);display:block;font-size:var(--font-size-sm);padding:var(--spacing-sm);text-decoration:none;transition:all var(--transition-base) ease}.sidebar-nav a:hover{background-color:var(--color-background-alt);color:var(--color-primary);padding-left:var(--spacing-md)}.section{margin-bottom:var(--spacing-3xl)}.section-title{border-bottom:2px solid var(--color-primary);color:var(--color-text-primary);font-size:var(--font-size-3xl);margin-bottom:var(--spacing-lg);padding-bottom:var(--spacing-md)}.hero-logo{display:block;height:auto;margin:0 auto var(--spacing-xl);width:120px}.card{background-color:var(--color-surface);border:1px solid var(--color-border-light);border-radius:.5rem;box-shadow:var(--shadow-sm);margin-bottom:var(--spacing-lg);padding:var(--spacing-xl);transition:box-shadow var(--transition-slow) ease,transform var(--transition-slow) ease}.card:hover{box-shadow:var(--shadow-md)}.code-block-wrapper{margin:var(--spacing-lg) 0;position:relative}.code-block-header{align-items:center;background-color:var(--color-background-alt);border:1px solid var(--color-border);border-bottom:none;border-top-left-radius:.375rem;border-top-right-radius:.375rem;display:flex;justify-content:space-between;padding:var(--spacing-sm) var(--spacing-md)}.code-block-label{color:var(--color-text-secondary)}.code-block-label,.copy-btn{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.copy-btn{background-color:var(--color-primary);border:none;border-radius:.25rem;color:var(--color-text-inverse);cursor:pointer;padding:var(--spacing-xs) var(--spacing-md);transition:all var(--transition-base) ease}.copy-btn:hover{background-color:var(--color-primary-hover);transform:translateY(-1px)}.copy-btn.copied{background-color:var(--color-success)}pre{border:1px solid var(--color-border);border-bottom-left-radius:.375rem;border-bottom-right-radius:.375rem;font-size:var(--font-size-sm);line-height:var(--line-height-normal);margin:0;overflow-x:auto;padding:var(--spacing-lg)}code,pre{background-color:var(--color-background-alt);font-family:Monaco,Menlo,Consolas,monospace}code{border-radius:.25rem;font-size:.9em;padding:.125rem .375rem}pre code{background:none;padding:0}.demo-container{align-items:flex-start;background-color:var(--color-background-alt);border:1px solid var(--color-border);border-radius:.5rem;display:flex;flex-wrap:wrap;gap:var(--spacing-lg);margin:var(--spacing-lg) 0;padding:var(--spacing-2xl)}.demo-item{display:flex;flex-direction:column;gap:var(--spacing-sm)}.btn{border:none;border-radius:.375rem;cursor:pointer;font-family:var(--font-family-ja);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);padding:var(--spacing-md) var(--spacing-xl);transition:all var(--transition-base) ease}.btn-primary{background-color:var(--color-accent);box-shadow:var(--shadow-sm);color:var(--color-text-inverse)}.btn-primary:hover{background-color:var(--color-accent-hover);box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-secondary{background-color:var(--color-primary);color:var(--color-text-inverse)}.btn-secondary:hover{background-color:var(--color-primary-hover);transform:translateY(-1px)}.btn-outline{background-color:transparent;border:2px solid var(--color-primary);color:var(--color-primary)}.btn-outline:hover{background-color:var(--color-primary);color:var(--color-text-inverse)}.btn-success{background-color:var(--color-success);box-shadow:var(--shadow-sm);color:var(--color-text-inverse)}.btn-success:hover{background-color:var(--color-success-dark);box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-warning{background-color:var(--color-warning);box-shadow:var(--shadow-sm);color:#333}.btn-warning:hover{background-color:var(--color-warning-dark);box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-danger{background-color:var(--color-error);box-shadow:var(--shadow-sm);color:var(--color-text-inverse)}.btn-danger:hover{background-color:var(--color-error-dark);box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-info{background-color:var(--color-info);box-shadow:var(--shadow-sm);color:var(--color-text-inverse)}.btn-info:hover{background-color:var(--color-info-dark);box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-ghost{background-color:transparent;box-shadow:none;color:var(--color-text-primary)}.btn-ghost:hover{background-color:var(--color-gray-100)}.btn-xsmall{font-size:var(--font-size-xs);padding:var(--spacing-xs) var(--spacing-sm)}.btn-small{font-size:var(--font-size-sm);padding:var(--spacing-sm) var(--spacing-md)}.btn-large{font-size:var(--font-size-lg);padding:var(--spacing-lg) var(--spacing-2xl)}.form-group{margin-bottom:var(--spacing-lg)}label{color:var(--color-text-primary);display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);margin-bottom:var(--spacing-sm)}input[type=email],input[type=password],input[type=tel],input[type=text],select,textarea{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:.375rem;color:var(--color-text-primary);font-family:var(--font-family-ja);font-size:var(--font-size-base);line-height:var(--line-height-normal);padding:var(--spacing-md);transition:border-color var(--transition-base) ease,box-shadow var(--transition-base) ease;width:100%}input:focus,select:focus,textarea:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(67,198,250,.1);outline:none}.table-wrapper{margin:var(--spacing-lg) 0}table{background-color:var(--color-surface);border-collapse:separate;border-spacing:0;width:100%}table thead tr:first-child th:first-child{border-top-left-radius:.5rem}table thead tr:first-child th:last-child{border-top-right-radius:.5rem}table tbody tr:last-child td:first-child{border-bottom-left-radius:.5rem}table tbody tr:last-child td:last-child{border-bottom-right-radius:.5rem}thead{background-color:var(--color-background-alt)}th{border-bottom:2px solid var(--color-border);color:var(--color-text-primary);font-weight:var(--font-weight-semibold);text-align:left}td,th{padding:var(--spacing-md)}td{border-bottom:1px solid var(--color-border-light)}tr:last-child td{border-bottom:none}tbody tr:hover{background-color:var(--color-background-alt)}.table-compact td,.table-compact th{font-size:var(--font-size-sm);padding:var(--spacing-sm) var(--spacing-md)}.table-fixed-header{max-height:400px;overflow-y:auto;-webkit-overflow-scrolling:touch}.table-fixed-header thead th{background-color:var(--color-background-alt);box-shadow:0 2px 4px rgba(0,0,0,.1);position:sticky;position:-webkit-sticky;top:0;z-index:10}.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}.table-scroll table{width:max-content}.modal-overlay{align-items:center;background-color:rgba(0,0,0,.6);bottom:0;display:none;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.modal-overlay.active{display:flex}.modal{background-color:var(--color-surface);border-radius:.5rem;box-shadow:var(--shadow-lg);max-height:80vh;max-width:500px;overflow-y:auto;width:90%}.modal-header{align-items:center;border-bottom:1px solid var(--color-border);display:flex;justify-content:space-between;padding:var(--spacing-xl)}.modal-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);margin:0}.modal-close{background:none;border:none;color:var(--color-text-secondary);cursor:pointer;font-size:var(--font-size-2xl);transition:color var(--transition-base) ease}.modal-close:hover{color:var(--color-text-primary)}.modal-body,.modal-footer{padding:var(--spacing-xl)}.modal-footer{border-top:1px solid var(--color-border);display:flex;gap:var(--spacing-md);justify-content:flex-end}.sidepanel-overlay{background-color:rgba(0,0,0,.6);bottom:0;display:none;left:0;position:fixed;right:0;top:0;z-index:1000}.sidepanel-overlay.active{display:block}.sidepanel{background-color:var(--color-surface);bottom:0;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;max-width:85vw;position:fixed;top:0;transform:translateX(100%);transition:transform var(--transition-slow) ease;width:400px;z-index:1001}.sidepanel.sidepanel-right{right:0}.sidepanel.sidepanel-left{left:0;transform:translateX(-100%)}.sidepanel.active{transform:translateX(0)}.sidepanel-header{align-items:center;border-bottom:1px solid var(--color-border);display:flex;justify-content:space-between;padding:var(--spacing-xl)}.sidepanel-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);margin:0}.sidepanel-close{background:none;border:none;color:var(--color-text-secondary);cursor:pointer;font-size:var(--font-size-2xl);transition:color var(--transition-base) ease}.sidepanel-close:hover{color:var(--color-text-primary)}.sidepanel-body{flex:1;overflow-y:auto;padding:var(--spacing-xl)}.sidepanel-footer{border-top:1px solid var(--color-border);display:flex;gap:var(--spacing-md);justify-content:flex-end;padding:var(--spacing-xl)}.color-grid{display:grid;gap:var(--spacing-lg);grid-template-columns:repeat(auto-fill,minmax(200px,1fr));margin:var(--spacing-lg) 0}.color-swatch{border:1px solid var(--color-border);border-radius:.5rem;box-shadow:var(--shadow-sm);overflow:hidden}.color-preview{height:100px;width:100%}.color-info{background-color:var(--color-surface);padding:var(--spacing-md)}.color-name{color:var(--color-text-primary);font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-xs)}.color-value{color:var(--color-text-secondary);font-family:Monaco,Menlo,Consolas,monospace;font-size:var(--font-size-sm)}.text-center{text-align:center}.mt-0{margin-top:0}.mt-1{margin-top:var(--spacing-xs)}.mt-2{margin-top:var(--spacing-sm)}.mt-3{margin-top:var(--spacing-md)}.mt-4{margin-top:var(--spacing-lg)}.mb-0{margin-bottom:0}.mb-1{margin-bottom:var(--spacing-xs)}.mb-2{margin-bottom:var(--spacing-sm)}.mb-3{margin-bottom:var(--spacing-md)}.mb-4{margin-bottom:var(--spacing-lg)}@media (max-width:1024px){.content-wrapper{flex-direction:column}.sidebar{position:static;width:100%}.main-content{max-width:100%}}@media (max-width:768px){.header-container{flex-wrap:wrap;gap:var(--spacing-sm)}.mobile-menu-toggle{align-items:center;display:flex;justify-content:center}.header nav{display:none;order:3;width:100%}.header nav.active{display:block}.nav-menu{border-top:1px solid var(--color-border-light);flex-direction:column;gap:var(--spacing-xs);margin-top:var(--spacing-sm);padding-top:var(--spacing-md)}.nav-link,.nav-menu li{width:100%}.nav-link{display:block;padding:var(--spacing-md);text-align:center}.nav-menu .theme-toggle{margin-top:var(--spacing-sm);width:100%}.logo{flex:1}.logo-text{align-items:flex-start;flex-direction:column;gap:0}.logo-text span{font-size:var(--font-size-sm)}h1{font-size:var(--font-size-3xl)}h2{font-size:var(--font-size-2xl)}.demo-container{padding:var(--spacing-lg)}.color-grid{grid-template-columns:1fr}}@media (max-width:480px){.logo img{height:32px}.logo-text span{font-size:var(--font-size-xs)}.container{padding:0 var(--spacing-sm)}}.picker-input-wrapper{position:relative;width:100%}input[type=text].datepicker-input,input[type=text].monthpicker-input{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:.375rem;color:var(--color-text-primary);cursor:pointer;font-family:var(--font-family-ja);font-size:var(--font-size-base);line-height:var(--line-height-normal);padding:var(--spacing-md);padding-right:calc(var(--spacing-md)*3);transition:border-color var(--transition-base) ease,box-shadow var(--transition-base) ease;width:100%}input[type=text].datepicker-input:focus,input[type=text].monthpicker-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(67,198,250,.1);outline:none}.picker-icon{color:var(--color-text-secondary);font-size:var(--font-size-lg);pointer-events:none;position:absolute;right:var(--spacing-md);top:50%;transform:translateY(-50%)}.datepicker-container,.monthpicker-container{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:.5rem;box-shadow:var(--shadow-lg);display:none;left:0;min-width:320px;padding:var(--spacing-md);position:absolute;top:calc(100% + .5rem);z-index:1000}.datepicker-container.show-above,.monthpicker-container.show-above{bottom:calc(100% + .5rem);top:auto}.datepicker-container.active,.monthpicker-container.active{display:block}.datepicker-header,.monthpicker-header{align-items:center;border-bottom:1px solid var(--color-border-light);display:flex;justify-content:space-between;margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-md)}.datepicker-nav-btn,.monthpicker-nav-btn{align-items:center;background:none;border:none;border-radius:.25rem;color:var(--color-text-primary);cursor:pointer;display:flex;font-size:var(--font-size-lg);height:32px;justify-content:center;padding:var(--spacing-sm);transition:all var(--transition-base) ease;width:32px}.datepicker-nav-btn:hover,.monthpicker-nav-btn:hover{background-color:var(--color-background-alt);color:var(--color-primary)}.datepicker-current,.monthpicker-current{color:var(--color-text-primary);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold)}.datepicker-weekdays{display:grid;gap:.25rem;grid-template-columns:repeat(7,1fr);margin-bottom:var(--spacing-sm)}.datepicker-weekday{color:var(--color-text-secondary);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);padding:var(--spacing-sm);text-align:center}.datepicker-weekday.sunday{color:var(--color-error)}.datepicker-weekday.saturday{color:var(--color-primary)}.datepicker-days{display:grid;gap:.25rem;grid-template-columns:repeat(7,1fr)}.datepicker-day{align-items:center;aspect-ratio:1;background:none;border:none;border-radius:.375rem;color:var(--color-text-primary);cursor:pointer;display:flex;font-size:var(--font-size-sm);justify-content:center;position:relative;transition:all var(--transition-base) ease}.datepicker-day:hover{background-color:var(--color-background-alt);color:var(--color-primary)}.datepicker-day.other-month{color:var(--color-text-tertiary)}.datepicker-day.today{color:var(--color-primary);font-weight:var(--font-weight-bold)}.datepicker-day.today:after{background-color:var(--color-primary);border-radius:50%;bottom:2px;content:"";height:4px;left:50%;position:absolute;transform:translateX(-50%);width:4px}.datepicker-day.selected{background-color:var(--color-primary);color:var(--color-text-inverse);font-weight:var(--font-weight-semibold)}.datepicker-day.selected:hover{background-color:var(--color-primary-hover);color:var(--color-text-inverse)}.datepicker-day.sunday{color:var(--color-error)}.datepicker-day.saturday{color:var(--color-primary)}.datepicker-day.selected.saturday,.datepicker-day.selected.sunday{color:var(--color-text-inverse)}.datepicker-day:disabled{color:var(--color-text-tertiary);cursor:not-allowed;opacity:.5}.datepicker-day:disabled:hover{background:none}.monthpicker-grid{display:grid;gap:var(--spacing-sm);grid-template-columns:repeat(3,1fr)}.monthpicker-month{background-color:var(--color-surface);border:1px solid var(--color-border-light);border-radius:.375rem;color:var(--color-text-primary);cursor:pointer;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);padding:var(--spacing-md);text-align:center;transition:all var(--transition-base) ease}.monthpicker-month:hover{background-color:var(--color-background-alt);border-color:var(--color-primary);color:var(--color-primary)}.monthpicker-month.selected{background-color:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-inverse);font-weight:var(--font-weight-semibold)}.monthpicker-month.selected:hover{background-color:var(--color-primary-hover);border-color:var(--color-primary-hover)}.monthpicker-month.current{border-color:var(--color-primary);font-weight:var(--font-weight-bold)}.picker-footer{border-top:1px solid var(--color-border-light);display:flex;gap:var(--spacing-sm);justify-content:space-between;margin-top:var(--spacing-md);padding-top:var(--spacing-md)}.picker-footer-btn{background-color:var(--color-surface);border:1px solid var(--color-primary);border-radius:.375rem;color:var(--color-primary);cursor:pointer;flex:1;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);padding:var(--spacing-sm) var(--spacing-md);transition:all var(--transition-base) ease}.picker-footer-btn:hover{background-color:var(--color-primary);color:var(--color-text-inverse)}.picker-clear-btn{border-color:var(--color-border);color:var(--color-text-secondary)}.picker-clear-btn:hover{background-color:var(--color-background-alt);border-color:var(--color-border);color:var(--color-text-primary)}@media (max-width:768px){.datepicker-container,.monthpicker-container{min-width:280px}}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.sr-only{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.misora-icon{display:inline-block;fill:none;height:1em;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;vertical-align:-.125em;width:1em}.mi-xs{font-size:.75rem}.mi-sm{font-size:1rem}.mi-md{font-size:1.5rem}.mi-lg{font-size:2rem}.mi-xl{font-size:3rem}.mi-primary{color:var(--color-primary)}.mi-accent{color:var(--color-accent)}.mi-success{color:var(--color-success)}.mi-warning{color:var(--color-warning)}.mi-error{color:var(--color-error)}.mi-info{color:var(--color-info)}@font-face{font-display:block;font-family:misora-icons;font-style:normal;font-weight:400;src:url(icons/font/misora-icons.eot);src:url(icons/font/misora-icons.eot?#iefix) format("embedded-opentype"),url(icons/font/misora-icons.woff2) format("woff2"),url(icons/font/misora-icons.woff) format("woff")}[class*=" icon-"]:before,[class^=icon-]:before{font-family:misora-icons!important;font-style:normal;font-variant:normal;font-weight:400;line-height:1;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;speak:never}.icon-antenna:before{content:"\f10f"}.icon-arrow-down:before{content:"\f10e"}.icon-arrow-left:before{content:"\f10d"}.icon-arrow-right:before{content:"\f10c"}.icon-arrow-up:before{content:"\f10b"}.icon-check:before{content:"\f10a"}.icon-close:before{content:"\f109"}.icon-menu:before{content:"\f108"}.icon-minus:before{content:"\f107"}.icon-plus:before{content:"\f106"}.icon-search:before{content:"\f105"}.icon-signal:before{content:"\f104"}.icon-sim-card:before{content:"\f103"}.icon-smartphone:before{content:"\f102"}.icon-wifi:before{content:"\f101"}.action-list{list-style:none;margin:0;padding:0;width:100%}.action-list.list-bordered{border:1px solid var(--color-border);border-radius:var(--border-radius-lg,.5rem);overflow:hidden}.action-list.list-divided .list-item{border-bottom:1px solid var(--color-border-light)}.action-list.list-divided .list-item:last-child{border-bottom:none}.action-list.list-small .list-item{gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md)}.action-list.list-small .list-item-title{font-size:var(--font-size-sm)}.action-list.list-small .list-item-description{font-size:var(--font-size-xs)}.action-list.list-small .list-item-icon{font-size:var(--font-size-base)}.action-list.list-medium .list-item{gap:var(--spacing-md);padding:var(--spacing-md)}.action-list.list-medium .list-item-title{font-size:var(--font-size-base)}.action-list.list-medium .list-item-description{font-size:var(--font-size-sm)}.action-list.list-medium .list-item-icon{font-size:var(--font-size-lg)}.action-list.list-large .list-item{gap:var(--spacing-md);padding:var(--spacing-lg) var(--spacing-xl)}.action-list.list-large .list-item-title{font-size:var(--font-size-lg)}.action-list.list-large .list-item-description{font-size:var(--font-size-base)}.action-list.list-large .list-item-icon{font-size:var(--font-size-xl)}.list-item{align-items:center;background-color:var(--color-surface);display:flex;gap:var(--spacing-md);padding:var(--spacing-md);transition:background-color var(--transition-fast) ease}.list-item.clickable{cursor:pointer}.list-item.clickable:hover{background-color:var(--color-background-alt)}.list-item.clickable:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.list-item.clickable:active{background-color:var(--color-border-light)}.list-item.disabled{cursor:not-allowed;opacity:.5}.list-item.disabled:hover{background-color:var(--color-surface)}.list-item.selected{background-color:color-mix(in srgb,var(--color-primary) 10%,transparent)}.list-item.selected:hover{background-color:color-mix(in srgb,var(--color-primary) 15%,transparent)}.list-item-icon{align-items:center;color:var(--color-text-secondary);display:flex;flex-shrink:0;justify-content:center}.list-item-content{display:flex;flex:1;flex-direction:column;gap:var(--spacing-xs);min-width:0}.list-item-title{color:var(--color-text-primary);font-family:var(--font-family-ja);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight)}.list-item-description{color:var(--color-text-secondary);font-family:var(--font-family-ja);line-height:var(--line-height-normal)}.list-item-action{align-items:center;color:var(--color-text-tertiary);display:flex;flex-shrink:0;margin-left:auto}.action-list.list-bordered .list-item{border-bottom:1px solid var(--color-border-light)}.action-list.list-bordered .list-item:last-child{border-bottom:none}.stepper{width:100%}.stepper-list{display:flex;list-style:none;margin:0;padding:0}.stepper.stepper-horizontal .stepper-list{align-items:flex-start;flex-direction:row}.stepper.stepper-vertical .stepper-list{flex-direction:column}.stepper-item{display:flex;position:relative}.stepper.stepper-horizontal .stepper-item{align-items:center;flex:1;flex-direction:column}.stepper.stepper-vertical .stepper-item{align-items:flex-start;flex-direction:row;padding-bottom:var(--spacing-lg)}.stepper.stepper-vertical .stepper-item:last-child{padding-bottom:0}.stepper-button{align-items:center;background:none;border:none;cursor:default;display:flex;padding:0;text-align:left}.stepper.stepper-horizontal .stepper-button{align-items:center;flex-direction:column;text-align:center}.stepper.stepper-vertical .stepper-button{flex-direction:row;gap:var(--spacing-md)}.stepper.stepper-clickable .stepper-button{cursor:pointer}.stepper.stepper-clickable .stepper-button:hover .stepper-indicator{transform:scale(1.1)}.stepper.stepper-clickable .stepper-button:focus-visible .stepper-indicator{box-shadow:0 0 0 3px rgba(67,198,250,.3)}.stepper-indicator{align-items:center;border-radius:50%;display:flex;flex-shrink:0;font-weight:var(--font-weight-semibold);justify-content:center;transition:all var(--transition-base) ease}.stepper.stepper-small .stepper-indicator{font-size:var(--font-size-xs);height:1.5rem;width:1.5rem}.stepper.stepper-medium .stepper-indicator{font-size:var(--font-size-sm);height:2rem;width:2rem}.stepper.stepper-large .stepper-indicator{font-size:var(--font-size-base);height:2.5rem;width:2.5rem}.stepper-item.completed .stepper-indicator{background-color:var(--color-success);color:var(--color-text-inverse)}.stepper-item.current .stepper-indicator{background-color:var(--color-primary);color:var(--color-text-inverse)}.stepper-item.upcoming .stepper-indicator{background-color:var(--color-border);color:var(--color-text-tertiary)}.stepper-check-icon{fill:none;height:60%;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:3;width:60%}.stepper-content{display:flex;flex-direction:column}.stepper.stepper-horizontal .stepper-content{align-items:center;margin-top:var(--spacing-sm)}.stepper-label{color:var(--color-text-primary);font-weight:var(--font-weight-medium)}.stepper.stepper-small .stepper-label{font-size:var(--font-size-xs)}.stepper.stepper-medium .stepper-label{font-size:var(--font-size-sm)}.stepper.stepper-large .stepper-label{font-size:var(--font-size-base)}.stepper-item.upcoming .stepper-label{color:var(--color-text-tertiary)}.stepper-description{color:var(--color-text-secondary);margin-top:var(--spacing-xs)}.stepper.stepper-medium .stepper-description,.stepper.stepper-small .stepper-description{font-size:var(--font-size-xs)}.stepper.stepper-large .stepper-description{font-size:var(--font-size-sm)}.stepper-connector{background-color:var(--color-border);transition:background-color var(--transition-base) ease}.stepper.stepper-horizontal .stepper-connector{height:2px;left:calc(50% + 1.25rem);position:absolute;right:calc(-50% + 1.25rem);top:1rem}.stepper.stepper-horizontal.stepper-small .stepper-connector{left:calc(50% + 1rem);right:calc(-50% + 1rem);top:.75rem}.stepper.stepper-horizontal.stepper-large .stepper-connector{left:calc(50% + 1.5rem);right:calc(-50% + 1.5rem);top:1.25rem}.stepper.stepper-vertical .stepper-connector{bottom:0;left:1rem;position:absolute;top:2.5rem;width:2px}.stepper.stepper-vertical.stepper-small .stepper-connector{left:.75rem;top:2rem}.stepper.stepper-vertical.stepper-large .stepper-connector{left:1.25rem;top:3rem}.stepper-item.completed .stepper-connector{background-color:var(--color-success)}.toast-container{display:flex;flex-direction:column;gap:var(--spacing-sm);max-width:100%;padding:var(--spacing-md);pointer-events:none;position:fixed;z-index:9999}.toast-container.toast-top-right{right:0;top:0}.toast-container.toast-top-left{left:0;top:0}.toast-container.toast-bottom-right{bottom:0;right:0}.toast-container.toast-bottom-left{bottom:0;left:0}.toast-container.toast-top-center{left:50%;top:0;transform:translateX(-50%)}.toast-container.toast-bottom-center{bottom:0;left:50%;transform:translateX(-50%)}.toast{align-items:flex-start;animation:toast-slide-in-right .3s ease-out;background-color:var(--color-surface);border-left:4px solid;border-radius:.5rem;box-shadow:var(--shadow-lg);display:flex;gap:var(--spacing-sm);max-width:400px;min-width:300px;padding:var(--spacing-md);pointer-events:auto}.toast.toast-exiting{animation:toast-slide-out-right .3s ease-in forwards}@keyframes toast-slide-in-right{0%{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}@keyframes toast-slide-out-right{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100%)}}.toast.toast-success{border-left-color:var(--color-success)}.toast.toast-success .toast-icon{color:var(--color-success)}.toast.toast-error{border-left-color:var(--color-error)}.toast.toast-error .toast-icon{color:var(--color-error)}.toast.toast-warning{border-left-color:var(--color-warning)}.toast.toast-warning .toast-icon{color:var(--color-warning)}.toast.toast-info{border-left-color:var(--color-info)}.toast.toast-info .toast-icon{color:var(--color-info)}.toast-icon{flex-shrink:0;height:1.25rem;width:1.25rem}.toast-icon svg{fill:none;height:100%;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;width:100%}.toast-content{flex:1;min-width:0}.toast-title{color:var(--color-text-primary);font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-xs)}.toast-message,.toast-title{font-size:var(--font-size-sm)}.toast-message{color:var(--color-text-secondary);line-height:var(--line-height-normal);word-wrap:break-word}.toast-close{align-items:center;background:none;border:none;border-radius:.25rem;color:var(--color-text-tertiary);cursor:pointer;display:flex;flex-shrink:0;height:1.5rem;justify-content:center;padding:0;transition:all var(--transition-base) ease;width:1.5rem}.toast-close:hover{background-color:var(--color-background-alt);color:var(--color-text-primary)}.toast-close:focus-visible{box-shadow:0 0 0 2px var(--color-primary)}.toast-close svg{fill:none;height:1rem;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;width:1rem}.toast-container.toast-bottom-left .toast,.toast-container.toast-top-left .toast{animation-name:toast-slide-in-left}.toast-container.toast-bottom-left .toast.toast-exiting,.toast-container.toast-top-left .toast.toast-exiting{animation-name:toast-slide-out-left}@keyframes toast-slide-in-left{0%{opacity:0;transform:translateX(-100%)}to{opacity:1;transform:translateX(0)}}@keyframes toast-slide-out-left{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-100%)}}.toast-container.toast-bottom-center .toast,.toast-container.toast-top-center .toast{animation-name:toast-slide-in-center}.toast-container.toast-bottom-center .toast.toast-exiting,.toast-container.toast-top-center .toast.toast-exiting{animation-name:toast-slide-out-center}@keyframes toast-slide-in-center{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes toast-slide-out-center{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}@media (max-width:480px){.toast-container{left:0;padding:var(--spacing-sm);right:0}.toast-container.toast-bottom-center,.toast-container.toast-top-center{transform:none}.toast{max-width:none;min-width:0;width:100%}}