*{margin:0;padding:0;box-sizing:border-box;font-family:Consolas, "Courier New", monospace;font-size:18px;}
html,body{width:100vw;height:100vh;overflow:hidden;background:#fff;}
#container{
    width:100%;
    height:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr;
}
#drawPanel{position:relative;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;}
canvas{width:100%;height:100%;display:block;}
#ctrlBar{
    position:absolute;
    top:20px;
    left:20px;
    z-index:10;
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:flex-start;
}
.btn-group{
    display:flex;
    flex-direction:column;
    gap:8px;
}
button{
    padding:2px 4px;
    cursor:pointer;
    text-align:center;
}
.mode-group{
    display:flex;
    flex-direction:column;
    gap:8px;
}
.mode-group label{
    padding:4px 6px;
}
#fisherLabel{
    position:absolute;
    bottom:36px;
    left:36px;
    z-index:10;
    color:#fa0404;
    pointer-events:none;
    font-size:18px;
    line-height:1.4;
    text-align:right;
}
#hintBar{
    position:absolute;
    right:24px;
    bottom:24px;
    z-index:10;
    max-width:60%;
    color:#0055cc;
    pointer-events:none;
    font-size:18px;
    line-height:1.4;
    text-align:right;
}
#watermark{
    position:fixed;
    right:20px;
    bottom:14px;
    z-index:999;
    text-align:right;
    pointer-events:none;
    line-height:1.5;
}
.wm-title{
    font-size:15px;
    color:rgba(40,40,40,0.78);
    font-weight:600;
}
.wm-copy{
    font-size:12px;
    color:rgba(130,130,130,0.7);
    margin-top:4px;
}
#infoPanel{
    width:100%;
    height:100%;
    padding:16px;
    overflow:auto;
    border-left:1px solid #ccc;
    min-width:0;
    min-height:0;
    font-family:Consolas, "Courier New", monospace;
}
pre{white-space:pre-wrap;font-size:18px;line-height:1.52;font-family:Consolas, "Courier New", monospace;}
.mono{font-family:Consolas, "Courier New", monospace;}
.info-top{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    position:sticky;
    top:0;
    background:#fff;
    padding-bottom:8px;
    margin-bottom:8px;
    z-index:1;
}
.info-cols{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-bottom:8px;
}
.red{color:#f00;font-weight:bold;}
.blue{color:#0055cc;font-weight:bold;}
.grey{color:#666;}
.p1{color:#d82828;}
.p2{color:#2878d8;}
.p3{color:#28a848;}
.p4{color:#9c27b0;}
.p5{color:#ff9800;}
.orig{color:#999;}