.classic-page{--classic-gold:#ffff00;--classic-orange:#ff981f;background-color:#130f0a}
.classic-page [hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.classic-page .site-header{height:70px;position:relative;z-index:20}.classic-page .nav-wrap{height:70px;min-height:70px;flex-wrap:nowrap}.classic-page .brand img{width:32px;height:38px;object-fit:contain;image-rendering:pixelated}.classic-buy{margin-left:auto;min-height:40px;padding:9px 13px;font-size:19px;gap:8px}.classic-buy img{object-fit:contain;image-rendering:pixelated}.classic-main{width:calc(100% - 120px);max-width:1320px;padding-top:20px;padding-bottom:24px}.classic-layout{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:22px;align-items:start}.portrait-stage{min-width:0}.portrait-frame{padding:14px;aspect-ratio:1;display:grid;place-items:center;background:linear-gradient(#4a3e2f,#33291e);border:2px solid #211b13;box-shadow:inset 0 0 0 2px #897b627a,3px 4px #08060480}.classic-page .portrait-mat{display:block;position:relative;width:100%;height:auto;aspect-ratio:1;max-width:100%;margin:0;transform:none;border:3px solid #17120c;outline:2px solid #897b62;outline-offset:-5px;background:repeating-conic-gradient(#332b21 0 25%,#3c3327 0 50%) 0/24px 24px;box-shadow:none;overflow:hidden}.portrait-mat.circle{border-radius:50%;outline:none}#pixel-canvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}.portrait-tools{margin-top:10px;padding:10px 12px;background:#20190f;border:1px solid #51432c;display:grid;gap:9px}.portrait-tool-row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}.segmented,.history-tools{display:flex;gap:4px}.segmented button,.stone-button{padding:7px 11px;color:#d4bd8d;font:18px/1 var(--pixel);background:#382e1e;border:1px solid #77603b;box-shadow:inset 1px 1px #a78c553d,inset -1px -1px #0008;text-shadow:1px 1px #000;white-space:nowrap}.segmented button.active{border-color:#b29136;color:#ffff00;background:#514023}.segmented button:hover,.stone-button:hover{filter:brightness(1.15)}.stone-button:disabled{opacity:.35;cursor:default}.text-button{border:0;background:none;padding:3px 0;font:16px/1.2 var(--pixel);color:#cfb276;text-decoration:underline;text-underline-offset:3px;text-shadow:1px 1px #000}.text-button:hover{color:#ffff00}.classic-label{font:15px/1 var(--pixel);color:#9b8967;margin-left:auto;white-space:nowrap}.classic-controls{display:flex;flex-direction:column;min-width:0;border:2px solid #211b13;background:#4b453a;border-radius:3px;box-shadow:inset 0 0 0 1px #897b62,2px 3px #08060480}.pixel-tabs{display:flex;justify-content:space-around;gap:3px;height:62px;padding:5px 8px 1px;background:#19140d;border-bottom:2px solid #21190e;flex:none}.pixel-tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;min-width:66px;padding:0 5px 2px;border:0;background:none;color:#c3ab80;font:16px/1 var(--pixel);opacity:.6;text-shadow:1px 1px #000}.pixel-tab:before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:44px;height:35px;background:url('assets/ui/gp-ui-atlas.png') -185px -462px/508px 565px no-repeat;image-rendering:pixelated}.pixel-tab img{position:relative;width:28px;height:28px;object-fit:contain;image-rendering:pixelated;pointer-events:none}.pixel-tab>span{position:relative}.pixel-tab.active{opacity:1;color:#ff981f;transform:translateY(-1px)}.pixel-tab:hover{opacity:1}.pixel-panel{position:relative;min-height:455px;max-height:620px;overflow-y:auto;padding:17px 16px 14px;background:#4b453a url('assets/ui/brown-tile.png') 0/176px 120px repeat;scrollbar-width:thin;scrollbar-color:#94805e #2b2318}.pixel-slots{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;padding-bottom:14px;border-bottom:1px solid #89734b77}.pixel-slots button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;height:57px;padding:5px 1px;border:1px solid transparent;background:none;color:#c9b287;font:13px/1 var(--pixel);text-shadow:1px 1px #000}.pixel-slots button img{width:25px;height:27px;object-fit:contain;image-rendering:pixelated;opacity:.65}.pixel-slots button b{display:grid;place-items:center;width:27px;height:27px;font:27px/1 var(--pixel);font-weight:400;color:#ecdb9c}.pixel-slots button.active{background:#31291c;border-color:#aa8232;color:#ffff00}.pixel-slots button.active img,.pixel-slots button:hover img{opacity:1}.pixel-slots button:hover{color:#ffff00;background:#352b1b}.pixel-section-title{font:27px/1.1 var(--pixel);color:#ff981f;text-shadow:2px 2px #000;margin:17px 0 15px;font-weight:400}.pixel-item-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-content:start}.pixel-item{min-width:0;position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px 3px 8px;border:2px solid #262015;background:#383126;box-shadow:inset 0 0 0 1px #8d7b555c;color:#d2bd8f;font:13px/1.1 var(--pixel);text-align:center;text-shadow:1px 1px #000}.pixel-item canvas{width:64px;height:64px;max-width:100%;object-fit:contain;image-rendering:pixelated;background:#211b12}.pixel-item.active{border-color:#ffff00;color:#ffff00}.pixel-item:hover{background:#51422a}.pixel-item:active{filter:brightness(.85)}.pixel-hint{font:15px/1.4 var(--pixel);color:#b9a581;margin:16px 0 0;text-shadow:1px 1px #000}.pixel-panel label,.pixel-panel legend{font:19px/1.1 var(--pixel);color:#dfc799;text-shadow:1px 1px #000}.pixel-panel>label{display:block;margin:19px 0 8px}.pixel-panel input:not([type=checkbox]):not([type=range]),.pixel-panel select,.pixel-panel textarea{width:100%;border:2px solid #786341;background:#231b10;color:#e4d0a6;padding:8px 9px;box-shadow:inset 2px 2px #0006;border-radius:0;font:19px/1.2 var(--pixel)}.pixel-panel textarea{resize:vertical;min-height:70px;max-height:180px}.pixel-panel input::placeholder,.pixel-panel textarea::placeholder{color:#a08b63}.pixel-panel fieldset{padding:0;margin:0 0 20px;border:0}.pixel-panel fieldset legend{margin-bottom:8px;font-size:17px}.face-options{display:flex;flex-wrap:wrap;gap:5px}.face-option{min-width:42px;min-height:34px;padding:6px;color:#cdb586;background:#302719;border:1px solid #8b7046;font:14px/1.1 var(--pixel);text-shadow:1px 1px #000}.face-option.active{outline:2px solid #ffff00;outline-offset:-2px;color:#ffff00}.face-option:hover{filter:brightness(1.2)}.face-option.canvas-choice{width:54px;padding:3px}.face-option canvas{width:46px;height:46px;image-rendering:pixelated;display:block}.face-option.swatch{width:31px;min-width:31px;min-height:31px;height:31px;background:var(--swatch,#746044);box-shadow:inset 1px 1px #fff4,inset -1px -1px #0005}.pixel-panel .pixel-check{display:flex;align-items:center;gap:8px;margin:14px 0;font-size:17px;cursor:pointer}.pixel-check input{width:17px;height:17px;accent-color:#d1a52c;flex:none}.pixel-range-label{display:flex!important;justify-content:space-between;gap:12px}.pixel-range-label output{color:#d6b75f;font-size:17px}.pixel-panel input[type=range]{width:100%;height:22px;accent-color:#d1a52c}.pixel-panel #pixel-center{margin:14px 0 8px}.pixel-reset{display:block;margin:22px 0 0}.pixel-save{padding:13px 16px 10px;border-top:2px solid #21190e;background:#302519}.pixel-save>.button{width:100%;justify-content:center;font-size:23px;min-height:43px;padding:9px 12px;gap:8px}.pixel-save img{object-fit:contain;image-rendering:pixelated}#pixel-status{min-height:28px;margin:10px 0 0;color:#bda780;font:14px/1.25 var(--pixel);text-align:center;text-shadow:1px 1px #000}.classic-foot{display:flex;justify-content:space-between;align-items:start;gap:15px;margin-top:17px;font:13px/1.4 var(--pixel);color:#8f7d5e}.classic-foot a{color:#baa276;white-space:nowrap}.classic-foot span{text-align:center}.classic-page button:focus-visible,.classic-page a:focus-visible,.classic-page input:focus-visible,.classic-page textarea:focus-visible,.classic-page select:focus-visible{outline:2px solid #ffff00;outline-offset:3px}
@media(max-width:1100px){.classic-main{width:calc(100% - 48px)}.classic-layout{grid-template-columns:minmax(0,1fr) 380px;gap:16px}.pixel-panel{padding-inline:12px}.pixel-item-grid{gap:6px}.classic-page .nav-wrap nav{gap:17px}.classic-page .nav-wrap nav a{font-size:18px}.portrait-frame{padding:10px}.text-button{font-size:14px}.segmented button,.stone-button{font-size:16px;padding:7px 9px}}
@media(max-width:940px){.classic-page .nav-wrap nav{display:none}.classic-page #classic-menu{display:flex}.classic-page #classic-nav.open{position:absolute;top:70px;left:0;right:0;width:100%;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:10px 20px;background:#17120c;border-bottom:2px solid #6b5530;box-shadow:0 6px 12px #0008;z-index:30}.classic-page #classic-nav.open a{padding:10px 8px;font-size:21px}.classic-main{width:calc(100% - 28px)}.classic-layout{grid-template-columns:minmax(0,1fr) 355px;gap:12px}.pixel-slots{gap:1px}.pixel-slots button{font-size:12px}.pixel-item canvas{width:55px;height:55px}.portrait-tools{padding:8px}.portrait-tool-row{flex-wrap:wrap}.history-tools{margin-left:auto}.classic-label{display:none}.pixel-tab{min-width:61px}.classic-foot{font-size:12px}}
@media(max-width:760px){.classic-page .brand>span{display:none}.classic-page .nav-wrap{width:calc(100% - 36px);gap:12px}.classic-buy{font-size:18px;padding:9px 11px}.classic-page #classic-menu{width:30px;padding:4px}.classic-main{width:100%;padding-top:7px}.classic-layout{display:flex;flex-direction:column;gap:12px}.portrait-stage{width:100%}.portrait-frame{width:calc(100% - 36px);max-width:514px;margin:0 auto;padding:7px}.classic-page .portrait-mat{max-width:494px}.portrait-tools{width:calc(100% - 36px);max-width:514px;margin:8px auto 0;padding:8px 9px;gap:8px}.portrait-tool-row{flex-wrap:nowrap;gap:5px}.portrait-tools .text-button{font-size:13px}.segmented button,.stone-button{font-size:15px;padding:6px 8px}.classic-controls{width:100%;border-radius:0}.pixel-tabs{height:56px;padding-top:2px}.pixel-tab{min-width:60px;font-size:14px}.pixel-panel{min-height:360px;max-height:520px;padding:12px 16px}.pixel-slots{gap:3px}.pixel-slots button{font-size:13px;height:52px}.pixel-item-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.pixel-item canvas{width:64px;height:64px}.pixel-save{padding:10px 16px}.pixel-save>.button{min-height:41px;font-size:21px}.classic-foot{margin:14px 18px 0;flex-wrap:wrap;gap:9px}.classic-foot span{order:3;text-align:left;width:100%}.classic-foot a:last-child{margin-left:auto}}
@media(max-width:360px){.classic-page .nav-wrap{width:calc(100% - 28px);gap:8px}.classic-buy{font-size:17px;padding:8px 9px}.portrait-frame,.portrait-tools{width:calc(100% - 24px)}.portrait-tools{padding:7px}.segmented button,.stone-button{font-size:14px;padding:6px}.portrait-tools .text-button{font-size:12px}.pixel-panel{padding-inline:11px}.pixel-slots{gap:1px}.pixel-slots button{font-size:12px}.pixel-item-grid{gap:5px}.pixel-item canvas{width:54px;height:54px}.pixel-item{font-size:12px}.classic-foot{font-size:11px}}

.classic-buy img,.pixel-save img{width:24px;height:24px;margin-block:-2px;flex:none}.pixel-presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:17px}.pixel-presets .stone-button{font-size:15px;padding:6px 8px}#pixel-status a,#export-status a{color:#ffff00;text-decoration:underline}

/* Classic uses its own flat tab bar and portrait toolbar, like the 2D reference. */
.classic-main{max-width:1180px}.pixel-tabs{height:68px;padding:10px 10px 8px;gap:3px;background:#433829}.pixel-tab{flex:1;min-width:0;justify-content:center;padding:6px 4px;background:#20170e;opacity:1;color:#ffe263;font-size:18px}.pixel-tab:before,.pixel-tab img{display:none}.pixel-tab.active{transform:none;background:#ffd329;color:#211700;text-shadow:none;box-shadow:inset 0 0 0 1px #fff38c}.pixel-slots button{border:2px solid #251d12;box-shadow:inset 0 0 0 1px #7d6a46;background:#2d2518}.pixel-slots button.active{outline:1px solid #ffff00;outline-offset:-2px}.pixel-item-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.pixel-item{padding:4px;aspect-ratio:1}.pixel-item canvas{width:56px;height:56px}.pixel-item>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.portrait-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:4px 0;background:none;border:0}.portrait-tool-row{display:contents}.portrait-tools .classic-label{display:none}.portrait-tools .history-tools{margin-left:0}.portrait-tools .text-button{font-size:15px}.portrait-tools .segmented button,.portrait-tools .stone-button{font-size:16px;min-height:40px}.portrait-tools .segmented button.active{color:#1c160d;background:#ffd329;border-color:#ffe066;text-shadow:none}.portrait-tools #pixel-post{flex-basis:100%;text-align:right;font-size:13px}.pixel-panel{min-height:455px}.classic-controls{max-height:calc(100vh - 104px)}.classic-controls .pixel-panel{min-height:0;flex:1;max-height:none;overflow-y:auto}.classic-controls .pixel-save{flex:none}
@media(min-width:761px){.classic-controls{height:calc(100vh - 104px);min-height:610px}.classic-layout{grid-template-columns:minmax(0,1fr) 420px}}
@media(min-width:761px) and (max-width:1050px){.classic-layout{grid-template-columns:minmax(0,1fr) 360px}}
@media(max-width:760px){.classic-main{max-width:none}.classic-controls{max-height:none}.classic-controls .pixel-panel{min-height:330px;max-height:430px}.pixel-tabs{height:60px;padding:7px}.pixel-tab{font-size:17px}.pixel-item-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.pixel-item canvas{max-width:100%;height:auto}.portrait-tools{gap:6px;padding:3px 0}.portrait-tools .segmented button,.portrait-tools .stone-button{font-size:14px;padding:6px;min-height:32px}.portrait-tools .text-button{font-size:14px}.portrait-tools #pixel-post{flex-basis:auto;margin-left:auto;font-size:12px}.pixel-presets .stone-button{font-size:14px}.portrait-tools .history-tools{margin-left:auto}.classic-buy img{width:22px;height:22px}}


@media(max-width:360px){.pixel-tab{font-size:15px}.pixel-tabs{padding-inline:5px}}