:root{
  color-scheme:dark;
  --bg:#111318;--panel:#191c23;--muted:#9aa3b2;--text:#f2f4f8;--line:#303642;
  --btn:#232833;--btn2:#2a303c;--ok:#8fe39f;--bad:#ff8c8c;
  --brand:#6C3BAA;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text)}
header{
  position:relative;
  height:145px;
  min-height:145px;
  padding:16px 20px;
  border-bottom:1px solid var(--line);
  overflow:visible;
}
header h1{
  margin:0;
  font-size:23px;
  line-height:1.08;
}
.brandOwner{color:#6C3BAA}
header .sub{
  margin-top:24px;
  max-width:980px;
  color:var(--muted);
  line-height:1.45;
}

.headerTop{
  display:block;
  min-height:25px;
}
.projectTitleBlock{
  position:absolute;
  top:24px;
  left:50%;
  width:min(380px,36vw);
  min-height:86px;
  transform:translateX(-50%);
  display:grid;
  justify-items:center;
  align-content:start;
  gap:4px;
  color:var(--text);
  font-size:13px;
  font-weight:700;
  z-index:20;
}
.projectTitleLabel{line-height:1.2}
.projectTitleBlock input{
  width:100%;
  background:#101319;
  color:var(--text);
  border:1px solid #7a8391;
  border-radius:8px;
  padding:8px 10px;
  text-align:center;
  font:inherit;
  font-weight:650;
}
.projectTitleBlock input:focus{
  outline:2px solid #6C3BAA;
  outline-offset:1px;
}
.projectTitleBlock input[readonly]{
  color:#c4c9d2;
  border-color:#434a57;
  background:#15181e;
  cursor:default;
}
.projectTitleDisplay{
  width:100%;
  min-height:36px;
  padding:7px 11px;
  border:1px solid #434a57;
  border-radius:8px;
  background:#15181e;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  color:#e7eaf0;
}
.projectTitleDisplay[hidden]{display:none !important}
.projectTitleSavedHint{
  padding:2px 6px;
  border:1px solid #3f4652;
  border-radius:999px;
  color:var(--muted);
  font-size:10px;
  font-weight:600;
}
.projectSyncStatus{
  min-height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:5px;
}
.syncChip{
  display:inline-flex;
  align-items:center;
  min-height:20px;
  padding:2px 7px;
  border:1px solid #343b47;
  border-radius:999px;
  background:#11141a;
  color:#aeb7c5;
  font-size:10px;
  font-weight:650;
  white-space:nowrap;
}
.syncChip.pending{color:#e5c985;border-color:#5d5235}
.syncChip.saving{color:#b8d4ff;border-color:#3c536f}
.syncChip.synced{color:#a9dfb4;border-color:#395743}
.syncChip.error{color:#ffb2bb;border-color:#68343b}
.syncChip.ready{color:#c4c9d2}

.accountEntry{
  position:absolute;
  top:16px;
  right:20px;
  width:min(560px,42vw);
  min-height:0;
  display:grid;
  justify-items:end;
  align-content:start;
  gap:7px;
  z-index:40;
}
.accountBenefitTeaser{
  min-height:16px;
  max-width:540px;
  color:#aeb7c5;
  font-size:12px;
  line-height:1.35;
  text-align:right;
}
.accountBenefitTeaser[hidden]{display:none !important}
.accountShell{
  position:relative;
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
}
.accountButtonColumn{
  display:grid;
  justify-items:stretch;
  gap:7px;
}
.accountButton{
  min-width:150px;
  min-height:46px;
  padding:10px 24px;
  border-radius:10px;
  font-size:14px;
  font-weight:800;
}
.accountButton.loggedIn{
  border-color:#6C3BAA;
  background:#2b2533;
}
.logoutInlineButton{
  min-width:150px;
  padding:8px 14px;
  border-radius:10px;
}
.logoutInlineButton[hidden]{display:none !important}
.accountDrawer{
  position:absolute;
  right:calc(100% + 10px);
  top:0;
  width:430px;
  max-width:calc(100vw - 210px);
  background:#111318;
  border:1px solid #68717f;
  border-radius:11px;
  padding:10px;
  box-shadow:0 12px 30px rgba(0,0,0,.34);
  max-height:calc(100vh - 32px);
  overflow:auto;
}
.accountDrawer[hidden]{display:none !important}
.accountDrawerView{display:grid;gap:8px}
.accountDrawerView[hidden]{display:none !important}
.authModeTabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  padding-bottom:2px;
}
.authModeTab{
  padding:7px 9px;
  font-size:12px;
  font-weight:750;
}
.authModeTab.active{
  border-color:#6C3BAA;
  background:#2b2533;
}
.authModePanel{display:grid;gap:8px}
.authModePanel[hidden]{display:none !important}
.accountInlineForm{
  display:grid;
  grid-template-columns:minmax(100px,1fr) minmax(120px,1fr) auto;
  gap:8px;
  align-items:end;
}
.accountInlineForm label{
  display:grid;
  gap:4px;
  color:var(--muted);
  font-size:11px;
}
.accountInlineForm input{
  min-width:0;
  width:100%;
  background:#0d0f13;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px 9px;
  font:inherit;
}
.accountLoginForm{
  display:grid;
  gap:7px;
}
.accountLoginForm > label:not(.rememberLoginLabel){
  display:grid;
  gap:4px;
  color:var(--muted);
  font-size:11px;
}
.accountLoginForm input[type="text"],
.accountLoginForm input[type="password"],
.accountLoginForm input:not([type]){
  min-width:0;
  width:100%;
  background:#0d0f13;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px 9px;
  font:inherit;
}
.rememberLoginLabel{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:11px;
  line-height:1.35;
}
.rememberLoginLabel input{margin:0}
.loginTurnstileShell{min-height:76px}
#loginTurnstile{min-height:65px}
.accountRegisterForm{
  display:grid;
  gap:7px;
}
.accountRegisterForm label{
  display:grid;
  gap:4px;
  color:var(--muted);
  font-size:11px;
}
.accountRegisterForm input[type="text"],
.accountRegisterForm input[type="password"],
.accountRegisterForm input:not([type]){
  min-width:0;
  width:100%;
  background:#0d0f13;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px 9px;
  font:inherit;
}
.authFieldHint{
  color:#8f98a8;
  font-size:10px;
  line-height:1.35;
}
.turnstileShell{
  min-height:76px;
  display:grid;
  align-content:start;
  gap:5px;
  padding-top:2px;
}
#registerTurnstile{min-height:65px}
.recoveryPanel{
  border:1px solid #4d3a63;
  border-radius:9px;
  padding:10px;
  background:#17131d;
}
.recoveryCodeValue{
  padding:11px 9px;
  border:1px solid #6C3BAA;
  border-radius:8px;
  background:#0d0f13;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:15px;
  font-weight:800;
  letter-spacing:.04em;
  text-align:center;
  overflow-wrap:anywhere;
  user-select:all;
}
.recoveryConfirmLabel{
  display:flex;
  gap:8px;
  align-items:flex-start;
  color:var(--muted);
  font-size:11px;
  line-height:1.35;
}
.recoveryConfirmLabel input{margin-top:2px}
.accountSecurityNote{
  color:var(--muted);
  font-size:11px;
  line-height:1.4;
  border-top:1px solid #292e38;
  padding-top:7px;
}
.accountMenu{grid-template-columns:1fr}
.accountMenu button{
  width:100%;
  text-align:left;
  padding:9px 11px;
}
.accountMenu .small{padding:2px 3px 0}

h1{margin:0;font-size:22px}
.sub,.small{color:var(--muted);font-size:13px}
main{display:grid;grid-template-columns:minmax(500px,1fr) minmax(320px,390px);gap:16px;padding:16px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;min-width:0}
.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
button,.filelabel{
  border:1px solid var(--line);background:var(--btn);color:var(--text);
  padding:8px 10px;border-radius:9px;cursor:pointer;font:inherit
}
button:hover,.filelabel:hover{background:var(--btn2)}
input[type=file]{display:none}
.ok{color:var(--ok)} .bad{color:var(--bad)}
hr{border:0;border-top:1px solid var(--line);margin:12px 0}
textarea{
  width:100%;min-height:110px;background:#101319;color:var(--text);border:1px solid var(--line);
  border-radius:8px;padding:8px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px
}

/* Tile strip */
.tileSection{margin:8px 0 14px}
.tileHeader{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:7px}
#tileMenu{
  display:flex;gap:8px;overflow-x:auto;padding:6px 2px 9px;
  border-bottom:1px solid var(--line)
}
.tileCard{
  min-width:76px;border:1px solid var(--line);border-radius:9px;padding:5px;background:#14171d;cursor:pointer;
}
.tileCard.active{outline:2px solid #d7dce7;outline-offset:1px}
.thumbWrap,.checker{
  background-color:#d6d6d6;
  background-image:
    linear-gradient(45deg,#a9a9a9 25%,transparent 25%),
    linear-gradient(-45deg,#a9a9a9 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#a9a9a9 75%),
    linear-gradient(-45deg,transparent 75%,#a9a9a9 75%);
  background-size:12px 12px;
  background-position:0 0,0 6px,6px -6px,-6px 0px;
}
.thumbWrap{
  position:relative;
  width:64px;
  height:64px;
  border-radius:5px;
  overflow:hidden
}
.tileCard.status-done .thumbWrap::after{
  content:'✓';
  position:absolute;
  right:4px;
  bottom:4px;
  width:23px;
  height:23px;
  display:grid;
  place-items:center;
  border:1px solid rgba(190,255,202,.8);
  border-radius:50%;
  background:rgba(20,76,36,.88);
  color:#d9ffe1;
  font-size:15px;
  font-weight:900;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.tileCard canvas{width:64px;height:64px;image-rendering:pixelated;display:block}
.tileName{text-align:center;font-size:11px;margin-top:4px;color:#cbd1db}

/* Working grid */
#gridWrap{
  overflow:auto;
  border:1px solid var(--line);
  border-radius:10px;
  background:#0b0d11;
  padding:10px;
  flex:1 1 auto;
  min-height:420px;
  max-height:none;
}
.workspacePanel{
  display:flex;
  flex-direction:column;
  min-height:0;
}
.workspacePanel .tileSection{flex:0 0 auto}
.workspacePanel > .controls,
.workspacePanel > .projectBar,
.workspacePanel > #status{flex:0 0 auto}

#grid{display:grid;grid-template-columns:repeat(var(--grid-size,32),var(--cell,28px));width:max-content}
.emptyState{
  min-height:390px;
  display:grid;
  place-items:center;
}
.emptyState[hidden]{display:none !important}
.emptyStateInner{
  width:min(92%,480px);
  display:grid;
  gap:8px;
  padding:22px;
  border:1px dashed #3a4250;
  border-radius:12px;
  background:#11141a;
  text-align:center;
  color:#d7dce7;
}
.emptyStateInner > b{font-size:17px}
.emptyStateInner button{
  justify-self:center;
  margin-top:5px;
}
.shortcutWrap{
  position:relative;
  margin-left:auto;
}
.shortcutButton{
  min-height:32px;
  padding:6px 9px;
}
.shortcutPopover{
  position:absolute;
  right:0;
  top:calc(100% + 7px);
  z-index:80;
  width:245px;
  display:grid;
  gap:7px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#111318;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
}
.shortcutPopover[hidden]{display:none !important}
.shortcutPopover span{
  display:block;
  color:var(--muted);
  font-size:11px;
}
kbd{
  display:inline-block;
  min-width:22px;
  padding:2px 5px;
  border:1px solid #49515f;
  border-bottom-width:2px;
  border-radius:5px;
  background:#191d25;
  color:#e6e9ee;
  font:600 10px ui-monospace,SFMono-Regular,Consolas,monospace;
  text-align:center;
}
.cell{
  width:var(--cell,28px);height:var(--cell,28px);border-right:1px solid rgba(0,0,0,.4);
  border-bottom:1px solid rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:calc(var(--cell,28px)*.34);text-shadow:0 1px 2px #0008
}

.cell.colorHighlight{
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.96), inset 0 0 0 5px rgba(0,0,0,.55);
}
.cell.manualHighlight{
  outline:3px solid #FFD54A;
  outline-offset:-4px;
  position:relative;
  z-index:2;
}
.cell.colorHighlight.manualHighlight{
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.96), inset 0 0 0 5px rgba(0,0,0,.55);
  outline:3px solid #FFD54A;
}
.legendRow.clickable{cursor:pointer;border-radius:6px;padding-left:3px;padding-right:3px}
.legendRow.clickable:hover{background:#232833}
.legendRow.selectedColor{
  outline:2px solid rgba(255,255,255,.9);
  outline-offset:-2px;
  background:#2a303c;
}
.projectBar{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px;
  padding-top:10px;border-top:1px solid var(--line)
}

.cell.transparent{
  color:transparent;text-shadow:none;
  background-color:#d6d6d6;
  background-image:
    linear-gradient(45deg,#a9a9a9 25%,transparent 25%),
    linear-gradient(-45deg,#a9a9a9 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#a9a9a9 75%),
    linear-gradient(-45deg,transparent 75%,#a9a9a9 75%);
  background-size:12px 12px;
  background-position:0 0,0 6px,6px -6px,-6px 0px;
}

/* Legend */
.legend{
  display:grid;
  gap:3px;
  max-height:none;
  overflow:visible;
  padding-right:0;
  min-width:0
}
.legendHead,.legendRow{
  display:grid;
  grid-template-columns:26px 24px minmax(0,1fr) 58px 42px 44px;
  gap:4px;
  align-items:center;
  min-width:0
}
.legendHead{
  margin-bottom:4px;
  font-size:10.5px
}
.legendRow{
  border-bottom:1px solid #252a34;
  padding:4px 0;
  font-size:12px;
  min-width:0
}
.legendRow > *{min-width:0}
.legendRow > span:nth-child(3){
  overflow-wrap:anywhere;
  word-break:break-word;
  line-height:1.18
}
.sw{width:22px;height:22px;border-radius:5px;border:1px solid #ffffff33}
.hex{
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:10px;
  color:var(--muted);
  white-space:nowrap
}
.sep{
  margin:8px 0 4px;padding:7px 4px;border-top:2px solid #4a5261;color:#c7ceda;
  font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase
}
.badge{display:inline-block;padding:2px 6px;border:1px solid var(--line);border-radius:999px;font-size:11px;color:#c9d0da}

/* Recipe section */
.recipePanel{margin:0 16px 18px}
.recipeHeader{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.recipeControls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.recipeControls select{
  background:#101319;color:var(--text);border:1px solid var(--line);border-radius:8px;padding:7px 8px
}
#recipeGrid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:10px;margin-top:12px
}
.recipeCard{
  border:1px solid var(--line);border-radius:10px;background:#14171d;padding:10px
}
.recipeTop{
  display:grid;grid-template-columns:34px 28px 1fr auto;gap:8px;align-items:center;margin-bottom:8px
}
.recipeSwatch{width:26px;height:26px;border:1px solid #ffffff33;border-radius:5px}
.recipeMix{font-size:13px;line-height:1.45;margin:5px 0}
.recipeMeta{font-size:12px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap}
.recipeResult{display:inline-flex;gap:5px;align-items:center}
.recipeResultSwatch{width:14px;height:14px;border:1px solid #ffffff33;border-radius:3px}
.recipeExact{color:var(--ok);font-weight:700}
.recipeApprox{color:#ffd38a;font-weight:700}


.paletteSafety,.pixelArtPanel{
  border:1px solid var(--line);
  border-radius:10px;
  background:#14171d;
  padding:10px;
  margin:10px 0;
}
.paletteSafety .controls,.pixelArtPanel .controls{margin:7px 0 0}
.paletteSafety select,.pixelArtPanel select,
.pixelArtPanel input[type=number]{
  background:#101319;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:8px;
  padding:7px 8px;
}
.pixelArtPanel input[type=number]{width:86px}


.workAreaToggle.activeMode{outline:2px solid #d7dce7;outline-offset:1px}
.previewModal{
  position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.82);
  display:none;align-items:center;justify-content:center;padding:24px
}
.previewModal.open{display:flex}
.previewBox{
  width:min(94vw,1200px);max-height:92vh;background:#111318;border:1px solid var(--line);
  border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px
}
.previewHead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.previewImageWrap{
  overflow:auto;max-height:80vh;border:1px solid var(--line);border-radius:10px;text-align:center;
  background-color:#d6d6d6;
  background-image:
    linear-gradient(45deg,#a9a9a9 25%,transparent 25%),
    linear-gradient(-45deg,#a9a9a9 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#a9a9a9 75%),
    linear-gradient(-45deg,transparent 75%,#a9a9a9 75%);
  background-size:16px 16px;
  background-position:0 0,0 8px,8px -8px,-8px 0px
}
#previewImage{max-width:100%;height:auto;image-rendering:pixelated;display:inline-block;vertical-align:top}

.projectsBox{width:min(95vw,980px)}
.projectBrowserControls{
  display:grid;
  grid-template-columns:minmax(180px,1fr) minmax(150px,210px);
  gap:10px;
  align-items:end;
}
.projectSearchLabel,.projectSortLabel{
  display:grid;
  gap:5px;
}
.projectSearchLabel input,.projectSortLabel select{
  width:100%;
  background:#101319;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px 9px;
}
.projectNameLine{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
}
.currentProjectBadge{
  flex:0 0 auto;
  padding:2px 6px;
  border:1px solid #6C3BAA;
  border-radius:999px;
  color:#c8a8e6;
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.projectProgressBlock{
  display:grid;
  gap:4px;
  margin-top:4px;
}
.projectProgressLine{
  display:flex;
  justify-content:space-between;
  gap:8px;
  color:var(--muted);
  font-size:10px;
}
.projectProgressTrack{
  height:6px;
  overflow:hidden;
  border:1px solid #343a46;
  border-radius:999px;
  background:#0c0f14;
}
.projectProgressFill{
  height:100%;
  width:0;
  background:currentColor;
  color:#7d8797;
}.projectsList{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  gap:12px;
  overflow:auto;
  padding:2px;
  max-height:76vh;
}
.projectCloudCard{
  display:grid;
  grid-template-columns:132px minmax(0,1fr);
  gap:12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#14171d;
  padding:10px;
  min-width:0;
}
.projectCloudThumb{
  width:132px;
  height:92px;
  border:1px solid #343a46;
  border-radius:8px;
  object-fit:contain;
  background:#0b0d11;
}
.projectCloudInfo{display:grid;align-content:start;gap:4px;min-width:0}
.projectCloudName{
  font-weight:800;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.projectCloudMeta{
  color:var(--muted);
  font-size:11px;
  line-height:1.35;
}
.projectCloudActions{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(3,minmax(118px,auto));
  justify-content:end;
  gap:14px;
  padding-top:10px;
  border-top:1px solid #292e38;
}
.projectCloudActions button{
  min-width:118px;
  padding:10px 15px;
}
.projectDeleteButton{
  margin-left:8px;
  background:#3a1e22;
  border-color:#7b343d;
  color:#ffd9dd;
}
.projectDeleteButton:hover{background:#50262d}

.actionBox{width:min(92vw,520px)}
.actionModalHead{
  display:flex;
  align-items:center;
  min-height:28px;
}
.actionModalMessage{
  color:#d7dce7;
  line-height:1.5;
  white-space:pre-line;
}
.actionModalInputWrap{
  display:grid;
  gap:6px;
}
.actionModalInputWrap[hidden]{display:none !important}
.actionModalInputWrap input{
  width:100%;
  background:#0d0f13;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:9px;
  padding:10px 11px;
  font:inherit;
}
.actionModalInputWrap input:focus{
  outline:2px solid #6C3BAA;
  outline-offset:1px;
}
.actionModalButtons{
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:14px;
  padding-top:4px;
}
.actionModalButtons button{
  min-width:118px;
  padding:10px 15px;
}
.actionDanger{
  background:#3a1e22;
  border-color:#7b343d;
  color:#ffd9dd;
}
.actionDanger:hover{background:#50262d}
.actionPrimary{
  border-color:#6C3BAA;
  background:#2b2533;
}
.projectsEmpty{
  grid-column:1/-1;
  padding:30px 16px;
  text-align:center;
  color:var(--muted);
  border:1px dashed var(--line);
  border-radius:10px;
}

.topModeSelector{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px
}

.customSizeControls{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.customSizeControls[hidden]{display:none !important}
.customSizeControls input{
  width:70px;
  background:#101319;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:8px;
  padding:7px 8px;
}
.modeBtn.activeMode{
  outline:2px solid #d7dce7;
  outline-offset:1px;
  background:#2a303c
}
.legendHideNumber{
  display:flex;justify-content:center;align-items:center
}
.legendHideNumber input{cursor:pointer}

/* Keep functional palette colors literal when possible. */
.sw,
.cell,
.recipeSwatch,
.recipeResultSwatch,
.thumbWrap canvas,
#previewImage{
  forced-color-adjust:none;
}



.prepArea{
  display:grid;
  grid-template-columns:minmax(460px,1.15fr) minmax(360px,.85fr);
  gap:16px;
  padding:16px 16px 0;
}
.prepPanel{min-width:0}
.prepPanelTitle{
  margin:0 0 8px;
  font-size:18px;
}
.prepSection{
  border:1px solid var(--line);
  border-radius:10px;
  background:#12151b;
  margin-top:8px;
  overflow:hidden;
}
.prepSection:first-of-type{margin-top:0}
.prepSection summary{
  cursor:pointer;
  padding:10px 12px;
  font-weight:800;
  list-style-position:inside;
  user-select:none;
}
.prepSection[open] summary{
  border-bottom:1px solid var(--line);
  background:#151922;
}
.prepSectionBody{padding:11px 12px}
.dropHint{
  margin:7px 0 2px;
  padding:7px 9px;
  border:1px dashed #3a4250;
  border-radius:8px;
  color:var(--muted);
  font-size:11px;
}
.prepArea.dragActive .prepPanel{
  outline:2px dashed #6C3BAA;
  outline-offset:-4px;
}
.checkLabel{
  display:flex;
  align-items:center;
  gap:6px;
}
.palettePasteHelp{margin:8px 0}
.paletteTextControls{margin-top:8px}
.canvasProgressBar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin:0 0 10px;
  padding:9px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#14171d;
}
.canvasProgressBar select,
.legendSearchLabel input{
  background:#101319;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:8px;
  padding:7px 8px;
}
.shortcutHint{margin-left:auto}
.progressChip{
  padding:6px 8px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#101319;
  white-space:nowrap;
}
.legendSearchLabel{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin-bottom:8px;
}
.legendSearchLabel input{width:100%}
.restColorsToggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:7px 0 5px;
  padding:8px 9px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#14171d;
  cursor:pointer;
}
.restColorsToggle span:first-child{
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:700;
}
.tileCard{position:relative}
.tileStatus{
  position:absolute;
  top:3px;
  right:3px;
  min-width:20px;
  height:20px;
  padding:0 5px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:800;
  background:#101319;
  border:1px solid var(--line);
  color:var(--text);
}
.tileCard.status-done{box-shadow:inset 0 0 0 2px rgba(143,227,159,.55)}
.tileCard.status-progress{box-shadow:inset 0 0 0 2px rgba(255,211,138,.45)}
.compareGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  min-height:0;
}
.comparePane{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.comparePane .previewImageWrap{
  flex:1 1 auto;
  max-height:72vh;
}
.comparePane img{
  max-width:100%;
  height:auto;
  image-rendering:pixelated;
  display:inline-block;
  vertical-align:top;
}
body.workFocus header,
body.workFocus #prepArea,
body.workFocus #recipeSection,
body.workFocus .siteFooter{
  display:none !important;
}
body.workFocus #workAreaMain{
  padding:8px;
  min-height:100vh;
}
body.workFocus #workingPanel,
body.workFocus #legendPanel{
  border-radius:10px;
}
@media(max-width:940px){
  .prepArea{grid-template-columns:1fr}
  .compareGrid{grid-template-columns:1fr}
}

.siteFooter{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  padding:4px 18px 18px;
  color:var(--muted);
  font-size:12px;
  user-select:none;
}
.contactStamp{text-align:center;overflow-wrap:anywhere}
.versionStamp{
  font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
  color:#7f8998;
}
.creatorStamp{
  font-weight:700;
}
.creatorStamp .wintiraName{color:#6C3BAA}


@media(max-width:1050px){
  .projectTitleBlock{width:min(320px,32vw)}
  .accountEntry{width:min(500px,42vw)}
  .accountDrawer{width:390px}
}
@media(max-width:940px){
  main{grid-template-columns:1fr}
}
@media(max-width:760px){
  header{
    height:210px;
    min-height:210px;
  }
  .projectTitleBlock{
    top:62px;
    left:20px;
    width:calc(100% - 40px);
    transform:none;
  }
  .accountEntry{
    top:16px;
    right:20px;
    width:auto;
  }
  header .sub{margin-top:86px}
  .accountBenefitTeaser{display:none !important}
  .accountDrawer{
    position:fixed;
    top:72px;
    right:14px;
    width:min(94vw,430px);
    max-width:none;
  }
  .accountInlineForm{grid-template-columns:1fr}
  .siteFooter{grid-template-columns:1fr;gap:5px}
  .contactStamp{text-align:left}
}
@media(max-width:620px){
  .projectBrowserControls{grid-template-columns:1fr}
  .projectCloudCard{grid-template-columns:96px minmax(0,1fr)}
  .projectCloudThumb{width:96px;height:76px}
  .projectCloudActions{
    grid-template-columns:1fr;
    gap:10px;
  }
  .projectCloudActions button{
    width:100%;
    margin-left:0;
  }
}

.toastHost{
  position:fixed;
  right:18px;
  bottom:58px;
  z-index:10020;
  max-width:min(360px,calc(100vw - 36px));
  min-height:0;
  pointer-events:none;
}
.toastNotice{
  padding:10px 12px;
  border:1px solid #395743;
  border-radius:10px;
  background:#132019;
  color:#d7f6de;
  box-shadow:0 10px 26px rgba(0,0,0,.35);
  font-size:12px;
}
.toastNotice.info{
  border-color:#3c536f;
  background:#111b28;
  color:#d6e7ff;
}
.skipLink{
  position:fixed;
  left:10px;
  top:10px;
  z-index:20000;
  transform:translateY(-160%);
  padding:9px 12px;
  border:2px solid #fff;
  border-radius:8px;
  background:#111318;
  color:#fff;
}
.skipLink:focus{transform:none}
button,.filelabel,summary,input,select,textarea{
  outline:none;
}
button:focus-visible,
.filelabel:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.tileCard:focus-visible{
  outline:2px solid #c9b5df !important;
  outline-offset:2px !important;
}
button,.filelabel{min-height:32px}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important}
}

.historyControls{
  display:inline-flex;
  gap:6px;
  align-items:center;
}
.historyControls button{min-width:76px}
.historyControls button:disabled{
  opacity:.45;
  cursor:not-allowed;
}
.historyHint{
  margin-top:8px;
  color:var(--muted);
}