:root{color-scheme:dark;background:#03060c;color:#e6efff;font-family:Arial,Helvetica,sans-serif;--dim:#9eb3d1;--one:#59e6f2;--two:#ffd659;--line:#223243}*{box-sizing:border-box}body{margin:0}main{max-width:1700px;margin:auto;padding:30px 38px 18px}header{display:flex;justify-content:space-between;gap:25px;align-items:flex-start}h1{font-size:clamp(26px,2.7vw,42px);font-weight:400;margin:0}header p{font-size:18px;line-height:1.45;color:var(--dim);margin:10px 0 0}button{background:transparent;border:1px solid #526479;color:inherit;font:inherit;font-size:17px;padding:11px 18px;border-radius:4px;min-height:44px;cursor:pointer;white-space:nowrap}button:hover{background:#132237}button:focus-visible{outline:2px solid var(--one);outline-offset:4px}button:disabled{opacity:.6;cursor:default}
.legend{display:flex;gap:30px;font-size:15px;margin-top:22px;min-height:22px;align-items:center}.legend>span{display:inline-block;white-space:nowrap}.legend>span:before{content:"";display:inline-block;vertical-align:middle;width:24px;height:2px;background:currentColor;margin-right:9px}.one{color:var(--one)}.two{color:var(--two)}
.stage{display:grid;grid-template-columns:minmax(0,1fr) clamp(270px,22vw,340px);gap:22px;height:clamp(430px,calc(100svh - 270px),600px);margin-top:8px}
.views{position:relative;min-width:0;height:100%}.view{position:absolute;inset:0}.scene{width:100%;height:100%;position:relative}.scene canvas{display:block;width:100%;height:100%;position:absolute;inset:0}.label{position:absolute;z-index:2;transform:translate(-50%,-50%);font-size:17px;white-space:nowrap;pointer-events:none;text-shadow:0 1px 5px #03060c}
.panel{display:flex;flex-direction:column;min-width:0;min-height:0;padding:14px 18px 10px;border:1px solid rgba(140,170,210,.16);background:rgba(18,32,52,.38);border-radius:12px}.panel h2{font-size:18px;font-weight:400;margin:0;text-align:center}.panel canvas{display:block;width:100%}#ellipse{flex:1 1 150px;min-height:120px}.kind{font-size:15px;text-align:center;margin:0}.note{font-size:13px;line-height:1.45;text-align:center;color:var(--dim);margin:3px 0 10px;min-height:2.9em}
.bars{display:grid;gap:9px}.bar>div:first-child{display:flex;justify-content:space-between;align-items:baseline;font-size:20px}.bar output{font-variant-numeric:tabular-nums}.track{height:6px;background:#16263a;border-radius:3px;margin-top:5px;overflow:hidden}.track span{display:block;height:100%;background:#e6efff;border-radius:3px}#chart{flex:0 0 132px;height:132px;margin-top:10px}
.result{display:flex;align-items:baseline;justify-content:space-between;gap:12px 28px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:14px;padding-top:14px}.result p{margin:0}#parameters{font-size:18px;color:var(--dim)}.mapping{font-size:18px;line-height:1.4}.caption{font-size:16px;color:var(--dim);margin:10px 0 0;line-height:1.4}footer{font-size:11px;color:#7d92ad;margin-top:20px;line-height:1.5}
.embed main{padding:12px 18px}.embed h1{font-size:25px}.embed header p{font-size:16px;margin-top:6px}.embed .legend{margin-top:10px}.embed .stage{height:clamp(400px,calc(100svh - 205px),600px)}.embed footer{display:none}.embed .result{margin-top:10px;padding-top:10px}.embed .mapping,.embed #parameters{font-size:17px}.embed .caption{margin-top:6px;font-size:15px}
@media(max-width:900px){.stage{grid-template-columns:minmax(0,1fr) 250px;gap:14px}.label{font-size:14px}}
@media(max-width:650px){main{padding:22px 16px}header{flex-direction:column;gap:15px}h1{font-size:27px}header p{font-size:15px}button{font-size:16px}.legend{font-size:13px;gap:17px;flex-wrap:wrap}.stage,.embed .stage{display:block;height:auto}.views{height:210px}.label{font-size:13px}.panel{margin-top:14px}#ellipse{flex:none;height:180px}.result{flex-direction:column;gap:8px}#parameters{font-size:15px}.mapping{font-size:16px}.caption{font-size:15px}}