.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)}.preview{grid-area:preview;flex:1;background:#fff;border-left:2px solid var(--bg-color)}.preview iframe{width:100%;height:100%;border:none}#content{flex:1;display:grid}#content[data-layout=left]{grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(2,1fr);grid-template-areas:"html-editor-pane preview" "css-editor-pane preview" "js-editor-pane preview"}#content[data-layout=right]{grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(2,1fr);grid-template-areas:"preview html-editor-pane" "preview css-editor-pane" "preview js-editor-pane"}#content[data-layout=top]{grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(3,1fr);grid-template-areas:"html-editor-pane css-editor-pane js-editor-pane" "preview preview preview"}#content[data-layout=bottom]{grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(3,1fr);grid-template-areas:"preview preview preview" "html-editor-pane css-editor-pane js-editor-pane"}#content[data-layout=left][data-expanded=html],#content[data-layout=right][data-expanded=html]{grid-template-rows:1fr repeat(2,var(--min-editor-height))}#content[data-layout=left][data-expanded=css],#content[data-layout=right][data-expanded=css]{grid-template-rows:var(--min-editor-height) 1fr var(--min-editor-height)}#content[data-layout=left][data-expanded=js],#content[data-layout=right][data-expanded=js]{grid-template-rows:repeat(2,var(--min-editor-height)) 1fr}#content[data-layout=top][data-expanded=html],#content[data-layout=bottom][data-expanded=html]{grid-template-columns:1fr repeat(2,var(--min-editor-width))}#content[data-layout=top][data-expanded=css],#content[data-layout=bottom][data-expanded=css]{grid-template-columns:var(--min-editor-width) 1fr var(--min-editor-width)}#content[data-layout=top][data-expanded=js],#content[data-layout=bottom][data-expanded=js]{grid-template-columns:repeat(2,var(--min-editor-width)) 1fr}.app-logo{margin:0;font-family:monospace;font-weight:lighter}.btn{background:var(--bg-color);color:var(--primary-action-color);padding:.25rem .5rem;font-weight:500;border:1px solid currentColor;cursor:pointer;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)}.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:16px;color:#f5f5f5;font-family:monospace;border:2px solid #4d4d4d;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}.MenuBar #MenuBar-dialog:open{display:flex;flex-flow:column nowrap;align-items:stretch;background:none;color:#fff;text-align:center;width:100%;border:none;padding:0}.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}.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}.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)}.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}.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}#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;--text-color: var(--color);--link-color: var(--color);--primary-action-color: var(--color-purple-500);--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);--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)}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}.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}