:root { color-scheme: light; font-family: system-ui, sans-serif; background: #ffffff; color: #25332c; }
* { box-sizing: border-box; }
body { margin: 0; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
header { min-height: 74px; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #dce4df; background: #f5f8f6; }
.brand, .controls { display: flex; align-items: center; gap: 14px; }
.brand { white-space: nowrap; }
.mark { font: bold 23px Consolas, monospace; color: #287345; }
strong { font-size: 12px; letter-spacing: 2px; }
.divider { width: 1px; height: 20px; background: #d3ddd6; }
.subtitle { color: #607168; font-size: 12px; }
label { font-size: 12px; white-space: nowrap; color: #53665a; }
output { color: #25332c; display: inline-block; min-width: 38px; margin-left: 7px; }
input[type=range] { width: 94px; accent-color: #287345; cursor: pointer; }
button { font: 500 12px system-ui, sans-serif; border: 1px solid #c4d2c9; color: #304638; background: #ffffff; border-radius: 6px; padding: 10px 14px; cursor: pointer; white-space: nowrap; }
button:hover { background: #eaf1ec; }
button.primary { background: #287345; border-color: #287345; color: #ffffff; }
button.primary:hover { background: #205e38; }
button span { margin-left: 12px; }
button:focus-visible, input:focus-visible { outline: 2px solid #287345; outline-offset: 4px; }
main { flex: 1; min-height: 0; margin: 20px 24px 16px; position: relative; overflow: hidden; }
textarea { display: block; border: 0; padding: 0; margin: 0; resize: none; outline: none; background: transparent; color: #202d25; caret-color: #287345; font-family: Consolas, 'Liberation Mono', Menlo, monospace; font-size: 18px; line-height: 25px; letter-spacing: 0; tab-size: 4; overflow: hidden; white-space: pre; border-radius: 0; }
textarea::selection { color: #153c24; background: #c7e7d0; }
footer { min-height: 34px; border-top: 1px solid #dce4df; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 24px; color: #607168; font-size: 11px; }
footer > span:first-child { display: flex; gap: 12px; align-items: center; }
i { width: 6px; height: 6px; border-radius: 50%; background: #287345; }
#selection { color: #287345; }
header, .controls { flex-wrap: wrap; }
textarea { overflow-y: auto; scrollbar-gutter: stable; }
#rectangle-layer { position: absolute; top: 0; left: 0; overflow: hidden; pointer-events: none; }
#rectangle-selection { position: absolute; background: rgb(40 115 69 / 22%); border: 1px solid rgb(40 115 69 / 65%); }
[data-theme="dark"] #rectangle-selection { background: rgb(182 236 194 / 22%); border-color: rgb(182 236 194 / 65%); }
#editor[data-rectangle="true"]::selection { background: transparent; color: inherit; }
#editor[data-rectangle="true"] { caret-color: transparent; }
#mode { padding: 4px 24px 6px; font-size: 11px; color: #526675; background: #f0f4f7; }
#mode[data-mode="insert"] { color: #28633d; background: #edf6ef; }
[data-theme="dark"] #mode { color: #b2c5d3; background: #202a31; }
[data-theme="dark"] #mode[data-mode="insert"] { color: #acdab7; background: #202e25; }
:root[data-theme="dark"] { color-scheme: dark; background: #121518; color: #ced5d8; }
[data-theme="dark"] header { border-color: #303538; background: #1b2023; }
[data-theme="dark"] .mark { color: #9ddeac; }
[data-theme="dark"] .divider { background: #3c4347; }
[data-theme="dark"] .subtitle, [data-theme="dark"] label { color: #9ba8ac; }
[data-theme="dark"] output { color: #e0e7e9; }
[data-theme="dark"] input[type=range] { accent-color: #a5e3b4; }
[data-theme="dark"] button { border-color: #414b50; color: #d3dddf; background: #252d31; }
[data-theme="dark"] button:hover { background: #354047; }
[data-theme="dark"] button.primary { background: #b6ecc2; border-color: #b6ecc2; color: #183322; }
[data-theme="dark"] button.primary:hover { background: #cef5d7; }
[data-theme="dark"] button:focus-visible, [data-theme="dark"] input:focus-visible { outline-color: #b6ecc2; }
[data-theme="dark"] textarea { color: #dce8df; caret-color: #b6ecc2; }
[data-theme="dark"] textarea::selection { color: #f3fff6; background: #3c6650; }
[data-theme="dark"] footer { border-color: #2c3438; color: #9ba8ac; }
[data-theme="dark"] i { background: #a5e3b4; }
[data-theme="dark"] #selection { color: #b6ecc2; }
@media (max-width: 1100px) { .subtitle, .divider { display: none; } }
@media (max-width: 660px) { header { flex-wrap: wrap; gap: 12px; padding: 12px; } .controls { gap: 9px; } main { margin: 12px; } footer { padding: 8px 12px; } #message { display: none; } input[type=range] { width: 65px; } }