*{box-sizing:border-box} :root{color-scheme:dark;--blue:#347cf7;--toolbar:76px;--top:58px}body{margin:0;background:#101114;color:#f4f5f7;font:14px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow:hidden;height:100dvh}button,.button{font:inherit;color:inherit;border:0;border-radius:10px;background:#292c32;padding:10px 14px;min-height:44px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;touch-action:manipulation}button:disabled{opacity:.35;cursor:default}.primary{background:var(--blue);color:white}button:focus-visible,a:focus-visible{outline:2px solid #8ac9ff;outline-offset:2px}[hidden]{display:none!important}.topbar{height:calc(var(--top) + env(safe-area-inset-top));padding:calc(7px + env(safe-area-inset-top)) 14px 7px;display:flex;align-items:center;justify-content:space-between;gap:8px;position:fixed;inset:0 0 auto;z-index:8;background:#15171be8}.identity{font-weight:700;white-space:nowrap}.identity small{font-size:10px;color:#9096a2;font-weight:400}.segmented{display:flex;gap:3px;background:#22252b;border-radius:10px;padding:3px}.segmented button{padding:6px 12px;min-height:36px;background:transparent}.segmented [aria-pressed=true]{background:#3b414d;color:white}main{position:absolute;inset:calc(var(--top) + env(safe-area-inset-top)) 0 calc(var(--toolbar) + env(safe-area-inset-bottom))}.workspace{height:100%;display:flex;align-items:center;justify-content:center;position:relative;flex-direction:column;padding:24px 12px 28px}.stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;width:100%;height:100%}#canvasWrap{position:relative;aspect-ratio:4/3;width:min(100%,calc((100dvh - 210px)*4/3));max-height:100%;flex-shrink:0;box-shadow:0 6px 30px #0006}#canvasWrap.portrait{aspect-ratio:3/4;width:min(100%,calc((100dvh - 210px)*3/4))}canvas{display:block;width:100%;height:100%}#overlay{position:absolute;inset:0;touch-action:none;cursor:grab}#overlay:active{cursor:grabbing}.title-placeholder{position:absolute;left:7%;bottom:19%;padding:8px 12px;border:1px dashed #ffffff75;background:#0005;font-size:14px;min-height:38px}#empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0005}#dimensions{position:absolute;top:6px;color:#858d9a;font-size:11px}#status{position:absolute;bottom:5px;left:12px;right:12px;text-align:center;font-size:11px;color:#9ca3b0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#warning{position:absolute;bottom:22px;left:12px;right:12px;font-size:12px;color:#ffd48d;margin:0;text-align:center;pointer-events:none}#warning:empty{display:none}.toolbar{position:fixed;inset:auto 0 0;z-index:10;height:calc(var(--toolbar) + env(safe-area-inset-bottom));padding:7px max(8px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom));display:flex;justify-content:space-evenly;background:#1b1d23f5;border-top:1px solid #ffffff0c;backdrop-filter:blur(16px)}.toolbar button{background:none;padding:2px 8px;min-width:46px;display:flex;flex-direction:column;gap:2px;font-size:11px;color:#b6becb}.toolbar b{font-size:23px;line-height:28px;font-weight:400}.toolbar button.active{color:#78aaff;background:#347cf71c}.tool-panel{position:absolute;z-index:9;bottom:0;left:8px;right:8px;max-height:min(43dvh,340px);border:1px solid #ffffff13;border-radius:18px 18px 0 0;background:#202329f5;box-shadow:0 -8px 28px #0004;backdrop-filter:blur(18px);overflow:auto;overscroll-behavior:contain;touch-action:pan-y;padding:8px 14px 14px}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px}.panel-head button{background:transparent;color:#8ab5ff;padding:6px 10px}.panel-content{padding-bottom:4px}.row{display:flex;gap:8px;flex-wrap:wrap}.row>*{flex:1}.dark-tabs{width:max-content;margin-bottom:12px}.control{margin:8px 0 12px}.control label{display:flex;align-items:center;justify-content:space-between;color:#c2c8d2;font-size:12px;gap:10px}.control input[type=number]{width:82px;background:#111318;color:white;border:1px solid #414652;border-radius:6px;padding:6px;font:inherit}.control input[type=range]{display:block;width:100%;height:28px;accent-color:var(--blue);touch-action:pan-x}textarea{width:100%;resize:none;border:1px solid #474e5a;border-radius:10px;background:#121419;color:white;font:16px/1.5 inherit;padding:10px;min-height:70px}details{margin-top:12px}summary{padding:8px 0;color:#aeb8c9;cursor:pointer;min-height:40px}dialog{border:1px solid #434854;border-radius:16px;background:#181b20;color:white;padding:12px;width:min(94vw,650px);max-height:94dvh;overflow:auto}dialog::backdrop{background:#000b}#result{display:block;max-width:100%;max-height:66dvh;width:auto;height:auto;margin:auto;object-fit:contain;user-select:auto;-webkit-touch-callout:default}#exportSize{font-size:12px;text-align:center;color:#aeb8c9}.save-hint{font-size:12px;color:#aeb8c9;text-align:center;margin-bottom:4px}.chrome-hidden .topbar,.chrome-hidden .toolbar,.chrome-hidden .tool-panel,.chrome-hidden #dimensions,.chrome-hidden #status,.chrome-hidden #warning,.chrome-hidden .title-placeholder{visibility:hidden}#restoreChrome{position:fixed;bottom:calc(16px + env(safe-area-inset-bottom));right:16px;z-index:20;background:#252932bb;font-size:12px}body.busy .toolbar{pointer-events:none} @media(min-width:900px){:root{--toolbar:80px}.workspace{padding:26px 30px 28px}.tool-panel{left:auto;right:24px;bottom:18px;width:330px;max-height:calc(100% - 30px);border-radius:16px}.toolbar{justify-content:center;gap:28px}#canvasWrap{width:min(76vw,calc((100dvh - 210px)*4/3))}#canvasWrap.portrait{width:min(76vw,calc((100dvh - 210px)*3/4))}} @media(max-height:500px) and (max-width:950px){:root{--top:48px;--toolbar:60px}.workspace{padding:12px 12px 16px}#canvasWrap{width:calc((100dvh - 150px)*4/3)}#canvasWrap.portrait{width:calc((100dvh - 150px)*3/4)}.tool-panel{max-height:65dvh;left:auto;width:min(340px,52vw)}.toolbar b{font-size:18px;line-height:20px}.title-placeholder{font-size:11px;padding:4px 6px;min-height:28px}}

@media(max-width:899px){.tool-panel{padding:4px 12px 8px}.panel-head{margin-bottom:0}.dark-tabs{margin-bottom:4px}.control{margin:4px 0 6px}.control label{font-size:11px}.control input[type=number]{padding:3px 5px}.control input[type=range]{height:22px}.tool-panel:has(#darkPanel:not([hidden])){max-height:235px}}

body{position:fixed;inset:0;height:var(--editor-height,100dvh)}#canvasWrap{width:min(100%,calc((var(--editor-height,100dvh) - 210px)*4/3))}#canvasWrap.portrait{width:min(100%,calc((var(--editor-height,100dvh) - 210px)*3/4))}textarea{font-family:inherit;font-size:16px;line-height:1.5}@media(max-height:500px) and (max-width:950px){#canvasWrap{width:calc((var(--editor-height,100dvh) - 150px)*4/3)}#canvasWrap.portrait{width:calc((var(--editor-height,100dvh) - 150px)*3/4)}}

#dropHint{display:none;position:fixed;inset:12px;z-index:1000;pointer-events:none;border:3px dashed #3996ff;border-radius:18px;background:rgba(12,22,40,.82);color:white;font-size:24px;font-weight:700;align-items:center;justify-content:center}body.file-drag #dropHint{display:flex}