.cube{--cube-size: 30px;--shadow-size: calc(var(--cube-size) / 5);--z-translation: calc(var(--cube-size) / 2);width:var(--cube-size);height:var(--cube-size);position:relative;transform-style:preserve-3d;perspective:none}.cube-spinning{animation:spin-cube 3s infinite linear}.cube-face{position:absolute;width:var(--cube-size);height:var(--cube-size);background:#ffffff1a;border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 0 var(--shadow-size) #fff3}.cube-face-front{transform:translateZ(var(--z-translation))}.cube-face-back{transform:rotateY(180deg) translateZ(var(--z-translation))}.cube-face-left{transform:rotateY(-90deg) translateZ(var(--z-translation))}.cube-face-right{transform:rotateY(90deg) translateZ(var(--z-translation))}.cube-face-top{transform:rotateX(90deg) translateZ(var(--z-translation))}.cube-face-bottom{transform:rotateX(-90deg) translateZ(var(--z-translation))}@keyframes spin-cube{0%{transform:rotateX(0) rotateY(0)}to{transform:rotateX(360deg) rotateY(360deg)}}#loading{position:fixed;top:0;right:0;bottom:0;left:0;background:#222;color:#fafafa;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:Inter,sans-serif;font-size:18px;font-weight:300;letter-spacing:.05em;text-transform:uppercase;transition:opacity .3s ease-in-out;gap:16px;font-size:1.1rem}.editor{flex:1;overflow:auto}.cm-editor{height:100%}.cm-content ::selection{background:#6464ff4d}.cm-selectionBackground{background:#6464ff4d!important}.cm-activeLine{background:#3232321a}.cm-activeLine ::selection{background:#6464ff80}.cm-selectionLayer .cm-selectionBackground{background:#6464ff4d!important}.cm-vim-panel.cm-panel input{color:currentColor}.html-editor-pane{grid-area:html-editor-pane}.css-editor-pane{grid-area:css-editor-pane}.js-editor-pane{grid-area:js-editor-pane}.editor-pane{width:100%;height:100%;display:flex;flex-flow:column nowrap;align-items:stretch;justify-content:flex-start;flex:1;overflow:auto}.editor-pane>h4{margin:0;-webkit-user-select:none;user-select:none;font-size:var(--editor-header-font-size);padding:var(--editor-header-padding);height:var(--min-editor-height)}.Preview{grid-area:preview;flex:1;background:var(--preview-bg-color);border-left:2px solid var(--bg-color)}.Preview.embedded{border:none;border-radius:inherit;overflow:hidden}.Preview iframe{width:100%;height:100%;border:none}.Preview.embedded iframe{height:calc(100% + 1px)}#content{flex:1}.resize-group{display:grid;grid-template-rows:100%;grid-template-columns:100%;width:100%;height:100%}.resize-group .resize-pane{position:relative;display:flex}.resize-group .resize-handle{position:absolute;top:0;left:0;background:var(--resize-handle-color, transparent);-webkit-user-select:none;user-select:none}.resize-group[data-resize-axis=x]>.resize-pane>.resize-handle{cursor:ew-resize;width:var(--resize-border-width);height:100%}.resize-group[data-resize-axis=y]>.resize-pane>.resize-handle{cursor:ns-resize;width:100%;height:var(--resize-border-width)}.app-logo{margin:0;font-family:system-ui;font-weight:200;display:flex;flex-flow:row nowrap;align-items:center;gap:14px;font-size:20px;transition:text-shadow .25s ease,transform .25s ease}.app-logo .cube{transform:rotateX(45deg) rotateY(45deg);animation-play-state:paused}.app-logo:hover{text-shadow:0 0 8px rgba(255,255,255,.9)}.app-logo:hover .cube{animation:logo-spin-cube 3s infinite linear both;animation-play-state:running}@keyframes logo-spin-cube{0%{transform:rotateX(45deg) rotateY(45deg)}to{transform:rotateX(405deg) rotateY(405deg)}}.btn{background:var(--bg-color);color:var(--primary-action-color);padding:.25rem .5rem;font-weight:500;border:1px solid currentColor;border-radius:4px;cursor:pointer;display:inline-flex;flex-flow:row nowrap;align-items:center;justify-content:center;gap:4px;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}.btn.btn-full-width{width:100%;padding:.5rem}.btn-solid{color:var(--color);background:var(--color-purple-200);border:1px solid var(--color-purple-300)}.btn-solid:hover,.btn-solid:focus-visible{color:var(--color);background:var(--primary-action-color)}.btn-solid.btn-secondary{color:var(--bg-color);background:var(--color-grey-600);border:1px solid var(--color-grey-400)}.btn-solid.btn-secondary:hover,.btn-solid.btn-secondary:focus-visible{color:var(--bg-color);background:var(--color-grey-800)}.btn-solid.btn-success{color:var(--color-grey-900);background:var(--color-green-300);border:1px solid var(--color-green-500)}.btn-solid.btn-success:hover,.btn-solid.btn-success:focus-visible{background:var(--color-green-400)}.btn-solid.btn-danger{color:var(--color-grey-900);background:var(--color-red-400);border:1px solid var(--color-red-600)}.btn-solid.btn-danger:hover,.btn-solid.btn-danger:focus-visible{background:var(--color-red-500)}.btn-invert{background:var(--bg-color);color:var(--primary-action-color)}.btn-invert:hover,.btn-invert:focus-visible{color:var(--bg-color);background:var(--primary-action-color)}.btn-invert.btn-secondary{background:var(--bg-color);color:var(--secondary-action-color)}.btn-invert.btn-secondary:hover,.btn-invert.btn-secondary:focus-visible{color:var(--bg-color);background:var(--secondary-action-color)}.btn-invert.btn-success{color:var(--success-action-color)}.btn-invert.btn-success:hover,.btn-invert.btn-success:focus-visible{background:var(--success-action-color);color:var(--bg-color)}.btn-invert.btn-danger{color:var(--danger-action-color)}.btn-invert.btn-danger:hover,.btn-invert.btn-danger:focus-visible{color:var(--bg-color);background:var(--danger-action-color)}.btn-ghost{border:none;background:none;opacity:.7;color:currentColor}.btn-ghost:hover,.btn-ghost:focus{opacity:1}.icon{--line-weight: .15em;position:relative;display:inline-block;color:currentColor;font-size:1rem;width:1em;height:1em}.icon-clickable{cursor:pointer;opacity:.8;transition:opacity .15s ease-in-out}.icon-clickable:hover,.icon-clickable:focus-visible{opacity:1}.icon-close:before,.icon-close:after{content:"";background-color:currentColor;position:absolute;height:100%;width:var(--line-weight);transform-origin:center;display:block;left:calc(50% + (var(--line-weight) * -.5));border-radius:.1em}.icon-close:before{rotate:45deg}.icon-close:after{rotate:-45deg}.icon-plus:before,.icon-plus:after{--line-weight: .1em;content:"";background-color:currentColor;position:absolute;height:100%;width:var(--line-weight);transform-origin:center;display:block;left:calc(50% + (var(--line-weight) * -.5));border-radius:.1em}.icon-plus:after{rotate:90deg}.Finder{display:grid;grid-template-rows:1fr auto;grid-template-columns:minmax(300px,400px) 1fr;grid-template-areas:"list preview" "search preview";height:75vh;width:80vw;gap:10px;max-width:2000px;margin:auto;color:#f5f5f5;font-size:16px;font-family:monospace;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);--border-radius: 4px;--border-color: var(--primary-action-color);--padding-x: 24px;--padding-y: 12px;--padding: var(--padding-y) var(--padding-x)}.Finder .list{grid-area:list;display:flex;flex-flow:column nowrap;align-items:stretch;justify-content:flex-start;gap:10px;border-radius:var(--border-radius);border:2px solid var(--border-color);overflow:hidden}.Finder .list .title{padding:var(--padding);padding-bottom:0}.Finder .list ul{margin:0;padding:0;overflow:auto}.Finder .list ul li{list-style:none}.Finder .list ul li a{padding:4px var(--padding-x);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.5;-webkit-user-select:none;user-select:none;position:relative;color:currentColor;text-decoration:none}.Finder .list ul li a.selected{opacity:1;cursor:pointer;outline:none}.Finder .list ul li a.selected{text-decoration:underline;color:var(--border-color)}.Finder .list ul li a.selected:before{content:"›";position:absolute;left:10px;top:50%;transform:translateY(-50%)}.Finder .list ul li.error{color:#cd5c5c;padding:0 var(--padding-x)}.Finder .list ul li.empty{padding:0 var(--padding-x)}.Finder .search{grid-area:search;border-radius:var(--border-radius);border:2px solid var(--border-color);background:none;outline:none;color:inherit;font-family:inherit;font-size:inherit;padding:var(--padding)}.Finder .preview{grid-area:preview;border-radius:var(--border-radius);border:2px solid var(--border-color);padding:var(--padding);display:flex;flex-flow:column nowrap;gap:10px;overflow:hidden}.Finder .preview .frame{border-radius:inherit;flex:1;display:flex}.Finder .close{position:absolute;top:-20px;right:-20px;color:var(--color);background:none}.SvgIcon{flex:0;line-height:0}.SvgIcon.interactive{cursor:pointer;opacity:.5}.SvgIcon.interactive:hover{opacity:1}.MenuBar{max-width:360px;min-width:150px;width:100%}.MenuBar .taskbar{view-transition-name:menubar-palette;display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between;gap:4px;height:30px;font-size:14px;color:var(--color);font-family:monospace;border:1px solid var(--border-color);border-radius:6px;padding:0 8px}.MenuBar .taskbar.hidden{view-transition-name:none;visibilty:hidden;opacity:0}.MenuBar .taskbar .label{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px;background:none;border:none;font-size:inherit;font-family:inherit;cursor:pointer;color:inherit;width:100%}.MenuBar .taskbar .renameField{font-family:inherit;width:100%;text-align:center;font-size:inherit;border:none;outline:none;background:none;color:inherit;caret-color:currentColor;border-radius:4px}.MenuBar .taskbar .renameField:focus{background:#323232}@starting-style{.MenuBar #MenuBar-dialog{opacity:0;transform:scale(.8);transition:opacity .3s ease allow-discrete,transform .3s ease allow-discrete}}.MenuBar #MenuBar-dialog:open{display:flex;flex-flow:column nowrap;align-items:stretch;background:none;color:#fff;border:none;padding:0;max-width:none;max-height:none;overflow:auto;margin:0;height:100vh;width:100vw;opacity:1;transform:scale(1)}.MenuBar #MenuBar-dialog::backdrop{background-color:var(--modal-backdrop-color);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.Header{display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between;padding:1rem}.Header .centerContent{position:relative;max-width:360px;min-width:150px;width:100%;--spacing: 20px}.Header .centerContent .leftSideActions{display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;gap:8px;white-space:nowrap;position:absolute;right:calc(100% + var(--spacing));top:50%;transform:translateY(-50%)}.Header .centerContent .rightSideActions{position:absolute;left:calc(100% + var(--spacing));top:50%;transform:translateY(-50%)}.Popover>[popover]{margin:0;padding:0;inset:auto;border:none;background:none;overflow:visible}.Popover>[popover].top{position-area:top;margin-bottom:var(--offset, 0px)}.Popover>[popover].right{position-area:right;margin-left:var(--offset, 0px)}.Popover>[popover].bottom{position-area:bottom;margin-top:var(--offset, 0px)}.Popover>[popover].left{position-area:left;margin-right:var(--offset, 0px)}.ActionGroup{display:flex;flex-flow:row nowrap;align-items:stretch;justify-content:center;border:1px solid var(--border-color);border-radius:6px;overflow:hidden;background:var(--border-color);gap:1px}.ActionGroup .action{position:relative;background:none;border:none;font-size:20px;padding:6px;cursor:pointer;width:32px;height:27px;display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;transition:background-color .15s ease;background:var(--bg-color)}.ActionGroup .action:hover{background:var(--border-color)}.Card{border-radius:8px;--shadow-color: hsla(0deg, 0%, 0%, var(--shadow-opacity));background-color:#fcfcfc;background-color:var(--bg-color);border:1px solid var(--border-color);color:var(--color)}.Card.small{box-shadow:0 2px 2px var(--shadow-color);--shadow-opacity: .3;padding:8px}.Card.medium{box-shadow:0 2px 2px var(--shadow-color),1px 4px 4px var(--shadow-color),2px 6px 6px var(--shadow-color);--shadow-opacity: calc(.35 / 3);padding:16px}.Card.large{box-shadow:0 1px 1px var(--shadow-color),1px 2px 2px var(--shadow-color),2px 4px 4px var(--shadow-color),3px 8px 8px var(--shadow-color),4px 16px 16px var(--shadow-color),5px 32px 32px var(--shadow-color);--shadow-opacity: calc(.3 / 6);padding:16px}.Menu{display:flex;flex-flow:column nowrap;align-items:stretch}.Menu .label{text-align:left;flex:1}.Menu button{display:inline-flex;flex-flow:row nowrap;align-items:center;justify-content:space-between;white-space:nowrap;gap:12px;cursor:pointer;padding:8px;border:none;background:none;color:inherit;border-radius:4px;font-family:inherit;transition:background-color .15s ease;font-size:14px}.Menu button:hover,.Menu button:focus,.Menu button .selected{background:var(--border-color)}.checkbox-field label.label-left{margin-right:.5rem}.checkbox-field label.label-right{margin-left:.5rem}.checkbox-field input{margin:0}.modal{position:fixed;height:fit-content;background:var(--bg-color);color:var(--text-color);border:none;padding:1rem;border-radius:8px}.modal::backdrop{background-color:var(--modal-backdrop-color);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal.modal-default{border:1px solid currentColor}.modal.modal-success{border:1px solid var(--success-action-color)}.modal.modal-danger{border:1px solid var(--danger-action-color)}.modal.modal-primary{border:1px solid var(--primary-action-color)}.text-input{background:transparent;border:none;border-bottom:1px solid var(--gutter-text-color);color:var(--text-color);padding:.25rem 0;transition:opacity .15s ease-in-out,color .15s ease-in-out,border-color .15s ease-in-out}.text-input:focus-visible{border-color:currentColor;outline:none}#pen-creation-modal>form{width:20rem}#clone-pen{margin-right:auto}#environment-settings{margin-top:auto}.PenListingsDetail{position:relative;overflow:auto}.PenListingsDetail summary{position:sticky;top:0;left:0;background:var(--bg-color);z-index:1}#pen-listings{gap:0}#pen-listings .current-pen-listing{font-weight:700}.pen-listing{display:flex;flex-flow:row nowrap;align-items:stretch;justify-content:space-between;gap:.25rem;height:1.5rem}.pen-listing>a:not(.icon){flex:1}.delete-listing-action{opacity:0;color:var(--danger-action-color)}.delete-listing-action{transition:none}.pen-listing:hover .delete-listing-action,.pen-listing:focus-within .delete-listing-action{opacity:.4}.pen-listing:hover .delete-listing-action:hover,.pen-listing:focus-within .delete-listing-action:focus-within{opacity:1;transition:opacity .15s ease-in-out}#sidebar{padding:1rem;display:flex;flex-flow:column nowrap;align-items:stretch;justify-content:flex-start;gap:1.5rem;width:var(--sidebar-width);transition:translate var(--sidebar-transition)}#sidebar fieldset{display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-start;gap:.3rem}#sidebar.sidebar-hidden{translate:-100% 0;pointer-events:none;-webkit-user-select:none;user-select:none}#sidebar.sidebar-hidden *{pointer-events:none;-webkit-user-select:none;user-select:none}#app{margin:0;height:100vh;overflow:hidden;font-family:monospace;background:var(--bg-color);color:var(--color);display:grid;grid-template-rows:auto 1fr}.app-main{overflow:hidden;display:grid;grid-template-columns:var(--sidebar-width) 1fr;transition:var(--sidebar-transition) grid-template-columns}.app-main>*:not(dialog){overflow:hidden}.app-main:has(#sidebar.sidebar-hidden){grid-template-columns:0 1fr}:root{--color-purple-900: #f3f1fe;--color-purple-800: #e3ddfd;--color-purple-700: #c5bafc;--color-purple-600: #a495f8;--color-purple-500: #7b68ee;--color-purple-400: #6c5bd6;--color-purple-300: #5c4dc0;--color-purple-200: #4d3fa3;--color-purple-100: #3b2e7d;--color-purple-50: #2b1f5e;--color-red-900: #fdf2f2;--color-red-800: #fce0e0;--color-red-700: #f8b8b8;--color-red-600: #f08a8a;--color-red-500: #cd5c5c;--color-red-400: #b25252;--color-red-300: #944545;--color-red-200: #763838;--color-red-100: #572929;--color-red-50: #3f1d1d;--color-green-900: #eefaf3;--color-green-800: #d6f3e3;--color-green-700: #a9e5c7;--color-green-600: #76d5a7;--color-green-500: #3cb371;--color-green-400: #349e63;--color-green-300: #298352;--color-green-200: #226943;--color-green-100: #184b30;--color-green-50: #0f3321;--color-grey-900: #fafafa;--color-grey-800: #f5f5f5;--color-grey-700: #e5e5e5;--color-grey-600: #d4d4d4;--color-grey-500: #a3a3a3;--color-grey-400: #737373;--color-grey-300: #525252;--color-grey-200: #404040;--color-grey-100: #333333;--color-grey-50: #292929;--color-grey-0: #222222}[data-theme=light]{--color-purple-50: #f3f1fe;--color-purple-100: #e3ddfd;--color-purple-200: #c5bafc;--color-purple-300: #a495f8;--color-purple-400: #8978f5;--color-purple-500: #7b68ee;--color-purple-600: #6c5bd6;--color-purple-700: #5c4dc0;--color-purple-800: #4d3fa3;--color-purple-900: #3b2e7d;--color-red-50: #fdf2f2;--color-red-100: #fce0e0;--color-red-200: #f8b8b8;--color-red-300: #f08a8a;--color-red-400: #e86a6a;--color-red-500: #cd5c5c;--color-red-600: #b25252;--color-red-700: #944545;--color-red-800: #763838;--color-red-900: #572929;--color-green-50: #eefaf3;--color-green-100: #d6f3e3;--color-green-200: #a9e5c7;--color-green-300: #76d5a7;--color-green-400: #56c78f;--color-green-500: #3cb371;--color-green-600: #349e63;--color-green-700: #298352;--color-green-800: #226943;--color-green-900: #184b30;--color-grey-0: #fafafa;--color-grey-50: #f5f5f5;--color-grey-100: #e5e5e5;--color-grey-200: #d4d4d4;--color-grey-300: #a3a3a3;--color-grey-400: #737373;--color-grey-500: #525252;--color-grey-600: #404040;--color-grey-700: #333333;--color-grey-800: #292929;--color-grey-900: #222222}:root{--gutter-bg-color: #f5f5f5;--gutter-text-color: #6c6c6c;--gutter-border-color: #ddd;--bg-color: #222;--color: #fafafa;--border-color: #4d4d4d;--text-color: var(--color);--link-color: var(--color);--primary-action-color: #8a6dd4;--secondary-action-color: var(--color-grey-700);--success-action-color: var(--color-green-500);--danger-action-color: var(--color-red-500);--modal-backdrop-color: rgba(0, 0, 0, .6);--preview-bg-color: var(--bg-color);--editor-header-font-size: .75rem;--editor-header-padding: .25rem;--min-editor-height: 22px;--min-editor-width: 10rem;--sidebar-width: 16.3rem;--sidebar-transition: .3s}[data-theme=light]{--gutter-bg-color: #222;--gutter-text-color: #a3a3a3;--gutter-border-color: #444;--bg-color: #f5f5f5;--color: #111;--text-color: var(--color);--link-color: var(--color);--primary-action-color: var(--color-purple-500);--secondary-action-color: var(--gutter-border-color);--success-action-color: var(--color-green-500);--danger-action-color: var(--color-red-500);--modal-backdrop-color: rgba(0, 0, 0, .1)}*{box-sizing:border-box}body{margin:0;height:100vh;overflow:hidden;font-family:monospace;background:var(--bg-color);color:var(--color)}body:has(:popover-open) iframe{pointer-events:none}fieldset{padding:0;border:none}details summary{cursor:pointer}details>*:not(summary){display:flex;flex-flow:column nowrap;align-items:stretch;justify-content:flex-start;margin-top:.5rem;gap:.5rem}a{color:var(--link-color);opacity:.7;text-decoration:none}a:hover{opacity:1;text-decoration:underline}.rotate90{transform:rotate(90deg)}.rotate180{transform:rotate(180deg)}.rotate270{transform:rotate(270deg)}.flex-col{display:flex;flex-flow:column nowrap}.flex-row{display:flex;flex-flow:row nowrap}.space-between{justify-content:space-between}.justify-center{justify-content:center}.align-center{align-items:center}.align-baseline{align-items:baseline}.align-stretch{align-items:stretch}.align-self-end{align-self:end}.gap-medium{gap:1.5rem}.gap-small{gap:.5rem}.gap-xsmall{gap:.25rem}.full-width{width:100%}.readable-max-width{max-width:79ch}.full-height{height:100%}.overflow-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.break-word{word-break:break-all}.font-xsmall{font-size:.7rem}.font-small{font-size:.8rem}.login{display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;gap:24px;padding:1rem;height:100vh;overflow:auto}.login-header{display:flex;flex-flow:column nowrap;align-items:center;gap:12px}.login-header-title{display:flex;flex-flow:row nowrap;align-items:center;gap:16px}.login-header-title-text{margin:0;font-size:2.2rem;font-weight:200;font-family:system-ui;text-align:left;text-shadow:0 0 8px rgba(255,255,255,.9)}.login-header-subtitle{font-size:.8rem;margin:0}.login-form{display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;gap:16px;border:1px solid #fafafa;padding:1.5rem 1rem;min-width:300px}.login-form-content{display:flex;flex-flow:column nowrap;align-items:stretch;justify-content:center;gap:8px;width:80%}.login-form-header{margin:0;font-size:.8rem;font-weight:400;text-align:left}.login-form input[type=text]{color:#fafafa;padding:.5rem;font-weight:500;border:1px solid currentColor;background:transparent;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}.login-form input:disabled{opacity:.5}.login-form button{padding:.25rem .5rem;font-weight:500;border:1px solid currentColor;background:transparent;cursor:pointer;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;background-color:#483d8b;color:#fafafa;border-color:#6a5acd;margin-top:8px}.login-form button:disabled{opacity:.5;cursor:not-allowed}.login-form-withoutLoginLink{text-align:center}.login-form a{cursor:pointer}.login-footer{font-size:.8rem;border-bottom:1px dotted;cursor:pointer}.login-footer:hover{border-color:currentColor;text-decoration:none}.login-confirmation-message{opacity:0;transition:opacity .15s ease}.login-confirmation-message--success{color:var(--success-action-color)}.login-confirmation-message--error{color:var(--danger-action-color)}.login-confirmation-message--shown{opacity:1}#colorized-text{font-weight:700;transition:color .1s linear;text-shadow:0 0 10px currentColor}