:root{
  --bg:#f5f7f6;
  --card:#f9f9f9;
  --edge:#d9d9d9;
  --ink:#1f2b2a;
  --muted:#677270;
  --brand:#0A0A0A;
  --gap-s: 0.75rem;
  --gap-l: calc(var(--gap-s) * 2);
}

html, body{
  height:100%;
  margin:0;
}
body{
  background:var(--bg);
  color:var(--ink);
  font-family: "Roboto", Arial, system-ui, -apple-system, Ubuntu, sans-serif; 
  display:grid;
  grid-template-rows:auto 1fr auto;
  min-height:100vh;
}

header{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--brand);color:#fff;padding:1rem 1.25rem;
}
header h1{margin:0;font-size:1.6rem;font-weight:800;letter-spacing:.3px}
header h1 a { color: inherit; text-decoration: none; }
header h1 a:visited { color: inherit; }
header h1 a:hover { text-decoration: none; opacity: .95; }
header nav a{color:#fff;text-decoration:none;margin-left:1.25rem;opacity:.95}
header nav a:hover{opacity:1;text-decoration:underline}

footer{
  background:var(--brand);color:#fff;text-align:center;
  padding:.6rem 1rem;border-top:3px solid rgba(0,0,0,.1)
}

main{
  flex:1 1 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:var(--gap-l);
  padding:var(--gap-s);
  max-width:1200px;
  margin:0 auto;
  width:100%;
  min-height:0;
}

.left-col{
  display:grid;
  grid-template-rows: 3fr 5fr;
  row-gap: var(--gap-s);
  min-height: 0;
  height: 100%;
}

#section2{
  min-height:0;
  overflow:hidden;
  background:var(--card);
  border:1px solid var(--edge);
  border-radius:10px;
  padding:1rem;
  display:flex;
  flex-direction:column;
}

#section1{
  background:var(--card);
  border:1px solid var(--edge);
  border-radius:10px;
  padding:1rem;
  display:flex;
  flex-direction:column;
  min-height:0;
}
#section1 h2{margin:.2rem 0 1rem 0}
#section2 h2 { margin: .2rem 0 1rem 0; }

.s1-top{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  min-height:0;
}

.chooser{
  flex:1 1 auto;
  width:100%;
  box-sizing:border-box;
  overflow-y:auto;
  padding:.5rem;
  border:1px solid var(--edge);
  border-radius:6px;
  background:#f0f0f0;
}
.chooser label{
  display:block;
  margin:.35rem 0;
}

.s1-footer{
  flex:0 0 auto;
  border-top:1px solid var(--edge);
  margin-top:.5rem;
  padding-top:.5rem;
}
.params-row{
  display:flex;
  align-items:center;
  gap:.75rem;
  flex-wrap:wrap;
}

#showField { position: relative; }

#showField.fixed-box{
  background:#efefef;
  border:1px solid var(--edge);
  border-radius:8px;
  padding:.5rem;
  overflow:auto;
}

.s2-body{
  display:grid;
  grid-template-rows: auto 1fr;
  gap:1rem;
  flex:1 1 auto;
  min-height:0;
}

.s2-upload{
  display:flex;
  align-items:flex-start;
  gap:1rem;
  flex-wrap:wrap;
}

#out{
  flex:1 1 320px;
  max-height:160px;
  overflow:auto;
  background:#fff;
  border:1px solid var(--edge);
  padding:.5rem;
  border-radius:6px;
  white-space:pre-wrap;
  font-family:monospace;
  font-size:.9rem;
  word-break: break-word;
}

#scoreShowField{
  min-height:0;
  background:#efefef;
  border:1px solid var(--edge);
  border-radius:6px;
  padding:.5rem;
  overflow:auto;
}

.custom-panel{display:flex;flex-direction:column;gap:.5rem;height:100%}
.custom-top{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.linklike{background:none;border:none;text-decoration:underline;cursor:pointer;color:var(--muted)}
.custom-list{
  flex:1;min-height:120px;border:1px solid var(--edge);background:#e9e9e9;
  overflow:auto;border-radius:6px;padding:.5rem
}
.custom-file-row{display:flex;align-items:center;gap:.5rem;margin:.35rem 0}
.custom-file-row .fname{flex:1}
.custom-file-row input[type="number"]{width:120px}
.custom-file-row button{padding:.1rem .4rem;font-size:.85rem}
.custom-footer{display:flex;gap:1rem;align-items:center;justify-content:flex-end}

.overlay{
  position:absolute;inset:0;background:rgba(255,255,255,.86);
  display:flex;justify-content:center;align-items:center;z-index:10;border-radius:10px
}
.loadingContent{
  text-align:center;border:1px solid var(--edge);
  border-radius:8px;padding:.75rem 1rem;box-shadow:0 2px 10px rgba(0,0,0,.06)
}
.loadingContent img {
  width: 48px;
  height: 48px;
  display: block;
  margin: 0 auto 0.5rem auto;
}

.thumbs-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.thumbs-grid .thumb-item { width: 150px; }
.thumbs-grid .thumb-item img { width: 100%; display: block; }
.thumbs-title { text-align: center; margin-bottom: 1rem; font-size: 1.2rem; font-weight: bold;}

.hidden{display:none}
button{cursor:pointer}

main{
  padding-bottom: var(--gap-l);
}

header nav { display:flex; align-items:center; gap:.5rem; }
.icon-link{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;color:#fff;opacity:.95}
.icon-link:hover{opacity:1}
.material-symbols-outlined{
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
  font-size:30px;line-height:1;display:block
}

.tutorial main{display:flex;flex-direction:column;gap:var(--gap-l);min-height:0;overflow:hidden}
.t-intro{margin:0 0;font-size:1.2rem; text-align: justify}
.t-columns{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-l);flex:1 1 auto;min-height:0}
.t-box{background:var(--card);border:1px solid var(--edge);border-radius:10px;padding:1rem;display:flex;flex-direction:column;min-height:0}
.t-box h2{margin:.2rem 0 .6rem 0}
.t-scroll{flex:1 1 auto;overflow:auto}

.try-examples { margin-top:.5rem; color:var(--muted); font-size:.95rem; text-align: right;}
.try-examples a { color:var(--brand); text-decoration:underline; }

.h2-mini-link {
  font-size:.9rem; font-weight:500; margin-left:.5rem;
  color:var(--muted); text-decoration:underline;
}
.h2-mini-link:hover { color:var(--ink); }

.steps-grid{display:flex;flex-wrap:wrap;gap:var(--gap-s)}
.step-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--edge);border-radius:10px;padding:.75rem;width:clamp(260px,48%,420px);width: 100%;cursor:zoom-in}
.step-card img{width:100%;display:block;border-radius:6px;margin-bottom:.5rem}
.step-card .caption{font-size:1.2rem;}

.zoom{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:1000;padding:2rem}
.zoom.open{display:flex}
.zoom-body{background:#fff;border:1px solid var(--edge);border-radius:10px;max-width:min(90vw,1000px);max-height:90vh;padding:1rem;display:flex;flex-direction:column}
.zoom-body img{max-width:100%;max-height:82vh;border-radius:6px}
.zoom-body figcaption{font-size:1.2rem; text-align:center; margin-top:1rem}
.zoom-close{position:absolute;top:18px;right:18px;width:32px;height:32px; font-size:28px;border:1px solid var(--edge);border-radius:999px;background:#fff;cursor:pointer}

.zoom.open .zoom-body{
  max-width: min(96vw, 1400px);
  max-height:96vh;
  padding:1.25rem;
}
.zoom.open .zoom-body img{
  max-height:82vh;
}

body.tutorial > main { min-height: 0; padding-bottom: var(--gap-l); }
.t-columns { flex: 1 1 auto; min-height: 0; height: auto; }
.t-box { min-height: 0; }
.t-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; }

@media (max-width: 1000px){
  body{
    display: block;
    min-height: auto;
  }
  main{
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: var(--gap-s);
    box-sizing: border-box;
  }
  .left-col{ display: block; }
  #section1,
  #showField,
  #section2{
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 var(--gap-l) 0;
    overflow: visible;
  }
  .s1-top{ overflow: visible; }
  .chooser,
  .custom-list{
    max-height: 240px;
    overflow: auto;
  }
  .s2-body{
    display: flex;
    flex-direction: column;
    gap: var(--gap-s);
  }
  body.tutorial > main { display:block; padding: var(--gap-s); overflow: visible !important;}
  .t-intro{ text-align: left; font-size: 1rem; padding-left: 1rem; padding-right: 1rem;}
  .t-columns { display:block; }
  .t-box { width:100%; margin:0 0 var(--gap-l) 0; box-sizing: border-box; }
  .t-scroll { max-height:none; overflow:visible; }
  .t-box .steps-grid { flex-direction: column; }
  .t-box .step-card { width: auto; max-width: 100%; }
  .step-card .caption { font-size: 1rem;}
  footer{
    position: static;
    margin-top: var(--gap-l);
  }
}

#demoLock{
  position:fixed; inset:0; z-index:9999;
  background:rgba(255,255,255,.5); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; padding:1rem;
}
#demoLock .box{
  background:#fff; border:1px solid var(--edge); border-radius:12px;
  padding:1.25rem 1.5rem; text-align:center; max-width:520px;
}