*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #0D0D0D;--bg-secondary: #1A1A1A;--bg-tertiary: #262626;--accent: #6366F1;--accent-hover: #818CF8;--accent-dark: #4F46E5;--text-primary: #FAFAFA;--text-secondary: #A3A3A3;--text-tertiary: #737373;--border: #2A2A2A;--shadow: rgba(0, 0, 0, .3)}body{font-family:Space Grotesk,-apple-system,BlinkMacSystemFont,Helvetica Neue,sans-serif;background:var(--bg-primary);color:var(--text-primary);height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.container{width:100%;max-width:800px;padding:2rem;display:flex;flex-direction:column;justify-content:center;gap:2rem}header{text-align:center}h1{font-size:2.5rem;font-weight:700;letter-spacing:-.03em;margin-bottom:.5rem;background:linear-gradient(135deg,var(--text-primary) 0%,var(--text-secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{font-size:1rem;color:var(--text-tertiary);font-weight:400;letter-spacing:.15em;text-transform:uppercase}.converter{background:var(--bg-secondary);border-radius:2rem;padding:2.5rem;border:1px solid var(--border);display:flex;flex-direction:column;gap:2rem;box-shadow:0 8px 32px var(--shadow);position:relative;overflow:hidden}.converter:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.3}.input-group{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.input-wrapper{position:relative;display:flex;flex-direction:column;gap:.5rem}.input-wrapper label{font-size:.75rem;font-weight:600;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.12em;padding-left:.25rem}.input-wrapper input{background:var(--bg-tertiary);width:100%;border:1.5px solid var(--border);border-radius:1rem;padding:.75rem;font-size:1.25rem;font-weight:600;color:var(--text-primary);font-family:Space Grotesk,sans-serif;transition:all .3s cubic-bezier(.4,0,.2,1);text-align:center;letter-spacing:-.02em}.input-wrapper input:hover{border-color:#6366f14d;background:var(--bg-secondary)}.input-wrapper input:focus{outline:none;border-color:var(--accent);background:var(--bg-primary);box-shadow:0 0 0 4px #6366f11a;transform:translateY(-2px)}.input-wrapper input::placeholder{color:var(--text-tertiary);opacity:.4}.input-wrapper input::-webkit-outer-spin-button,.input-wrapper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.input-wrapper input[type=number]{-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}.base-size{display:flex;align-items:center;justify-content:center;gap:1rem;padding-top:1.5rem;border-top:1px solid var(--border);position:relative}.base-size:before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%);width:60px;height:1px;background:var(--accent);opacity:.5}.base-size label{font-size:.75rem;font-weight:600;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.12em}.base-size input{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-dark) 100%);border:none;border-radius:.75rem;padding:.75rem 1.25rem;font-size:1.125rem;font-weight:700;color:var(--text-primary);font-family:Space Grotesk,sans-serif;width:90px;text-align:center;transition:all .3s cubic-bezier(.4,0,.2,1);letter-spacing:-.01em;box-shadow:0 4px 12px #6366f133}.base-size input:hover{background:linear-gradient(135deg,var(--accent-hover) 0%,var(--accent) 100%);transform:translateY(-2px);box-shadow:0 6px 20px #6366f14d}.base-size input:focus{outline:none;box-shadow:0 0 0 4px #6366f133,0 8px 24px #6366f14d;transform:translateY(-2px)}.base-size input::-webkit-outer-spin-button,.base-size input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.base-size input[type=number]{-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}.base-size .unit{font-size:.875rem;font-weight:600;color:var(--text-tertiary);letter-spacing:.02em}footer{display:flex;flex-direction:column;gap:1.5rem;align-items:center}.info{font-size:.8125rem;color:var(--text-tertiary);font-weight:400;text-align:center;letter-spacing:.02em}.external-links{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;align-items:center}.external-link{display:inline-flex;align-items:center;padding:.375rem .875rem;background:transparent;border:1px solid transparent;border-radius:.5rem;color:var(--text-tertiary);text-decoration:none;font-size:.75rem;font-weight:500;transition:all .2s ease;letter-spacing:.02em}.external-link:hover{color:var(--text-secondary);background:#ffffff08;border-color:var(--border)}.external-link:active{transform:scale(.98)}.credit{font-size:.75rem;color:var(--text-tertiary);text-align:center;letter-spacing:.02em;opacity:.7}.author-link{color:var(--text-secondary);text-decoration:none;font-weight:500;transition:color .2s ease}.author-link:hover{color:var(--text-primary)}@media (max-width: 640px){.container{padding:1.5rem;gap:2.5rem}h1{font-size:2.25rem}.subtitle{font-size:.875rem}.converter{padding:2rem;gap:2rem}.input-group{grid-template-columns:1fr;gap:1rem}.input-wrapper input{font-size:1.5rem;padding:1rem}.external-links{gap:.375rem}.external-link{font-size:.6875rem;padding:.3125rem .75rem}.credit{font-size:.6875rem}}@media (max-width: 400px){.converter{padding:1.5rem}.input-wrapper input{font-size:1.25rem}}