:root{--color-bg: #ffffff;--color-bg-secondary: #fafafa;--color-bg-tertiary: #f5f5f5;--color-surface: #ffffff;--color-surface-hover: #fafafa;--color-border: #e5e5e5;--color-border-hover: #d4d4d4;--color-border-focus: #334155;--color-text: #171717;--color-text-secondary: #525252;--color-text-tertiary: #a3a3a3;--color-text-inverse: #ffffff;--color-accent: #334155;--color-accent-hover: #1e293b;--color-accent-light: #f1f5f9;--color-accent-text: #ffffff;--color-success: #4d7c6f;--color-success-light: #f0f7f5;--color-error: #b45555;--color-error-light: #faf0f0;--color-warning: #9a7b2e;--color-warning-light: #faf6ed;--font-sans: "Inter", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;--font-mono: "JetBrains Mono", "SF Mono", "Fira Code", ui-monospace, monospace;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--leading-tight: 1.25;--leading-normal: 1.5;--leading-relaxed: 1.625;--weight-normal: 400;--weight-medium: 500;--weight-semibold: 600;--weight-bold: 700;--space-0: 0;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--space-20: 5rem;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 9999px;--shadow-xs: 0 1px 2px rgba(0, 0, 0, .04);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);--shadow-md: 0 4px 6px rgba(0, 0, 0, .04), 0 2px 4px rgba(0, 0, 0, .03);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .05), 0 4px 6px rgba(0, 0, 0, .03);--duration-fast: .1s;--duration-normal: .15s;--duration-slow: .2s;--ease-default: cubic-bezier(.4, 0, .2, 1);--ease-in: cubic-bezier(.4, 0, 1, 1);--ease-out: cubic-bezier(0, 0, .2, 1);--width-content: 640px;--width-content-wide: 960px;--width-content-narrow: 480px}[data-theme=dark]{--color-bg: #0a0a0a;--color-bg-secondary: #141414;--color-bg-tertiary: #1c1c1c;--color-surface: #171717;--color-surface-hover: #1c1c1c;--color-border: #262626;--color-border-hover: #333333;--color-border-focus: #94a3b8;--color-text: #fafafa;--color-text-secondary: #a3a3a3;--color-text-tertiary: #525252;--color-text-inverse: #171717;--color-accent: #94a3b8;--color-accent-hover: #cbd5e1;--color-accent-light: #1e293b;--color-accent-text: #0f172a;--color-success: #6b9e8f;--color-success-light: #0f2922;--color-error: #d4736d;--color-error-light: #3b1515;--color-warning: #c99a4a;--color-warning-light: #2e1f06;--shadow-xs: 0 1px 2px rgba(0, 0, 0, .2);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .3), 0 1px 2px rgba(0, 0, 0, .2);--shadow-md: 0 4px 6px rgba(0, 0, 0, .25), 0 2px 4px rgba(0, 0, 0, .15);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .3), 0 4px 6px rgba(0, 0, 0, .15)}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--color-bg: #0a0a0a;--color-bg-secondary: #141414;--color-bg-tertiary: #1c1c1c;--color-surface: #171717;--color-surface-hover: #1c1c1c;--color-border: #262626;--color-border-hover: #333333;--color-border-focus: #94a3b8;--color-text: #fafafa;--color-text-secondary: #a3a3a3;--color-text-tertiary: #525252;--color-text-inverse: #171717;--color-accent: #94a3b8;--color-accent-hover: #cbd5e1;--color-accent-light: #1e293b;--color-accent-text: #0f172a;--color-success: #6b9e8f;--color-success-light: #0f2922;--color-error: #d4736d;--color-error-light: #3b1515;--color-warning: #c99a4a;--color-warning-light: #2e1f06;--shadow-xs: 0 1px 2px rgba(0, 0, 0, .2);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .3), 0 1px 2px rgba(0, 0, 0, .2);--shadow-md: 0 4px 6px rgba(0, 0, 0, .25), 0 2px 4px rgba(0, 0, 0, .15);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .3), 0 4px 6px rgba(0, 0, 0, .15)}}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{height:100%;font-size:16px;text-size-adjust:100%}body{height:100%;font-family:var(--font-sans);background-color:var(--color-bg);color:var(--color-text);line-height:var(--leading-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color var(--duration-slow) var(--ease-default),color var(--duration-slow) var(--ease-default)}a{color:var(--color-accent);text-decoration:none}a:hover{color:var(--color-accent-hover)}img{max-width:100%;display:block}button{font-family:inherit;cursor:pointer}.container{width:100%;max-width:var(--width-content);margin:0 auto;padding:var(--space-4) var(--space-5)}.header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-6) 0 var(--space-4)}.header-left{display:flex;align-items:center;gap:var(--space-3)}.logo{display:flex;align-items:center;gap:var(--space-2);text-decoration:none;color:var(--color-text)}.logo-mark{width:28px;height:28px;background-color:var(--color-accent);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:var(--color-accent-text);font-weight:var(--weight-bold);font-size:var(--text-sm)}.logo-text{font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-text);letter-spacing:-.02em}.header-right{display:flex;align-items:center;gap:var(--space-2)}.theme-toggle{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);transition:all var(--duration-normal) var(--ease-default)}.theme-toggle:hover{background-color:var(--color-bg-tertiary);border-color:var(--color-border-hover);color:var(--color-text)}.theme-toggle .icon-sun,.theme-toggle .icon-moon{width:18px;height:18px}.theme-toggle .icon-moon{display:block}.theme-toggle .icon-sun,[data-theme=dark] .theme-toggle .icon-moon{display:none}[data-theme=dark] .theme-toggle .icon-sun{display:block}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .theme-toggle .icon-moon{display:none}:root:not([data-theme=light]) .theme-toggle .icon-sun{display:block}}.hero{padding:var(--space-6) 0 var(--space-8);text-align:center}.hero-title{font-size:var(--text-2xl);font-weight:var(--weight-bold);color:var(--color-text);letter-spacing:-.02em;margin-bottom:var(--space-2)}.hero-subtitle{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:var(--leading-relaxed)}.category-nav{position:relative;margin-bottom:var(--space-6)}.category-nav-controls{display:flex;align-items:center;position:relative;width:100%}.nav-scroll-btn{position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;width:28px;height:28px;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-full);cursor:pointer;color:var(--color-text-secondary);transition:all var(--duration-normal) var(--ease-default);padding:0;box-shadow:var(--shadow-sm)}.nav-scroll-btn:hover{background-color:var(--color-bg-tertiary);color:var(--color-text)}.nav-scroll-btn.scroll-left{left:0}.nav-scroll-btn.scroll-right{right:0}.category-buttons-container{display:flex;overflow-x:auto;gap:var(--space-2);padding:var(--space-1) var(--space-2);-webkit-overflow-scrolling:touch;scroll-behavior:smooth;width:100%;scrollbar-width:none}.category-buttons-container::-webkit-scrollbar{display:none}.category-btn{background-color:transparent;border:1px solid var(--color-border);border-radius:var(--radius-full);padding:var(--space-2) var(--space-4);font-size:var(--text-sm);font-weight:var(--weight-medium);white-space:nowrap;color:var(--color-text-secondary);cursor:pointer;transition:all var(--duration-normal) var(--ease-default);flex-shrink:0}.category-btn:hover{background-color:var(--color-bg-tertiary);border-color:var(--color-border-hover);color:var(--color-text)}.category-btn.active{background-color:var(--color-text);border-color:var(--color-text);color:var(--color-text-inverse)}.section-title{font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--color-text);margin-bottom:var(--space-4);letter-spacing:-.01em}.section-title-with-category{font-size:var(--text-base);font-weight:var(--weight-semibold);margin-bottom:var(--space-4)}.dynamic-category-name:not(:empty):before{content:" / ";color:var(--color-text-tertiary)}.tools-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3);margin-bottom:var(--space-8)}.quick-access-grid{grid-template-columns:repeat(2,1fr)}.tool-card{display:flex;flex-direction:column;align-items:flex-start;padding:var(--space-5);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);text-decoration:none;color:var(--color-text);transition:all var(--duration-normal) var(--ease-default);position:relative}.tool-card:hover{border-color:var(--color-border-hover);box-shadow:var(--shadow-md);transform:translateY(-1px)}.tool-card:active{transform:translateY(0);box-shadow:var(--shadow-sm)}.tool-icon{width:40px;height:40px;margin-bottom:var(--space-3);display:flex;align-items:center;justify-content:center;color:var(--color-accent);background-color:var(--color-accent-light);border-radius:var(--radius-md)}.tool-icon svg,.tool-icon i{width:20px;height:20px}.tool-content{display:flex;flex-direction:column;align-items:flex-start}.tool-name{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text);line-height:var(--leading-tight)}.tool-description{font-size:var(--text-xs);color:var(--color-text-secondary);margin-top:var(--space-1);line-height:var(--leading-normal);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.tool-badge{position:absolute;top:var(--space-3);right:var(--space-3);font-size:10px;padding:2px 6px;border-radius:var(--radius-full);font-weight:var(--weight-semibold);background-color:var(--color-accent);color:var(--color-accent-text);letter-spacing:.02em}.empty-tools-message{text-align:center;padding:var(--space-8) var(--space-4);color:var(--color-text-tertiary);font-size:var(--text-sm);grid-column:1 / -1;background-color:var(--color-bg-secondary);border-radius:var(--radius-lg);border:1px dashed var(--color-border)}.category-description{font-size:var(--text-sm);color:var(--color-text-secondary);margin-bottom:var(--space-4);display:none;text-align:center}.footer{text-align:center;padding:var(--space-8) 0 var(--space-6);border-top:1px solid var(--color-border);margin-top:var(--space-8)}.copyright{font-size:var(--text-xs);color:var(--color-text-tertiary);margin-bottom:var(--space-3)}.footer-categories{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-4);margin-bottom:var(--space-3)}.footer-category-link{font-size:var(--text-xs);color:var(--color-text-tertiary);text-decoration:none;transition:color var(--duration-normal) var(--ease-default)}.footer-category-link:hover{color:var(--color-text-secondary)}.footer-links{display:flex;justify-content:center;gap:var(--space-4);margin-top:var(--space-3)}.footer-info-link,.footer-admin-link{font-size:var(--text-xs);color:var(--color-text-tertiary);text-decoration:none;transition:color var(--duration-normal) var(--ease-default)}.footer-info-link:hover,.footer-admin-link:hover{color:var(--color-text-secondary)}.amazon-section{text-align:center;padding:var(--space-6) 0;margin-top:var(--space-6)}.amazon-link{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-secondary);font-size:var(--text-sm);text-decoration:none;transition:border-color var(--duration-normal) var(--ease-default),color var(--duration-normal) var(--ease-default),box-shadow var(--duration-normal) var(--ease-default)}.amazon-link:hover{border-color:var(--color-accent);color:var(--color-accent);box-shadow:var(--shadow-sm)}.amazon-link i,.amazon-link svg{width:16px;height:16px}.footer-bmc{margin-top:var(--space-3)}.footer-bmc-link{font-size:var(--text-xs);color:var(--color-text-tertiary);text-decoration:none;transition:color var(--duration-normal) var(--ease-default)}.footer-bmc-link:hover{color:var(--color-accent)}.toast{position:fixed;bottom:var(--space-6);left:50%;transform:translate(-50%) translateY(100px);background-color:var(--color-text);color:var(--color-text-inverse);padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:var(--weight-medium);opacity:0;transition:transform var(--duration-slow) var(--ease-out),opacity var(--duration-slow) var(--ease-out);z-index:1000;pointer-events:none;box-shadow:var(--shadow-lg)}.toast.show{transform:translate(-50%) translateY(0);opacity:1}@media(min-width:640px){.tools-grid{grid-template-columns:repeat(3,1fr)}.quick-access-grid{grid-template-columns:repeat(4,1fr)}}@media(min-width:768px){.container{max-width:var(--width-content-wide)}.tools-grid{grid-template-columns:repeat(3,1fr);gap:var(--space-4)}}@media(min-width:1024px){.tools-grid,.quick-access-grid{grid-template-columns:repeat(4,1fr)}}@keyframes fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.tool-card{animation:fade-in var(--duration-slow) var(--ease-out) forwards}.tool-card:nth-child(1){animation-delay:0ms}.tool-card:nth-child(2){animation-delay:30ms}.tool-card:nth-child(3){animation-delay:60ms}.tool-card:nth-child(4){animation-delay:90ms}.tool-card:nth-child(5){animation-delay:.12s}.tool-card:nth-child(6){animation-delay:.15s}.tool-card:nth-child(7){animation-delay:.18s}.tool-card:nth-child(8){animation-delay:.21s}