:root{--bg-color: #FFF9E5;--card-bg: rgba(255, 255, 255, .4);--header-bg: #F7F0D5;--text-main: #5D5139;--text-dim: #8C826B;--accent: #3E8E7E;--accent-alt: #B8405E;--border: #E0D8C0;--font-mono: "Courier Prime", "Courier New", monospace;--font-sans: "Inter", system-ui, -apple-system, sans-serif}*{box-sizing:border-box}html,body{height:100%;margin:0;background-color:var(--bg-color);color:var(--text-main);font-family:var(--font-sans);line-height:1.6}#app{max-width:800px;margin:0 auto;padding:40px 20px}header{text-align:center;margin-bottom:40px}header h1{font-family:var(--font-mono);font-weight:700;letter-spacing:-1px;margin:0 0 10px;font-size:2.5rem}header p{color:var(--text-dim);text-transform:uppercase;letter-spacing:2px;font-size:.8rem;margin:0}main{display:flex;flex-direction:column;gap:24px}.card{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:24px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 4px 20px #5d51390d}.card h2{font-family:var(--font-mono);font-size:1.2rem;margin:0 0 20px;display:flex;align-items:center;gap:10px}.arrow{color:var(--accent)}.input-group{display:flex;gap:16px;margin-bottom:24px;flex-wrap:wrap}.field{flex:1;min-width:200px;display:flex;flex-direction:column;gap:6px}.field.offset-field{flex:0 0 120px;min-width:120px}.field.full-width{flex:1 1 100%}label{font-size:.75rem;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px}input{background:#fffc;border:1px solid var(--border);border-radius:6px;padding:12px 16px;color:var(--text-main);font-family:var(--font-mono);font-size:1rem;outline:none;transition:border-color .2s,box-shadow .2s}input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #3e8e7e1a}.result-area{display:flex;flex-direction:column;gap:12px}.result-box{background:#ffffff4d;border-left:3px solid var(--accent);padding:12px 16px;border-radius:0 6px 6px 0}.result-label{display:block;font-size:.7rem;color:var(--text-dim);text-transform:uppercase;margin-bottom:4px}.result-value{display:block;font-family:var(--font-mono);font-size:1.1rem;word-break:break-all;font-weight:600}footer{text-align:center;margin-top:40px;padding-top:20px;border-top:1px solid var(--border);color:var(--text-dim);font-size:.8rem}@media (max-width: 600px){#app{padding:20px 16px}header h1{font-size:1.8rem}}