How to edit CSS of Twine app (not story, the app itself)

Question

Since I figured out that Twine app basically runs as a browser window, I like to widen the passage/script/css editing box using Inspect Element (right click menu) and fiddling with the CSS of the app to accomplish this. If I could save such modifications so they are always in place when the app launches, I would probably do more fiddling to customize the app even further. Is there a way I can do this by messing around in the app's installation folder? 

To clarify further in case my meaning isn't clear, what I'm talking about is opening Twine, opening a passage, right clicking Inspect Element and changing the CSS that formats it to the below (essentially swapping out 48em with 77em as the editor width).

.modal-dialog.editor {
    top: .5rem;
    bottom: .5rem;
    width: 77em;
    left: -webkit-calc((100vw - 77em)/2);
    left: calc((100vw - 77em) / 2);
    max-height: none;
}

I want to make it so it's always like this, without me having to do it with each launch. 

Answer 1

There are expand/collapse buttons in the upper-right corners of those dialogs (next to the close button) that widen the editor.

Otherwise, you'd need to use a browser extension to do this.

Comments

The expand/collapse button in the upper-right corner can cause the cursor/text location to be incorrectly displayed.  Resizing the application window seems to fix this, but this means a lot of extra clicks just to resize the code dialog window.

Answer 2

You can use browser extension like Styler (there are several of them), which allow you to add custom CSS to any webpage. 

You can try my extension Twine Enhancer, which does exactly that (and also couple of other things (you can turn them off if you want)). It's open source, BTW. Hope you'll like it:)

Comments

Isn't that only for the online version of Twine?  Or is there a way to make it work in the offline version (the "app" the original poster asked about)?

---

Oops, my bad. Yeah, that's for online version only.