html,body{margin:0;height:100%;background:#020403;overflow:hidden;touch-action:none;color:#8fd18a}
#c{position:fixed;inset:0;width:100%;height:100%;display:block}
#ui{position:fixed;inset:0;z-index:5;pointer-events:none}
#brand{position:fixed;top:40px;left:20px;font:11px Inter,system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#8fd18a;opacity:.7}
#label{position:fixed;left:0;right:0;bottom:12vh;text-align:center;pointer-events:none}
#writeBtn{pointer-events:auto;background:none;border:1px solid rgba(143,209,138,.45);color:#8fd18a;font:13px ui-monospace,monospace;letter-spacing:.28em;text-transform:uppercase;padding:14px 28px;cursor:pointer;min-height:48px;text-shadow:0 0 8px rgba(143,209,138,.4)}
#writeBtn:active{background:rgba(143,209,138,.12)}
#editor{position:fixed;inset:0;z-index:10;background:#020403;display:flex;flex-direction:column;pointer-events:auto;touch-action:auto}
#editor[hidden]{display:none!important}
#editor header{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(143,209,138,.16);font:13px ui-monospace,monospace;letter-spacing:.2em;text-transform:uppercase}
#editor header button{background:none;border:0;color:#8fd18a;font:inherit;cursor:pointer;padding:8px;min-width:44px;min-height:44px}
#list{list-style:none;margin:0;padding:0;max-height:28vh;overflow:auto;border-bottom:1px solid rgba(143,209,138,.12)}
#list li{padding:10px 16px;cursor:pointer;opacity:.65;font:14px/1.3 Inter,system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:2px solid transparent}
#list li.on{opacity:1;border-left-color:#8fd18a;background:rgba(143,209,138,.07)}
#ed{flex:1;width:100%;box-sizing:border-box;background:transparent;border:0;outline:0;resize:none;color:#8fd18a;font:18px/1.55 ui-monospace,monospace;padding:18px 20px;caret-color:#8fd18a}
@media (max-width:767px){#brand{top:38px;font-size:10px}}