:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:#24322d;background:#f4f5ef;font-synthesis:none;--green:#286c53;--line:#dde3d9;--muted:#7c887d;--ink:#24322d;--soft:#edf2e9}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,select{cursor:pointer}button{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:8px;padding:10px 15px;font-size:13px;transition:background .15s,border-color .15s,transform .15s;white-space:nowrap}button:hover{background:#edf3e9;border-color:#acbda9}button:active{transform:translateY(1px)}button:disabled{opacity:.4;cursor:not-allowed;transform:none}input,select{border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink);padding:9px 11px;font-size:13px;min-width:0}input:focus,select:focus,button:focus-visible,summary:focus-visible{outline:2px solid #76a18b;outline-offset:3px}a{color:inherit;text-decoration:none}.shell{max-width:1400px;margin:auto;padding:0 44px}.topbar{height:91px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:12px;align-items:center;font-size:20px;font-weight:650;letter-spacing:-.6px}.brand-mark{display:grid;grid-template-columns:10px 10px;grid-template-rows:10px 10px;gap:3px;transform:rotate(-5deg)}.brand-mark i{background:#286c53;border-radius:2px}.brand-mark i:nth-child(2){background:#97b48b}.brand-mark i:nth-child(3){background:#c1d0a8}.edition{margin-left:9px;border-left:1px solid #c9d2c4;padding-left:18px;font:10px ui-monospace,monospace;letter-spacing:1.2px;color:var(--muted)}.home{font-size:12px;color:#6b776c}.home span{margin-left:8px}.intro{display:flex;justify-content:space-between;align-items:center;padding:43px 0 30px;gap:24px}.eyebrow{font-size:10px;letter-spacing:2.8px;color:#7b8976;margin:0 0 13px}h1{font-size:clamp(25px,3vw,38px);font-weight:550;letter-spacing:-1.5px;line-height:1.35;margin:0 0 12px}.title-dot{color:var(--green)}.subtitle{font-size:13px;line-height:1.8;color:#768171;margin:0}.local-badge{display:flex;align-items:flex-start;gap:10px;font-size:11px;line-height:1.5;white-space:nowrap}.local-badge small{display:block;color:var(--muted);font-size:10px;margin-top:4px}.live-dot{width:6px;height:6px;border-radius:50%;background:#48845f;margin-top:5px;box-shadow:0 0 0 4px #e8eedf}.input-card,.controls-card{background:#fff;border:1px solid var(--line);border-radius:13px;padding:22px 25px}.section-line{display:flex;justify-content:space-between;align-items:center;font-size:11px;margin-bottom:14px;gap:12px}.section-line label{font:11px ui-monospace,monospace;color:#95a08e;white-space:nowrap}.section-line strong{font-family:-apple-system,sans-serif;font-size:12px;color:var(--ink);margin-left:9px}.section-line>span{color:#8b9586;font-size:10px}.number-row{display:flex;gap:9px}#number{flex:1;font:16px ui-monospace,SFMono-Regular,Menlo,monospace;padding:13px 15px;background:#f8faf5;letter-spacing:.4px}#number.compact{font-size:12px;color:#647560}#base{width:100px}.primary{background:var(--green);border-color:var(--green);color:white}.primary:hover{background:#205a45;border-color:#205a45}.primary span{margin-left:10px;opacity:.65}.browse-row{margin:17px 0 11px;display:flex;align-items:center;justify-content:space-between;gap:16px}.step-field{display:flex;align-items:center;gap:9px}.step-field label{font-size:11px;color:#798674}.step-field input{width:140px;padding:7px 9px;font:12px ui-monospace,monospace}.text-button{border:0;background:transparent;color:var(--green);padding:7px 9px}.presets{display:flex;gap:7px}.presets button{font-size:11px;padding:7px 12px;border-color:#e3e9de}.presets .random{background:#eef4e8;color:#4c6c43;border-color:#dae6d1}.slider-row{display:flex;align-items:center;gap:14px}.icon-button{width:31px;height:31px;padding:0;display:grid;place-items:center;font-size:17px;border-color:#e5eadf}#slider{appearance:none;-webkit-appearance:none;background:#e4ebdf;border:0;padding:0;border-radius:99px;flex:1;height:4px;cursor:pointer}#slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--green);border:3px solid #fff;box-shadow:0 0 0 1px #65866e}#slider::-moz-range-thumb{width:12px;height:12px;background:var(--green);border:2px solid white;border-radius:50%}.slider-caption{display:flex;justify-content:space-between;padding:7px 45px 0;color:#8a9583;font-size:10px}#offset{font-family:ui-monospace,monospace}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 238px;gap:16px;margin:18px 0}.preview-card{border:1px solid #d7dfd2;border-radius:12px;overflow:hidden;background:#fff;align-self:stretch;display:flex;flex-direction:column}.preview-toolbar{display:flex;align-items:center;justify-content:space-between;padding:14px 19px;min-height:58px}.preview-toolbar>div{display:flex;align-items:center;gap:12px}.section-number{font:11px ui-monospace,monospace;color:#96a18e}.preview-toolbar strong,.inspector strong{font-size:12px;font-weight:550}.preview-toolbar select{font-size:10px;border:0;background:#f4f6f0;padding:6px 7px}.state-pill{font-size:9px;color:#64835c;background:#f0f5eb;border-radius:20px;padding:4px 8px}.state-pill.busy{color:#8b7139;background:#fbf4dd}.viewport{background:#111916;overflow:auto;min-height:240px;max-height:620px;display:grid;place-items:center;flex:1;padding:20px;scrollbar-color:#5c7062 #17221b}#canvas{display:block;width:100%;height:auto;image-rendering:pixelated;cursor:crosshair;box-shadow:0 0 0 1px #344237;max-width:none}.viewport.actual{display:block}#canvas.actual{width:auto;height:auto}.preview-footer{display:flex;justify-content:space-between;padding:12px 18px;font:10px ui-monospace,monospace;color:#829078}.inspector{background:#eef1e8;border:1px solid #dce3d4;border-radius:12px;padding:20px;align-self:stretch}.inspector-heading{display:flex;gap:11px;align-items:center;margin-bottom:16px}.inspector select{font-size:10px;width:100%;background:#f9fbf4;border-color:#dce4d3}.loupe-wrap{display:grid;place-items:center;margin:15px 0;background:#172019;padding:9px;border-radius:5px}.loupe-wrap canvas{max-width:100%;height:auto;image-rendering:pixelated}.pixel-heading{display:flex;align-items:center;gap:7px;font-size:10px}.swatch{width:10px;height:10px;border-radius:2px;background:#000;border:1px solid #71816a}#coordinates{margin-left:auto;font:9px ui-monospace,monospace;color:#8a9580}.pixel-details{font:10px ui-monospace,monospace;margin:14px 0}.pixel-details>div{display:flex;justify-content:space-between;padding:7px 0;border-top:1px solid #dce4d4}.pixel-details dt{color:#8a9580}.pixel-details dd{margin:0}.inspector-note{font-size:10px;color:#8a9580;line-height:1.9;margin:16px 0 0}.controls-card{padding:18px 24px}.settings-row{display:flex;gap:25px;justify-content:space-between;align-items:center;margin-bottom:18px}.size-field{display:flex;align-items:center;gap:9px;font-size:11px;color:#8a9580}.size-field input{width:76px;font:11px ui-monospace,monospace;padding:7px 8px}.size-field .text-button{font-size:10px}.order-field{display:flex;align-items:center;gap:10px;font-size:11px;color:#8a9580}.order-field select{font-size:11px;padding:7px 8px}.actions-row{display:flex;justify-content:space-between;gap:14px;border-top:1px solid #edf0e8;padding-top:18px}.imports,.exports{display:flex;gap:7px}.actions-row button{font-size:11px;padding:10px 13px}.status-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px;min-height:16px;color:#8b9683;font-size:10px;line-height:1.6}#status.error{color:#b44b3e}#cancel{font-size:11px;padding:0}.help{margin:22px 0 32px;border-bottom:1px solid var(--line);padding-bottom:22px}.help summary{cursor:pointer;list-style:none;font-size:12px;color:#6a7863;display:flex;justify-content:space-between}.help summary::-webkit-details-marker{display:none}.help[open] summary>span{transform:rotate(45deg)}.help-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;padding-top:20px}.help h2{font-size:12px;font-weight:550}.help p{font-size:11px;line-height:1.9;color:#829076}.footer{display:flex;justify-content:space-between;color:#93a087;font-size:10px;padding:0 0 30px;gap:18px}.footer>span:last-child{font:9px ui-monospace,monospace;letter-spacing:1.4px}.muted{color:#bec7b5;margin:0 7px}dialog{border:1px solid var(--line);border-radius:14px;padding:26px;width:min(420px,calc(100vw - 32px));color:var(--ink);box-shadow:0 24px 90px #1b2f3533}dialog::backdrop{background:#10231666;backdrop-filter:blur(3px)}.dialog-title{display:flex;justify-content:space-between;align-items:center}dialog h2{font-size:20px;font-weight:550}dialog p{font-size:12px;color:#7c887d;line-height:1.8}dialog label{display:block;font-size:12px;margin:20px 0 8px}dialog input{width:100%}dialog small{display:block;font-size:10px;line-height:1.8;color:#8b9683;margin:10px 0 20px}dialog button.primary{width:100%}[hidden]{display:none!important}
@media(min-width:1500px){.intro{padding-top:50px}.viewport{padding:28px}}
@media(max-width:1000px){.shell{padding:0 24px}.workspace{grid-template-columns:minmax(0,1fr) 220px}.settings-row{gap:12px}.actions-row{flex-wrap:wrap}.help-grid{grid-template-columns:repeat(2,1fr)}.inspector{padding:16px}.intro{padding:30px 0 24px}.edition{display:none}}
@media(max-width:700px){.shell{padding:0 16px}.topbar{height:72px}.brand{font-size:18px}.intro{display:block;padding:27px 0 23px}.eyebrow{font-size:9px;margin-bottom:10px}.local-badge{margin-top:18px;align-items:center}.local-badge small{display:inline;margin-left:10px;font-size:10px}.live-dot{margin-top:0}.input-card{padding:17px}.section-line>span{display:none}.number-row{flex-wrap:wrap;gap:7px}#base{width:88px}#number{width:calc(100% - 100px);font-size:13px;padding:12px}#generate{width:100%;margin-top:2px}.browse-row{flex-wrap:wrap;gap:14px;margin-top:16px}.presets{width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.presets button{padding:8px 4px;font-size:10px}.slider-caption{padding:8px 0 0;font-size:9px;gap:10px}.workspace{grid-template-columns:1fr;gap:12px;margin:13px 0}.viewport{padding:12px;min-height:170px;max-height:420px}.preview-toolbar{padding:12px}.preview-footer{padding:12px}.inspector{display:grid;grid-template-columns:110px minmax(0,1fr);column-gap:16px;padding:16px}.inspector-heading{grid-column:2;grid-row:1;margin-bottom:8px}.inspector select{grid-column:2;grid-row:2;align-self:start;width:100%}.loupe-wrap{grid-column:1;grid-row:1/5;margin:0;align-self:center;padding:6px}.loupe-wrap canvas{width:98px}.pixel-heading{grid-column:2;grid-row:3;margin-top:8px}.pixel-details{grid-column:2;grid-row:4;margin:8px 0 0}.pixel-details>div{padding:4px 0}.inspector-note{display:none}.controls-card{padding:17px}.settings-row{flex-wrap:wrap;gap:15px}.size-field{gap:7px;flex-wrap:wrap}.size-field input{width:65px}.order-field{justify-content:space-between;width:100%}.actions-row{gap:10px}.imports,.exports{width:100%;flex-wrap:wrap;gap:7px}.imports button{flex:1}.exports{display:grid;grid-template-columns:1fr 1fr}.exports button{padding:12px 6px}.status-row{font-size:10px}.help{margin:20px 0 24px}.help-grid{grid-template-columns:1fr;gap:8px}.help p{font-size:12px}.footer{flex-direction:column;gap:10px;font-size:9px}h1{letter-spacing:-1px;font-size:27px}.subtitle{font-size:11px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}