:root{--color-bg: #ffffff;--color-surface: #f7f7f8;--color-text: #111827;--color-subtle: #6b7280;--color-primary: #4f46e5;--color-primary-alpha: rgba(79, 70, 229, .1);--color-primary-ink: #ffffff;--color-border: #e5e7eb;--color-success: #16a34a;--color-warning: #f59e0b;--color-danger: #ef4444;--color-focus: #1d4ed8;--size-container: 440px;--radius-xs: 4px;--radius-sm: 6px;--radius-md: 10px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--space-7: 48px;--space-8: 64px;--font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", Arial, sans-serif;--fs-1: 12px;--fs-2: 14px;--fs-3: 16px;--fs-4: 18px;--fs-5: 22px;--lh-tight: 1.25;--lh-normal: 1.5;--shadow-1: 0 1px 2px rgba(0, 0, 0, .06);--shadow-2: 0 4px 12px rgba(0, 0, 0, .1);--ease: cubic-bezier(.2, .8, .2, 1);--dur-fast: .12s;--dur-mid: .2s;color-scheme:light}[data-theme=light]{color-scheme:light}[data-theme=dark]{--color-bg: #0f1419;--color-surface: #1a1f26;--color-text: #e4e7eb;--color-subtle: #9ca3af;--color-primary: #6366f1;--color-primary-alpha: rgba(99, 102, 241, .15);--color-primary-ink: #ffffff;--color-border: #374151;--color-success: #22c55e;--color-warning: #fbbf24;--color-danger: #f87171;--color-focus: #3b82f6;--shadow-1: 0 1px 2px rgba(0, 0, 0, .3);--shadow-2: 0 4px 12px rgba(0, 0, 0, .4);color-scheme:dark}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}body{font-family:var(--font-sans);font-size:var(--fs-3);line-height:var(--lh-normal);color:var(--color-text);background-color:var(--color-bg);min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (display-mode: standalone){body{max-width:500px;margin:0 auto;box-shadow:0 0 20px #0000001a}}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:var(--lh-tight);margin-bottom:var(--space-3)}h1{font-size:var(--fs-5)}h2{font-size:var(--fs-4)}h3{font-size:var(--fs-3)}p{margin-bottom:var(--space-3)}small{font-size:var(--fs-1)}.num{font-variant-numeric:tabular-nums slashed-zero}.container{max-width:var(--size-container);margin-inline:auto;padding-inline:var(--space-4)}@media (display-mode: standalone){.container{max-width:440px}}header{border-bottom:1px solid var(--color-border);padding-block:var(--space-5);background-color:var(--color-bg)}header h1{margin-bottom:var(--space-2)}header p{color:var(--color-subtle);margin-bottom:0}main{flex:1;padding-block:var(--space-6)}main section{margin-bottom:var(--space-6);padding:var(--space-6);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-1)}main section h2{margin-bottom:var(--space-4)}footer{border-top:1px solid var(--color-border);padding-block:var(--space-5);color:var(--color-subtle);font-size:var(--fs-2);text-align:center}:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;border-radius:var(--radius-xs)}a{color:var(--color-primary);text-decoration:none;transition:color var(--dur-fast) var(--ease)}a:hover{text-decoration:underline}button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit}button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}button,a,input,select,textarea{min-height:44px}.visually-hidden,.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.app-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:40px;padding-inline:var(--space-4);border-radius:var(--radius-sm);font-weight:500;font-size:var(--fs-3);line-height:1;cursor:pointer;border:none;transition:all var(--dur-fast) var(--ease);position:relative}.app-button:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.app-button:active:not(:disabled){transform:translateY(1px)}.app-button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.app-button--primary{background-color:var(--color-primary);color:var(--color-primary-ink)}.app-button--primary:hover:not(:disabled){background-color:color-mix(in srgb,var(--color-primary) 92%,black)}.app-button--secondary{background-color:transparent;color:var(--color-text);border:1px solid var(--color-border)}.app-button--secondary:hover:not(:disabled){background-color:var(--color-surface);border-color:var(--color-primary)}.app-button--ghost{background-color:transparent;color:var(--color-text);border:none}.app-button--ghost:hover:not(:disabled){background-color:color-mix(in srgb,var(--color-surface) 50%,transparent)}.app-field{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-4)}.app-field__label{display:flex;align-items:center;gap:var(--space-2);font-weight:500;font-size:var(--fs-2);color:var(--color-text)}.app-field__required{display:inline-block;padding:2px var(--space-2);background-color:var(--color-danger);color:#fff;font-size:var(--fs-1);border-radius:var(--radius-xs);font-weight:500}.app-field__input,.app-field__select,.app-field__textarea{min-height:40px;padding-inline:var(--space-3);font-family:var(--font-sans);font-size:var(--fs-3);color:var(--color-text);background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm);transition:all var(--dur-fast) var(--ease)}.app-field__input:focus,.app-field__select:focus,.app-field__textarea:focus{outline:none;border-color:var(--color-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-focus) 20%,transparent)}.app-field__input:disabled,.app-field__select:disabled,.app-field__textarea:disabled{opacity:.5;cursor:not-allowed}.app-field__textarea{padding-block:var(--space-3);resize:vertical;min-height:80px}.app-field__error{display:flex;align-items:center;gap:var(--space-2);color:var(--color-danger);font-size:var(--fs-2)}.app-field--error .app-field__input,.app-field--error .app-field__select,.app-field--error .app-field__textarea{border-color:var(--color-danger)}.app-field__help{font-size:var(--fs-2);color:var(--color-subtle)}.app-card{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-6);box-shadow:var(--shadow-1)}.app-card__header{margin-bottom:var(--space-4)}.app-card__title{font-size:var(--fs-4);font-weight:600;margin-bottom:var(--space-2)}.app-card__description{font-size:var(--fs-2);color:var(--color-subtle)}.app-toast{position:fixed;bottom:var(--space-5);left:50%;transform:translate(-50%);min-width:300px;max-width:500px;padding:var(--space-4);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-2);display:flex;align-items:center;gap:var(--space-3);z-index:1000;animation:slideUp var(--dur-mid) var(--ease)}@keyframes slideUp{0%{opacity:0;transform:translate(-50%) translateY(20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.app-toast--success{border-left:4px solid var(--color-success)}.app-toast--warning{border-left:4px solid var(--color-warning)}.app-toast--danger{border-left:4px solid var(--color-danger)}.app-banner{position:sticky;top:0;width:100%;padding:var(--space-4);background-color:var(--color-primary);color:var(--color-primary-ink);text-align:center;z-index:999;display:flex;align-items:center;justify-content:center;gap:var(--space-4)}.app-banner--offline{background-color:var(--color-warning);color:var(--color-text)}.app-progress{width:100%;height:8px;background-color:var(--color-border);border-radius:999px;overflow:hidden;position:relative}.app-progress__bar{height:100%;background-color:var(--color-primary);border-radius:999px;transition:width var(--dur-mid) var(--ease)}.app-progress--indeterminate .app-progress__bar{width:40%;animation:indeterminate 1.5s ease-in-out infinite}@keyframes indeterminate{0%{transform:translate(-100%)}to{transform:translate(350%)}}.toast-container{position:fixed;bottom:var(--space-5);right:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);z-index:1000;max-width:400px}.toast{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4);box-shadow:var(--shadow-2);animation:slideInRight .3s var(--ease)}@keyframes slideInRight{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.toast__content{display:flex;flex-direction:column;gap:var(--space-3)}.toast__header{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3)}.toast__filename{font-weight:600;font-size:var(--fs-3);color:var(--color-text);word-break:break-all;flex:1}.toast__phase{font-size:var(--fs-2);font-weight:500;white-space:nowrap}.toast__progress-wrapper{display:flex;align-items:center;gap:var(--space-3)}.toast__progress{flex:1;height:6px;background-color:var(--color-border);border-radius:999px;overflow:hidden}.toast__progress-bar{height:100%;background-color:var(--color-primary);border-radius:999px;transition:width .2s ease}.toast__progress-text{font-size:var(--fs-2);font-weight:500;color:var(--color-text);min-width:45px;text-align:right}.mt-6{margin-top:var(--space-6)}.error-toast{background-color:var(--color-danger);color:#fff;border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);box-shadow:var(--shadow-2);animation:slideInRight .3s var(--ease);transition:opacity .5s var(--ease)}.error-toast--fade-out{opacity:0}.error-toast__content{display:flex;align-items:center;gap:var(--space-3)}.error-toast__icon{font-size:var(--fs-4);flex-shrink:0}.error-toast__message{font-size:var(--fs-3);font-weight:500;flex:1;word-break:break-word}.error-toast__close{background:none;border:none;color:#fff;font-size:var(--fs-4);cursor:pointer;padding:var(--space-1);margin:calc(var(--space-1) * -1);border-radius:var(--radius-sm);transition:background-color var(--dur-fast) var(--ease);flex-shrink:0;line-height:1}.error-toast__close:hover{background-color:#fff3}.error-toast__close:focus-visible{outline:2px solid white;outline-offset:2px}.theme-toggle{white-space:nowrap}.theme-toggle__text{display:inline}@media (max-width: 640px){.theme-toggle__text{display:none}.theme-toggle{padding:var(--space-2);min-width:40px}}@media (prefers-reduced-motion: reduce){.theme-toggle{transition:none}}.file-upload{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:200px;padding:var(--space-6);border:2px dashed var(--color-border);border-radius:var(--radius-md);background-color:var(--color-bg);cursor:pointer;transition:all var(--dur-fast) var(--ease);text-align:center}.file-upload:hover{border-color:var(--color-primary);background-color:color-mix(in srgb,var(--color-primary) 5%,var(--color-bg))}.file-upload:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.file-upload--dragging{border-color:var(--color-primary);background-color:color-mix(in srgb,var(--color-primary) 10%,var(--color-bg));border-width:3px}.file-upload__icon{font-size:64px;margin-bottom:var(--space-4);opacity:.6;transition:opacity var(--dur-fast) var(--ease)}.file-upload:hover .file-upload__icon,.file-upload--dragging .file-upload__icon{opacity:1}.file-upload__text{display:flex;flex-direction:column;gap:var(--space-2)}.file-upload__primary{font-size:var(--fs-3);font-weight:500;color:var(--color-text);margin:0}.file-upload__secondary{font-size:var(--fs-2);color:var(--color-subtle);margin:0}.file-upload__error{margin-top:var(--space-4);padding:var(--space-4);background-color:color-mix(in srgb,var(--color-danger) 10%,var(--color-bg));border:1px solid var(--color-danger);border-radius:var(--radius-sm);color:var(--color-danger);font-size:var(--fs-2);display:flex;align-items:flex-start;gap:var(--space-2)}.file-list{margin-top:var(--space-5)}.file-list__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-4)}.file-list__title{font-size:var(--fs-3);font-weight:600;margin:0}.file-list__count{font-size:var(--fs-2);color:var(--color-subtle)}.file-list__items{display:flex;flex-direction:column;gap:var(--space-3)}.file-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm)}.file-item__icon{font-size:24px;opacity:.6}.file-item__info{flex:1;min-width:0}.file-item__name{font-size:var(--fs-3);font-weight:500;margin-bottom:var(--space-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-item__meta{font-size:var(--fs-1);color:var(--color-subtle);display:flex;gap:var(--space-3)}.file-item__size{font-variant-numeric:tabular-nums}.file-item__remove{flex-shrink:0}.settings-panel__header{display:flex;justify-content:space-between;align-items:center;width:100%;padding:0;background:none;border:none;cursor:pointer;text-align:left;margin-bottom:var(--space-4)}.settings-panel__header:hover{color:var(--color-primary)}.settings-panel__title{margin:0;font-size:var(--fs-4);font-weight:600}.settings-panel__toggle{font-size:var(--fs-2);color:var(--color-subtle);transition:transform var(--dur-fast) var(--ease)}.settings-panel__content{display:flex;flex-direction:column;gap:var(--space-4)}.slider-field{display:flex;align-items:center;gap:var(--space-3)}.slider-field__input{flex:1;height:8px;border-radius:999px;background:var(--color-border);outline:none;-webkit-appearance:none;appearance:none}.slider-field__input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--color-primary);cursor:pointer;border:2px solid var(--color-bg);box-shadow:0 2px 4px #0003}.slider-field__input::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--color-primary);cursor:pointer;border:2px solid var(--color-bg);box-shadow:0 2px 4px #0003}.slider-field__input:focus::-webkit-slider-thumb{box-shadow:0 0 0 3px color-mix(in srgb,var(--color-focus) 20%,transparent)}.slider-field__input:focus::-moz-range-thumb{box-shadow:0 0 0 3px color-mix(in srgb,var(--color-focus) 20%,transparent)}.slider-field__value{min-width:48px;text-align:right;font-weight:500;font-size:var(--fs-3)}.checkbox-field{display:flex;align-items:center;gap:var(--space-2);cursor:pointer;user-select:none}.checkbox-field input[type=checkbox]{width:20px;height:20px;cursor:pointer;accent-color:var(--color-primary)}.checkbox-field:hover{color:var(--color-primary)}.app-field__select{min-height:40px;padding-inline:var(--space-3);font-family:var(--font-sans);font-size:var(--fs-3);color:var(--color-text);background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--dur-fast) var(--ease)}.app-field__select:focus{outline:none;border-color:var(--color-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-focus) 20%,transparent)}.app-field__select:disabled{opacity:.5;cursor:not-allowed}.seo-content{margin-top:var(--space-8);padding-top:var(--space-8);border-top:1px solid var(--color-border)}.content-section{margin-bottom:var(--space-8);animation:fadeIn .3s ease-in-out}.content-section h2{color:var(--color-heading);font-size:var(--fs-4);font-weight:700;margin-bottom:var(--space-4);padding-bottom:var(--space-2);border-bottom:2px solid var(--color-primary);position:relative}.content-section h3{color:var(--color-heading);font-size:var(--fs-3);font-weight:600;margin-top:var(--space-4);margin-bottom:var(--space-2)}.content-section p{color:var(--color-text);line-height:1.8;margin-bottom:var(--space-3)}.content-section ul,.content-section ol{margin-bottom:var(--space-3);padding-left:var(--space-6)}.content-section li{margin-bottom:var(--space-2);line-height:1.8}.usage-steps{counter-reset:step-counter;list-style:none;padding-left:0}.usage-steps li{position:relative;padding-left:60px;margin-bottom:var(--space-6);padding-bottom:var(--space-4);border-bottom:1px solid var(--color-border-light)}.usage-steps li:last-child{border-bottom:none}.usage-steps li:before{content:counter(step-counter);counter-increment:step-counter;position:absolute;left:0;top:0;width:40px;height:40px;background:var(--color-primary);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--fs-3)}.usage-steps h3{margin-top:0;margin-bottom:var(--space-2);color:var(--color-heading)}.usage-steps p{color:var(--color-text-muted);margin-bottom:0}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-6);margin-top:var(--space-4)}.feature-item{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4);transition:all .3s ease}.feature-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:var(--color-primary)}.feature-item h3{margin-top:0;margin-bottom:var(--space-3);display:flex;align-items:center;gap:var(--space-2);font-size:var(--fs-3)}.feature-item p{color:var(--color-text-muted);margin-bottom:0;font-size:var(--fs-2)}.tech-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--space-6);margin-top:var(--space-4)}.spec-group{background:var(--color-surface-alt);border-left:4px solid var(--color-primary);padding:var(--space-4);border-radius:var(--radius-sm)}.spec-group h3{margin-top:0;margin-bottom:var(--space-3);color:var(--color-primary)}.spec-group ul{list-style-type:none;padding-left:0}.spec-group li{padding-left:var(--space-4);position:relative;margin-bottom:var(--space-2)}.spec-group li:before{content:"▸";position:absolute;left:0;color:var(--color-primary)}.faq-item{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);margin-bottom:var(--space-3);overflow:hidden;transition:border-color .3s ease}.faq-item:hover{border-color:var(--color-primary)}.faq-item[open]{border-color:var(--color-primary);box-shadow:var(--shadow-1)}.faq-item summary{padding:var(--space-4);cursor:pointer;user-select:none;transition:background-color .3s ease;list-style:none;position:relative;padding-right:var(--space-8)}.faq-item summary:hover{background:var(--color-surface-alt)}.faq-item summary::marker,.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{content:"＋";position:absolute;right:var(--space-4);top:50%;transform:translateY(-50%);font-size:var(--fs-4);color:var(--color-primary);transition:transform .3s ease}.faq-item[open] summary:after{transform:translateY(-50%) rotate(45deg)}.faq-item summary h3{margin:0;font-size:var(--fs-3);color:var(--color-heading);font-weight:600;display:inline}.faq-item>p,.faq-item>ul{padding:0 var(--space-4) var(--space-4)}.faq-item p{color:var(--color-text);line-height:1.8}.use-cases{list-style:none;padding-left:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-3)}.use-cases li{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);position:relative;padding-left:var(--space-8);transition:all .3s ease}.use-cases li:hover{border-color:var(--color-primary);transform:translate(4px);background:var(--color-surface-alt)}.use-cases li:before{content:"✓";position:absolute;left:var(--space-3);color:var(--color-success);font-weight:700;font-size:var(--fs-3)}@media (max-width: 768px){.features-grid,.tech-specs,.use-cases{grid-template-columns:1fr}.usage-steps li{padding-left:50px}.usage-steps li:before{width:34px;height:34px;font-size:var(--fs-2)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion: reduce){.content-section,.feature-item,.faq-item,.use-cases li{animation:none;transition:none}}@media (prefers-color-scheme: dark){.feature-item{background:var(--color-surface);border-color:var(--color-border)}.spec-group,.faq-item,.use-cases li{background:var(--color-surface)}.content-section h2{border-bottom-color:var(--color-primary-dark)}}@media print{.seo-content,.feature-item,.faq-item,.spec-group{page-break-inside:avoid}.faq-item[open]{border:1px solid #000}.faq-item summary:after{display:none}}.share-buttons-wrapper{margin:var(--space-4) 0}.share-buttons{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-3)}.share-label{font-size:var(--fs-2);color:var(--color-subtle);font-weight:500}.share-url-section{display:flex;align-items:center;justify-content:center;gap:var(--space-2)}.share-url-label{font-size:var(--fs-2);color:var(--color-subtle);font-weight:500}.share-url-text{font-size:var(--fs-2);color:var(--color-text);font-family:var(--font-mono);background:var(--color-bg);padding:var(--space-1) var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-xs)}.share-button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-xs);text-decoration:none;cursor:pointer;transition:all var(--dur-mid) var(--ease)}.share-button:hover{background:var(--color-bg);transform:translateY(-2px);box-shadow:var(--shadow-1)}.share-button:active{transform:translateY(0)}.share-button svg{width:20px;height:20px}.share-button--native,.share-button--twitter,.share-button--facebook,.share-button--line,.share-button--linkedin,.share-button--hatena,.share-button--copy{color:var(--color-text)}.share-button--copied{background:var(--color-success);color:#fff;border-color:var(--color-success)}.share-button--copied:hover{background:var(--color-success);border-color:var(--color-success);transform:translateY(0)}@media (max-width: 640px){.share-buttons{gap:var(--space-2)}.share-url-section{flex-wrap:wrap}.share-url-text{font-size:var(--fs-1);max-width:100%;word-break:break-all}.share-button{width:36px;height:36px}.share-button svg{width:18px;height:18px}}@media (prefers-color-scheme: dark){.share-button{background:var(--color-surface);border-color:var(--color-border)}.share-button:hover{background:var(--color-bg)}}@keyframes slideUp{0%{transform:translate(-50%) translateY(100%);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}@media (prefers-reduced-motion: reduce){.share-button{transition:none}.share-button:hover{transform:none}@keyframes slideUp{0%{transform:translate(-50%) translateY(0);opacity:1}to{transform:translate(-50%) translateY(0);opacity:1}}}