:root{color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;background:#0f1115;color:#e8e8ea;font:14px/1.4 system-ui,Segoe UI,Arial,sans-serif}
a{color:#7aa7ff}

/* header */
#top{display:flex;align-items:center;gap:14px;height:52px;padding:0 18px;border-bottom:1px solid #2a2e36;background:#13151a}
.brand{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-weight:800;font-size:16px;white-space:nowrap}
.brand svg{width:26px;height:26px}
#top h1{margin:0;font-size:13px;font-weight:500;color:#b9c0cc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badges{margin-left:auto;color:#8b8f99;font-size:12px;white-space:nowrap}

#app{display:grid;grid-template-columns:1fr 420px;height:calc(100vh - 52px);min-height:560px}

/* preview */
#stage{display:flex;flex-direction:column;padding:20px;gap:14px;min-width:0}
#frame{flex:1;display:flex;align-items:center;justify-content:center;min-height:280px;border-radius:12px;border:1px solid #2a2e36;
       background:repeating-conic-gradient(#2a2d33 0 25%,#1f2126 0 50%) 0 0/20px 20px;overflow:hidden;padding:12px}
#pv{max-width:100%;max-height:calc(100vh - 230px);outline:1px dashed rgba(255,255,255,.25)}
.scrub{display:flex;gap:10px;align-items:center}
.scrub input[type=range]{flex:1;min-width:60px}
#tRead{font-variant-numeric:tabular-nums;color:#8b8f99;min-width:110px;text-align:right}
.jump{white-space:nowrap;text-decoration:none;color:#e8e8ea;background:#23262d;border:1px solid #333843;border-radius:6px;padding:6px 10px}
.hint{color:#8b8f99;font-size:12px}

/* panel */
#panel{background:#16181d;border-left:1px solid #2a2e36;overflow:auto;padding:16px 18px 30px}
#panel h2{margin:20px 0 8px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#8b8f99}
#panel h2:first-child{margin-top:0}
.row{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.row > label:first-child{flex:1;min-width:120px}
input,select,button{font:inherit;color:inherit;background:#23262d;border:1px solid #333843;border-radius:6px;padding:6px 8px}
input[type=number]{width:62px}
input[type=color]{width:42px;height:32px;padding:2px;cursor:pointer}
input[type=checkbox]{width:16px;height:16px}
input[type=range]{padding:0}
select{max-width:220px}
button{cursor:pointer}
button:hover{background:#2d3139}
.primary{background:#2f6fed;border-color:#2f6fed;color:#fff}
.primary:hover{background:#2560d4}
.danger{color:#ff7b72}
.big{width:100%;padding:11px;margin-bottom:8px;text-align:left}
.big small{display:block;color:#b9c0cc;font-size:12px;margin-top:2px}
.primary.big small{color:#dbe6ff}
.big.off{opacity:.6}
.swatch{display:inline-block;width:11px;height:11px;border-radius:3px;border:1px solid #fff6;vertical-align:-1px}
.rule{display:flex;gap:6px;align-items:center;background:#1d2026;border:1px solid #2a2e36;border-radius:8px;padding:6px;margin-bottom:6px}
.rule input[type=text]{width:66px}
.chk{display:flex;gap:6px;align-items:center}
/* a box and its unit (h, m, s) never wrap apart */
.unit{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.len input[type=number]{width:52px}
#browserTip{margin-bottom:10px;color:#b9c0cc}
#browserTip:empty{display:none}

/* phones: keep the preview pinned at the top while settings scroll underneath */
@media (max-width:900px){
  #top{height:auto;padding:10px 14px;flex-wrap:wrap;gap:4px 12px}
  #top h1{white-space:normal;flex-basis:100%;order:3}
  .badges{display:none}
  #app{display:block;height:auto;min-height:0}
  #stage{padding:10px 12px;gap:8px;background:#0f1115;border-bottom:1px solid #2a2e36}
  #frame{flex:none;min-height:0;padding:6px;border-radius:8px}
  #pv{max-height:30vh}
  #tRead{min-width:0;font-size:12px}
  #stage .hint{display:none}
  #panel{border-left:0;overflow:visible;padding:14px 16px 26px}
  input[type=number]{width:52px}
}
@media (max-width:900px) and (min-height:520px){ #stage{position:sticky;top:0;z-index:5} }

/* guide below the app */
#guide{max-width:880px;margin:0 auto;padding:36px 18px 20px;color:#c9ced8;font-size:15px;line-height:1.6}
#guide h2{color:#fff;font-size:22px;margin:34px 0 10px}
#guide h2:first-child{margin-top:0}
#guide h3{color:#fff;font-size:16px;margin:22px 0 4px}
.table{overflow-x:auto}
#guide table{border-collapse:collapse;width:100%;font-size:14px}
#guide th,#guide td{border-bottom:1px solid #2a2e36;padding:8px 10px;text-align:left;vertical-align:top}
#guide th{color:#8b8f99;font-weight:600}
#guide code{background:#1d2026;border:1px solid #2a2e36;border-radius:4px;padding:1px 5px;font-size:13px;word-break:break-all}
/* preset pages: links to every preset, and the page intro */
.presets ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.presets a{display:block;height:100%;background:#16181d;border:1px solid #2a2e36;border-radius:10px;padding:12px 14px;text-decoration:none;color:#c9ced8;font-size:14px;line-height:1.45}
.presets a:hover{border-color:#2f6fed}
.presets strong{display:block;color:#fff;font-size:15px;margin-bottom:2px}
.intro p:first-of-type{font-size:16px;color:#e8e8ea}
/* ad slot: reserved height avoids layout shift once ad code is pasted in; stays hidden until then */
.ad-slot{min-height:280px;margin:34px 0;display:flex;align-items:center;justify-content:center}
.ad-slot[hidden]{display:none}
footer{border-top:1px solid #2a2e36;color:#8b8f99;font-size:12px;text-align:center;padding:18px}
.heart{color:#ff7b9c}
#thanks{margin:14px 0 0;padding-top:12px;border-top:1px solid #2a2e36;text-align:center}

/* export dialog */
#busy{position:fixed;inset:0;background:rgba(0,0,0,.7);display:none;align-items:center;justify-content:center;z-index:20;padding:16px}
#busy.on{display:flex}
#busy .box{background:#16181d;border:1px solid #2a2e36;border-radius:12px;padding:22px;width:min(440px,100%)}
#bar{height:10px;background:#23262d;border-radius:6px;overflow:hidden;margin:14px 0}
#bar div{height:100%;width:0;background:#2f6fed;transition:width .2s}
#busyBtns{margin-top:14px;justify-content:flex-end}

/* messages */
#toasts{position:fixed;right:16px;bottom:16px;z-index:30;display:flex;flex-direction:column;gap:8px;max-width:min(420px,calc(100vw - 32px))}
.toast{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:#1d2026;border:1px solid #333843;border-left:4px solid #2f6fed;border-radius:8px;padding:10px 12px;box-shadow:0 6px 24px #0008}
.toast span{flex:1;min-width:160px}
.toast.ok{border-left-color:#3fb950}
.toast.warn{border-left-color:#d29922}
.toast.error{border-left-color:#ff7b72}
.toast .x{background:none;border:0;color:#8b8f99;padding:2px 6px}
.toast a{white-space:nowrap}