@import "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";@import "https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap";@import "https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&display=swap";@import "https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap";:root{--body-font:Inter, "Noto Sans SC", "Noto Sans TC", "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Arial, sans-serif;--mono-font:"JetBrains Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", "Noto Sans SC", "Noto Sans TC", monospace;--body-font-size:clamp(.825rem, calc(.775rem + .195vw), 1rem);--body-line-height:1.5;--body-width:45rem;--transition:.2s cubic-bezier(.4, 0, .2, 1);--base-white:252, 252, 252;--base-light:244, 244, 244;--base-medium:221, 221, 221;--base-dark:66, 66, 66;--base-black:12, 12, 12;--base-accent-light:68, 123, 230;--base-accent-medium:24, 80, 187;--base-accent-dark:23, 24, 120;--bg-color:var(--base-white);--text-color:var(--base-black);--light-bg-color:var(--base-light);--light-text-color:var(--base-black);--medium-bg-color:var(--base-medium);--medium-text-color:var(--base-black);--dark-bg-color:var(--base-dark);--dark-text-color:var(--base-white);--focus-bg-color:var(--base-accent-light);--focus-text-color:var(--base-white);--link-color:var(--base-accent-medium);--link-hover-color:var(--base-accent-light);--link-visited-color:var(--base-accent-dark);--selection-bg-color:var(--focus-bg-color);--selection-text-color:var(--focus-text-color);--scrollbar-track-color:var(--medium-bg-color), .2;--scrollbar-thumb-color:var(--dark-bg-color), .4;--border:.0625rem solid rgb(var(--base-black), .25)}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scrollbar-width:thin;scrollbar-color:rgb(var(--scrollbar-thumb-color)) rgb(var(--scrollbar-track-color))}body{background:rgb(var(--bg-color));color:rgb(var(--text-color));font-family:var(--body-font);font-size:var(--body-font-size);line-height:var(--body-line-height);margin:0}::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-track{background:rgb(var(--scrollbar-track-color))}::-webkit-scrollbar-thumb{background:rgb(var(--scrollbar-thumb-color))}::selection{background:rgb(var(--selection-bg-color));color:rgb(var(--selection-text-color))}#editor{width:var(--body-width);overflow-wrap:break-word;flex-wrap:wrap;gap:.5rem;max-width:calc(100% - 3rem);margin:1.5rem auto;display:flex}input,textarea{appearance:none;font:inherit;box-sizing:border-box;border-radius:0;outline:0;margin:0}.btn{cursor:pointer;background:rgb(var(--light-bg-color));color:rgb(var(--light-text-color));transition:background var(--transition), color var(--transition);border:0;flex-grow:1;justify-content:center;align-items:center;padding:.375em .75em;display:inline-flex}.btn:is(:hover,:active,:focus){background:rgb(var(--medium-bg-color));color:rgb(var(--medium-text-color))}.text{background:rgb(var(--bg-color));max-width:100%;color:rgb(var(--text-color));border:var(--border);box-shadow:0 0 0 0 rgb(var(--focus-bg-color));transition:box-shadow var(--transition), border-color var(--transition);flex:1;margin:0;padding:0 .25em}.text:focus-visible{box-shadow:0 0 0 .125em rgb(var(--focus-bg-color));border-color:rgb(var(--focus-bg-color))}#buttons{flex-wrap:wrap;flex:100%;gap:.5rem;display:flex}#source{resize:vertical;flex:100%}#preview{border:0;width:100%;height:100vh}