:root{--bg-color: #1e1e2f;--card-bg: #2a2a3d;--input-bg: #3a3a50;--text-color: #e0e0f0;--accent: #87a8c9;--accent-hover: #bbe9fe;--switch-color: #6a89a7;--border-color: #444;--tooltip-color: #2e2e2e;--success-color: #9effa0;--warning-color: rgb(255, 215, 142);--error-color: #fb5d52;--font-size-title-min: 2rem;--font-size-title-max: 3rem}html{scroll-behavior:smooth}body{font-family:Fira Code,monospace;background-color:var(--bg-color);color:var(--text-color);display:flex;flex-direction:column;justify-content:center;align-items:center;margin:0}.home-container{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center}.page-title{font-size:clamp(var(--font-size-title-min),5vw + 1rem,var(--font-size-title-max));margin-bottom:1.5rem;color:var(--accent);letter-spacing:.5px;text-align:center}.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.slogan{font-size:clamp(1rem,2vw + .3rem,1.4rem);color:var(--accent);margin-top:-1rem;margin-bottom:2rem;opacity:.8;text-align:center;font-style:italic}.converter{background-color:var(--card-bg);padding:2rem;border-radius:1rem;box-shadow:0 8px 20px #0000004d;display:flex;align-items:center;gap:2rem;max-width:960px}.input-group{display:flex;flex-direction:column;gap:.5rem}.input-wrapper{position:relative;display:flex;align-items:center}input{background-color:var(--input-bg);border:1px solid var(--border-color);border-radius:1rem;padding:1rem 2.6rem 1rem .8rem;font-size:4rem;color:var(--text-color);width:100%;max-width:100%}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{appearance:textfield}input:focus{outline:none;border-color:var(--accent)}.label{font-weight:700;font-size:clamp(1.8rem,1vw + .3rem,2.2rem);color:var(--accent)}.copy-icon{position:absolute;right:1rem;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}.copy-icon svg{width:1.5rem;height:1.5rem;fill:var(--accent);transition:transform .2s ease}.copy-icon:hover svg{color:var(--accent-hover);transform:scale(1.06)}.switch-btn{width:clamp(2.4rem,6vw + .3rem,3rem);height:clamp(2.4rem,6vw + .3rem,3rem);color:var(--switch-color);font-size:clamp(2.4rem,6vw + .3rem,2.8rem);background:none;border:none;cursor:pointer;transition:transform .3s ease;align-self:center;justify-self:center}.switch-btn span{transition:.3s ease}.switch-btn:hover{color:var(--accent-hover);transform:scale(1.03)}.flipped{transform:rotate(180deg)}.copy-feedback{position:absolute;top:50%;right:2.8rem;transform:translateY(-50%);background:var(--tooltip-color);color:var(--success-color);font-size:clamp(.8rem,2vw + .5rem,1rem);padding:2px 6px;border-radius:4px;opacity:0;pointer-events:none;z-index:1}.copy-feedback.warning{color:var(--warning-color)}.copy-feedback.visible{opacity:1}.error-msg{position:absolute;right:1rem;top:-2.5rem;color:var(--error-color);font-size:clamp(.9rem,2vw + .5rem,1.2rem);margin-top:.2rem;visibility:hidden;opacity:0;transition:opacity .2s ease}.error-msg.visible{visibility:visible;opacity:1}.bookmarklet-section{display:flex;flex-direction:column;margin-top:2rem;text-align:center}.bookmarklet-instruction{font-size:1rem;color:var(--accent);margin-bottom:.5rem;font-style:italic;opacity:.8}.bookmarklet-button-container{display:flex;align-items:center;align-self:center;width:fit-content;gap:.6rem}.bookmarklet-button{align-content:center;justify-content:center;background-color:var(--card-bg);color:var(--accent-hover);padding:.4rem;border-radius:.6rem;text-decoration:none;border:1px solid var(--border-color);font-size:1rem;transition:transform .2s ease,background-color .2s ease;box-shadow:0 4px 10px #0000004d}.bookmarklet-button:hover{background-color:var(--input-bg);transform:scale(1.05);cursor:grab}.bookmarklet-button img{display:block;width:26px;height:26px}.help-button{position:absolute;top:1.2rem;right:1.2rem;background-color:var(--card-bg);color:var(--accent);font-size:1.6rem;font-weight:700;width:2.4rem;height:2.4rem;border-radius:50%;text-align:center;line-height:2.4rem;text-decoration:none;box-shadow:0 0 0 1px var(--border-color),0 3px 8px #0003;transition:transform .2s ease,background-color .2s ease;z-index:100}.help-button:hover{background-color:var(--input-bg);transform:scale(1.05);color:var(--accent-hover)}.cta-box{margin:4rem auto 2rem;padding:2rem;max-width:750px;background:#1e1e1e;border-radius:12px;box-shadow:0 0 12px #ffa50014;text-align:center}.cta-text{font-size:1.4rem;font-weight:500;color:#ff8c00;margin-bottom:1rem}.share-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-bottom:1rem}.cta-button{padding:.5rem 1rem;background:orange;color:#1e1e1e;text-decoration:none;border:none;border-radius:8px;font-weight:600;font-size:.95rem;cursor:pointer;transition:background .3s ease}.cta-button:hover{background:#f90}.cta-button svg{vertical-align:middle;width:20px;height:20px;display:inline-block}@media (max-width: 1024px){.converter{width:100%;max-width:700px;box-sizing:border-box;margin:0 auto;padding:2rem;display:flex;flex-direction:column;flex-wrap:wrap;justify-content:center;align-items:center;gap:2rem}.input-group{width:100%;max-width:90%;align-items:center}input{font-size:3.2rem;padding:1.2rem 2.6rem 1.2rem 1rem}.label{font-size:1.6rem}}@media (max-width: 768px){body{padding-top:2rem}.converter{padding:1.5rem 1rem;gap:1.2rem;width:95%;display:flex;flex-direction:column}input{font-size:2.6rem;padding:1rem 2.4rem 1rem .8rem}.label{font-size:1.4rem}.switch-btn{font-size:2.4rem;width:2.6rem;height:2.6rem}.copy-icon svg{width:1.4rem;height:1.4rem}.help-button{top:1rem;right:1rem;width:2rem;height:2rem;font-size:1.4rem;line-height:2rem}}@media (max-width: 480px){body{padding:2rem .5rem .5rem;justify-content:flex-start}.page-title{font-size:1.8rem;margin-bottom:1rem}.slogan{font-size:1rem;margin-bottom:1.2rem}.converter{padding:1rem;gap:1rem;box-shadow:none;border-radius:.5rem;width:95%;display:flex;flex-direction:column}.input-group{width:100%;max-width:100%}input{font-size:2.2rem;padding:1rem 2rem 1rem .8rem}.label{font-size:1.2rem}.switch-btn{font-size:2rem;width:2.2rem;height:2.2rem}.copy-icon svg{width:1.2rem;height:1.2rem}.copy-feedback,.error-msg{font-size:.8rem;right:2.2rem}.help-button{top:.8rem;right:.8rem;width:1.6rem;height:1.6rem;font-size:1.2rem;line-height:1.6rem}footer p{font-size:.8rem;text-align:center;padding-top:1rem}}