html.editor-root{height:auto;min-height:100%;overflow:auto}body.editor-page{height:auto;min-height:100svh;overflow:visible;background:#080d19;color:#d9e9f8}.editor-shell{max-width:1240px;margin:auto;padding:25px 32px 30px}.editor-top{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #89b5df30;padding-bottom:22px}.editor-top a{font-size:11px;color:#8caecb;text-decoration:none}.editor-top h1{font-size:24px;letter-spacing:.02em;margin:12px 0 0;font-weight:600}.editor-top h1 span{font-size:10px;font-weight:400;color:#8caecb;margin-left:10px;border:1px solid #7ea8d044;padding:3px 7px;vertical-align:middle}.editor-actions{display:flex;gap:9px;flex-wrap:wrap}.editor-page button,.editor-page select,.editor-page input{border:1px solid #6e93b74d;background:#142238;color:#dceaf6;border-radius:4px;padding:9px 11px;font-size:12px}.editor-page button.primary{background:#d8f6ff;color:#14263b;border-color:#ebfaff;font-weight:700}.editor-page button:hover{border-color:#b3e8ff}.editor-page button:disabled{cursor:default;opacity:.3}.editor-meta{display:flex;gap:15px;flex-wrap:wrap;padding:22px 0}.editor-meta label{display:flex;flex-direction:column;gap:7px;font-size:10px;color:#88a6c1}.editor-meta input{width:105px;font-size:14px}.editor-meta .name-field{flex:1;min-width:180px}.editor-meta .name-field input{width:100%}.editor-toolbar{display:flex;align-items:center;gap:13px;flex-wrap:wrap;padding:14px 0;border-block:1px solid #89b5df20}.editor-toolbar>div{display:flex;gap:10px;align-items:center;margin-right:auto}.editor-toolbar strong{font:12px var(--mono);min-width:106px;text-align:center}.editor-toolbar label{display:flex;align-items:center;gap:7px;font-size:10px;color:#8caecb}.editor-toolbar select{font-size:11px;padding:7px 9px}.editor-help{font-size:11px;line-height:1.8;color:#8ba5bc;margin:17px 0 11px}.editor-scroll{overflow-x:auto;border:1px solid #678aaf40;border-radius:6px;background:#0e192b;padding:0}.editor-scroll canvas{display:block;width:960px;height:480px;touch-action:pan-x}.editor-scroll canvas:focus-visible{outline:2px solid #a8e7ff;outline-offset:-3px}.editor-footer{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:16px}.editor-footer>span{font:11px var(--mono);color:#91b3cd}.editor-footer>div{display:flex;gap:8px}#editor-status{font-size:11px;line-height:1.6;color:#a3cde5;min-height:18px;margin:17px 0 0}#editor-status[data-error="true"]{color:#ff9eb3}
@media(min-width:1060px){.editor-scroll canvas{width:100%;height:auto;aspect-ratio:2/1}}
@media(max-width:760px){.editor-shell{padding:20px 16px}.editor-top{align-items:start;flex-direction:column;gap:17px}.editor-actions{width:100%}.editor-actions button{flex:1;font-size:11px;padding-inline:8px;white-space:nowrap}.editor-meta{gap:12px}.editor-meta .name-field{flex-basis:100%}.editor-meta input{width:90px}.editor-toolbar{gap:12px 16px}.editor-toolbar>div{flex-basis:100%;justify-content:space-between}.editor-toolbar strong{flex:1}.editor-footer{align-items:start;flex-direction:column}}
.editor-shell{max-width:1600px}.editor-toolbar input{width:86px;padding:7px 9px}.editor-view{display:flex;align-items:center;justify-content:space-between;gap:20px}.zoom-label{display:flex;align-items:center;gap:9px;white-space:nowrap;font-size:11px;color:#8caecb}.editor-page .zoom-label input{width:110px;padding:0;accent-color:#a8e7ff}.zoom-label output{font:10px var(--mono);min-width:64px}.editor-workspace{display:grid;grid-template-columns:minmax(0,1fr) 238px;gap:16px;align-items:start}.editor-scroll canvas{max-width:none;aspect-ratio:auto;touch-action:none}.note-inspector{padding:18px;border:1px solid #678aaf40;border-radius:6px;background:#0e192b;min-height:480px}.inspector-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px}.inspector-heading span{font:11px var(--mono);color:#e6d791}.note-inspector p{font-size:11px;line-height:1.9;color:#8ba5bc}.note-inspector form{display:grid;gap:12px;margin:20px 0}.note-inspector form[hidden],.note-inspector label[hidden]{display:none}.note-inspector label{display:flex;flex-direction:column;gap:7px;color:#9dbbd3;font-size:11px}.note-inspector input,.note-inspector select{width:100%;font:13px var(--mono)}.note-inspector #delete-note{color:#d2a6b4;background:transparent}.note-inspector #fraction-help{border-top:1px solid #89b5df25;padding-top:15px;margin-top:20px}.note-inspector code{color:#c7dceb;font:12px var(--mono)}.keyboard-help{margin-top:20px}.editor-scroll{scrollbar-color:#486481 #0e192b;overscroll-behavior-x:contain}
@media(max-width:1050px){.editor-workspace{grid-template-columns:minmax(0,1fr)}.note-inspector{min-height:0}.note-inspector form{grid-template-columns:repeat(3,minmax(0,1fr));align-items:end}.note-inspector #fraction-help{margin-top:10px}.keyboard-help{display:none}.editor-view{align-items:start;flex-direction:column;gap:0;margin-bottom:14px}}
@media(max-width:600px){.note-inspector form{grid-template-columns:repeat(2,minmax(0,1fr))}.editor-toolbar input{width:70px}.editor-toolbar label{font-size:11px}.editor-help{font-size:12px}.editor-scroll canvas{height:480px}.editor-page button{min-height:36px}}
.editor-meta label,.editor-toolbar label{font-size:12px}.editor-top a,.editor-help,.editor-footer>span,#editor-status{font-size:12px}.note-inspector label,.note-inspector p{font-size:12px}.editor-toolbar select{font-size:12px}.editor-toolbar>div{margin-right:0}.editor-toolbar{gap:12px}.editor-meta{padding-block:18px}.editor-top{padding-bottom:18px}.editor-page button:focus-visible,.editor-page input:focus-visible,.editor-page select:focus-visible{outline:2px solid #b3e8ff;outline-offset:2px}
@media(min-width:761px) and (max-width:1050px){.editor-workspace{grid-template-columns:minmax(0,1fr) 220px}.note-inspector{min-height:480px;padding:14px}.note-inspector form{grid-template-columns:1fr}.editor-shell{padding-inline:22px}}
.editor-toolbar .input-note-value{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0}.editor-toolbar .tuplet-toggle,.note-inspector .tuplet-toggle{display:flex;flex-direction:row;align-items:center;gap:7px}.editor-page .tuplet-toggle input{width:16px;height:16px;accent-color:#a8e7ff;margin:0}.tuplet-fields{display:flex;gap:8px;align-items:center}.tuplet-fields[hidden]{display:none}.editor-page .tuplet-fields input{width:58px;padding:7px}.note-inspector .tuplet-fields label{display:flex;flex-direction:row;align-items:center;gap:5px}.note-inspector .tuplet-fields{gap:7px;flex-wrap:wrap}.note-value-strip{display:flex;gap:18px;align-items:center;justify-content:space-between;padding-top:14px;flex-wrap:wrap}.value-shortcuts{display:flex;gap:6px;flex-wrap:wrap}.value-shortcuts button{padding:7px 12px;min-height:34px}.value-shortcuts button[aria-pressed="true"]{background:#d8f6ff;color:#14263b;border-color:#ebfaff}.note-value-strip output{font-size:12px;color:#dbd69d}.note-inspector fieldset{margin:0;padding:13px;border:1px solid #89b5df40;border-radius:4px;display:grid;gap:12px;min-width:0}.note-inspector legend{font-size:12px;color:#b4cfe5;padding-inline:5px}.note-inspector output{font-size:11px;color:#e6d791;line-height:1.7}.note-inspector details{font-size:11px;color:#8ba5bc}.note-inspector details label{margin-top:10px}.note-inspector summary{cursor:pointer;line-height:1.8}.note-inspector #note-value-fields{grid-column:1/-1}.note-inspector #note-custom-length{grid-column:1/-1}
@media(max-width:760px){.editor-toolbar .input-note-value{flex-basis:auto;justify-content:start}.editor-toolbar .tuplet-fields{flex-basis:100%}.note-value-strip{gap:12px}.note-inspector #note-value-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.note-inspector #note-tuplet-fields,.note-inspector #note-value-description{grid-column:1/-1}}
