*,:before,:after{box-sizing:border-box;margin:0;padding:0}[hidden]{display:none!important}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f6f3ee;--surface:#fff;--surface-2:#f3eee6;--border:#e7dfd3;--border-strong:#d6c8b3;--text:#2a2118;--text-muted:#85735f;--accent:#a85d27;--accent-hover:#8f4d1d;--accent-soft:#a85d271f;--on-accent:#fff;--ring:#a85d2759;--shadow-sm:0 1px 2px #3c28140f;--shadow:0 1px 2px #3c28140f, 0 8px 24px #3c281414;--shadow-board:0 1px 2px #3c28141a, 0 12px 32px #3c281429;--radius:12px;--radius-sm:8px;--control-h:38px;--board-max:min(560px, 70vh);--panel-w:272px;--gap:16px;--gutter:max(16px, env(safe-area-inset-left), env(safe-area-inset-right))}@supports (height:1dvh){:root{--board-max:min(560px, 70dvh)}}html.dark{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#14110e;--surface:#1e1914;--surface-2:#28211b;--border:#342a22;--border-strong:#4a3c30;--text:#f1e6d6;--text-muted:#a6927c;--accent:#d98a4e;--accent-hover:#e79c61;--accent-soft:#d98a4e29;--on-accent:#1a120c;--ring:#d98a4e73;--shadow-sm:0 1px 2px #0000004d;--shadow:0 1px 2px #0000004d, 0 8px 24px #00000059;--shadow-board:0 1px 2px #0006, 0 12px 32px #00000080}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;flex-direction:column;min-height:100dvh;font-family:system-ui,-apple-system,Segoe UI,PingFang SC,Hiragino Sans,Noto Sans JP,Noto Sans SC,Microsoft YaHei,sans-serif;font-size:.9375rem;line-height:1.4;display:flex}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.app-header{z-index:50;padding-top:env(safe-area-inset-top);background:color-mix(in srgb, var(--bg) 82%, transparent);border-bottom:1px solid var(--border);-webkit-backdrop-filter:saturate(1.4)blur(12px);backdrop-filter:saturate(1.4)blur(12px);position:sticky;top:0}.header-inner{width:100%;min-height:52px;max-width:calc(var(--board-max) + var(--panel-w) + var(--gap) + var(--gutter) * 2);padding:8px var(--gutter);flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:12px;margin:0 auto;display:flex}.brand{order:1;align-items:center;gap:10px;min-width:0;display:flex}.brand-mark{flex-shrink:0;width:26px;height:20px;position:relative}.brand-mark:before,.brand-mark:after{content:"";border-radius:50%;width:16px;height:16px;position:absolute;top:2px}.brand-mark:before{background:radial-gradient(circle at 35% 30%,#666,#000 70%);left:0}html.dark .brand-mark:before{box-shadow:0 0 0 1px #ffffff2e}.brand-mark:after{box-shadow:0 0 0 1.5px var(--bg), 0 1px 2px #0000004d;background:radial-gradient(circle at 35% 30%,#fff,#cfcfcf 75%);left:9px}.app-header h1{letter-spacing:-.01em;color:var(--text);white-space:nowrap;text-overflow:ellipsis;font-size:1.0625rem;font-weight:700;overflow:hidden}.header-actions{flex-shrink:0;order:3;align-items:center;gap:6px;margin-left:auto;display:flex}.provider-toggle{border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface-2);flex-shrink:0;gap:2px;padding:3px;font-size:.82rem;font-weight:600;display:inline-flex}.provider-toggle a,.provider-toggle>span{min-width:48px;min-height:28px;color:var(--text-muted);border-radius:5px;justify-content:center;align-items:center;padding:0 8px;text-decoration:none;display:inline-flex}.provider-toggle a:hover{background:var(--surface);color:var(--text)}.provider-toggle a[aria-current=page]{background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-sm)}.provider-toggle [aria-disabled=true]{opacity:.5;cursor:not-allowed}.model-status{color:var(--text-muted);white-space:nowrap;flex-wrap:nowrap;flex-shrink:0;order:2;align-items:center;gap:6px;font-size:.75rem;display:flex}.model-status-trigger{min-height:28px;color:inherit;font:inherit;cursor:pointer;white-space:nowrap;background:0 0;border:0;border-radius:5px;flex-shrink:0;align-items:center;gap:6px;padding:3px 6px;display:inline-flex}.model-status-trigger:hover{background:var(--accent-soft)}.model-status-info{color:var(--text-muted)}.model-status-dot{background:var(--accent);border-radius:50%;width:6px;height:6px}#model-status-name{color:var(--text);font-weight:600}.model-status-divider{color:var(--border-strong)}.provider-note{width:100%;color:var(--text-muted);font-size:.72rem}.model-details{inset:auto;top:var(--details-top,80px);left:var(--details-left,16px);border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--surface);width:min(390px,100vw - 32px);max-height:calc(100dvh - 32px);color:var(--text);box-shadow:var(--shadow);z-index:100;margin:0;padding:18px;font-size:.85rem;position:fixed;overflow:auto}.model-details:modal{margin:auto;inset:0}.model-details::backdrop{background:#14110e66}.model-details-heading{justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;display:flex}.model-details h2{font-size:1rem}.model-details dl{grid-template-columns:auto minmax(0,1fr);gap:8px 16px;display:grid}.model-details dt{color:var(--text-muted)}.model-details dd{overflow-wrap:anywhere;font-weight:600}.model-details p{color:var(--text-muted);margin-top:14px;line-height:1.6}.btn{height:var(--control-h);border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;box-shadow:var(--shadow-sm);justify-content:center;align-items:center;gap:6px;padding:0 16px;font-family:inherit;font-size:.9rem;font-weight:500;line-height:1;transition:background .15s,border-color .15s,color .15s,transform .1s;display:inline-flex}.btn:hover{background:var(--surface-2)}.btn:active{transform:scale(.97)}.btn-primary{background:var(--accent);color:var(--on-accent);border-color:#0000;font-weight:600}.btn-primary:hover{background:var(--accent-hover)}.btn-sm{border-color:var(--border);height:34px;box-shadow:none;background:0 0;padding:0 10px;font-size:.82rem}.btn-sm:hover{background:var(--surface);border-color:var(--border-strong)}.btn-icon{flex-shrink:0;width:34px;padding:0;text-decoration:none}.btn-icon svg{fill:currentColor;width:16px;height:16px;display:block}#btn-theme{font-size:.95rem}.button-row{grid-template-columns:1fr 1fr;gap:8px;display:grid}.dropdown{display:inline-flex;position:relative}.dropdown-toggle{gap:6px}.lang-icon{stroke:currentColor;flex-shrink:0;width:16px;height:16px;display:block}.dropdown-chevron{stroke:currentColor;opacity:.6;pointer-events:none;flex-shrink:0;width:9px;height:6px;transition:transform .15s}.dropdown.open .dropdown-chevron{transform:rotate(180deg)}.dropdown-menu{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);min-width:140px;box-shadow:var(--shadow);z-index:100;flex-direction:column;gap:2px;padding:4px;list-style:none;display:none;position:absolute;top:calc(100% + 6px);right:0}.dropdown.open .dropdown-menu{animation:.12s ease-out menu-in;display:flex}@keyframes menu-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}.dropdown-item{border-radius:var(--radius-sm);width:100%;color:var(--text);cursor:pointer;text-align:left;white-space:nowrap;background:0 0;border:none;justify-content:space-between;align-items:center;padding:8px 10px;font-family:inherit;font-size:.85rem;transition:background .12s,color .12s;display:flex}.dropdown-item:hover,.dropdown-item:focus-visible{background:var(--surface-2);outline:none}.dropdown-item.active{color:var(--accent);background:var(--accent-soft);font-weight:600}.dropdown-item .check-mark{opacity:0;color:var(--accent);margin-left:12px;font-size:.75rem}.dropdown-item.active .check-mark{opacity:1}.app-main{grid-template-columns:minmax(0, var(--board-max)) var(--panel-w);place-content:start center;align-items:stretch;gap:var(--gap);width:100%;padding:20px var(--gutter) max(20px, env(safe-area-inset-bottom));flex:1;grid-template-areas:"board panel";display:grid}.board-section{grid-area:board;justify-content:center;align-items:flex-start;min-width:0;display:flex}.board-canvas{border-radius:var(--radius);box-shadow:var(--shadow-board);cursor:crosshair;touch-action:none;aspect-ratio:1;max-width:100%;height:auto;display:block}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);min-width:0;min-height:0;box-shadow:var(--shadow);flex-direction:column;grid-area:panel;gap:14px;padding:14px;display:flex}.status-bar{border-radius:var(--radius-sm);background:var(--accent-soft);justify-content:space-between;align-items:center;gap:10px;min-height:44px;padding:0 14px;display:flex}.status-text{color:var(--accent);text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:.98rem;font-weight:600;overflow:hidden}.thinking{border:2px solid var(--accent);color:#0000;border-right-color:#0000;border-radius:50%;flex-shrink:0;width:16px;height:16px;font-size:0;animation:.7s linear infinite spin;overflow:hidden}@keyframes spin{to{transform:rotate(360deg)}}.settings{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px 12px;display:grid}.control-group{display:contents}.control-group label{color:var(--text-muted);white-space:nowrap;font-size:.8rem;font-weight:500}.select-wrap{min-width:0;position:relative}.select-wrap:after{content:"";border-right:1.5px solid var(--text-muted);border-bottom:1.5px solid var(--text-muted);pointer-events:none;width:6px;height:6px;margin-top:-5px;position:absolute;top:50%;right:12px;transform:rotate(45deg)}.select{appearance:none;width:100%;height:var(--control-h);border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);text-overflow:ellipsis;cursor:pointer;padding:0 32px 0 12px;font-family:inherit;font-size:.9rem;transition:border-color .15s,box-shadow .15s}.select:hover{border-color:var(--text-muted)}.select:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px var(--ring);outline:none}.history-panel{border-top:1px solid var(--border);flex-direction:column;flex:auto;gap:8px;min-height:0;padding-top:14px;display:flex}.history-title{color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;font-size:.72rem;font-weight:600}.history-list{font-variant-numeric:tabular-nums;color:var(--text-muted);overscroll-behavior:contain;scrollbar-width:thin;flex:auto;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));grid-auto-rows:max-content;align-content:start;gap:4px;height:0;min-height:96px;font-size:.78rem;list-style:none;display:grid;overflow-y:auto}.history-list:empty:before{content:"—";color:var(--border-strong)}.history-list li{background:var(--surface-2);white-space:nowrap;text-overflow:ellipsis;border-radius:6px;padding:4px 8px;overflow:hidden}.history-list li:last-child{background:var(--accent-soft);color:var(--accent);font-weight:600}@media (height<=520px) and (orientation:landscape){.header-inner{min-height:44px}.app-main{padding-top:12px;padding-bottom:max(12px, env(safe-area-inset-bottom));gap:12px}.panel{gap:10px;padding:10px}.status-bar{min-height:38px}.history-panel{padding-top:10px}.history-list{min-height:48px}}@media (width<=719px),(orientation:portrait) and (width<=1024px){:root{--gutter:max(12px, env(safe-area-inset-left), env(safe-area-inset-right));--control-h:44px}.header-inner{min-height:48px;max-width:calc(560px + var(--gutter) * 2);gap:8px}.model-status-dot,#model-status-name,.model-status-divider,#model-status-strength{display:none}.model-status-trigger{border-radius:var(--radius-sm);justify-content:center;width:28px;height:28px;min-height:28px;padding:0}.model-status-info{font-size:.95rem;line-height:1}.app-main{max-width:calc(560px + var(--gutter) * 2);grid-template-columns:minmax(0,1fr);grid-template-areas:"status""board""actions""settings""history";gap:12px;margin:0 auto;padding-top:12px}.panel{display:contents}.status-bar{grid-area:status}.board-section{width:100%}.button-row{grid-area:actions}.settings{grid-area:settings;grid-template-columns:1fr 1fr;gap:10px}.control-group{flex-direction:column;gap:4px;min-width:0;display:flex}.control-group label{padding-left:2px;font-size:.75rem}.select{font-size:1rem}.btn:not(.btn-sm){font-size:.95rem}.history-panel{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-sm);grid-area:history;padding:12px}.history-list{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));height:auto;min-height:0;max-height:7.5rem}}@media (width<=479px){#btn-lang-text{display:none}.brand{gap:7px}}@media (width<=359px){.model-status,.brand-mark{display:none}.app-header h1{font-size:1rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}.thinking{animation-duration:1.6s!important}}
