body,html{background:#f5f7fb;color:#222;font-family:Trebuchet MS,sans-serif;margin:0;min-height:100%;padding:0}body{align-items:center;justify-content:center;min-height:100vh}.wrap,body{display:flex}.wrap{background:#fff;border:1px solid #d9e0ea;border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.06);box-sizing:border-box;flex-direction:column;gap:15px;padding:24px;text-align:center;width:min(420px,calc(100vw - 32px))}h2{font-size:28px;font-weight:700;margin:0 0 20px}.actions{display:flex;gap:15px}.output,button{background:#f8fafc;border:1px solid #c9d3e0;border-radius:12px;box-sizing:border-box}button{cursor:pointer;flex:1;font-size:17px;padding:10px 15px;transition:background .15s ease,transform .15s ease}button:hover{background:#eef3f9}button:active{transform:scale(.98)}.output{background:#f8fafc;border:1px solid #c9d3e0;border-radius:12px;box-sizing:border-box;cursor:pointer;display:block;font-size:14px;min-height:120px;padding:10px;text-align:left;transition:background .15s ease,transform .1s ease;white-space:pre-wrap;width:100%;word-break:break-word}.output:hover{background:#f1f5f9}.output:active{background:#e2e8f0}#popup{background:#222;border-radius:10px;color:#fff;font-size:13px;left:0;opacity:0;padding:6px 10px;pointer-events:none;position:fixed;top:0;transform:translate(12px,12px);transition:opacity .15s ease;z-index:1000}