:root{font-family:Consolas,Courier New,monospace;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh}button{background-color:inherit;color:inherit;font-size:inherit;display:flex;align-items:center;justify-content:center;border:none;padding:0;cursor:pointer;appearance:none;-webkit-appearance:none}:root[data-theme=dark]{--bg-main: #1F1F1F;--bg-secondary: #181818;--bg-hover: #2A2D2E;--bg-active: #37373D;--text-primary: #FFFFFF;--text-secondary: #C1CCCC;--text-tertiary: #989898;--text-icon: #868686;--explorer-active: #D7D7D7;--tab-closing-hover: #313232;--workbench-border: #2B2B2B;--tree-branch: #585858}:root[data-theme=light]{--bg-main: #FFFFFF;--bg-secondary: #F3F4F6;--bg-hover: #D5DCDD;--bg-active: #E5E7EB;--text-primary: #111111;--text-secondary: #374151;--text-tertiary: #6B7280;--text-icon: #5B6777;--explorer-active: #3D3D3D;--tab-closing-hover: #D1D5DB;--workbench-border: #E5E7EB;--tree-branch: #D1D5DB}:root{--index-top: 3;--index-medium: 2;--index-low: 1;--header-h: 32px;--footer-h: 20px;--activity-bar-w: 55px;--side-bar-w: 200px;--tab-bar-h: 36px}header{background-color:var(--bg-main);width:100%;height:var(--header-h);color:var(--text-tertiary);font-size:large;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;box-shadow:0 2px var(--workbench-border);padding:0 0 0 10px;position:fixed;z-index:var(--index-top)}.logo{display:flex;align-items:center;justify-content:center}header span{left:50%;position:absolute;transform:translate(-50%)}.w-function,.e-section{display:flex;align-items:center}.e-section{gap:5px}.w-function button{width:40px;height:32px}.w-function button:nth-child(-n+2):hover{background-color:#2d2e2e}.w-function button:last-child:hover{background-color:#e81123}footer{background-color:var(--bg-main);bottom:0;width:100%;height:var(--footer-h);color:var(--text-tertiary);font-size:small;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;box-shadow:0 -2px var(--workbench-border);padding:0 10px;position:fixed;z-index:var(--index-top)}.main-content{display:flex}.activity-bar{background-color:var(--bg-secondary);width:var(--activity-bar-w);height:100vh;color:var(--text-icon);font-size:28px;display:flex;flex-direction:column;justify-content:space-between;box-sizing:border-box;box-shadow:2px 0 var(--workbench-border);padding:45px 0;position:fixed;z-index:var(--index-medium)}.activity-bar button{width:100%;height:100%;position:relative}.activity-bar button.active{color:var(--explorer-active)}.activity-bar button.active:before{content:"";background-color:#0078d4;width:3px;height:100%;left:0;top:0;position:absolute}.a-section button:hover{color:#d1d7d7}.a-section{display:flex;flex-direction:column;align-items:center;gap:25px}.side-bar{background-color:var(--bg-secondary);width:var(--side-bar-w);height:100vh;left:var(--activity-bar-w);color:var(--text-secondary);font-family:Segoe UI,Tahoma,Arial,sans-serif;font-size:small;display:flex;flex-direction:column;justify-content:flex-start;box-sizing:border-box;box-shadow:2px 0 var(--workbench-border);position:fixed;z-index:var(--index-low)}.side-bar.collapse{visibility:hidden}.explorer{padding:48px 10px 16px}.project-folder{box-shadow:0 -2px var(--workbench-border)}.project-folder button{width:100%;height:auto;gap:5px;padding:8px 15px;justify-content:flex-start}.project-folder button:hover{background-color:var(--bg-hover)}.project-folder button.active{background-color:var(--bg-active)}.file-folder{padding:0 12px;position:relative}.file-folder:before{content:"";background-color:var(--tree-branch);width:1px;height:100%;left:9%;top:0;position:absolute}.file-folder.collapse{visibility:hidden}.file-folder i{font-size:16px}main{background-color:var(--bg-main);width:calc(100vw - var(--activity-bar-w) - var(--side-bar-w));height:100vh;left:calc(var(--activity-bar-w) + var(--side-bar-w));display:flex;flex-direction:column;align-items:center;justify-content:flex-start;position:fixed}main.collapse{width:calc(100vw - var(--activity-bar-w));left:var(--activity-bar-w)}.tab-bar{width:100%;height:var(--tab-bar-h);top:var(--header-h);display:flex;align-items:flex-end;justify-content:flex-start;border-bottom:1px solid var(--workbench-border);position:relative}.tab{background-color:var(--bg-secondary);width:10em;height:100%;color:var(--text-tertiary);font-family:Segoe UI,Tahoma,Arial,sans-serif;font-size:13px;display:flex;align-items:center;justify-content:flex-start;box-sizing:border-box;border-right:1px solid var(--workbench-border);padding:8px 15px;position:relative;cursor:pointer;gap:5px}.tap span{display:flex;align-items:center;justify-content:center}.tab.active{background-color:var(--bg-main);color:var(--text-primary);z-index:2}.tab.active:before{content:"";background-color:#0078d4;width:100%;height:3px;top:0;left:0;position:absolute}.tab.active:after{content:"";background-color:var(--bg-main);width:100%;height:1px;left:0;bottom:-1px;position:absolute}.tab button:hover{background-color:var(--tab-closing-hover);border-radius:5px}.editor-area{width:100%;height:calc(100% - var(--tab-bar-h) - var(--header-h) - var(--footer-h));top:var(--tab-bar-h);font-family:JetBrains Mono,Fira Code,monospace;font-variant-ligatures:contextual;font-size:medium;display:flex;align-items:center;justify-content:center;position:relative;overflow:auto}@media(max-width:980px){.home-design{flex-direction:column;justify-content:unset!important}.project-header{flex-direction:column;align-items:center!important;justify-content:center!important}.project-subheader{width:100%!important;align-items:center!important;justify-content:center!important}.project-subheader p{text-align:center}.project-section{flex-direction:column;gap:5em}.project-subsection{width:100%!important}}:root[data-theme=dark]{--code-main: #181818;--code-shadow: #070707;--text-primary: #FFFFFF;--text-secondary: #CCCCCC;--text-tertiary: #6E7681;--syntax-tag: #439CCB;--syntax-attribute: #9CDCFE;--syntax-string: #CE9178;--syntax-symbol: #1A9FF1;--syntax-punctuation: #6E7681}:root[data-theme=light]{--code-main: #F3F4F6;--code-shadow: #e5e7eb;--text-primary: #111111;--text-secondary: #374151;--text-tertiary: #6b7280;--syntax-tag: #800000;--syntax-attribute: #E50000;--syntax-string: #0000FF;--syntax-symbol: #A1383A;--syntax-punctuation: #900000}.home-design{width:100%;height:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:50px;overflow-y:auto;gap:3rem}.home-code{background-color:var(--code-main);min-width:350px;width:25%;height:80%;font-size:large;flex-shrink:0;box-sizing:border-box;box-shadow:10px 10px var(--code-shadow);border-radius:20px;position:relative;overflow:hidden;padding:15px 25px}.home-code:after{content:"";background-color:#0078d4;width:100%;height:2px;bottom:0;left:0;border-radius:20px 20px 0 0;position:absolute}.code-tag{width:100%;height:100%;counter-reset:line;display:flex;flex-direction:column;white-space:pre-wrap;word-break:break-word}.code-line{position:relative;padding-left:1.5em;margin:5px 0}.code-line:before{content:counter(line);counter-increment:line;width:.5em;left:0;color:var(--text-tertiary);text-align:right;position:absolute}.tag{color:var(--syntax-tag)}.text{color:var(--text-secondary)}.attribute{color:var(--syntax-attribute)}.string{color:var(--syntax-string)}.symbol{color:var(--syntax-symbol)}.punctuation{color:var(--syntax-punctuation)}.home-display{min-width:350px;width:25%;height:80%;color:var(--text-primary);font-family:Segoe UI,Tahoma,Arial,sans-serif;text-align:center;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 20px;gap:1em}.home-design h1,h2,h3,.about-design h1,h4,p,.project-design h1,.detail-design h1,.contact-design h1,.theme-design h1{margin:0}.home-display h1{margin:5px}.home-display h2{color:#439ccb;font-size:large}.home-display h3{color:var(--text-tertiary);font-size:medium}.home-display p{color:var(--text-secondary);font-size:14px}.home-display img{width:200px;height:200px;border-radius:10px;box-shadow:10px 10px #070707}.home-design button,.about-design button,.project-design button{background-color:#0078d4;width:150px;height:40px;color:#fff;box-sizing:border-box;box-shadow:10px 10px #070707;margin-top:20px}.home-design button:hover,.about-design button:hover,.project-design button:hover{background-color:#1a9ff1}.dividing-line{background:linear-gradient(90deg,transparent,#CE9178,transparent);width:200px;height:2px;flex-shrink:0}.about-design,.project-design,.detail-design,.contact-design,.theme-design{width:100%;height:100%;color:var(--text-primary);counter-reset:line;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:50px;overflow-y:auto;gap:3rem}.about-header h1{text-align:center}.about-header span{color:var(--text-secondary);font-size:small;font-weight:700;display:flex;align-items:center;justify-content:center;gap:3px}.about-section{width:80%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.about-title,.project-title{display:flex;align-items:center;position:relative;padding-left:1.5em}.about-section:hover .about-title,.project-subsection:hover .project-title,.project-subsection:hover .project-title:before{color:#ce9178}.about-title,.project-title,.project-title:before{transition:color .3s ease,border-color .3s ease}.about-title:before{content:counter(line,decimal-leading-zero);counter-increment:line;width:.5em;left:0;color:#ce9178;font-size:medium;text-align:left;position:absolute}.about-subsection{--bookmark-colour: #CE9178;color:var(--text-secondary);font-family:Segoe UI,Tahoma,Arial,sans-serif;font-size:medium;display:flex;flex-direction:column;padding-left:2.25em;margin:1em 0;gap:10px}.about-subsection span,.project-subsection span,.detail-header span{width:fit-content;height:auto;color:var(--bookmark-colour);text-align:center;border:1px solid var(--bookmark-colour);border-radius:20px;padding:2px 10px}.skill-level{display:flex;flex-wrap:wrap;gap:5px}.project-header{width:60%;display:flex;align-items:flex-start;justify-content:space-between}.project-subheader{width:65%;display:flex;flex-direction:column;gap:5px}.project-subheader p,.project-subsection span,p,.detail-tag span,.detail-section p,li,.contact-section span,.theme-section span{font-family:Segoe UI,Tahoma,Arial,sans-serif}.project-subheader p,.project-subsection p,.detail-section p,li,.contact-header p,.theme-header p{color:var(--text-secondary)}.project-section{width:60%;height:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:center;justify-content:center;gap:5em}.project-subsection{--bookmark-colour: #439CCB;width:100%;height:100%;font-size:medium;text-wrap:wrap;display:flex;flex-direction:column;margin:1em 0;gap:20px}.project-subsection:hover .project-title:before{border-color:#ce9178}.project-title:before{content:counter(line);counter-increment:line;width:1.5em;left:0;font-size:medium;text-align:center;border:1px solid var(--text-secondary);border-radius:50%;position:absolute}.project-tag,.detail-tag{--bookmark-colour: #CE9178;display:flex;flex-wrap:wrap;gap:5px}.detail-header{width:80%;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}.detail-header button{width:5%;height:5%;left:30px;font-size:40px;position:absolute}.detail-tag{display:flex;align-items:center;justify-content:center}.detail-section{width:80%;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;margin:1em 0}.detail-title{color:#439ccb}.detail-section ul{display:inline-block;text-align:left}.detail-section img{max-width:100%;height:auto}.contact-header,.theme-header{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}.contact-section,.theme-section{width:60%;height:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));align-items:center;justify-content:center;gap:5em;margin:2em 0}.contact-subsection,.theme-subsection{width:100%;height:100%;color:#1a9ff1;font-size:large;text-align:center;text-wrap:wrap;display:flex;align-items:center;justify-content:center;border:1px solid #1A9FF1;border-radius:10px;box-sizing:border-box;padding:20px 10px;gap:10px}.contact-subsection:hover,.theme-subsection:hover{cursor:pointer;background-color:#1a9ff1;color:var(--text-primary);border:unset;transform:translateY(-10px);transition:all ease .3s}