@font-face{font-family:EditorMono;src:local("SFMono-Regular"),local("Menlo"),local("Consolas");font-display:swap}
:root{color-scheme:light;--bg:#f5f6f2;--ink:#203b34;--muted:#7a8880;--line:#e2e7df;--green:#2c6854;--mint:#e8f1e5;--selection:#d1edaa;--mono:EditorMono,"SFMono-Regular",Consolas,"Liberation Mono",monospace}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.3}button:focus-visible,a:focus-visible{outline:2px solid var(--green);outline-offset:4px}button{transition:background .15s,color .15s}button:hover:not(:disabled){background:#e8eee5}.app{max-width:1472px;margin:auto;padding:0 54px}.topbar{height:105px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font-weight:750;font-size:23px;letter-spacing:-1px}.brand-icon{background:#234b3d;color:#e0f8b8;border-radius:10px;width:36px;height:38px;font:700 32px/39px var(--mono);padding-left:7px;letter-spacing:-6px}.brand-icon span{font-size:25px}.brand-divider{width:1px;height:21px;background:#d6ded4;margin:0 6px 0 12px}.brand-caption{font-size:9px;letter-spacing:1.6px;font-weight:600;color:var(--muted)}.local-badge{display:flex;align-items:center;gap:7px;font-size:11px;color:#708077}.local-badge>span,.tiny-dot{width:5px;height:5px;background:#6b9473;border-radius:50%;display:inline-block}.intro{display:flex;align-items:center;justify-content:space-between;padding:55px 0 37px}.eyebrow{font-size:9px;letter-spacing:1.7px;font-weight:650;color:#83917d}h1{font-size:clamp(25px,2.8vw,37px);letter-spacing:-1.25px;font-weight:650;margin:12px 0 11px;line-height:1.2}h1>span{color:#7a9c60}.intro p{margin:0;color:#7c877e;font-size:13px;line-height:1.7}.intro-decoration{display:flex;align-items:center;gap:15px;margin-right:15px;transform:rotate(-7deg)}.intro-decoration>span{font:12px var(--mono);background:#e9eee1;padding:15px 12px;border:1px solid #dce5d0;border-radius:9px;letter-spacing:1px}.intro-decoration i{font-size:20px;font-style:normal;color:#a1b192}.intro-decoration b{display:grid;place-items:center;width:50px;height:54px;border:1px solid #d8e0d3;background:#fff;border-radius:9px;font:28px var(--mono);transform:rotate(13deg);box-shadow:0 5px 8px #314c2910}.workspace{background:white;border:1px solid #dce3d8;border-radius:12px;overflow:hidden;box-shadow:0 8px 28px #233b2610}.toolbar{display:flex;align-items:center;justify-content:space-between;padding:0 23px;height:59px;background:#fbfcf9;border-bottom:1px solid var(--line)}.document-name{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:600;min-width:0}#file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:240px}.document-icon{font-size:22px;font-weight:400;color:#778d74;border:1px solid #c4d0bc;line-height:18px;width:15px;height:19px;border-radius:2px;text-align:center}.file-tag{font-size:8px;letter-spacing:1px;padding:4px 6px;background:#eef1e9;border-radius:3px;color:#83917d;font-weight:500}.toolbar-actions{display:flex;align-items:center;gap:5px}.icon-button{border:0;background:none;width:29px;height:30px;border-radius:5px;font-size:23px;color:#57735e}.toolbar-divider{height:18px;width:1px;background:var(--line);margin:0 9px}.text-button{padding:7px 9px;border:0;border-radius:5px;background:none;font-size:11px;font-weight:500;white-space:nowrap}.text-button>span{margin-right:5px;font-size:17px}.editor-columns{display:grid;grid-template-columns:1fr 1fr}.pane{min-width:0}.byte-pane{border-right:1px solid var(--line)}.pane-heading{height:77px;padding:0 23px;display:flex;align-items:center;justify-content:space-between;gap:9px}.pane-heading>div:first-child{display:flex;align-items:center;gap:10px}.pane-number{font:9px var(--mono);color:#9aa58f}h2{font-size:15px;font-weight:600;margin:0;letter-spacing:-.2px}.segmented{display:flex;padding:3px;border:1px solid #e5e9e0;background:#f2f4ee;border-radius:7px;gap:2px}.segmented button{border:1px solid transparent;background:transparent;border-radius:4px;font-size:10px;padding:6px 9px;white-space:nowrap;color:#819078}.segmented button[aria-pressed=true]{background:#fff;color:#31523f;border-color:#e4e8df;box-shadow:0 1px 3px #1d3d2610;font-weight:600}.segmented button span{font:8px var(--mono);margin-left:5px;opacity:.6}.column-label{display:flex;align-items:center;font:8px var(--mono);letter-spacing:1px;color:#96a18f;height:30px;background:#fbfcf9;border-top:1px solid #f2f4ed;border-bottom:1px solid #eff2ea;padding-right:22px}.column-label>span:first-child{width:73px;text-align:center;flex:none;letter-spacing:.3px}.column-label>span:nth-child(2){white-space:nowrap;letter-spacing:0;font-size:10px;flex:1}.column-label>span:last-child{font-size:8px;white-space:nowrap;margin-left:8px;letter-spacing:.7px}.text-column-label>span:nth-child(2){font-size:8px;letter-spacing:.7px}.editor-body{position:relative;display:flex;height:340px;background:#fff}.gutter{font:11px/29px var(--mono);color:#b0b8a8;flex:none;width:61px;text-align:right;padding:17px 15px 30px 0;overflow:hidden;user-select:none;background:#fcfdf9;border-right:1px solid #f0f3e9;white-space:pre}.input-stack{position:relative;flex:1;min-width:0;overflow:hidden}.mirror,textarea{font:13px/29px var(--mono);letter-spacing:.25px;tab-size:4;white-space:pre;overflow-wrap:normal;word-break:normal;margin:0;border:0;padding:17px 12px 30px;position:absolute;inset:0;width:100%;height:100%;border-radius:0;text-align:left}.mirror{overflow:hidden;pointer-events:none;color:#3f5646;z-index:1}.mirror mark{background:var(--selection);color:#204d33;border-radius:2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}.mirror .invalid{color:#ad6d35;background:#fcf1dc;border-radius:2px}.mirror .control{color:#9fa990}.mirror .linked-char{background:#eaf3e3;border-radius:2px}.mirror-caret{position:relative;display:inline}.mirror-caret:before{content:"";position:absolute;height:19px;top:0;left:-1px;border-left:2px solid #326946;box-shadow:0 0 0 1px #fff8;z-index:2}textarea{background:transparent;resize:none;outline:none;color:transparent;-webkit-text-fill-color:transparent;caret-color:#265e40;z-index:2;overflow:auto;scrollbar-width:thin;scrollbar-color:#d8dfd0 transparent}textarea::selection{background:transparent;color:transparent}textarea::-moz-selection{background:transparent;color:transparent}.editor-body:focus-within{box-shadow:inset 0 0 0 1px #b8cfa1}.pane-footer{display:flex;justify-content:space-between;align-items:center;gap:8px;height:40px;padding:0 22px;font-size:9px;color:#8b9783;border-top:1px solid #f0f3e9;white-space:nowrap}.pane-footer>span:first-child{display:flex;align-items:center;gap:7px}.pane-footer>span:last-child{font-size:9px;color:#a1aa99}.tiny-dot{height:4px;width:4px;background:#a6b78e}.statusbar{height:41px;background:#eff4e9;border-top:1px solid #e2e9d9;display:flex;justify-content:space-between;align-items:center;padding:0 23px;font-size:10px;color:#728365}.statusbar>div{display:flex;align-items:center;gap:8px}.sync-icon{color:#658553;font-size:17px}.status-divider{color:#b7c1a8;margin:0 6px}#selection-status,#encoding-status{font:9px var(--mono);letter-spacing:0}.notice{margin-top:12px;padding:12px 16px;border:1px solid #e7d6ac;background:#fff9e9;border-radius:7px;color:#8c6427;font-size:12px;line-height:1.6}.notice[hidden]{display:none}.notice.error{background:#fff3ef;border-color:#edcbbd;color:#975d45}.below-editor{display:flex;justify-content:space-between;align-items:center;padding:24px 0 28px;gap:25px}.selection-hint{display:flex;align-items:center;gap:13px}.hint-icon{border:1px solid #dce5d2;background:#edf2e6;display:grid;place-items:center;border-radius:8px;width:33px;height:34px;font-size:20px;color:#80946c;flex:none}.selection-hint p{margin:0;font-size:11px;line-height:1.8;color:#8b9784}.selection-hint strong{font-weight:550;color:#6c7f60}.example-button{border:1px solid #dce3d5;border-radius:6px;background:transparent;padding:9px 12px;font-size:10px;color:#7f8f70;white-space:nowrap}.example-button span{margin-right:5px;font-size:15px}.inspector{border:1px solid #e0e6d8;border-radius:9px;display:grid;grid-template-columns:1.3fr 1fr 1.3fr 1fr 1fr;background:#f9fbf5;padding:22px 24px}.inspector-title{display:flex;align-items:center;gap:12px}.inspector-icon{font-size:27px;color:#91a57b}.inspector-title>div{display:flex;flex-direction:column;gap:7px}.inspector .eyebrow{font-size:8px;letter-spacing:1px}.inspector-title strong{font:11px var(--mono);color:#6d805f}.inspector-value{display:flex;flex-direction:column;gap:9px;border-left:1px solid #e3e9db;padding-left:26px}.inspector-value>span{font-size:8px;color:#93a186;letter-spacing:1px}.inspector-value strong{font:16px var(--mono);font-weight:500;color:#5c754c;min-height:20px}.character-value strong{font-size:18px}.page-footer{display:flex;justify-content:space-between;padding:35px 0 26px;color:#a0ab96;font-size:9px;gap:15px}.page-footer i{margin:0 8px;font-style:normal;color:#c0c8b6}
.composing textarea{color:var(--ink);-webkit-text-fill-color:var(--ink)}.composing .mirror{visibility:hidden}
.inspector{display:block}.inspector-summary{display:grid;grid-template-columns:1.3fr 1fr 1.3fr 1fr 1fr}.inspector.with-utf8 .inspector-summary{grid-template-columns:1.3fr 1fr 1.3fr 1fr}.character-value[hidden],.utf8-breakdown[hidden]{display:none}.utf8-breakdown{margin-top:22px;padding-top:20px;border-top:1px solid #e0e7d7}.utf8-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.utf8-heading>span:last-child{font:10px var(--mono);color:#7f8f72}.utf8-sequence{display:flex;flex-wrap:wrap;gap:10px}.utf8-byte{flex:1 1 155px;max-width:230px;min-width:0;background:#fff;border:1px solid #e0e6d8;border-radius:7px;padding:11px 12px}.utf8-byte.is-focused{border-color:#6b8a58;box-shadow:0 0 0 1px #6b8a5820;background:#fcfef8}.utf8-byte-label{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px;color:#8c9c7e;font:8px var(--mono);margin-bottom:10px}.utf8-byte.is-focused .utf8-byte-label>span:first-child{color:#4f7541;font-weight:600}.utf8-bits{display:flex;gap:3px;align-items:center;font:19px var(--mono);font-weight:500;letter-spacing:1px;white-space:nowrap}.utf8-prefix,.utf8-data,.utf8-invalid-bits{padding:5px 6px;border-radius:3px}.utf8-prefix{color:#92601c;background:#fbedd6}.utf8-data{color:#376d4b;background:#e4f0df}.utf8-invalid-bits{color:#a05c47;background:#fbebe5}.utf8-explanation{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:13px;font-size:9px;color:#8b997e;line-height:1.8}.utf8-legend{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}.utf8-legend>span{display:flex;align-items:center;gap:5px}.utf8-legend i{width:8px;height:8px;display:inline-block;border-radius:2px}.prefix-key{background:#efd0a0}.data-key{background:#b9d7ab}.focus-key{border:1px solid #6b8a58;background:#fcfef8}#utf8-payload{overflow-wrap:anywhere;color:#7a8a6d}#utf8-payload code{font:10px var(--mono);color:#4b7956}#utf8-payload>span:last-child{font-family:var(--mono);font-size:9px}.utf8-empty{font-size:11px;color:#8b997e;padding:5px 0}.invalid-sequence .utf8-heading>span:last-child,.invalid-sequence #utf8-payload{color:#9a6549}
@media(min-width:1400px){.editor-body{height:390px}.mirror,textarea{font-size:14px}.column-label>span:nth-child(2){font-size:11px}}
@media(max-width:1100px){.app{padding:0 28px}.pane-heading{padding:0 15px}.segmented button{padding:6px}.segmented button span{display:none}.pane-footer{padding:0 13px}.pane-footer>span:last-child{max-width:210px;overflow:hidden;text-overflow:ellipsis}.intro-decoration{display:none}.mirror,textarea{font-size:12px;letter-spacing:0}.column-label>span:nth-child(2){font-size:9px}.column-label>span:last-child{display:none}.toolbar{padding:0 16px}.inspector-value{padding-left:18px}}
@media(max-width:760px){.app{padding:0 18px}.topbar{height:76px}.brand-caption,.brand-divider{display:none}.local-badge{font-size:9px}.intro{padding:33px 0 25px}h1{font-size:28px;letter-spacing:-1px}.intro p{font-size:12px;max-width:350px}.editor-columns{grid-template-columns:1fr}.byte-pane{border-right:0;border-bottom:1px solid var(--line)}.editor-body{height:235px}.pane-heading{height:64px}.mirror,textarea{font-size:13px}.column-label>span:nth-child(2){font-size:10px}.toolbar{height:53px;padding:0 11px}.file-tag{display:none}.document-name{gap:6px;font-size:10px}#file-name{max-width:140px}.toolbar-actions{gap:0}.toolbar-divider{margin:0 5px}.text-button{font-size:10px;padding:6px}.text-button>span{margin-right:2px}.statusbar{padding:0 12px;font-size:9px}#encoding-status{display:none}.pane-footer>span:last-child{max-width:none;font-size:8px}.below-editor{align-items:flex-start;gap:15px}.selection-hint p{font-size:10px}.hint-icon{display:none}.example-button{font-size:9px;padding:7px 8px}.inspector{padding:17px 12px;grid-template-columns:1fr 1fr 1.4fr 1fr}.character-value{display:none}.inspector-title{gap:5px}.inspector-icon{font-size:22px}.inspector-value{padding-left:12px}.inspector-value>span{font-size:6px;letter-spacing:.5px}.inspector-value strong{font-size:13px}.page-footer{font-size:8px;line-height:1.8;padding-top:25px}.page-footer>span:last-child{text-align:right;max-width:190px}.page-footer i{margin:0 3px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@media(max-width:760px){.inspector-summary,.inspector.with-utf8 .inspector-summary{grid-template-columns:1fr 1fr 1.4fr 1fr}.utf8-breakdown{margin-top:17px;padding-top:16px}.utf8-heading{align-items:flex-start;flex-direction:column;gap:7px}.utf8-sequence{gap:8px}.utf8-byte{flex-basis:140px;padding:10px;max-width:none}.utf8-bits{font-size:17px;letter-spacing:.5px}.utf8-explanation{gap:9px}.utf8-legend{gap:5px 10px}.utf8-legend>span{font-size:8px}}