@font-face{font-family:'Google Sans';src:url('../fonts/google-sans-variable.woff') format('woff');font-weight:100 900;font-display:swap}
:root{--circ-blue:#247f9f;--circ-teal:#398b7b;--circ-orange:#657780;--circ-mauve:#9bafb4}
:root[data-theme=dark]{--circ-blue:#6fb7d0;--circ-teal:#7cb6a6;--circ-orange:#a6b4bc;--circ-mauve:#718c97}
html,body{margin:0;font-family:var(--font,'Google Sans',sans-serif);color:var(--ink);background:var(--paper)}
html.model-embedded,html.model-embedded body{background:transparent!important}
.circ-experiment{width:100%;max-width:1120px;margin:28px auto;padding:0 20px;box-sizing:border-box}
.circ-surface{position:relative;padding:32px;border:1px solid var(--line);border-radius:32px;background:var(--surface);box-sizing:border-box;overflow:clip}
.circ-surface{background:var(--paper)}
.circ-intro{padding-right:70px}.circ-intro h1{font-size:clamp(28px,3.8vw,38px);font-weight:500;letter-spacing:-.04em;line-height:1.1;margin:8px 0 14px}
.circ-intro>p:last-child{max-width:780px;font-size:15px;line-height:1.7;color:var(--muted);margin:0}

.circ-surface h2{font-size:19px;letter-spacing:-.02em;font-weight:500;margin:0}.circ-surface h3{font-size:16px;font-weight:500;margin:0}
.circ-exit{position:absolute;right:16px;top:16px;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;color:var(--ink);background:var(--soft);z-index:2}
.model-embedded .circ-exit{display:none}
.circ-surface button,.circ-surface select{font:inherit;font-size:12px;min-height:44px;border:0;border-radius:999px;padding:10px 16px;color:var(--ink);background:var(--soft);cursor:pointer;box-sizing:border-box}
.circ-surface button:hover{background:color-mix(in srgb,var(--ink) 12%,var(--soft))}.circ-surface button.circ-primary{background:var(--button-bg,var(--green));color:var(--button-fg,var(--paper))}
.circ-surface :is(a,button,input,select,summary):focus-visible{outline:2px solid var(--green);outline-offset:3px}
.circ-surface button:disabled{opacity:.5;cursor:default}
.circ-playback{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:22px 0 28px;padding:0 0 20px;border-bottom:1px solid var(--line)}
.circ-speed{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-left:auto;order:4}.circ-progress{font-size:12px;color:var(--muted);margin:0 0 0 8px;font-variant-numeric:tabular-nums}
.circ-data-row{display:grid;grid-template-columns:1fr 1fr 1.08fr;gap:14px;align-items:stretch}
.circ-panel{min-width:0;margin:0;padding:18px 14px 10px;border-radius:22px;background:var(--surface);overflow:hidden}
.circ-panel figcaption{padding:0 4px;margin-bottom:8px}.circ-panel figcaption>span{display:block;font-size:11px;color:var(--muted);margin-top:5px}
.circ-data-row .circ-panel h2{font-size:15px}.circ-panel canvas{display:block;width:100%;height:260px}.circ-data-row canvas{height:230px}
.circ-plot-note{font-size:10px;color:var(--muted);text-align:center;margin:4px 0 8px;line-height:1.5}
.circ-data-controls{padding:18px 8px 10px;min-width:0}.circ-data-controls h2{font-size:15px;margin-bottom:18px}
.circ-data-controls label{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);gap:10px}.circ-data-controls output{color:var(--ink);font-variant-numeric:tabular-nums}
.circ-data-controls input{width:100%;accent-color:var(--green);height:28px;margin:2px 0 14px;cursor:pointer}
.circ-generate{display:flex;gap:12px;align-items:center}.circ-generate span{font-size:11px;color:var(--muted)}.circ-data-controls>p{font-size:11px;color:var(--muted);line-height:1.6;margin:12px 0 0}
.circ-section-heading{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:28px 0 14px}.circ-section-heading h2{margin:0}.circ-section-heading label{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:8px;flex:none}
.circ-joint-grid,.circ-trace-grid,.circ-links-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.circ-joint-grid canvas{height:300px}
.circ-mean-color,.circ-kappa-color{color:var(--ink)}
.circ-joint-legend{display:flex;gap:12px 20px;flex-wrap:wrap;font-size:10px;color:var(--muted);margin:12px 3px 20px}.circ-joint-legend span{display:flex;align-items:center;gap:7px}.circ-joint-legend i{display:inline-block;width:20px;height:6px;border-radius:2px}.circ-density-key{background:linear-gradient(90deg,var(--circ-blue),var(--circ-teal))}.circ-contour-key{border-top:1px solid var(--muted);height:0!important;border-radius:0!important}.circ-path-key{border-top:2px solid var(--muted);height:0!important}
.circ-links-row{padding:14px 18px;border-radius:22px;background:color-mix(in srgb,var(--surface) 55%,transparent)}.circ-link-panel{margin:0;display:grid;grid-template-columns:1fr 1.15fr;align-items:center;gap:6px 12px;min-width:0}.circ-link-panel figcaption p{font-size:12px;margin:8px 0;color:var(--muted)}.circ-link-panel canvas{width:100%;height:110px}.circ-link-panel>p{font-size:10px;color:var(--muted);grid-column:1/-1;margin:0 0 2px}
.circ-chains{display:flex;gap:10px 20px;flex-wrap:wrap;margin:0 4px 12px;font-size:11px;color:var(--muted)}.circ-chains span:not(:last-child)::before{content:'';display:inline-block;background:var(--chain);width:7px;height:7px;border-radius:50%;margin-right:6px}.circ-warmup-key{margin-left:auto}
.circ-trace-grid canvas{height:170px}.circ-diagnostics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:22px 4px 10px}.circ-diagnostics p{margin:0;display:flex;flex-direction:column;gap:6px}.circ-diagnostics span{font-size:11px;color:var(--muted)}.circ-diagnostics strong{font-size:19px;font-weight:500;font-variant-numeric:tabular-nums}
.circ-caution{font-size:12px;color:var(--muted);line-height:1.6;margin:16px 4px}.circ-method{margin-top:22px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}.circ-method summary{padding:18px 4px;cursor:pointer;min-height:44px;box-sizing:border-box;color:var(--ink)}.circ-method p{line-height:1.75;margin:0 4px 14px}.circ-method a{color:var(--green)}
.model-drag-handle{display:none}@media(max-width:760px) and (pointer:coarse){.model-embedded .model-drag-handle{display:block;position:absolute;inset:0 0 auto;height:24px;touch-action:none}.model-drag-handle::before{content:'';display:block;width:36px;height:4px;margin:9px auto;border-radius:2px;background:var(--muted);opacity:.4}}
@media(max-width:850px){.circ-data-row{grid-template-columns:1fr 1fr}.circ-data-controls{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:0 20px;padding:12px 4px}.circ-data-controls h2,.circ-data-controls .circ-generate,.circ-data-controls>p{grid-column:1/-1}.circ-data-controls label{grid-row:2}.circ-data-controls input{grid-row:3}.circ-data-controls h2{margin-bottom:12px}.circ-data-controls>p{max-width:550px}.circ-link-panel{grid-template-columns:1fr}.circ-link-panel canvas{height:90px}}
@media(max-width:600px){.circ-experiment{margin:12px auto;padding:0 12px}.circ-surface{padding:22px 16px;border-radius:24px}.circ-intro{padding-right:40px}.circ-intro h1{font-size:29px}.circ-intro>p:last-child{font-size:13px;line-height:1.65}.circ-playback{gap:6px;padding:0 0 16px;margin:20px 0}.circ-speed{margin-left:auto}.circ-surface button,.circ-surface select{padding-inline:12px}.circ-data-row{gap:10px}.circ-data-row .circ-panel{padding:12px 8px 8px}.circ-data-row .circ-panel h2{font-size:13px}.circ-data-row .circ-panel figcaption>span{font-size:10px}.circ-data-row canvas{height:190px}.circ-plot-note{font-size:9px}.circ-joint-grid,.circ-trace-grid,.circ-links-row{grid-template-columns:1fr}.circ-joint-grid canvas{height:290px}.circ-section-heading{align-items:start;flex-direction:column;gap:10px}.circ-section-heading label{align-self:flex-end}.circ-links-row{gap:20px}.circ-link-panel{grid-template-columns:1fr 1fr}.circ-diagnostics{grid-template-columns:1fr 1fr;gap:18px}.circ-warmup-key{margin-left:0;width:100%}.circ-data-controls{gap:0 12px}.circ-data-controls label{font-size:11px}.circ-data-controls output{font-size:10px}.circ-joint-legend{font-size:9px}}
@media(max-width:370px){.circ-data-row{grid-template-columns:1fr}.circ-data-row canvas{height:230px}.circ-data-controls{display:block}.circ-data-controls label{margin-top:10px}}

/* Quiet hierarchy: the plots carry the detail; only playback uses a filled action. */
.circ-surface .circ-icon-button{display:grid;place-items:center;flex:none;width:48px;min-width:48px;max-width:48px;height:48px;min-height:48px;padding:0;border-radius:50%}
.circ-icon-button svg{display:block;pointer-events:none}
.circ-sr-only{position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.circ-data-controls{padding-top:18px}.circ-data-controls h2{margin-bottom:22px}
.circ-panel{padding-top:18px;border-radius:20px}.circ-panel figcaption>span{font-size:11px}
.circ-data-row .circ-panel{background:transparent;padding-inline:4px}.circ-data-row{gap:24px}
.circ-section-heading{margin-top:30px}.circ-joint-legend{font-size:10px;margin-bottom:0}
.circ-chains{margin-bottom:14px}.circ-warmup-key{font-size:10px}
.circ-method{margin-top:24px}.circ-method summary{font-size:13px}.circ-method .circ-links-row{background:transparent;padding:12px 0 20px;border-bottom:1px solid var(--line);border-radius:0}
.circ-diagnostics{padding:20px 0;margin-bottom:16px;border-bottom:1px solid var(--line)}
.circ-caution{font-size:11px}.circ-links-row .circ-link-panel h3{font-size:14px}
@media(max-width:600px){.circ-progress{font-size:11px;margin-left:4px;flex:1}.circ-speed{gap:4px}.circ-speed select{padding-inline:10px}.circ-data-row{gap:10px}.circ-data-controls h2{margin-bottom:12px}.circ-playback{row-gap:10px}.circ-section-heading{align-items:center;flex-direction:row}.circ-section-heading h2{font-size:17px}.circ-section-heading label{align-self:center}.circ-section-heading select{max-width:155px;font-size:11px}.circ-links-row{grid-template-columns:1fr}.circ-method .circ-links-row{padding-top:8px}}
@media(max-width:420px){.circ-speed{margin-left:0}.circ-progress{min-width:130px}.circ-section-heading{flex-wrap:wrap}}

.circ-surface [hidden]{display:none!important}
.circ-examples{display:flex;align-items:center;gap:12px;margin-top:24px;flex-wrap:wrap}
.circ-examples>label{font-size:12px;color:var(--muted)}
.circ-examples p{font-size:12px;line-height:1.6;color:var(--muted);margin:0;flex:1;min-width:180px}
.circ-data-row{align-items:start}
.circ-data-controls .circ-control{min-width:0}
.circ-data-controls .circ-control label{grid-row:auto}
.circ-data-controls .circ-control input{grid-row:auto;box-sizing:border-box}
.circ-group-key{display:flex;gap:24px;margin:10px 4px 0;font-size:11px;color:var(--muted)}
.circ-group-key span::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;background:var(--circ-blue)}
.circ-group-key span+span::before{background:var(--circ-teal)}
.circ-weight-trace{margin-top:14px}.circ-weight-trace canvas{height:170px}
html:is([data-circular-example="single"],[data-circular-example="mixture"],[data-circular-example="uniform"],[data-circular-example="treatments"]) .circ-data-row{grid-template-columns:repeat(2,minmax(0,1fr))}
html:is([data-circular-example="single"],[data-circular-example="mixture"],[data-circular-example="uniform"],[data-circular-example="treatments"]) .circ-data-controls{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px;padding:8px 4px}
html:is([data-circular-example="single"],[data-circular-example="mixture"],[data-circular-example="uniform"],[data-circular-example="treatments"]) .circ-data-controls :is(h2,.circ-generate){grid-column:1/-1}
html:is([data-circular-example="single"],[data-circular-example="mixture"],[data-circular-example="uniform"],[data-circular-example="treatments"]) .circ-data-row canvas{height:260px}
@media(max-width:850px){.circ-data-controls{grid-template-columns:repeat(3,minmax(0,1fr))}.circ-data-controls .circ-control{grid-row:auto}.circ-examples p{flex-basis:45%}}
@media(max-width:600px){.circ-examples{gap:8px 12px;margin-top:20px}.circ-examples p{flex-basis:100%}.circ-data-controls label{font-size:11px}}
@media(max-width:600px){html:is([data-circular-example="single"],[data-circular-example="mixture"],[data-circular-example="uniform"],[data-circular-example="treatments"]) .circ-data-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}html:is([data-circular-example="single"],[data-circular-example="mixture"],[data-circular-example="uniform"],[data-circular-example="treatments"]) .circ-data-row canvas{height:190px}}
@media(max-width:370px){html:is([data-circular-example="single"],[data-circular-example="mixture"],[data-circular-example="uniform"],[data-circular-example="treatments"]) .circ-data-row{grid-template-columns:1fr}html:is([data-circular-example="single"],[data-circular-example="mixture"],[data-circular-example="uniform"],[data-circular-example="treatments"]) .circ-data-row canvas{height:230px}}


/* Keep related parameters together in DOM, keyboard and visual order. */
.circ-control-group{min-width:0}
.circ-component-legend{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 4px 14px;font-size:11px;line-height:1.5;color:var(--muted)}
.circ-component-legend>span{display:flex;align-items:center;gap:7px}
.circ-component-legend i{display:inline-block;flex:none;width:20px;height:0;border-top:2px solid var(--circ-blue);border-radius:2px}
.circ-component-legend .circ-component-second{border-color:var(--circ-teal)}
.circ-component-legend .circ-component-total{border-color:var(--ink);border-top-width:3px}
@media(max-width:600px){.circ-component-legend{gap:6px 14px;font-size:10px}}
@media(max-width:600px){
 html:is([data-circular-example="single"],[data-circular-example="mixture"],[data-circular-example="uniform"],[data-circular-example="treatments"]) .circ-data-controls{grid-template-columns:1fr}
 html:is([data-circular-example="single"],[data-circular-example="mixture"],[data-circular-example="uniform"],[data-circular-example="treatments"]) .circ-control-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
 html[data-circular-example="treatments"] .circ-control-group:first-of-type>.circ-control:first-child{grid-column:1/-1}
}