*{margin:0;padding:0;box-sizing:border-box;list-style-type:none}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;color:inherit}:root{--background-color:#fff;--background-color-selected:rgba(0,123,229,.1);--border-color:rgba(0,0,0,.1);--border-color-selected:#007be5;--color:#111;--canvas-color:#f5f5f5;--figma-chrome-color:#2c2c2c;font-size:11px;line-height:1}@media (prefers-color-scheme:dark){:root{--background-color:#191919;--border-color:hsla(0,0%,100%,.1);--canvas-color:#000;--color:#eee}}body,html{@media (min-width:640px){overscroll-behavior:none}}body{font-family:Inter Variable,sans-serif;line-height:1.6;font-weight:500;background-color:var(--background-color);color:var(--color);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;text-size-adjust:none}@media (min-width:640px){.mobile-only{display:none!important}}@media (max-width:640px){.desktop-only{display:none!important}}.layout{@media (min-width:640px){display:grid;&.with-header{grid-template-rows:auto minmax(0,1fr)}position:fixed;inset:0;height:100%;width:100%;&.with-inspector{grid-template-columns:minmax(0,1fr) auto}&.with-layers{grid-template-columns:auto minmax(0,1fr)}&.with-layers.with-inspector{grid-template-columns:auto minmax(0,1fr) auto}}}.header{background:var(--figma-chrome-color);color:#eee;-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;z-index:1;grid-column:1/-1;border-bottom:.5px solid var(--border-color);display:grid;grid-template-columns:auto minmax(0,1fr) auto;place-items:center;@media (max-width:640px){position:fixed;top:0;left:0;right:0}.header-items{display:flex}.header-item{width:44px;height:44px;display:flex;place-content:center;place-items:center;color:inherit}.header-item:hover{background:rgba(0,0,0,.5)}h1{font-size:1.2rem;font-weight:400}img{width:24px;height:24px;border-radius:50%}@media (max-width:768px){img{width:24px;height:24px}}@media (max-width:480px){img{width:24px;height:24px}}}.mobile-toggle{apperance:none;position:fixed;top:8px;box-shadow:0 0 5px 0 rgba(0,0,0,.1);border:.5px solid var(--border-color);border-radius:99px;background:var(--background-color);color:var(--color);padding:10px;font-size:inherit;font-family:inherit;font-weight:600;@media (min-width:320px){display:none}}.layers-toggle{left:8px}.inspector-toggle{right:8px;@media (min-width:640px){display:none}}.canvas{background:var(--canvas-color);overflow:auto;@media (max-width:640px){-webkit-overflow-scrolling:touch;overflow:auto;position:fixed;inset:0;width:100vw;height:100vh}@media (min-width:640px){position:relative;width:100%;height:100%}}.canvas-content{display:flex;align-items:flex-start;gap:72px;width:max-content;min-width:100%;min-height:100%;padding:72px 0;-webkit-user-select:none;-moz-user-select:none;user-select:none;@media (min-width:640px){padding-left:50px;padding-bottom:60px;padding-right:50px;padding-top:60px}}.canvas-section{position:relative;display:flex;flex-direction:column;gap:50px;width:min(560px,calc(100vw - 80px));height:max-content;padding:50px 40px;--canvas-section-bg:color-mix(in srgb,var(--canvas-color) 95%,var(--section-tint,red));background:var(--canvas-section-bg);--canvas-section-border:0.5px solid color-mix(in srgb,var(--canvas-color) 30%,var(--section-tint,red));@media (prefers-color-scheme:dark){--canvas-section-bg:color-mix(in srgb,var(canvas-color) 0%,var(--section-tint,#000));--canvas-section-border:0.5px solid color-mix(in srgb,var(--canvas-color) 80%,var(--section-tint,red))}border:var(--canvas-section-border);border-radius:1px;&.selected{box-shadow:0 0 0 1px var(--border-color-selected) inset}&.hovering{box-shadow:0 0 0 2px var(--border-color-selected) inset}}.canvas-artboard h4,.canvas-section h3{position:absolute;top:0;left:0;transform:translateY(calc(-100% - 5px));font-size:1rem;font-weight:600;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:default}.canvas-section h3{padding:3px 5px;background:var(--canvas-section-bg);border:var(--canvas-section-border);border-radius:4px;&:hover{background:color-mix(in srgb,var(--canvas-color) 80%,var(--section-tint,red))}}.canvas-artboard h4{&:hover{color:var(--border-color-selected)}}.canvas-padding{display:flex;padding:25px}.canvas-artboard{position:relative;width:100%;flex:none;&.selected:after{box-shadow:0 0 0 1px var(--border-color-selected) inset}&.hovering:after,&.selected:after{content:"";display:block;position:absolute;inset:0}&.hovering:after{box-shadow:0 0 0 2px var(--border-color-selected) inset}}.canvas-artboard img,.canvas-artboard video{width:100%;height:100%;display:block;object-fit:contain}.resize-handle{width:6px;height:6px;z-index:1;background:#fff;border:.5px solid var(--border-color-selected);position:absolute;--inset:-3px;&.top{top:var(--inset)}&.bottom{bottom:var(--inset)}&.left{left:var(--inset)}&.right{right:var(--inset)}}.sidebar{background:var(--background-color);overflow-y:auto;overscroll-behavior:contain;@media (max-width:640px){position:fixed;z-index:2;width:80vw;height:100vh;top:0;will-change:transform;transition:all .3s ease-out;&.shown{box-shadow:0 0 10px rgba(0,0,0,.05),0 0 3px rgba(0,0,0,.1)}}@media (min-width:640px){position:relative;width:240px;height:100%}}.sidebar-backdrop{position:fixed;z-index:1;inset:0;opacity:0;pointer-events:none;background:#000;transition:opacity .3s ease-out;&.active{pointer-events:auto;opacity:.15}}.layers{@media (max-width:640px){right:100%;&.shown{transform:translateX(100%)}}}.inspector{@media (max-width:640px){left:100%;&.shown{transform:translateX(-100%)}}}.adjustable-sidebar-grabber{position:absolute;top:0;bottom:0;width:1px;border-right:1px solid var(--border-color);cursor:ew-resize;-webkit-user-select:none;-moz-user-select:none;user-select:none;&:before{position:absolute;inset:-10px;display:block;content:""}}.sidebar-section{padding:12px 15px;display:flex;flex-direction:column;gap:10px;&.large{padding:15px}}.sidebar-divider{border:none;border-bottom:1px solid var(--border-color)}.sidebar-title{font-size:1rem;font-weight:600}.sidebar-item{list-style:none;margin:0;padding:8px 15px;display:flex;align-items:center;min-width:0;gap:8px;-webkit-user-select:none;-moz-user-select:none;user-select:none;&:hover{box-shadow:0 0 0 1px var(--border-color-selected) inset}&.selected{background:var(--background-color-selected);.sidebar-icon{opacity:1}}}.sidebar-icon{opacity:.3}.sidebar-indent{margin-left:15px}details summary::-webkit-details-marker{display:none}details:not([open]) .details-rotate-open{transform:rotate(-90deg)}.sidebar-fields{display:flex;flex-direction:column;border:none;gap:1px}.sidebar-field{display:grid;align-items:center;grid-template-columns:minmax(0,1fr) minmax(0,2fr);grid-gap:8px;gap:8px}.sidebar-key{opacity:.7}.sidebar-value{border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;color:var(--color);font-size:inherit;font-family:inherit;line-height:inherit;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:5px;&:hover{box-shadow:0 0 0 1px var(--border-color)}&:focus{outline:none}}a,a.sidebar-value{color:var(--border-color-selected);text-decoration:none}