:root{--bg-color:#0d1117;--pane-bg:#161b22;--text-color:#c9d1d9;--accent-color:#58a6ff;--border-color:#30363d;--header-height:80px;--footer-height:40px;--font-ui:'Inter',sans-serif;--font-code:'Fira Code',monospace;--font-title:'WindSong',cursive}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-color);font-family:var(--font-ui);height:100vh;overflow:hidden;display:flex;flex-direction:column}.app-container{display:flex;flex-direction:column;height:100%;width:100%}.header{height:var(--header-height);display:flex;align-items:center;justify-content:space-between;padding:0 2rem;border-bottom:1px solid var(--border-color);background-color:var(--bg-color);z-index:10}.header-spacer,.logo-container{flex:1;display:flex;align-items:center}.site-logo{height:50px;width:auto;object-fit:contain}.title-container{flex:2;display:flex;justify-content:center;align-items:center;text-align:center;position:relative}.main-title{font-family:var(--font-title);font-size:2.5rem;color:var(--text-color);font-weight:500;text-align:center;line-height:1;white-space:nowrap}.main-content{flex:1;display:flex;flex-direction:row;overflow:hidden;position:relative;padding:1rem;gap:1rem}.pane{flex:1;display:flex;flex-direction:column;background-color:var(--pane-bg);border:1px solid var(--border-color);border-radius:8px;overflow:hidden;min-width:0}.pane-header{padding:.75rem 1rem;border-bottom:1px solid var(--border-color);display:flex;align-items:center;gap:.5rem;background-color:rgba(255,255,255,.02)}.lang-logo{height:24px;width:auto}.lang-label{font-weight:600;font-size:.9rem;color:var(--text-color)}.editor-container{flex:1;position:relative;overflow:hidden}.code-editor,.code-highlight{position:absolute;top:0;left:0;width:100%;height:100%;margin:0!important;padding:16px!important;border:none!important;font-family:'Fira Code',Menlo,Monaco,'Courier New',monospace!important;font-size:14px!important;line-height:21px!important;background:0 0!important;white-space:pre!important;overflow:auto!important;tab-size:4!important;box-sizing:border-box!important;letter-spacing:normal!important;word-spacing:normal!important;text-transform:none!important;text-indent:0!important;text-rendering:auto!important;font-variant-ligatures:none!important;-webkit-font-smoothing:antialiased!important;-moz-osx-font-smoothing:grayscale!important;direction:ltr!important;text-align:left!important}.code-editor{z-index:2;color:transparent!important;background:0 0!important;caret-color:var(--text-color);resize:none;outline:0;-webkit-text-fill-color:transparent}.code-highlight{z-index:1;pointer-events:none;color:var(--text-color)}code[class*=language-],pre[class*=language-]{text-shadow:none!important;font-family:'Fira Code',Menlo,Monaco,'Courier New',monospace!important;font-size:14px!important;line-height:21px!important;direction:ltr!important;text-align:left!important;white-space:pre!important;word-spacing:normal!important;word-break:normal!important;tab-size:4!important;hyphens:none!important;background:0 0!important;border:none!important;box-shadow:none!important;margin:0!important}pre.code-highlight{padding:16px!important;box-sizing:border-box!important}code[class*=language-]{padding:0!important}.arrow-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:60px;z-index:5;cursor:pointer;transition:transform .3s ease}.arrow-wrapper{background-color:#fff;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;box-shadow:none;border:1px solid var(--border-color);transition:transform .3s ease,background-color .3s ease}.arrow-wrapper:hover{transform:scale(1.1);background-color:#f0f6fc}.arrow-icon{width:24px;height:24px;color:#0d1117}.arrow-hint{margin-top:.5rem;font-size:.7rem;color:#8b949e;text-align:center;opacity:.8;max-width:80px}.title-subscript{position:absolute;left:50%;transform:translateX(calc(2.5rem * 5.5));font-family:var(--font-ui);font-size:.6rem;color:#8b949e;margin-left:2rem;font-weight:400;letter-spacing:normal;white-space:nowrap;top:50%;transform:translate(calc(2.5rem * 5.5 + 2rem),-50%)}.footer{height:var(--footer-height);display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color);background-color:var(--bg-color);font-size:.8rem;color:#8b949e;z-index:10}@media (max-width:768px){.main-content{flex-direction:column}.arrow-container{width:100%;height:60px;flex-direction:row;gap:1rem}.arrow-icon{transform:rotate(90deg)}.arrow-container.reversed .arrow-icon{transform:rotate(-90deg)}.header{padding:0 1rem}.main-title{font-size:1.8rem}.site-logo{height:40px}}.arrow-container.reversed .arrow-wrapper{transform:rotate(180deg)}.read-only .code-editor{cursor:default;color:transparent}.custom-link{color:#fff;text-decoration:none;position:relative;text-shadow:-1px -1px 0 var(--bg-color),1px -1px 0 var(--bg-color),-1px 1px 0 var(--bg-color),1px 1px 0 var(--bg-color);background-image:linear-gradient(to top,#fff 0,#fff 1px,transparent 1px);background-repeat:no-repeat;background-size:100% 100%;transition:color .2s ease,background-image .2s ease}.custom-link:focus,.custom-link:hover{color:var(--accent-color);background-image:linear-gradient(to top,var(--accent-color) 0,var(--accent-color) 1px,transparent 1px)}@media (-webkit-min-device-pixel-ratio:1.5),(min-resolution:144dpi){.custom-link{background-image:linear-gradient(to top,#fff 0,#fff .5px,transparent .5px)}.custom-link:focus,.custom-link:hover{background-image:linear-gradient(to top,var(--accent-color) 0,var(--accent-color) .5px,transparent .5px)}}::placeholder{color:#484f58;font-style:italic}