@import"https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,400&display=swap";@layer reset,theme,utils,component;@layer reset{*,*:before,*:after{box-sizing:border-box}*{margin:0}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}button{border:none;outline:none;background-color:transparent;padding:0;margin:0;cursor:pointer;color:#333}a{color:#333;text-decoration:none}}@layer theme{:root{--gray-0: #FFFFFF;--gray-50: #FAFAFA;--gray-100: #F5F5F5;--gray-200: #EEEEEE;--gray-300: #E0E0E0;--gray-400: #BDBDBD;--gray-500: #9E9E9E;--gray-600: #757575;--gray-700: #616161;--gray-800: #424242;--gray-900: #212121;--gray-1000: #121212}.theme-light{--primary: #3498db;--primary-accent: #e2f5fd;--bg-primary: var(--gray-0);--bg-secondary: var(--gray-100);--fg-primary: var(--gray-900);--fg-secondary: var(--gray-600);--fg-disabled: var(--gray-400);--border-primary: var(--gray-500);--border-secondary: var(--gray-400);--logo: var(--primary);--hover-primary: var(--gray-50);--hover-secondary: var(--gray-100);--layer-bg: #0002}.theme-dark{--primary: #2980b9;--primary-accent: #0d283b;--bg-primary: var(--gray-1000);--bg-secondary: var(--gray-900);--fg-primary: var(--gray-0);--fg-secondary: var(--gray-400);--fg-disabled: var(--gray-600);--border-primary: var(--gray-500);--border-secondary: var(--gray-600);--logo: var(--primary);--hover-primary: var(--gray-900);--hover-secondary: var(--gray-800);--layer-bg: #0006}}@layer utils{html,body{margin:0;min-height:100%;background-color:var(--bg-primary)}body{display:grid;grid-template-columns:[edge-start] minmax(20px,.1fr) [body-start menu-start] minmax(180px,.25fr) [menu-end content-start full-content-start] 1fr [content-end aside-start] minmax(180px,.25fr) [body-end aside-end full-content-end] minmax(20px,.1fr) [edge-end];grid-template-rows:60px auto 50px;font-family:DM Mono,serif;font-optical-sizing:auto;font-weight:400;font-style:normal;font-size:16px;overflow-x:hidden;color:var(--fg-primary);background-color:var(--bg-primary)}body .lg-breadcrumbs{display:block}body .sm-breadcrumbs{display:none}@media (min-width:1600px){body{grid-template-columns:[edge-start] minmax(20px,.2fr) [body-start menu-start] minmax(180px,.25fr) [menu-end content-start full-content-start] 1fr [content-end aside-start] minmax(180px,.25fr) [body-end aside-end full-content-end] minmax(20px,.2fr) [edge-end]}}@media (max-width: 768px){body{grid-template-columns:[edge-start] minmax(20px,.1fr) [body-start content-start full-content-start] 1.5fr [body-end content-end full-content-end] minmax(20px,.1fr) [edge-end];grid-template-rows:100px auto 50px}body .lg-breadcrumbs{display:none}body .sm-breadcrumbs{display:flex}body .main-nav{grid-column:edge;display:flex;justify-content:flex-start;align-items:center;background:var(--bg-secondary);border-bottom:1px solid var(--border-primary);position:sticky;z-index:1;top:60px}}header{view-transition-name:pageHeader;grid-column:edge;display:grid;grid-template-columns:subgrid;grid-template-rows:[header-start] 1fr [header-end];background:var(--bg-primary);border-bottom:1px solid var(--border-primary);position:sticky;top:0;z-index:3}@media (max-width:768px){header{grid-template-rows:[header-start] 60px [header-end nav-start] 40px [nav-end]}}header .logo-container{grid-column:menu;grid-row:header;display:flex;justify-content:flex-start;align-items:center}@media (max-width:768px){header .logo-container{grid-column:body}}header .header-actions{grid-column:aside;grid-row:header;display:flex;justify-content:flex-end;align-items:center;gap:20px;--size: 38px}@media (max-width:768px){header .header-actions{grid-column:body;pointer-events:none}}header .header-actions .theme-toggle{position:relative;display:flex;pointer-events:auto}header .header-actions .theme-toggle.active .theme-select,header .header-actions .theme-toggle.active .theme-layer{opacity:1;pointer-events:auto}header .header-actions .theme-toggle .btn-theme-toggle{display:flex;justify-content:center;align-items:center}header .header-actions .theme-toggle .btn-theme-toggle span{width:var(--size);height:var(--size);background-color:var(--bg-secondary);color:var(--primary);border:2px solid var(--primary);border-radius:50%;display:flex;justify-content:center;align-items:center}header .header-actions .theme-toggle .btn-theme-toggle:before{content:"Theme";display:flex;justify-content:center;align-items:center;font-size:16px;margin-right:-8px;background-color:var(--bg-secondary);color:var(--fg-secondary);border:1px solid var(--primary);border-radius:20px 0 0 20px;padding-inline:10px}header .header-actions .theme-toggle .theme-layer{position:fixed;top:0;right:0;bottom:0;left:0;opacity:0;pointer-events:none;background-color:var(--layer-bg);transition:opacity .3s ease}header .header-actions .theme-toggle .theme-select{position:absolute;z-index:2;right:0;top:calc(var(--size) + 1px);white-space:nowrap;background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:2px;overflow:hidden;width:180px;padding:10px;opacity:0;pointer-events:none;transition:opacity .3s ease}header .header-actions .theme-toggle .theme-select .theme-option{width:100%;height:34px;display:flex;justify-content:flex-start;align-items:center;gap:10px;padding-inline:10px;cursor:pointer;border-radius:2px;color:var(--fg-secondary)}header .header-actions .theme-toggle .theme-select .theme-option svg{flex-shrink:0}header .header-actions .theme-toggle .theme-select .theme-option.active{border:1px solid var(--border-primary);background:var(--bg-primary);color:var(--fg-primary)}header .header-actions .theme-toggle .theme-select .theme-option:not(.active):hover{background:var(--hover-secondary);color:var(--fg-primary)}header .header-actions .portfolio-link{width:var(--size);height:var(--size);font-size:18px;display:flex;justify-content:center;align-items:center;border:2px solid var(--primary);background:var(--bg-secondary);color:var(--primary);border-radius:50%;overflow:hidden}header .header-breadcrumbs{grid-column:content;grid-row:header;display:flex;justify-content:flex-start;align-items:center}@media (max-width:768px){header .header-breadcrumbs{grid-column:edge;grid-row:nav;border-block:1px solid var(--border-primary);background-color:var(--bg-secondary);display:grid;grid-template-columns:subgrid}}header .header-breadcrumbs .breadcrumbs{grid-column:body;margin:0;padding:0;list-style:none;display:flex;gap:5px}@media (max-width:540px){header .header-breadcrumbs .breadcrumbs{overflow:hidden;text-overflow:ellipsis}header .header-breadcrumbs .breadcrumbs .lg-only{display:none}}header .header-breadcrumbs .breadcrumbs .breadcrumb{vertical-align:middle;display:grid;place-content:center;white-space:nowrap}header .header-breadcrumbs .breadcrumbs .breadcrumb.disabled{pointer-events:none}header .header-breadcrumbs .breadcrumbs .breadcrumb.disabled a{color:var(--fg-disabled)}header .header-breadcrumbs .breadcrumbs .breadcrumb a{display:flex;justify-content:flex-start;align-items:center;gap:5px;color:var(--fg-primary)}header .header-breadcrumbs .breadcrumbs .breadcrumb-devider{flex-shrink:0;display:grid;place-content:center}main{grid-column:edge;display:grid;min-height:calc(100vh - 110px);min-height:calc(100dvh - 110px)}@media (max-width:768px){main{min-height:calc(100vh - 150px);min-height:calc(100dvh - 150px)}}footer{view-transition-name:pageFooter;grid-column:edge;display:grid;grid-template-columns:subgrid;align-items:center;background:var(--bg-primary);border-top:1px solid var(--border-primary);position:sticky;bottom:0;z-index:1}footer .footer-container{grid-column:body;display:flex;justify-content:space-between;align-items:center}footer .footer-container .copyright{display:flex;justify-content:flex-start;align-items:center;color:var(--fg-disabled);gap:2pt}footer .footer-container .copyright>span{font-size:16px;display:inline-block}@media (max-width:540px){footer .footer-container .copyright .author{display:none}}footer .footer-container .links{display:flex;justify-content:flex-end;align-items:center;gap:32px}@media (max-width:540px){footer .footer-container .links{gap:26px}}footer .footer-container .links a{color:var(--fg-secondary)}footer .footer-container .links a:hover{color:var(--primary)}.list{margin:0;padding:0;list-style:none}a{color:var(--fg-primary)}.custom-title{position:relative}.custom-title:before{content:"";display:block;position:absolute;top:-9px;left:50%;translate:-50% 0;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:8px solid var(--border-primary);display:none}.custom-title:after{content:attr(data-title);display:block;position:absolute;top:-25px;left:50%;translate:-50% 0;font-size:12px;white-space:nowrap;padding:0 6px;border-radius:2px;border:1px solid var(--border-primary);background:var(--bg-secondary);color:var(--fg-secondary);display:none}.custom-title[data-position=tr]:after{left:initial;right:0;translate:0 0}.custom-title:hover:before,.custom-title:hover:after{display:block}}@layer component{#battles{grid-template-columns:subgrid}#battles.show .nav-layer{opacity:1;pointer-events:auto}#battles.show .nav{translate:0 0}#battles.show .nav .btn-menu:before{translate:0 0;rotate:45deg}#battles.show .nav .btn-menu:after{translate:0 0;rotate:-45deg}#battles .nav-layer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1;background-color:var(--layer-bg);overscroll-behavior:contain;opacity:0;pointer-events:none;transition:opacity .3s ease}#battles .nav{grid-column:menu;align-self:start;position:sticky;top:60px;height:calc(100vh - 110px);height:calc(100dvh - 110px)}@media (max-width: 768px){#battles .nav{grid-column:initial;position:fixed;z-index:2;left:0;top:100px;bottom:0;width:280px;height:calc(100vh - 150px);height:calc(100dvh - 150px);background:var(--bg-secondary);border-right:1px solid var(--border-primary);padding:0;translate:-100% 0;transition:translate .3s ease}}#battles .nav .btn-menu{display:none;justify-content:center;align-items:center;width:42px;height:42px;background-color:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:50%;position:absolute;top:12px;right:-56px}@media (max-width: 768px){#battles .nav .btn-menu{display:flex}}#battles .nav .btn-menu:before,#battles .nav .btn-menu:after{content:"";display:block;position:absolute;width:20px;height:2px;background:var(--fg-primary);transition:all .3s ease}#battles .nav .btn-menu:before{translate:0 -4px}#battles .nav .btn-menu:after{translate:0 4px}#battles .nav .list{display:flex;flex-direction:column;gap:5px;padding-block:20px;padding-inline-end:20px;width:100%;height:100%;overflow-y:auto;overscroll-behavior:contain}@media (max-width: 768px){#battles .nav .list{padding:20px}}#battles .nav .list>li.active a{border-left:2px solid var(--primary);padding-inline-start:10px;background-color:var(--primary-accent);color:var(--fg-primary)}#battles .nav .list>li a{display:flex;align-items:center;height:32px;font-size:16px;color:var(--fg-secondary);border-radius:0 5px 5px 0}#battles .nav .list>li:not(.active):hover a{background-color:var(--hover-primary);color:var(--fg-primary)}#battles .content{grid-column:full-content}@media (max-width: 768px){#battles .content{grid-column:content}}#battles .content .list{width:100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:2px;padding-block:20px}#battles .content .list li{border:1px solid var(--border-primary);background:var(--bg-primary);border-radius:1px}#battles .content .list li a{display:block;padding:2px}#battles .content .list li a img{border-radius:1px;aspect-ratio:1.3 / 1;width:100%;background-color:var(--bg-secondary)}#battles .content .list li a .name{padding:15px 10px;text-align:center}#battles .content .list li:hover{background-color:var(--hover-secondary)}}@layer component{#battle{grid-column:body;grid-template-columns:1fr 420px;grid-template-rows:1fr}@media (max-width: 768px){#battle{grid-column:edge;grid-template-columns:subgrid;grid-template-rows:[display-start] auto [display-end code-start] auto [code-end]}}#battle .battle-code{position:sticky;top:60px;border-inline:1px solid var(--border-primary);height:calc(100vh - 110px);height:calc(100dvh - 110px)}@media (max-width: 768px){#battle .battle-code{grid-column:edge;grid-row:code;top:100px;height:calc(100vh - 150px);height:calc(100dvh - 150px);border:1px solid var(--border-primary)}}#battle .battle-code .copy-button{position:absolute;z-index:1;background:var(--bg-primary);color:var(--fg-primary);top:10px;right:10px;opacity:0;border:1px solid var(--border-primary);border-radius:4px;display:flex;justify-content:center;align-items:center;padding:0}#battle .battle-code .copy-button span{width:34px;height:34px;display:flex;justify-content:center;align-items:center}#battle .battle-code .copy-button.copied:before{content:"Copied!";font-size:14px;display:flex;justify-content:center;align-items:center;height:34px;padding-inline:8px;border-right:1px solid var(--border-primary);color:var(--fg-secondary)}#battle .battle-code:hover .copy-button{opacity:1}#battle .battle-code .code-view{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background-color:var(--bg-primary);overflow:auto}#battle .battle-detail{padding-inline-start:20px;padding-block-end:40px;display:flex;flex-direction:column;justify-content:flex-start;gap:20px 0}@media (max-width: 768px){#battle .battle-detail{grid-column:edge;grid-row:display;padding-inline:0;max-width:100%;display:grid;grid-template-columns:subgrid}}#battle .battle-detail h2{grid-column:body;margin:0;font-size:1.5rem;font-weight:400;padding-block-start:15px;margin-block-end:-10px}@media (max-width: 768px){#battle .battle-detail h2{grid-column:body}}#battle .battle-detail .flex-container{display:flex;flex-wrap:wrap;gap:5px 20px}@media (max-width: 768px){#battle .battle-detail .flex-container{grid-column:body}}@media (max-width: 450px){#battle .battle-detail .flex-container{grid-column:edge;display:grid;grid-template-columns:subgrid;gap:5px 0}}#battle .battle-detail .flex-container .view-container{position:relative}@media (max-width: 450px){#battle .battle-detail .flex-container .view-container{overflow-y:auto;grid-column:edge;display:flex}#battle .battle-detail .flex-container .view-container:before,#battle .battle-detail .flex-container .view-container:after{content:"";display:block;width:24px;height:300px;flex-shrink:0}}#battle .battle-detail .flex-container .view-container .relative-container{width:400px;height:300px;position:relative}#battle .battle-detail .flex-container .view-container .relative-container .iframe-container{pointer-events:none;position:relative;top:0;right:0;bottom:0;left:0;z-index:1;width:400px;height:300px;overflow:hidden}#battle .battle-detail .flex-container .view-container .relative-container .iframe-container.check-difference{mix-blend-mode:difference}#battle .battle-detail .flex-container .view-container .relative-container .iframe-container iframe{border:none;background-color:#fff;overflow:hidden;display:block}#battle .battle-detail .flex-container .view-container .relative-container .view-image{pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0}#battle .battle-detail .flex-container .difference-toggle{flex:1;border-block:1px solid var(--border-primary);height:48px;display:flex;justify-content:flex-start;align-items:center;accent-color:var(--primary);color:var(--fg-secondary)}@media (max-width: 450px){#battle .battle-detail .flex-container .difference-toggle{grid-column:body}}#battle .battle-detail .flex-container .difference-toggle .input-label{display:flex;justify-content:flex-start;align-items:center;gap:10px;cursor:pointer;white-space:nowrap}#battle .battle-detail .flex-container .difference-toggle .input-label input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border:2px solid var(--border-secondary);border-radius:4px;display:grid;place-content:center;cursor:pointer}#battle .battle-detail .flex-container .difference-toggle .input-label input:before{content:"";display:block;width:12px;height:6px;border-left:2px solid var(--bg-primary);border-bottom:2px solid var(--bg-primary);rotate:-45deg;translate:0 -1px;opacity:0}#battle .battle-detail .flex-container .difference-toggle .input-label input:checked{background-color:var(--primary);border:2px solid var(--primary)}#battle .battle-detail .flex-container .difference-toggle .input-label input:checked:before{opacity:1}#battle .battle-detail p{margin:0;padding-block:0;text-align:justify;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;word-wrap:break-word;color:var(--fg-secondary)}@media (max-width: 768px){#battle .battle-detail p{grid-column:body}}#battle .battle-detail p a{color:var(--primary)}#battle .battle-detail p svg{display:inline;translate:-3px 3px}}@layer component{#about{grid-column:content;align-items:flex-start;border-inline:1px solid var(--border-primary)}@media (max-width: 1024px){#about{grid-column:body}}@media (max-width: 768px){#about{border-inline:none}}#about article{margin-inline:auto;padding-block:20px;width:calc(100% - 40px);max-width:760px}@media (max-width: 768px){#about article{width:100%}}#about article h1{margin:40px 0;font-size:1.8rem;font-weight:400;text-align:center}#about article h2{margin:40px 0 0;font-size:1.3rem;font-weight:400}#about article .paragraph{margin-block:20px;text-align:justify;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;word-wrap:break-word;color:var(--fg-secondary)}#about article .paragraph a{color:var(--primary)}#about article .paragraph svg{display:inline;translate:-3px 3px}}