:root{font-family:Inter,Segoe UI,Arial,sans-serif;color:#17213b;background:#f5f6fb;--p:#582477;--line:#dfe3ed}*{box-sizing:border-box}body{margin:0}body>header{height:76px;padding:0 max(22px,calc((100vw - 1180px)/2));display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid var(--line)}header a{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;font-weight:900}header a>b{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#25b5c5,#762d96);color:#fff;font-size:22px}header a span{display:grid;letter-spacing:.12em}header a small{font-size:9px;color:#73798a}header>button{border:0;background:#eee8f2;color:var(--p);padding:10px 14px;border-radius:10px;font-weight:800}main{max-width:1180px;margin:auto;padding:65px 22px}.intro{max-width:820px}.intro>small{color:#773391;font-weight:900;letter-spacing:.15em}.intro h1{font-size:clamp(46px,7vw,78px);line-height:1;margin:12px 0}.intro p{font-size:19px;color:#667086}.box{margin-top:38px;background:#fff;border:1px solid var(--line);border-radius:25px;overflow:hidden;box-shadow:0 20px 60px #27123812}.tools{display:grid;grid-template-columns:1fr 50px 1fr 1fr;gap:9px;padding:15px;border-bottom:1px solid var(--line)}select,input{padding:12px;border:1px solid var(--line);border-radius:10px;background:#fff;font:inherit}.tools button{border:0;border-radius:10px;background:#eee8f2;color:var(--p);font-size:21px}.panes{display:grid;grid-template-columns:1fr 1fr;min-height:330px}.panes>label,.panes>div{position:relative;padding:20px}.panes>label{border-right:1px solid var(--line)}textarea{width:100%;height:275px;resize:none;border:0;outline:0;font:20px/1.55 inherit}.panes label small{position:absolute;right:20px;bottom:12px;color:#8b91a0}.panes>div{background:#faf8fc}.panes output{white-space:pre-wrap;font-size:20px;line-height:1.55}.panes>div button{position:absolute;right:18px;bottom:13px}.actions{display:flex;gap:10px;padding:15px;border-top:1px solid var(--line)}button{cursor:pointer}.actions button{padding:13px 18px;border:1px solid #d6cade;border-radius:10px;background:#fff;color:var(--p);font-weight:900}.actions button:first-child{background:linear-gradient(135deg,#542174,#863ba1);color:#fff}.actions input{margin-left:auto;width:330px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:30px}.cards article{padding:22px;border:1px solid var(--line);border-radius:17px;background:#fff}.cards p{color:#6d7485}aside{position:fixed;right:0;top:0;width:min(410px,92vw);height:100vh;padding:22px;background:#fff;box-shadow:-20px 0 70px #1c0c2b44;z-index:10}aside>button:first-child{float:right;border:0;border-radius:50%;width:38px;height:38px;font-size:24px}#historyList{display:grid;gap:8px;max-height:75vh;overflow:auto}#historyList button{text-align:left;border:0;border-radius:11px;padding:12px;display:grid;gap:5px}#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#21102d;color:#fff;padding:13px 18px;border-radius:12px}@media(max-width:760px){main{padding-top:40px}.tools{grid-template-columns:1fr 45px 1fr}.tools select:last-child{grid-column:1/-1}.panes{grid-template-columns:1fr}.panes>label{border-right:0;border-bottom:1px solid var(--line)}.actions{flex-wrap:wrap}.actions input{width:100%;margin:0}.cards{grid-template-columns:1fr}.intro h1{font-size:48px}}
