main{--sidebar-width:80px;display:flex;min-height:100%}main aside{background:var(--slate);color:#fff;display:flex;flex-direction:column;gap:32px;height:100%;padding:16px;position:fixed;transition:width .15s ease-in-out;width:var(--sidebar-width)}main aside .logo{align-items:center;display:flex;gap:6px;height:48px}main aside .logo svg{width:48px}main aside .logo h1{font-size:24px}main aside nav{display:flex;flex-direction:column;gap:12px}main aside nav a{align-items:center;border:1px solid hsla(0,0%,100%,.3);border-radius:12px;display:flex;gap:8px;height:48px;padding:12px}main aside nav a:hover{background:hsla(0,0%,100%,.15);border-color:transparent}main aside nav a.router-link-active{background:hsla(0,0%,100%,.3);border-color:transparent}main aside button{align-items:center;align-self:flex-end;background:rgba(0,0,0,.3);border-radius:12px;display:flex;height:48px;justify-content:center;margin-top:auto;padding:12px;width:48px}main aside button .material-icons-sharp{transform:rotate(180deg)}main.open{--sidebar-width:320px}main.open aside .logo svg{width:24px}main.open aside nav a{padding:12px 24px}main.open aside button .material-icons-sharp{transform:rotate(0)}main .route{background:var(--cloud);flex:1;margin-left:var(--sidebar-width);transition:margin .15s ease-in-out}main .route .route-container{display:flex;flex-direction:column;height:100%;margin:0 auto;max-width:1200px;padding:0 48px}main .route header{align-items:center;border-bottom:1px solid #dfdede;display:flex;justify-content:space-between;padding:12px 0}main .route header .title{align-items:center;display:flex;gap:8px}main .route header .title h2{font-size:24px}main .route header .title button.fade{align-items:center;display:flex;gap:8px;opacity:.5}main .route header .title button.fade:hover{opacity:.8}main .route header .user{align-items:center;display:flex;gap:8px}main .route header .user .placeholder{background:#ececec;border-radius:40px;height:40px;width:164px}main .route header .user .avatar{background:#ececec;border-radius:50%;height:40px;width:40px}main .debugger{background-color:#fff;filter:var(--shadow-base-filter);height:100%;left:100%;position:fixed;top:0;transition:all .15s ease-in-out;width:375px}main .debugger.open{left:calc(100% - 375px)}main .debugger .debugger-button{align-items:center;background-color:#fff;border-radius:12px 0 0 12px;color:var(--primary-shade);display:flex;justify-content:center;margin:64px 0 8px;padding:6px;position:absolute;right:100%}main .debugger .debugger-button button{border-radius:8px;color:var(--primary-shade);display:flex;padding:8px}main .debugger .debugger-button button:hover{background-color:var(--primary-fade)}main .debugger .debugger-panel{display:flex;flex-direction:column;gap:12px;height:100%;padding:16px 24px}main .debugger .debugger-panel pre{word-wrap:break-word;background-color:var(--cloud);border-radius:12px;display:flex;flex:1;flex-direction:column;font-size:10px;font-weight:200;margin:0;overflow:auto;padding:0 12px 12px;position:relative;white-space:pre-wrap}main .debugger .debugger-panel pre .code-header{align-items:center;background-color:#00000080;color:#fff;display:flex;justify-content:space-between;left:0;margin:-12px;padding:12px;position:sticky;right:0;top:0}main .debugger .debugger-panel pre .code-header h5{font-size:14px}main .debugger .debugger-panel pre .code-header span{font-size:10px}main .debugger .debugger-panel select{margin-bottom:12px}main .debugger .debugger-panel svg{height:48px;margin:auto}