@charset "UTF-8";
  
:root {
  color-scheme:light;
  --paper:#f5f5f5;
  --surface:#fff;
  --ink:#222222;
  --muted:#626262;
  --line:#dddddd;
  --accent:#252525;
  --tint:#eeeeee;
  --selection:#f3d6a0;
  --code:#f6f6f6;
  --code-ink:#222222;
  --mono:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
  --font:"PingFang SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,sans-serif;
  font:14px/1.5 var(--font);
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none}

* {
  box-sizing:border-box}
body {
  margin:0}
button,input,select,textarea {
  font:inherit}
button {
  cursor:pointer;
  color:inherit}
button:disabled {
  opacity:.38;
  cursor:default}
a,button,input,select {
  -webkit-tap-highlight-color:transparent}
button {
  transition:background .15s,color .15s}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible {
  outline:2px solid #ba6c23;
  outline-offset:3px}
[hidden] {
  display:none!important}
::selection {
  background:var(--selection);
  color:var(--ink)}
input,textarea {
  caret-color:var(--accent)}
* {
  scrollbar-width:thin;
  scrollbar-color:#969696 transparent}
svg {
  width:20px;
  height:20px;
  flex-shrink:0}
h1,h2,h3,p {
  margin:0}
h1,h2,h3 {
  text-wrap:balance}
p {
  text-wrap:pretty}
.topbar {
  height:68px;
  padding:0 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  gap:20px;
  background:var(--surface)}
.brand {
  color:var(--ink);
  text-decoration:none;
  font-size:17px;
  font-weight:650;
  display:flex;
  align-items:center;
  gap:17px}
.brand-divider {
  color:#aaaaaa;
  font-weight:400}
.brand-section {
  font-size:14px;
  font-weight:400;
  color:var(--muted)}
.header-right {
  display:flex;
  align-items:center;
  gap:24px}
.course-label {
  font-size:12px;
  color:var(--muted)}
.button {
  border:1px solid transparent;
  border-radius:5px;
  padding:10px 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-size:14px;
  line-height:1.5;
  font-weight:550;
  min-height:42px;
  white-space:nowrap}
.button.primary {
  background:var(--accent);
  color:white}
.button.primary:hover {
  background:#111111}
.button.light {
  background:transparent;
  border-color:var(--line);
  color:var(--ink)}
.button.light:hover {
  background:var(--tint)}
main {
  max-width:1480px;
  margin:0 auto;
  padding:28px 40px 18px}
.intro {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:24px}
.intro>div {
  display:flex;
  align-items:baseline;
  gap:22px}
h1 {
  font-size:26px;
  line-height:1.3;
  font-weight:650;
  letter-spacing:-.02em}
.intro p {
  font-size:14px;
  color:var(--muted)}
.exchange-main {
  min-height:44px}
.workspace {
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
  background:var(--surface);
  border:1px solid var(--line);
  min-width:0}
.panel {
  min-width:0}
.editor {
  border-right:1px solid var(--line)}
.panel-heading {
  height:65px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 28px;
  gap:14px;
  border-bottom:1px solid var(--line)}
h2 {
  font-size:17px;
  font-weight:600;
  line-height:1.4}
.saved,.live {
  font-size:12px;
  color:var(--muted)}
.saved:before {
  content:"";
  width:6px;
  height:6px;
  background:#777777;
  display:inline-block;
  border-radius:50%;
  margin-right:7px}
.editor-controls {
  padding:20px 28px 15px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px}
.segmented {
  display:flex;
  gap:0;
  border-bottom:1px solid var(--line)}
.segmented button {
  background:transparent;
  border:0;
  border-bottom:2px solid transparent;
  border-radius:0;
  padding:7px 10px 10px;
  color:var(--muted);
  font-size:14px;
  white-space:nowrap}
.segmented button:first-child {
  padding-left:0;
  padding-right:14px}
.segmented button[aria-pressed=true] {
  border-bottom-color:var(--accent);
  color:var(--accent);
  font-weight:650}
.segmented button span {
  font:12px var(--mono);
  margin-left:4px;
  color:var(--muted)}
.segmented button:hover {
  color:var(--accent)}
.size-label {
  font-size:12px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap}
select {
  background:#fff;
  border:1px solid #bdbdbd;
  border-radius:4px;
  color:var(--ink);
  padding:7px 8px;
  font:12px var(--mono);
  min-height:34px}
.editor-body {
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:16px;
  padding:0 28px 0 20px;
  align-items:stretch}
.tools-row {
  padding-top:32px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  padding-bottom:27px;
  gap:15px}
.tool-group {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px}
.icon-button {
  border:1px solid transparent;
  background:transparent;
  padding:8px;
  width:36px;
  height:36px;
  border-radius:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted)}
.icon-button:hover {
  background:var(--tint);
  color:var(--accent)}
.icon-button.active {
  background:var(--tint);
  color:var(--accent);
  border-color:#aaaaaa}
.text-button {
  font-size:13px;
  background:transparent;
  border:0;
  padding:6px 8px;
  color:var(--muted);
  border-radius:3px}
.text-button:hover {
  color:var(--accent);
  background:var(--tint)}
.text-button[aria-pressed=false] {
  text-decoration:line-through}
.drawing-area {
  min-width:0;
  padding:0 0 0 16px}
.canvas-top,.canvas-bottom {
  font-size:12px;
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px}
.canvas-top {
  padding:4px 0 0}
.canvas-top>span:first-child {
  font:12px var(--mono)}
.canvas-stage {
  position:relative;
  margin:26px auto 14px;
  width:min(100%,380px);
  aspect-ratio:1}
.column-labels {
  position:absolute;
  top:-21px;
  left:0;
  right:0;
  display:grid;
  text-align:center;
  font:12px var(--mono);
  color:var(--muted)}
.row-labels {
  position:absolute;
  left:-23px;
  top:0;
  bottom:0;
  width:16px;
  display:grid;
  align-items:center;
  text-align:center;
  font:12px var(--mono);
  color:var(--muted)}
#pixel-grid {
  display:grid;
  width:100%;
  height:100%;
  touch-action:none;
  background:#fff;
  outline:1px solid #a6a6a6;
  overflow:hidden}
#pixel-grid .pixel {
  position:relative;
  border:0;
  box-shadow:inset -1px -1px 0 #80808036;
  border-radius:0;
  min-width:0;
  min-height:0;
  padding:0;
  margin:0;
  transition:none}
#pixel-grid .pixel.selected:after {
  content:"";
  position:absolute;
  inset:1px;
  border:2px solid #f2b74f;
  pointer-events:none}
#pixel-grid .pixel:focus-visible {
  outline:3px solid #ce8e29;
  outline-offset:-4px;
  z-index:1}
.canvas-bottom {
  font-size:12px;
  min-height:28px;
  padding-bottom:6px}
.canvas-bottom>span:last-child {
  font-variant-numeric:tabular-nums}
.palette-area {
  padding:18px 28px 20px 94px;
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:20px;
  align-items:center}
.palette-heading {
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:12px;
  color:var(--ink)}
#paint-description {
  font:12px var(--mono);
  color:var(--muted)}
.palette {
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  justify-content:flex-end}
.swatch {
  width:28px;
  height:28px;
  padding:0;
  border:1px solid #aaaaaa;
  border-radius:4px;
  position:relative}
.swatch.active:after {
  content:"";
  position:absolute;
  inset:-4px;
  border:1px solid var(--accent);
  border-radius:6px}
.swatch:hover {
  outline:2px solid #b3b3b3;
  outline-offset:1px}
#rgb-controls {
  grid-column:1/-1;
  width:100%;
  margin-top:20px}
.rgb-sliders {
  display:grid;
  gap:10px}
.rgb-sliders label {
  display:flex;
  align-items:center;
  gap:12px;
  font:12px var(--mono);
  font-weight:600}
.rgb-sliders input {
  flex:1;
  min-width:0;
  height:5px}
.rgb-sliders output {
  width:26px;
  text-align:right;
  font-weight:400;
  color:var(--muted);
  font-variant-numeric:tabular-nums}
.red {
  color:#a5392c}
.red input {
  accent-color:#ac4c3f}
.green {
  color:#287349}
.green input {
  accent-color:#36845a}
.blue {
  color:#3459a0}
.blue input {
  accent-color:#4c6caa}
.examples {
  padding:14px 28px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:7px;
  font-size:12px}
.examples>span {
  color:var(--muted);
  margin-right:4px}
.examples button {
  border:0;
  background:transparent;
  border-radius:3px;
  padding:5px 7px;
  color:var(--ink);
  font-size:12px}
.examples button:hover {
  background:var(--tint)}
.examples .download-button {
  margin-left:auto;
  color:var(--accent);
  font-weight:550}
.encoding {
  padding-bottom:6px}
.encoding-intro {
  padding:22px 28px 18px}
.encoding-intro h3 {
  font-size:16px;
  font-weight:550;
  margin-bottom:5px}
.encoding-intro p {
  color:var(--muted);
  font-size:12px;
  line-height:1.7}
.code-legend {
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  margin-top:0;
  font-size:12px;
  color:var(--muted)}
.code-legend>span {
  display:flex;
  gap:7px;
  align-items:center}
.code-legend i {
  width:13px;
  height:13px;
  border:1px solid #aaaaaa;
  border-radius:2px}
.white {
  background:white}
.black {
  background:black}
.code-legend b {
  font:12px var(--mono);
  color:var(--ink)}
.code-shell {
  border:1px solid var(--line);
  background:var(--code);
  color:var(--code-ink);
  margin:0 28px;
  border-radius:5px;
  overflow:hidden}
.code-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:13px 16px;
  border-bottom:1px solid #dddddd}
.code-toolbar>span {
  font-size:12px;
  color:#626262}
.code-actions {
  display:flex;
  gap:14px}
.code-actions button,.code-footer button {
  font-size:12px;
  white-space:nowrap;
  background:transparent;
  border:0;
  padding:0;
  color:var(--ink)}
.code-actions button:hover,.code-footer button:hover {
  text-decoration:underline;
  text-underline-offset:4px}
#code-output {
  padding:15px 16px;
  height:275px;
  overflow:auto;
  font:18px/1.7 var(--mono);
  scrollbar-color:#aaaaaa var(--code)}
.code-row {
  display:flex;
  align-items:center;
  min-height:29px;
  min-width:max-content;
  white-space:nowrap;
  border-radius:2px}
.code-row.active {
  background:#e7e7e7}
.line-number {
  flex-shrink:0;
  width:28px;
  font:12px var(--mono);
  color:#606060;
  user-select:none}
.code-cell {
  display:inline-block;
  min-width:24px;
  width:calc((100% - 28px)/8);
  text-align:center;
  color:#606060;
  cursor:pointer}
.code-cell.filled {
  color:var(--code-ink)}
.code-cell.selected {
  color:#222222;
  background:#efc477;
  border-radius:2px}
.code-output-gray .code-cell {
  font-size:15px;
  min-width:34px}
.code-output-rgb .code-cell {
  font-size:12px;
  min-width:115px;
  text-align:left;
  padding:0 7px}
.code-output-rgb.binary-rgb .code-cell {
  min-width:230px}
.code-footer {
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:12px 16px;
  border-top:1px solid #dddddd;
  font-size:12px;
  color:#626262}
.pixel-inspector {
  display:flex;
  align-items:center;
  gap:13px;
  margin:20px 28px 0;
  padding-bottom:18px;
  border-bottom:1px solid var(--line)}
.inspector-swatch {
  width:36px;
  height:36px;
  flex-shrink:0;
  border:1px solid #b3b3b3;
  border-radius:4px}
.pixel-inspector>div:nth-child(2) {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px 14px;
  min-width:0}
.small-label {
  color:var(--muted);
  font-size:12px;
  line-height:1.7}
.pixel-inspector .small-label {
  width:100%}
.pixel-inspector strong {
  font:14px var(--mono);
  color:var(--ink)}
.inspector-bits {
  font:12px var(--mono);
  color:var(--muted);
  overflow-wrap:anywhere}
.data-card {
  margin:18px 28px 0}
.data-card>div {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px}
.data-card strong {
  font:22px var(--mono);
  font-weight:600;
  color:var(--accent)}
.data-card small {
  font-size:14px;
  font-weight:400}
.data-card>p {
  font:12px var(--mono);
  color:var(--ink);
  margin-top:6px}
.data-card .data-note {
  font:12px/1.7 var(--font);
  color:var(--muted);
  margin-top:6px}
.peer-exchange {
  margin:17px 28px 18px;
  padding-top:14px;
  border-top:0;
  font-size:12px;
  line-height:1.8;
  color:var(--muted)}
.peer-exchange .button {
  width:100%;
  min-height:44px}
.classroom-strip {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid var(--line);
  padding:20px 0 18px}
.classroom-strip>div {
  display:flex;
  align-items:baseline;
  gap:20px}
.classroom-strip h3 {
  font-size:14px;
  font-weight:600;
  white-space:nowrap}
.classroom-strip p {
  font-size:12px;
  color:var(--muted)}
.classroom-strip .text-button {
  color:var(--accent);
  font-weight:550;
  padding:7px 0;
  white-space:nowrap}
footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-top:16px;
  font-size:12px;
  color:var(--muted)}
dialog {
  color:var(--ink);
  background:var(--surface);
  border:0;
  border-radius:9px;
  padding:28px;
  width:min(660px,calc(100vw - 32px));
  max-height:90vh;
  overflow:auto;
  box-shadow:0 16px 64px #22222240}
dialog::backdrop {
  background:#22222285}
.dialog-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px}
.dialog-heading h2 {
  font-size:23px;
  font-weight:600;
  letter-spacing:-.02em}
.dialog-intro {
  font-size:14px;
  line-height:1.8;
  color:var(--muted);
  margin:14px 0 22px;
  max-width:65ch}
.close-dialog {
  flex-shrink:0}
.field-label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
  font-size:13px;
  font-weight:550}
.field-label .text-button {
  color:var(--accent);
  font-size:12px;
  font-weight:400}
textarea {
  display:block;
  resize:vertical;
  width:100%;
  min-height:210px;
  border:1px solid #b3b3b3;
  background:#f7f7f7;
  color:var(--ink);
  border-radius:4px;
  padding:14px;
  font:13px/1.7 var(--mono)}
textarea::placeholder {
  color:#626262}
.format-help {
  font-size:12px;
  color:var(--muted);
  line-height:1.8;
  margin-top:9px;
  max-width:75ch}
#decode-status {
  font-size:13px;
  color:#a7352d;
  line-height:1.8;
  margin:12px 0}
.dialog-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  margin-top:22px;
  flex-wrap:wrap}
.dialog-actions>div {
  display:flex;
  gap:8px;
  flex-wrap:wrap}
.activity-steps {
  display:grid;
  gap:24px;
  margin:28px 0}
.activity-steps>div {
  display:flex;
  gap:18px}
.activity-steps>div>span {
  font:13px var(--mono);
  color:var(--accent);
  padding-top:2px}
.activity-steps h3 {
  font-size:15px;
  font-weight:550;
  margin-bottom:6px}
.activity-steps p {
  font-size:13px;
  color:var(--muted);
  line-height:1.8}
.timer {
  background:var(--tint);
  border-radius:4px;
  padding:18px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px}
.timer>div:first-child {
  display:flex;
  flex-direction:column;
  gap:3px}
.timer strong {
  font:32px var(--mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:1px;
  color:var(--accent)}
details {
  margin-top:24px;
  font-size:13px;
  line-height:1.9;
  color:var(--muted)}
summary {
  cursor:pointer;
  color:var(--ink)}
details p {
  margin-top:12px}
#toast {
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translate(-50%,8px);
  opacity:0;
  pointer-events:none;
  max-width:calc(100vw - 32px);
  background:var(--accent);
  color:white;
  border-radius:5px;
  padding:12px 20px;
  font-size:13px;
  text-align:center;
  box-shadow:0 4px 20px #22222224;
  transition:opacity .18s,transform .18s;
  z-index:10}
#toast.show {
  opacity:1;
  transform:translate(-50%,0)}

@media(min-width:1450px) {
  .canvas-stage {
  width:420px}
#code-output {
  height:315px}
}

@media(max-width:1150px) {
  main {
  padding:24px}
.topbar {
  padding:0 24px}
.intro>div {
  gap:14px}
.intro p {
  font-size:13px}
.workspace {
  grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)}
.panel-heading {
  padding:18px 22px}
.editor-controls {
  padding:16px 22px 14px;
  flex-wrap:wrap}
.size-label {
  margin-left:auto}
.editor-body {
  padding-right:22px;
  padding-left:14px;
  gap:10px;
  grid-template-columns:36px minmax(0,1fr)}
.drawing-area {
  padding-left:13px}
.palette-area {
  padding-left:73px;
  padding-right:22px;
  grid-template-columns:1fr}
.palette-heading {
  flex-direction:row;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px}
.palette {
  justify-content:flex-start}
.examples {
  padding:14px 22px;
  gap:4px;
  flex-wrap:wrap}
.examples button {
  padding:5px 6px}
.encoding-intro {
  padding:20px 22px 16px}
.code-shell {
  margin:0 22px}
#code-output {
  height:245px;
  padding:12px}
.pixel-inspector,.data-card,.peer-exchange {
  margin-left:22px;
  margin-right:22px}
.code-cell {
  min-width:22px}
.code-legend {
  gap:15px}
.classroom-strip>div {
  gap:15px}
.canvas-bottom {
  font-size:12px}
.canvas-top {
  font-size:12px}
.segmented button {
  font-size:13px}
.segmented button span {
  font-size:12px}
}

@media(max-width:900px) and (min-width:761px) {
  .intro>div {
  display:block}
.intro p {
  margin-top:5px}
.editor-controls {
  gap:10px}
.segmented button span {
  display:none}
.examples>span {
  width:100%}
#code-output {
  font-size:16px}
.code-cell {
  min-width:19px}
.code-toolbar {
  padding:12px}
.code-footer {
  padding:12px}
.classroom-strip>div {
  display:block}
.classroom-strip p {
  margin-top:5px}
.code-legend {
  gap:11px}
}

@media(max-width:760px) {
  .topbar {
  height:62px;
  padding:0 18px;
  gap:12px}
.brand {
  font-size:15px;
  gap:10px}
.brand-section {
  font-size:12px}
.course-label {
  display:none}
.topbar .button {
  font-size:12px;
  padding:7px 10px;
  min-height:36px}
main {
  padding:22px 16px 18px}
.intro {
  gap:12px;
  align-items:center;
  margin-bottom:20px}
.intro>div {
  display:block}
h1 {
  font-size:24px}
.intro p {
  font-size:12px;
  margin-top:6px;
  max-width:17em}
.exchange-main {
  font-size:12px;
  padding:10px 11px;
  gap:7px;
  min-height:42px}
.exchange-main svg {
  width:17px;
  height:17px}
.workspace {
  grid-template-columns:1fr}
.editor {
  border-right:0;
  border-bottom:1px solid var(--line)}
.panel-heading {
  height:58px;
  padding:14px 18px}
h2 {
  font-size:16px}
.saved,.live {
  font-size:12px}
.editor-controls {
  padding:15px 18px 14px;
  flex-wrap:nowrap;
  gap:8px}
.segmented button {
  padding:6px 9px 9px;
  font-size:13px}
.segmented button span {
  display:none}
.size-label {
  font-size:12px;
  gap:5px}
select {
  font-size:12px;
  padding:7px}
.editor-body {
  padding:0 18px 0 10px;
  gap:9px;
  grid-template-columns:33px minmax(0,1fr)}
.drawing-area {
  padding-left:14px}
.canvas-stage {
  width:min(100%,360px);
  margin-top:25px}
.canvas-top>span:first-child {
  font-size:12px}
.canvas-top>span:last-child {
  font-size:12px}
.column-labels,.row-labels {
  font-size:11px}
.row-labels {
  left:-20px;
  width:15px}
.canvas-bottom {
  font-size:12px;
  gap:4px}
.canvas-bottom>span:last-child {
  font-size:11px}
.tools-row {
  padding-top:30px;
  padding-bottom:25px;
  gap:13px}
.tools-row .icon-button {
  width:33px;
  height:35px;
  padding:7px}
.palette-area {
  padding:17px 18px 20px 66px;
  display:block}
.palette-heading {
  margin-bottom:13px}
.palette {
  justify-content:flex-start;
  gap:10px}
.swatch {
  width:27px;
  height:27px}
.examples {
  padding:13px 18px;
  gap:4px;
  font-size:12px}
.examples>span {
  margin-right:3px}
.examples button {
  font-size:12px;
  padding:6px}
.encoding-intro {
  padding:20px 18px 18px}
.encoding-intro h3 {
  font-size:16px}
.encoding-intro p {
  font-size:12px}
.code-shell {
  margin:0 18px}
.code-toolbar {
  padding:12px}
.code-toolbar>span,.code-actions button,.code-footer button {
  font-size:12px}
#code-output {
  height:265px;
  padding:12px 10px;
  font-size:17px;
  line-height:1.7}
.code-cell {
  min-width:22px}
.line-number {
  width:24px;
  font-size:12px}
.code-row {
  min-height:29px}
.code-footer {
  padding:12px;
  font-size:12px}
.pixel-inspector,.data-card,.peer-exchange {
  margin-left:18px;
  margin-right:18px}
.peer-exchange {
  margin-bottom:22px}
.classroom-strip {
  gap:15px;
  align-items:flex-start;
  padding:20px 0}
.classroom-strip>div {
  display:block}
.classroom-strip h3 {
  font-size:13px}
.classroom-strip p {
  font-size:12px;
  line-height:1.8;
  margin-top:6px;
  max-width:17em}
.classroom-strip .text-button {
  font-size:12px;
  padding-top:0}
footer {
  font-size:12px;
  flex-direction:column;
  align-items:flex-start;
  gap:5px}
.dialog-heading h2 {
  font-size:21px}
dialog {
  padding:22px}
.dialog-intro {
  font-size:13px}
.dialog-actions .button {
  font-size:12px;
  padding:9px 12px}
.dialog-actions .small-label {
  font-size:12px}
.format-help {
  font-size:12px}
.activity-steps p {
  font-size:12px}
.timer {
  padding:16px}
.timer .button {
  font-size:12px}
}

@media(max-width:390px) {
  .brand-section {
  display:none}
.brand-divider {
  display:none}
.intro p {
  max-width:13em}
.exchange-main {
  padding:10px;
  font-size:12px}
.examples>span {
  width:100%;
  margin-bottom:4px}
.palette {
  gap:10px}
.palette-heading {
  font-size:12px}
#paint-description {
  font-size:12px}
.code-cell {
  min-width:20px}
.canvas-bottom>span:first-child {
  font-size:11px}
.canvas-top>span:last-child {
  font-size:11px}
}

@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
  transition:none!important;
  scroll-behavior:auto!important}
}


/* Shared desktop rows keep the canvas and encoding work areas aligned. */
@media (min-width:761px) {
  .workspace { grid-template-rows:auto auto auto auto; }
  .editor,.encoding {
    display:grid;
    grid-row:span 4;
    grid-template-rows:subgrid;
    padding-bottom:0;
  }
  .code-shell { display:flex; flex-direction:column; align-self:stretch; }
  #code-output { display:flex; flex-direction:column; flex:1; height:0; min-height:0; padding-top:0; padding-bottom:0; }
  #code-output .code-row { flex:1; min-height:22px; line-height:1.2; }
  .encoding-footer { display:flex; flex-direction:column; }
  .palette-area { align-content:end; }
  .peer-exchange { margin-top:auto; margin-bottom:20px; padding-top:17px; }
  .encoding-footer .data-card { margin-bottom:0; }
}

@media (min-width:761px) and (max-width:1150px) {
  #code-output .code-row { min-height:0; }
  .workspace:has(#pixel-grid[aria-rowcount="16"]) #code-output:not(.code-output-rgb) .code-cell { font-size:14px; }
}