:root{--bg: #ffffff;--panel: #ffffff;--surface: #fafbfc;--fg: #111827;--muted: #6b7280;--subtle: #9ca3af;--border: #e5e7eb;--border-strong: #d1d5db;--accent: #1f2937;--accent-fg: #ffffff;--focus: #374151}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Hiragino Kaku Gothic ProN,Hiragino Sans,Noto Sans JP,Yu Gothic,sans-serif;font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}main{max-width:1100px;margin:0 auto;padding:32px 24px 80px}header{border-bottom:1px solid var(--border);padding-bottom:20px;margin-bottom:28px}header h1{font-size:1.25rem;margin:0 0 4px;font-weight:600;letter-spacing:.02em}header .sub{color:var(--muted);font-size:.82rem;margin:0 0 14px}@media (max-width: 640px){main{padding:16px 12px 48px}header{padding-bottom:12px;margin-bottom:16px}header h1{font-size:1.1rem}header .sub{font-size:.78rem;margin-bottom:10px}}.privacy-banner{display:flex;gap:12px;align-items:flex-start;background:#f0fdf4;border:1px solid #bbf7d0;border-left:3px solid #16a34a;border-radius:4px;padding:12px 14px;color:#14532d;font-size:.82rem;line-height:1.55}.privacy-banner strong{display:block;color:#166534;font-weight:600;margin-bottom:2px}.privacy-banner .shield{flex:0 0 auto;width:22px;height:22px;stroke:#16a34a;fill:none;stroke-width:1.7;margin-top:1px}.sample{margin:0 0 16px;padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:4px;text-align:center}.sample img{max-width:100%;height:auto;max-height:260px;box-shadow:0 1px 4px #00000014;border-radius:2px}.sample figcaption{font-size:.74rem;color:var(--muted);margin-top:8px}@media (max-width: 640px){.sample{padding:10px}.sample img{max-height:160px}}.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:220px;border:1px dashed var(--border-strong);border-radius:4px;background:var(--surface);cursor:pointer;color:var(--muted);transition:border-color .15s,background .15s}.drop:hover,.drop.drag{border-color:var(--accent);background:#f3f4f6;color:var(--fg)}.drop-icon{width:40px;height:40px;stroke:var(--subtle);stroke-width:1.5;fill:none}.drop-title{font-weight:500;font-size:.95rem;color:var(--fg)}.drop-sub{font-size:.8rem;color:var(--subtle)}.drop-note{font-size:.72rem;color:#16a34a;margin-top:4px;font-weight:500}.select{width:100%;padding:9px 32px 9px 10px;border:1px solid var(--border-strong);border-radius:3px;background:#fff;font-size:.85rem;font-family:inherit;color:var(--fg);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 10px center}.select:focus{outline:none;border-color:var(--accent)}.dims-note{margin-top:8px;font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}.custom-dpi{margin-top:8px;display:flex;align-items:center;gap:8px}.custom-dpi input{width:100px;padding:8px 10px;border:1px solid var(--border-strong);border-radius:3px;font-size:.85rem;font-family:inherit;font-variant-numeric:tabular-nums}.custom-dpi input:focus{outline:none;border-color:var(--accent)}.custom-dpi span{font-size:.78rem;color:var(--muted)}.field-label{display:block;font-size:.76rem;color:var(--muted);font-weight:500;margin-bottom:6px;letter-spacing:.03em}.segmented{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--border-strong);border-radius:3px;overflow:hidden}.segmented label{position:relative;display:flex;align-items:center;justify-content:center;padding:8px 10px;font-size:.8rem;color:var(--muted);cursor:pointer;background:#fff;transition:background .12s,color .12s}.segmented label+label{border-left:1px solid var(--border)}.segmented input{position:absolute;opacity:0;top:0;right:0;bottom:0;left:0;cursor:pointer}.segmented label:has(input:checked){background:var(--accent);color:var(--accent-fg)}#editor{display:grid;grid-template-columns:minmax(320px,1fr) 360px;gap:24px;align-items:start}@media (max-width: 880px){#editor{grid-template-columns:1fr}}.panel{background:var(--panel);border:1px solid var(--border);border-radius:4px}.panel-header{padding:12px 16px;border-bottom:1px solid var(--border);font-size:.78rem;color:var(--muted);font-weight:600;letter-spacing:.08em;text-transform:uppercase}.panel-body{padding:16px}.canvas-wrap{position:relative;display:flex;justify-content:center;align-items:center;min-height:420px;padding:24px;background:var(--surface)}#canvas{max-width:100%;height:auto;box-shadow:0 1px 3px #00000014,0 0 0 1px #0000000a;background:#fff}.loading{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;background:#fffffff0;color:var(--fg);font-weight:500;font-size:.88rem}.spinner{width:28px;height:28px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.field{margin-bottom:14px}.field:last-child{margin-bottom:0}.field-label{display:flex;justify-content:space-between;align-items:baseline;font-size:.76rem;color:var(--muted);font-weight:500;margin-bottom:6px;letter-spacing:.03em}.field-label .val{color:var(--fg);font-variant-numeric:tabular-nums;font-size:.78rem}.hints{list-style:none;padding:10px 12px;margin:0 0 12px;background:var(--surface);border:1px solid var(--border);border-radius:3px;font-size:.78rem;color:var(--muted)}.hints li{padding:2px 0}.hints strong{color:var(--fg);font-weight:600}.status{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 4px}.status>div{border:1px solid var(--border);border-radius:3px;padding:8px 10px;background:#fff}.status dt{font-size:.68rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin:0 0 2px}.status dd{margin:0;font-size:.88rem;font-weight:500;font-variant-numeric:tabular-nums}#canvas{cursor:grab;touch-action:none}#canvas:active{cursor:grabbing}.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}.swatch{aspect-ratio:1;border-radius:2px;cursor:pointer;padding:0;border:1px solid var(--border);position:relative;transition:border-color .12s}.swatch:hover{border-color:var(--border-strong)}.swatch.active{border:2px solid var(--accent)}.swatch:after{content:attr(data-label);position:absolute;bottom:-18px;left:50%;transform:translate(-50%);font-size:.66rem;color:var(--muted);white-space:nowrap;opacity:0;transition:opacity .15s}.swatch:hover:after{opacity:1}.btn-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}.btn-row .full{grid-column:1 / -1}.btn{padding:10px 14px;border-radius:3px;border:1px solid var(--border-strong);background:#fff;color:var(--fg);font-weight:500;cursor:pointer;font-size:.82rem;transition:background .12s,border-color .12s;font-family:inherit}.btn:hover{background:var(--surface);border-color:var(--accent)}.btn.primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}.btn.primary:hover{background:#000;border-color:#000}.btn.subtle{background:#fff;color:var(--muted);border-color:var(--border)}.btn.subtle:hover{color:var(--fg);border-color:var(--border-strong)}.full-btn{width:100%;display:block}footer{margin-top:24px;padding-top:20px;border-top:1px solid var(--border);color:var(--subtle);font-size:.72rem;text-align:center}footer a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}.legal{margin-top:40px;border-top:1px solid var(--border);padding-top:20px}.legal details{border:1px solid var(--border);border-radius:3px;background:#fff;margin-bottom:8px}.legal summary{list-style:none;cursor:pointer;padding:10px 14px;font-size:.8rem;font-weight:500;color:var(--fg);display:flex;align-items:center;justify-content:space-between}.legal summary::-webkit-details-marker{display:none}.legal summary:after{content:"＋";color:var(--muted);font-weight:400;font-size:.9rem}.legal details[open] summary:after{content:"−"}.legal details[open] summary{border-bottom:1px solid var(--border)}.legal .legal-body{padding:12px 16px 14px;color:var(--muted);font-size:.76rem;line-height:1.7}.legal .legal-body ol,.legal .legal-body ul{margin:0;padding-left:20px}.legal .legal-body li{margin-bottom:6px}.legal .legal-body a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}@media (max-width: 640px){.privacy-banner{padding:10px 12px;font-size:.76rem;gap:8px}.privacy-banner .shield{width:18px;height:18px}.drop{min-height:160px;padding:16px}.drop-icon{width:32px;height:32px}.drop-title{font-size:.88rem}.drop-sub{font-size:.72rem;text-align:center}#editor{gap:12px}.panel-header{padding:10px 12px;font-size:.72rem}.panel-body{padding:12px}.canvas-wrap{min-height:280px;padding:12px}.select{padding:8px;font-size:.82rem}.swatches{grid-template-columns:repeat(6,1fr);gap:4px}.hints{font-size:.74rem;padding:8px 10px;margin-bottom:10px}.status{gap:6px}.status>div{padding:6px 8px}.status dd{font-size:.82rem}.btn-row{grid-template-columns:1fr 1fr;gap:6px;margin-top:12px}.btn{padding:10px;font-size:.82rem}footer{margin-top:24px;padding-top:14px;font-size:.68rem}footer p{margin:4px 0}}