:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;color:#e9eff0;background:#0b1115;font-size:16px}*{box-sizing:border-box}body{margin:0}header{height:76px;padding:0 32px;border-bottom:1px solid #293239;display:flex;align-items:center;justify-content:space-between;background:#10191e}.brand{font-size:28px;letter-spacing:-1.5px;font-weight:800;text-decoration:none;color:#fff}.brand span{color:#b8d46a}.brand small{font-size:12px;font-weight:500;letter-spacing:2px;color:#a5b4bb;margin-left:20px}.local{font-size:13px;color:#9cbbb3}main{display:grid;grid-template-columns:310px minmax(0,1fr);min-height:calc(100vh - 76px)}aside{padding:26px 24px;border-right:1px solid #293239;background:#10191e}section{padding-bottom:24px;margin-bottom:23px;border-bottom:1px solid #293239}.step{font-size:12px;letter-spacing:1.6px;color:#82a19f;margin-bottom:16px;font-weight:600}.upload{border:1px dashed #507773;border-radius:8px;min-height:106px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:9px;cursor:pointer;background:#15262a;position:relative}.upload:hover,.upload.drag{background:#1e383c;border-color:#b8d46a}.upload input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}.upload strong{font-size:15px}.upload span,.meta{font-size:13px;color:#9fadb3;line-height:1.5}.meta{overflow-wrap:anywhere;margin:10px 0}.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.fields label,.field{display:block;font-size:14px;color:#bbc8cc}.fields input,select{width:100%;margin-top:8px;height:42px;background:#0c1419;color:#eef4f4;border:1px solid #3a4a52;border-radius:5px;padding:8px;font:inherit}select{font-size:13px}input:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible{outline:2px solid #b8d46a;outline-offset:3px}#fit{font-size:13px;line-height:1.5;color:#80d8bd}.bad{color:#ffae90!important}.colorlabel{display:flex;align-items:center;justify-content:space-between;font-size:14px;margin-top:12px}input[type=color]{border:0;padding:0;width:38px;height:25px;background:none}.range{display:block;font-size:14px;margin:16px 0}.range output{float:right;color:#97b5ae}input[type=range]{display:block;width:100%;margin:13px 0;accent-color:#b8d46a}.check{font-size:14px;display:block;line-height:1.6}.check input{accent-color:#b8d46a;margin-right:6px}.check span{display:block;margin-left:24px;font-size:12px;color:#8b9ea7}.textbutton{padding:0!important;border:0!important;color:#b8d46a!important;background:none!important;font-size:12px!important}.row{display:flex;justify-content:space-between}details{font-size:13px;color:#91a4ac;line-height:1.6}summary{cursor:pointer;color:#cad5d8;font-size:14px}a{color:#b8d46a}.workspace{padding:25px 28px;min-width:0}.toolbar{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:22px}.viewbuttons{display:flex;background:#152027;border:1px solid #2b3d45;border-radius:7px;padding:4px;gap:3px}button{font:inherit;cursor:pointer;color:#bcccd1;background:#17272e;border:1px solid #364c55;padding:10px 14px;border-radius:5px;font-size:14px}button:hover{background:#253b43;color:#fff}button:disabled{opacity:.45;cursor:default}.viewbuttons button{border:0;background:none}.viewbuttons .active{background:#b8d46a;color:#102723}#renderstatus{font-size:12px;color:#8eaaa6}.previews{display:grid;gap:24px}.panelhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.panelhead>div{display:flex;gap:10px;align-items:center}h1,h2{font-size:16px;font-weight:500;margin:0}.tag{font-size:12px;color:#607d88}canvas{width:100%;height:auto;display:block;background:#152329;border:1px solid #344047;border-radius:6px}footer{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:#7b939e;margin:20px 0}#error{background:#3b2420;color:#ffd6c8;padding:16px;border-radius:6px;margin-bottom:20px}[hidden]{display:none!important}@media(min-width:1800px){.previews.both{grid-template-columns:1fr 1fr}}@media(max-width:850px){header{padding:0 18px}.brand small{display:none}.local{font-size:11px}main{display:flex;flex-direction:column}.workspace{order:0;padding:18px 14px}aside{order:1;border-right:0;display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:20px}.toolbar{flex-wrap:wrap}.viewbuttons button{font-size:12px;padding:9px 11px}section{margin:0}details{grid-column:1/-1}footer{flex-wrap:wrap}.panelhead button{font-size:12px}}@media(max-width:480px){aside{grid-template-columns:1fr}.local{max-width:110px;text-align:right}.panelhead button{padding:9px}.workspace{padding-top:16px}}

.header-actions{display:flex;align-items:center;gap:24px}.report-bug{background:#ffca66;color:#201606;border-color:#ffca66;font-weight:800;letter-spacing:.4px;padding:13px 20px}.report-bug:hover{background:#ffdc91;color:#201606}dialog{width:min(560px,calc(100% - 32px));background:#142129;color:#e9eff0;border:1px solid #526871;border-radius:12px;padding:24px}dialog::backdrop{background:#02080dc9}dialog p{line-height:1.5}dialog label{display:block;margin:18px 0 8px}.bug-heading{display:flex;justify-content:space-between;align-items:center;gap:15px}.bug-heading h2{font-size:22px}.bug-heading button{background:none;border:0;font-size:20px}dialog textarea{width:100%;resize:vertical;border:1px solid #55717b;border-radius:6px;background:#0b141a;color:#fff;padding:12px;font:inherit;line-height:1.5}.bug-actions{display:flex;gap:12px;flex-wrap:wrap}#bug-status{font-size:14px;color:#98e6ce}@media(max-width:850px){.header-actions .local{display:none}.report-bug{font-size:12px;padding:12px}header{gap:12px}}

.field>input[type=number]{display:block;width:100%;margin-top:8px;height:42px;background:#0c1419;color:#eef4f4;border:1px solid #3a4a52;border-radius:5px;padding:8px;font:inherit}

:root{background:#080808}header,aside{background:#101010} .brand span{color:#b8d46a} .viewbuttons .active{background:#b8d46a} a{color:#b8d46a}

.store-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 14px;border:1px solid #b8d46a;border-radius:5px;color:#b8d46a;font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap}.store-link:hover{background:#b8d46a;color:#10191e}.store-link:focus-visible{outline:2px solid #b8d46a;outline-offset:3px}@media(max-width:850px){header{height:auto;min-height:76px;flex-wrap:wrap;gap:12px;padding-block:12px}.header-actions{flex-wrap:wrap;gap:10px}.header-actions .local{display:none}}@media(max-width:480px){.header-actions{width:100%}.store-link,.header-actions .report-bug{flex:1;font-size:12px;padding:10px}}


/* Stable mobile panes: the preview never changes position on field focus.
   Only the controls scroll; keyboard resizing changes their available height. */
@media(max-width:850px){
 html,body{height:100%;overflow:hidden}
 main{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);height:var(--mobile-main-height,calc(100svh - 124px));min-height:0;overflow:hidden}
 .workspace{grid-row:1;position:relative;min-width:0;padding:6px 0 0;background:#080808;border-bottom:1px solid #344047}
 .workspace .toolbar{margin:0 12px 4px;min-height:14px}
 .workspace .panelhead{margin:0 12px 6px}
 .workspace .panelhead button{padding:6px 10px}
 .workspace canvas{height:auto;width:100%;aspect-ratio:1672/941;max-height:none;object-fit:contain;border:0;border-radius:0}
 .workspace footer{display:none}
 .workspace #error{max-height:50px;overflow:auto;padding:6px;margin:0 0 4px;font-size:12px}
 aside{grid-row:2;display:block;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;scroll-padding:16px;padding:18px 20px calc(24px + env(safe-area-inset-bottom))}
 aside section{margin-bottom:16px;padding-bottom:16px}
 aside .step{margin-bottom:10px}
 aside .upload{min-height:56px;padding:10px 12px;gap:4px}
 aside .upload strong{font-size:14px}
 aside .upload span{font-size:12px}
 aside .meta{margin:8px 0}
 header{padding-block:8px;gap:8px;min-height:0}
 .header-actions{gap:8px}
 .header-actions :is(.store-link,.report-bug){min-height:36px;padding:8px 10px}
 aside :is(input,select,textarea){scroll-margin-block:16px}
 input,select,textarea{font-size:16px!important}
}