:root{--main-bg-color: #2a5b8b;--content-bg-color: #D0E4FF;--highlight-bg-color: #E2EFFF;--emphasis-bg-color: #A2B9FF}body,html{margin:0;background:var(--main-bg-color)}header{display:flex;flex-direction:column;align-items:stretch;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;background:var(--content-bg-color);min-width:65%;margin:.5rem .25rem 1rem 0;border-top-right-radius:1.5rem;border-bottom-right-radius:1.5rem;padding:0 5% 0 0}h1{margin:.5rem 0;padding:0 .5rem;align-self:center}header>.notes{display:flex;justify-content:space-evenly;flex-flow:row wrap}header>.notes>p{margin:.25rem 1rem .5rem}.textContent{max-width:42em;margin-left:.1rem;background:var(--content-bg-color);border-radius:1rem}.textContent p{margin:.5em .25em .5em .5em;text-indent:1.5em}section{padding:1rem 0 .01rem}.textContent>section:first-child{border-top-left-radius:1rem;border-top-right-radius:1rem}section>p:first-child{margin-top:-.25em}h2{margin:0rem 2rem .5rem 0;padding:.5rem .25rem .25rem 1rem;border-top-right-radius:1.5rem;border-bottom-right-radius:1.5rem;background:var(--emphasis-bg-color);text-align:center}.h2section{margin-top:2em}.controlHolder h2{margin-bottom:1rem}h2+p{margin-top:.5rem}h2>button{margin-left:2rem}h3{margin:0 15% .5em;padding:.25rem 1rem;background:var(--emphasis-bg-color);border-radius:1rem;text-align:center}#description{margin:1rem .25rem 2rem;padding:1rem .5rem .1rem 0}#diagram-pair{display:flex;justify-content:space-evenly;align-items:center;padding:0 .25rem;gap:1rem}.diagram-anim{flex:1 1 360px;min-width:150px;max-width:60vh;display:flex;flex-flow:column;align-items:center;gap:1rem}canvas{display:block;border:1px solid #cccccc;background:#fff;width:100%}.canvas-diagram{aspect-ratio:3/4}.canvas-anim{aspect-ratio:9/1}.diagramTitle{font-size:1.5rem;margin-bottom:-.8rem;background-color:var(--content-bg-color);padding:.2rem 1em 0em;border-radius:.5rem}#messageBox{background-color:var(--content-bg-color);border:solid gray 1px;border-radius:.5rem;padding:.5rem;margin-top:.75rem;min-width:0;overflow-wrap:break-word}#messageBox>p{margin:0}.controlHolder{background-color:var(--content-bg-color);border-radius:.5rem;margin:.5rem .25rem;padding:.5rem .5rem .5rem 0}label{width:max-content}#diagramControls{display:flex;flex-flow:row wrap;justify-content:center;gap:.75rem 2rem;margin:.5rem .25rem 0;padding-top:0}#popupContainer{display:grid;position:relative}#selectedEventControls,#messageBox{grid-area:1/1}#diagramControls>#selectedEventControls{width:fit-content;background-color:var(--highlight-bg-color)}#diagramControls>#selectedEventControls label{margin:0}#undoButtons{width:3rem;display:flex;flex-flow:column;justify-content:center;align-items:center;gap:1rem}.controlStack{display:flex;flex-flow:column;justify-content:center;align-items:center;gap:.5rem;margin-top:.25em}#animationStuff button{width:10rem}#CopyURL{width:8rem}#TrajFrameButton{width:9rem}#coordRangeControls{display:grid;grid-template-columns:repeat(3,max-content);grid-template-rows:auto;grid-auto-flow:row;justify-items:left;gap:.5em}#loneEventControls{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:1.5rem}.loneEventControlBlock{position:relative;padding:.75rem .5rem .5rem;margin:0 .25rem;border:solid gray 1px;border-radius:.5rem;background-color:var(--highlight-bg-color);display:grid;grid-template-columns:repeat(3,max-content);grid-template-rows:auto;grid-auto-flow:row;justify-items:end;align-items:center;gap:.75rem 0}.loneEventControlBlock>:nth-child(3n){justify-self:center}#trajectoryControls{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start;gap:1.5rem 1rem}.trajectoryControlBlock{margin:0 .25rem;padding:.75rem 1rem .5rem;border:solid gray 1px;border-radius:.5rem;background-color:var(--highlight-bg-color);display:grid;grid-template-columns:[start] repeat(3,max-content) [end];grid-template-rows:auto;grid-auto-flow:row;justify-items:start;align-items:center}.trajectoryControlBlock>*{grid-column:start / end}.trajectoryControlBlock>label,.trajectoryControlBlock>.trajectorySegmentControlBlock,.trajectoryControlBlock>.helperEvent{grid-column:auto}.grid-tVal{grid-area:tVal}.grid-xVal{grid-area:xVal}.grid-tOVal{grid-area:tOVal}.grid-xOVal{grid-area:xOVal}.grid-vIFixed{grid-area:vIFixed}.grid-vIAuto{grid-area:vIAuto;justify-self:start}.grid-vIMatch{grid-area:vIMatch;justify-self:start}.grid-vOFixed{grid-area:vOFixed}.grid-vOAuto{grid-area:vOAuto;justify-self:start}.grid-vOMatch{grid-area:vOMatch;justify-self:start}.grid-vIn{grid-area:vIn}.grid-vOut{grid-area:vOut}.grid-vOIn{grid-area:vOIn}.grid-vOOut{grid-area:vOOut}.trajectoryEventControlBlock,#diagramControls>div.trajectoryEventControlBlock{position:relative;margin-top:.75em;padding:1rem .5rem .5rem;border:solid gray 1px;border-radius:.5rem;display:grid;grid-template-columns:repeat(7,max-content);grid-template-rows:auto;grid-template-areas:"tVal xVal vIFixed vIn vOIn vIAuto vIMatch" "tOVal xOVal vOFixed vOut vOOut vOAuto vOMatch";grid-auto-flow:row;justify-items:end;align-items:center;gap:.75rem 0}@media (max-width: 639px){#narrowWarning{display:block}.trajectoryEventControlBlock,#diagramControls>div.trajectoryEventControlBlock{grid-template-columns:repeat(5,max-content);grid-template-rows:auto;grid-template-areas:". tVal xVal tOVal xOVal" "vIFixed vIn vOIn vIAuto vIMatch" "vOFixed vOut vOOut vOAuto vOMatch";position:sticky;left:.25rem}.trajectoryEventControlBlock .grid-xOVal:after{margin-right:0}h3{margin-left:5%;margin-right:5%}#systemStateOutput{display:none}}#selectedEventControls{border-width:2px!important}.helperEvent{padding:.5rem;border:dashed lightgray 1px;color:gray;grid-template-columns:repeat(2,max-content)}.helperEvent .vModeLabel,.helperEvent .vInputLabel{display:none}.trajectorySegmentControlBlock{padding:.5rem}.closeButton{background:#fff;border:1px grey solid;border-radius:.25rem;cursor:pointer;color:gray;line-height:0;width:1.2rem;height:1.2rem;padding:0}.eventCloseButton{position:absolute;top:-.75rem;right:-.5rem}.eventCloseButton:hover{color:#c00;border-color:#c00}.properTimeEvent{position:absolute;top:-.75rem;left:-.5rem;background:#fff;border:1px grey solid;border-radius:.25rem;padding:0 .25rem 0 0}.addEventButton{margin:0 1em 0 0}.loneEventControlBlock>label,.loneEventControlBlock>button{display:inline-block}.symbolInput{width:3em}.coordInput,.vInput{width:3.75em}.vInput{margin-right:.75em}#coordRangeControls select{margin-right:1em}#TimesliceValue{width:5em}#xMinInput{width:4.5em}input[value=SAME]{margin-left:1em}.accelInfo{display:inline-block;text-align:right}.eventTitle{position:absolute;width:fit-content;top:-.75rem;left:0;right:0;margin-inline:auto;padding:.1rem .25rem 0;background:#fff;border:1px grey solid;border-radius:.25rem}.timeValue:after,.posValue:after,.accelInfo:after{margin-left:.2rem;margin-right:.75rem}.controlStack .timeValue:after{margin-right:0}.timeValue:after{content:attr(data-unit)}.posValue:after{content:"l" attr(data-unit)}.accelInfo:after{content:"l" attr(data-unit) "/" attr(data-unit) "²"}.velInfoExplicit:after{content:"l" attr(data-unit) "/" attr(data-unit)}main#introDisplay{display:grid;grid-template-columns:minmax(10em,3fr) minmax(150px,2fr);grid-template-rows:auto;grid-template-areas:"text diagram";column-gap:1rem;place-items:start stretch}main#introDisplay>#diagram-pair{grid-area:diagram;position:sticky;top:1rem;right:1rem}main#introDisplay>#diagram-pair.hideDiagram{top:20vh}main#introDisplay>#diagram-pair.hideDiagram .canvas-diagram{display:none}main#introDisplay>.textContent{grid-area:text;justify-self:center;font-size:larger;max-width:30em;margin-bottom:3rem;padding-bottom:2rem}@media (max-width: 639px){main#introDisplay>.textContent{font-size:medium}}.textContent canvas{margin-left:auto;margin-right:auto;width:auto}.activeSection{background-color:var(--highlight-bg-color)}.BigCentered{margin-left:auto;margin-right:auto;text-align:center;font-size:1.5em}.warning,noscript{color:red;margin:1rem;border:solid thin gray;border-radius:.25rem;padding:.5rem;background-color:var(--content-bg-color)}.visually-hidden{border:0;padding:0;margin:0;position:absolute!important;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.invisible{visibility:hidden}.hidden{display:none}