@import "https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;700&family=Noto+Sans+JP:wght@300;400;500;700&display=swap";@font-face{font-family:YAMI JP;src:local(Noto Sans JP),local(NotoSansJP-Regular),local(Hiragino Kaku Gothic ProN),local(Hiragino Sans),local(Yu Gothic),local(Meiryo);font-weight:300 700;font-style:normal;font-display:swap;unicode-range:U+3000-303F,U+3040-309F,U+30A0-30FF,U+31F?,U+3200-33FF,U+4E00-9FFF,U+F900-FAFF,U+FE30-FE4F,U+FF00-FFEF}:root{--color-black:#000;--color-ink:#111;--color-white:#fff;--color-off-white:#f7f7f7;--color-hatch:#eee;--color-border:#e5e7eb;--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-900:#111827;--fg-1:var(--color-black);--fg-2:var(--color-gray-600);--fg-3:var(--color-gray-500);--fg-4:var(--color-gray-400);--fg-inverse:var(--color-white);--bg-1:var(--color-white);--bg-2:var(--color-off-white);--bg-inverse:var(--color-black);--accent-primary:#e5007e;--accent-primary-ink:#a3005a;--accent-primary-bg:#ffe6f3;--accent-secondary:#0077b6;--accent-secondary-ink:#00557f;--accent-secondary-bg:#e6f4fb;--selection-bg:var(--color-black);--selection-fg:var(--color-white);--rule-thin:1px solid var(--color-black);--rule-hair:1px solid var(--color-border);--rule-bold:4px solid var(--color-black);--radius-none:0;--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--radius-pill:9999px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;--space-32:128px;--space-40:160px;--container-max:1152px;--container-pad:24px;--ease-standard:cubic-bezier(.2, .8, .2, 1);--ease-out:cubic-bezier(.16, 1, .3, 1);--dur-fast:.15s;--dur-med:.3s;--dur-slow:.7s;--shadow-none:none;--shadow-sm:0 1px 0 #0000000a;--font-sans:"YAMI JP", "Futura", "Futura PT", "ITC Avant Garde Gothic", "Century Gothic", "Jost", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;--font-condensed:"YAMI JP", "Futura", "Futura PT Condensed", "Futura PT", "Century Gothic", "Jost", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;--font-serif:"Yu Mincho", "YuMincho", serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--fs-display:128px;--fs-h1:96px;--fs-h2:60px;--fs-h3:30px;--fs-h4:20px;--fs-h5:16px;--fs-h6:12px;--fs-body:16px;--fs-body-sm:14px;--fs-caption:12px;--fs-micro:10px;--lh-tight:1.1;--lh-snug:1.2;--lh-normal:1.5;--lh-loose:1.8;--tracking-wide:.1em;--tracking-normal:0;--tracking-tight:-.01em;--weight-light:300;--weight-regular:400;--weight-medium:500;--weight-bold:700}html,body{background:var(--bg-1);color:var(--fg-1);font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::selection{background:var(--selection-bg);color:var(--selection-fg)}h1,.h1{font-family:var(--font-condensed);font-size:var(--fs-h1);font-weight:var(--weight-medium);line-height:var(--lh-tight);letter-spacing:var(--tracking-wide);color:var(--fg-1);margin:0}h2,.h2{font-family:var(--font-condensed);font-size:var(--fs-h2);font-weight:var(--weight-light);line-height:var(--lh-tight);color:var(--fg-1);margin:0}h3,.h3{font-family:var(--font-sans);font-size:var(--fs-h3);font-weight:var(--weight-bold);line-height:var(--lh-snug);color:var(--fg-1);margin:0}h4,.h4{font-family:var(--font-sans);font-size:var(--fs-h4);font-weight:var(--weight-bold);line-height:var(--lh-snug);color:var(--fg-1);margin:0}h5,.h5{font-family:var(--font-sans);font-size:var(--fs-h5);font-weight:var(--weight-medium);line-height:var(--lh-normal);color:var(--fg-1);margin:0}h6,.h6{font-family:var(--font-condensed);font-size:var(--fs-h6);font-weight:var(--weight-medium);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-1);margin:0}p,.body{font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-loose);color:var(--fg-2);margin:0}small,.caption{font-family:var(--font-sans);font-size:var(--fs-caption);line-height:var(--lh-normal);color:var(--fg-3)}.eyebrow{font-family:var(--font-condensed);font-size:var(--fs-caption);font-weight:var(--weight-medium);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-1)}.label-role{font-family:var(--font-sans);font-size:var(--fs-body-sm);font-weight:var(--weight-medium);color:var(--fg-4)}code,.mono{font-family:var(--font-mono);font-size:.95em}hr,.rule{border:0;border-top:1px solid var(--color-black);margin:var(--space-6) 0}.hatch-empty{background:repeating-linear-gradient(-45deg, #fff 0, #fff 8px, var(--color-hatch) 8px, var(--color-hatch) 10px)}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:var(--fg-1);background:var(--bg-1)}*{box-sizing:border-box}body{min-height:100vh;margin:0}button{font-family:inherit}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--accent-secondary);outline-offset:2px}.app{max-width:var(--container-max);padding:64px var(--container-pad) 128px;gap:var(--space-16);flex-direction:column;margin:0 auto;display:flex}.app__topbar{padding-bottom:var(--space-4);border-bottom:var(--rule-hair);justify-content:space-between;align-items:center;display:flex}.app__topbar a{color:var(--fg-1);transition:opacity var(--dur-fast) var(--ease-standard);align-items:center;text-decoration:none;display:inline-flex}.app__topbar a:hover{opacity:.6}.app__topbar img{height:22px;display:block}.app__topbar-meta{font-family:var(--font-condensed);font-size:var(--fs-caption);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3)}.app-header{gap:var(--space-6);padding:var(--space-8) 0 var(--space-12);flex-direction:column;display:flex}.app-header__eyebrow{font-family:var(--font-condensed);font-size:var(--fs-caption);font-weight:var(--weight-medium);letter-spacing:.25em;text-transform:uppercase;color:var(--fg-1)}.app-header__title{font-family:var(--font-condensed);font-size:clamp(48px,9.3vw,107px);font-weight:var(--weight-light);line-height:var(--lh-tight);letter-spacing:var(--tracking-wide);color:var(--fg-1);margin:0}.app-header__lead{font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-loose);color:var(--fg-2);max-width:640px;margin:0}.app-header__lead strong{color:var(--fg-1);font-weight:var(--weight-medium)}.section{gap:var(--space-6);flex-direction:column;display:flex}.section__head{justify-content:space-between;align-items:baseline;gap:var(--space-4);padding-bottom:var(--space-3);border-bottom:var(--rule-thin);display:flex}.section__title{font-family:var(--font-condensed);font-size:var(--fs-h6);font-weight:var(--weight-medium);letter-spacing:.25em;text-transform:uppercase;color:var(--fg-1);margin:0}.section__caption{font-family:var(--font-sans);font-size:var(--fs-caption);color:var(--fg-3)}.button{appearance:none;border:1px solid var(--color-black);background:var(--bg-1);color:var(--fg-1);font-family:var(--font-sans);font-size:var(--fs-body-sm);font-weight:var(--weight-medium);letter-spacing:.04em;border-radius:var(--radius-md);cursor:pointer;transition:background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);align-items:center;gap:10px;padding:10px 22px;text-decoration:none;display:inline-flex}.button:hover:not(:disabled){background:var(--color-black);color:var(--fg-inverse)}.button:hover:not(:disabled) .button__icon{transform:translate(4px)}.button:disabled{opacity:.35;cursor:not-allowed}.button--primary{color:var(--fg-inverse);background:#00f;border-color:#00f}.button--primary:hover:not(:disabled){background:var(--bg-1);color:#00f;border-color:#00f}.button--lg{font-size:var(--fs-body);padding:14px 28px}.button--block{justify-content:center;width:100%}.button__icon{transition:transform var(--dur-med) var(--ease-out);display:inline-flex}.upload-panel{align-items:center;gap:var(--space-4);flex-wrap:wrap;display:flex}.upload-panel__hint{font-family:var(--font-sans);font-size:var(--fs-caption);color:var(--fg-3);margin-left:auto}.upload-panel__sample{appearance:none;font-family:var(--font-sans);font-size:var(--fs-body-sm);color:var(--fg-2);text-underline-offset:4px;cursor:pointer;transition:color var(--dur-fast) var(--ease-standard);background:0 0;border:none;margin-left:auto;padding:6px 4px;text-decoration:underline;text-decoration-thickness:1px}.upload-panel__sample:hover:not(:disabled){color:var(--fg-1)}.upload-panel__sample:disabled{opacity:.4;cursor:not-allowed}.image-grid{border-right:var(--rule-bold);border-bottom:var(--rule-bold);grid-template-columns:repeat(auto-fill,minmax(180px,1fr));margin:0;padding:0;list-style:none;display:grid}.image-grid__cell{border-left:var(--rule-bold);border-top:var(--rule-bold);background:var(--bg-1);flex-direction:column;display:flex;position:relative}.image-grid__cell--empty{background:repeating-linear-gradient(-45deg, #fff 0, #fff 8px, var(--color-hatch) 8px, var(--color-hatch) 10px);min-height:220px}.image-grid__thumb-wrap{aspect-ratio:1;background:var(--color-black);position:relative;overflow:hidden}.image-grid__thumb{object-fit:contain;width:100%;height:100%;display:block}.image-grid__index{background:var(--color-black);color:var(--fg-inverse);font-family:var(--font-condensed);font-size:var(--fs-caption);font-weight:var(--weight-medium);letter-spacing:.15em;z-index:1;padding:4px 10px;position:absolute;top:0;left:0}.image-grid__meta{border-top:var(--rule-hair);flex-direction:column;gap:2px;padding:12px 14px;display:flex}.image-grid__name{font-family:var(--font-sans);font-size:var(--fs-body-sm);font-weight:var(--weight-medium);color:var(--fg-1);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.image-grid__sub{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--fg-3);letter-spacing:.04em}.preview-section{gap:var(--space-6);flex-direction:column;display:flex}.preview-section--hidden{display:none}.preview-stack{gap:var(--space-8);grid-template-columns:minmax(0,1fr) 320px;align-items:start;display:grid}@media (width<=880px){.preview-stack{grid-template-columns:minmax(0,1fr)}}.preview{background:var(--color-black);border:var(--rule-bold);justify-content:center;align-items:center;width:100%;display:flex;position:relative;overflow:hidden}.preview__canvas{width:100%;height:100%;display:block}.control-bar{align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-4);background:var(--bg-1);border:var(--rule-thin);border-top:0;grid-template-columns:auto auto auto 1fr;margin-top:-4px;display:grid}.control-bar__btn{appearance:none;background:var(--bg-1);border:1px solid var(--color-black);color:var(--fg-1);border-radius:var(--radius-md);cursor:pointer;width:36px;height:36px;transition:background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);justify-content:center;align-items:center;display:inline-flex}.control-bar__btn:hover:not(:disabled){background:var(--color-black);color:var(--fg-inverse)}.control-bar__btn:disabled{opacity:.3;cursor:not-allowed}.control-bar__btn--play{background:var(--color-black);color:var(--fg-inverse)}.control-bar__btn--play:hover:not(:disabled){background:var(--bg-1);color:var(--fg-1)}.control-bar__time{font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--fg-2);font-variant-numeric:tabular-nums;letter-spacing:.06em;white-space:nowrap}.control-bar__seek{appearance:none;background:var(--color-gray-200);cursor:pointer;border-radius:0;outline:none;width:100%;height:4px;margin:0;padding:0}.control-bar__seek::-webkit-slider-runnable-track{background:0 0;height:4px}.control-bar__seek::-moz-range-track{background:0 0;height:4px}.control-bar__seek::-webkit-slider-thumb{appearance:none;background:var(--color-black);cursor:grab;width:14px;height:14px;box-shadow:0 0 0 2px var(--bg-1);border:none;border-radius:50%;margin-top:-5px}.control-bar__seek::-webkit-slider-thumb:active{cursor:grabbing}.control-bar__seek::-moz-range-thumb{background:var(--color-black);cursor:grab;width:14px;height:14px;box-shadow:0 0 0 2px var(--bg-1);border:none;border-radius:50%}.control-bar__seek:disabled{cursor:not-allowed;opacity:.4}.view-controls{border:var(--rule-thin);background:var(--bg-1);flex-direction:column;display:flex}.view-controls__head{border-bottom:var(--rule-thin);justify-content:space-between;align-items:center;padding:14px 16px;display:flex}.view-controls__title{font-family:var(--font-condensed);font-size:var(--fs-caption);font-weight:var(--weight-medium);letter-spacing:.25em;text-transform:uppercase;color:var(--fg-1)}.view-controls__reset{appearance:none;border:1px solid var(--color-black);color:var(--fg-1);font-family:var(--font-sans);font-size:var(--fs-micro);font-weight:var(--weight-medium);letter-spacing:.15em;text-transform:uppercase;border-radius:var(--radius-sm);cursor:pointer;transition:background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);background:0 0;padding:5px 10px}.view-controls__reset:hover:not(:disabled){background:var(--color-black);color:var(--fg-inverse)}.view-controls__reset:disabled{opacity:.4;cursor:not-allowed}.view-controls__row{align-items:center;gap:var(--space-3);font-size:var(--fs-body-sm);grid-template-columns:100px 1fr 56px;padding:12px 16px;display:grid}.view-controls__row+.view-controls__row{border-top:var(--rule-hair)}.view-controls__row--toggle{grid-template-columns:100px 1fr}.view-controls__label{font-family:var(--font-sans);font-size:var(--fs-body-sm);font-weight:var(--weight-medium);color:var(--fg-1)}.view-controls__value{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--fs-caption);letter-spacing:.04em;text-align:right;color:var(--fg-3)}.view-controls input[type=range]{appearance:none;background:var(--color-gray-200);cursor:pointer;border-radius:0;outline:none;width:100%;height:4px;margin:0;padding:0}.view-controls input[type=range]:disabled{cursor:not-allowed;opacity:.4}.view-controls input[type=range]::-webkit-slider-runnable-track{background:0 0;height:4px}.view-controls input[type=range]::-moz-range-track{background:0 0;height:4px}.view-controls input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--color-black);width:14px;height:14px;box-shadow:0 0 0 2px var(--bg-1);border:none;border-radius:50%;margin-top:-5px}.view-controls input[type=range]::-moz-range-thumb{background:var(--color-black);width:14px;height:14px;box-shadow:0 0 0 2px var(--bg-1);border:none;border-radius:50%}.segmented{border:1px solid var(--color-black);border-radius:0;width:100%;display:inline-flex;overflow:hidden}.segmented__btn{appearance:none;background:var(--bg-1);color:var(--fg-1);font-family:var(--font-sans);font-size:var(--fs-caption);font-weight:var(--weight-medium);letter-spacing:.04em;cursor:pointer;border:none;border-right:1px solid var(--color-black);transition:background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);flex:1;padding:7px 10px}.segmented__btn:last-child{border-right:none}.segmented__btn:hover:not(:disabled):not(.segmented__btn--active){background:var(--color-gray-100)}.segmented__btn--active{background:var(--color-black);color:var(--fg-inverse)}.segmented__btn:disabled{opacity:.4;cursor:not-allowed}.download-panel{gap:var(--space-3);flex-direction:column;align-items:stretch;display:flex}.download-panel__row{justify-content:space-between;align-items:center;gap:var(--space-4);flex-wrap:wrap;display:flex}.download-panel__hint{font-family:var(--font-sans);font-size:var(--fs-caption);color:var(--fg-3)}.recording-indicator{font-family:var(--font-condensed);font-size:var(--fs-caption);font-weight:var(--weight-medium);letter-spacing:.18em;text-transform:uppercase;color:var(--accent-primary);align-items:center;gap:8px;display:inline-flex}.recording-indicator:before{content:"";background:var(--accent-primary);width:8px;height:8px;animation:pager-pulse 1.2s var(--ease-out) infinite;border-radius:50%}@keyframes pager-pulse{0%,to{opacity:1}50%{opacity:.3}}.export-progress{font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--fg-2);letter-spacing:.05em;flex-direction:column;gap:6px;display:flex}.export-progress__label{justify-content:space-between;display:flex}.export-progress__bar{background:var(--color-gray-200);height:4px;overflow:hidden}.export-progress__fill{background:var(--accent-primary);height:100%;transition:width .1s linear}.message-list{gap:var(--space-2);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.message{border:1px solid var(--color-black);background:var(--bg-1);font-family:var(--font-sans);font-size:var(--fs-body-sm);line-height:var(--lh-normal);color:var(--fg-1);align-items:flex-start;gap:10px;padding:12px 14px;display:flex}.message__icon{flex-shrink:0;margin-top:1px}.message--error,.message--risk{border-color:var(--accent-primary);background:var(--accent-primary-bg);color:var(--accent-primary-ink)}.message--risk{border-width:2px;font-weight:500}.message--warning{border-color:var(--accent-secondary);background:var(--accent-secondary-bg);color:var(--accent-secondary-ink)}.app__footer{border-top:var(--rule-hair);padding-top:var(--space-6);align-items:center;gap:var(--space-6);font-family:var(--font-sans);font-size:var(--fs-caption);color:var(--fg-3);flex-wrap:wrap;display:flex}.app__footer-logo{transition:opacity var(--dur-fast) var(--ease-standard);align-items:center;display:inline-flex}.app__footer-logo:hover{opacity:.6}.app__footer-logo img{height:22px;display:block}.app__footer-links{gap:var(--space-5);flex-wrap:wrap;display:flex}.app__footer-links a{color:var(--fg-3);transition:color var(--dur-fast) var(--ease-standard);text-decoration:none}.app__footer-links a:hover{color:var(--fg-1)}.app__footer-share{border:1px solid var(--color-black);border-radius:var(--radius-md);color:var(--fg-1);font-family:var(--font-sans);font-size:var(--fs-caption);font-weight:var(--weight-medium);letter-spacing:.04em;background:var(--bg-1);transition:background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);align-items:center;gap:8px;margin-left:auto;padding:6px 12px;text-decoration:none;display:inline-flex}.app__footer-share img{width:14px;height:14px;transition:filter var(--dur-fast) var(--ease-standard)}.app__footer-share:hover{background:var(--color-black);color:var(--fg-inverse)}.app__footer-share:hover img{filter:invert()}.app__footer-copy{font-family:var(--font-condensed);font-weight:var(--weight-medium);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3)}