:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#26364b;background:#fff;font-synthesis:none;font-size:14px;--blue:#2563c9;--red:#dc4b4c;--muted:#718093;--line:#e2e7ee}*{box-sizing:border-box}body{margin:0}main{max-width:1060px;margin:0 auto;padding:22px 22px 18px}header{max-width:780px}.eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.17em;font-weight:750;color:#7b698e;margin:0 0 8px}h1{font-size:clamp(22px,3.5vw,31px);line-height:1.2;letter-spacing:-.035em;margin:0 0 10px;font-weight:700}header>p:last-child{margin:0;line-height:1.6;color:#607084;font-size:12px}.presets{display:flex;flex-wrap:wrap;gap:7px;margin:18px 0 15px}button{font:inherit;font-size:11px;border:1px solid var(--line);color:#627086;background:#fff;border-radius:20px;padding:8px 13px;cursor:pointer;transition:background .15s,color .15s}button:hover{background:#f1f3fa}button[aria-pressed=true]{background:#26364b;border-color:#26364b;color:white}button:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid #b39cdb;outline-offset:4px}.time-control{background:#f7f8fc;border:1px solid #e9ecf3;border-radius:12px;padding:13px 17px 11px;margin-bottom:15px}.time-control label{font-size:12px;font-weight:650;display:flex;justify-content:space-between}.time-control label span{font-variant-numeric:tabular-nums;color:#8857a1}.time-ends{display:flex;justify-content:space-between;font-size:10px;color:var(--blue);margin-top:2px}.time-ends span:last-child{color:var(--red)}input[type=range]{display:block;width:100%;margin:9px 0;accent-color:#806398;cursor:pointer;height:14px}.plots{display:grid;grid-template-columns:1fr 1fr;gap:13px}.panel{min-width:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}.panel-heading{display:flex;align-items:center;gap:11px;padding:15px 17px 5px}.number{font-size:10px;letter-spacing:.05em;color:#94a0b2;padding:7px 6px;border:1px solid #e6eaf0;border-radius:5px}h2{font-size:15px;margin:0 0 3px;font-weight:700;letter-spacing:-.025em}.panel-heading p{margin:0;font-size:10px;color:var(--muted)}canvas{width:100%;height:330px;display:block;touch-action:pan-y}.matrix{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;padding:11px 17px;background:#f8f9fc;border-top:1px solid #edf0f5;font-size:10px;color:#6a7890}.matrix output{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10px;white-space:nowrap;font-variant-numeric:tabular-nums;color:#35455c}.legend{display:flex;flex-wrap:wrap;align-items:center;gap:5px;font-size:9px;color:#6d7a90;margin:12px 2px 18px}.line{display:inline-block;width:18px;border-top:2px dashed;margin-left:9px}.line:first-child{margin-left:0}.blue{color:var(--blue)}.red{color:var(--red)}.current{color:#805789;border-top-style:solid}.faint{color:#d3b5d7;border-top-style:solid}.axis-note{margin-left:auto;color:#919aab}.parameters{display:grid;grid-template-columns:1fr 1fr;gap:25px;padding:15px 17px 12px;border:1px solid var(--line);border-radius:12px}.parameter-group h3{font-size:11px;margin:0 0 14px;display:flex;gap:7px;align-items:center;font-weight:700}.dot{width:7px;height:7px;border-radius:50%}.blue-dot{background:var(--blue)}.red-dot{background:var(--red)}.parameter-group label{display:flex;justify-content:space-between;font-size:11px;color:#647288;margin-top:8px}.parameter-group output{font-variant-numeric:tabular-nums;font-weight:600;color:#35455c}.parameter-group p{font-size:9px;color:#929cac;margin-top:13px}.parameter-group input{accent-color:var(--blue);height:12px;margin:7px 0 10px}.parameter-group:last-child input{accent-color:var(--red)}.metrics{display:grid;grid-template-columns:1fr 1fr 1fr 1.45fr;gap:10px;margin-top:17px}.metrics>div{border-left:1px solid var(--line);padding-left:12px}.metrics>div:first-child{padding-left:0;border:0}.metrics span{display:block;color:#7c889a;font-size:9px;min-height:20px}.metrics output{font-size:21px;letter-spacing:-.03em;font-variant-numeric:tabular-nums;font-weight:650}.status{font-size:11px;line-height:1.5;color:#655a7b;background:#f7f5fa;border-radius:7px;padding:10px 12px;margin:16px 0 12px}footer{font-size:9px;line-height:1.65;color:#8691a1;max-width:920px}@media(max-width:700px){main{padding:16px 12px}.panel-heading{padding:12px 10px 3px;gap:7px}h2{font-size:12px}.panel-heading p{font-size:9px}.number{display:none}canvas{height:260px}.matrix{display:block;padding:8px 10px}.matrix span{display:block;margin-bottom:5px}.matrix output{font-size:9px}.axis-note{width:100%;margin:4px 0 0}.metrics output{font-size:18px}}@media(max-width:480px){.plots{grid-template-columns:1fr;gap:12px}canvas{height:320px}.panel-heading{padding:13px 16px 3px}h2{font-size:15px}.panel-heading p{font-size:10px}.matrix{display:flex;padding:10px 16px}.matrix span{margin:0}.matrix output{font-size:10px}.parameters{gap:17px;padding:13px 12px}.metrics{grid-template-columns:1fr 1fr;gap:14px}.metrics>div:nth-child(3){border:0;padding-left:0}.metrics span{min-height:16px}.metrics output{font-size:22px}.time-control{padding:12px}.presets button{font-size:10px;padding:7px 10px}}
:root .parameter-group input#rotation{accent-color:var(--red)}:root .parameter-group input#anisotropy{accent-color:#806398}
