*{box-sizing:border-box}
:root{
  --glass:rgba(20,30,72,.16);
  --glass-strong:rgba(8,14,42,.48);
  --line:rgba(160,178,255,.22);
  --text:#f5f7ff;
  --muted:#d8def7;
  --input:rgba(8,14,40,.80);
}
html,body{height:100%}
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--text);
  background:url("m45.png") 74% center / cover fixed no-repeat;
}
.stars{
  position:fixed; inset:0; pointer-events:none; opacity:.08;
  background-image:
    radial-gradient(circle at 12% 20%, rgba(255,255,255,.9) 0 1px, transparent 1.7px),
    radial-gradient(circle at 70% 32%, rgba(255,255,255,.7) 0 1px, transparent 1.6px),
    radial-gradient(circle at 30% 82%, rgba(255,255,255,.75) 0 1px, transparent 1.6px);
  background-size:180px 180px, 260px 260px, 340px 340px;
}
.page{max-width:1180px;margin:0 auto;padding:14px 18px 28px}
.hero{text-align:center;margin:0 auto 10px;max-width:1180px}
.hero h1{margin:0 0 2px;font-size:clamp(1.9rem,4vw,3.8rem);font-weight:800}
.hero p{margin:0;color:var(--muted);font-size:clamp(.95rem,1.8vw,1.12rem)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;justify-content:center}
.tab{
  border:1px solid var(--line);background:rgba(9,16,44,.22);color:var(--text);
  border-radius:999px;padding:9px 13px;font-size:.93rem;cursor:pointer;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)
}
.tab.active{background:linear-gradient(180deg, rgba(104,138,255,.95), rgba(79,111,235,.92));box-shadow:0 0 20px rgba(93,132,255,.42)}
.panel{display:none}.panel.active{display:block}
.glass{
  background:rgba(20,30,72,.10);border:1px solid var(--line);border-radius:22px;padding:10px;
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 10px 34px rgba(0,0,0,.16)
}
.glass h2{margin:0 0 10px;font-size:clamp(1.3rem,2vw,1.75rem)}
.grid{display:grid;gap:10px}.grid.two{grid-template-columns:1fr 1fr}
.split{display:grid;grid-template-columns:340px 1fr;gap:14px;align-items:start}
label{display:block;margin:0 0 6px;font-weight:700}
input,select{
  width:100%;padding:8px 10px;margin-bottom:8px;border-radius:12px;
  border:1px solid rgba(132,152,236,.42);background:rgba(8,14,40,.80);color:var(--text);font-size:.98rem;outline:none
}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
button{
  border:none;border-radius:14px;padding:10px 14px;font-size:.94rem;cursor:pointer;color:white;
  background:linear-gradient(180deg, rgba(104,138,255,.95), rgba(79,111,235,.92));box-shadow:0 0 18px rgba(93,132,255,.34)
}
button.secondary{background:rgba(9,16,44,.58);border:1px solid rgba(132,152,236,.35);box-shadow:none}
.result{margin-top:8px;border-radius:16px;border:1px solid rgba(132,152,236,.30);background:rgba(8,14,42,.48);padding:8px 10px;min-height:38px}
.note{color:var(--muted);margin-top:-2px;margin-bottom:8px;font-size:.95rem;line-height:1.35}
.preview-box{
  position:relative;aspect-ratio: 16 / 10; min-height:270px; border-radius:20px;border:1px solid rgba(132,152,236,.25);
  overflow:hidden;background:rgba(8,14,35,.10)
}
.preview-image{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;
}
.preview-frame{
  position:absolute;left:0%;top:0%;width:100%;height:100%;
  border:3px solid #ffe44d;box-shadow:0 0 14px rgba(255,228,77,.22);cursor:move
}
.panel-overlay .dash{position:absolute;border:2px dashed rgba(255,228,77,.72)}
.manual-box{
  border:1px solid rgba(132,152,236,.22);border-radius:14px;padding:6px 10px 1px;background:rgba(8,14,40,.16);margin-bottom:8px
}
.manual-box summary{cursor:pointer;font-weight:700;margin-bottom:6px}
.manual-grid{margin-top:10px}
@media (max-width:900px){.grid.two,.split{grid-template-columns:1fr}.preview-box{min-height:320px}}


.solver-upload input{margin-bottom:0}
.solver-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
.mono{white-space:pre-wrap;overflow-x:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
#solverRaw{margin-top:14px}
.result a{color:#cfe0ff;text-decoration:underline}
@media (max-width:900px){.solver-grid{grid-template-columns:1fr}}


.compact-summary{line-height:1.45}
.solver-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.solver-grid.compact .result{margin-top:0;min-height:46px}
.solver-links a{display:inline-block;margin-top:4px}
.compact-details{margin-top:10px}
.compact-details summary{list-style: none;}
.compact-details summary::-webkit-details-marker{display:none}
.compact-details summary::after{content:" ▾";opacity:.8}
.compact-details[open] summary::after{content:" ▴"}
#solverRaw{margin-top:8px;max-height:240px;overflow:auto;font-size:.86rem}
@media (min-width:901px){.framing-actions button{flex:1 1 auto}.framing-note{min-height:0}.solver-grid.compact .wide{grid-column:1 / -1}}
@media (max-width:900px){.grid.two,.split{grid-template-columns:1fr}.preview-box{min-height:280px}.solver-grid.compact{grid-template-columns:1fr}}

.inline-note{
  min-height:44px;
  border-radius:14px;
  border:1px solid rgba(132,152,236,.30);
  background:rgba(8,14,42,.40);
  padding:10px 12px;
  color:var(--muted);
  font-size:.93rem;
  line-height:1.3;
}
.framing-layout .glass:first-child{padding-bottom:10px}
.framing-actions button{flex:1 1 30%}
.compact-summary{font-size:.95rem;line-height:1.32}
#framingSummary{font-size:.95rem}
.solver-grid.compact .result{padding:9px 12px;min-height:42px}
.solver-links{font-size:.94rem}
@media (min-width:1100px){
  .page{max-width:1020px}
}
@media (max-width:900px){
  .page{margin:0 auto;padding:12px}
  .inline-note{min-height:auto}
}

@media (min-width:1100px){.page{max-width:980px;margin-left:40px}.hero{max-width:none}}


.hero h1,.hero p{text-align:center;width:100%}
#setup .glass,#pixel .glass,#fov .glass{max-width:760px;margin:0 auto}
#solver .glass{max-width:860px;margin:0 auto}
#framing .split{max-width:980px;margin:0 auto;grid-template-columns:350px minmax(0,1fr)}
#framing .preview-box{min-height:300px}
#framing .glass:first-child{padding-right:10px}
#framing .glass:last-child{padding-left:12px}
#framing .grid.two{gap:8px}
#framing .compact-summary{font-size:.9rem;line-height:1.25}
#setup .grid.two,#pixel .grid.two,#fov .grid.two{gap:8px}
#setup .glass h2,#pixel .glass h2,#fov .glass h2,#solver .glass h2{margin-bottom:8px}
#setup .inline-note{font-size:.88rem}
#setup .glass,#pixel .glass,#fov .glass,#solver .glass{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
@media (min-width:1000px){
  #setup .glass,#pixel .glass,#fov .glass{transform:translateX(20px)}
  #solver .glass{transform:translateX(10px)}
}
@media (max-width:900px){
  .tabs{justify-content:flex-start}
  #setup .glass,#pixel .glass,#fov .glass,#solver .glass{max-width:none;transform:none}
  #framing .split{max-width:none;grid-template-columns:1fr}
  #framing .preview-box{min-height:260px}
}


/* v73 alignment refinements */
body{background-position:68% center;}
.page{max-width:1120px;margin:0 auto;padding:14px 18px 28px;}
.hero{max-width:1120px;margin:0 auto 10px;text-align:center;}
.hero h1,.hero p{margin-left:auto;margin-right:auto;text-align:center;width:100%;}
.tabs{justify-content:center;}
#setup .glass,#pixel .glass,#fov .glass,#solver .glass{transform:none !important;}
#setup .glass,#pixel .glass,#fov .glass{max-width:760px;margin:0 auto;}
#solver .glass{max-width:860px;margin:0 auto;}
#framing .split{max-width:1060px;margin:0 auto;grid-template-columns:390px minmax(0,1fr);gap:16px;}
#framing .glass:first-child{padding-right:12px;}
#framing .glass:last-child{padding-left:12px;}
#framing .preview-box{min-height:320px;}
#framing .framing-actions button{padding:10px 10px;font-size:.9rem;}
#framing .compact-summary{font-size:.92rem;line-height:1.28;}
@media (max-width:900px){
  .page{padding:12px;}
  .hero,.tabs{max-width:none;}
  .tabs{justify-content:flex-start;}
  #framing .split{max-width:none;grid-template-columns:1fr;}
  #framing .preview-box{min-height:260px;}
}

/* v76 DSO annotation */
.annotation-layout{max-width:1060px;margin:0 auto;grid-template-columns:390px minmax(0,1fr);gap:16px}
.annotation-controls-grid{gap:8px;margin-top:10px}
.inline-check{display:flex;align-items:center;gap:8px}
.inline-check input{width:auto;margin:0}
.annotation-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#annotation .glass{padding:12px}
#annotation .preview-box{min-height:320px}
#annotation .compact-summary{font-size:.92rem;line-height:1.3}
#annotation .result input[type="color"]{padding:0}
@media (max-width:900px){
  #annotation .annotation-layout{max-width:none;grid-template-columns:1fr}
  #annotation .preview-box{min-height:260px}
}

/* v77 DSO annotation */
#annotation input[type="color"]{padding:0;height:38px;min-width:100%}
#annotation select{width:100%}
#annotation .annotation-controls-grid input,
#annotation .annotation-controls-grid select{margin-top:4px}
#annotation .annotation-controls-grid label{display:block}


/* v78 DSO annotation */
.annotation-downloads button{min-width:140px}
#annotationPreviewBox{position:relative}
#annotationPreviewImage{display:block;margin:auto;object-fit:contain}
#annotationCanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* v79 visual cleanup + annotation separation */
:root{
  --glass:rgba(16,24,54,.08);
  --glass-strong:rgba(10,16,36,.34);
}
body{
  background-position:82% center;
}
.tab{
  background:rgba(9,16,44,.14);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.glass{
  background:rgba(10,18,40,.22);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 12px 28px rgba(0,0,0,.12);
}
#setup .glass,#pixel .glass,#fov .glass,#solver .glass{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.result,
.inline-note,
.manual-box{
  background:rgba(8,14,36,.34);
}
.annotation-layout{
  max-width:1080px;
  grid-template-columns:410px minmax(0,1fr);
  gap:18px;
}
.annotation-card{
  background:rgba(10,18,40,.20);
}
.annotation-groups{
  display:grid;
  gap:10px;
  margin-top:10px;
}
.annotation-group{
  margin-top:0;
  padding:10px 12px;
}
.annotation-group strong{
  display:block;
  margin-bottom:8px;
  font-size:.98rem;
}
.annotation-controls-grid.grouped{
  margin-top:0;
  gap:8px;
}
.annotation-mini-note{
  min-height:74px;
  display:flex;
  align-items:center;
  font-size:.84rem;
  line-height:1.28;
}
#annotation .note{
  max-width:62ch;
}
#annotation .compact-details{
  margin-top:12px;
}
#annotation .compact-details summary{
  cursor:pointer;
}
#annotation .result.mono{
  max-height:240px;
  overflow:auto;
}
#annotation .preview-box{
  min-height:340px;
  background:rgba(4,8,20,.14);
}
@media (max-width:900px){
  body{background-position:72% center;}
  .annotation-layout{grid-template-columns:1fr;}
  .annotation-mini-note{min-height:auto;}
}