@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)}*{box-sizing:border-box}body{min-height:100vh;margin:0}a{color:var(--fg-1);text-decoration:none}.container{max-width:var(--container-max);padding:var(--space-16) var(--container-pad) var(--space-32);margin:0 auto}.hero{padding:var(--space-8) 0 var(--space-12);border-bottom:var(--rule-thin)}.hero h1{font-size:clamp(64px, 12vw, var(--fs-h1));letter-spacing:var(--tracking-wide);margin:0 0 var(--space-4)}.hero .lead{font-family:var(--font-condensed);font-size:var(--fs-h3);font-weight:var(--weight-light);line-height:var(--lh-snug);color:var(--fg-1);margin:0 0 var(--space-3)}.hero .sub{font-size:var(--fs-body);line-height:var(--lh-loose);color:var(--fg-2);max-width:56ch}.mobile-notice{display:none}@media (max-width:1024px){.mobile-notice{margin:var(--space-6) 0 0;padding:var(--space-4) var(--space-5);background:var(--color-white);border:4px solid var(--accent-primary);display:block}}.mobile-notice-headline{align-items:center;gap:var(--space-2);font-size:var(--fs-body);line-height:var(--lh-snug);color:var(--fg-1);margin:0;display:flex}.mobile-notice-mark{color:var(--accent-primary);font-size:1.1em;line-height:1}.mobile-notice-tagline{margin:var(--space-2) 0 0;font-size:var(--fs-body-sm);line-height:var(--lh-normal);color:var(--fg-2)}.mobile-notice-howto{margin-top:var(--space-4);padding-top:var(--space-3);border-top:var(--rule-hair)}.mobile-notice-howto-head{margin:0 0 var(--space-2);font-family:var(--font-condensed);font-size:var(--fs-body-sm);font-weight:var(--weight-medium);letter-spacing:.05em;color:var(--fg-1)}.mobile-notice-steps{font-size:var(--fs-body-sm);line-height:var(--lh-loose);color:var(--fg-2);margin:0;padding-left:1.4em}.mobile-notice-steps li{margin-bottom:var(--space-1)}.mobile-notice-steps code{background:var(--color-off-white);border-radius:var(--radius-sm);padding:1px 5px;font-size:.95em}.mobile-notice-steps a{color:var(--accent-primary);text-underline-offset:2px;text-decoration:underline}.mobile-notice-steps a:hover{color:var(--accent-primary-ink)}.mobile-notice-steps a code{color:inherit}.mobile-notice-footnote{margin:var(--space-3) 0 0;font-size:var(--fs-caption);line-height:var(--lh-normal);color:var(--fg-3)}section.block{padding:var(--space-12) 0;border-bottom:var(--rule-thin)}section.block:last-of-type{border-bottom:0}.section-head{align-items:baseline;gap:var(--space-4);margin-bottom:var(--space-6);display:flex}.section-head .eyebrow{color:var(--fg-3)}.section-head h2{font-size:var(--fs-h3);font-weight:var(--weight-bold);font-family:var(--font-sans);letter-spacing:0}.dropzone{border:var(--rule-bold);background:var(--bg-1);padding:var(--space-6) var(--space-6);text-align:center;cursor:pointer;align-items:center;gap:var(--space-1);transition:background var(--dur-fast) var(--ease-standard);flex-direction:column;display:flex}.dropzone:focus-visible{outline:3px solid var(--accent-secondary);outline-offset:4px}.dropzone.empty{background:repeating-linear-gradient(-45deg, #fff 0, #fff 8px, var(--color-hatch) 8px, var(--color-hatch) 10px)}.dropzone:hover{background:var(--color-off-white)}.dropzone.dragover{background:var(--accent-secondary-bg)}.dropzone-label{font-family:var(--font-condensed);font-size:var(--fs-h5);font-weight:var(--weight-medium);letter-spacing:.05em}.dropzone-hint{font-size:var(--fs-caption);color:var(--fg-3);letter-spacing:.1em;text-transform:uppercase}.toolbar{border:var(--rule-thin);padding:var(--space-3);margin-bottom:var(--space-4);gap:var(--space-3);flex-direction:column;display:flex}.tool-row{gap:var(--space-3);flex-wrap:wrap;align-items:center;display:flex}.tool-row .eyebrow{font-size:var(--fs-micro);letter-spacing:.2em;color:var(--fg-3);min-width:64px}@media (max-width:540px){.tool-row .eyebrow{flex-basis:100%;min-width:0}}.tool-dock{z-index:20;background:var(--color-white);border:var(--rule-thin);padding:var(--space-2) var(--space-3);margin-bottom:var(--space-4);align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex;position:sticky;top:0}.dock-history{gap:var(--space-2);margin-left:auto;display:inline-flex}.tool-option.inapplicable{opacity:.45}.toggle-group button:disabled{opacity:.35;cursor:not-allowed}.toggle-group button:disabled:hover{background:0 0}@media (max-width:640px){.tool-dock{gap:var(--space-2)}.tool-dock .lbl{display:none}.tool-dock .toggle-group button{padding:var(--space-2) var(--space-3)}}#editorCell{position:relative}.view-overlay{right:var(--space-3);bottom:var(--space-3);z-index:15;position:absolute}.view-overlay .toggle-group{background:var(--color-white)}.preview-cell.empty .view-overlay{display:none}.tool-divider{background:var(--color-black);width:1px;margin:0 var(--space-1);align-self:stretch;display:inline-block}.toggle-group{border:var(--rule-thin);display:inline-flex}.toggle-group button{appearance:none;border:0;border-right:var(--rule-thin);padding:var(--space-2) var(--space-4);font-family:var(--font-condensed);font-size:var(--fs-body-sm);font-weight:var(--weight-medium);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;color:var(--fg-1);align-items:center;gap:var(--space-2);transition:background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);background:0 0;display:inline-flex}.toggle-group button:last-child{border-right:0}.toggle-group button:hover{background:var(--color-off-white)}.toggle-group button[aria-pressed=true]{background:var(--color-black);color:var(--color-white)}.btn{appearance:none;align-items:center;gap:var(--space-2);background:var(--color-white);color:var(--color-black);border:1px solid var(--color-black);padding:var(--space-3) var(--space-5);font-family:var(--font-condensed);font-size:var(--fs-body-sm);font-weight:var(--weight-medium);letter-spacing:.1em;text-transform:uppercase;border-radius:var(--radius-md);cursor:pointer;transition:background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);display:inline-flex}.btn:hover:not(:disabled){background:var(--color-black);color:var(--color-white)}.btn:disabled{opacity:.35;cursor:not-allowed}.btn.small{padding:var(--space-2) var(--space-3);font-size:var(--fs-micro);letter-spacing:.15em}.btn.primary{background:var(--color-black);color:var(--color-white)}.btn.primary:hover:not(:disabled){background:var(--color-white);color:var(--color-black)}.btn.toggle[aria-pressed=true]{background:var(--color-black);color:var(--color-white)}.btn.toggle[aria-pressed=true]:hover:not(:disabled){background:var(--color-white);color:var(--color-black)}.icon{justify-content:center;align-items:center;width:18px;height:18px;line-height:1;display:inline-flex}.icon svg{width:100%;height:100%;display:block}.icon-lg{width:32px;height:32px}.preview-cell{border:var(--rule-bold);flex-direction:column;display:flex}.preview-cell .label{font-family:var(--font-condensed);font-size:var(--fs-micro);font-weight:var(--weight-medium);letter-spacing:.25em;text-transform:uppercase;color:var(--color-white);background:var(--color-black);padding:var(--space-2) var(--space-3);justify-content:space-between;align-items:center;gap:var(--space-3);display:flex}.label-status{opacity:.75;white-space:nowrap}.preview-cell .canvas-wrap{background:repeating-linear-gradient(-45deg, #fff 0, #fff 8px, var(--color-hatch) 8px, var(--color-hatch) 10px);min-height:240px;padding:var(--space-3);flex:1;justify-content:center;align-items:center;display:flex;position:relative}.preview-cell img,.preview-cell canvas{width:auto;max-width:100%;height:auto;max-height:60vh;display:block}#resultCell .canvas-wrap img{background:repeating-conic-gradient(#e6e6e6 0% 25%,#fff 0% 50%) 0 0/16px 16px}.preview-cell.empty canvas{display:none}#editorCanvas{cursor:crosshair;touch-action:none;max-height:78vh}#editorCanvas.brush-mode{cursor:none}#editorCanvas.tool-bucket{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%23fff' stroke-width='4.5'%3E%3Cpath d='m19 11-8-8-8.6 8.6a2 2 0 0 0 0 2.8l5.2 5.2c.8.8 2 .8 2.8 0L19 11Z'/%3E%3Cpath d='m5 2 5 5'/%3E%3Cpath d='M2 13h15'/%3E%3Cpath d='M22 20a2 2 0 1 1-4 0c0-1.6 1.7-2.4 2-4 .3 1.6 2 2.4 2 4Z'/%3E%3C/g%3E%3Cg stroke='%23000' stroke-width='2'%3E%3Cpath d='m19 11-8-8-8.6 8.6a2 2 0 0 0 0 2.8l5.2 5.2c.8.8 2 .8 2.8 0L19 11Z'/%3E%3Cpath d='m5 2 5 5'/%3E%3Cpath d='M2 13h15'/%3E%3Cpath d='M22 20a2 2 0 1 1-4 0c0-1.6 1.7-2.4 2-4 .3 1.6 2 2.4 2 4Z'/%3E%3C/g%3E%3C/svg%3E") 20 20,crosshair}#editorCanvas.tool-magic{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%23fff' stroke-width='4.5'%3E%3Cpath d='m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72'/%3E%3Cpath d='m14 7 3 3'/%3E%3Cpath d='M5 6v4'/%3E%3Cpath d='M19 14v4'/%3E%3Cpath d='M10 2v2'/%3E%3Cpath d='M7 8H3'/%3E%3Cpath d='M21 16h-4'/%3E%3Cpath d='M11 3H9'/%3E%3C/g%3E%3Cg stroke='%23000' stroke-width='2'%3E%3Cpath d='m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72'/%3E%3Cpath d='m14 7 3 3'/%3E%3Cpath d='M5 6v4'/%3E%3Cpath d='M19 14v4'/%3E%3Cpath d='M10 2v2'/%3E%3Cpath d='M7 8H3'/%3E%3Cpath d='M21 16h-4'/%3E%3Cpath d='M11 3H9'/%3E%3C/g%3E%3C/svg%3E") 3 21,crosshair}#editorCell .canvas-wrap{overflow:auto}#editorCell .canvas-wrap.zoomed{justify-content:safe center;align-items:safe center}#editorCell .canvas-wrap.zoomed #editorCanvas{max-width:none;max-height:none}#editorCell .canvas-wrap.pan-tool #editorCanvas{cursor:grab}#editorCell .canvas-wrap.pan-tool.panning #editorCanvas{cursor:grabbing}.brush-cursor{pointer-events:none;box-sizing:border-box;mix-blend-mode:difference;z-index:10;transition:width var(--dur-fast) var(--ease-standard), height var(--dur-fast) var(--ease-standard);border:2px solid #fff;border-radius:50%;display:none;position:absolute;transform:translate(-50%,-50%)}.brush-cursor.visible{display:block}.actions-row{gap:var(--space-4);margin-top:var(--space-6);flex-wrap:wrap;align-items:center;display:flex}.status{font-family:var(--font-condensed);font-size:var(--fs-caption);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3);align-items:center;gap:var(--space-2);display:inline-flex}.status.in-progress{color:var(--accent-secondary)}.status.error{color:var(--accent-primary)}.status .dot{background:currentColor;width:8px;height:8px;display:inline-block}.footer{border-top:var(--rule-thin);padding:var(--space-6) 0;align-items:center;gap:var(--space-6);font-size:var(--fs-caption);color:var(--fg-3);letter-spacing:.1em;font-family:var(--font-condensed);flex-wrap:wrap;display:flex}.footer-logo{flex:none;align-items:center;display:inline-flex}.footer-logo img{width:auto;height:28px;display:block}.footer-logo:hover{opacity:.65}.footer-links{gap:var(--space-5);flex:auto;display:flex}.footer-links a{color:var(--fg-3);font-size:var(--fs-caption);letter-spacing:.05em;font-family:var(--font-sans);text-transform:none;transition:color var(--dur-fast) var(--ease-standard)}.footer-links a:hover{color:var(--fg-1)}.footer-share{align-items:center;gap:var(--space-2);color:var(--color-black);border:1px solid var(--color-black);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);font-size:var(--fs-micro);font-weight:var(--weight-medium);letter-spacing:.15em;text-transform:uppercase;transition:background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);display:inline-flex}.footer-share:hover{background:var(--color-black);color:var(--color-white)}.footer-share:hover img{filter:invert()}.footer-share img{width:14px;height:14px;display:block}.footer-copy{font-size:var(--fs-caption);color:var(--fg-3);letter-spacing:.1em;text-transform:uppercase}.hidden{display:none!important}