body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;margin:2rem;background-color:#1e1e1e;color:#f5f5f5;line-height:1.6}h1,h2{text-align:center;color:#fff;font-weight:600}.container{display:flex;align-items:center;flex-direction:column}.input-area{margin-bottom:1.5rem;text-align:center}textarea{width:60%;height:90px;font-size:1rem;padding:.8rem;border-radius:8px;border:none;resize:vertical;color:#e0e0e0;background-color:#2c2c2c;outline:none;transition:background .3s}textarea:focus{background-color:#333}button{padding:.6rem 1.2rem;font-size:1rem;margin-top:.8rem;cursor:pointer;border:none;border-radius:6px;background-color:#3a3f44;color:#fff;font-weight:500;transition:background .3s,transform .2s}button:hover{background-color:#50565c;transform:translateY(-1px)}button:active{transform:translateY(1px)}.tokens{position:relative;margin-top:2rem;padding:1rem;width:60%;border-radius:12px;background:#ffffff0a;backdrop-filter:blur(8px) saturate(120%);-webkit-backdrop-filter:blur(8px) saturate(120%);border:1px solid rgba(255,255,255,.08);box-shadow:0 8px 30px #00000073;color:#fff;overflow:hidden}.tokens:before{content:"";position:absolute;left:0;right:0;top:0;height:40%;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent);border-top-left-radius:12px;border-top-right-radius:12px}.tokens:hover{transform:translateY(-2px);transition:transform .18s ease,backdrop-filter .18s ease;backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%)}.token{display:inline-block;padding:.4rem .7rem;margin:.25rem;border-radius:5px;font-weight:700;color:#fff;background-color:#4a90e2;transition:background .3s}.token:hover{background-color:#357abd}.mapping{position:relative;margin-top:1rem;width:60%;padding:1rem;border-radius:12px;background:#ffffff0a;backdrop-filter:blur(8px) saturate(120%);-webkit-backdrop-filter:blur(8px) saturate(120%);border:1px solid rgba(255,255,255,.06);box-shadow:0 8px 30px #00000073;color:#fff;overflow:hidden}.mapping:before{content:"";position:absolute;left:0;right:0;top:0;height:36%;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent);border-top-left-radius:12px;border-top-right-radius:12px}.mapping:hover{transform:translateY(-3px);transition:transform .18s ease,backdrop-filter .18s ease;backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%)}.mapping table{width:100%;border-collapse:collapse}.mapping th,.mapping td{border:1px solid #444;padding:8px;text-align:center}.mapping th{background-color:#3a3a3a;color:#f1f1f1}.mapping td{background-color:#262626;color:#ccc}