:root{--ink:#202b29;--dim:#74807d;--line:#e6ebe7;--panel:#fff;--accent:#267954;--accentDark:#196346;--soft:#edf6f0;--paper:#f6f8f5;--gold:#e4b76b;--shadow:0 18px 50px rgba(33,51,41,.047)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--paper);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;font-size:14px;line-height:1.55}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}a{color:inherit;text-decoration:none}.topbar{height:77px;background:#fff;border-bottom:1px solid #e8eee8}.topbar-inner{max-width:1230px;margin:auto;height:100%;padding:0 24px;display:flex;align-items:center;gap:85px}.brand{display:flex;align-items:center;gap:10px}.brand>span{display:grid;line-height:1}.brand strong{font-size:23px;letter-spacing:-1.5px}.accent{color:var(--accent)}.brand small{font-size:8px;letter-spacing:2.6px;font-weight:700;margin-top:6px;color:#799287}.topbar nav{display:flex;gap:31px;align-self:stretch;align-items:center;color:#717f77;font-size:13px}.topbar nav a{height:100%;display:flex;align-items:center;border-bottom:2px solid transparent}.topbar nav a.active{border-color:var(--accent);color:var(--accent);font-weight:700}.topbar nav a:hover{color:var(--accent)}.top-badge{margin-left:auto;color:#5a7364;background:#ecf6ee;border-radius:24px;padding:8px 14px;font-size:11px;white-space:nowrap}.live-dot{display:inline-block;background:#56a974;width:7px;height:7px;border-radius:50%;margin-right:5px}main{max-width:1230px;margin:0 auto;padding:0 24px}.intro{text-align:center;padding:52px 0 39px}.eyebrow{font-weight:800;font-size:11px;color:var(--accent);letter-spacing:3px}.pixel-mark{margin-right:7px;font-size:12px}.intro h1{margin:10px 0 11px;font-size:clamp(30px,4vw,43px);letter-spacing:-1.8px;line-height:1.3}.intro h1 span{color:var(--accent)}.intro p{color:var(--dim);max-width:720px;margin:0 auto;line-height:1.85;font-size:13px}.workspace{display:grid;grid-template-columns:450px minmax(0,1fr);gap:22px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}.create-panel{padding:25px 26px 21px}.section-title{display:flex;align-items:center;gap:13px}.step{width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-weight:850;color:var(--accent);border-radius:10px;background:#e7f4ea;font-size:12px}.section-title h2{font-size:16px;line-height:1.25;letter-spacing:-.4px;margin:0}.section-title p{color:#97a39c;font-size:11px;margin:4px 0 0}.dropzone{margin-top:23px;width:100%;height:232px;border:2px dashed #c9dbc9;border-radius:12px;background:#f9fcf9;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;outline:none;overflow:hidden;transition:.18s}.dropzone:hover,.dropzone.is-dragover{border-color:#479774;background:#f0f8f1}.dropzone:focus-visible{outline:3px solid #badbc5}.dropzone #emptyUpload{display:grid;justify-items:center;gap:4px}.upload-symbol{color:var(--accent);font-size:36px;background:#e5f3e8;width:58px;height:58px;border-radius:14px;text-align:center;line-height:55px;margin-bottom:6px;font-weight:200}.dropzone strong{font-size:13px}.dropzone span{color:#8d9c93;font-size:12px}.dropzone small{color:#adb9b0;font-size:10px;margin-top:9px}#uploaded{height:100%;width:100%;position:relative}#uploaded img{width:100%;height:100%;object-fit:contain}.change-upload{position:absolute;bottom:0;left:0;right:0;background:#172d2bc2;color:#fff;text-align:center;padding:6px;font-size:12px}.setting-heading{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:700;margin:23px 0 12px}.setting-hint{color:#a1aaa4;font-size:10px;font-weight:500}.mode-grid{display:grid;gap:9px}.mode-card{cursor:pointer;border:1px solid var(--line);border-radius:10px;display:flex;padding:12px 13px;align-items:center;gap:8px;justify-content:space-between}.mode-card:has(input:checked){border-color:#5baf83;background:#f6fbf7;box-shadow:0 0 0 1px #9dd9b4}.mode-card input,.variant-option input{position:absolute;opacity:0;width:1px;height:1px}.mode-card>span:nth-child(2){display:grid;gap:2px}.mode-card strong{font-size:12px}.mode-card small{font-size:10px;color:#99a49c}.mode-check{width:16px;height:16px;border-radius:50%;border:1.5px solid #c7cec9;flex-shrink:0}.mode-card:has(input:checked) .mode-check{border:5px solid var(--accent)}.mode-card:has(input:disabled){opacity:.53;cursor:not-allowed}.variants{display:grid;grid-template-columns:1fr 1fr;gap:9px}.variant-option{border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;gap:12px;padding:13px;cursor:pointer}.variant-option:has(input:checked){border-color:#5baf83;background:#f6fbf7;box-shadow:0 0 0 1px #9dd9b4}.variant-figure{font-size:25px;color:#68937c}.variant-option strong,.variant-option small{display:block}.variant-option strong{font-size:12px}.variant-option small{font-size:10px;color:#9aa59c}.primary-button{width:100%;border:0;background:var(--accent);height:45px;margin-top:23px;color:white;display:flex;align-items:center;justify-content:center;gap:13px;border-radius:9px;font-size:13px;font-weight:750;transition:.2s}.primary-button:not(:disabled):hover{background:var(--accentDark)}.primary-button span:last-child{margin-left:auto;margin-right:17px}.primary-button span:first-child{margin-left:auto;margin-right:-15px}.status{min-height:29px;padding:9px 0 0;color:#6f8578;font-size:11px}.status.error{color:#bd5549}.privacy{border-top:1px solid #edf0ed;margin:12px 0 0;padding-top:13px;font-size:10px;color:#a1aca4}.privacy span{font-weight:900;margin-right:5px;color:var(--accent)}.token-wrap{background:#f7faf8;padding:12px;margin-top:10px;border-radius:10px;display:grid;gap:6px}.token-wrap label{font-weight:700;font-size:11px}.token-wrap input{width:100%;padding:9px;border:1px solid #d5ddd5;border-radius:7px;outline:none}.token-wrap small{color:#9aa59c;font-size:10px}.preview-panel{padding:25px}.preview-heading{display:flex;justify-content:space-between;align-items:center;gap:8px}.preview-pill{background:#f0f2ef;color:#89978f;padding:7px 10px;border-radius:20px;white-space:nowrap;font-size:10px}.preview-pill.ready{background:#e3f5e9;color:var(--accent)}.viewer-shell{height:468px;background:linear-gradient(155deg,#eef4ed 0%,#e3ede5 100%);margin-top:24px;border-radius:12px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.viewer-shell:before{content:"";position:absolute;inset:0;opacity:.45;background-image:linear-gradient(#dce8db 1px,transparent 1px),linear-gradient(90deg,#dce8db 1px,transparent 1px);background-size:30px 30px;pointer-events:none}.viewer-shell canvas{position:relative;z-index:1;width:100%;height:100%;outline:none}.viewer-decoration{position:absolute;pointer-events:none;border:1px solid #c3d8c6;transform:rotate(45deg)}.d1{width:250px;height:250px;top:90px;left:calc(50% - 125px)}.d2{width:330px;height:330px;top:50px;left:calc(50% - 165px)}.viewer-empty{position:absolute;z-index:2;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;pointer-events:none}.viewer-empty strong{font-size:14px;margin-top:15px}.viewer-empty span:last-child{font-size:11px;color:#96aa99}.block-mascot{height:138px;width:112px;position:relative;filter:drop-shadow(12px 12px 0 #c7dac8)}.block-mascot .face{background:#82b293;width:88px;height:84px;position:absolute;top:0;left:12px;border-radius:7px 7px 2px 2px}.block-mascot .face span{width:12px;height:13px;background:#244436;position:absolute;top:31px;left:18px}.block-mascot .face span+span{left:59px}.body-block{background:#437c62;position:absolute;top:89px;height:49px;left:0;width:112px;border-radius:4px}.viewer-credit{position:absolute;right:17px;bottom:13px;z-index:2;color:#91a796;font-size:9px;letter-spacing:1.5px;pointer-events:none}.viewer-actions{display:flex;gap:9px;margin:14px 0 21px;flex-wrap:wrap}.small-button{background:#fff;border:1px solid #e4eae5;border-radius:7px;padding:9px 14px;font-size:11px;color:#566a59}.small-button:not(:disabled):hover{border-color:#96bbaa;color:var(--accent)}.download-box{border-radius:11px;background:#f7faf7;border:1px solid #e5eee6;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:17px 16px}.download-box strong,.download-box span{display:block}.download-box strong{font-size:12px}.download-box span{font-size:10px;color:#93a194;margin-top:5px}.download-button{border:none;background:#dcefe2;color:#19714b;font-weight:800;border-radius:8px;font-size:11px;padding:12px 13px;white-space:nowrap}.editor-panel{margin-top:22px;padding:24px 26px}.editor-top{display:flex;align-items:center;justify-content:space-between;gap:15px}.editor-tag{font-size:11px;background:#f2f5f2;color:#6d8174;border-radius:20px;padding:7px 12px}.editor-layout{display:grid;grid-template-columns:minmax(0,620px) minmax(230px,1fr);gap:30px;margin-top:23px}.texture-card{min-width:0;position:relative}.texture-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.texture-header strong{font-size:12px}.texture-header small{font-size:10px;color:#9ba79e}.texture-card canvas{width:min(100%,512px);height:auto;aspect-ratio:1;display:block;image-rendering:pixelated;cursor:crosshair;background:repeating-conic-gradient(#ecf0ec 0 25%,#fcfffc 0 50%) 50%/16px 16px;border:1px solid #e7eae7;border-radius:6px;touch-action:none}.texture-placeholder{position:absolute;left:5px;right:0;top:55%;font-size:12px;color:#a8b3aa;text-align:center;pointer-events:none}.tools-card{padding:4px 0}.tools-card h3{margin:0 0 21px;font-size:14px}.tool-label{display:block;color:#819084;font-size:11px;margin-bottom:8px}.color-box{border:1px solid #e5eae5;padding:9px 12px;border-radius:10px;display:flex;align-items:center;gap:12px;width:max-content;min-width:205px}.color-box input{border:0;background:none;width:40px;height:36px;padding:0;cursor:pointer}.color-box span{font-size:12px;letter-spacing:.5px;font-weight:700}.tool-toggle{display:flex;gap:8px;margin-top:16px}.tool-toggle button,.outline-button{background:#fff;border:1px solid var(--line);border-radius:8px;padding:11px 16px;font-size:12px;color:#647368}.tool-toggle .tool-active{background:#e5f3eb;border-color:#b7d7c6;color:var(--accent);font-weight:800}.outline-button{display:block;width:100%;text-align:left;margin-top:10px}.outline-button:hover:not(:disabled){border-color:#8fb6a0}.editor-note{background:#f6f9f6;padding:16px;margin-top:24px;border-radius:10px;color:#819185;font-size:11px}.editor-note strong{color:#587660}.editor-note p{margin:6px 0 0;line-height:1.8}.how{padding:51px 0 58px}.how h2{text-align:center;font-size:22px;letter-spacing:-.6px;margin:0 0 24px}.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.how-grid>div{background:#fff;border:1px solid var(--line);border-radius:13px;padding:23px}.how-grid span{color:#77a083;display:block;font-size:10px;font-weight:700;margin-bottom:8px}.how-grid strong{font-size:14px}.how-grid p{font-size:11px;color:#919e93;line-height:1.8;margin-bottom:0}footer{border-top:1px solid #e4eae4;max-width:1230px;margin:0 auto;padding:21px 24px 26px;display:flex;justify-content:space-between;gap:18px;align-items:center;font-size:10px;color:#8d9b8f}footer strong{font-size:15px;color:#293e30}footer span{margin-left:13px}footer a{text-decoration:underline;text-decoration-color:#c9d6cc;text-underline-offset:3px}@media(max-width:1000px){.workspace{grid-template-columns:minmax(315px,1fr) minmax(0,1.15fr)}.topbar-inner{gap:30px}.viewer-shell{height:410px}}@media(max-width:780px){.topbar-inner{gap:20px}.topbar nav a:nth-child(3),.top-badge{display:none}.workspace,.editor-layout,.how-grid{grid-template-columns:1fr}.viewer-shell{height:430px}.editor-panel{padding:20px}.intro{padding:38px 0}.editor-tag{display:none}}@media(max-width:520px){main{padding:0 13px}.topbar-inner{padding:0 13px}.topbar nav{gap:15px}.create-panel,.preview-panel{padding:17px}.intro h1{font-size:30px;letter-spacing:-1px}.intro p{font-size:12px}.workspace{gap:13px}.viewer-shell{height:380px}.viewer-actions{gap:5px}.small-button{padding:8px 11px}.download-box{padding:12px}.how{padding:35px 0}footer{display:block;padding:20px 13px}footer>div+div{margin-top:12px}}[hidden]{display:none!important}
.viewer-actions .tool-active{border-color:#72b78f;color:#18764d;background:#ebf7ed}

/* Morois original Pixel Workbench theme — CSS-generated tiles, no copied game textures. */
:root{--ink:#242321;--dim:#999d96;--line:#272623;--panel:#c7c7c7;--accent:#267b2c;--accentDark:#175a20;--soft:#dde5d9;--paper:#2e1d13;--shadow:5px 5px 0 #110e0c;}
body{color:#f8f3e8;background-color:var(--paper);background-image:linear-gradient(45deg,rgba(0,0,0,.115) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.115) 75%),linear-gradient(45deg,rgba(0,0,0,.115) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.115) 75%);background-size:26px 26px;background-position:0 0,13px 13px;}
.topbar{background:#1b1b1a;border-bottom:4px solid #090909;}
.topbar nav{color:#dedbd2;}
.topbar nav a.active{color:#75ed5f;border-bottom-color:#75ed5f;}
.brand strong{color:#f5f5e9;letter-spacing:.07em;}
.brand .accent,.eyebrow,.intro h1 span{color:#57e748;}
.brand small{color:#61cb56;}
.top-badge{background:#30332d;color:#a8e59a;border:1px solid #515b46;border-radius:0;}
.intro h1{color:#f7f5ee;letter-spacing:.02em;text-transform:none;font-weight:900;text-shadow:3px 3px 0 #16110e;}
.intro p{color:#d0bfae;}
.panel{color:#232320;border:3px solid #202020;border-radius:1px;box-shadow:var(--shadow);}
.create-panel,.preview-panel,.editor-panel{background:#c5c5c5;}
.section-title h2{color:#1e1e1c;font-weight:900;}
.step{background:#2d602c;color:#e9f6da;border-radius:0;border:2px solid #1a3918;}
.dropzone{border:3px dashed #797979;border-radius:0;background:#969696;}
.dropzone:hover,.dropzone.is-dragover{background:#b4c5ae;border-color:#24652a;}
.dropzone span,.dropzone small{color:#e9e9e9;}
.upload-symbol{background:#424242;color:#69e154;border:2px solid #151515;border-radius:0;}
.mode-card,.variant-option{border:2px solid #5e5e5e;border-radius:0;background:#acacac;}
.mode-card:has(input:checked),.variant-option:has(input:checked){background:#bdd4b8;border-color:#145820;box-shadow:2px 2px 0 #22512a;}
.mode-card small,.variant-option small,.setting-hint{color:#5c605a;}
.primary-button{border:3px solid #101c0d;border-radius:0;background:#257d29;box-shadow:2px 3px 0 #111;}
.primary-button:not(:disabled):hover{background:#2e9b32;}
.privacy{color:#6d726d;}
.preview-pill{border-radius:0;}
.viewer-shell{border:3px solid #1b1b1b;border-radius:0;background:linear-gradient(145deg,#232323,#141414);}
.viewer-shell:before{opacity:.18;background-image:linear-gradient(#777 1px,transparent 1px),linear-gradient(90deg,#777 1px,transparent 1px);}
.viewer-decoration{border-color:#454545;}
.viewer-empty strong{color:#dfe8d9;}
.viewer-empty span:last-child{color:#a9b7a9;}
.viewer-credit{color:#6e9b75;}
.small-button,.outline-button,.tool-toggle button{background:#7d7d7d;border:2px solid #303030;color:white;border-radius:0;}
.small-button:not(:disabled):hover,.outline-button:hover:not(:disabled){border-color:#295e28;color:#d8ffd3;}
.download-box{border:2px solid #555;background:#a5a5a5;border-radius:0;}
.download-button{background:#2a8230;color:#fff;border:2px solid #193f1e;border-radius:0;}
.editor-tag{border-radius:0;}
.color-box,.texture-card canvas,.editor-note{border-radius:0;}
.how h2{color:#f6f1e8;}
.how-grid>div{background:#20261f;border:3px solid #111;border-radius:0;color:#f6f6eb;box-shadow:var(--shadow);}
.how-grid span{color:#5bef4c;}
.how-grid p{color:#b4bfb0;}
footer{color:#bdb3a5;border-top-color:#624c37;}
footer strong{color:white;}


/* Minecraft-style original workbench components, scoped to Morois MCSkin. */
.topbar-inner{max-width:1120px;gap:45px;}
.topbar nav{gap:24px;}
main{max-width:1120px;}
.intro{padding:47px 0 30px;}
.intro .eyebrow{color:#57dc54;letter-spacing:1px;text-transform:none;}
.intro h1{font-size:clamp(30px,3.7vw,39px);line-height:1.5;letter-spacing:.04em;margin:12px 0;}
.intro h1 span{display:block;}
.pixel-title{color:#fff!important;text-shadow:3px 3px 0 #14130d, 6px 6px 0 #070707;letter-spacing:.16em;font-family:ui-monospace,"Courier New",monospace;font-weight:900;}
.intro p{max-width:820px;font-size:13px;line-height:1.9;}
.workspace{grid-template-columns:1fr 1fr;gap:23px;align-items:start;}
.create-panel,.preview-panel{padding:20px;border:3px solid #080808;box-shadow:5px 6px 0 #0c0b0a;}
.section-title h2{font-size:15px;}
.section-title p{color:#555!important;}
.source-tabs,.preview-tabs{display:flex;gap:8px;margin:20px 0 17px;}
.source-tabs button,.preview-tabs button{
 flex:1;min-height:43px;padding:8px 12px;text-align:center;cursor:pointer;
 background:#747474;color:#f7f7f7;border:3px solid #181818;border-radius:0;
 font-weight:800;box-shadow:2px 3px 0 #141414;font-size:12px;
}
.source-tabs button.selected,.preview-tabs button.selected{background:#277d2a;color:white;border-color:#101d10;}
.source-tabs button:hover,.preview-tabs button:hover{filter:brightness(1.12);}
.input-heading{font-weight:800;font-size:12px;border-bottom:2px solid #747474;padding:5px 0 11px;display:flex;align-items:center;gap:9px;}
.sub-step{font-size:10px;background:#999;border:1px solid #777;padding:3px 5px;}
.dropzone{margin-top:15px;height:184px;border:3px solid #242424;background:#939393;}
.dropzone:focus-visible,.source-tabs button:focus-visible,.preview-tabs button:focus-visible,.download-button:focus-visible,.primary-button:focus-visible,.history-entry:focus-visible{outline:3px solid #47dd58;outline-offset:2px;}
#textPane{padding-top:14px;min-height:200px;}
#textPane textarea,.appearance-input textarea{
 width:100%;display:block;resize:vertical;background:#303030;color:#f1f1f1;
 font:inherit;font-size:13px;line-height:1.7;border:3px solid #1c1c1c;
 border-radius:0;padding:13px;min-height:102px;
}
#textPane textarea{min-height:164px;}
#textPane textarea::placeholder,.appearance-input textarea::placeholder{color:#b9b9b9;}
#textPane .tool-label{font-weight:700;font-size:11px;color:#323232;}
#textPane>small,.appearance-input small{display:block;color:#616161;font-size:10px;margin:6px 0 0;}
.appearance-input{margin:17px 0 0;}
.appearance-input label{font-size:12px;font-weight:750;margin-bottom:7px;display:block;}
.appearance-input textarea{min-height:86px;}
.mode-card,.variant-option{padding:9px 11px;}
.setting-heading{margin:20px 0 10px;}
.primary-button{margin-top:17px;}
.privacy{margin-top:9px;}
.preview-tabs{margin:20px 0 13px;}
.viewer-shell{margin-top:0;height:390px;box-shadow:4px 4px 0 #565656;}
.viewer-shell:before{background-size:34px 34px;}
.viewer-shell .viewer-empty{color:#edf0e8;}
.viewer-shell .viewer-empty strong{color:#f7f7f7;}
.viewer-shell .viewer-empty span:last-child{color:#adb9a9;}
.viewer-actions{justify-content:center;margin:12px 0;gap:7px;}
.small-button{font-size:11px;}
.download-box{margin-top:15px;box-shadow:2px 2px 0 #424242;}
.download-box strong{color:#202020;}
.texture-thumb-row{margin-top:13px;border:2px solid #3d3d3d;padding:8px;display:flex;align-items:center;gap:12px;font-size:11px;background:#a4a4a4;}
.texture-thumb-row img{height:50px;width:50px;image-rendering:pixelated;border:2px solid #272727;background:#eee;}
.texture-thumb-row span{font-weight:750;flex:1;}
.texture-thumb-row a{color:#1d5b22;text-decoration:underline;text-underline-offset:3px;font-weight:800;}
.history-pane{min-height:430px;padding:16px;background:#999;border:3px solid #282828;}
.history-pane h3{font-size:15px;margin:0 0 5px;}
.history-pane>p{font-size:11px;margin:0 0 13px;color:#4c4c4c;}
#historyList{max-height:360px;overflow:auto;display:grid;gap:8px;margin:0 0 15px;}
.history-entry{display:flex;align-items:center;gap:13px;padding:10px;border:2px solid #222;background:#bababa;text-align:left;cursor:pointer;}
.history-entry:hover{background:#d1decf;}
.history-entry img{width:46px;height:46px;image-rendering:pixelated;}
.history-entry span{font-size:11px;font-weight:600;}
.showcase{padding:60px 0 45px;color:#f3eee7;}
.showcase-heading{max-width:800px;margin-bottom:20px;}
.showcase-heading span{font-weight:750;color:#54e545;font-size:12px;}
.showcase-heading h2{font-size:25px;letter-spacing:.04em;margin:7px 0 8px;}
.showcase-heading p{margin:0;color:#d1c0b3;font-size:12px;}
.demo-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.demo-cards article{background:#252b23;border:3px solid #080808;box-shadow:4px 4px 0 #100e0b;}
.demo-cards .demo-art{height:235px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-bottom:3px solid #080808;}
.demo-cards article>span{display:block;font-size:10px;color:#80dd5b;margin:16px 17px 5px;font-weight:800;}
.demo-cards h3{font-size:16px;color:#b8e3a8;margin:0 17px 9px;}
.demo-cards p{font-size:12px;line-height:1.9;color:#c4c6bb;margin:0 17px 20px;}
.pixel-art-reference{background:repeating-linear-gradient(45deg,#5c6b53 0 18px,#4b5b45 18px 36px);}
.pixel-portrait{width:120px;height:132px;position:relative;background:#2a5a41;border:8px solid #1b2920;box-shadow:15px 13px 0 #293c2c;}
.pixel-portrait:before{content:"";position:absolute;top:0;left:23px;width:55px;height:66px;background:#ebc49f;box-shadow:0 -14px 0 #5e4130;}
.pixel-portrait i,.pixel-portrait b{position:absolute;top:30px;width:10px;height:11px;background:#251a16;z-index:1;}
.pixel-portrait i{left:41px;}.pixel-portrait b{left:75px;}
.pixel-art-panel{background:#c5bbaa;gap:16px;}
.panel-character{width:68px;height:140px;background:linear-gradient(#765039 0 26%,#deb795 26% 42%,#5f7e58 42% 75%,#35373a 75%);box-shadow:-13px 17px 0 -4px #343434,14px 17px 0 -4px #343434;border:5px solid #7b766d;}
.panel-character i,.panel-character b{display:block;width:9px;height:10px;position:relative;top:34px;background:#29221d;}
.panel-character i{left:14px;}.panel-character b{left:38px;top:24px;}
.panel-character.back{filter:brightness(.8);}
.pixel-art-output{background:#243126;position:relative;}
.pixel-art-output img{width:150px;height:150px;image-rendering:pixelated;filter:drop-shadow(8px 8px 0 #111);}
.sample-action{display:flex;align-items:center;gap:20px;margin-top:25px;flex-wrap:wrap;}
.sample-btn{padding:12px 18px;border:3px solid #101010;box-shadow:3px 3px 0 #080808;background:#287b2c;color:white;font-weight:800;cursor:pointer;}
.sample-action span{color:#b8ab9b;font-size:12px;}
.questions{display:grid;grid-template-columns:1fr 1.35fr;gap:24px;background:#c5c5c5;border:3px solid #070707;box-shadow:5px 5px 0 #0e0e0c;color:#1d1d1c;padding:30px;margin:10px 0 25px;}
.questions-heading span{font-size:11px;color:#26782b;font-weight:800;}
.questions-heading h2{font-size:24px;max-width:240px;line-height:1.5;margin:11px 0;}
.questions-list{display:grid;gap:10px;align-content:start;}
.questions details{border:2px solid #4a4a4a;background:#b7b7b7;}
.questions summary{padding:13px;font-weight:800;font-size:12px;cursor:pointer;}
.questions details p{border-top:1px solid #797979;padding:13px;margin:0;font-size:12px;line-height:1.8;}
.how{padding:38px 0 45px;}
.how-grid{gap:20px;}
#editor{scroll-margin-top:90px;}
@media(max-width:950px){.workspace{grid-template-columns:minmax(280px,1fr) minmax(280px,1fr);gap:15px;}.topbar nav{gap:15px;}.viewer-shell{height:340px;}.texture-thumb-row{flex-wrap:wrap;}}
@media(max-width:750px){.workspace,.demo-cards,.questions{grid-template-columns:1fr;}.demo-cards .demo-art{height:210px;}.questions{padding:20px;}.questions-heading h2{max-width:none;}.viewer-shell{height:410px;}.topbar-inner{gap:12px;}.topbar nav a:nth-child(3),.topbar nav a:nth-child(4){display:none;}}
@media(max-width:420px){.source-tabs button,.preview-tabs button{padding:8px 4px;font-size:11px;}.viewer-shell{height:330px;}.intro h1{font-size:26px;}.download-box{flex-wrap:wrap;}.small-button{padding:9px 8px;}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}.primary-button{transition:none;}}