:root{--paper:#faf8f4;--ink:#27251f;--muted:#8b877f;--line:#eae6df;--coral:#e8795c;--coral-dark:#d96649;--green:#647f69;--card:#fffefa;--mono:'DM Mono',monospace;--sans:'DM Sans','Noto Sans SC',sans-serif;--shadow:0 12px 40px #3a30200a}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button{color:inherit}.topbar{height:70px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(calc((100vw - 1380px)/2),5vw);background:#fcfaf7}.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:18px;font-weight:800;text-decoration:none;letter-spacing:-.5px}.brand-mark{display:grid;place-items:center;width:33px;height:33px;background:#f6e3d9;border-radius:11px;color:var(--coral);font-size:23px}.brand-en{display:block;font:9px var(--mono);letter-spacing:1.55px;color:#aaa39a;margin-top:2px}.top-meta{display:flex;align-items:center;gap:27px;color:#777168;font-size:12px}.top-meta>a{color:inherit;text-decoration:none}.local-badge{display:flex;align-items:center;gap:7px;background:#f0eee7;padding:8px 12px;border-radius:30px;color:#626a5e}.local-badge i,.live-dot{width:7px;height:7px;background:#7d9a71;border-radius:50%;display:inline-block}.shell{max-width:1380px;margin:auto;padding:55px 38px 0}.intro{display:flex;justify-content:space-between;align-items:center;margin:0 8px 38px}.eyebrow{font:10px var(--mono);letter-spacing:1.25px;color:#99938a;display:flex;align-items:center;gap:9px}.eyebrow>span:first-child{color:var(--coral)}.intro h1{font-size:43px;line-height:1.2;letter-spacing:-2.2px;margin:16px 0 11px;font-weight:700}.intro h1 em,.guide h2 em{font-style:normal;color:var(--coral)}.intro p{font-size:14px;color:#817c74;max-width:620px;line-height:1.85;margin:0}.intro-stamp{width:95px;height:95px;border:1px solid #ebd9c9;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(11deg);color:#ba8a6e}.intro-stamp span{font:9px/1.5 var(--mono);letter-spacing:1px;text-align:center}.intro-stamp b{font-size:17px;color:var(--coral);margin-top:3px}.workspace{display:grid;grid-template-columns:340px minmax(0,1fr);align-items:start;gap:24px}.card{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}.controls{padding:23px 22px 20px}.card-heading{display:flex;align-items:center;gap:12px}.card-heading h2{font-size:16px;margin:0 0 3px;letter-spacing:-.4px}.card-heading p{margin:0;font-size:11px;color:#aaa39a}.step{font:10px var(--mono);color:var(--coral);background:#fbede6;border-radius:8px;padding:7px 6px}.upload-zone{margin-top:19px;width:100%;height:145px;border:1px dashed #e6c4b4;background:#fffaf6;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:.2s}.upload-zone:hover,.upload-zone.dragging{background:#fff2e9;border-color:var(--coral);transform:translateY(-1px)}.upload-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:#f8e4d9;color:var(--coral);font-size:21px;margin-bottom:8px}.upload-zone strong{font-size:12px}.upload-zone>span:nth-of-type(2){font-size:11px;color:#999187;margin-top:3px}.upload-zone small{font-size:9px;color:#b4aea6;margin-top:11px}.file-info{display:flex;align-items:center;gap:9px;margin-top:10px;padding:8px;border:1px solid var(--line);border-radius:9px}.file-info.hidden,.hidden{display:none!important}.file-thumb{width:34px;height:34px;border-radius:6px;background-size:cover;background-position:center}.file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:11px}.icon-button{border:0;background:none;color:#aaa;font-size:18px;cursor:pointer}.divider{height:1px;background:#efebe4;margin:20px 0}.compact{margin-bottom:17px}.field-label{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#777168}.value{color:var(--ink);font:17px var(--mono)}.value small{font:10px var(--sans);color:#89837a;margin-left:4px}input[type=range]{width:100%;height:3px;appearance:none;background:linear-gradient(90deg,var(--coral) 35%,#ebe6df 35%);margin:16px 0 7px;outline:none}input[type=range]::-webkit-slider-thumb{appearance:none;width:14px;height:14px;background:white;border:3px solid var(--coral);border-radius:50%;box-shadow:0 1px 4px #0002;cursor:pointer}.range-ends{display:flex;justify-content:space-between;color:#aaa39a;font:9px var(--mono)}.setting-line{display:flex;justify-content:space-between;align-items:center;margin-top:17px;font-size:11px;color:#777168}.segmented{display:flex;background:#f4f1eb;padding:3px;border-radius:7px}.segmented button{border:0;background:transparent;color:#8f8980;border-radius:5px;padding:6px 8px;font-size:9px;cursor:pointer}.segmented button.active{background:#fff;color:#3e3a34;box-shadow:0 1px 3px #21180d14}.setting-line select{border:1px solid var(--line);border-radius:6px;background:#fffefa;padding:6px 8px;font-size:10px;color:#555}.toggle-row{display:flex;align-items:center;justify-content:space-between;margin-top:17px;cursor:pointer}.toggle-row span{display:flex;flex-direction:column;gap:3px}.toggle-row b{font-weight:500;font-size:11px}.toggle-row small{font-size:9px;color:#a19b92}.toggle-row input{display:none}.switch{width:31px;height:18px;border-radius:20px;background:#e5e1da;position:relative;transition:.2s}.switch:after{content:'';position:absolute;width:12px;height:12px;background:white;border-radius:50%;left:3px;top:3px;box-shadow:0 1px 2px #0002;transition:.2s}.toggle-row input:checked+.switch{background:#809474}.toggle-row input:checked+.switch:after{left:16px}.brand-options{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.brand-choice{background:#fff;border:1px solid var(--line);border-radius:8px;padding:9px 5px 8px;font-size:10px;cursor:pointer;text-align:center}.brand-choice small{display:block;font-size:8px;color:#aaa39a;margin-top:4px}.brand-choice.active{border-color:#df9b80;background:#fff8f3;color:#c66f51}.brand-choice.active small{color:#ca8a72}.tip{display:flex;gap:9px;background:#f7f4ed;border-radius:8px;padding:10px;margin-top:16px}.tip>span{color:#d99069;font-size:14px}.tip p{font-size:9px;color:#89837a;line-height:1.65;margin:0}.preview-head{display:flex;justify-content:space-between;align-items:end;margin:1px 3px 14px}.preview-head h2{font-size:20px;margin:6px 0 0;letter-spacing:-.5px}.preview-head .eyebrow{font-size:9px}.preview-head .eyebrow i{width:3px;height:3px;background:#c7c1b8;border-radius:50%}.view-tools{display:flex;align-items:center;gap:11px;font:10px var(--mono);color:#8c867e}.tool-button{width:27px;height:27px;border:1px solid var(--line);background:#fffefa;border-radius:7px;color:#777;cursor:pointer}.tool-button.active{background:#f9e7de;border-color:#f1caba;color:#ce7456}.tool-separator{height:18px;width:1px;background:var(--line);margin:0 2px}.canvas-card{min-height:410px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background-color:#fffdfa;background-image:radial-gradient(#e9e4dc 0.7px,transparent .7px);background-size:14px 14px}.empty-state{text-align:center;display:flex;flex-direction:column;align-items:center;padding:35px 10px}.empty-art{width:122px;height:112px;position:relative;background:#f7f0e7;border-radius:17px;display:grid;place-items:center;transform:rotate(-5deg);margin-bottom:18px}.sample-pixels{width:68px;height:68px;display:grid;grid-template-columns:repeat(4,1fr);gap:2px;transform:rotate(5deg)}.sample-pixels i{border-radius:2px;background:#f2bc93}.sample-pixels i:nth-child(2),.sample-pixels i:nth-child(5),.sample-pixels i:nth-child(6),.sample-pixels i:nth-child(10),.sample-pixels i:nth-child(11){background:#e48465}.sample-pixels i:nth-child(3),.sample-pixels i:nth-child(7),.sample-pixels i:nth-child(12){background:#edcf87}.sample-pixels i:nth-child(14){background:#9bb29b}.empty-art>span{position:absolute;right:3px;top:-11px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:white;color:#d79271;font:14px var(--mono);box-shadow:0 2px 10px #0001}.empty-state h3{font-size:15px;margin:0 0 6px}.empty-state p{font-size:11px;color:#99938a;margin:0}.text-button{border:0;background:none;color:#cf7558;font-size:10px;font-weight:600;cursor:pointer;padding:0}.text-button span{font-size:14px;margin-left:5px}.empty-state .text-button{margin-top:18px}.canvas-footer{position:absolute;bottom:0;left:0;right:0;height:36px;padding:0 14px;background:#fffefaed;border-top:1px solid #eee9e2;display:flex;align-items:center;justify-content:space-between;font:9px var(--mono);color:#989188}.canvas-footer>span:first-child{display:flex;align-items:center;gap:7px}.live-dot{width:6px;height:6px}.canvas-card canvas{max-width:calc(100% - 52px);max-height:360px;width:auto;height:auto;image-rendering:pixelated;box-shadow:0 4px 24px #44351d13;cursor:crosshair}.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}.stat-card{background:#fffefa;border:1px solid var(--line);border-radius:10px;padding:12px 13px;display:flex;align-items:center;gap:10px}.stat-icon{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:14px}.peach{background:#fae8df;color:#dc886a}.lavender{background:#eeeaf6;color:#9182ba}.mint{background:#e9f0e7;color:#779075}.stat-card div{flex:1;display:flex;flex-direction:column;gap:2px}.stat-card small{font-size:9px;color:#9e988f}.stat-card strong{font:15px var(--mono)}.stat-unit{font-size:9px;color:#a7a198}.palette-card{margin-top:13px;padding:17px 17px 0}.palette-header{display:flex;align-items:center;justify-content:space-between}.palette-header .eyebrow{font-size:8px}.palette-header h3{font-size:14px;margin:5px 0 0}.palette-header h3 span{font:9px var(--mono);color:#aaa39a;margin-left:4px}.palette-header .text-button:disabled,.export-button:disabled{opacity:.4;cursor:not-allowed}.color-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:15px}.palette-empty{color:#aaa39a;font-size:10px;padding:4px 0 14px}.color-chip{display:flex;align-items:center;gap:6px;border:1px solid #eeeae3;border-radius:7px;padding:5px 7px;background:white;min-width:92px;cursor:pointer;text-align:left}.color-chip.selected{border-color:var(--coral);box-shadow:0 0 0 2px #e8795c1a}.swatch{width:19px;height:19px;border:1px solid #00000010;border-radius:5px;flex:none}.chip-code{font:9px var(--mono);color:#605b54;flex:1}.chip-count{font:9px var(--mono);color:#9c958c}.palette-footer{border-top:1px solid #efebe4;margin-top:14px;padding:10px 0;display:flex;justify-content:space-between;color:#a39d94;font-size:9px}.clear-selection{border:0;background:none;color:#cd7557;font-size:9px;cursor:pointer}.export-bar{margin-top:14px;border:1px solid #e9d6c7;border-radius:11px;background:#f8f1e8;display:flex;align-items:center;justify-content:space-between;padding:13px 15px}.export-bar>div{display:flex;flex-direction:column;gap:4px}.export-bar strong{font-size:11px}.export-bar>div span{font-size:9px;color:#91877a}.export-button{border:0;background:var(--coral);border-radius:7px;color:white;padding:9px 11px 9px 13px;display:flex;align-items:center;gap:14px;font-size:10px;cursor:pointer;box-shadow:0 3px 8px #e8795c2b}.export-button:hover:not(:disabled){background:var(--coral-dark);transform:translateY(-1px)}.export-button b{font:14px var(--mono)}.guide{margin:87px 7px 0;border-top:1px solid var(--line);padding:35px 0 45px;display:grid;grid-template-columns:1fr 1.6fr;gap:40px}.guide-title h2{font-size:25px;letter-spacing:-1px;margin:9px 0}.guide-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.guide-steps article>span{font:10px var(--mono);color:#d88a69}.guide-steps h3{font-size:12px;margin:9px 0 6px}.guide-steps p{font-size:10px;line-height:1.8;color:#928c83;margin:0}footer{border-top:1px solid var(--line);height:75px;display:flex;align-items:center;justify-content:space-between;color:#9b958c;font-size:9px}.footer-brand{font-size:14px}.footer-brand .brand-mark{width:26px;height:26px;font-size:18px;border-radius:8px}.footer-brand .brand-en{font-size:7px}.footer-brand>span:last-child{line-height:1}.footer-brand .brand-en{margin-top:3px}footer>span:nth-child(2) b{color:#d98468;margin-left:3px}#patternCanvas.hidden{display:none}
@media(max-width:1000px){.shell{padding:38px 24px 0}.workspace{grid-template-columns:300px minmax(0,1fr);gap:16px}.controls{padding:19px 17px}.canvas-card{min-height:370px}.guide{grid-template-columns:1fr;gap:19px;margin-top:65px}.guide-steps{gap:34px}}@media(max-width:720px){.topbar{height:60px;padding:0 18px}.top-meta{gap:12px}.top-meta>a{display:none}.shell{padding:29px 15px 0}.intro{margin:0 2px 25px}.intro h1{font-size:33px;letter-spacing:-1.6px}.intro p{font-size:12px;max-width:90%}.intro-stamp{width:68px;height:68px;flex:none}.intro-stamp span{font-size:7px}.intro-stamp b{font-size:12px}.workspace{grid-template-columns:1fr;gap:18px}.preview-column{grid-row:1}.controls{grid-row:2}.canvas-card{min-height:350px}.canvas-card canvas{max-height:310px}.stats-row{gap:6px}.stat-card{padding:9px 7px;gap:6px}.stat-icon{width:26px;height:26px}.stat-card small{font-size:8px}.stat-card strong{font-size:12px}.stat-unit{font-size:8px}.guide{margin:54px 2px 0;padding-top:27px}.guide-steps{gap:12px}.guide-steps h3{font-size:10px}.guide-steps p{font-size:9px}footer{height:auto;padding:18px 0;gap:10px;flex-wrap:wrap}footer>span:last-child{width:100%;padding-left:36px}.palette-card{padding:14px 12px 0}.color-chip{min-width:calc(50% - 4px)}.view-tools{gap:6px}}@media(max-width:390px){.intro h1{font-size:28px}.intro-stamp{width:57px;height:57px}.eyebrow{font-size:8px}.guide-steps{grid-template-columns:1fr;gap:17px}.guide-steps article{display:grid;grid-template-columns:25px 1fr;column-gap:8px}.guide-steps article>span{grid-row:span 2}.guide-steps h3{margin:0 0 4px}.segmented button{padding:6px}.stat-icon{display:none}}
.palette-actions{display:flex;align-items:center;gap:14px}.erase-button{border:1px solid var(--line);border-radius:7px;background:#fffefa;color:#777168;width:27px;height:27px;cursor:pointer}.erase-button.active{background:#fbede6;border-color:var(--coral);color:var(--coral-dark)}.brand-options{grid-template-columns:repeat(2,1fr)}.brand-choice{font-size:10px;padding:8px 4px}.status-message{font-size:9px;line-height:1.6;color:#a8664f;margin:8px 0 0;min-height:0}.status-message:empty{display:none}.canvas-card{overflow:auto;padding:35px 25px 48px}.canvas-card canvas{max-width:none;max-height:none;flex:none}.canvas-footer{position:sticky;left:0;right:0;bottom:-48px;min-width:100%;margin:0 -25px -48px;flex:none}#undoEdit:disabled{opacity:.4;cursor:not-allowed}.range-ends{margin-bottom:3px}.setting-line>label{font-size:11px;color:#777168}@media(max-width:720px){.canvas-card{min-height:350px;padding:25px 13px 48px}.canvas-footer{margin-left:-13px;margin-right:-13px;bottom:-48px}.brand-options{grid-template-columns:repeat(3,1fr)}}
/* Scroll the drawing without separating it from its status bar. */
.canvas-card{display:block;padding:0;overflow:hidden;min-height:0}.canvas-scroll{height:465px;overflow:auto;display:grid;align-items:safe center;justify-items:safe center;padding:18px}.canvas-card canvas{max-width:none;max-height:none;margin:auto}.canvas-footer{position:static;width:100%;min-width:0;margin:0;height:38px;font-size:10px;gap:8px}.canvas-footer>span:first-child{min-width:0}.canvas-footer #canvasHint{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.canvas-footer #dimensions{white-space:nowrap}.export-links{display:flex;gap:14px;font-size:12px;margin-top:12px}.export-links a{color:var(--coral-dark)}.toggle-row{position:relative}.toggle-row input{display:block;position:absolute;opacity:0;right:0;width:32px;height:20px;cursor:pointer}.toggle-row input:focus-visible+.switch{outline:2px solid var(--coral)}.field-label[for=mergeRange]{margin-top:17px}#widthRange{background:linear-gradient(90deg,var(--coral) 13%,#ebe6df 13%)}#mergeRange{background:#ebe6df}@media(max-width:720px){.canvas-scroll{height:350px}.preview-column{grid-row:2}.controls{grid-row:1}.canvas-card{padding:0}.canvas-footer{margin:0}}