:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --bg:#ffffff; --panel:#ffffff; --panel2:#f2f2f2; --line:#dcdcdc;
  --ink:#1f1f1f; --ink2:#666666; --laurel:#2f7d32; --laurel2:#256b28;
  --red:#c62828; --red2:#a32020; --gold:#b8860b; --sel:#c62828;
  --work:#e9e9e9; --field:#ffffff;
  --r:3px;
  font-family:Arial,Helvetica,"Segoe UI",sans-serif;
  color:var(--ink);
}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
html,body{height:100%;margin:0}
body{background:var(--bg);overflow:hidden;display:flex;flex-direction:column}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--laurel);outline-offset:2px}

.app{display:grid;grid-template-rows:auto 1fr;flex:1;min-height:0}
header.top{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:8px;margin-right:6px}
.brand h1{font-family:Arial,Helvetica,sans-serif;font-size:20px;font-weight:700;letter-spacing:0;color:var(--red);margin:0}
.brand span{font-size:13px;color:var(--ink2)}
.tb{display:flex;gap:4px;align-items:center}
.sep{width:1px;height:26px;background:var(--line);margin:0 4px}
.btn{border:1px solid var(--line);background:var(--field);border-radius:var(--r);padding:6px 10px;font-size:14px;line-height:1.2;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.btn:hover{border-color:var(--ink2)}
.btn:disabled{opacity:.45;cursor:default}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff;font-weight:600}
.btn.primary:hover{background:var(--red2)}
.btn.green{background:var(--laurel);border-color:var(--laurel);color:#fff}
.btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover{background:var(--panel2)}
.btn.sm{padding:4px 8px;font-size:13px}
.spacer{flex:1}
.zoomlbl{font-size:13px;color:var(--ink2);min-width:44px;text-align:center;font-variant-numeric:tabular-nums}

.main{display:grid;grid-template-columns:260px 1fr 290px;min-height:0}
aside{background:var(--panel);overflow-y:auto;min-height:0}
aside.left{border-right:1px solid var(--line)}
aside.right{border-left:1px solid var(--line)}
.sec{padding:12px 14px;border-bottom:1px solid var(--line)}
.sec h3{margin:0 0 10px;font-family:Arial,Helvetica,sans-serif;font-size:14px;font-weight:700}
.sec p.hint{margin:0 0 8px;font-size:12.5px;color:var(--ink2);line-height:1.45}
.addgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.addgrid .btn{justify-content:flex-start;padding:8px}
.addgrid svg{flex:none}
.adddetails summary{display:block;cursor:pointer;font-size:14px;font-weight:700;color:var(--ink);list-style:none;user-select:none}
.adddetails summary::-webkit-details-marker{display:none}
.adddetails summary::before{content:"+ ";color:var(--ink2);font-weight:400}
.adddetails[open] summary::before{content:"\2212 "}
.adddetails .addgrid{margin-top:10px}
.row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.row>label{font-size:12.5px;color:var(--ink2);min-width:74px}
.row .grow{flex:1;min-width:0}
.row input[type=number]{width:70px}
.row input[type=range]{flex:1;min-width:0;accent-color:var(--laurel)}
input[type=text],input[type=number],select,textarea{background:var(--field);border:1px solid var(--line);border-radius:3px;padding:5px 7px;font-size:13.5px}
select{padding:5px 4px}
textarea{width:100%;resize:vertical;min-height:120px;line-height:1.45;font-size:13.5px}
input[type=color]{width:34px;height:30px;border:1px solid var(--line);border-radius:3px;padding:2px;background:var(--field)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.seg button{border:0;background:var(--field);padding:5px 8px;font-size:13px;border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--laurel);color:#fff}
.tpl{display:grid;gap:6px}
.tpl .btn{justify-content:space-between}
.tpl small{color:var(--ink2)}
.empty{padding:22px 16px;color:var(--ink2);font-size:13.5px;line-height:1.5}
.empty kbd,.keys kbd{font-family:inherit;font-size:12px;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 5px;background:var(--field)}
.keys{font-size:12.5px;color:var(--ink2);line-height:1.9}
.chk{display:flex;align-items:center;gap:6px;font-size:13px}
.chk input{accent-color:var(--laurel)}
.warn{font-size:12.5px;color:var(--red);margin:6px 0 0}

.stage{position:relative;background:var(--work);min-width:0;min-height:0;overflow:hidden;touch-action:none}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.status:empty{display:none}
.status{position:absolute;left:10px;bottom:10px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:4px 8px;font-size:12px;color:var(--ink2);pointer-events:none}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--panel);padding:9px 14px;border-radius:var(--r);font-size:14px;z-index:50;max-width:90vw;opacity:0;transition:opacity .2s;pointer-events:none}
.toast.show{opacity:1}

.modal{position:fixed;inset:0;background:rgba(10,16,12,.5);display:none;align-items:center;justify-content:center;z-index:40;padding:16px}
.modal.open{display:flex}
.dlg{background:var(--panel);border-radius:4px;max-width:560px;width:100%;max-height:calc(100% - 20px);overflow:auto;padding:20px 22px;border:1px solid var(--line)}
.dlg h2{margin:0 0 4px;font-family:Arial,Helvetica,sans-serif;font-size:20px}
.dlg .sub{margin:0 0 16px;color:var(--ink2);font-size:14px;line-height:1.45}
.opts{display:grid;gap:6px;margin-bottom:14px}
.opt{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r);padding:9px 11px;background:var(--field);cursor:pointer}
.opt input{margin-top:3px;accent-color:var(--red)}
.opt b{font-size:14px;display:block}
.opt small{color:var(--ink2);font-size:12.5px;line-height:1.4}
.fieldset{margin-bottom:12px}
.fieldset>.lbl{font-size:13px;font-weight:600;margin-bottom:6px;display:block}
.info{font-size:13px;color:var(--ink2);background:var(--panel2);border-radius:var(--r);padding:8px 10px;line-height:1.5;margin-bottom:14px}
.bar{height:8px;background:var(--panel2);border-radius:4px;overflow:hidden;margin:10px 0 4px}
.bar i{display:block;height:100%;width:0;background:var(--laurel);transition:width .15s}
.dlgact{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}

.sitefoot{flex:none;display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;padding:7px 12px;background:var(--panel);border-top:1px solid var(--line);font-size:12px;color:var(--ink2)}
.sitefoot .footnote{line-height:1.5}
.sitefoot a.flink{color:var(--ink2);text-decoration:none;border-bottom:1px solid transparent}
.sitefoot a.flink:hover{color:var(--ink);border-bottom-color:var(--ink2)}

.faq details{border:1px solid var(--line);border-radius:var(--r);margin-bottom:8px;background:var(--field)}
.faq summary{cursor:pointer;padding:9px 11px;font-weight:700;font-size:14px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;font-weight:400;color:var(--ink2)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:0;padding:0 11px 11px;font-size:13.5px;color:var(--ink2);line-height:1.5}

.legal p{margin:0 0 10px;font-size:14px;line-height:1.6;color:var(--ink2)}
.legal h3{margin:14px 0 6px;font-size:14px;color:var(--ink)}
.legal ul{margin:0 0 10px;padding-left:18px;font-size:14px;color:var(--ink2);line-height:1.6}

.banner{flex:none;display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--panel2);color:var(--ink2);border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.45}
.banner b{font-size:15px;letter-spacing:.05em;color:var(--red);flex:none}
.banner span{flex:1;min-width:0}
.banner a{color:var(--ink2);text-decoration:underline;text-underline-offset:2px}
.banner a:hover{color:var(--ink)}
.banner .banner-close{flex:none;background:transparent;border:0;color:var(--ink2);font-size:20px;line-height:1;cursor:pointer;padding:0 6px}
.banner .banner-close:hover{color:var(--ink)}

a.btn{text-decoration:none}
body.docpage{display:block;overflow:auto}
.back{display:inline-block;margin:18px 0 0 20px;color:var(--ink2);text-decoration:none;font-size:14px}
.back:hover{color:var(--ink)}
.doc{max-width:760px;margin:0 auto;padding:8px 20px 80px;color:var(--ink)}
.doc h1{font-size:26px;margin:0 0 8px}
.doc h2{font-size:18px;margin:28px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.doc p,.doc li{font-size:15px;line-height:1.65;color:var(--ink2)}
.doc ul{padding-left:20px;margin:0 0 8px}
.doc b{color:var(--ink)}
.doc kbd{font-family:inherit;font-size:12.5px;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 5px;background:var(--field)}

.mob{display:none}
@media (max-width:980px){
  .main{grid-template-columns:1fr}
  aside{position:fixed;top:0;bottom:0;z-index:30;width:min(320px,88vw);transform:translateX(-105%);transition:transform .2s;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 0 30px rgba(0,0,0,.25)}
  aside.left{left:0}
  aside.right{right:0;left:auto;transform:translateX(105%)}
  aside.open{transform:none}
  .mob{display:inline-flex}
  .brand span{display:none}
  .hide-sm{display:none}
}
@media (prefers-reduced-motion:reduce){aside,.toast,.bar i{transition:none}}

.tut{position:fixed;inset:0;z-index:60;display:none}
.tut.open{display:block}
.tut-spot{position:fixed;border-radius:8px;box-shadow:0 0 0 9999px rgba(10,10,10,.72);pointer-events:none;transition:top .2s ease,left .2s ease,width .2s ease,height .2s ease}
.tut-tip{position:fixed;width:280px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:0 10px 28px rgba(0,0,0,.3)}
.tut-step{font-size:11px;color:var(--ink2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.tut-tip h3{margin:0 0 6px;font-size:16px}
.tut-tip p{margin:0 0 12px;font-size:13.5px;color:var(--ink2);line-height:1.5}
.tut-act{display:flex;align-items:center;gap:6px}
@media (prefers-reduced-motion:reduce){.tut-spot{transition:none}}