:root{--wrapper-block: 700px;--wrapper-inline: 400px;--root-margin-block: 10;--root-margin-inline: -10;--root-margin-top: 0px;--root-margin-left: 0px;--root-margin-height-scale: 1.2;--root-margin-width-scale: .8;--color-not-observed: rgb(255, 138, 138);--color-observed: rgb(157, 255, 138);--color-code-bg: rgb(224, 224, 224);--color-code: #9333ea;--margin-s: .5rem;--margin-m: 1rem;--scroll-shadow-top: 0px}*{margin:0;padding:0;box-sizing:border-box}html{writing-mode:horizontal-lr;line-height:1.4;letter-spacing:.1px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Noto Sans,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"}.layout-grid{width:100%;height:100%;display:grid;grid-template-columns:1fr 300px;grid-template-rows:100vh}.layout-grid-aside{background-color:#f6f8fa;grid-column:2 / 3;grid-row:1;padding:var(--margin-s);border-left:1px solid black;overflow-y:scroll}.layout-grid-main{grid-column:1 / 2;grid-row:1;display:flex;align-items:center;justify-content:center;container:layout-grid-main / inline-size;position:relative;overflow:hidden}input{display:block;width:100%}h2{letter-spacing:.5px;margin-bottom:var(--margin-s)}p{margin-bottom:var(--margin-m)}pre{padding:var(--margin-s);margin-block:var(--margin-m);background-color:var(--color-code-bg);border-radius:.25rem}code{background-color:var(--color-code-bg);color:var(--color-code)}p code{padding:.25rem;border-radius:.25rem}.language-button{position:absolute;top:0;right:0;font-size:1.5rem;cursor:pointer;border:none;background:none;margin:0;padding:.5rem}.wrapper-element{position:relative;overflow-y:scroll;border:1px solid black;width:var(--wrapper-block);height:var(--wrapper-inline);background:#fff;z-index:2}.wrapper-element:after{content:"Root";position:absolute;color:#000;top:-1.5rem;left:0;z-index:20}.wrapper-titles{position:sticky;top:0;left:0;display:flex;flex-direction:row;align-items:center;justify-content:space-between}.title-element-status{padding-inline:1rem;background-color:var(--color-not-observed)}.title-element-status-observed{background-color:var(--color-observed)}.scroll-down{display:flex;height:90%;align-items:center;justify-content:center}.scrolling-element{padding:.5rem;position:relative;margin:calc(var(--wrapper-inline) / 2) auto calc(var(--wrapper-inline) * 2);width:200px;height:200px;background:var(--color-not-observed);z-index:8}.scrolling-element-observed{background:var(--color-observed)}.scrolling-element-shadow{padding:.5rem;position:absolute;top:var(--scroll-shadow-top);left:50%;transform:translate(-50%);width:200px;height:200px;background:repeating-linear-gradient(45deg,#d0d0d0,#d0d0d0 10px,#eee 10px,#eee 20px);z-index:1}.root-margin{--calculated-width: calc( var(--wrapper-block) * var(--root-margin-width-scale) );--calculated-height: calc( var(--wrapper-inline) * var(--root-margin-height-scale) );border:2px dashed blue;position:absolute;z-index:11;pointer-events:none;width:var(--calculated-width);height:var(--calculated-height);left:calc(50% - var(--calculated-width) / 2);top:calc(50% - var(--calculated-height) / 2);transform:translate(var(--root-margin-left)) translateY(var(--root-margin-top))}.root-margin:after{content:"Root Margin";position:absolute;width:max-content;color:#00f;top:-1.5rem;left:0}