.winkify-studio {
  --engine-paper: #f1efe5;
  --engine-ink: #111411;
  --engine-muted: #666b65;
  --engine-line: rgba(17, 20, 17, .075);
  padding: clamp(5rem, 8vw, 8rem) clamp(1rem, 4vw, 4.5rem);
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 14%, rgba(223, 255, 0, .08), transparent 26rem),
    #080b08;
  color: var(--paper);
}

.winkify-studio .winkify-heading {
  width: min(1480px, 100%);
  margin: 0 auto clamp(2.5rem, 5vw, 5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .55fr);
  align-items: end;
  gap: 2rem;
}

.winkify-studio .winkify-heading .chapter {
  grid-column: 1 / -1;
  margin-bottom: -.5rem;
  color: var(--lime);
}

.winkify-studio .winkify-heading h2 {
  color: var(--paper);
  font-size: clamp(4.5rem, 10vw, 10rem);
  line-height: .72;
}

.winkify-studio .winkify-heading h2 em {
  color: var(--lime);
  font-style: normal;
}

.winkify-studio .winkify-heading > p:last-child {
  margin: 0;
  padding: 1.15rem 0 0 1.2rem;
  border-top: 2px solid #343934;
  color: #bbc2bb;
  font: italic clamp(.95rem, 1.25vw, 1.15rem)/1.5 var(--serif);
}

.studio-shell {
  width: min(1480px, 100%);
  min-width: 0;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: clamp(2rem, 4vw, 4.5rem);
}

.studio-preview,
.studio-controls,
.studio-options,
.studio-backgrounds,
.studio-backgrounds > div {
  min-width: 0;
  max-width: 100%;
}

.studio-preview {
  position: sticky;
  top: 92px;
}

.studio-canvas-frame {
  --studio-ratio: 1 / 1;
  width: 100%;
  aspect-ratio: var(--studio-ratio);
  position: relative;
  overflow: hidden;
  border: 2px solid #c9cec7;
  background: #050705;
  box-shadow: 12px 12px 0 rgba(223, 255, 0, .88);
}

.studio-canvas-frame canvas {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  touch-action: none;
  cursor: move;
}

.studio-drag-note,
.studio-format-note {
  position: absolute;
  z-index: 2;
  border: 1px solid var(--lime);
  background: rgba(5, 7, 5, .9);
  color: var(--lime);
  font: 900 clamp(.43rem, .7vw, .58rem) var(--mono);
  letter-spacing: .04em;
  pointer-events: none;
}

.studio-drag-note { left: 1rem; bottom: 1rem; padding: .45rem .65rem; }
.studio-format-note { right: 1rem; top: 1rem; padding: .35rem .5rem; }

.studio-corner {
  width: 22px;
  height: 22px;
  position: absolute;
  z-index: 2;
  border-color: var(--lime);
  pointer-events: none;
}

.studio-corner.corner-a { left: .55rem; top: .55rem; border-left: 3px solid; border-top: 3px solid; }
.studio-corner.corner-b { right: .55rem; bottom: .55rem; border-right: 3px solid; border-bottom: 3px solid; }

.studio-preview-meta {
  margin-top: 1.5rem;
  padding: 1rem 0 0;
  border-top: 1px solid #414641;
  color: #9fa69f;
}

.studio-preview-meta p { margin: 0; font: .66rem/1.55 var(--mono); }
.studio-preview-meta p:first-child { margin-bottom: .55rem; display: flex; justify-content: space-between; color: var(--paper); }
.studio-preview-meta p:first-child b { color: var(--lime); }

.studio-controls {
  width: 100%;
  padding: clamp(1.2rem, 2.3vw, 2rem);
  position: relative;
  overflow: hidden;
  border: 3px solid var(--engine-ink);
  outline: 2px solid #cac7bc;
  outline-offset: 8px;
  background-color: var(--engine-paper);
  background-image:
    linear-gradient(var(--engine-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--engine-line) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--engine-ink);
  box-shadow: 12px 12px 0 #242924;
}

.studio-controls::before,
.studio-controls::after { display: none; }

.studio-control-head {
  min-height: 64px;
  padding: 0 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 3px solid var(--engine-ink);
}

.studio-control-head span { display: grid; gap: .15rem; }
.studio-control-head b { font: 400 clamp(1.45rem, 2.3vw, 2rem) var(--meme); letter-spacing: .02em; }
.studio-control-head small { color: var(--engine-muted); font: 900 .56rem var(--mono); }
.studio-control-head i {
  width: 15px;
  height: 15px;
  flex: none;
  border: 4px solid #62685f;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 2px var(--engine-paper);
}

.studio-upload {
  display: block;
  margin-top: 1.15rem;
  cursor: pointer;
}

.studio-upload > span,
.studio-options legend,
.studio-layer-row > span,
.studio-caption > span:first-child {
  display: block;
  margin-bottom: .55rem;
  color: var(--engine-ink);
  font: 900 .56rem var(--mono);
  letter-spacing: .045em;
  text-transform: uppercase;
}

.studio-upload strong {
  min-height: 64px;
  padding: .75rem .85rem .75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 3px solid var(--engine-ink);
  background: var(--lime);
  color: var(--engine-ink);
  box-shadow: 6px 6px 0 var(--engine-ink);
  font: 400 clamp(1.2rem, 2vw, 1.6rem) var(--meme);
  transition: transform .15s, box-shadow .15s;
}

.studio-upload strong b {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--engine-ink);
  color: var(--lime);
  font: 900 1.2rem var(--mono);
}

.studio-upload:hover strong,
.studio-upload:focus-within strong { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--engine-ink); }
.studio-controls > input[type="file"] { width: 1px; height: 1px; position: absolute; opacity: 0; pointer-events: none; }
.studio-message { min-height: 1rem; margin: .7rem 0 0; color: #424842; font: italic .68rem/1.45 var(--serif); overflow-wrap: anywhere; }
.studio-message.error { color: #a52217; font-weight: 900; }

.studio-photo-adjust {
  margin-top: .9rem;
  padding: .8rem;
  border: 2px solid var(--engine-ink);
  background: rgba(255, 255, 252, .72);
  transition: opacity .2s, background .2s, box-shadow .2s;
}

.studio-photo-adjust[aria-disabled="true"] { opacity: .42; }
.studio-photo-adjust[aria-disabled="false"] { background: rgba(223, 255, 0, .11); box-shadow: inset 5px 0 0 var(--lime); }

.studio-adjust-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.studio-adjust-head > span { font: 900 .54rem var(--mono); letter-spacing: .045em; }
.studio-adjust-head button {
  min-height: 28px;
  padding: .3rem .55rem;
  border: 2px solid var(--engine-ink);
  background: var(--engine-ink);
  color: var(--lime);
  cursor: pointer;
  font: 900 .48rem var(--mono);
}

.studio-adjust-head button:disabled { cursor: not-allowed; opacity: .45; }
.studio-adjust-head button:not(:disabled):hover,
.studio-adjust-head button:not(:disabled):focus-visible { background: var(--red); color: #fff; }

.studio-adjust-grid {
  margin-top: .75rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
}

.studio-adjust-grid label { min-width: 0; display: grid; gap: .45rem; font: 900 .48rem var(--mono); }
.studio-adjust-grid label > span { display: flex; justify-content: space-between; gap: .5rem; }
.studio-adjust-grid output { color: #686e67; }
.studio-adjust-grid input { width: 100%; accent-color: var(--red); cursor: ew-resize; }
.studio-adjust-grid input:disabled { cursor: not-allowed; }

.studio-options,
.studio-layer-row,
.studio-caption,
.studio-sliders,
.studio-actions { margin-top: 1.3rem; }

.studio-options { padding: 0; border: 0; }
.studio-options > div { display: grid; gap: .55rem; }
.studio-face-modes > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.studio-formats > div { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.studio-options button,
.studio-layer-row button {
  min-width: 0;
  border: 2px solid var(--engine-ink);
  background: rgba(255, 255, 252, .74);
  color: var(--engine-ink);
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s, transform .15s;
}

.studio-options button {
  min-height: 74px;
  padding: .65rem .35rem;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: .2rem;
  text-align: center;
}

.studio-options button > i {
  width: 24px;
  height: 18px;
  display: block;
  border: 2px solid currentColor;
  background: #d8dcd5;
}

.studio-face-modes button { grid-template-columns: auto 1fr; grid-template-rows: auto auto; justify-items: start; column-gap: .65rem; padding-inline: .85rem; text-align: left; }
.studio-face-modes button > i { grid-row: 1 / 3; align-self: center; width: 28px; height: 25px; background: var(--engine-ink); clip-path: polygon(0 0, 32% 24%, 68% 24%, 100% 0, 88% 100%, 12% 100%); }
.studio-face-modes button:nth-child(2) > i { border-radius: 50%; clip-path: none; background: radial-gradient(circle at 38% 42%, var(--lime) 0 8%, var(--engine-ink) 9% 100%); }
.studio-formats button:nth-child(1) > i { width: 19px; border-radius: 50%; }
.studio-formats button:nth-child(2) > i { height: 10px; }
.studio-formats button:nth-child(4) > i { width: 12px; height: 22px; }
.studio-options button b { min-width: 0; font: 900 .58rem var(--mono); overflow-wrap: anywhere; }
.studio-options button small { min-width: 0; color: var(--engine-muted); font: .46rem/1.25 var(--mono); overflow-wrap: anywhere; }

.studio-options button:hover,
.studio-options button:focus-visible,
.studio-layer-row button:hover,
.studio-layer-row button:focus-visible { transform: translateY(-2px); outline: 2px solid var(--lime); outline-offset: 1px; }

.studio-options button[aria-pressed="true"] {
  background: var(--engine-ink);
  color: var(--lime);
  box-shadow: 4px 4px 0 var(--red);
}

.studio-options button[aria-pressed="true"] small { color: var(--lime); opacity: .78; }

.studio-world-count {
  display: block;
  margin: -.2rem 0 .6rem;
  color: var(--engine-muted);
  font: 900 .5rem var(--mono);
  letter-spacing: .04em;
}

.studio-backgrounds { min-inline-size: 0; }
.studio-backgrounds > div {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .55rem;
  overflow: visible;
}

.studio-backgrounds button {
  min-height: 118px;
  padding: .4rem;
  grid-template-rows: 66px auto auto;
  align-content: start;
  overflow: hidden;
}

.studio-backgrounds button img {
  width: 100%;
  height: 66px;
  display: block;
  border: 1px solid #5b625a;
  object-fit: cover;
  filter: saturate(.9) contrast(1.04);
}

.studio-backgrounds button b { margin-top: .2rem; }
.studio-backgrounds button[aria-pressed="true"] img { border-color: var(--lime); filter: saturate(1.12) contrast(1.08); }

.studio-layer-row > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.studio-layer-row button {
  min-height: 44px;
  padding: .55rem .7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  font: 900 .56rem var(--mono);
}

.studio-layer-row button i { width: 10px; height: 10px; border: 1px solid var(--engine-ink); border-radius: 50%; background: transparent; }
.studio-layer-row button[aria-pressed="true"] { background: var(--engine-ink); color: var(--lime); box-shadow: 4px 4px 0 var(--red); }
.studio-layer-row button[aria-pressed="true"] i { border-color: var(--lime); background: var(--lime); box-shadow: 0 0 8px var(--lime); }

.studio-caption { display: block; }
.studio-caption-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.studio-caption input {
  min-width: 0;
  min-height: 54px;
  padding: .75rem;
  border: 3px solid var(--engine-ink);
  background: #fffefa;
  color: var(--engine-ink);
  font: 400 1rem var(--meme);
  text-transform: uppercase;
}

.studio-caption button {
  min-width: 76px;
  border: 3px solid var(--engine-ink);
  background: var(--red);
  color: #fff;
  cursor: pointer;
  font: 900 .56rem var(--mono);
}

.studio-caption button:hover,
.studio-caption button:focus-visible { background: var(--engine-ink); color: var(--lime); }

.studio-sliders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.studio-sliders label { min-width: 0; display: grid; gap: .55rem; color: var(--engine-ink); font: 900 .54rem var(--mono); }
.studio-sliders input { width: 100%; accent-color: var(--red); cursor: ew-resize; }

.studio-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .55rem; }
.studio-actions button,
.studio-post {
  min-height: 52px;
  padding: .7rem 1rem;
  border: 3px solid var(--engine-ink);
  cursor: pointer;
  font: 400 .95rem var(--meme);
}

.studio-actions button { background: #fffefa; color: var(--engine-ink); }
.studio-actions .studio-download { display: flex; align-items: center; justify-content: space-between; background: var(--engine-ink); color: var(--paper); }
.studio-actions .studio-download span { color: var(--lime); }
.studio-actions button:hover,
.studio-actions button:focus-visible { background: var(--lime); color: var(--engine-ink); }

.studio-post {
  margin-top: .55rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--lime);
  color: var(--engine-ink);
}

.studio-post:hover,
.studio-post:focus-visible { background: var(--red); color: #fff; }
.studio-controls > small { display: block; margin-top: .8rem; color: var(--engine-muted); font: italic .64rem/1.45 var(--serif); }

@media (max-width: 1320px) {
  .studio-shell { grid-template-columns: minmax(300px, .75fr) minmax(0, 1.25fr); gap: 2.5rem; }
  .studio-backgrounds > div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
  .winkify-studio .winkify-heading { grid-template-columns: 1fr; }
  .winkify-studio .winkify-heading .chapter { margin-bottom: 0; }
  .winkify-studio .winkify-heading > p:last-child { max-width: 620px; }
  .studio-shell { grid-template-columns: 1fr; }
  .studio-preview { width: min(720px, 100%); position: static; justify-self: center; }
  .studio-controls { width: min(850px, 100%); justify-self: center; }
  .studio-backgrounds > div { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .winkify-studio { padding-inline: .8rem; }
  .winkify-studio .winkify-heading h2 { font-size: clamp(4rem, 25vw, 7rem); }
  .studio-canvas-frame { box-shadow: 7px 7px 0 var(--lime); }
  .studio-controls { padding: 1rem; outline-offset: 4px; box-shadow: 7px 7px 0 #242924; }
  .studio-formats > div,
  .studio-backgrounds > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio-backgrounds button { min-height: 128px; grid-template-rows: 76px auto auto; }
  .studio-backgrounds button img { height: 76px; }
  .studio-adjust-grid { grid-template-columns: 1fr; gap: .65rem; }
}

@media (max-width: 460px) {
  .studio-face-modes > div,
  .studio-layer-row > div,
  .studio-sliders { grid-template-columns: 1fr; }
  .studio-caption-row,
  .studio-actions { grid-template-columns: 1fr; }
  .studio-caption button { min-height: 42px; }
  .studio-drag-note { max-width: 70%; }
}

@media (prefers-reduced-motion: reduce) {
  .studio-upload strong,
  .studio-options button,
  .studio-layer-row button { transition: none; }
}