:root{color-scheme:dark;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;color:#edf2fa;background:#0a101a;font-synthesis:none}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}header{height:82px;border-bottom:1px solid #233044;display:flex;align-items:center;justify-content:space-between;padding:0 max(5vw,20px)}.logo{font-size:24px;font-weight:850;letter-spacing:-1px;display:flex;align-items:center;gap:12px}.logo span{font-size:10px;letter-spacing:0;color:#6de0c7;border:1px solid #265c57;padding:5px 7px;border-radius:6px}.tag{font-size:10px;letter-spacing:1.5px;color:#889cb3}main{max-width:1390px;margin:auto;padding:50px max(5vw,20px) 20px}.intro{position:relative;margin-bottom:36px}.eyebrow{color:#67d3c0;font-size:10px;font-weight:700;letter-spacing:1.8px}h1{font-size:clamp(36px,5.3vw,62px);line-height:1.04;letter-spacing:-2px;font-weight:650;margin:16px 0 20px}h1 span{color:#7790b0}.intro>p:last-child{color:#9bacc2;max-width:420px;line-height:1.6;font-size:14px}.layout{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(0,1.55fr);gap:22px;align-items:start}.card{border:1px solid #28374c;border-radius:18px;background:#101a29;overflow:hidden}.settings{padding:25px}.heading{display:flex;align-items:center;gap:10px;margin-bottom:25px}h2{font-size:15px;font-weight:600;margin:0}.number{display:inline-grid;place-items:center;width:27px;height:27px;background:#1e3045;border:1px solid #324660;border-radius:7px;color:#9eb2ce;font-size:10px}.local{margin-left:auto;font-size:8px;letter-spacing:.7px;color:#67d3c0}label{display:block;font-size:12px;color:#b2c2d6;margin:0 0 10px}select,textarea,input{font:inherit;font-size:13px;color:#e1eaf6;background:#0c1421;border:1px solid #2a3d54;border-radius:9px;outline:none;width:100%;padding:12px 13px;line-height:1.5}select:focus,textarea:focus,input:focus{border-color:#5dc7b4;box-shadow:0 0 0 3px #3e9e8e18}select{margin-bottom:21px}textarea{resize:vertical;overflow-wrap:anywhere}button{font:inherit;cursor:pointer}.primary{width:100%;background:#72dfc8;color:#09241d;border:0;border-radius:9px;padding:14px 16px;font-size:13px;font-weight:700;margin-top:17px;display:flex;justify-content:space-between}.primary:hover{background:#9ae9d8}.small{font-size:11px;color:#8194ae;line-height:1.7;margin:16px 0 26px}.examples{border-top:1px solid #29374b;padding-top:19px}h3{font-size:11px;font-weight:500;color:#8fa2ba;margin:0 0 12px}#examples{display:flex;flex-wrap:wrap;gap:7px}.examples button,.output button{background:#1a293c;border:1px solid #2d415c;color:#c0cee0;border-radius:7px;padding:7px 10px;font-size:10px}.examples button:hover,.output button:hover{background:#2c425d}.preview>.heading{padding:22px 23px;margin:0}.screen{aspect-ratio:16/9;background:#060b12;position:relative;min-height:250px}#placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#3d536c}#placeholder p{font-size:14px;color:#899eb7;margin:17px 0 8px}#placeholder span{font-size:10px;color:#58708b}iframe{border:0;width:100%;height:100%;display:block}.output{padding:22px 24px 25px}.output-label{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px}.output-label label{margin:0}.output textarea{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10px;color:#9ebbd2;margin-bottom:20px}.output input{font-size:11px}#open{display:inline-block;color:#68d2bf;font-size:11px;margin-top:14px}footer{display:flex;justify-content:space-between;gap:12px;font-size:10px;color:#59718e;margin-top:28px;padding:18px 0}#feedback{font-size:12px;color:#72dfc8;line-height:1.6;margin-top:15px;min-height:20px}[hidden]{display:none!important}@media(min-width:1000px){.intro{padding-bottom:8px}.intro>p:last-child{position:absolute;left:52%;bottom:6px}}@media(max-width:850px){main{padding-top:32px}.layout{grid-template-columns:1fr}.intro{margin-bottom:27px}.screen{min-height:210px}footer{flex-direction:column}.settings{padding:21px}.tag{font-size:8px}.local{font-size:7px}header{height:69px}}