@charset "UTF-8";
:root { --paper:#f7f8f2;--surface:#fff;--ink:#293e35;--muted:#889086;--green:#3f6c53;--soft:#eaf0e5;--line:#e5e9de;--peach:#efc3a9;font-family:"Avenir Next","PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none; }
* { box-sizing:border-box; }body { margin:0;min-width:320px; }button,input,textarea,select { font:inherit;color:inherit; }button,a,label,input,textarea,select { -webkit-tap-highlight-color:transparent; }button { cursor:pointer; }button:disabled { opacity:.55;cursor:wait; }a { color:inherit;text-decoration:none; }svg { width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0; }[hidden],.svg-defs { display:none!important; }button:focus-visible,a:focus-visible { outline:3px solid #77a484;outline-offset:4px; }input:focus-visible,textarea:focus-visible,select:focus-visible { outline:2px solid #8ba88b;outline-offset:2px; }
.app-layout { min-height:100vh;display:grid;grid-template-columns:222px minmax(0,1fr); }.sidebar { position:sticky;top:0;height:100vh;display:flex;flex-direction:column;border-right:1px solid var(--line);padding:35px 21px 20px;background:#f0f3e9; }.brand { display:flex;gap:10px;align-items:center;font-size:16px;font-weight:650;white-space:nowrap;letter-spacing:.05em; }.brand small { display:block;font-size:8px;letter-spacing:.13em;color:var(--muted);margin-top:5px;font-weight:500; }.brand-mark { display:grid;place-items:center;background:var(--green);color:#fff;border-radius:13px;width:37px;height:39px;transform:rotate(-6deg); }.brand-mark svg { width:25px;height:25px;stroke-width:1; }
.new-project { display:flex;gap:8px;justify-content:center;align-items:center;min-height:43px;background:var(--green);color:#fff;border:1px solid var(--green);border-radius:9px;margin:36px 0 24px;font-size:12px;box-shadow:0 4px 9px #254a3010; }.new-project svg { width:16px; }.side-nav { display:grid;gap:7px;font-size:12px; }.side-nav a,.side-nav button { display:flex;align-items:center;gap:10px;padding:12px 13px;border:0;border-radius:8px;background:transparent;text-align:left; }.side-nav .active { background:#e1e9d9;color:var(--green);font-weight:600; }.side-nav a span { margin-left:auto;font-size:12px; }.side-nav svg { width:16px;height:16px; }.side-nav a:hover,.side-nav button:hover { background:#e1e9d9; }
.sidebar-process { border-top:1px solid #dde3d5;margin-top:30px;padding-top:25px; }.small-label { font-size:9px;letter-spacing:.11em;color:var(--muted); }.sidebar-process ol { margin:20px 0 0;padding:0;list-style:none;display:grid;gap:21px; }.sidebar-process li { display:flex;gap:12px;align-items:start;font-size:11px; }.sidebar-process i { font:10px Georgia,serif;color:var(--green);border:1px solid #d6dfcf;border-radius:50%;display:grid;place-items:center;width:24px;height:24px; }.sidebar-process small { display:block;font-size:9px;color:var(--muted);margin-top:6px; }.sidebar-note { margin:auto 0 25px;padding:30px 8px 6px;color:#65785f; }.sidebar-note>span { font-size:25px;color:#9cae8d; }.sidebar-note p { font-family:"STKaiti","KaiTi",serif;font-size:15px;line-height:1.9;margin:9px 0 16px; }.sidebar-note small { font-size:7px;letter-spacing:.09em;color:#9aa48e; }.sidebar-bottom { display:flex;align-items:center;gap:9px;border-top:1px solid #dde3d5;padding-top:17px;font-size:10px; }.avatar { width:30px;height:30px;border-radius:50%;background:#e6d7bd;display:grid;place-items:center;font:15px Georgia,serif; }.sidebar-bottom small { display:block;color:var(--muted);font-size:8px;margin-top:5px; }
.workspace { min-width:0; }.workspace-bar { height:76px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 48px;font-size:11px;color:var(--muted); }.workspace-bar i { font-style:normal;margin:0 12px;color:#c0c7b8; }.workspace-bar strong { font-weight:500;color:#566450; }.connection-state { display:flex;align-items:center;gap:7px;font-size:10px;border:1px solid var(--line);border-radius:20px;background:#fafbf6;padding:8px 11px; }.connection-dot { width:5px;height:5px;border-radius:50%;background:#bd9674; }.connection-state.connected .connection-dot { background:var(--green); }
main { max-width:1170px;margin:0 auto;padding:43px 48px 0; }.hero { position:relative;padding-bottom:31px; }.hero-eyebrow { font-size:10px;letter-spacing:.11em;color:var(--green);display:flex;gap:7px;align-items:center; }.hero-eyebrow>span { font-size:19px; }.hero h1 { font-size:38px;line-height:1.45;letter-spacing:-.045em;font-weight:550;margin:14px 0 14px; }.hero h1>span { color:#537a4f;position:relative;white-space:nowrap; }.hero h1>span::after { content:"";position:absolute;bottom:-2px;left:0;width:100%;height:8px;background:#dfe6ca80;border-radius:50%;transform:rotate(-2deg);z-index:-1; }.hero h1 i { font-family:Georgia,serif;font-style:normal;font-size:30px;font-weight:400;color:#a9b68b;margin-left:13px;vertical-align:6px; }.hero p { font-size:11px;line-height:1.9;color:var(--muted);margin:0; }.mobile-break { display:none; }.hero-decoration { position:absolute;right:41px;top:18px;width:160px;height:128px;transform:rotate(-15deg);border:1px dashed #d6ddc9;border-radius:50%; }.hero-decoration span { position:absolute;font-family:Georgia,serif; }.hero-decoration span:nth-child(1) { font-size:64px;left:36px;top:6px;color:#c9a997; }.hero-decoration span:nth-child(2) { font-size:22px;left:128px;top:14px;color:#9fae85; }.hero-decoration span:nth-child(3) { font-size:38px;left:121px;top:74px;color:#8ba085;transform:rotate(22deg); }
.creation-layout { display:grid;grid-template-columns:minmax(0,1fr) 245px;gap:23px;align-items:start; }.creation-card { background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 6px 24px #2b4c3010;padding:25px 26px 18px; }.card-title { display:flex;align-items:center;gap:10px;margin-bottom:27px; }.agent-avatar { display:grid;place-items:center;width:34px;height:34px;border:1px solid #e1e9d9;border-radius:10px;background:#f0f4e9;font-size:21px;color:var(--green);flex-shrink:0; }.card-title h2 { font-size:14px;letter-spacing:.01em;font-weight:600;margin:0; }.card-title p { font-size:9px;color:var(--muted);margin:6px 0 0; }.card-badge { margin-left:auto;font-size:6px;letter-spacing:.1em;color:#a7b09e;white-space:nowrap; }
.field-label { display:block;font-size:11px;font-weight:550;margin:19px 0 9px; }.field-label>span:not(.optional) { color:#ac8a72;margin-left:3px; }.optional { font-size:9px;color:#a1a799;font-weight:400;margin-left:6px; }input[type=text],input:not([type]),textarea { border:1px solid var(--line);background:#fafbf7;border-radius:8px;width:100%;font-size:11px;line-height:1.8;padding:11px 13px; }input::placeholder,textarea::placeholder { color:#a6ad9e; }.material-field { border:1px solid var(--line);border-radius:9px;background:#fafbf7;overflow:hidden; }.material-field:focus-within { outline:2px solid #8ba88b;outline-offset:2px; }textarea { resize:vertical;min-height:138px;max-height:360px;display:block; }textarea:focus-visible { outline:none; }.material-field textarea { border:0;border-radius:0;padding:13px 13px 5px; }.material-actions { display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px; }.attach-button { display:flex;align-items:center;gap:5px;font-size:9px;color:#72826b;cursor:pointer; }.attach-button svg { width:13px;height:13px; }#material-count { font-size:8px;color:#a7ae9e; }.field-help { font-size:8px;line-height:1.7;color:#a0a794;margin:7px 0 0; }.upload-list { display:flex;flex-wrap:wrap;gap:6px;margin-top:8px; }.upload-item { display:flex;align-items:center;gap:6px;max-width:180px;background:var(--soft);border:1px solid var(--line);border-radius:6px;padding:4px;font-size:9px; }.upload-item img { width:24px;height:24px;object-fit:contain;border-radius:3px; }.upload-item>span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.upload-item button { background:none;border:0;color:var(--muted);font-size:14px; }
.preferences { display:flex;justify-content:space-between;gap:16px;border-bottom:1px dashed var(--line);padding-bottom:23px;margin-top:23px; }.preferences fieldset { border:0;padding:0;margin:0;min-width:0; }.preferences legend,.difficulty-label { font-size:10px;margin-bottom:12px; }.palette-options { display:flex;gap:13px; }.palette-options label { display:flex;align-items:center;gap:5px;font-size:9px;color:#7d8875;cursor:pointer;white-space:nowrap; }.palette-options input { position:absolute;opacity:0;width:1px; }.palette { display:block;width:18px;height:18px;border-radius:50%;border:3px solid white;outline:1px solid transparent; }.palette.mint { background:#8aaa89; }.palette.rose { background:#d1a0a7; }.palette.blue { background:#8da5c8; }.palette-options input:checked+.palette { outline-color:#66865a; }.palette-options input:focus-visible+.palette { outline:2px solid var(--green);outline-offset:2px; }.difficulty-label { display:block;margin:0; }select { display:block;border:1px solid var(--line);border-radius:6px;background:#fafbf7;padding:5px 7px;font-size:10px;margin-top:8px;min-width:94px; }
.generate-row { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:21px; }.generate-row>span { display:flex;align-items:center;gap:6px;font-size:9px;color:#8b9580; }.generate-row>span svg { width:13px;height:13px; }.primary-button { display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:41px;padding:10px 20px;border:1px solid var(--green);border-radius:8px;background:var(--green);color:#fff;font-size:11px; }.primary-button svg { width:15px;height:15px; }.primary-button:hover:not(:disabled),.new-project:hover { background:#355d47; }.mode-note { color:#919b85;font-size:8px;line-height:1.8;text-align:right;margin:10px 0 0; }.form-error { color:#ae5249;font-size:11px;line-height:1.8;margin-bottom:0; }
.example-heading { display:flex;justify-content:space-between;font-size:8px;color:#a7af9e;padding:5px 3px 12px; }.example-card { display:block;background:#ebefdf;border:1px solid #e2e7d4;border-radius:13px;padding:0 20px 19px;overflow:hidden; }.example-art { height:183px;position:relative; }.example-orbit { position:absolute;width:160px;height:105px;top:35px;left:10px;border:1px dashed #bccba8;border-radius:50%;transform:rotate(-24deg); }.floating-tile { position:absolute;display:grid;place-items:center;border-radius:12px;width:62px;height:65px;border:1px solid #ffffffb0;box-shadow:0 6px 10px #3c522610;font-size:32px;z-index:1; }.tile-fish { left:17px;top:62px;background:#f7faf2;transform:rotate(-15deg); }.tile-star { left:97px;top:25px;background:#fff8e4;transform:rotate(13deg); }.tile-moon { left:114px;top:111px;width:45px;height:46px;background:#f6f3e6;font-size:24px;transform:rotate(8deg); }.example-spark { position:absolute;left:164px;top:79px;font-size:23px;color:#7b9970; }.example-heart { position:absolute;left:66px;top:139px;font-size:22px;color:#ba9a82; }.example-line { position:absolute;border-top:1px solid #b8c8a3;width:75px;left:59px;top:86px;transform:rotate(-25deg); }.example-tag { font-size:8px;color:#7c9068;border:1px solid #d5dec6;border-radius:4px;padding:4px 6px; }.example-card h3 { font-family:"HanziPen SC","STKaiti","KaiTi",serif;font-size:27px;letter-spacing:-.04em;font-weight:600;margin:17px 0 9px; }.example-card p { font-size:10px;color:#8c967e;line-height:1.9;margin:0 0 16px; }.example-link { border-top:1px solid #dbe1cf;padding-top:13px;display:flex;align-items:center;justify-content:space-between;font-size:9px;color:#60794c; }.example-link svg { width:14px; }.fill-example { display:flex;align-items:center;justify-content:center;gap:7px;width:100%;border:1px dashed #dbe3ce;background:transparent;border-radius:8px;min-height:37px;font-size:10px;color:#728362;margin-top:10px; }.fill-example svg { width:13px; }.fill-example:hover { background:var(--soft); }.delivery-note { margin-top:25px;padding:0 6px;position:relative; }.delivery-note>span { position:absolute;right:7px;top:0;font-size:22px;color:#c4cda8; }.delivery-note h3 { font-size:11px;font-weight:550;margin:0 0 16px; }.delivery-note ul { list-style:none;padding:0;margin:0;display:grid;gap:12px;font-size:9px;color:#8a947e; }.delivery-note li::before { content:"✓";margin-right:8px;color:#7e9670; }.delivery-note p { font-family:"STKaiti","KaiTi",serif;font-size:12px;color:#a0a88e;margin-top:24px; }
.results { margin-top:40px;background:white;border:1px solid var(--line);border-radius:16px;overflow:hidden; }.result-heading { padding:24px 26px;display:flex;align-items:center;justify-content:space-between;gap:15px; }.result-heading h2 { margin:8px 0;font-size:21px;overflow-wrap:anywhere; }.result-heading p { font-size:10px;color:var(--muted);line-height:1.8;margin:0; }.result-heading>.primary-button { flex-shrink:0; }.result-tabs { display:flex;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:0 26px;gap:28px; }.result-tabs button { border:0;border-bottom:2px solid transparent;background:none;padding:16px 0;font-size:11px;color:var(--muted); }.result-tabs button[aria-selected=true] { border-color:var(--green);color:var(--green);font-weight:600; }.result-panel { padding:26px;font-size:12px;line-height:1.9; }.result-panel>p { color:var(--muted);margin-top:0; }.result-panel h3 { font-size:12px;margin:23px 0 12px; }.plan-elements { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px; }.element-card { padding:17px 10px;border:1px solid var(--line);border-radius:10px;text-align:center;background:#fafbf7; }.element-card .emoji { display:block;font-size:28px;margin-bottom:7px; }.element-card img { display:block;width:36px;height:36px;object-fit:contain;margin:0 auto 7px; }.element-card p { font-size:10px;overflow-wrap:anywhere;margin:0; }.plan-quotes { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px; }.quote-card { background:#f2f5eb;border-radius:9px;padding:16px; }.quote-card small { color:var(--muted);font-size:9px; }.quote-card p { white-space:pre-line;font-family:"STKaiti","KaiTi",serif;font-size:15px;line-height:1.8; }.quote-card .source-label { color:#a18c76;font-size:8px; }.secondary-button { border:1px solid var(--line);background:#fafbf7;border-radius:7px;font-size:10px;padding:9px 13px; }#download-plan { margin-top:21px; }.preview-panel { background:#f1f4ec;text-align:center; }.preview-panel>p { font-size:10px; }.preview-panel iframe { display:block;width:min(100%,410px);height:850px;background:#f8f7ef;margin:20px auto 0;border:1px solid #dbe3d3;border-radius:20px; }.config-heading { display:flex;align-items:center;justify-content:space-between;gap:12px; }.config-heading p { color:var(--muted);font-size:10px; }.config-heading button { flex-shrink:0; }pre { background:#f7f9f2;border:1px solid var(--line);border-radius:10px;padding:20px;font-size:10px;line-height:1.8;max-height:500px;overflow:auto; }.busy .primary-button svg { animation:pulse .9s infinite alternate; }
footer { display:flex;align-items:center;justify-content:space-between;gap:15px;padding:27px 0;color:#9ba58f;font-size:8px;letter-spacing:.05em; }footer>span:first-child { font-family:"STKaiti","KaiTi",serif;font-size:11px; }dialog { border:1px solid var(--line);border-radius:18px;padding:30px;width:min(420px,calc(100% - 32px));background:var(--paper);color:var(--ink); }dialog::backdrop { background:#21382b70;backdrop-filter:blur(4px); }dialog h2 { font-family:"STKaiti","KaiTi",serif;font-size:27px;margin:13px 0; }dialog p { font-size:12px;line-height:1.9;color:#7c8973; }.dialog-spark { color:var(--green);font-size:30px; }.close-button { position:absolute;right:14px;top:12px;border:0;background:none;font-size:23px;color:var(--muted); }dialog .primary-button { width:100%;margin-top:15px; }.toast { position:fixed;left:50%;bottom:27px;transform:translateX(-50%);z-index:10;background:var(--ink);color:#fff;padding:12px 20px;border-radius:9px;font-size:11px;max-width:calc(100% - 30px);box-shadow:0 5px 20px #29433222; }
@keyframes pulse { to { opacity:.3;transform:translateX(3px); } }
@media(min-width:1600px) { main { padding-top:60px; }.hero { padding-bottom:40px; }.hero h1 { font-size:45px; }.creation-card { padding:30px 32px 22px; }.creation-layout { grid-template-columns:minmax(0,1fr) 270px;gap:30px; }.card-title { margin-bottom:32px; }textarea { min-height:162px; } }
@media(max-width:1190px) { .app-layout { grid-template-columns:195px minmax(0,1fr); }.sidebar { padding:30px 16px 18px; }.brand { font-size:14px; }.workspace-bar { padding:0 30px; }main { padding:33px 30px 0; }.creation-layout { grid-template-columns:minmax(0,1fr) 205px;gap:17px; }.creation-card { padding:23px 22px 17px; }.card-badge { display:none; }.palette-options { gap:9px; }.palette-options label { font-size:8px;gap:4px; }.palette { width:16px;height:16px; }.difficulty-label { font-size:9px; }.example-card { padding:0 16px 16px; }.example-art { transform:scale(.88);transform-origin:left top;height:166px; }.hero h1 { font-size:35px; }.hero-decoration { right:30px;transform:scale(.8) rotate(-15deg); } }
@media(max-width:1020px) { .app-layout { grid-template-columns:180px minmax(0,1fr); }.brand { font-size:13px;gap:8px; }.brand-mark { width:32px;height:34px; }.brand small { font-size:7px; }.creation-layout { grid-template-columns:minmax(0,1fr); }.inspiration { display:none; }.hero-decoration { right:12px; }.workspace-bar { padding:0 26px; }main { max-width:750px;padding-left:26px;padding-right:26px; }.creation-card { padding:25px; }.palette-options label { font-size:10px; }.palette-options { gap:18px; }.palette { width:19px;height:19px; } }
@media(max-width:700px) { .app-layout { display:block; }.sidebar { position:static;height:64px;border-right:0;border-bottom:1px solid var(--line);padding:0 20px;flex-direction:row;align-items:center;justify-content:space-between; }.brand { font-size:14px; }.brand small { font-size:6px;letter-spacing:.14em; }.brand-mark { width:31px;height:33px; }.new-project { margin:0;min-height:33px;padding:5px 10px;font-size:9px;border-radius:7px; }.new-project svg { width:12px; }.side-nav,.sidebar-process,.sidebar-note,.sidebar-bottom { display:none; }.workspace-bar { height:51px;padding:0 20px;font-size:9px; }.workspace-bar i { margin:0 8px; }.connection-state { font-size:8px;padding:6px 8px;gap:5px; }main { padding:28px 18px 0; }.hero { padding-bottom:25px; }.hero-eyebrow { font-size:9px; }.hero h1 { font-size:32px;line-height:1.4;letter-spacing:-.045em;margin:12px 0; }.hero h1 i { font-size:24px;margin-left:7px; }.hero p { font-size:10px;line-height:1.85; }.mobile-break { display:block; }.hero-decoration { right:3px;top:7px;transform:scale(.47) rotate(-15deg);transform-origin:top right; }.creation-card { border-radius:13px;padding:21px 17px 16px; }.card-title { gap:8px;margin-bottom:23px; }.agent-avatar { width:31px;height:31px;font-size:19px; }.card-title h2 { font-size:12px; }.card-title p { font-size:8px;line-height:1.7;margin-top:5px; }.field-label { font-size:10px; }.optional { font-size:8px; }input:not([type]),textarea { font-size:11px; }.material-field textarea { min-height:150px; }.field-help { font-size:7px; }.preferences { gap:8px;margin-top:20px;padding-bottom:20px; }.palette-options { gap:10px; }.palette-options label { font-size:8px;gap:4px; }.palette { width:16px;height:16px;border-width:2px; }.preferences legend,.difficulty-label { font-size:9px; }.preferences legend { margin-bottom:13px; }select { font-size:9px;min-width:80px;padding:5px;margin-top:8px; }.generate-row { margin-top:18px;gap:5px; }.generate-row>span { font-size:8px;gap:4px; }.primary-button { font-size:10px;min-height:40px;padding:10px 14px;gap:8px; }.mode-note { font-size:7px;margin-top:11px;text-align:left; }.result-heading { padding:20px 17px;align-items:start; }.result-heading h2 { font-size:17px; }.result-heading .primary-button { font-size:9px;padding:7px 10px;min-height:34px; }.result-heading p { font-size:8px; }.small-label { font-size:8px; }.result-tabs { padding:0 17px;gap:25px; }.result-tabs button { font-size:10px;padding:13px 0; }.result-panel { padding:18px 15px; }.result-panel>p { font-size:10px; }.plan-elements { gap:6px; }.element-card { padding:13px 5px; }.element-card .emoji { font-size:24px; }.element-card p { font-size:9px; }.plan-quotes { grid-template-columns:minmax(0,1fr); }.quote-card { padding:12px 15px; }.quote-card p { margin:9px 0;font-size:15px; }.preview-panel { padding:15px 8px; }.preview-panel iframe { border-radius:13px;max-width:100%;height:850px; }.config-heading { align-items:start; }.config-heading p { margin-top:0;font-size:9px; }.config-heading button { font-size:9px; }pre { padding:12px;font-size:8px; }footer { padding:25px 0;font-size:6px;gap:8px; }footer>span:first-child { font-size:10px; } }
@media(max-width:370px) { .hero h1 { font-size:29px; }.palette-options { gap:7px; }.palette-options label { font-size:7px;gap:3px; }.palette { width:14px;height:14px; }.preferences { gap:5px; }.hero-decoration { display:none; }.workspace-bar { padding:0 17px; }.workspace-bar>span { font-size:8px; }.new-project { font-size:8px;padding:5px 8px; }.preferences legend { font-size:8px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important;scroll-behavior:auto!important;transition:none!important; } }