.editor {
  height:100vh;
  overflow:hidden}
.editor header {
  height:64px;
  max-width:none;
  padding:0 24px}
.editor .brand {
  font-size:21px}
.workspace {
  height:calc(100vh - 64px);
  display:grid;
  grid-template-columns:210px minmax(300px,1fr) 300px}
.library,.inspector {
  overflow:auto;
  padding:24px 18px;
  background:var(--panel)}
.library {
  border-right:1px solid var(--line)}
.inspector {
  border-left:1px solid var(--line)}
.editor h2 {
  font-family:inherit;
  font-size:17px;
  font-weight:600;
  letter-spacing:-.5px;
  margin:12px 0 26px}
.editor label {
  display:block;
  font-size:11px;
  color:var(--muted);
  margin:14px 0 8px}
.editor select,.library input:not([type=range]) {
  width:100%;
  border:1px solid var(--line);
  border-radius:0;
  padding:9px;
  background:var(--bg);
  color:var(--ink);
  font-size:11px}
.editor select {
  appearance:none;
  -webkit-appearance:none;
  min-height:36px;
  line-height:18px;
  padding:8px 36px 8px 12px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23737373' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:16px 16px;
  cursor:pointer}
.dark .editor select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23a1a1a1' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E")}
@media(forced-colors:active) {
  .editor select {appearance:auto;-webkit-appearance:auto;background-image:none;padding-right:12px}
}
.viewport {
  min-width:0;
  display:flex;
  flex-direction:column;
  background:var(--bg)}
.toolbar,.statusbar {
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  padding:12px 16px;
  border-bottom:1px solid var(--line);
  font-size:10px}
.toolbar>div {
  display:flex;
  gap:8px}
.toolbar select {
  width:auto;
  max-width:150px}
.tool {
  background:none;
  border:1px solid var(--line);
  padding:7px 10px;
  border-radius:0;
  font-size:10px;
  white-space:nowrap}
.canvas-wrap {
  flex:1;
  min-height:100px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background-image:radial-gradient(var(--line) .6px,transparent .6px);
  background-size:18px 18px;
  padding:20px}
#frame {
  position:relative;
  width:100%;
  height:100%;
  background:var(--bg);
  border:1px solid var(--line);
  box-shadow:0 15px 50px #00000006}
#frame canvas {
  width:100%;
  height:100%;
  display:block;
  object-fit:contain}
.statusbar {
  border-top:1px solid var(--line);
  color:var(--muted);
  font-family:monospace}
.export {
  height:180px;
  flex-shrink:0;
  background:var(--panel);
  padding:12px 16px}
.export-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:9px;
  letter-spacing:1px;
  gap:10px}
.export textarea {
  margin-top:10px;
  width:100%;
  height:112px;
  resize:none;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:0;
  padding:10px;
  font:11px/1.5 monospace;
  color:var(--ink)}
#message {
  margin:0;
  min-height:24px;
  padding:4px 16px;
  font-size:10px;
  color:var(--accent)}
details {
  border-top:1px solid var(--line);
  padding:16px 0}
summary {
  font-size:12px;
  font-weight:650;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center}
.group-reset {
  font-weight:400;
  border:0;
  background:none;
  color:var(--muted);
  font-size:10px}
.control label {
  display:flex;
  justify-content:space-between;
  color:var(--ink);
  font-size:11px;
  margin-top:18px}
.control p {
  font-size:10px;
  line-height:1.5;
  color:var(--muted);
  margin:6px 0 0}
input[type=range] {
  width:100%;
  accent-color:var(--accent);
  height:14px}
.control input[type=number] {
  width:68px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:0;
  font:10px monospace;
  text-align:right;
  color:var(--ink);
  padding:3px}
.palette {
  padding-bottom:20px}
.palette>div {
  display:flex;
  gap:8px}
.swatch {
  width:24px;
  height:24px;
  border:2px solid transparent;
  border-radius:0;
  padding:0}
.swatch.active {
  outline:2px solid var(--accent);
  outline-offset:2px}
#thumbnails {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:20px 0}
.thumb {
  padding:7px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:0}
.thumb img {
  width:100%;
  display:block}
.thumb.active {
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent)}
.art-note {
  border-top:1px solid var(--line);
  margin:24px 0;
  padding-top:15px;
  font-size:11px;
  line-height:1.6;
  color:var(--muted)}
.art-note a {
  color:var(--accent)}
#text-settings .button {
  margin-top:15px}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0)}
@media(max-width:1100px) {
  .workspace {
  grid-template-columns:160px minmax(280px,1fr) 250px}
.library,.inspector {
  padding:16px 12px}
}
@media(max-width:800px) {
  .editor {
  height:auto;
  overflow:auto}
.workspace {
  height:auto;
  grid-template-columns:1fr}
.library {
  display:block;
  border-bottom:1px solid var(--line)}
#thumbnails {
  grid-template-columns:repeat(4,1fr)}
.thumb img {
  max-height:65px;
  object-fit:contain}
.library .art-note {
  margin:12px 0}
.viewport {
  min-height:650px}
.canvas-wrap {
  min-height:350px}
.inspector {
  border:0}
.export-head {
  flex-wrap:wrap}
.export {
  height:210px}
.toolbar {
  padding:10px 5px}
.editor header {
  padding:0 12px}
.editor .brand span {
  display:none}
}