.comp-core{margin:48px auto 96px;max-width:1180px;padding:0 20px;color:#eaf7ff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.comp-core *{box-sizing:border-box}.comp-shell{position:relative;overflow:hidden;border:1px solid rgba(125,226,255,.22);border-radius:26px;background:linear-gradient(180deg,rgba(5,18,31,.94),rgba(3,10,19,.98));box-shadow:0 30px 100px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.04)}.comp-shell:before{content:"";position:absolute;inset:-35%;background:radial-gradient(circle at 20% 20%,rgba(87,208,255,.12),transparent 28%),radial-gradient(circle at 80% 35%,rgba(159,111,255,.10),transparent 30%);pointer-events:none}.comp-head{position:relative;display:flex;justify-content:space-between;gap:20px;align-items:flex-start;padding:24px 24px 18px;border-bottom:1px solid rgba(125,226,255,.14)}.comp-kicker{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#7fe7ff}.comp-title{margin:7px 0 6px;font-size:clamp(24px,4vw,38px);line-height:1.05}.comp-sub{margin:0;max-width:760px;color:#9fb9c8;line-height:1.6}.comp-badge{white-space:nowrap;padding:8px 11px;border:1px solid rgba(94,240,190,.35);border-radius:999px;color:#93ffd8;background:rgba(42,130,102,.10);font-size:12px}.comp-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:0}.comp-main{padding:22px;border-right:1px solid rgba(125,226,255,.12)}.comp-side{padding:22px}.comp-canvas-wrap{position:relative;min-height:340px;border:1px solid rgba(125,226,255,.16);border-radius:18px;background:radial-gradient(circle at 50% 0%,rgba(71,164,206,.12),transparent 45%),rgba(1,7,14,.74);overflow:hidden}.comp-canvas{display:block;width:100%;height:340px}.comp-readout{position:absolute;left:14px;top:12px;padding:7px 10px;border:1px solid rgba(125,226,255,.18);border-radius:999px;background:rgba(1,8,15,.72);backdrop-filter:blur(10px);font-size:11px;letter-spacing:.08em;color:#b9dce8}.comp-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}.comp-control{padding:14px;border:1px solid rgba(125,226,255,.12);border-radius:15px;background:rgba(255,255,255,.025)}.comp-control label{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:#b8d0db;margin-bottom:10px}.comp-control output{color:#7fe7ff;font-variant-numeric:tabular-nums}.comp-control input[type=range]{width:100%;accent-color:#7fe7ff}.comp-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.comp-btn{min-height:42px;padding:0 15px;border-radius:12px;border:1px solid rgba(125,226,255,.23);background:rgba(125,226,255,.07);color:#eaf7ff;font:inherit;cursor:pointer}.comp-btn:hover{background:rgba(125,226,255,.13)}.comp-btn.primary{background:linear-gradient(135deg,rgba(61,209,255,.24),rgba(153,104,255,.18));border-color:rgba(125,226,255,.42)}.comp-section{padding:0 0 18px;margin:0 0 18px;border-bottom:1px solid rgba(125,226,255,.11)}.comp-section:last-child{border-bottom:0;margin-bottom:0}.comp-section h3{margin:0 0 10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#7fe7ff}.comp-equation{padding:12px 13px;border-radius:12px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.06);font-family:"SFMono-Regular",Consolas,monospace;font-size:12px;line-height:1.55;color:#d8f4ff;white-space:pre-wrap}.comp-method,.comp-limit{font-size:13px;line-height:1.55;color:#a9c1cb}.comp-diags{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.comp-diag{padding:11px;border-radius:12px;border:1px solid rgba(125,226,255,.11);background:rgba(255,255,255,.025)}.comp-diag b{display:block;font-size:15px;color:#f1fbff;font-variant-numeric:tabular-nums}.comp-diag span{display:block;margin-top:3px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#7d9aaa}.comp-valid{margin-top:12px;padding:11px 12px;border-radius:12px;border:1px solid rgba(102,255,190,.17);background:rgba(52,167,117,.06);font-size:12px;line-height:1.5;color:#b9ead6}.comp-footer{position:relative;display:flex;justify-content:space-between;gap:18px;align-items:center;padding:14px 22px;border-top:1px solid rgba(125,226,255,.12);font-size:11px;color:#76909d}.comp-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;font-size:11px;color:#8fa8b4}.comp-legend i{display:inline-block;width:18px;height:2px;vertical-align:middle;margin-right:6px;border-radius:999px}.comp-legend i:nth-child(1){background:#66e0ff}.comp-legend i:nth-child(2){background:#b387ff}.comp-legend i:nth-child(3){background:#75f0b7}.comp-status{width:8px;height:8px;border-radius:50%;background:#65f0b0;box-shadow:0 0 16px rgba(101,240,176,.8);display:inline-block;margin-right:7px}.comp-tabs{display:flex;gap:8px;margin-bottom:14px}.comp-tab{font-size:11px;padding:7px 10px;border-radius:999px;border:1px solid rgba(125,226,255,.13);color:#8ea8b5;background:transparent}.comp-tab.active{color:#dff9ff;border-color:rgba(125,226,255,.35);background:rgba(125,226,255,.08)}
@media(max-width:900px){.comp-grid{grid-template-columns:1fr}.comp-main{border-right:0;border-bottom:1px solid rgba(125,226,255,.12)}.comp-controls{grid-template-columns:1fr}.comp-head{flex-direction:column}.comp-badge{white-space:normal}.comp-canvas,.comp-canvas-wrap{height:300px;min-height:300px}}
@media(max-width:520px){.comp-core{padding:0 12px}.comp-head,.comp-main,.comp-side{padding:17px}.comp-shell{border-radius:19px}.comp-diags{grid-template-columns:1fr}.comp-canvas,.comp-canvas-wrap{height:260px;min-height:260px}.comp-footer{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){.comp-shell:before{display:none}}