body{height:100dvh;display:grid;grid-template-rows:58px minmax(0,1fr) 32px;overflow:hidden;background:var(--color-4)}header,main,footer{max-width:none;margin:0}header{padding:10px 22px;background:#fff8ee;border-bottom:1px solid #807f7d40;z-index:2}.brand{font-size:27px}header small{font-size:12px}.workspace{display:grid;grid-template-columns:308px minmax(0,1fr);padding:0;min-height:0;overflow:hidden}.controls{overflow-y:auto;overscroll-behavior:contain;padding:12px;background:#fff8ee;scrollbar-width:thin;scrollbar-color:var(--color-5) transparent;border-right:1px solid #807f7d40}section{background:#fffdf9;border:1px solid #807f7d35;border-radius:12px;padding:14px;margin-bottom:12px}h2{font-size:13px;display:flex;align-items:center;gap:8px;margin:0 0 14px}h2 b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--color-3);color:var(--color-4);font-size:11px}label{font-size:12px;margin:12px 0 8px}input[type=text],select{font-size:12px;padding:9px;background:#fff8ee;border-color:#807f7d45;border-radius:7px;margin-top:6px}input[type=color]{height:32px;border:1px solid #807f7d45;border-radius:6px;margin-top:6px}input[type=range]{margin-top:10px;height:15px}.font-row{display:grid;grid-template-columns:1fr 76px;gap:10px}.row{justify-content:flex-start;gap:16px}.row label{font-size:12px}.remember{font-size:11px;line-height:1.6}.drop{background:transparent;border-color:#807f7d50;padding:20px 10px;font-size:12px;font-weight:400}.drop:hover{background:#fee2b850;border-color:var(--color-3)}.drop .hint{display:block;margin-top:7px}input[type=file]{font-size:10px;max-width:100%}.hint{font-size:10px;line-height:1.5;color:#625c55}.select-source{display:none}.tabs{display:flex;background:#f3eee7;padding:3px;border-radius:8px;gap:3px;margin-bottom:12px}.tabs button{flex:1;font-size:11px;padding:11px 4px;border:1px solid transparent;background:transparent;color:#625c55;border-radius:6px;font-weight:400}.tabs button[aria-pressed=true]{background:#fffdf9;border-color:#807f7d25;color:var(--color-3);box-shadow:0 1px 3px #29272512}.patterns{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0 16px}.patterns button{padding:8px 3px;background:#fffdf9;color:#625c55;border:1px solid #807f7d40;font-size:10px;font-weight:400}.patterns button[aria-pressed=true]{border:1px solid var(--color-3);color:var(--color-3);background:#fee2b833}.patterns svg{display:block;width:34px;height:26px;margin:0 auto 5px;fill:currentColor}.thumbs{gap:6px}.thumbs img{width:44px;height:44px}.image-tools{justify-content:space-between;margin-top:12px}.image-tools button{font-size:10px;padding:5px 9px}.image-tools small{font-size:10px}.downloads{display:grid;gap:8px}.downloads button{font-size:12px;padding:11px}.preview-workspace{min-width:0;min-height:0;display:flex;flex-direction:column;background-color:#f3eee7;background-image:conic-gradient(#807f7d0b 25%,transparent 0 50%,#807f7d0b 0 75%,transparent 0);background-size:20px 20px}.preview-top{display:flex;justify-content:space-between;padding:14px 20px;font-size:9px;letter-spacing:1.2px;color:#807f7d}.stage{flex:1;min-height:0;padding:28px;margin:0;background:transparent;border-radius:0;overflow:auto;color:#625c55}.stage canvas{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 10px 36px #29272520}.empty-icon{display:block;font-size:48px;color:var(--color-5);opacity:.6;margin-bottom:16px}#empty{font-size:12px;line-height:1.8}output{float:right;color:#625c55;font-size:11px}details{margin:10px 0}summary{display:inline-block;padding:7px 10px;border:1px solid #807f7d35;border-radius:7px;font-size:11px}#symbols{margin-top:8px;border:1px solid #807f7d30;border-radius:9px;padding:7px;background:#fff8ee}.symbol-tabs{display:flex;gap:3px;margin-bottom:7px}.symbol-tabs button{flex:1!important;padding:5px 2px!important;font-size:9px!important;border-radius:14px!important}.symbol-tabs button[aria-selected=true]{background:var(--color-3)!important;color:var(--color-4)!important}.symbol-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;max-height:170px;overflow:auto}#symbols .symbol-grid button{margin:0;padding:9px 2px;background:#fffdf9;font-size:16px}#status{font-size:11px}.disclaimer{font-size:9px;line-height:1.5;color:#807f7d;padding:0 6px}footer{display:flex;justify-content:space-between;align-items:center;padding:6px 18px;background:#fff8ee;border-top:1px solid #807f7d30;font-size:10px;color:#625c55}@media(max-width:700px){body{height:auto;min-height:100dvh;display:block;overflow:auto}header{height:58px;position:sticky;top:0}.workspace{display:flex;flex-direction:column;overflow:visible}.preview-workspace{order:-1;position:sticky;top:58px;z-index:1;height:36dvh;min-height:220px;border-bottom:1px solid #807f7d40}.preview-top{padding:8px 14px}.stage{padding:10px}.controls{overflow:visible;border:0;padding:12px}.stage canvas{max-height:calc(36dvh - 50px)}footer{flex-direction:column;gap:4px;padding:12px}.font-row{grid-template-columns:1fr 90px}}