:root{--c-bg:#fff;--c-surface:#f8f8f8;--c-border:#e2e2e2;--c-text:#1d1c1d;--c-muted:#616061;--c-accent:#1264a3;--c-accent-weak:#e8f2fa;--radius:10px;--mock-dock-bar-h:44px;--mock-dock-sheet-h:45vh;color:var(--c-text);background:var(--c-bg);-webkit-font-smoothing:antialiased;font-family:Hiragino Sans,Hiragino Kaku Gothic ProN,Noto Sans JP,Yu Gothic,Meiryo,system-ui,sans-serif;line-height:1.5}*,:before,:after{box-sizing:border-box}body{background:var(--c-bg);margin:0}button,input,select{font:inherit;color:inherit}.panel{border:1px solid var(--c-border);border-radius:var(--radius);flex-direction:column;gap:10px;min-width:0;margin:0;padding:10px 14px 14px;display:flex}.panel legend{padding:0 6px;font-size:.95rem;font-weight:700}.panel-title{margin:0;font-size:.95rem;font-weight:700}.field{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}.field>span{color:var(--c-muted);font-size:.8rem}.field-row{flex-wrap:wrap;gap:12px;display:flex}.field input[type=text],.field select{border:1px solid var(--c-border);background:#fff;border-radius:6px;width:100%;padding:7px 10px}.field input[type=text]:focus,.field select:focus{outline:2px solid var(--c-accent);outline-offset:-1px}.row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.btn{border:1px solid var(--c-border);cursor:pointer;background:#fff;border-radius:6px;padding:6px 12px;font-size:.85rem}.btn:hover{background:var(--c-surface)}.btn-primary{border-color:var(--c-accent);background:var(--c-accent);color:#fff;padding:10px 20px;font-size:.95rem;font-weight:700}.btn-primary:hover{background:#0b4c80}.segmented{border:1px solid var(--c-border);border-radius:6px;max-width:100%;display:inline-flex;overflow:hidden}.segmented button{cursor:pointer;background:#fff;border:0;padding:7px 14px}.segmented button+button{border-left:1px solid var(--c-border)}.segmented button.is-selected{background:var(--c-accent-weak);color:var(--c-accent);font-weight:700}.swatches{grid-auto-columns:minmax(0,30px);grid-auto-flow:column;gap:6px;display:grid}.swatch{aspect-ratio:1;cursor:pointer;border:1px solid #0000001f;border-radius:7px;padding:0}.swatch.is-selected{outline:2px solid var(--c-accent);outline-offset:2px}.color-input{cursor:pointer;align-items:center;gap:6px;font-size:.85rem;display:inline-flex}.color-input input[type=color]{border:1px solid var(--c-border);cursor:pointer;background:0 0;border-radius:6px;width:30px;height:30px;padding:0}.hex{color:var(--c-muted);font-size:.8rem}.slider{grid-template-columns:10em minmax(0,1fr) 3em;align-items:center;gap:8px;font-size:.85rem;display:grid}.slider input[type=range]{width:100%;accent-color:var(--c-accent)}.slider output{text-align:right;font-variant-numeric:tabular-nums;color:var(--c-muted)}.panel>.btn{align-self:flex-start}.preset-list{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;display:grid}.preset{border:1px solid var(--c-border);cursor:pointer;text-align:left;background:#fff;border-radius:8px;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;padding:6px 10px;display:flex}.preset:hover{border-color:var(--c-accent);background:var(--c-accent-weak)}.preset-label{color:var(--c-muted);font-size:.8rem}.preset-sample{text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-weight:700;overflow:hidden}.preview{flex-direction:column;align-items:center;gap:8px;width:100%;display:flex}.preview-canvas{aspect-ratio:1;border:1px solid var(--c-border);width:184px;height:auto;transition:border-radius .15s}.preview-canvas.is-rounded{border-radius:18%}.preview-canvas.is-shaped{background-color:#fff;background-image:conic-gradient(#e6e6e6 25%, transparent 0 50%, #e6e6e6 0 75%, transparent 0);background-size:16px 16px;border-color:#0000;border-radius:0}.preview-note{color:var(--c-muted);margin:0;font-size:.8rem}.toggle{cursor:pointer;align-items:center;gap:6px;font-size:.85rem;display:inline-flex}.error{color:#b5384a;margin:0;font-size:.85rem}.app{max-width:1120px;margin:0 auto;padding:0 16px 32px}.app-header{flex-wrap:wrap;align-items:baseline;column-gap:12px;padding:10px 0 6px;display:flex}.app-header h1{margin:0;font-size:1.2rem}.app-header p{color:var(--c-muted);margin:0;font-size:.8rem}.app-settings{min-width:0}.app-settings .tab-panel-body{padding:12px 0}@media (width<=899px){.app{padding-bottom:calc(var(--mock-dock-bar-h) + 24px)}.app:has(.app-mock-dock.is-open){padding-bottom:calc(var(--mock-dock-sheet-h) + 24px)}.app-dock{z-index:10;border-bottom:1px solid var(--c-border);background:var(--c-bg);min-height:116px;margin:0 -16px;padding:10px 16px;position:sticky;top:0;box-shadow:0 2px 6px #0000000a}.preview-canvas{width:96px}.preview-canvas.is-shaped{background-size:12px 12px}.app-dock .toggle,.app-dock .preview-note{font-size:.75rem;line-height:1.35}}@media (width>=900px){.app{grid-template:"header header""settings dock"minmax(0,1fr)"mock mock"/minmax(0,1fr) 256px;column-gap:24px;height:100dvh;padding:0 24px 12px;display:grid;overflow:hidden}.app-mock-dock{grid-area:mock;margin-top:10px}.app-header{grid-area:header;padding:12px 0 8px}.app-dock{border:1px solid var(--c-border);border-radius:var(--radius);grid-area:dock;align-self:start;margin-top:6px;padding:16px}.app-settings{flex-direction:column;grid-area:settings;min-height:0;display:flex}.app-settings .tab-panel{overscroll-behavior:contain;flex:auto;min-height:0;padding-right:4px;overflow-y:auto}}.bg-shape{flex-direction:column;gap:4px;display:flex}.bg-label{color:var(--c-muted);font-size:.8rem}.bg-note{color:var(--c-muted);margin:0;font-size:.8rem}.bg-file{align-items:center;display:inline-flex;position:relative}.bg-file input[type=file]{opacity:0;width:1px;height:1px;position:absolute;overflow:hidden}.bg-file:focus-within{outline:2px solid var(--c-accent);outline-offset:1px}.bg-gradient-opts{flex-direction:column;gap:4px;display:flex}.batch-panel{flex-direction:column;gap:10px;width:100%;min-width:0;display:flex}.batch-textarea{border:1px solid var(--c-border);width:100%;min-height:7.5em;font:inherit;resize:vertical;background:#fff;border-radius:6px;padding:8px 10px;font-size:.9rem;line-height:1.5}.batch-textarea:focus{outline:2px solid var(--c-accent);outline-offset:-1px}.batch-size{flex:0 0 7em}.batch-note{color:var(--c-muted);margin:0;font-size:.8rem}.batch-warnings{color:#8a5a00;background:#fff8e6;border-radius:6px;margin:0;padding:6px 10px 6px 26px;font-size:.8rem}.batch-panel .btn:disabled{opacity:.5;cursor:not-allowed}.batch-progress{font-variant-numeric:tabular-nums;color:var(--c-muted);align-items:center;gap:8px;font-size:.85rem;display:inline-flex}.batch-progress progress{width:120px;accent-color:var(--c-accent)}.batch-done{color:#1a7f37;margin:0;font-size:.85rem}.fx-shadow-toggle{align-self:flex-start;margin-top:4px}.export-panel{flex-direction:column;align-items:center;gap:8px;width:min(100%,360px);display:flex}.export-sizes{border:1px solid var(--c-border);border-radius:6px;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;display:grid;overflow:hidden}.export-size{cursor:pointer;text-align:center;background:#fff;flex-direction:column;align-items:center;gap:1px;padding:6px 4px;display:flex;position:relative}.export-size+.export-size{border-left:1px solid var(--c-border)}.export-size input{opacity:0;pointer-events:none;position:absolute}.export-size:has(input:focus-visible){outline:2px solid var(--c-accent);outline-offset:-2px}.export-size.is-selected{background:var(--c-accent-weak);color:var(--c-accent)}.export-size-px{font-size:.9rem;font-weight:700}.export-size-note{color:var(--c-muted);font-size:.7rem}.export-actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:flex}.export-copy{min-width:11em;padding:10px 14px;font-size:.9rem}.export-panel .btn:disabled{opacity:.5;cursor:not-allowed;background:#fff}.export-status{color:#1a7f37;min-height:1.2em;margin:0;font-size:.8rem}.export-hint{color:var(--c-muted);text-align:center;margin:0;font-size:.8rem}.mock-preview{flex-direction:column;gap:10px;width:100%;min-width:0;display:flex}.mock-controls{flex-wrap:wrap;gap:8px;display:flex}.mock-controls .segmented button{padding:5px 12px;font-size:.85rem}.mock-frames{grid-template-columns:minmax(0,1fr);gap:12px;display:grid}.mock-frame{flex-direction:column;gap:4px;min-width:0;margin:0;display:flex}.mock-frame figcaption{color:var(--c-muted);font-size:.75rem}.mock-hints{color:var(--c-text);margin:0;padding-left:1.2em;font-size:.8rem}.mock-hints li+li{margin-top:2px}.mock-note{color:var(--c-muted);margin:0;font-size:.72rem}.mock{--m-bg:#fff;--m-side:#f8f8f8;--m-text:#1d1c1d;--m-muted:#616061;--m-border:#e2e2e2;--m-active:#e8f2fa;--m-active-text:inherit;--m-online:#2bac76;border:1px solid var(--m-border);background:var(--m-bg);min-width:0;color:var(--m-text);text-align:left;border-radius:8px;font-size:13px;line-height:1.4;display:flex;overflow:hidden}.mock-avatar{object-fit:cover;color:#fff;-webkit-user-select:none;user-select:none;flex:none;justify-content:center;align-items:center;font-weight:700;line-height:1;display:inline-flex}.mock-avatar.is-rounded{border-radius:18%}.mock-avatar.is-circle{border-radius:50%}.mock-ellipsis{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.mock-name{font-weight:700}.mock-time,.mock-sub{color:var(--m-muted);font-size:.85em;font-weight:400}.mock-time{flex:none}.mock-text{margin:2px 0 0}.mock-body{min-width:0}.mock-msg-head{align-items:baseline;gap:8px;display:flex}.mock-presence-wrap{flex:none;display:inline-flex;position:relative}.mock-presence{border:2px solid var(--m-side);background:var(--m-side);width:9px;height:9px;box-shadow:inset 0 0 0 1.5px var(--m-muted);border-radius:50%;position:absolute;bottom:-3px;right:-3px}.mock-presence.is-online{background:var(--m-online);box-shadow:none}.mock-presence.is-away{box-shadow:none;background:#fcb83b}.mock-slack.is-light{--m-bg:#fff;--m-side:#f8f8f8;--m-text:#1d1c1d;--m-muted:#616061;--m-border:#ddd;--m-active:#1164a3;--m-active-text:#fff}.mock-slack.is-dark{--m-bg:#1a1d21;--m-side:#121417;--m-text:#d1d2d3;--m-muted:#9a9b9e;--m-border:#34373b;--m-active:#1164a3;--m-active-text:#fff}.mock-slack-sidebar{background:var(--m-side);border-right:1px solid var(--m-border);flex:0 0 40%;min-width:0;padding:10px 6px}.mock-slack-section{color:var(--m-muted);padding:0 8px 4px;font-size:.8em}.mock-slack-dm{border-radius:6px;align-items:center;gap:8px;padding:3px 8px;font-size:.95em;display:flex}.mock-slack-dm.is-active{background:var(--m-active);color:var(--m-active-text)}.mock-slack-dm.is-active .mock-presence{border-color:var(--m-active)}.mock-slack-r4{border-radius:4px}.mock-slack-r8{border-radius:8px}.mock-slack-main{flex:1;min-width:0;padding:12px}.mock-slack-msg{align-items:flex-start;gap:8px;display:flex}.mock-teams.is-light{--m-bg:#f5f5f5;--m-side:#fff;--m-text:#242424;--m-muted:#616161;--m-border:#e0e0e0;--m-active:#ebebeb;--m-online:#6bb700;--m-bubble:#fff}.mock-teams.is-dark{--m-bg:#1f1f1f;--m-side:#292929;--m-text:#fff;--m-muted:#adadad;--m-border:#3d3d3d;--m-active:#3d3d3d;--m-online:#92c353;--m-bubble:#292929}.mock-teams-list{background:var(--m-side);border-right:1px solid var(--m-border);flex:0 0 46%;min-width:0;padding:6px}.mock-teams-chat{border-radius:4px;align-items:center;gap:10px;padding:6px 8px;display:flex}.mock-teams-chat.is-active{background:var(--m-active)}.mock-teams-chat.is-active .mock-presence{border-color:var(--m-active)}.mock-teams-chat-body{flex-direction:column;flex:1;min-width:0;display:flex}.mock-teams-chat-head{justify-content:space-between;gap:6px;display:flex}.mock-teams-chat .mock-name{font-weight:600}.mock-teams-main{flex:1;min-width:0;padding:12px 10px}.mock-teams-msg{align-items:flex-start;gap:8px;display:flex}.mock-teams-bubble{background:var(--m-bubble);border-radius:4px;min-width:0;padding:6px 10px 8px;box-shadow:0 1px 2px #00000024}.mock-teams-bubble .mock-name{font-size:.85em;font-weight:600}.mock-google{flex-direction:column}.mock-google.is-light{--m-bg:#fff;--m-side:#f6f8fc;--m-text:#202124;--m-muted:#5f6368;--m-border:#e0e0e0;--m-unread:#fff;--m-read:#f2f6fc;--m-meet-bg:#f1f3f4;--m-meet-tile:#3c4043}.mock-google.is-dark{--m-bg:#202124;--m-side:#202124;--m-text:#e8eaed;--m-muted:#9aa0a6;--m-border:#3c4043;--m-unread:#2d2e30;--m-read:#202124;--m-meet-bg:#202124;--m-meet-tile:#3c4043}.mock-gmail-row{background:var(--m-read);border-bottom:1px solid var(--m-border);grid-template-columns:40px minmax(0,7em) minmax(0,1fr) auto;align-items:center;gap:10px;padding:6px 12px;display:grid}.mock-gmail-row.is-unread{background:var(--m-unread)}.mock-gmail-row.is-unread .mock-gmail-from,.mock-gmail-row.is-unread .mock-time{color:var(--m-text);font-weight:700}.mock-gmail-subject b{font-weight:700}.mock-meet{background:var(--m-meet-bg);padding:12px}.mock-meet-tile{aspect-ratio:16/9;background:var(--m-meet-tile);border-radius:8px;justify-content:center;align-items:center;max-height:140px;margin:0 auto;display:flex;position:relative}.mock-meet-label{color:#fff;text-shadow:0 1px 2px #0009;max-width:calc(100% - 20px);font-size:.85em;font-weight:500;position:absolute;bottom:8px;left:10px}@media (width<=420px){.mock-slack-sidebar,.mock-teams-list{flex-basis:50%}.mock-gmail-row{grid-template-columns:40px minmax(0,1fr) auto}.mock-gmail-from{display:none}}.mock-frame{container-type:inline-size}@container (width<=520px){.mock-gmail-row{grid-template-columns:40px minmax(0,1fr) auto}.mock-gmail-from{display:none}}@media (width<=899px){.mock-meet-tile{max-height:104px}}@media (width>=900px){.mock-frames.is-both{grid-template-columns:repeat(2,minmax(0,1fr))}.mock-frames{gap:4px 12px}.mock-frame figcaption{font-size:.7rem;line-height:1.3}.mock-google{flex-direction:row}.mock-gmail{border-right:1px solid var(--m-border);flex:auto;min-width:0}.mock-gmail-row:last-child{border-bottom:0}.mock-meet{flex:none;align-items:center;padding:8px;display:flex}.mock-meet-tile{height:90px;max-height:none}.mock-hints{white-space:nowrap;text-overflow:ellipsis;color:var(--c-muted);padding-left:0;font-size:.75rem;overflow:hidden}.mock-hints:before{content:"ヒント: ";color:var(--c-text);font-weight:700}.mock-hints li{display:inline}.mock-hints li+li{margin-top:0}.mock-hints li+li:before{content:" ／ "}.mock-note{font-size:.66rem;line-height:1.35}}.mock-dock{border:1px solid var(--c-border);border-radius:var(--radius);background:var(--c-bg);min-width:0}.mock-dock-head{justify-content:space-between;align-items:center;gap:8px;min-width:0;display:flex}.mock-dock-title{white-space:nowrap;font-size:.85rem;font-weight:700}.mock-dock-toggle{border:1px solid var(--c-border);white-space:nowrap;cursor:pointer;background:#fff;border-radius:6px;flex:none;padding:3px 10px;font-size:.78rem}.mock-dock-toggle:hover{background:var(--c-surface)}.mock-dock-toggle:focus-visible{outline:2px solid var(--c-accent);outline-offset:1px}.mock-dock:not(.is-open) .mock-dock-head{height:var(--mock-dock-bar-h)}.mock-dock:not(.is-open) .mock-dock-toggle{border-radius:inherit;text-align:left;background:0 0;border:0;flex:auto;align-items:center;gap:12px;min-width:0;height:100%;padding:0 14px;display:flex}.mock-dock:not(.is-open) .mock-dock-toggle:hover{background:var(--c-surface)}.mock-dock-toggle-main{color:var(--c-accent);flex:none;font-size:.85rem;font-weight:700}.mock-dock-toggle-sub{text-overflow:ellipsis;min-width:0;color:var(--c-muted);font-size:.75rem;overflow:hidden}@media (width>=900px){.mock-dock{--mock-dock-bar-h:36px}.mock-dock.is-open{grid-template:"head frames""controls frames"minmax(0,1fr)"note hints"/176px minmax(0,1fr);gap:6px 16px;padding:8px 12px;display:grid}.mock-dock.is-open .mock-dock-body,.mock-dock.is-open .mock-preview{display:contents}.mock-dock.is-open .mock-dock-head{grid-area:head}.mock-dock.is-open .mock-controls{flex-direction:column;grid-area:controls;align-self:start;align-items:stretch;gap:6px}.mock-dock.is-open .mock-tools{flex-direction:column}.mock-dock.is-open .mock-tools button+button{border-left:0;border-top:1px solid var(--c-border)}.mock-dock.is-open .mock-controls .segmented button{white-space:nowrap;flex:auto;padding:3px 8px;font-size:.78rem}.mock-dock.is-open .mock-frames{grid-area:frames}.mock-dock.is-open .mock-hints{grid-area:hints;align-self:end}.mock-dock.is-open .mock-note{white-space:nowrap;text-overflow:ellipsis;grid-area:note;align-self:end;overflow:hidden}}@media (width<=899px){.mock-dock{z-index:20;padding-bottom:env(safe-area-inset-bottom,0px);border-width:1px 0 0;border-radius:12px 12px 0 0;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -2px 10px #00000014}.mock-dock.is-open{max-height:var(--mock-dock-sheet-h);flex-direction:column;display:flex}.mock-dock.is-open .mock-dock-head{border-bottom:1px solid var(--c-border);flex:none;padding:8px 16px}.mock-dock-body{overscroll-behavior:contain;flex:auto;min-height:0;padding:10px 16px 12px;overflow-y:auto}}.preview-dock{flex-direction:column;align-items:center;gap:12px;min-width:0;display:flex}.dock-actions{flex-direction:column;align-items:stretch;gap:4px;width:100%;min-width:0;display:flex}.dock-download{padding:9px 8px;font-size:.88rem}.dock-hint{color:var(--c-muted);text-align:center;margin:0;font-size:.72rem}@media (width<=899px){.preview-dock{grid-template-rows:auto auto;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:6px 14px;display:grid}.preview-dock .preview{display:contents}.preview-dock .preview-canvas{grid-area:1/1/span 2}.preview-dock .toggle,.preview-dock .preview-note{grid-area:1/2;align-self:end}.preview-dock .dock-actions{grid-area:2/2;align-self:start}.dock-download{padding:8px 10px;font-size:.88rem}.dock-hint{text-align:left}}@media (width>=900px){.dock-download-size{opacity:.9;font-size:.75rem;font-weight:400;display:block}}.settings-tabs{min-width:0}.tab-list{border-bottom:1px solid var(--c-border);scrollbar-width:thin;gap:2px;display:flex;overflow-x:auto}.tab{color:var(--c-muted);white-space:nowrap;cursor:pointer;background:0 0;border:0;border-bottom:2px solid #0000;flex:none;padding:9px 14px 7px;font-size:.9rem}.tab:hover{color:var(--c-text);background:var(--c-surface)}.tab.is-selected{border-bottom-color:var(--c-accent);color:var(--c-accent);font-weight:700}.tab:focus-visible,.tab-panel:focus-visible{outline:2px solid var(--c-accent);outline-offset:-2px}.tab-panel[hidden]{display:none}.tab-panel-body{flex-direction:column;gap:12px;display:flex}@media (width>=900px){.tab-panel-body.is-columns{columns:2 300px;column-gap:16px;display:block}.tab-panel-body.is-columns>*{break-inside:avoid;margin-bottom:12px}}.random-panel{flex-flow:wrap;align-items:center;gap:12px 16px;padding:12px 16px}.random-btn{border-color:var(--c-accent);color:var(--c-accent);padding:8px 16px;font-size:.95rem;font-weight:700}.random-btn:hover{background:var(--c-accent-weak)}.random-btn:disabled{opacity:.5;cursor:not-allowed}.random-btn[aria-busy=true]{cursor:progress}.random-targets{flex-wrap:wrap;gap:4px 14px;display:flex}.emoji-picker{border:1px solid var(--c-border);background:var(--c-surface);border-radius:8px;flex-direction:column;gap:10px;padding:10px 12px;display:flex}.emoji-category{flex-direction:column;gap:4px;display:flex}.emoji-category-label{color:var(--c-muted);font-size:.75rem}.emoji-grid{grid-template-columns:repeat(auto-fill,minmax(36px,1fr));gap:6px;display:grid}.emoji-cell{aspect-ratio:1;border:1px solid var(--c-border);cursor:pointer;background:#fff;border-radius:6px;padding:0;font-size:1.25rem;line-height:1}.emoji-cell:hover{border-color:var(--c-accent);background:var(--c-accent-weak)}.emoji-cell.is-selected{outline:2px solid var(--c-accent);outline-offset:1px}.emoji-note{color:var(--c-muted);margin:0;font-size:.75rem}.font-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:6px;display:grid}.font-option{border:1px solid var(--c-border);cursor:pointer;text-overflow:ellipsis;white-space:nowrap;background:#fff;border-radius:6px;padding:6px 4px;font-size:.85rem;line-height:1.3;overflow:hidden}.font-option:hover{border-color:var(--c-accent);background:var(--c-accent-weak)}.font-option.is-selected{border-color:var(--c-accent);background:var(--c-accent-weak);color:var(--c-accent);outline:1px solid var(--c-accent)}.font-option.is-loading{opacity:.6;cursor:progress}.font-loading{color:var(--c-accent)}.emoji-toggle-row{margin-top:-4px;display:flex}